Modal adalah sebuah tampilan dimana ketika kita menekan event tertentu modal itu akan tampil, biasanya event itu berisikan sebuah data detail dari sesuatu yang sebelumnya saya klik, dan disini kami kursus javascript private online juga akan menampilkan sebuah cara menampilkan detail di sebuah modal, seperti apa simak terus ya teman-teman.
Untuk artikel kali ini ara menampilkan detail di sebuah modal tampilannya sedikit mirip ya dengan sebelumnya, dimana kita akan menampilkan data user yang sebelumnya, nanti yang kita tampilkan pertama adalah sebuah namanya lalu di sebelah kanannya saya membuat sebuah button yang berisikan sebuah data-id untuk menandakan button yang berbeda-beda, lalu ketika button itu di klik barulah modal itu akan tampil, oiya caa ini saya dapatkan dari youtube weblesson ya, oke langsung saja silahkan teman-teman copy saja caranya cukup simple
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 76 77 78 79 |
<?php $connect = mysqli_connect('localhost', 'root', '', 'tutorial'); $query = "SELECT * FROM users ORDER BY id DESC"; $result = mysqli_query($connect, $query); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style> </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center">Cara Menampilkan detail di sebuah modal</h1> <table class="table"> <thead> <tr> <th scope="col">No</th> <th scope="col">Nama</th> <th scope="col">Event</th> </tr> </thead> <tbody> <?php $no = 1; while($row = mysqli_fetch_array($result)){ ?> <tr> <th scope="row"><?php echo $no; ?></th> <td><?php echo $row["name"]; ?></td> <td><input type="button" name="view" value="View" data-id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data"></td> </tr> <?php $no++; } ?> </tbody> </table> </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">Detail User</h4> </div> <div class="modal-body" id="detail_user"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('.view_data').click(function(){ var data_id = $(this).data("id") $.ajax({ url: "proses.php", method: "POST", data: {data_id: data_id}, success: function(data){ $("#detail_user").html(data) $("#dataModal").modal('show') } }) }) }) </script> </body> </html> |
Disini kursus javascript private online menggunakan modal dari si bootstrap ya, enaknya ketika kita menggunakan bootstrap ada method-method tertentu yang kita dapatkan seperti method modal, dimana ketika kita mengisikan method modal itu dengan show maka modal yang tadinya tidak terlihat akan terlihat, dan class modal sendiri itu tampilannya tidak terlihat ya teman-teman.
Untuk di ajaxnya saya hanya membawa parameter idnya yang ingin kita cocokan di webservicenya ya, seperti ini
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 |
<?php if(isset($_POST["data_id"])){ $data_id = $_POST["data_id"]; $output = ""; $connect = mysqli_connect('localhost', 'root', '', 'tutorial'); $query = "SELECT * FROM users WHERE id = '$data_id' "; $result = mysqli_query($connect, $query); $output .= ' <div class="table-responsive"> <table class="table table-bordered">'; $row = mysqli_fetch_array($result); $output .= ' <tr> <td width="30%"><label>Name</label></td> <td width="70%">'.$row["name"].'</td> </tr> <tr> <td width="30%"><label>Gender</label></td> <td width="70%">'.$row["gender"].'</td> </tr> <tr> <td width="30%"><label>Designation</label></td> <td width="70%">'.$row["profession"].'</td> </tr> '; $output .= " </table> </div>"; echo $output; } ?> |
Oke jika kita lihat maka tampilannya akan seperti ini
tampilan di atas adalah sebuah proses dimana saya sudah mengklik atau memilih data yang ingin saya lihat detailnya, teman-teman kursus privat javascript online bisa coba sendiri ya, Jadi seperti inilah Cara Menampilkan detail di sebuah modal semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.