Skip to main content

CRUD Using Php with Ajax

CRUD Using  Php with  Ajax

(index.php)

<?php  include('row.php');?>
<!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="asset/bootstrap.min.css">
  <script src="asset/jquery.min.js"></script>
  <script src="asset/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
       <div class="alert" role="alert">
         
       </div>
 
   
        <div class="col-md-10 col-md-offset-1">

            <div class="panel panel-default panel-table">
              <div class="panel-heading">
                <div class="row">
                  <div class="col col-xs-6">
                    <h3 class="panel-title">Panel Heading</h3>
                  </div>
                  <div class="col col-xs-6 text-right">
                    <button type="button" class="btn btn-sm btn-primary btn-create RowCreate" data-toggle="modal" data-target="#myModal">Create New</button>
                  </div>
                </div>
              </div>
              <div class="panel-body">
               <ul class="list-group">
                    <li class="list-group-item">
                        <div class="col-md-3"></div>
                        <div class="col-md-3">Id</div>
                        <div class="col-md-3">Name</div>
                        <div class="col-md-3">Email</div>
                        <div class="clearfix"></div>
                    </li>

                    <?php foreach ( $row->SelectRows( ) as $user) {?>

                   
                    <li class="list-group-item" id="row<?php  echo $user->id ?>">
                        <div class="col-md-3">
                            <a class="btn btn-default RowEdit"   data-toggle="modal" data-target="#myModal1"  data-id="<?php  echo $user->id ?>"> <span class="glyphicon glyphicon-pencil "></span></a>
                            <a class="btn btn-danger RowDelete"  data-id="<?php  echo $user->id ?>"> &#10007;</a>
                        </div>
                        <div class="col-md-3"><?php  echo $user->id ?></div>
                        <div class="col-md-3 name"><?php  echo ucfirst($user->name) ?></div>
                        <div class="col-md-3 email"><?php  echo $user->email ?></div>
                        <div class="clearfix"></div>
                    </li>
                    <?php } ?>
                </ul>
               
                <div class="col-md-12">
                    <div class="row alert">

                    </div>
                </div>
               
                 
           
              </div>
             <?php $row->pagination();?>
            </div>

</div></div></div>
        <div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="myform" action="row.php"   method="post"  >
                    <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">

<fieldset class="form-group">
<label for="Name">Enter Name </label>
<input type="text" class="form-control" id="Name" name="Name" placeholder="Example Name">
</fieldset>
<fieldset class="form-group">
<label for="Email">Enter Email </label>
<input type="text" class="form-control" id="Email" Name="Email" placeholder="Example Email">
</fieldset>

<div class="SuccesMSG">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>Successfully Inserted.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary SubmitForm" value="Save">
</div>
                    </form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
        <div class="modal fade" id="myModal1">
            <div class="modal-dialog" role="document">
                <form method="post" action="row.php" id="updateRowSave">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                            <fieldset class="form-group">
                                <label for="Name">Enter Name </label>
                                <input type="hidden" class="form-control" id="EditId" name="id" >
                                <input type="text" class="form-control" id="EditName" name="name" >
                            </fieldset>
                            <fieldset class="form-group">
                                <label for="Email">Enter Email </label>
                                <input type="text" class="form-control" id="EditEmail"  name="email">
                            </fieldset>
                       
                         
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary SubmitForm">Update </button>
                    </div>
                </div><!-- /.modal-content -->
                </form>
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
<script type="text/javascript">
$(function(){
       $('.RowCreate').on("click",function(){
       $('.SuccesMSG').hide();
  $('.myform').show('fast');
       });
});
$(function(){
       $('.RowEdit').on("click",function(){
            var  $id = $(this).data('id');
            $.post( "row.php", { ac:'edit', id:$id})
              .done(function( data ) {
                  var rowdata = data.split('|');
                  $('#EditName').val(rowdata[1]);
                  $('#EditEmail').val(rowdata[2]);
                  $('#EditId').val(rowdata[0]);
              });
       });
});
  $(function(){
    $('#updateRowSave').submit(function() {
      /* Act on the event */
         var  $name = $('#EditName').val();
         var  $email =  $('#EditEmail').val();
         var  $id =  $('#EditId').val();
         $.post( "row.php", { ac:'update',name:$name,email:$email,id:$id})
              .done(function( data ) {
                 $('.modal-backdrop , #myModal1').hide();
                 var UpdateData = data.split('|');
                 $('#row'+$id+' .name').text(UpdateData[1]);
                 $('#row'+$id+' .email').text(UpdateData[2]);
              });
        return false;
    });
  });
$(function(){
        $('.myform').submit(function(){
        var $name = $('#Name').val();
        var $email = $('#Email').val();
        if ($name == "" || $name == null) {
            alert("Enter Name");
            return false;
        } else if ($email == "" || $email == null) {
             alert("Enter Email ");
            return false;
        }else{
             
             $.post( "row.php", { ac:'insert',n: $name , e:$email })
              .done(function( data ) {

                  if( data =="not"){
                    alert("enter valid email id");
                  }else {
                       location.reload();
                  }
              });
           
            }
               
        return false;
       });
});
$(function(){
$('a.RowDelete').on("click",function(){
        var  $id = $(this).data('id');
         $.post( "row.php", { ac:'delete',id: $id })
            .done(function( data ) {
            $('#row'+$id).slideUp('slow');    
          });  
    });
});
</script>
</body>
</html>



(row.php)


<?php

/**
*
*/
class Row
{
private $host="localhost";
private $user="root";
private $password="";
private $database="test";
private $con;
public $id;
public $name;
public $email;
private $table="user";
private $myquery;
private $limit="5";
public  function __construct()
{
$this->con = mysqli_connect($this->host,$this->user,$this->password,$this->database);
 
}
public function exe()
{

}
public function insertRow($n,$e)
{
       //echo $this->myquery = "INSERT INTO ".$this->table." ('name','email') VALUES ()";
     $this->myquery = "INSERT INTO  ".$this->table." ( `name`, `email`) VALUES ('".$n."','".$e."')";
     mysqli_query($this->con, $this->myquery) or  die(mysqli_error());
          echo mysqli_insert_id($this->con);
}
public function updateRow($id,$name,$email)
{
$this->myquery = "UPDATE ".$this->table." SET  name='$name',email='$email' WHERE id='$id'";
    mysqli_query($this->con, $this->myquery) or  die(mysqli_error());
         $this->SelectRowsById($id);
}
public function DeleteRow($id)
{
$this->myquery = "DELETE FROM ".$this->table."  WHERE id=$id ";
   mysqli_query($this->con, $this->myquery) or  die(mysqli_error());
   echo $id;
}
public function SelectRowsById($id)
{  
$this->myquery = "SELECT * FROM ".$this->table." WHERE id='$id' ";
$result = mysqli_query($this->con, $this->myquery) or die(mysqli_error());
$row = mysqli_fetch_array($result) or die(mysqli_error());
$data = [];
$data[0]= $row['id'];
$data[1]= $row['name'];
$data[2]= $row['email'];
         foreach ($data as   $value) {
          echo $value;
          echo "|";
         }
exit();
}
public function SelectRows($page="")
{

     
  if (!$_GET['page']) {
    $start = 1;

  }else{
  $start = ($_GET['page'] - 1) * $this->limit;
  }
       $data =[];
  $this->myquery = "SELECT * FROM ".$this->table." LIMIT ".$start.",".$this->limit;
  //$this->exe();
  $result = mysqli_query($this->con, $this->myquery);
       while($row = mysqli_fetch_object($result)) {
          $data[]=$row;
  }
  return  $data;
}
public function pagination()
{
$total=$this->total();
$number = ceil($total / $this->limit);
?>
<div class="panel-footer">
                <div class="row">
                  <div class="col col-xs-4">Page 1 of <?=$number?>
                  </div>
                  <div class="col col-xs-8">
                    <ul class="pagination hidden-xs pull-right">
                     <li><a href="http://localhost/ajaxwithphp/?page=1">«</a></li>
                    <?php for($i=1; $i <= $number;$i++) { ?>
                      <li><a href="http://localhost/ajaxwithphp/?page=<?= $i ?>"><?= $i ?></a></li>
                    <?php } ?>
                    <li><a href="http://localhost/ajaxwithphp/?page=<?= $number ?>">»</a></li>
                    </ul>
                   
                  </div>
                </div>
            </div>
   <?php
}
public function total($value='')
{
$this->myquery = "SELECT id FROM ".$this->table."";
$result = mysqli_query($this->con, $this->myquery);
return $total = mysqli_num_rows($result);
}


 
}

$row = new Row;
if(isset($_POST['ac']) && $_POST['ac'] =="insert"){
if (!filter_var($_POST['e'], FILTER_VALIDATE_EMAIL) === false) {
    $row->insertRow($_POST['n'],$_POST['e']);
} else {
   echo "not";
}

}
if(isset($_POST['ac']) && $_POST['ac'] =="delete"){
$row->DeleteRow($_POST['id']);
}
if(isset($_POST['ac']) && $_POST['ac'] =="edit"){
$row->SelectRowsById($_POST['id']);
}

if(isset($_POST['ac']) && $_POST['ac'] =="update"){
$row->updateRow($_POST['id'],$_POST['name'],$_POST['email']);
}
Labels:

Comments

Post a Comment

Popular posts from this blog

how send mail using Swift mailer | switmailer send mail tutorial

how send mail using Swift mailer | switmailer send mail tutorial  <?php /* step 1 include Swift mailer file ;  */ include("vendor/swiftmailer/swiftmailer/lib/swift_required.php"); /* step 2 create your user details */ $senderEmail="saddam1234321@gmail.com"; $senderPassword="****Your password****"; $senderName="Saddam huassin"; /* step 3 set SMTP host  for sending mail  */ $user = Swift_SmtpTransport::newInstance('smtp.gmail.com','587','tls'); /* step 4 set your user details  */ $user->setUsername($senderEmail); $user->setPassword($senderPassword); /* step 5 create swift  mailer instance with a variable */ $mailer = Swift_Mailer::newInstance($user); /* step 6 Create a message */ $message = Swift_Message::newInstance('Wonderful Subject')   ->setFrom(array($senderEmail => $senderName))   ->setTo(array($senderEmail))   ->setBody('Here is the message itsel...
Post a Comment
Find more ----»

how install Swift mailer in localhost | swift mailer installation | composer install swift mailer

how install Swift mailer in localhost | swift mailer installation | composer install swift mailer Step 1:- open cmd  Step 2;- copy this command " composer required swiftmailer/swiftmailer @stable " . Step 3;- paste in cmd and press enter. Step 4;- after few second swift mailer ready to use ................................. 
Post a Comment
Find more ----»