I’m gonna show you how to develop a simple web application. From database design to deployment and finally some front end development. Everything will be made in the cloud. There will be no need to install anything on your laptop. Sounds like late night TV commercials? But it’s not :).
Let’s start with the database design:
- Log in to Vertabelo. Sign up if you don’t have an account yet (you can use a free trial).
Create a new database model. Choose MySQL as a database engine:
Design your database. I’ve created only one table. Don’t laugh! Gonna keep this demo simple. In real life, database designers spend some hours ... or days ... at this step.
Now, you can generate a script that will create tables in your database. Database gurus call it “DDL script”. Click the “SQL” icon in the top toolbar:
And then click the “Generate” button:
Download the script and store it on your computer.
In this example, the file is called
Pick a Hosting Solution
Now it’s time to deploy it somewhere. If you already have your own server, just skip this part. If not, pick a hosting solution. I’ve chosen DigitalOcean.com. They looked promising and I wanted to verify their claims.
A few steps to prepare a server:
- Sign up there.
Create a virtual sever. They call it droplet. Pick “Ubuntu” as a base image. It takes less than 2 minutes.
- To setup the server, just follow this instruction: How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu.
Prepare Your Database
You’ve got a working server. You receive an IP address, login and password by email. I didn’t care about security in this example but if you really want to use the DigitalOcean hosting, make sure you immediately change root password, create your own user, etc. They have good how-tos. Let’s prepare the database:
Copy the script to the server (use provided IP address):
scp lamp-demo_create.sql root@IP.ADDR.PUT.HERE:
Log in to the server:
Call MySQL console (password is empty):
Create database and grants:
create database demo; grant usage on *.* to demo@localhost identified by 'demo'; grant all privileges on demo.* to demo@localhost ;
Call a script generated by Vertabelo:
mysql -u demo -pdemo demo < lamp-demo_create.sql
Connect to the database:
mysql -u demo -pdemo demo
Add some data:
insert into message values(1,'hello'); insert into message values(2,'world'); select * from message;
+----+---------+ | id | content | +----+---------+ | 1 | hello | | 2 | world | +----+---------+
Front End Development
You’ve got a running database with plenty of data ;). Now it’s time for a front end.
Log in to you server:
Remove the default page:
/var/www/index.phpand edit its content:
"; } mysqli_close($con); ?>
- Save it and open the web page: http://IP.ADDR.PUT.HERE/
You should see data from the database. The page looks ugly, so I’ll show you how to make it nicer without being an HTML wizard. I’ll embed our application on a site created using ActiveMobi.com. Clever me :). ActiveMobi is an easy to use mobile site builder. They provide some really nice looking templates.
Let’s do some front end coding:
- Sign up at ActiveMobi.com.
- Pick a template you like.
Add an HTML component. Edit its content.
- Publish and preview.
You’ve got a nice looking application that retrieves content from the database.
If PHP/MySQL is not your pair of shoes just let me know and maybe I’ll be able to help you.