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:

php
//Database Connection
include('connection.php');

// Create table TASK
$sql="CREATE TABLE TASK (
task_id_pk INT NOT NULL AUTO_INCREMENT,
task_name VARCHAR(250),

task_description LONGTEXT,

task_completed INT,
PRIMARY KEY (task_id_pk)
) TYPE=INNODB"
;
mysql_query($sql);

// Close DB Connection
mysql_close($db_con);
?>

In the first row I included the following line:

//Database Connection
include('connection.php');

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

mysql_query($sql);

...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
$db_host="localhost";
$db_name="todo-list";
$username="root";
$password="root";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);

// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);
?>

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

$db_name="todo-list";

...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
getfreefiles@gmail.com

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

Subscribe feeds rss Recent Entries

Sponsored Links

Advertise on this site Sponsored links

Categories

Etiquetas

Are you looking for a job?

Post a job and reach web professionals everywhere.

My Photos on flickr

Subscribe feeds rss Recent Comments

Technorati

Technorati
GFF's authority on technorati
Add to Technorati Favorites