Web Programming Tutorial + Consultation

awanrmb · Jan 13, 2016

Hello guys, I saw many users in this forum have fastlane idea related with building web application but don't know how to code. So, I'm thinking to create tutorial thread. What makes it different compared with tutorial that you can see outside of this forum is in here you can ask if you get stuck.

I don't know your programming experience. So, I assume that you have basic understanding about computer and internet. If there are steps that not clear or you got an error, please ask and I will happily answer it.

To make it easier to follow, I will make tutorial for simple application. If you have any idea about what kind of application that you like me to cover, feel free to let me know.

For this first tutorial, I will show you how to create simple chat application.

Demo video of completed web apps:
http://screencast.com/t/CEH8qHbqi61

Screenshot of completed web apps:

Figure 1 Register/Sign In Page

Figure 2 Chat Page

Technology

PHP
Codeigniter
Jquery
Ajax
Mysql
Bootstrap

How to setting up your programming environment

Download Xampp from here : https://www.apachefriends.org/download.html
And install it on C: drive
Download Codeigniter from here : https://www.codeigniter.com/download
Extract it on C:\xampp\htdocs

Rename Codeigneter folder into SimpleLiveChat

Download .htaccess file from here : https://github.com/awan21clouds/SimpleLiveChat/blob/master/.htaccess
And Copy to SimpleLiveChat folder
Create assets folder on C:\xampp\htdocs\SimpleLiveChat
Download Bootstrap from here : http://getbootstrap.com/
Extract Bootstrap on C:\xampp\htdocs\SimpleLiveChat\assets

Steps and code explanation

Create database on Xampp
a. Download database from here :
https://github.com/awan21clouds/SimpleLiveChat/blob/master/simple_live_chat.sql
b. Open http://localhost/phpmyadmin/ in browser
If you get error, it might be your Xampp not yet running. Please run it first.
On PHPMyAdmin create database by importing above file.

You’ll have this view :

Create Register/Sign in process
We have 4 files that related with this process.
1. simple_register.php you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/application/views/simple_register.php
In this file you can see :
a. html code that responsible for sign in process

HTML:

<form id="form-login" action="/SimpleLiveChat/chat/simpleChat" method="POST">
                            <div class="form-group">
                                <label><a href="#tab_2" data-toggle="tab"> Register </a> / Sign in as :</label>
                                <select class="form-control select2" name="user_id" id="user-options" style="width: 100%;"></select>
                            </div>
                            <div class="row">
                                <!-- /.col -->
                                <div class="col-xs-12">                                   
                                    <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                                </div>
                                <!-- /.col -->
                            </div>
                        </form>

b. html code that responsible for register process

HTML:

<form id="form-register">
                            <div class="form-group has-feedback">
                                <label><a href="#tab_1" data-toggle="tab">Back to sign in</a> / Enter new user :</label>
                                <input type="text" class="form-control" name="username" placeholder="Username"/>
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>                                                
                            <div class="row">
                                <div class="col-xs-12">
                                    <button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>
                                </div>
                                <!-- /.col -->
                            </div>
                        </form>

2. user.js you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/assets/dist/js/user.js
In this file you can see :
a. Set user js, this function used for register action

Code:

function setUser() {


    $('#form-register').submit(function (event) {
        event.preventDefault();
        var formData = new FormData($(this)[0]);
        var d = new Date();
        var ajax = new Ajax();
        var user_id = d.getFullYear() + '' + ajax.concatString((d.getMonth() + 1)) + '' + ajax.concatString(d.getDate()) +
        '' + ajax.concatString(d.getHours()) + '' + ajax.concatString(d.getMinutes()) + '' + ajax.concatString(d.getSeconds()) +
        '' + (Math.floor(Math.random() * (9999 - 1000) + 1000));
        formData.append('user_id', user_id);
        ajax.ajaxLive('POST', '/SimpleLiveChat/chat/setUser', formData, 'html', false, false, false, false, success, null, null, null);
        return false;
    });
    function success(object) {
        $('#form-register')[0].reset();
        getUser();
    }
}

b. Get user js, this function is loading user data for sign in select box

Code:

function getUser() {
    var ajax = new Ajax();
    ajax.ajaxLive('POST', '/SimpleLiveChat/chat/getUser', null, 'json', false, false, false, false, success, null, null, null);
    function success(object) {
        var html = '';
        $(object.data).each(function (i, v) {
            html += '<option value="'+v.user_id+'">'+v.username+'</option>';
//            alert(v.username);
        });
        $('#user-options').html(html);
    }
}

3. ajax.js, you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/assets/dist/js/ajax.js
In this file you can see :

Code:

function ajaxLive(type, url, data, dataType, async, cache, contentType, processData, success, error, complete, beforeSend) {   
    $.ajax({
        type: type,
        url: url,
        data: data,
        dataType: dataType,
        async: async,
        cache: cache,
        contentType: contentType,
        processData: processData,
        beforeSend: beforeSend,
        success: success,
        error: error,
        complete: complete
    });
}

4. chat.php , you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/application/controllers/chat.php
In this file you can see :
a. Set user function

PHP:

public function setUser() {
        try {
            $data = array(
                'user_id' => $this->input->post('user_id'),
                'username' => $this->input->post('username')
            );
            $this->model_chat->insert_user($data);
        } catch (Exception $e) {
            echo 'Caught exception: ', $e->getMessage(), "\n";
        }
    }

b. Get user function

PHP:

public function getUser() {
        $data = array('data' => array());
        if ($query = $this->model_chat->view_user()) {
            $sub_data = array();
            foreach ($query as $r) {
                array_push($sub_data, $r);
            }
            $data = array('data' => $sub_data);
        }
        header("content-type: application/json");
        echo json_encode($data);
        exit;
    }

Create Chat Process
We have 4 files that related with this process.
1. simple_chat.php, you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/application/views/simple_chat.php
In this file you can see :

HTML:

<div class="box box-solid direct-chat direct-chat-primary">
                            <div class="box-header with-border">
                                <i class="fa fa-comments-o"></i>
                            </div>
                            <div class="box-body chat" id="chat-box">
                                <div class="direct-chat-messages">
                                   
                                </div>
                                <!--/.direct-chat-messages-->
                            </div>
                            <div class="box-footer">
                                <form id="form-chat">
                                    <div class="form-group">                 
                                        <input type="hidden" class="form-control" name="user_id" value="<?php echo $user->user_id; ?>">
                                        <input type="text" class="form-control" name="chat_content" placeholder="Enter Message">
                                    </div>
                                </form>
                            </div>
                        </div>

2. chat.js you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/assets/dist/js/chat.js
In this file you can see :
a. set chat

Code:

function setChat() {
    $('#form-chat').submit(function (event) {
        event.preventDefault();
        getChat();
        var formData = new FormData($(this)[0]);
        var d = new Date();
        var ajax = new Ajax();
        var chat_id = d.getFullYear() + '' + ajax.concatString((d.getMonth() + 1)) + '' + ajax.concatString(d.getDate()) +
        '' + ajax.concatString(d.getHours()) + '' + ajax.concatString(d.getMinutes()) + '' + ajax.concatString(d.getSeconds()) +
        '' + (Math.floor(Math.random() * (9999 - 1000) + 1000));
        var chat_time = d.getFullYear() + '/' + ajax.concatString((d.getMonth() + 1)) + '/' + ajax.concatString(d.getDate()) +
        ' ' + ajax.concatString(d.getHours()) + ':' + ajax.concatString(d.getMinutes()) + ':' + ajax.concatString(d.getSeconds());
        formData.append('chat_id', chat_id);
        formData.append('chat_time', chat_time);
        ajaxLive('POST', '/SimpleLiveChat/chat/setChat', formData, 'html', false, false, false, false, success, null, null, null);
        return false;
    });

    function success(object) {
        $('#form-chat input[name="chat_content"]').val("");
        getChat();
    }
}

b. Get chat js

Code:

function getChat() {
    var ajax = new Ajax();
    if (!instanse) {
        instanse = true;
        ajax.ajaxLive('POST', '/SimpleLiveChat/chat/getChat', null, 'json', false, false, false, false, success, null, null, null);
    } else {
        setTimeout(getChat, 1500);
    }

    function success(object) {
        var html = '';
        $(object.data).each(function (i, v) {
            var d = new Date(v.chat_time);
            if (v.user_id === $('#form-chat input[name="user_id"]').val()) {
                html += '<div class="direct-chat-msg right">';
                html += '<div class="direct-chat-info clearfix">';
                html += '<span class="direct-chat-name pull-right">' + v.username + '</span>';
                html += '<span class="direct-chat-timestamp pull-left">' + d.getFullYear() +
                '/' + ajax.concatString((d.getMonth() + 1)) + '/' + ajax.concatString(d.getDate()) +
                ' ' + ajax.concatString(d.getHours()) + ':' + ajax.concatString(d.getMinutes()) +
                ':' + ajax.concatString(d.getSeconds()) + '</span>';
                html += '</div>';
                html += '<img src="/SimpleLiveChat/assets/dist/img/default.png" class="direct-chat-img" alt="Message User Image"/>';
                html += '<div class="direct-chat-text">';
                html += v.chat_content;
                html += '</div>';
                html += '</div>';
            } else {
                html += '<div class="direct-chat-msg">';
                html += '<div class="direct-chat-info clearfix">';
                html += '<span class="direct-chat-name pull-left">' + v.username + '</span>';
                html += '<span class="direct-chat-timestamp pull-right">' + d.getFullYear() +
                '/' + ajax.concatString((d.getMonth() + 1)) + '/' + ajax.concatString(d.getDate()) +
                ' ' + ajax.concatString(d.getHours()) + ':' + ajax.concatString(d.getMinutes()) +
                ':' + ajax.concatString(d.getSeconds()) + '</span>';
                html += '</div>';
                html += '<img src="/SimpleLiveChat/assets/dist/img/default.png" class="direct-chat-img" alt="Message User Image"/>';
                html += '<div class="direct-chat-text">';
                html += v.chat_content;
                html += '</div>';
                html += '</div>';
            }
        });
        $('.direct-chat-messages').html(html);
        slimScroll();
        instanse = false;
    }
}

3. ajax.js you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/assets/dist/js/ajax.js
In this file you can see :

Code:

function ajaxLive(type, url, data, dataType, async, cache, contentType, processData, success, error, complete, beforeSend) {    
    $.ajax({
        type: type,
        url: url,
        data: data,
        dataType: dataType,
        async: async,
        cache: cache,
        contentType: contentType,
        processData: processData,
        beforeSend: beforeSend,
        success: success,
        error: error,
        complete: complete
    });
}

4. chat.php , you can download it from here :

https://github.com/awan21clouds/SimpleLiveChat/blob/master/application/controllers/chat.php
In this file you can see :
a. Set chat function

PHP:

public function setChat() {
        try {
            $data = array(
                'user_id' => $this->input->post('user_id'),
                'chat_id' => $this->input->post('chat_id'),
                'chat_content' => $this->input->post('chat_content'),
                'chat_time' => $this->input->post('chat_time')
            );
            $this->model_chat->insert_chat($data);
        } catch (Exception $e) {
            echo 'Caught exception: ', $e->getMessage(), "\n";
        }
    }

b. Get chat function

PHP:

 public function getChat() {
        $data = array('data' => array());
        if ($query = $this->model_chat->view_chat()) {
            $sub_data = array();
            foreach ($query as $r) {
                array_push($sub_data, $r);
            }
            $data = array('data' => $sub_data);
        }
        header("content-type: application/json");
        echo json_encode($data);
        exit;
    }

That's it my tutorial, you can download all codes and files on github :
https://github.com/awan21clouds/SimpleLiveChat
If you have any question, please ask and any suggestions are welcome.

Cheers

bob johnson · Jan 13, 2016

pu icuul mopl us nupvjmz tactdsoqvoup uggis?

MikeRaymond · Jan 13, 2016

bob johnson said:
pu icuul mopl us nupvjmz tactdsoqvoup uggis?

ji katv uggisif jimq, pu piif vu ci tesdetvod

awanrmb · Jan 13, 2016

bob johnson said:
pu icuul mopl us nupvjmz tactdsoqvoup uggis?

MikeRaymond said:
ji katv uggisif jimq, pu piif vu ci tesdetvod

Vjeplt Noli, og zua jewi epz foggodamvoit simevif xovj xic qsuhsennoph QJQ, DufiOhpovis giim gsii vu dupvedv ni.
O'n puv vji tnesvitv qsuhsennis, cav og ov't xovjop nz lpuxmifhi O'n tasimz jeqqz vu jimq

SSimz · Jan 13, 2016

O vjopl e zuavaci djeppim xuamf ci civvis vjep e vjsief

Search

Search

Web Programming Tutorial + Consultation

Welcome to the only entrepreneur forum dedicated to building life-changing wealth.

Build a Fastlane business. Earn real financial freedom. Live your best life.

Tired of paying for dead communities hosted by absent gurus who don't have time for you?

awanrmb

New Contributor

Stop Peeking Through the Keyhole.
Open the Door.

"SCALED TO 6-FIGURE MONTHS"

"INSANE QUALITY OF PEOPLE"

bob johnson

New Contributor

MikeRaymond

New Contributor

awanrmb

New Contributor

SSimz

Regular Contributor

Stop Peeking Through the Keyhole.
Open the Door.

"SCALED TO 6-FIGURE MONTHS"

"INSANE QUALITY OF PEOPLE"

Similar threads...

Navigation Shortcuts

Welcome to an Entrepreneurial Revolution

Follow MJ DeMarco

Fastlane Resources

Get The Books that Change Lives...

Web Programming Tutorial + Consultation

Welcome to the only entrepreneur forum dedicated to building life-changing wealth.

Build a Fastlane business. Earn real financial freedom. Live your best life.

Tired of paying for dead communities hosted by absent gurus who don't have time for you?

awanrmb

New Contributor

Stop Peeking Through the Keyhole.Open the Door.

"SCALED TO 6-FIGURE MONTHS"

"INSANE QUALITY OF PEOPLE"

bob johnson

New Contributor

MikeRaymond

New Contributor

awanrmb

New Contributor

SSimz

Regular Contributor

Stop Peeking Through the Keyhole.Open the Door.

"SCALED TO 6-FIGURE MONTHS"

"INSANE QUALITY OF PEOPLE"

Similar threads...

Navigation Shortcuts

Welcome to an Entrepreneurial Revolution

Follow MJ DeMarco

Fastlane Resources

Get The Books that Change Lives...

Stop Peeking Through the Keyhole.
Open the Door.

Stop Peeking Through the Keyhole.
Open the Door.