Tambah, Edit, Dan Hapus Rekam Menggunakan Bootgrid, PHP, Dan MySQL

jQuery Bootgrid adalah plugin grid yang sangat populer dan dirancang khusus untuk bootstrap. Bantuan tutorial ini untuk menambahkan .edit dan menghapus catatan menggunakan php dan mysql. Saya menggunakan teknologi AJAX untuk menambah, mengedit, dan menghapus catatan dengan mysql. Bootgrid adalah plugin jQuery grid yang sangat kaya yang digunakan untuk mengubah tabel HTML sederhana menjadi grid dengan fitur-fitur canggih seperti pengurutan, pagination, pencarian, tambah rekaman, edit rekaman, dan hapus fungsionalitas rekaman. Kami akan membahas fitur-fitur yang tercantum di bawah ini menggunakan PHP, MySQL dan ajax. Saya melakukan banyak googling tetapi tidak menemukan contoh yang memiliki fitur di bawah ini,

Daftar bootgrid Menggunakan Ajax
Daftar Bootgrid dengan sisi server pencarian menggunakan Ajax
Aktifkan pagination ajax
Aktifkan Penyortiran
Aktifkan tombol Perintah dengan fungsi dalam-hal
Aktifkan pagination dinamis sisi server
Tambahkan catatan menggunakan bootstrap ModalBox dan ajax
Edit catatan menggunakan Modalstrap bootBox dan ajax
Hapus catatan menggunakan Modalstrap bootBox dan ajax

Anda dapat mengikat data dalam bootgrid, Entah Anda menggunakan cara sisi server (misalnya layanan REST) untuk menanyakan sumber data dinamis seperti database atau Anda menggunakan cara sisi klien untuk data sederhana dalam memori.

jQuery Bootgrid library dependen adalah jquery dan bootstrap. Kita akan belajar cara menambah, mengedit, dan menghapus catatan dalam bootgrid menggunakan php, mysql dan ajax.

Tambah, Edit Dan Hapus Catatan Menggunakan Bootgrid, PHP Dan MySQL

Saya Menggunakan File Dan Folder Berikut

folder dist: Folder ini akan berisi semua css dan js libs dari jquery, bootstrap dan bootgrid.
folder font: Folder ini akan berisi semua file font terkait.
index.php: File ini akan digunakan untuk membuat tata letak HTML dan menangani respons ajax.
connection.php: File ini akan digunakan untuk membuat koneksi database.
response.php: File ini akan digunakan untuk menangani semua fungsionalitas sisi server. Saya akan membuat tambah, edit, hapus metode aksi dan kembalikan respons json ke metode ajax.

Lihat juga tutorial grid lainnya,

Bagaimana Cara Menambahkan Daftar Di Bootgrid

Langkah 1: Membuat file koneksi untuk menangani koneksi database dan mengembalikan objek koneksi db.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?php

Class dbObj{

 /* Database connection start */

 var $servername = "localhost";

 var $username = "root";

 var $password = "";

 var $dbname = "test";

 var $conn;

 function getConnstring() {

  $con = mysqli_connect($this->servername, $this->username, $this->password, $this->dbname) or die("Connection failed: " . mysqli_connect_error());

  /* check connection */

  if (mysqli_connect_errno()) {

   printf("Connect failed: %s\n", mysqli_connect_error());

   exit();

  } else {

   $this->conn = $con;

  }

  return $this->conn;

 }

}

?>

Dimana:

$ servername: nama host mysql db Anda
$ username: nama pengguna mysql db
$ password: pass mysql db
$ dbname: nama database

Langkah 2: Termasuk semua jsdan cssfile ke dalam index.phpfile.

1

2

3

4

5

<link rel="stylesheet" href="dist/bootstrap.min.css" type="text/css" media="all">

<link href="dist/jquery.bootgrid.css" rel="stylesheet" />

<script src="dist/jquery-1.11.1.min.js"></script>

<script src="dist/bootstrap.min.js"></script>

<script src="dist/jquery.bootgrid.min.js"></script>

Langkah 3: Buat tabel HTML untuk daftar data dalam index.phpfile.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<div class="col-sm-8">

  <div class="well clearfix">

   <div class="pull-right"><button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">

   <span class="glyphicon glyphicon-plus"></span> Record</button></div></div>

  <table id="employee_grid" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" data-toggle="bootgrid">

   <thead>

    <tr>

     <th data-column-id="id" data-type="numeric" data-identifier="true">Empid</th>

     <th data-column-id="employee_name">Name</th>

     <th data-column-id="employee_salary">Salary</th>

     <th data-column-id="employee_age">Age</th>

     <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>

    </tr>

   </thead>

  </table>

    </div>

Di sini kami telah menambahkan 'Add record'tombol yang akan digunakan untuk membuat catatan dan tabel baru untuk daftar catatan.

Langkah 4: Metode konstruktor Bootgrid yang diterapkan pada tabel HTML. Metode Bootgrid mengubah tabel HTML menjadi daftar kisi yang indah.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

var grid = $("#employee_grid").bootgrid({

    ajax: true,

    rowSelect: true,

    post: function ()

    {

      /* To accumulate custom parameter with the request object */

      return {

        id: "b0df282a-0d67-40e5-8558-c9e93b7befed"

      };

    },

    url: "response.php",

    formatters: {

            "commands": function(column, row)

            {

                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " + 

                    "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";

            }

        }

   })

Menambahkan kode jquery di atas ke dalam footer index.phpfile.

Langkah 5: Menambahkan action handler dalam response.phpfile.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

include("connection.php");

 $db = new dbObj();

 $connString =  $db->getConnstring();

 $params = $_REQUEST;

 $action = isset($params['action']) != '' ? $params['action'] : '';

 $empCls = new Employee($connString);

 switch($action) {

  default:

  $empCls->getEmployees($params);

  return;

 }

 class Employee {

 protected $conn;

 protected $data = array();

 function __construct($connString) {

  $this->conn = $connString;

 }

 public function getEmployees($params) {

    $this->data = $this->getRecords($params);

    echo json_encode($this->data);

  }

 function getRecords($params) {

    $rp = isset($params['rowCount']) ? $params['rowCount'] : 10;

    if (isset($params['current'])) { $page  = $params['current']; } else { $page=1; };  

        $start_from = ($page-1) * $rp;

    $sql = $sqlRec = $sqlTot = $where = '';

    if( !empty($params['searchPhrase']) ) {   

      $where .=" WHERE ";

      $where .=" ( employee_name LIKE '".$params['searchPhrase']."%' ";    

      $where .=" OR employee_salary LIKE '".$params['searchPhrase']."%' ";

      $where .=" OR employee_age LIKE '".$params['searchPhrase']."%' )";

     }

     // getting total number records without any search

    $sql = "SELECT * FROM `employee` ";

    $sqlTot .= $sql;

    $sqlRec .= $sql;

    //concatenate search sql if value exist

    if(isset($where) && $where != '') {

      $sqlTot .= $where;

      $sqlRec .= $where;

    }

    if ($rp!=-1)

    $sqlRec .= " LIMIT ". $start_from .",".$rp;

    $qtot = mysqli_query($this->conn, $sqlTot) or die("error to fetch tot employees data");

    $queryRecords = mysqli_query($this->conn, $sqlRec) or die("error to fetch employees data");

    while( $row = mysqli_fetch_assoc($queryRecords) ) { 

      $data[] = $row;

    }

    $json_data = array(

      "current"            => intval($params['current']), 

      "rowCount"            => 10,      

      "total"    => intval($qtot->num_rows),

      "rows"            => $data   // total data array

      );

    return $json_data;

  }

Bagaimana Cara Menambahkan Catatan Insert Di Bootgrid

Langkah 1: Menambahkan Bootstrap menambahkan kotak modal untuk menambahkan catatan dalam index.phpfile.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<div id="add_model" class="modal fade">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title">Add Employee</h4>

            </div>

            <div class="modal-body">

                <form method="post" id="frm_add">

    <input type="hidden" value="add" name="action" id="action">

                  <div class="form-group">

                    <label for="name" class="control-label">Name:</label>

                    <input type="text" class="form-control" id="name" name="name"/>

                  </div>

                  <div class="form-group">

                    <label for="salary" class="control-label">Salary:</label>

                    <input type="text" class="form-control" id="salary" name="salary"/>

                  </div>

      <div class="form-group">

                    <label for="salary" class="control-label">Age:</label>

                    <input type="text" class="form-control" id="age" name="age"/>

                  </div>

            </div>

            <div class="modal-footer">

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

                <button type="button" id="btn_add" class="btn btn-primary">Save</button>

            </div>

   </form>

        </div>

    </div>

</div>

Langkah 2: Menambahkan metode panggilan balik pada 'add record'tombol untuk membuka kotak modal tambahkan.

1

2

3

$( "#command-add" ).click(function() {

    $('#add_model').modal('show');

});

Langkah 3: Menambahkan acara pada tombol kirim untuk menambahkan nilai input modal.

1

2

3

$( "#btn_add" ).click(function() {

        ajaxAction('add');

      });

Langkah 4: Menambahkan ajaxAction()metode yang akan mem-request ajax ke sisi-server. Kami akan meneruskan data json ke sisi server menggunakan teknologi ajax.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function ajaxAction(action) {

    data = $("#frm_"+action).serializeArray();

        $.ajax({

          type: "POST",  

          url: "response.php",  

          data: data,

          dataType: "json",       

          success: function(response)  

          {

          $('#'+action+'_model').modal('hide');

          $("#employee_grid").bootgrid('reload');

          }   

        });

   }

Langkah 6: Menambahkan opsi sakelar dalam response.phpfile.

1

2

3

case 'add':

  $empCls->insertEmployee($params);

break;

Langkah 7: Menambahkan metode tindakan tambahkan dalam response.phpfile yang akan menyisipkan catatan dalam database mysql dan mengirim status.

1

2

3

4

5

6

7

function insertEmployee($params) {

  $data = array();;

  $sql = "INSERT INTO `employee` (employee_name, employee_salary, employee_age) VALUES('" . $params["name"] . "', '" . $params["salary"] . "','" . $params["age"] . "');  ";

  echo $result = mysqli_query($this->conn, $sql) or die("error to insert employee data");

 }

Cara Menambahkan Edit Catatan Di Bootgrid

Langkah 1: Menambahkan kotak edit modal Bootstrap untuk memperbarui catatan dalam index.phpfile.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<div id="edit_model" class="modal fade">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title">Edit Employee</h4>

            </div>

            <div class="modal-body">

                <form method="post" id="frm_edit">

        <input type="hidden" value="edit" name="action" id="action">

        <input type="hidden" value="0" name="edit_id" id="edit_id">

                  <div class="form-group">

                    <label for="name" class="control-label">Name:</label>

                    <input type="text" class="form-control" id="edit_name" name="edit_name"/>

                  </div>

                  <div class="form-group">

                    <label for="salary" class="control-label">Salary:</label>

                    <input type="text" class="form-control" id="edit_salary" name="edit_salary"/>

                  </div>

          <div class="form-group">

                    <label for="salary" class="control-label">Age:</label>

                    <input type="text" class="form-control" id="edit_age" name="edit_age"/>

                  </div>

            </div>

            <div class="modal-footer">

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

                <button type="button" id="btn_edit" class="btn btn-primary">Save</button>

            </div>

      </form>

        </div>

    </div>

</div>

Langkah 2: Menambahkan metode panggilan balik pada acara Bootgrid contsructor,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.on("loaded.rs.jquery.bootgrid", function()

{

    /* Executes after data is loaded and rendered */

    grid.find(".command-edit").on("click", function(e)

    {

        //alert("You pressed edit on row: " + $(this).data("row-id"));

      var ele =$(this).parent();

      var g_id = $(this).parent().siblings(':first').html();

            var g_name = $(this).parent().siblings(':nth-of-type(2)').html();

    $('#edit_model').modal('show');

          if($(this).data("row-id") >0) {

                                // collect the data

                                $('#edit_id').val(ele.siblings(':first').html()); // in case we're changing the key

                                $('#edit_name').val(ele.siblings(':nth-of-type(2)').html());

                                $('#edit_salary').val(ele.siblings(':nth-of-type(3)').html());

                                $('#edit_age').val(ele.siblings(':nth-of-type(4)').html());

          } else {

           alert('Now row selected! First select row, then click edit button');

          }

    })

})

Kami mengumpulkan semua data dari baris yang diklik yang ingin Anda edit dan menunjukkan nilai ke dalam kotak modal.

Langkah 3: Menambahkan event klik pada tombol kirim untuk mengedit nilai input modal.

1

2

3

$( "#btn_edit" ).click(function() {

        ajaxAction('edit');

      });

Langkah 4: Menambahkan opsi sakelar dalam response.phpfile.

1

2

3

case 'edit':

    $empCls->updateEmployee($params);

break;

Langkah 5: Menambahkan metode tindakan tambah dalam response.phpfile yang akan memperbarui catatan dalam database mysql dan mengirim status.

1

2

3

4

5

6

7

function updateEmployee($params) {

  $data = array();

  //print_R($_POST);die;

  $sql = "Update `employee` set employee_name = '" . $params["edit_name"] . "', employee_salary='" . $params["edit_salary"]."', employee_age='" . $params["edit_age"] . "' WHERE id='".$_POST["edit_id"]."'";

  echo $result = mysqli_query($this->conn, $sql) or die("error to update employee data");

 }

Bagaimana Cara Menambahkan Hapus Catatan Di Bootgrid

Anda harus memilih baris di Bootgrid lalu klik ikon hapus tombol rekam, Setiap baris bootgrid telah mengedit dan menghapus ikon baris dan tindakan terikat pada mereka.

Langkah 1: Menambahkan metode hapus panggilan balik di bawah konstruktor bootgrid,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.end().find(".command-delete").on("click", function(e)

    {

    var conf = confirm('Delete ' + $(this).data("row-id") + ' items?');

          alert(conf);

                    if(conf){

                                /*$.post('response.php', { id: $(this).data("row-id"), action:'delete'}

                                    , function(){

                                        // when ajax returns (callback), 

                    $("#employee_grid").bootgrid('reload');

                                });  */

                //$(this).parent('tr').remove();

                //$("#employee_grid").bootgrid('remove', $(this).data("row-id"))

                    }

    })

Langkah 2: Menambahkan opsi sakelar dalam response.phpfile.

1

2

3

case 'delete':

  $empCls->deleteEmployee($params);

break;

Langkah 3: Menambahkan metode tindakan tambah dalam response.phpfile yang akan menyisipkan catatan dalam database mysql dan mengirim status.

1

2

3

4

5

6

7

function deleteEmployee($params) {

  $data = array();

  //print_R($_POST);die;

  $sql = "delete from `employee` WHERE id='".$params["id"]."'";

  echo $result = mysqli_query($this->conn, $sql) or die("error to delete employee data");

 }

Anda dapat mengunduh kode sumber dan Demo dari tautan di bawah ini.

Demo Langsung

Unduh Kode Sumber

Cara Menggunakan Kode Sumber Yang Diunduh

Kesimpulan:

Dalam tutorial sebelumnya , kita telah mempelajari daftar bootgrid dengan PHP, MySQL dan AJAX. Tutorial ini membantu menambahkan fungsionalitas kasar dengan bootgrid menggunakan ajax. Saya telah menunjukkan bagaimana cara menambah, mengedit, dan menghapus baris menggunakan php, mysql dan ajax.

Cari Blog Ini

Sofyan Yusuf © 2019