[size=18pt]Modern web development[/size]
A tutorial series where we will try to develop something together. We can decide as we go where we will take this, but we’re starting small 
Setting up the project
Create a project directory (wherever you like), and navigate there.
Create a public folder inside the project directory.
Then create an index.php file inside project/public
[php]<?php
echo ‘Welcome home’;[/php]
Preparing for the development server
We will not be using WAMP/XAMPP! Instead we will run a virtual machine that will function as this projects web server. We still need to install a couple of applications on our host machine.
Install Virtualbox
VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use.[url=http://download.virtualbox.org/virtualbox/4.3.20/VirtualBox-4.3.20-96997-Win.exe]Windows[/url] | [url=http://download.virtualbox.org/virtualbox/4.3.20/VirtualBox-4.3.20-96996-OSX.dmg]OSX[/url] | [url=https://www.virtualbox.org/wiki/Linux_Downloads]Linux[/url]
Install Vagrant
The primary function of the Vagrantfile is to describe the type of machine required for a project, and how to configure and provision these machines. Vagrantfiles are called Vagrantfiles because the actual literal filename for the file is Vagrantfile (casing doesn't matter).Vagrant is meant to run with one Vagrantfile per project, and the Vagrantfile is supposed to be committed to version control. This allows other developers involved in the project to check out the code, run vagrant up, and be on their way. Vagrantfiles are portable across every platform Vagrant supports.
Windows | OSX | Linux
You can browse existing boxes available for use here, you can of course create your own boxes if you want to.
https://vagrantcloud.com/discover/featured
We’ll use Scotch Box for this project!
https://vagrantcloud.com/scotch/boxes/box
Setting up our virtual server
Let’s create a Vagrantfile for our scotch/box server, this should also be in the root project directory
Save as Vagrantfile in project root. Note the box name “scotch/box” that says which box we are using, the ip address the vm will be assigned, and the vb.customize option that sets the vms memory to a gig ram. If this is a problem you can just comment out that line by prepending a #
[code]# -- mode: ruby --
vi: set ft=ruby :
VAGRANTFILE_API_VERSION = “2”
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
config.vm.box = “scotch/box”
config.vm.network “private_network”, ip: “192.168.33.10”
config.vm.hostname = “todo”
config.vm.synced_folder “.”, “/var/www”, :mount_options => [“dmode=777”, “fmode=666”]
config.vm.provider “virtualbox” do |vb|
vb.customize [“modifyvm”, :id, “–memory”, “1024”]
end
end[/code]
Trying it out
Next, from the project root, run vagrant up. After some work (note: first time it will have to download the vm so it will take longer) you should have a web server running!
Visit http://192.168.33.10 and you should see
Cool!
If you think about it, this is actually kind of cool. Now that we have virtualbox and vagrant installed, we can just add a Vagrantfile in a folder, and run vagrant up, and it will serve the contents of that folder with whatever box we want! We have not spent a second setting up a web server, php, mysql, or file sharing between the virtual machine and the host machine. It is all done for us!
Starting our project
Now we need to ssh into the box, on Linux/OSX you can just do vagrant ssh when in the project root dir. On windows you need to use either putty (user: vagrant, pass: vagrant), or set up an environmental path to a ssh.exe executable.
Navigate to /var/www, most of our work on the vm will be done from here.
vagrant@todo:~$ cd /var/wwwSetting up the package manager, and dependencies.
We will use Composer as our package manger to get PHP dependencies
Composer is a tool for dependency management in PHP. It allows you to declare the dependent libraries your project needs and it will install them in your project for you.
Initialize composer, and fill out fields
vagrant@todo:/var/www$ composer init
If you noticed it complained Composer needed an update, let’s do that.
vagrant@todo:/var/www$ sudo composer self-update
All right, now we have Composer set up, and we should have a composer.json file in the document root that looks like this:
We can find Composer / Packagist packages at packagist.org.
Installing a framework
We’ll use this one as a base framework as it provides us with simple but effective router and params handling while still beeing slim/fast.
https://packagist.org/packages/mikecao/flight
To install the dependency we run
vagrant@todo:/var/www$ composer require mikecao/flightNote how the composer.json file changed when we added a dependency
Setting up the framework
Please open http://flightphp.com/ and refer to it as docs for the framework.
Flight, like most frameworks include a router that wants all requests to be routed through it. So we’ll add a .htaccess file in /project/public that will route all requests through index.php
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [QSA,L]
Our first route
In index.php we change our Welcome home to
[php]<?php
// this is composers autoloader, it will automatically let us load all installed dependencies.
require ‘…/vendor/autoload.php’;
// Flight is automatically available since we have installed it through composer. No need to require Flight on its own.
Flight::route(’/’, function() {
echo ‘FlightPHP says hello!’;
});
Flight::start();[/php]
That’s it! If you now go to http://192.168.33.10 you should now be greeted by Flight!
A route with a parameter!
Let’s try another route, with a param!
[php]<?php
require ‘…/vendor/autoload.php’;
Flight::route(’/’, function() {
echo ‘FlightPHP says hello!’;
});
Flight::route(’/hello/@name’, function($name) {
echo 'Hello ’ . $name;
});
Flight::start();[/php]
If you now visit http://192.168.33.10/hello/phphelp you will get a personal greeting! Change phphelp to your name to get a very personal greeting
In just a few lines of code we have a working router that automatically parses potential variables in the route. Neat!
That’s it for this time
Next time we will set up more advanced routes, and start creating some views.
How about a view/template system where you can extend a base template, swap out different blocks on demand, and auto escape all variables?
It’s all coming, next time on modern web development.