Modern web development - let's develop something together


#1

[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 :slight_smile:

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 :slight_smile:

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/www

Setting 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/flight

Note 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 :slight_smile:

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.


#2

That’s pretty comprehensive, covering a lot in one bite - vm, vagrant, composer, framework.
Lost me at the vagrant download, but someday I’ll try it.

Thanks!


#3

Developing using a Vagrant vm is actually easier than setting up wamp/xampp, strongly suggest you give it a spin :slight_smile:


#4

I don’t know about easier, but it sure is interesting so far…:slight_smile: At least I’m dusting off my Linux a little bit. LOL ;D


#5

After installing virtualbox/vagrant I can check out any project that uses vagrant from git and hit “vagrant up” in my IDE. Doesn’t get much simpler than that ^^


#6

Well last night, I had Virtualbox and Vagrant installed, did vagrant up got URL not found, this morning tried it again now it says trying to connect but never does. Something about SSH being the last. Oh well, if it’s simple I must be stupid (Joking).


#7

Just unlucky, means the repo where the box is stored is down :slight_smile:

Are you trying to use scotchbox or have you found some other one you wanted to try?