Salam soabt ketutrare, bagaimana kabar sobat ? semoga selalu baik dan sukses ya. Kali ini kita akan membahas Pemrograman PHP : Membuat CRUD pada Modal dengan Bootstrap dan PHP. Sebelumnya, kita sudah membuat bahasan mengenai Membuat Edit Data pada Modal dengan Bootstrap dan PHP dan kali ini kita akan membuat pengembangannya. Jika pada pembahasan sebelumnya, kita hanya menggunakan Edit pada Modal, kali ini kita akan menggunakan create, read, update, dan delete pada modal. Sehingga akan lebih lengkap fungsinya. Pengertian Modal dan Function di PHPModal adalah sebuah kotak dialog yang dapat menampilkan informasi atau pesan dari suatu aksi sehingga pengguna dapat dengan mudah mengerti penggunaan sistem. Function adalah potongan baris kode program yang kita buat untuk mempermudah kita melakukan programing. Kode program tersebut (function) dapat kita berikan nama dan dapat kita panggil berulang-ulang. Kita akan menggunakan function untuk mengeksekusi database, jadi akan ada tambahan file function.php. Dalam code berikut, akan dijelaskan lebih lanjut. Code ProgramPertama kita akan buat sebuah file data_user.php yang berisi code untuk menampilkan tabel yang berisi data user di database. Setiap baris dari data user berisi action untuk Update / Edit dan Delete yang akan kita pasangkan modal. Di bawah ini kita akan mempelajari cara membuat modal konfirmasi delete dengan CSS. Modal ini biasanya digunakan ketika kita akah menghapus suatu data dalam website dan kita ingin mengkonfirmasi penghapusan tersebut menggunakan sebuah modal, yaitu modal konfirmasi delete. Klik pada tombol untuk membuka modal: <!DOCTYPE html> <html> <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Atur gaya untuk semua button */ button { background-color: #0000FF; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } button:hover { opacity:1; } /* Float pada button batal dan hapus lalu tambahkan lebar yang sama */ .cancelbtn, .deletebtn { float: left; width: 50%; } /* Tambahkan warna pada button cancel*/ .cancelbtn { background-color: #ccc; color: black; } /* Tambahkan warna pada button delete */ .deletebtn { background-color: #f44336; } /* Tambahkan padding dan teks rata tengah(center) ke container */ .container { padding: 16px; text-align: center; } /* The Modal (background) */ .modal { display: none; /* Disembunyikan secara default */ position: fixed; /* Tetap di tempat */ z-index: 1; /* Tetap di atas */ left: 0; top: 0; width: 100%; /* Lebar maksimum */ height: 100%; /* tinggi maksimum */ overflow: auto; /* Tambahkan scrolling jika dibutuhkan */ background-color: #474e5d; padding-top: 50px; } /* Konten modal box */ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% dari atas, 15% dari bawah dan tengah */ border: 1px solid #888; width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */ } /* Beri style pada horizontal ruler */ hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* Button Tutup Modal (x) */ .close { position: absolute; right: 35px; top: 15px; font-size: 40px; font-weight: bold; color: #f1f1f1; } .close:hover, .close:focus { color: #f44336; cursor: pointer; } /* Clear floats */ .clearfix::after { content: ""; clear: both; display: table; } /* Ubah gaya untuk button batal dan button hapus pada layar ekstra kecil */ @media screen and (max-width: 300px) { .cancelbtn, .deletebtn { width: 100%; } } </style> <body> <h2>Contoh Modal Konfirmasi Delete </h2> <button onclick="document.getElementById('id01').style.display='block'">Open Modal</button> <div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span> <form class="modal-content" action="/action_page.php"> <div class="container"> <h1>Hapus akun</h1> <p>Apa kamu yakin ingin menghapus akun ini?</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="deletebtn">Delete</button> </div> </div> </form> </div> <script> // Dapatkan modal var modal = document.getElementById('id01'); // Saat mengklik di mana saja di luar modal, maka tutuplah modal window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html> Cara Membuat Modal Konfirmasi DeleteLangkah 1) Tambahkan HTML: <button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Hapus akun</h1>
<p>Apa kamu yakin ingin menghapus akun ini?</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="deletebtn">Delete</button>
</div>
</div>
</form>
</div>Langkah 2) Tambahkan CSS: * {box-sizing: border-box;}
/* Atur gaya untuk semua button */
button {
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Float pada button batal dan hapus lalu tambahkan lebar yang sama */
.cancelbtn, .deletebtn {
float: left;
width: 50%;
}
/* Tambahkan warna pada button cancel*/
.cancelbtn {
background-color: #ccc;
color: black;
}
/* Tambahkan warna pada button delete */
.deletebtn {
background-color: #f44336;
}
/* Tambahkan padding dan teks rata tengah(center) ke container */
.container {
padding: 16px;
text-align: center;
}
/* The Modal (background) */
.modal {
display: none; /* Disembunyikan secara default */
position: fixed; /* Tetap di tempat */
z-index: 1; /* Tetap di atas */
left: 0;
top: 0;
width: 100%; /* Lebar maksimum */
height: 100%; /* tinggi maksimum */
overflow: auto; /* Tambahkan scrolling jika dibutuhkan */
background-color: #474e5d;
padding-top: 50px;
}
/* Konten modal box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% dari atas, 15% dari bawah dan tengah */
border: 1px solid #888;
width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}
/* Beri style pada horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Button Tutup Modal (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Ubah gaya untuk button batal dan button hapus pada layar ekstra kecil */
@media screen and (max-width: 300px) {
.cancelbtn, .deletebtn {
width: 100%;
}
}Tip: Kita dapat menggunakan javascript berikut untuk menutup modal dengan mengklik di luar konten modal (dan tidak hanya dengan menggunakan tombol “x” atau “batal” untuk menutupnya): |
Cara menggunakan membuat modal hapus php
Pos Terkait
Copyright © 2024 kemunculan Inc.
