Обновление и удаление с использованием PHP и AJAX - PullRequest
Новая
       8

Обновление и удаление с использованием PHP и AJAX

0 голосов
/ 01 февраля 2020

Это моя первая база данных с AJAX. Я действительно потерян сейчас, я не знаю, что делать дальше.

Я уже сделал в части, я могу вставлять данные в базу данных и просматривать их на веб-сайте. Обновление данных еще не завершено, и он может только получать данные из базы данных в заполненной форме, но не может вставить их в базу данных. Удаление данных по строкам также моя проблема. 

<?php  
$connect = mysqli_connect("localhost", "root", "", "test");
$query = "SELECT * FROM tbl_users ORDER BY id DESC";
$result = mysqli_query($connect, $query);
 ?>  
<!DOCTYPE html>  
<html>  
 <head>  
  <title>Database</title>  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 

 

 </head>  
 <body>  
    <h3 class="jumbotron jumbotron-fluid" align="center">Registration Database</h3>  
  

  <div class="container" style="width:900px;">
   
   <div class="table-responsive">
    <div align="right">

     <input type="button" data-toggle="modal" data-target="#add_data_Modal" value="Add User" class="btn btn-primary">
     </input>


    </div>
    <br />
    <div id="employee_table">
      <br />
     <table class="table table-bordered table-hover">
      <tr class = thead-dark>
       <th width="40%">First Name</th>
       <th width="40%">Last Name</th>
       <th width="5%">View</th>
       <th width="5%">Update</th>
       <th width="5">Delete</th>

       
      </tr>
      <?php
      while($row = mysqli_fetch_array($result))
      {
      ?>
      
      <tr id="<?php echo $row['id'] ?>" >
       <td data-target="firstname"><?php echo $row["firstname"]; ?></td>
       <td data-target="lastname"><?php echo $row["lastname"]; ?></td>
       <td>
        <input type="button" name="view" value="View" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-sm view_data" >
       </td>
          <td>
            <input type="button" name="update" value="Update" id="<?php echo $row["id"]; ?>" class="btn btn-success btn-sm update_data" >
          <td>
            <input type="button" name="delete" value="Delete" id="<?php echo $row["id"]; ?>" class="btn btn-danger btn-sm delete_data" >
           
          </td>
      
      <?php
      }
      ?>
     </table>
    </div>
   </div>  
  </div>
  <br />
  
  <button onclick="topFunction()" id="myBtn" title="Go to top" class="btn btn-block btn-secondary mx-auto d-block">Back to Top</button>

  

 </body>  
</html>  

<div id="add_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    
    <h4 class="modal-title">Add User to Database</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="insert_form" >
     <label>Full Name</label>
     <input type="text" name="firstname" id="firstname" class="form-control" placeholder="Enter First Name" />
     <br />
     <input type="text" name="middlename" id="middlename" class="form-control" placeholder="Enter Middle Name" />
     <br />
     <input type="text" name="lastname" id="lastname" class="form-control" placeholder="Enter Last Name" />
     <br />
     <label>Address</label>
     <input type="text" name="street" id="street" class="form-control" placeholder="Street">
     <br />
     <input type="text" name="barangay" id="barangay" class="form-control" placeholder="Barangay">
     <br />
     <select name="city" class="form-control">
        <option value="Caloocan">Caloocan</option>
        <option value="Las Piñas‎">Las Piñas‎</option>
        <option value="Makati">Makati</option>
        <option value="Malabon">Malabon</option>
        <option value="Mandaluyong">Mandaluyong</option>
        <option value="Manila">Manila</option>
        <option value="Marikina">Marikina</option>
        <option value="Muntinlupa">Muntinlupa</option>
        <option value="Navotas">Navotas</option>
        <option value="Parañaque">Parañaque</option>
        <option value="Pasay">Pasay</option>
        <option value="Pasig">Pasig</option>
        <option value="Quezon City">Quezon City</option>
        <option value="San Juan">San Juan</option>
        <option value="Taguig">Taguig</option>
        <option value="Valenzuela">Valenzuela</option>
     </select>
     <br />
     <input type="text" name="zipcode" id="zipcode" class="form-control" placeholder="Zip Code">
     <br />
     <label>Birth Date</label><br />
        <input type="date" value="date" id="date" name="birthday" class="form-control" locked onblur="getAge();" placeholder="YYYY-MM-DD"  />
        <br />
     <label for="age">Age</label><br /> 
        <input type="text" id="age" name="age" value="" class="form-control" placeholder="Your Age" readonly>
        <br />
     <label>Gender</label><br />
        <input type="radio" name="gender" value="male" > Male<br />
        <input type="radio" name="gender" value="female"> Female<br />
     <br />
     <label>Contact Number</label>
      <br />
      <div class="input-group-append">
        <span class="input-group-text">+63</span>
      <input type="text" name="contactnumber" id="contactnumber" class="form-control" placeholder="919 123 4567 - sample pattern" maxlength="12">
      <br />  
    </div>
     <label>Parents Name</label>
     <input type="text" name="fathername" id="fathername" class="form-control" placeholder="Father Name" />
     <br />
     <input type="text" name="mothername" id="mothername" class="form-control" placeholder="Mother Name" />
     <br />
     <input type="submit" name="insertbutton" id="insertbutton" value="SAVE" class="btn btn-success" />
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>


<div id="update_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    
    <h4 class="modal-title">Update User to Database</h4>
   </div>
   <div class="modal-body " id="update_detail">
    

   </div>

   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

   </div>
  </div>
 </div>
</div>


<div id="dataModal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
   
    <h4 class="modal-title">User Details</h4>
   </div>
   <div class="modal-body" id="employee_detail">
    
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

   </div>
  </div>
 </div>
</div>


<script>  
$(document).ready(function(){
 $('#insert_form',).on("submit", function(event){  
  event.preventDefault();  
  if($('#firstname').val() == "")  
  {  
   alert("First Name is required");  
  }  
  else if($('#middlename').val() == '')  
  {  
   alert("Middle Name is required");  
  }  
  else if($('#lastname').val() == '')
  {  
   alert("Last Name is required");  
  }
  else if($('#street').val() == '')
  {
    alert("Street is required");
  }

  else if($('#barangay').val() == '')
  {
    alert("Barangay is required");
  }
  
  else if($('#city').val() == '')
  {
    alert("City is required");
  }

   else if($('#zipcode').val() == '')
  {
    alert("Zip Code is required");
  }

 else if($('#birthday').val() == '')
  {
    alert("Birthday is required");
  }

   else if($('#age').val() == '')
  {
    alert("Age is required");
  }

   else if($('#gender').val() == '')
  {
    alert("Gender is required");
  }

 else if($('#contactnumber').val() == '')
  {
    alert("Contact Number is required");
  }

   else if($('#fathername').val() == '')
  {
    alert("Father Name is required");
  }

   else if($('#mothername').val() == '')
  {
    alert("Mother Name is required");
  }




  else  
  {  
   $.ajax({  
    url:"insert.php",  
    method:"POST",  
    data:$('#insert_form').serialize(),  
    beforeSend:function(){  
     $('#insertbutton').val("Inserting");  
    },  
    success:function(data){  
     $('#insert_form')[0].reset();  
     $('#add_data_Modal').modal('hide');  
     $('#employee_table').html(data);  
    }  
   });  
  }  
 });



 $(document).on('click', '.view_data', function(){
  //$('#dataModal').modal();
  var employee_id = $(this).attr("id");
  $.ajax({
   url:"select.php",
   method:"POST",
   data:{employee_id:employee_id},
   success:function(data){
    $('#employee_detail').html(data);
    $('#dataModal').modal('show');
   }
  });
 });
});


 $(document).on('click', '.update_data', function(){
  //$('#dataModal').modal();
  var employee_id = $(this).attr("id");
  $.ajax({
   url:"update.php",
   method:"POST",
   data:{employee_id:employee_id},
   success:function(data){
    $('#update_detail').html(data);
    $('#update_data_Modal').modal('show');
   }
  });
 });






function getAge(){
 var birthday = document.getElementById('date').value;
 birthday = new Date(birthday);
 var today = new Date();
 var age = Math.floor((today-birthday) / (365.25 * 24 * 60 * 60 * 1000));
 document.getElementById('age').value=age;
          }



var mybutton = document.getElementById("myBtn");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}






 </script>

INSERT

<?php

$connect = mysqli_connect("localhost", "root", "", "test");
if(!empty($_POST))
{
    $output = '';
    $firstname = mysqli_real_escape_string($connect, $_POST["firstname"]);  
    $middlename = mysqli_real_escape_string($connect, $_POST["middlename"]);
    $lastname = mysqli_real_escape_string($connect, $_POST["lastname"]);
    $street = mysqli_real_escape_string($connect, $_POST["street"]);
    $barangay = mysqli_real_escape_string($connect, $_POST["barangay"]);
    $city = mysqli_real_escape_string($connect, $_POST["city"]);
    $zipcode = mysqli_real_escape_string($connect, $_POST["zipcode"]);
    $birthday = mysqli_real_escape_string($connect, $_POST["birthday"]);
    $age = mysqli_real_escape_string($connect, $_POST["age"]);
    $gender = mysqli_real_escape_string($connect, $_POST["gender"]);
    $contactnumber = mysqli_real_escape_string($connect, $_POST["contactnumber"]);
    $fathername = mysqli_real_escape_string($connect, $_POST["fathername"]);
    $mothername = mysqli_real_escape_string($connect, $_POST["mothername"]);

    $query = "INSERT INTO tbl_users(firstname, middlename, lastname, street, barangay, city, zipcode, birthday, age, gender, contactnumber, fathername, mothername) VALUES ('$firstname', '$middlename', '$lastname', '$street', '$barangay', '$city', '$zipcode','$birthday','$age','$gender','$contactnumber','$fathername','$mothername')";

    if(mysqli_query($connect, $query))
    {
     $output .= '<div class="alert alert-success alert-dismissible fade show">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Success!</strong> User is added in the database.
                </div>';
     $select_query = "SELECT * FROM tbl_users ORDER BY id DESC";
     $result = mysqli_query($connect, $select_query);
     $output .= '
      <table class="table table-bordered table-hover">  
                    <tr class = thead-dark>  
                       <th width="40%">First Name</th>
                       <th width="40%">Last Name</th>
                       <th width="5%">View</th>
                       <th width="5%">Update</th>
                       <th width="5">Delete</th>
                    </tr>

     ';
     while($row = mysqli_fetch_array($result))
     {
      $output .= '
                    
                    <tr>  
                         <td>' . $row["firstname"] . '</td>
                         <td>' . $row["lastname"] . '</td>   
                         <td><input type="button" name="view" value="View" id="' . $row["id"] . '" class="btn btn-info btn-sm view_data" /></td>
                         <td><input type="button" name="update" value="Update" id="' . $row["id"] . '" class="btn btn-success btn-sm update_data" ></td>
                         <td><input type="button" name="delete" value="Delete" id="' . $row["id"] . '" class="btn btn-danger btn-sm delete_data" ></td>  
                    </tr>
      ';
     }
     $output .= '</table>';
    }
    echo $output;
}
?>

UPDATE

<?php  

if(isset($_POST["employee_id"]))
{
 $output = '';
 $connect = mysqli_connect("localhost", "root", "", "test");
 $query = "SELECT * FROM tbl_users WHERE id = '".$_POST["employee_id"]."'";
 $result = mysqli_query($connect, $query);

    while($row = mysqli_fetch_array($result))
    {
     $output .= '
        <form method="post" id="edit_form" >
            <label>Full Name</label>
            <input type="text" value='.$row["firstname"].' class="form-control" placeholder="First Name" readonly /> <br />
            <input type="text" value='.$row["middlename"].' class="form-control" placeholder="Middle Name" readonly /> <br />
            <input type="text" value='.$row["lastname"].' class="form-control" placeholder="Last Name" readonly /> <br />

            <label>Address</label>
            <input type="text" id="street" value='.$row["street"].' class="form-control" placeholder="Street" /> <br />
            <input type="text" id="barangay" value='.$row["barangay"].' class="form-control" placeholder="Barangay" /> <br />
        
            <select name="city" class="form-control">
                    <option value="Caloocan">Caloocan</option>
                    <option value="Las Piñas‎">Las Piñas‎</option>
                    <option value="Makati">Makati</option>
                    <option value="Malabon">Malabon</option>
                    <option value="Mandaluyong">Mandaluyong</option>
                    <option value="Manila">Manila</option>
                    <option value="Marikina">Marikina</option>
                    <option value="Muntinlupa">Muntinlupa</option>
                    <option value="Navotas">Navotas</option>
                    <option value="Parañaque">Parañaque</option>
                    <option value="Pasay">Pasay</option>
                    <option value="Pasig">Pasig</option>
                    <option value="Quezon City">Quezon City</option>
                    <option value="San Juan">San Juan</option>
                    <option value="Taguig">Taguig</option>
                    <option value="Valenzuela">Valenzuela</option>
            </select><br />
            <input type="text" value='.$row["zipcode"].' class="form-control" placeholder="Zip Code" /> <br />

            <label>Birth Date</label>
            <br />
            <input type="date" value='.$row["birthday"].' class="form-control" readonly />
            <br />

            <label>Age</label>
            <input type="text" value='.$row["age"].' class="form-control" readonly />

            <label>Gender</label>

            <input type="text" value='.$row["gender"].' class="form-control" readonly />
            <br />

            <label>Contact Number</label>
            <input type="text" value='.$row["contactnumber"].' class="form-control" placeholder="919 123 4567 - sample pattern" maxlength="12"><br />

            <label>Parents Name</label>
            <input type="text" value='.$row["fathername"].' class="form-control" readonly />
            <br />
            <input type="text" value='.$row["mothername"].' class="form-control" readonly />
            <br />
            <button type="submit" id="update" class="btn btn-success">UPDATE1</button>


        </form>
     ';


    }
   
    echo $output;
}





?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...