Web Programming Tutorial + Consultation

[awanrmb]

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

1. PHP
2. Codeigniter
3. Jquery
4. Ajax
5. Mysql
6. Bootstrap

How to setting up your programming environment

1. Download Xampp from here : https://www.apachefriends.org/download.html
   And install it on C: drive
2. 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
   
3. Create assets folder on C:\xampp\htdocs\SimpleLiveChat
   
   
4. Download Bootstrap from here : http://getbootstrap.com/
5. Extract Bootstrap on C:\xampp\htdocs\SimpleLiveChat\assets
   
   

Steps and code explanation

1. 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 :
   
   
2. 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​

   <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​

   <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​

   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​

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

   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​

   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​

   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;
       }

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

   <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​

   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​

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

   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​

   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​

    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

 

Dislike ads? Become a Fastlane member: Subscribe today and surround yourself with winners and millionaire mentors, not those broke friends who only want to drink beer and play video games. :-)

[bob johnson]

pu icuul mopl us nupvjmz tactdsoqvoup uggis?

 

[MikeRaymond]

pu icuul mopl us nupvjmz tactdsoqvoup uggis?

ji katv uggisif jimq, pu piif vu ci tesdetvod

 

[awanrmb]

pu icuul mopl us nupvjmz tactdsoqvoup uggis?

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]

O vjopl e zuavaci djeppim xuamf ci civvis vjep e vjsief