NOW-Hollywood - Celebraties Bio/Movies/Gossip

Oct 19, 2008

Step by step guide for newbie to design a simple web application (part 1)

by Admin 0 comments

Share this post:
Design Float | StumbleUpon | Reddit

Design a web application requires hard work and knowledge of HTML, CSS, database and javascript. What is a simple way to start developing PHP web applications for a newbie?

In the past months I received frequently this question. Some readers of this blog often asked to me to publish a "newbie-oriented" post about how to create a web application using PHP. With this step-by-step guide I want to illustrate some basic tips for newbie to design their first (really simple!) web application using PHP, MySQL, Ajax features and MooTools.

MAMP to configure PHP+MySQL environment on your system. For more info about MAMP read this post.

2.2 - Database: define DB tables
At this point, we have to define database tables. In our simple to do list application we have only a table TASK with these attributes:

Now we have to create this table into our new database. In general, you can create database tables and relationship directly using phpMyAdmin interface or writing SQL code in a separated PHP file ( tables_structure.php). I prefer to use the second option because it's simpler to manage. So, open tables_structure.php and copy and past this code:

//Database Connection

// Create table TASK
task_name VARCHAR(250),

task_description LONGTEXT,

task_completed INT,
PRIMARY KEY (task_id_pk)

// Close DB Connection

In the first row I included the following line:

//Database Connection

...which enstablishes a database connection (see next step). So I added a PHP var $sql which contains SQL code to create a new table "Task". This code:


...executes a query with SQL code declared into $sql var.

2.3 - Database: connection.php
Enstablishing a database connection using PHP is very simple. You can use the following code only changing connection parameters values ($db_host, $db_name, $username, $password):

// Connection Parameters

// Connection

In general $db_host, $username, $password don't require changes. This var:


...contains the name of database we created at step 2.1.

Note: you have to include connection.php in each page which uses interaction with database.

2.4 - Database: create tables
Ok, now you can publish tables_structure.php and connection.php on your testing server and load tables_structure.php with your browser to create tables and relationships (in this case tables_structure.php will create only the table TASK ):

If code it's ok, using phpMyAdmin, you can find the new table "TASK" into our todo-list database:

3.1 - Index.php: include connection.php
Open index.php and add this line of code at the beginning of the page to enstablish a database connection:

php include('db/connection.php'); ?>

Remember, you have to include this file in each page which interacts with database:

3.2 - Index.php: include MooTools framewoork
How I said, we'll use MooTools framework to add moder ajax interactions to our application. So we have to add a link to MooTools framework into index.php simply copying the following code within the tag of the page:

"text/jscript" src="mootools.svn.js">

3.3 - Index.php: include CSS file
Now, create an external CSS file style.css in a new folder CSS:

This file will contains CSS code to design application interface elements. So, in the tag add a link at this CSS file:

"css/style.css" rel="stylesheet" type="text/css" />

Ok, at this point we are ready to design application interface and implement application features. In the next post we'll see how to insert new tasks, mark a task as completed, delete tasks, search tasks and how to design a simple application interface.

Related Posts

Subscribe Feeds RSS in your preferred RSS reader
Comments 0 comments

Admin(kk group)
Student, Web-Developer, FSD-PAKISTAN

Subscribe feeds via e-mail
Subscribe in your preferred RSS reader

Subscribe feeds rss Recent Entries

Sponsored Links

Advertise on this site Sponsored links



Are you looking for a job?

Post a job and reach web professionals everywhere.

My Photos on flickr

Subscribe feeds rss Recent Comments


GFF's authority on technorati
Add to Technorati Favorites