A cloud dedicated to PHP apps: say hello to PHPFog
This is a guest post by Vito Tardia, originally published on Cloudspring. Huge thanks to Vito and Cloudspring for allowing us to republish it!
PHP Fog is a relatively new cloud hosting provider specifically designed for PHP applications. Their mission statement is “less management, more code” and the entire platform is centered around the most used and reliable PHP tools. As an example I tried to start a brand new WordPress blog on a free plan and it took just 3 minutes! Also, the process of installing and updating plugins and themes is instantaneous!
In this tutorial I’ll build a simple subcription form application using two of PHP Fog supported frameworks: Slim for the PHP part and Twitter Bootstrap for the CSS part. As a bonus the app will take advantage of the new responsive features of the Bootstrap 2 framework and will be usable out of the box from desktop PCs, tablets and smartphones.
Platform key features
How is PHP Fog different from other providers?
Firstly, the PHP Fog platform is built upon well known and reliable open source technologies. HTTP requests are first filtered by a Varnish cache proxy server, then passed through an Nginx load balancer that distributes the workload between several application servers. These servers are dedicated Linux machines running Apache with mod_php and the APC (Advanced PHP Cache) extension. The database storage is managed by MySQL using a master-slave scalable setup.
Secondly, the platform is designed for both developers and non-developers alike. During the application setup you can choose to start with a blank customizable PHP application, with one of the suggested PHP Frameworks (which include CakePHP, CodeIgniter, Zend Framework, etc) or, for non-developers, you can choose to deploy a ready application from a list that includes WordPress, Drupal, Joomla, Media Wiki and other more.
You also get free SSL if you use the
Setting up your account
Even the signup process is very fast at PHP Fog, you just need to provide an email address, choose a password and you’re in. No credit card is required initially, because each account starts with a free plan that uses a shared cloud with 3 applications, 100MB of disk storage and 20MB of MySQL storage. If you decide to upgrade to a premium plan you will have a private cloud with dedicated resources (CPU, RAM, disk and database storage). Premium plans also allow you to scale the number of database and application servers used, even for one or two days, paying only for what you use, with a minimum unit of 24 hours.
The most “complicated” thing you’ll have to do during your account setup is setting your SSH keys, but PHP Fog staff provides you with this step-by-step guide. And that’s all, you’re in! Your account page should look like this:
Create your application
From your account page you should see the shared cloud box. Create a new application using the “New App” button. Your screen should look similar to this:
From there you can choose to deploy any of the pre-made applications (above) or a framework based application (below), where the first choice is a blank PHP app. We need to select Slim because the version of this framework provided by PHP Fog includes some modifications in order to perform better, we’ll get the Bootstrap stuff later. In the next step we are prompted to choose our application details: the app domain name and MySQL password.
Your app will be reachable with the URL
http://myappname.phpfogapp.com, I chose
http://subscribers.phpfogapp.com for my application.
For the next 2 or 3 minutes the PHP Fog platform will work for you, creating the environment for your app and will give you full access to the application’s console:
At this point you can clone the application’s repository to your local machine using your favorite Git tool:
I simply cloned the application directory inside the DocumentRoot of my local Apache, so that my developement URL is
Build the application locally
Now you have a local copy of a Slim Framework “hello world” application. What we need in the first place is to add the other components and organize our project.
As you can see from the screenshot above, the application root contains only two files: the
.htaccesswhich is left “as is” and the
index.php file that will be our main application controller.
I’ve created a
lib directory where I moved the full Slim package, then I’ve added two more libraries. The
db library is a simple PHP class that wraps around PDO. The
cake directory contains two classes extraced from the CakePHP framework, used here to sanitize and validate user input. Both classes are available with this article’s code package.
At this point you can download the official Twitter Bootstrap package along with the latest version of jQuery and fill the other directories with its css, js and image files.
Then create an empty database on you local MySQL server and name it
slim_subscribers, and use the following query to create the
With all the main components in place we’ll concentrate our work on the main controller
templates directory where the frontend files will be stored. The application will have two static descriptive pages,
about.php and the
subscribe.php page that contains the subscription form. All these pages will include the common header and footer, which I’ve put together starting with the sample files provided by Bootstrap on its website.
This is the header:
The first thing I added is a dynamic title tag, the
$pageTitle variable will be passed by the controller file so we can have a different title for each page or fallback to a default one. The
viewport meta tag is provided by default with this version of Bootstrap to support mobile devices and tablets. Then come the styles, first the main
bootstrap.css, then some embedded customizations, and last the
bootstrap-responsive.css that uses
@media queries to adapt the layout for smaller screens.
The common body starts with a responsive Navbar component. I copied the base code from Bootstrap documentation and added the
bootstrap.js will take care of transforming the navigation to a dropdown for small screens.
The footer code is:
The footer file simply closes the application container and inserts the jQuery library and the
We can start working on the index file now. This file processes all URLs passed by the
.htaccess which don’t map to actual files on the server.
In the first lines I’m doing a quick config, placing the database details and the base path which will be prepended to all links. I need this bacause my local version is running in a sub path of localhost. Then the Slim framework and the other libraries are loaded and a new Slim application object in created with the default settings (see Slim docs for more info on this).
$app object is created we can use it. Slim allows us to map the URLs we want to process to our custom functions, and all the unprocessed URLs are treated by default as 404 errors. The simplest mapping are the two static pages:
$app->get() method takes the given URI path (
/about) as first parameter and maps the HTTP method
GET for this URL to a function passed as a second parameter. In this example I use two anonymous functions (PHP 5.3 or above is required) to which I pass the
$config variables that will be seen as local in scope.
First I’m setting the current
$action values, then with the method
$app->render() I tell the application object to load the
home.php template file (first parameter) from the default
templates directory and to inject the give variables using the the array provided as second parameter. The same is done for the
/about URI. The
home.php template file looks like:
about.php template file is:
Both files include the common header and footer. The home template uses a component called
hero-unit, which is intended to showcase content, and some well styled buttons. The about page uses a standard
page-header component and a one-column container for its content.
/subscribe URL is the application’s core functionality, it has a structure similar to the other two pages but it also has to handle the form interface and the data posted by the user. The controller code for subscribe is:
First of all you can notice that the method used to map the URI is different. I’m using the
$app->map()method which allows to specify more than one HTTP method. In this case the GET method displays the form and the POST method deals with the submitted data. The first and last part of the function is similar to the other pages: at the beginning we set some variables and at the end they are passed to the view file. This function uses two additional variables,
$errors that contains the input validation errors and
$data that stores the data submitted by the user.
$app->request()->isPost() checks for posted data, if there is something posted it’s then copied into the
$data array with
$app->request()->post(). The posted data is first sanitized in order to remove invalid characters and then validated and any error found is stored into the
$errorsarray. If there are no data validation errors the script tries to connect to the database, the
$app->flashNow() method is used to store an error message into the current session. The template will have access to an associative array called
$flash containing all the messages.
The database logic takes place inside the
try/catch statement. First we check if the email address submitted is already registered, if so an exception is thrown. Then we try to insert the posted data into the subscribers table, the
$app->flashNow() is used in both success and error cases. This lead us directly to the subscribe frontend.
The common header and footer templates are included and a
page-header component is used for the title. Just after the page title the script checks the
A similar check is performed for success messages, displayed using the “alert-success” class. If we don’t have any success messages either there were some errors or there weren’t data posted, so the form is displayed. The subscription form is built using the component provided by Bootstrap. I chose the “form-horizontal” form type and each control is wrapped around a “control-group” div. For each control group I check to see if the related data triggered any validation error and if it’s the case a class of “error” is added to the group and the corresponding message is displayed near the input field.
The last line of the
index.php controller file is
$app->run(); and it’s responsible for executing the Slim application.
Test and deploy
We should have our application working perfectly from our localhost machine at this point. All we have to do in order to publish it is:
- create the subscribers table into our remote database using the phpMyAdmin provided by PHP Fog,
- do a
git push command from our favorite git interface.
Your application is up and running at
http://theappname.phpfogapp.com and it’s perfectly usable from desktop machines, tablets and smartphones.
Undoubtedly PHP Fog is another great tool at your disposal to publish your applications quickly. It still has some limitations, most of them due to the fact that it’s still a young platform. Nonetheless, reading the documentation you see that the staff behind the scenes is working really hard to fill the gaps and in the meantime they provide you with tips and tricks to work around the current limits.
Then there is the Bootstrap interface framework, that coupled with Slim or any other of your favorite PHP libraries is a great starting point to build awesome user interfaces and let you concentrate on programming. In fact it took me more time to write this article than to build the sample application from scratch.
I hope this tutorial has boosted your couriosity to explore the other platform features. Happy Coding!
If you have a post that you would like to to consider re-publishing on our blog, please let us know!