# Modern web development - let's develop something together

**URL:** <https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708>\
**Category:** The Occasional Tutorial\
**Created:** [November 24, 2014, 10:49pm UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708 "2014-11-24T22:49:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JimL](https://www.phphelp.com/user_avatar/www.phphelp.com/jiml/32/1842_2.png) [@JimL](https://www.phphelp.com/u/JimL)\
**Post date:** [November 24, 2014, 10:49pm UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708/1 "2014-11-24T22:49:01Z")

</div>

[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](https://dl.bintray.com/mitchellh/vagrant/vagrant_1.6.5.msi) | [OSX](https://dl.bintray.com/mitchellh/vagrant/vagrant_1.6.5.dmg) | [Linux](https://www.vagrantup.com/downloads.html)

You can browse existing boxes available for use here, you can of course create your own boxes if you want to.

> **[HashiCorp Cloud Platform](https://portal.cloud.hashicorp.com/vagrant/discover/discover/featured)**

We’ll use Scotch Box for this project!

> **[HashiCorp Cloud Platform](https://portal.cloud.hashicorp.com/vagrant/discover/scotch/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](http://192.168.33.10) and you should see  
[![](http://s21.postimg.org/hs28gpb53/Screenshot_from_2014_11_24_22_26_25.png)](http://postimg.org/image/ujgen7kwz/full/)

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.  
[![](http://s28.postimg.org/cvxn4p7l9/Screenshot_from_2014_11_24_22_33_36.png)](http://postimg.org/image/g2s6obs15/full/)

Navigate to /var/www, most of our work on the vm will be done from here.

```auto
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

```auto
vagrant@todo:/var/www$ composer init
```

[![](http://s30.postimg.org/qw7i2499d/Screenshot_from_2014_11_24_22_38_06.png)](http://postimg.org/image/9voltfw7x/full/)

If you noticed it complained Composer needed an update, let’s do that.

```auto
vagrant@todo:/var/www$ sudo composer self-update
```

[![](http://s13.postimg.org/5c1xz9nzr/Screenshot_from_2014_11_24_22_44_36.png)](http://postimg.org/image/7gmb0cpmb/full/)

All right, now we have Composer set up, and we should have a composer.json file in the document root that looks like this:

[![](http://s30.postimg.org/vfsxf45wh/Screenshot_from_2014_11_24_22_42_51.png)](http://postimg.org/image/rw6zpb36l/full/)

We can find Composer / Packagist packages at [packagist.org](http://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.

> **[mikecao/flight - Packagist.org](https://packagist.org/packages/mikecao/flight)**
>
> Flight is a fast, simple, extensible framework for PHP. Flight enables you to quickly and easily build RESTful web applications. This is the maintained fork of mikecao/flight

To install the dependency we run

```auto
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/](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](http://192.168.33.10) you should now be greeted by Flight!

[![](http://s4.postimg.org/daccerz8t/Screenshot_from_2014_11_24_22_55_35.png)](http://postimg.org/image/917mclvzd/full/)

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](http://192.168.33.10/hello/phphelp) you will get a personal greeting! Change phphelp to your name to get a very personal greeting 🙂

[![](http://s17.postimg.org/ukfxdug8f/Screenshot_from_2014_11_24_22_58_38.png)](http://postimg.org/image/5r6dd6x7v/full/)

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.

---

<div class="post-metadata">

**Author:** ![grwebugy](https://www.phphelp.com/user_avatar/www.phphelp.com/grwebugy/32/1076_2.png) [@grwebugy](https://www.phphelp.com/u/grwebugy)\
**Post date:** [November 29, 2014, 2:57pm UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708/2 "2014-11-29T14:57:48Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![JimL](https://www.phphelp.com/user_avatar/www.phphelp.com/jiml/32/1842_2.png) [@JimL](https://www.phphelp.com/u/JimL)\
**Post date:** [November 29, 2014, 5:25pm UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708/3 "2014-11-29T17:25:26Z")

</div>

> [@grwebguy](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![Strider64](https://www.phphelp.com/user_avatar/www.phphelp.com/strider64/32/3161_2.png) [@Strider64](https://www.phphelp.com/u/Strider64)\
**Post date:** [January 18, 2015, 2:07am UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708/4 "2015-01-18T02:07:07Z")

</div>

> [@JimL](#):
>
> Developing using a Vagrant vm is actually easier than setting up wamp/xampp, strongly suggest you give it a spin 🙂

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

---

<div class="post-metadata">

**Author:** ![JimL](https://www.phphelp.com/user_avatar/www.phphelp.com/jiml/32/1842_2.png) [@JimL](https://www.phphelp.com/u/JimL)\
**Post date:** [January 18, 2015, 6:11am UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708/5 "2015-01-18T06:11:43Z")

</div>

> [@Strider64](#):
>
> I don’t know about easier, but it sure is interesting so far…🙂 At least I’m dusting off my Linux a little bit. LOL ;D

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 ^^

---

<div class="post-metadata">

**Author:** ![Strider64](https://www.phphelp.com/user_avatar/www.phphelp.com/strider64/32/3161_2.png) [@Strider64](https://www.phphelp.com/u/Strider64)\
**Post date:** [January 18, 2015, 3:19pm UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708/6 "2015-01-18T15:19:50Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![JimL](https://www.phphelp.com/user_avatar/www.phphelp.com/jiml/32/1842_2.png) [@JimL](https://www.phphelp.com/u/JimL)\
**Post date:** [January 18, 2015, 3:27pm UTC](https://www.phphelp.com/t/modern-web-development-lets-develop-something-together/23708/7 "2015-01-18T15:27:37Z")

</div>

Just unlucky, means the repo where the box is stored is down 🙂

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