trik-crud-mysql-query-select-dengan-javascript-dan-php-part-2-tampil-data
trik-crud-mysql-query-select-dengan-javascript-dan-php-part-2-tampil-data

Trik CRUD Mysql Query Select dengan Javascript dan Php – Part 2 ( Tampil Data )

Diposting pada

Pada part ini saya akan membahas mengenai Trik CRUD Mysql Query Select dengan Javascript dan Php. Jadi nanti kita akan menampilkan data dari database Mysql yang sudah kita input pada part 1. Dan kita akan tampilkankan menggunakan Tabel Data. Bagaimana caranya? Simak terus ulasanya ya.

Pada tutorial part ke 2 ini saya mencoba ingin menampilkan data dari database mysql dengan menggunakan Datatable untuk menampilkan row datanya. Lalu di masing-masing Row Data nya kita akan klik per id nya dengan membuat tombol SHOW. Saat tombol klik SHOW maka akan muncul modal yang saya buat dari bootstrap. Alasan nya kenapa saya mengunakan bootrap adalah agar tampilannya sedikit responsif ya.

Membuat Tampilan Form Mysql Query Select dengan Php

Oke selanjutnya kita mulai saja tutorial nya, yang pertama adalah kita buat dulu sebuah file dengan nama tampil.php ( letakan di folder htdocs pada part1 ). Setelah kita membuatnya. Copikan source dibawah ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>CRUD Mysql</title>
    </head>
    <body>
    <div class="container"> <br>
      <h2>LIST DATA CRUD MALASNGUCAP.COM <button type="button" class="btn btn-primary" onclick="showNewData()">DATA BARU</button> 
      </h2>
          <div class="table-responsive">
                    <table id="example" class="table table-striped table-hover cell-border">
                      <thead class=" text-primary"> 
                        <th align='center'><font size= "1">ID</th>
                        <th align='center'><font size= "1">Nama </th>
                        <th align='center'><font size= "1">Alamat</th>
                        <th align='center'><font size= "1">Pekerjaan</th>  
                        <th align='center'><font size= "1">Action</th>
                      </thead>
                      <tbody>
                        <?php
                        require_once('config/config.php');
                        $query = "SELECT  *FROM datauser  ORDER BY 1 DESC"; 
                        $sql_data = mysqli_query($CON, $query);   
                        while($row = mysqli_fetch_array($sql_data)){
                                      echo '  <tr>   
                                               <td><font size= "2">'.$row['id'].'</td>
                                                <td><font size= "2">'.$row['nama'].'</td> 
                                                <td><font size= "2">'.$row['Alamat'].'</td> 
                                                <td><font size= "2">'.$row['Pekerjaan'].' </td> 
                                                <td><font size= "1"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick=\'showID("'.$row['id'].'")\'>
                                                 Show</button></td> ';
                        }?>
                      </tbody>
                    </table>
                  </div>
    </div>
    <!-- MODAL DISINI --> 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

      <script language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Saya jelaskan sedikit source di atas ya. Di atas saya membuat sebuah button bernama Data Baru yang tujuannya adalah untuk direct ke form yang saya buat di part1. Lalu di bawahnya saya menampilkan data dari database mysql ke dalam tabel. Tentunya dengan menggunakan mysql query select di mysql ya.

Pada code -> button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal” onclick=\’showID(“‘.$row[‘id’].’”)\’ wID(“‘.$row[‘id’].’”)\’ .

ini berfungsi untuk membuat sebuah tombol bernama SHOW dan ketika di klik akan muncul modal untuk menampilkan data nya. jika sudah silahkan klik simpan source nya ya. Lalu jalankan xampnya. Jika berhasil maka akan tampil seperti di bawah ini :

Trik CRUD Mysql Query Select dengan Javascript dan Php - Tampilan Desain Form Tabel list

Membuat Modal dengan Bootstrap

Setelah berhasil, seperti yang saya jelaskan bahwa saya menggunakan modal untuk menampilkan datanya. Nah untuk code membuat modalnya seperti ini di bawah comment MODAL DISINI –>

<!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog  modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Tampilkan Data</h5> 
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
               <form>
                  <div class="form-row">
                    <div class="form-group col-md-6"> 
                      <label for="inputEmail4">ID</label> 
                      <input class="form-control input-sm " id="txID" name="txID" type="text" placeholder="Ketik ID " readonly>
                    </div>
                    <div class="form-group col-md-6">
                      <label for="inputEmail4">Nama</label> 
                      <input class="form-control input-sm " id="txfirtsname" name="txfirtsname" type="text" placeholder="Ketik Nama ">
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-6"> 
                      <label for="inputPassword4">Alamat</label> 
                      <input class="form-control input-sm " id="txaddress" name="txaddress" type="text" placeholder="Ketik Alamat ">
                    </div>
                    <div class="form-group col-md-6">
                      <label for="inputPassword4">Pekerjaan</label> 
                      <input class="form-control input-sm " id="txPekerjaan" name="txPekerjaan" type="text" placeholder="Ketik Alamat ">
                    </div>
                  </div>
                </form>
                  <button  class="btn btn-primary" id="btnemail" name="btnfinish" data-toggle="modal" data-target="#modalfinish">SIMPAN</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="nobtn()">Close</button>
            </div>
            <div class="modal-footer">
           
            </div>
          </div>
        </div>
      </div>

Jika sudah, silahkan klik simpan kembali untuk melihat perubahan nya silahkan anda refresh halamannya dan klik tombol SHOW pada masing-masing row. Jika berhasil maka akan muncul modal row seperti dibawah ini

Trik CRUD Mysql Query Select dengan Javascript dan Php - Tampilan Desain Modal

Sampai saat ini kita sudah berhasil menampilkan data dari database dengan menggunakan mysql query select. Dan kita sudah berhasil membuat sebuah modal dan menampilkan modalnya saat kita klik tombol SHOW di masing-masing ID Row.

Membuat Javascript Menampilkan Data per Row dengan mysql Query Select

Langkah terakhir dari tutorial ini adalah kita akan membuat sebuah script javascript untuk menampilkan data yang kita klik per Row pada tombol SHOW tersebut.

Untuk Alur Flownya adalah kita klik Rownya tadi, lalu di dalam tombol tersebut ada sebuah function showID(x) yang akan mengirim parameter id yang akan di tampilkan. Parameter tersebut dikirim dari Function Javascript, dan selanjutnya parameter tersebut akan di proses dengan method GET. Lalu, parameter dan method akan dikirim oleh sebuah file / url eksekusi. Setelah mendapatkan respon sukses, maka data akan di tampilkan di dalam modal.

Untuk source Javascript nya anda bisa letakan di bawah File Script lainnya ya. Atau anda bisa lihat pada part sebelumnya.

<script type="text/javascript">
        $(document).ready(function () { 
        }); 
        function showNewData(){
          window.location = 'index.php';
        }
        function showID(x){
      
           $.ajax({
                  url: "controller/exec_tampil.php?&q="+x,
                   type: "GET",
                   cache: false,
                   dataType: "JSON",
                      success: function(data){
                         // $("#PasienNoMR").val(data.NoMR);
                         console.log(data.Alamat); 
                          $("#txID").val(data.ID);  
                          $("#txaddress").val(data.Alamat);  
                          $("#txPekerjaan").val(data.Pekerjaan);  
                          $("#txfirtsname").val(data.nama);  
                        }
            });
        }
    </script>

Silahkan save / simpan ulang file tersebut. Lalu jalankan kembali xampp anda atau bisa refresh halaman anda. Sekarang kita coba untuk klik tombol SHOW. Jika berhasil akan muncul datanya seperti gambar dibawah ini

Trik CRUD Mysql Query Select dengan Javascript dan Php - Tampilan Menamoilakn data dengan Modal

Di Langkah ini kita sudah berhasil menampilkan data di tabel dengan mengunakan mysql query select. Dan kita sudah berhasil menampilkan data per Row id ke dalam Modal dengan Bootstrap.

Untuk part 3 atau part selanjutnya saya akan mencoba membuat tutorial untuk update data di dalam modal tersebut ke dalam database Mysql.

Kesimpulan

Trik CRUD Mysql Query Select dengan Javascript dan Php sudah selesai kita lalui. Semoga bisa menambahkan wawasan kita semua. Jika anda tertarik dengan artikel kami silahkan share artikel kami. terima kasih