Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

CURD operations using PHP Functions with Bootstrap

Hi, In this tutorial, I am going to teach you how to perform the CURD operations using PHP Functions with Bootstrap.

What do you mean by CRUD operations ?
CRUD operations are the basic operations in database
C - Create
R - Read
U - Update
D - Delete

Generally, we implement the CURD operations normal way. But we implement these operations by using PHP functions.
The code will clean and reduce the steps also and we can reuse these functions in a later project also.

Simply implement the function execute($query). Here execute function needs the one parameter i.e $query.
You have to pass the SQL query here it will execute the query. Like this way, you have to write all those functions for the CRUD operations.

Step #1:
We need to create the database with name student
data table
--
-- Table structure for table `data`
--

CREATE TABLE `data` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `address` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Step #2:
We need to connect the database from PHP
config.php
<?php
$servername = "localhost";
$username = "root";
$password = "vertrigo";
$dbname = "student";

// Create connection
$con = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
    die("Connection failed: " . $con->connect_error);
} 

include "includes/functions.php";
?>
Step #3:
Create includes folder in your project directory and create the functions.php file
This file contains the CURD operations functions
functions.php
<?php
//Execute the query statement
function execute($query){
    global $con;
    if($con->query($query)){
        return 1;
    } 
    else{
        return 0;
    }
}

//Delete the record from the table
function delete($table,$id){
    global $con;
    if($con->query("DELETE FROM $table WHERE id = $id")){
        return 1;
    } 
    else{
        return 0;
    }
}

//Return result set
function getData($table){
    global $con;
    $result = $con->query("SELECT * FROM $table");
    return $result;
}

//Return a single record
function getRecord($table,$id){
    global $con;
    $result = $con->query("SELECT * FROM $table WHERE id = $id");
    $record = $result->fetch_object();
    return $record;
}

//Returns number of affected rows
function rowCount($table){
    global $con;
    $result = $con->query("SELECT * FROM $table");
    $count =$result->num_rows;
    return $count;
}

//Returns last inserted id
function lastInsertId(){
    global $con;
    return $con->insert_id;
}

//Close the connection
function close(){
    global $con;
    $con->close();
}
?>

Step #4:
Now just call the functions to execute
For insertion
<?php
include "config.php";
$insert = "INSERT INTO `data` (`id`, `name`, `address`, `email`) VALUES (NULL, 'test', 'test', 'test@test.com')";
$i = execute($insert);
if($i == 1){
    echo "1 row inserted";
}
?>
Fetch the data from table
<?php
include "config.php";
$data = getData("data");
while($row = $data->fetch_object()){
    echo $row->id;
}
?>
Get single record from table
<?php
include "config.php";
$row = getRecord("data",6);
print_r($row);
echo $row->id;
echo "<br />";
echo $row->name;
echo "<br />";
echo $row->address;
echo "<br /> 
";
echo $row->email;
echo "<br />";
?>
How to get the rows count from the table
<?php
include "config.php";
echo rowCount("data");
?>
How to get the last inserted id
<?php
include "config.php";
$insert = "INSERT INTO `data` (`id`, `name`, `address`, `email`) VALUES (NULL, 'test', 'test', 'test@test.com')";
echo "
".lastInsertId(execute($insert));
?>
Download Demo


Now the implementation of the CURD operations using PHP Functions with Bootstrap.
index.php
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>DB Functions</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">  
   <link rel="stylesheet" href="assets/css/style.css">  
  <script src="assets/js/jquery.min.js"></script>  
  <script src="assets/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <?php  
 extract($_REQUEST);   
 include "config.php";   
 ?>  
 <div class="container">  
  <div class="row">  
   <div class="col-md-6">  
    <h2>Student Information</h2>  
    <p>View all student information</p>  
   </div>  
   <div class="col-md-6">  
   <a href="" class="top btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">Add new student</a>  
   </div>  
  </div>  
  <?php  
  if(isset($remove)){  
   $status = delete("data",$remove);  
   if($status == 1){  
    echo '<div class="alert alert-success" role="alert">Student record is removed successfully</div>';  
   }  
  }  
  if(isset($sadd)){  
   echo '<div class="alert alert-success" role="alert">Student record is added successfully</div>';  
  }  
  if(isset($supdate)){  
   echo '<div class="alert alert-success" role="alert">Student record is updated successfully</div>';  
  }  
  ?>  
  <table class="table table-hover">  
   <thead>  
    <tr>  
     <th>#</th>  
     <th>Name</th>  
     <th>Address</th>  
     <th>Email</th>  
     <th>Edit</th>  
     <th>Remove</th>  
    </tr>  
   </thead>  
   <tbody>  
   <?php  
     $data = getData("data");  
     while($row = $data->fetch_object()){  
   ?>  
    <tr>  
     <td><?=$row->id;?></td>  
     <td><?=$row->name;?></td>  
     <td><?=$row->address;?></td>  
     <td><?=$row->email;?></td>  
      <td><a href="edit.php?sid=<?=$row->id;?>"><span class="glyphicon glyphicon-edit"></span></a></td>  
     <td><a href="index.php?remove=<?=$row->id;?>"><span class="glyphicon glyphicon-trash"></span></a></td>  
    </tr>  
   <?php } ?>  
   </tbody>  
  </table>  
  <!-- Modal -->  
 <div id="myModal" class="modal fade" role="dialog">  
  <div class="modal-dialog">  
   <!-- Modal content-->  
   <div class="modal-content">  
    <div class="modal-header">  
     <button type="button" class="close" data-dismiss="modal">&times;</button>  
     <h4 class="modal-title">Student</h4>  
    </div>  
    <div class="modal-body">  
     <form role="form" method="post" action="save.php">  
      <div class="form-group">  
       <label for="name">Name:</label>  
       <input type="text" class="form-control" id="sname" name="sname">  
      </div>  
      <div class="form-group">  
       <label for="add">Address:</label>  
       <textarea class="form-control" rows="5" id="add" name="add"></textarea>  
      </div>  
      <div class="form-group">  
       <label for="email">Email address:</label>  
       <input type="email" class="form-control" id="email" name="email">  
      </div>  
      <button type="submit" class="btn btn-default">Submit</button>  
     </form>  
    </div>  
   </div>  
  </div>  
 </div>  
 <?php close(); ?>  
 </div>  
 </body>  
 </html> 
save.php
<?php  
 extract($_REQUEST);   
 include "config.php";  
 $insert = "INSERT INTO `data` (`id`, `name`, `address`, `email`) VALUES (NULL, '$sname', '$add', '$email')";  
 $status = execute($insert);  
 if($status == 1){  
      echo '<script>window.location.assign("index.php?sadd=success");</script>';  
 }  
 close();  
 ?>  
edit.php
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>DB Functions</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">  
   <link rel="stylesheet" href="assets/css/style.css">  
  <script src="assets/js/jquery.min.js"></script>  
  <script src="assets/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <?php  
 extract($_REQUEST);   
 include "config.php";   
 $row = getRecord("data",$sid);  
 ?>  
 <div class="container">  
   <h2>Student Information</h2>  
      <form role="form" method="post" action="update.php">  
       <input type="hidden" id="sid" name="sid" value="<?=$row->id;?>">  
       <div class="form-group">  
           <label for="name">Name:</label>  
           <input type="text" class="form-control" id="sname" name="sname" value="<?=$row->name;?>">  
       </div>  
       <div class="form-group">  
           <label for="add">Address:</label>  
           <textarea class="form-control" rows="5" id="add" name="add"><?=$row->address;?></textarea>  
       </div>  
       <div class="form-group">  
           <label for="email">Email address:</label>  
           <input type="email" class="form-control" id="email" name="email" value="<?=$row->email;?>">  
       </div>  
       <button type="submit" class="btn btn-default">Update</button>  
      </form>  
 <?php close(); ?>  
 </div>  
 </body>  
 </html>  
update.php
 <?php  
 extract($_REQUEST);   
 include "config.php";  
 $update = "UPDATE `data` SET `name` = '$sname', `address` = '$add', `email` = '$email' WHERE `id` = $sid";  
 $status = execute($update);  
 if($status == 1){  
      echo '<script>window.location.assign("index.php?supdate=success");</script>';  
 }  
 close();  
 ?>  
Download Demo
* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff
Character count remaining on textarea in bootstrap

Character count remaining on textarea in bootstrap

Hi ! Today i am going to explain how to limit the character count in the text area and showing the remaining characters using JQuery and Bootstrap.

This functionality is need when a user allows to enter the bio data, commenting on a particular post and entering a description about the product or any thing in this way we need to allow the specific number of character only.
HTML code
 <div class="form-group">  
  <label for="comment">Comment:</label>  
  <textarea class="form-control" id="comment" rows="5" maxlength="150"></textarea>  
 </div>  
JavaScript code
<script type="text/javascript">  
   $(document).ready(function() {  
   var text_max = 150;  
   $('#textarea_count').html(text_max + ' characters remaining');  
   $('#comment').keyup(function() {  
     var text_length = $('#comment').val().length;  
     var text_remaining = text_max - text_length;  
     $('#textarea_count').html(text_remaining + ' characters remaining');  
        });  
      });  
</script>  
If you want to increase or decrease the characters.
Follow these steps to modify.
Step #1 : In textarea field change the maxlength 150 to your own
Step #2 : In javascript change the text_max variable value 150 to your own

Download Demo
* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff
Live html compiler using php and bootstrap

Live html compiler using php and bootstrap

If you want to make the live html compiler similar to the w3schools.com try editor

What is live html compiler ?
you can see the exact output of the html code before save and run in the browser.

This is a simple technique to develop the live html code in the php.
Here we are going to use the textarea as a input of the html code and iframe as a output of the the input code.

in left textarea give the input of the html code and click the see results button then it renders the html code preview in the right iframe instantly.

index.html
 
 <title> Live html compiler using Php and bootstrap</title>  
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">  
 <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>  
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
 <style type="text/css">  
 iframe { border: 1px silver solid; }  
 textarea { resize:none; }  
 .glyphicon{font-size: 25px;}  
 </style>  
 <div class="container" >  
 <div class="row">  
 <div class="col-md-6">  
 <h2><span class="glyphicon glyphicon-align-justify"></span> Html Code </h2>  
 <form id="htmlcomplier" name="htmlcomplier" action="result.php" target="view" method="post">  
 <div class="form-group">  
 <textarea class="form-control" required rows="24" id="code" Placeholder="Enter your code and Submit" name="code">  
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
  <div class="jumbotron">  
   <h1>Demo</h1>  
   <p>Demo tag line!</p>  
  </div>  
  <div class="row">  
   <div class="col-sm-4">  
    <h3>Column 1</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 2</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 3</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>  
 </textarea>   
 <br/>  
 <input class="btn btn-success pull-right" type="submit" value="See result" />  
 </div>  
 </form>  
 </div>  
 <div class="col-md-6">  
 <h2><span class="glyphicon glyphicon-list-alt"></span> Result </h2>  
 <div class="form-group">  
 <iframe width="100%" height="510px" frameborder="0" src="result.php" name="view" id="view"></iframe>  
 </div>  
 </div>  
 </div>  
 </div>  

result.php
 
<?php  
$Getcode = @$_REQUEST["code"];  
print $Getcode ;  
?>  

Download Demo
* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff