Build a web Application Tutorial Series

Part 1

Introduction

I have watched tons of tutorials to do different things, like php , java, database, etc. I thought may be why don’t I try to write a tutorial about building a simple web application. I will have a little practice of what I want to be perfect in and other starting guys will have some material to learn the basics. And here we go.

Ok. our application will be a simple user login system. A user will come to the site, sign up, then login, view his profile and change his profile, and then logout. That’s it. It sounds so simple, but it took me two or three days to do it from scratch, mostly because I was trying a new way of arranging things so that I could expand it big. It’s a general part of other application because most of the application have user part.

The purpose of this tutorial is

    1. To teach how to start small building application

    2. To give a good overview of object oriented concept

    3. To teach some design concepts

    4. Not to make the reader perfect in anything and leave them to explore

    5. And this is a very fast forward tutorial, assumptions are that you know or can find out the very basic things.

FEATURES

    Signup page    =>

    forget password

    login page    =>

    verify account page

    account update page

Now first legs think of the database part. Since we are using a login/out and profile, we need minimum two tables.
Database

    #users(id, username, password, email)

    #profile(id, user_id, first_name, last_name, dob, gender)

The queries for creating the database are as follows.

CREATE DATABASE IF NOT EXISTS `user`;




CREATE TABLE `user`.`users`(

            `id` int(11) NOT NULL  AUTO_INCREMENT,

            `username` varchar(64) NOT NULL UNIQUE,

            `password` varchar(128) NULL,

            `email` varchar(64) NOT NULL UNIQUE,

            PRIMARY KEY(id)

        );




create table `user`.`profile`(

    id int(11) not null auto_increment,

    user_id int(11) not null unique,

    first_name varchar(64) not null,

    last_name varchar(64),

    dob Date,

    gender varchar(64),

    primary key(id)

);

ALTER TABLE user.profile ADD FOREIGN KEY (user_id)

    REFERENCES user.users (id)    on update cascade on delete cascade;

The directory structure is as follows

Directory_Hierarchy

    /

        common/
                    base.php
                    header.php
                    footer.php
                    sidebar.php

        configs/
                    constants.php

        forms/
                    abstract.form.php
                    interface.form.php
                    form.login.php
                    form.signup.php
        models/
                    interface.model.php
                    class.user.php

        index.php
        signup.php
        login.php
        forgot_password.php
        verify_account.php
        account.php

        public/
                    images/
                    scripts/
                            script.js
                    styles/
                            style.css

Notice, there are four directories. The commons directory is where the mostly common codes used in several pages will go. All most every page will include them for completing the html. The configs folder is for the files which describes the configurations of our application and those information's, which we might need throughout our application. The models folder is for storing the model classes, like user or the profile, or when you expand it, say item, or some other entity. The form folder is for storing the form handling classes. It is not necessary to separate forms or models for your application to work, but you could never build a large application from that procedural approach. It is a design practice to separate concerns whenever you can. For forms, in frameworks like Zend or some other, there are very good form helpers, which provide lots of easy ways. The approach here is influenced by those concepts. Then the public folder stores all your images , styles, and scripts.
Lets start coding with the commons folder. Lets edit base page like this.

<?php
//session starting should be done early before anything
    session_start();

    //including the side wide constants
    include_once('configs/constants.php');

    // Database handling codes, initiating
    try {
        $con_string = "MySQL:host=".DB_HOST.";dbname=".DB_NAME;
        $db = new PDO($con_string, DB_USER, DB_PASS);
    } catch (PDOException $e) {
        echo 'Connection failed: ' . $e->getMessage();
        exit;
    }
?>

Notice, you should include this page on every of your page where you write your application logic. This page handles the session which is to be done on top, and then initiates a php database connection. The header , footer , and sidebar pages are where you write your header footer and sidebar codes. In this first tutorial, we are gonna write some simple working codes.

<!DOCTYPE html>
<html>
    <head>
        <title>     Tutorial | <?php echo $title; ?></title>
        <?php 
                if(isset($style)){
                    echo "<link type='text/css' rel='stylesheet' href='$style' />";
                }
        ?>
    </head>
    <body>
        <div id="wrapper" >
            <div id="header" >
                <?php //echo $header_content?>
            </div>

<?php            ?><div id="footer">
                            <?php echo $footer; ?>
                        </div>
            </div><!-- wrapper -->
    </body>
</html>

It’s a good design practice to define some sitewide constants, which we will use throughout our site in the file configs/constanst.php  -------------------------------------

<?php
    define('DB_HOST', 'localhost');
    define('DB_USER', 'root');
    define('DB_PASS', '');
    define('DB_NAME', 'user');
?>

----------------------------------------------
Now lets start writing our application logic. Lets decide what should happen when the user first time visits our application. There may be two conditions, one he is logged in and another, he is not. For now lets redirect the unlogged user to signup page and the logged in user to account page.

<?php
include_once('common/base.php');
//if the user is not logged in
if(empty($_SESSION['user_id'])){
    header('Location: ./signup.php');
    exit;
}else{
    header('Location: ./account.php');
    exit;
}
?>

---------------------------------------------
So, What will we do on the signup page. One thing is clear that the signup page must have a form for taking the user data. You could submit the form in another page by defining action to another page, but it is not a good practice to increase the number of pages without any reason if you can do it in single page. Here is what I have done. If it is a normal page request, just show the signup form. In the form is submitted, then validate the form, and if the form is valid then create a new account and register the user. Display some congratulation message. Otherwise, if there is so me error, show the error message and the form again. It seems like there is lots of work to do. ------------------------------

<?php
include_once('common/base.php');
/*
*check if the form is submitted, and verify and register
*if not then print the form
*/

$title = "signUp";
include_once('common/header.php');
include_once('./forms/form.signup.php');
$form = new SignupForm($db);
if($form->read()){
         //echo "The form is submitted.";
         if($form->isValid()){
                 //echo "<br/>The form is valid";
                 $fields = $form->getArray();
                 include_once('./models/class.users.php');
                 $user = new UserClass($db);
                 if($user->insert($fields)){
                         echo "<div id='note'>
                                         <p>Congratulation. You are registered.</p>
                                         <p><a href='./login.php'>Login</a></p>
                                     </div>";
                 }
         }else{
             //echo "<br/>form is invalid.";
             $form->display();
         }
}else{
     //echo "The signup is not posted.";
     $form->display();
}

$footer = "copyright &copy; 2012 reserved to rajan prasad upadhyay.";
include_once('./common/footer.php');

?>

--------------------------------------------
It may seem like a pseudo code that form->read(), if(valid) etc, but its not, and its by design.. You can download the code from my github account, I will just concentrate on the process of developing and the logic behind the work.  You can see an include of a form.signup.php where our form class lies. separating the concern of the form to a separate class dedicate to it is a good idea, and lots of frameworks in some way encourage to do so. Similarly, there is also a user class in the models folder, which actually deals with the interaction between the controller and the database of user object. This approach of coding is more practical.
In the second part we will concentrate on the beauty of the application and add some more functionality if only I get some response.

Sorry, Blogger doesn't support file uploads
Please:
1) Change to a different blog provider, then;
2) Save the draft
3) Change to HTML view, then back to the view you were on.

Your files will be ready to upload then.

Download The source files here