Datatables ajax bootstrap pagination with codeigniter

If you want to implement datatables with ajax using codeigniter and you can also use code if you are using core php stuff in your application.

1. You need to include required jQuery for datatables , ajax processing.

<script src="<?php echo base_url(); ?>assets/js/jquery-1.11.0.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/dataTables.bootstrap.js"></script>
<script src="<?php echo base_url(); ?>assets/js/datatables/responsive/js/datatables.responsive.js">
</script>
<script src="<?php echo base_url(); ?>assets/js/datatables/jquery.dataTables.columnFilter.js">
</script>
        

2. Your html source file or you can say your view file will goes like below.

<div class="main-content">
<div class="row"><h2>Brokers Listing</h2>
<div class="panel panel-primary" data-collapsed="0">
<div class="panel-body">
<table class="table table-bordered table-striped datatable" id="broker_listing">
<thead><tr>
<th class="no-sort">#</th>
<th>Broker Name</th>
<th>Email</th>
<th>Created Date</th>
<th>Status</th>
<th class="no-sort">Actions</th>
</tr></thead><tbody></tbody>
</table>
</div>
</div>
        

<script type="text/javascript">
jQuery(window).load(function(){
var $ = jQuery;
$("#broker_listing").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": baseurl+'broker/get_broker_listing',
"sPaginationType": "bootstrap",
"columnDefs": [ {
"targets": 'no-sort',
"orderable": false,
}],
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
nRow.setAttribute('id',"tr_"+aData[0]);
}
});
});
$(function() {
$(document).on('click', '.removeRcords', function(event) {
event.preventDefault();
var idss=$(this).attr('id');
var rid=idss.split("_")[1];
do_remove_ajax('broker_remove',rid);
});
});
</script>
        

3. Your controller function will go like below

public function get_broker_listing() {
$this->load->model('common');
$aColumns = array('broker_id' ,'name', 'email', 'created_date', 'status');
$sIndexColumn = "broker_id";
$sTable = "cbf_broker_registration";
$iDisplayStart=$this->input->get('iDisplayStart',true);
$iDisplayLength=$this->input->get('iDisplayLength',true);
$iSortCol_0=$this->input->get('iSortCol_0',true);
$iSortingCols=$this->input->get('iSortingCols',true);
$sLimit = "";
if ( isset($iDisplayStart) && $iDisplayLength != '-1' )
{
$sLimit = "LIMIT ". $iDisplayStart.", ".$iDisplayLength;
}
if ( isset($iSortCol_0))
{
$sOrder = "ORDER BY ";
for($i=0 ; $i<intval( $iSortingCols ) ; $i++ ){
if($_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
{
$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
}
}
$sOrder = substr_replace( $sOrder, "", -2 );
if( $sOrder == "ORDER BY" ){
$sOrder = "";
}
}
$sSearch=$this->input->get('sSearch',true);
$sWhere = "";
if ( $sSearch != "" ){
$sWhere = "WHERE (";
for ( $i=0 ; $i<count($aColumns) ; $i++ ){
$sWhere .= $aColumns[$i]." LIKE '%".$sSearch."%' OR ";
}
$sWhere = substr_replace( $sWhere, "", -3 );
$sWhere .= ')';
}
/* Individual column filtering */
for($i=0 ; $i<count($aColumns) ; $i++){
if($_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != ''){
if($sWhere == ""){
$sWhere = "WHERE ";
}else{
$sWhere .= " AND ";
}
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%'";
}
}
$sEcho=$_GET['sEcho'];
$result=$this->common->broker_listing($sTable, $sWhere, $sOrder, $sLimit, $aColumns,$sIndexColumn,
$sEcho);
echo json_encode($result);
}
        

4. Your model function will goes like below. you can also give edit and remove functionality for that just returning Edit Link and class " removeRcords ". you can put other links as your requirement.

function broker_listing($sTable, $sWhere, $sOrder, $sLimit, $aColumns,$sIndexColumn,$sEcho) {
$sQuery = "SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
FROM $sTable $sWhere $sOrder $sLimit";
$rResult = $this->db->query($sQuery);
$rResult_array=$rResult->result_array();
$iFilteredTotal = count($rResult_array);
/* Total data set length */
$sQuery_TR = "SELECT COUNT(".$sIndexColumn.") AS TotalRecords FROM $sTable";
$rResult_TR = $this->db->query($sQuery_TR);
$rResult_array_TR=$rResult_TR->result_array();
$iTotal = $rResult_array_TR[0]['TotalRecords'];
$output = array("sEcho" => intval($sEcho),"iTotalRecords" => intval($iTotal),
"iTotalDisplayRecords" => intval($iTotal), //$iFilteredTotal,
"aaData" => array()
);
foreach($rResult_array as $aRow){
$row = array();
foreach($aColumns as $col){
if($aRow[$col]=='D'){
$row[] = 'Disable';
}else{
$row[] = $aRow[$col];
}
}
array_push($row, '<a href="'.base_url().'admin/broker/edit_broker/'.$aRow['broker_id'].'" 
class="editRcords btn btn-default btn-sm btn-icon icon-left"><i class="entypo-pencil"></i> 
Edit</a> <a href="javascript:void(0)" id="brkr_'.$aRow['broker_id'].'" 
class="removeRcords btn btn-danger btn-sm btn-icon icon-left">
<i class="entypo-cancel"></i> Remove</a>');
$output['aaData'][] = $row;
}
return $output;
}
        

5. You can setup jQuery function through out your project OR Application. you have to pass two param action_key and id for removing records.

function do_remove_ajax(action_key,id){
$.ajax({
url baseurl+'controller/do_remove',
type 'POST',
data{idid,action_keyaction_key},
dataType 'json',
beforeSend function() {
},
complete function() {
},
success function(response) {
switch (response.Mstatus) {
case 'success'
$("#"+response.process_id).hide();
break;
case 'error'
showalert(response.msg,'showmessage_jscbf');
break;
default
break;
}
}
});
}
        

6. Your view load function will goes like below

public function view_broker() {
$data['meta_title'] = 'Broker Listing';
$data['meta_keywords'] = 'Broker Listing';
$data['meta_desc'] = 'Broker Listing';
$data['sidebarmenu'] = 'sidebar_menu';
$data['top_menu'] = 'top_menu';
$data['main'] = 'broker_listing';
$data['footer'] = 'footer';
$this->load->vars($data);
$this->load->view($this->admin_dashboard);
}
        

NOTE: Flow goes like below sidebar menu link click--->view_broker() function call---> call ajax function get_broker_listing() ---> call model function broker_listing--->controller return json formate required for datatables.

Creating store procedure Mysql Insert

Showing you some examples of creating store procedure in mysql.

1. "At The Rate" sign used for local variable declare.

2. For calling a store procedure use function below. i am using Codeigniter.

 public function AddBooking(){
  $sql="call usp_AddBooking()";
 $parameters=array();
 $query = $this->db->query($sql,$parameters);
 return $query->result();
 }
 DROP PROCEDURE IF EXISTS `usp_AddBooking` $$
 CREATE PROCEDURE `usp_AddBooking`(
 IN iVendorId INT,
 IN iCustomerId INT, 
 IN iServiceId INT,
 IN dServiceBookingTime DATETIME,
 IN dArrivalTime DATETIME
 )
BEGIN
 DECLARE iBookingId INT default 0;
 BEGIN
 -- ERROR
 set ErrorCode = -999;
 rollback;
 END;
 DECLARE exit handler for sqlwarning
 BEGIN
 -- WARNING
 set ErrorCode = -888;
 rollback;
 END;
 START TRANSACTION;
 INSERT INTO skin_booking 
 (iVendorId 
 ,iCustomerId 
 ,iServiceId
 ,dServiceBookingTime 
 ,dArrivalTime
  ,eStatus
 ,dCreatedDate 
 ,iBookingId 
 ) 
 VALUES 
 (iVendorId 
 ,iCustomerId 
 ,iServiceId 
 ,dServiceBookingTime 
 ,dArrivalTime
 ,'1'
 ,NOW()
 ,iBookingId 
 );
 SET @iBookingId = LAST_INSERT_ID();
 SELECT @iBookingId as BookingId;
 COMMIT;
 END$$

Register users and login through store procedure mysql

1. Signup a user through store procedure.

2. "mysecret" here you can use your key. password will be encrypted using AES

3. You can call store procedure like below

CALL`AddCustomerDetails`('David Warnor','david@gmail.com','12','male','2377.34','34343.343');
CREATE PROCEDURE `AddCustomerDetails`(
 IN `vCustomerName` VARCHAR(50),
 IN `vEmail` VARCHAR(50),
 IN `vPassword` VARCHAR(50),
 IN `eGender` VARCHAR(10),
 IN `dLatitude` FLOAT,
 IN `dLongitude` FLOAT
)
BEGIN
 DECLARE ResultCount INT default 0;
 DECLARE skey VARCHAR(15) default 'mysecret';
 DECLARE eStatus INT default 1;
 DECLARE iCustomerId INT;
 
 SET @ResultCount = (SELECT COUNT(iCustomerId) FROM table_name WHERE vEmail = vEmail);
 IF (@ResultCount > 0) THEN
 SET @iCustomerId = 0;
 SELECT @iCustomerId;
 ELSE
 INSERT INTO table_name
 (vCustomerName
 ,vEmail
 ,vPassword
 ,eGender
 ,dLatitude
 ,dLongitude
 ,eStatus
 ,dCreatedDate
 )
 VALUES
 (vCustomerName
 ,vEmail
 ,AES_ENCRYPT(vPassword,skey)
 ,eGender
 ,dLatitude
 ,dLongitude
 ,eStatus
 ,NOW()
 );
 SET @iCustomerId = LAST_INSERT_ID();
 SELECT @iCustomerId as CustomerId;
 END IF;
END

1. Now above will add a entry to your mysql table let create a store procedure which will validate and check credentials.

ALL `CheckLogin`('david@gmail.com', '123123', '0');
CREATE PROCEDURE `CheckLogin`(
 IN `Email` VARCHAR(255),
 IN `Psw` VARCHAR(255),
 IN `UserType` INT(11)
)
BEGIN
 DECLARE ResultCount INT;
 DECLARE ResultMessage varchar(15);
 DECLARE skey VARCHAR(15) default 'secrets';
 IF (UserType = 0) THEN
 SET @ResultCount = (SELECT COUNT(C.iCustomerId) FROM customerdetails C 
 WHERE C.vEmail = Email AND C.vPassword = AES_ENCRYPT(Psw,skey) AND C.eStatus = 1);
  IF (@ResultCount > 0) THEN #For Customer
  SELECT * from customerdetails C WHERE C.vEmail = Email AND C.vPassword = AES_ENCRYPT(Psw,skey) 
  AND C.eStatus = 1;
  ELSE
 SET @ResultMessage='User not found.';
  SELECT @ResultMessage;
  END IF;
 ELSE
 SET @ResultCount = (SELECT COUNT(V.iVendorId) FROM vendor V WHERE V.vEmail = Email 
 AND V.vPassword = AES_ENCRYPT(Psw,skey) AND V.eStatus = 1);
 IF (@ResultCount > 0) THEN
  SELECT * from vendor V WHERE V.vEmail = Email AND V.vPassword = AES_ENCRYPT(Psw,skey) 
  AND V.eStatus = 1;
 ELSE
 SET @ResultMessage='vendor not found.';
  SELECT @ResultMessage;
 END IF;
 END IF;
END

Ajax captcha using codeigniter php bootstrapvalidator

I will show you how you can create a captcha validation with Codeiginter based on Ajax.

1. Below is my model name as Mcaptcha

class Mcaptcha extends CI_Model {
protected $ci;
function __construct() {
// Call the Model constructor
parent::__construct();
$this->ci =& get_instance();
}
function setCaptcha(){
$this->load->helper('captcha');
$rand = substr(md5(microtime()),rand(0,26),5);
$vals = array(
'img_path' => FCPATH.'assets/captcha/',
'img_url' => base_url().'assets/captcha/',
'expiration' => 1800,// half hour
'font_path' => FCPATH.'assets/fonts/Cabin-BoldItalic.ttf',
'img_width' => '140',
'img_height' => 30,
'word' => $rand,
);
$cap = create_captcha($vals);
$this->ci->session->set_userdata(array('cpt'=>$rand, 'img' => $cap['time'].'.jpg'));
return $cap['image'] ;
}
}
    

2. Your controller function will goes like below

public function send_us_email() {
$this->load->library('form_validation');
$this->load->model('mcaptcha');
$this->form_validation->set_error_delimiters('<span>', '</span>');
$this->form_validation->set_rules('sname', 'Name', 'trim|required|max_length[20]|xss_clean');
$this->form_validation->set_rules('captcha', 'Captcha', 'trim|required|max_length[5]|
callback_validate_captcha|xss_clean');
if ($this->form_validation->run() == FALSE){
// if any fields on form not validated properly we need to unset session and unlink captcha
image previously created and then regenerate captcha and passing it to Cmessage.
if(file_exists(FCPATH."assets/captcha/".$this->session->userdata['img']))
unlink(FCPATH."assets/captcha/".$this->session->userdata['img']);
$this->session->unset_userdata('cpt');
$this->session->unset_userdata('img');
$captcha = $this->mcaptcha->setCaptcha();
echo json_encode(array('Mstatus'=>'error','Cmessage'=>$captcha,'msg' => validation_errors()));
}else{
$sname=set_value('sname');
$captcha=set_value('captcha');
$data=array('name'=>$sname);
$send_us_a_email_template= $this->load->view('email_templates/send_us_a_email', $data, true);
$this->email->from('youremail@domain.com',"YourTITLE");
$this->email->to($semail);
$this->email->subject('Customer Query Request');
$this->email->message($send_us_a_email_template);
if ($this->email->send()){
// same logic above if every thing goes well.
if(file_exists(FCPATH."assets/captcha/".$this->session->userdata['img']))
unlink(FCPATH."assets/captcha/".$this->session->userdata['img']);
$this->session->unset_userdata('cpt');
$this->session->unset_userdata('img');
echo json_encode(array('Mstatus'=>'success','Cmessage'=>'We have recieved 
your email and we will get back to you shortly. Thanks.','msg'=>''));
}else{
echo json_encode(array('Mstatus'=>'error','Cmessage'=>'','msg' => 'Error 
in processing your query. Please try later.'));
}
}
}
    

3. Below is call back function to validate captcha enter by user.

public function validate_captcha($str){
if($str != $this->session->userdata['cpt']){
$this->form_validation->set_message('validate_captcha', 'Wrong captcha code, 
hmm are you the Terminator?');
return false;
}else{
return true;
}
}
    

4. Your jQuery goes like below

$(document).ready(function() {
$('#submit-link-form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
linkname: {
validators: {
notEmpty: {
message: 'The name is required.'
},
stringLength: {
min: 4,
message: 'Name must be 4 characters long.'
}
}
},
scaptcha: {
validators: {
notEmpty: {
message: 'Captcha verification is required.'
}
}
}
}
})
.on('success.form.bv', function(e) {
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.ajax({
url: $form.attr('action')+'?time='+timestamp,
type: $form.attr('method'),
data: $form.serialize(),
dataType:'json',
beforeSend: function() {
},
complete: function() {
},
success: function(response){
switch(response.Mstatus){
case 'success':
break;
case 'error':
break;
default:
break;
}
}
});
});
});
    

5. Your bootstrap model popup will looks like below

<div class="container">
<div class="modal fade animate1 faster-modal" id="send-us-email-modal" tabindex="-1" role="dialog" 
aria-labelledby="sendusemailLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span></button>
<h4 class="modal-title" id="sendusemailLabel">Send Us Email</h4>
</div>
<div class="modal-body">
<?php echo form_open(base_url().'root/send_us_email',array('id' =>'send-us-email-form',
'name' =>'send-us-email-form','method'=>'post'));?>
<div class="faster-ajax-loader faster_ajax_loader" style="display:none;"></div>
<aside class="form-group">
<div class="popup_message"></div>
</aside>
<aside class="form-group">
<input type="text" class="form-control required" placeholder="Your Name" name="sname" id="sname" />
</aside>
<aside class="form-group form-capcha"> <span class="generated-capcha"><img 
src="<?php echo base_url();?>images/default.jpg" width="140" height="30" alt="Verification Code">
</span><a href="javascript:void(0);" title="Refresh Verification Code">
<span class="glyphicon glyphicon-refresh refresh-regenerate"></span></a> </aside>
<aside class="form-group">
<input class="form-control text required" id="captcha" type="text" name="captcha" value="" 
placeholder="Verification Code" />
</aside>
<aside class="form-group">
<input type="submit" class="btn-features animate1" value="Send Us Email" />
</aside>
</form>
</div>
</div>
</div>
</div>
</div>
    

6. If you would like to refresh captcha if it is not visible properly to users then refresh captcha on Link / Image click .Your js code will goes like below

$(function(){
$(document).on('click', '.refresh-regenerate', function(){
var myformclick=$(this).closest('form').attr('id');
$.ajax({
url: baseurl+"root/generate_captcha",
type: "POST",
data: "cap=1",
cache: false,
dataType:'json',
beforeSend: function() {
$("#"+myformclick).find(".faster_ajax_loader").css('display','block');
},
complete: function() {
$("#"+myformclick).find(".faster_ajax_loader").css('display','none');
},
success: function(response){
$("#"+myformclick).find(".generated-capcha").html(response.Cmessage);
}
});
});
});
    

7. I am calling generate_captcha function so that on each click new captcha image will be generated.

public function generate_captcha(){
if(file_exists(FCPATH."assets/captcha/".$this->session->userdata['img']))
unlink(FCPATH."assets/captcha/".$this->session->userdata['img']);
$this->load->model('mcaptcha');
$this->session->unset_userdata('cpt');
$this->session->unset_userdata('img');
$captcha = $this->mcaptcha->setCaptcha();
echo json_encode(array('Mstatus'=>'success','Cmessage'=>$captcha,'msg' => validation_errors()));
}
    

Creating subdomain on amazon ubuntu Ec2

1. Create a directory from command line

sudo touch /var/www/your-directory

2. Create a conf file on location /etc/apache2/site-available/

 i. sudo touch /etc/apache2/site-available/your-directory-name.domainname.com.conf
 ii. Just copy 000-default.config data to newly created file above
 sudo cp /etc/apache2/site-available/000-default.conf 
/etc/apache2/site-available/your-directory-name.domainname.com.conf
 iii. open file for edit 
 sudo nano /etc/apache2/site-available/your-directory-name.domainname.com.conf
 and replace 
 
 DocumentRoot /var/www/your-directory-name
 
 iv. sudo service apache2 reload.
 v. sudo service apache2 restart. 

3. After above process go to amazon hosted zone just follow below steps

 1. create a records set put name of your choice in name required fields
 2. put www.yourdomain.com. in value and save records set. 

Minify your javascript files offline with uglifyjs

You can compress or minify your Javascript / jQuery code by visiting to resources which is available but if you want to use it on your localhost so you can use it and run like below on windows.

1. Installed Node.js
2. Set envirnment variable
NODE_PATH
C:\Program Files\nodejs\UglifyJS\bin\uglify;C:\Program Files\nodejs\node.exe;
3. Download uglify master from gits and put in folder
C:\Program Files\nodejs\uglifyjs
4. run command
Run npm -g install uglify-js
final if you want to minify js
5. Run uglifyjs -o app.min.js app.js

Note: app.min.js is your name and app.js is your source js which you want to compress OR minify.

Tomcat 8.0.21 running in ubuntu 14.04 TLS

I am explaining every step to run tomcat in ubuntu 8.0.21 and how to setup your projects and running Servlets ,Jsp.

1. Install JDK 7 before installing tomcat.

sudo apt-get install openjdk-7-jdk

2. Download the latest version of tomcat tomcat.apache.org , i downloaded Apache Tomcat 8.0.21

I rename dowonload folder to "apache-tomcat"
and move it to location /usr/local/apache-tomcat
go to /usr/local/apache-tomcat/conf/tomcat-users.xml
or you can edit from terminal sudo nano /usr/local/apache-tomcat/conf/tomcat-users.xml
place below lines & save. [ctrl+^+x then press Y]
<role rolename="manager-gui">
<role rolename="admin-gui">
<user password="rohit" roles="manager-gui,admin-gui" username="rohit">
</user>
</role>
</role>

3. We have to create a bash file for running and stoping tomcat. Create a new file tomcat8021 in /etc/init.d/ and add the below code

 #!/bin/bash
export CATALINA_HOME=/usr/local/apache-tomcat
PATH=/sbin:/bin:/usr/sbin:/usr/bin
start() {
sh $CATALINA_HOME/bin/startup.sh
}
stop() {
sh $CATALINA_HOME/bin/shutdown.sh
}
case $1 in
start|stop) $1;;
restart) stop; start;;
*) echo "Run as $0 "; exit 1;;
esac

4. Give 755 permission

    sudo chmod 755 /etc/init.d/tomcat8021

5. For starting stoping tomcat

   sudo /etc/init.d/tomcat8021 start / stop

6. We need to set Classpath and java home varibale to work properly. so i edited the file call environment place below lines there.

sudo nano /etc/environment
CLASSPATH=.:/usr/lib/jvm/default-java/bin:/usr/local/apache-tomcat/lib/servlet-api.jar
JAVA_HOME=/usr/lib/jvm/default-java

Creating a new project in ubuntu 14.04 TLS

1. I created a folder called store in /usr/local/apache-tomcat/

2. store(Project Folder) ---> WEB-INF ---> classes(DIR) , lib(DIR) , web.xml (file)

3. web.xml file looks like below

<web-app>
<servlet>
<servlet-name>HelloWorld</servlet-name>
<servlet-class>HelloWorld</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloWorld</servlet-name>
<url-pattern>/HelloWorld</url-pattern>
</servlet-mapping>
</web-app>

4. Inside classes folder your source file HelloWorld.java will be store for compiling it use below command

mangel@mangel-desktop:/usr/local/apache-tomcat/webapps/store/WEB-INF/classes$ 
javac -classpath /usr/local/apache-tomcat/lib/servlet-api.jar HelloWorld.java

5. After compile .class file created by above command , then you need to create a context file ,

Go to cd /usr/local/apache-tomcat/conf/Catalina/localhost/ from terminal.
sudo nano store.xml (store is the name of your project folder).
Just paste below line
<!-- Store Context -->
<context debug="0" docbase="store" path="/store" reloadable="true">
</context>

So above all configure manually. just open locahost:8080/store/HelloWord.

Creating subdomain on Digital Ocean

Directory

html refers to main site.
demo , blog outside html (folder) refers to subdomain.

1. Create a directory from command line

 sudo touch /var/www/your-directory

2. Create a conf file on location /etc/apache2/site-available/

 sudo touch /etc/apache2/sites-available/your-directory-name.domainname.com.conf
 Just copy 000-default.config data to newly created file above by below command
 sudo cp /etc/apache2/sites-available/000-default.conf 
 /etc/apache2/site-available/your-directory-name.domainname.com.conf
 open file for edit 
 sudo nano /etc/apache2/sites-available/your-directory-name.domainname.com.conf
 and replace 
 DocumentRoot /var/www/your-directory-name
 sudo service apache2 reload.
 sudo service apache2 restart. 

3. After above proceee go to amazon hosted zone just follow below steps.

 Create a records set put name of your choice in name required fields
 Put www.yourdomain.com. in value and save records set. it will take 10-15 min to process by amazon.