Creating a Full-blown MVC Web App using PHP5 or PHP7 & Ignition-Go
- Assumed Knowledge or Pre-reqs: Basic PHP knowledge; familiarity with the MVC pattern
- Ideal for: PHP newbies, ASP.net MVC developers wanting to build open source or PHP app
Part 1 of 2: Setting Up a Solid Framework
The Goal of this Tutorial
This tutorial will walk you through the creation of a simple but full blown web application. In Step 1, we’ll be getting and installing a framework, creating and configuring a database, and setting up the main web app with a login screen. In Step 2, we will be creating an application module to list, add, edit, and delete contacts.
What You'll Need Before We Start
You'll need to have:
A running HTTP Web Server. We’re going to assume you’re using Apache, though the steps for using other servers should be very similar. We might have to play a little with the server configuration. Make sure you have PHP 5.5, 5.6 or 7.x installed and configured.
A database server. We’re going to be using MySQL server (or MariaDB) in this tutorial. You’ll need to know enough about SQL in order to create an empty database. Since we’re using SQL, also make sure that you have the pdo_mysql or mysqli extensions enabled in PHP.
Basic PHP knowledge. Any object-oriented programming you’ve done in any language is also helpful.
Finally, you’ll need a basic knowledge of the MVC (Model-View-Controller) programming pattern. A quick overview can be found using Google.
Optional: install GIT version control (see here)
What We are Using
The purpose of this setup is for an enterprise-class web application. There are lots of frameworks out there. But these days, for enterprise apps, there are two major foundational frameworks from which many starter frameworks are based on: Laravel and Codeigniter. So then you need to choose which of these starter frameworks or foundations to build on.
For this tutorial, we chose an up-and-coming framework called Ignition-Go because it is similar to a popular one we used to use for many years called Bonfire (and this author is a major contributor). Ignition-Go is modular and has a GUI code generator. Both of the aforementioned are Codeigniter-based. Codeigniter is very easy to work with and have intuitive classes for new PHP developers, especially if you come from a ASP.net MVC background. It's very stable, and now has seen a recent new lease on life with a 3.x release and a new version 4.x in the works.
Step 1: Get the framework
The first step is to get the framework. Ignition-Go includes Codeigniter so it is one stop shopping. To download it and review the documentation beyond this tutorial, visit the project on GitHub: https://github.com/ci-blox/Ignition-Go and download the latest release package.
If you have GIT, You can also clone the repository using the command line after navigating to your web server htdocs folder:
git clone git://github.com/ci-blox/Ignition-Go igo
Otherwise, unzip the package to a new folder named "igo" in the htdocs folder of your web server or extract it to a directory on your local machine and copy and paste it under htdocs/igo.
Step 2: NPM
Install NPM node.js: package manager for node modules if you don't have it. See https://nodejs.org/en/
Step 3: Change directory
Open a command line and change directory to the new site folder igo. Example: cd igo
Step 4: Bower
Install Bower manager for bower components. Type:
npm install -g bower
Step 5: NPM & Bower components
Install all the NPM and bower components. Type:
Then after that...
(hint: more should be downloading other than shown; as in if the list is longer do not worry)
Step 6: Gulp
Install and run 'gulp' (note that gulp will run continuously in "watch"mode, watching for css and js changes). Type:
npm install gulp
npm install gulp-cli -g
(gulp-cli -g allows you to put forth a command line interface)
Step 7: MySQL
Create an empty MySQL database called
Example: use HeidiSQL and create both a database and a user with privileges to new database
Step 8: Run Gulp
Run 'gulp' (note that gulp will run continuously in 'watch' mode, watching for css and js changes).
Then after a certain amount of data loads, this should be the end result on the bottom:
Step 9: Result
In your browser, go to /install/init under your web root, which would be http://localhost:8080/install/init if you used gulp as depicted above, to finish using install wizard.
Note: alternatively, if you had created virtual host igotestlocal.com, then you would go to http://igotestlocal.com/install/init in your browser.
If all goes right, this is what you will see when you go back to the web root:
Watch out for Part 2!
We're always available to answer any questions you may have at email@example.com.