Bismillaahirrohmaanirrohiim…
Belajar membuat CRUD (view, create, read, update, delete) sederhana dengan HTML CSS JS PHP MySQL.
Tujuan dari tutorial ini agar lebih memahami HTML, PHP, dan MySQL.
Sekaligus praktek langsung bagaimana MySQL digunakan untuk menyimpan data.
Penjelasan diberikan saat membuat file (learn by doing).
Misalkan kita ingin membuat database asset pribadi, yang berisi elektronik, buku, kendaraan, property, dsb.
Langkah-langkah untuk membuat CRUD adalah sebagai berikut:
Buka browser dan ketikkan http://localhost/phpmyadmin
buat database baru dengan nama “asset_pribadi”
Buat tabel baru dengan nama tabel_kategori, dengan kolom:
id_kategori INT(11) Auto Increment nama_kategori Varchar(100)
Hasilnya:
Buat tabel baru dengan nama tabel_asset, dengan kolom:
id_asset INT(11) auto increment id_kategori INT(11) nama_asset Varchar(100) harga_asset (Double) keterangan_asset (Text)
Hasilnya:
C:\xampp\htdocs\belajar\belajar-mysql\ config.php header.php footer.php index.php add-asset.php edit-asset.php delete-asset.php kategori.php add-kategori.php edit-kategori.php delete-kategori.php
Oke, sekarang kita akan membuat satu persatu kodenya.
Berisi konfigurasi database, dan informasi lain jika diperlukan, file ini nanti di include di semua halaman.
config.php
<?php //konfigurasi database $db_host = 'localhost';//bisa juga ditulis IP local dengan 127.0.0.1 $db_user = 'root'; $db_pass = ''; $db_name = 'asset_pribadi'; //membuat koneksi ke database $conn = new mysqli($db_host, $db_user, $db_pass, $db_name); //cek koneksi if ($conn->connect_error) { echo "Error: Gagal koneksi ke MySQL.<br />"; echo "Debugging error: " . $conn->connect_error; exit(); }
File ini digunakan untuk menampung kode header dan di include di semua halaman yang membutuhkan. Dibuat terpisah agar saat ada perubahan pada header cukup melakukan pada satu file saja.
header.php
<?php //cek apakah $title sudah didefinisikan? //kalau belum, set $title menjadi "Undefined" if (!isset($title)) $title = 'Undefined'; ?> <!DOCTYPE html> <html> <head> <title><?php echo $title; ?></title> <style type="text/css"> body { background-color:#eee; } th { background-color: #ccc; padding: 5px; } td { padding: 5px; } </style> </head> <body> <div class="menu"> <a href="index.php">Home</a> | <a href="kategori.php">Kategori</a> </div>
Sama seperti header, file ini nanti di include di semua halaman yang membutuhkan.
footer.php
</body> </html>
File ini adalah file utama, dibuat untuk menampilkan data asset.
index.php
<?php include 'config.php'; $title = 'Home - Asset Pribadi'; include 'header.php'; //membuat array kategori agar bisa ditampilkan di tabel $sql = 'select * from tabel_kategori'; $result = $conn->query($sql); $arr_kategori = array(); //cek jumlah hasil query if ($result->num_rows > 0) { $no = 0; //ekstrak hasil query menggunakan fungsi loop WHILE while($row = $result->fetch_assoc()) { $arr_kategori[$row['id_kategori']] = $row['nama_kategori']; } } ?> <script type="text/javascript"> /* fungsi javascript untuk menghapus data */ function deleteData(id_asset) { //fungsi confirm untuk memastikan user setuju. var cfm = confirm("Apakah anda yakin akan menghapus data ini?"); if (cfm) { window.location.href='delete-asset.php?id_asset='+id_asset; } } </script> <div class="content"> <h1><?php echo $title; ?></h1> <?php //cek apakah ada info error/success? //kalau ada ditampilkan $info = isset($_GET['info']) ? $_GET['info'] : ''; $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; if (!empty($info)) { echo 'Info: '.$info; echo '<br />Msg: '.$msg; echo '<br />'; } ?> <p><a href="add-asset.php">Add New</a> | <a href="index.php">Reload</a></p> <table border = "1"> <thead> <tr> <th>No</th> <th>Nama Asset</th> <th>Kategori</th> <th>Harga</th> <th>Keterangan</th> <th>Action</th> </tr> </thead> <tbody> <?php /* tampilkan data dari tabel_asset Format: SELECT nama_kolom1, namakolom2, dst FROM nama_tabel atau utk menampilkan semua kolom, pakai *: SELECT * FROM nama_tabel */ $sql = 'select * from tabel_asset'; $result = $conn->query($sql); //cek jumlah hasil query if ($result->num_rows > 0) { $no = 0; //ekstrak hasil query menggunakan fungsi loop WHILE while($row = $result->fetch_assoc()) { //buat $no dilakukan penambahan 1, sama spt $no = $no + 1; $no++; $link_edit = '<a href="edit-asset.php?id_asset='.$row['id_asset'].'">[Edit]</a>'; $link_delete = '<a :;" >– Membuat file add.asset.php
File ini berisi form dan pemrosesan untuk menambahkan data asset ke database.
add.asset.php
<?php include 'config.php'; $nama_asset = isset($_POST['nama_asset']) ? $_POST['nama_asset'] : ''; if (!empty($nama_asset)) { $id_kategori = isset($_POST['id_kategori']) ? (int) $_POST['id_kategori'] : 0; $nama_asset = isset($_POST['nama_asset']) ? $_POST['nama_asset'] : ''; $harga_asset = isset($_POST['harga_asset']) ? (int) $_POST['harga_asset'] : 0; $keterangan_asset = isset($_POST['keterangan_asset']) ? $_POST['keterangan_asset'] : ''; //proses submit ke database MySQL /* Format insert ke database: INSERT INTO table_name (column1, column2, column3,...) VALUES (value1, value2, value3,...) */ $sql = 'insert into tabel_asset (id_kategori, nama_asset, harga_asset, keterangan_asset) values (\''.$id_kategori.'\',\''.$nama_asset.'\',\''.$harga_asset.'\',\''.$keterangan_asset.'\') '; //id_asset tidak perlu ditulis karena AUTOINCREMENT (otomatis id akan bertambah 1) //jalankan dan cek query insert di atas if ($conn->query($sql) === TRUE) { //berhasil $info = 'success'; $msg = 'Data berhasil diproses'; } else { //gagal $info = 'error'; $msg = 'Error terjadi: '.$conn->error; } $conn->close(); header('location:add-asset.php?info='.$info.'&msg='.$msg); exit(); } $title = 'Add Asset - Asset Pribadi'; include 'header.php'; ?> <div class="content"> <h1><?php echo $title; ?></h1> <?php //cek apakah ada info error/success? //kalau ada ditampilkan $info = isset($_GET['info']) ? $_GET['info'] : ''; $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; if (!empty($info)) { echo 'Info: '.$info; echo '<br />Msg: '.$msg; echo '<br />'; } ?> <p><a href="index.php">« Back</a> | <a href="add-asset.php">Reload</a></p> <form method="POST" action-xhr="#"> <table border="1"> <tr> <td>Nama Asset</td> <td>:</td> <td><input type="text" name="nama_asset" size="50"></td> </tr> <tr> <td>Harga Asset</td> <td>:</td> <td><input type="number" name="harga_asset" size="50"></td> </tr> <tr> <td>Kategori</td> <td>:</td> <td> <select name="id_kategori"> <option value="0">Tanpa Kategori</option> <?php /* tampilkan data dari tabel_kategori Format: SELECT nama_kolom1, namakolom2, dst FROM nama_tabel atau utk menampilkan semua kolom, pakai *: SELECT * FROM nama_tabel */ $sql = 'select * from tabel_kategori'; $result = $conn->query($sql); //cek jumlah hasil query if ($result->num_rows > 0) { $no = 0; //ekstrak hasil query menggunakan fungsi loop WHILE while($row = $result->fetch_assoc()) { echo '<option value="'.$row['id_kategori'].'">'.$row['nama_kategori'].'</option>'; } } ?> </select> </td> </tr> <tr> <td>Keterangan</td> <td>:</td> <td><textarea name="keterangan_asset" cols="47" rows="5"></textarea></td> </tr> </table> <p> <input type="submit" name="sbm" value="Submit" /> </p> </form> </div> <?php include 'footer.php';– Membuat file edit.asset.php
File ini berisi form edit dan pemrosesan edit ke database.
edit.asset.php
<?php include 'config.php'; //cek id_asset, kalau kosong maka diredirect ke halaman asset $id_asset = isset($_GET['id_asset']) ? (int) $_GET['id_asset'] : 0; if (empty($id_asset)) { //header location digunakan untuk meredirect ke halaman yang lain. header('location:asset.php?info=error&msg=asset tidak ditemukan'); exit(); } $nama_asset = isset($_POST['nama_asset']) ? $_POST['nama_asset'] : ''; if (!empty($nama_asset)) { $id_kategori = isset($_POST['id_kategori']) ? (int) $_POST['id_kategori'] : 0; $nama_asset = isset($_POST['nama_asset']) ? $_POST['nama_asset'] : ''; $harga_asset = isset($_POST['harga_asset']) ? (int) $_POST['harga_asset'] : 0; $keterangan_asset = isset($_POST['keterangan_asset']) ? $_POST['keterangan_asset'] : ''; //proses submit ke database MySQL /* Format update ke database: UPDATE table_name SET namakolom1=value1, namakolom2=value2, dst WHERE kondisi */ $sql = 'UPDATE tabel_asset SET id_kategori=\''.$id_kategori.'\', nama_asset=\''.$nama_asset.'\', harga_asset=\''.$harga_asset.'\', keterangan_asset=\''.$keterangan_asset.'\' WHERE id_asset=\''.$id_asset.'\' '; //jalankan dan cek query di atas if ($conn->query($sql) === TRUE) { //berhasil $info = 'success'; $msg = 'Data berhasil diproses'; } else { //gagal $info = 'error'; $msg = 'Error terjadi: '.$conn->error; } $conn->close(); header('location:index.php?info='.$info.'&msg='.$msg); exit(); } /* ambil 1 data dari tabel_asset berdasarkan id_asset Format: SELECT * FROM nama_tabel where kondisi */ $sql = 'select * from tabel_asset where id_asset='.$id_asset; $result = $conn->query($sql); //untuk mengambil 1 data dari query di atas $row = $result->fetch_assoc(); //cek apakah id_asset ada di database? //kalau tidak ada redirect ke index.php if ($id_asset != $row['id_asset']) { header('location:index.php?info=error&msg=asset tidak ditemukan'); exit(); } $title = 'Edit Asset - Asset Pribadi'; include 'header.php'; ?> <div class="content"> <h1><?php echo $title; ?></h1> <?php //cek apakah ada info error/success? //kalau ada ditampilkan $info = isset($_GET['info']) ? $_GET['info'] : ''; $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; if (!empty($info)) { echo 'Info: '.$info; echo '<br />Msg: '.$msg; echo '<br />'; } ?> <p><a href="index.php">« Back</a> | <a href="edit-asset.php?id_asset=<?php echo $id_asset;?>">Reload</a></p> <form method="POST" action-xhr="#"> <table border="1"> <tr> <td>Nama Asset</td> <td>:</td> <td><input type="text" name="nama_asset" size="50" value="<?php echo $row['nama_asset'];?>"></td> </tr> <tr> <td>Harga Asset</td> <td>:</td> <td><input type="number" name="harga_asset" size="50" value="<?php echo $row['harga_asset'];?>"></td> </tr> <tr> <td>Kategori</td> <td>:</td> <td> <select name="id_kategori"> <option value="0">Tanpa Kategori</option> <?php /* tampilkan data dari tabel_kategori Format: SELECT nama_kolom1, namakolom2, dst FROM nama_tabel atau utk menampilkan semua kolom, pakai *: SELECT * FROM nama_tabel */ $sql = 'select * from tabel_kategori'; $result = $conn->query($sql); //cek jumlah hasil query if ($result->num_rows > 0) { $no = 0; //ekstrak hasil query menggunakan fungsi loop WHILE while($row_kategori = $result->fetch_assoc()) { echo '<option value="'.$row_kategori['id_kategori'].'" '; if ($row['id_kategori']==$row_kategori['id_kategori']) { echo 'selected'; } echo '>'.$row_kategori['nama_kategori'].'</option>'; } } ?> </select> </td> </tr> <tr> <td>Keterangan</td> <td>:</td> <td><textarea name="keterangan_asset" cols="47" rows="5"><?php echo $row['keterangan_asset'];?></textarea></td> </tr> </table> <p> <input type="submit" name="sbm" value="Submit" /> </p> </form> </div> <?php include 'footer.php';– Membuat file delete.asset.php
File ini untuk memproses delete data asset di database.
delete.asset.php
<?php include 'config.php'; //cek id_asset, kalau kosong maka diredirect ke halaman asset $id_asset = isset($_GET['id_asset']) ? (int) $_GET['id_asset'] : 0; if (empty($id_asset)) { //header location digunakan untuk meredirect ke halaman yang lain. header('location:index.php?info=error&msg=asset tidak ditemukan'); exit(); } /* ambil 1 data dari tabel_asset berdasarkan id_asset Format: SELECT * FROM nama_tabel where kondisi */ $sql = 'select * from tabel_asset where id_asset='.$id_asset; $result = $conn->query($sql); //untuk mengambil 1 data dari query di atas $row = $result->fetch_assoc(); //cek apakah id_asset ada di database? //kalau tidak ada redirect ke index.php if ($id_asset != $row['id_asset']) { header('location:index.php?info=error&msg=asset tidak ditemukan'); exit(); } //proses delete data di database MySQL /* Format delete data di database: DELETE FROM table_name WHERE kondisi */ $sql = 'delete from tabel_asset where id_asset='.$id_asset; //jalankan dan cek query insert di atas if ($conn->query($sql) === TRUE) { //berhasil $info = 'success'; $msg = 'asset <b>'.$row['nama_asset'].'</b> berhasil dihapus.'; } else { //gagal $info = 'error'; $msg = 'Error terjadi: '.$conn->error; } $conn->close(); header('location:index.php?info='.$info.'&msg='.$msg);– Membuat file kategori.php
File ini untuk menampilkan data kategori ke dalam tabel HTML.
kategori.php
<?php include 'config.php'; $title = 'Kategori - Asset Pribadi'; include 'header.php'; ?> <script type="text/javascript"> /* fungsi javascript untuk menghapus data */ function deleteData(id_kategori) { //fungsi confirm untuk memastikan user setuju. var cfm = confirm("Apakah anda yakin akan menghapus data ini?"); if (cfm) { window.location.href='delete-kategori.php?id_kategori='+id_kategori; } } </script> <div class="content"> <h1><?php echo $title; ?></h1> <?php //cek apakah ada info error/success? //kalau ada ditampilkan $info = isset($_GET['info']) ? $_GET['info'] : ''; $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; if (!empty($info)) { echo 'Info: '.$info; echo '<br />Msg: '.$msg; echo '<br />'; } ?> <p><a href="add-kategori.php">Add New</a> | <a href="kategori.php">Reload</a></p> <table border = "1"> <thead> <tr> <th>No</th> <th>Nama Kategori</th> <th>Action</th> </tr> </thead> <tbody> <?php /* tampilkan data dari tabel_kategori Format: SELECT nama_kolom1, namakolom2, dst FROM nama_tabel atau utk menampilkan semua kolom, pakai *: SELECT * FROM nama_tabel */ //ORDER BY untuk mengurutkan kolom //ASC : dari kecil ke besar //DESC: dari besar ke kecil $sql = 'select * from tabel_kategori ORDER BY nama_kategori ASC'; $result = $conn->query($sql); //cek jumlah hasil query if ($result->num_rows > 0) { $no = 0; //ekstrak hasil query menggunakan fungsi loop WHILE while($row = $result->fetch_assoc()) { //buat $no dilakukan penambahan 1, sama spt $no = $no + 1; $no++; $link_edit = '<a href="edit-kategori.php?id_kategori='.$row['id_kategori'].'">[Edit]</a>'; $link_delete = '<a :;" >– Membuat file add.kategori.php
File ini digunakan untuk membuat form tambah kategori dan pemrosesan ke MySQL.
add.kategori.php
<?php include 'config.php'; $nama_kategori = isset($_POST['nama_kategori']) ? $_POST['nama_kategori'] : ''; if (!empty($nama_kategori)) { //proses submit ke database MySQL /* Format insert ke database: INSERT INTO table_name (column1, column2, column3,...) VALUES (value1, value2, value3,...) */ $sql = 'insert into tabel_kategori (nama_kategori) values (\''.$nama_kategori.'\')'; //id_kategori tidak perlu ditulis karena AUTOINCREMENT (otomatis id akan bertambah 1) //jalankan dan cek query insert di atas if ($conn->query($sql) === TRUE) { //berhasil $info = 'success'; $msg = 'Data berhasil diproses'; } else { //gagal $info = 'error'; $msg = 'Error terjadi: '.$conn->error; } $conn->close(); header('location:add-kategori.php?info='.$info.'&msg='.$msg); exit(); } $title = 'Add Kategori - Asset Pribadi'; include 'header.php'; ?> <div class="content"> <h1><?php echo $title; ?></h1> <?php //cek apakah ada info error/success? //kalau ada ditampilkan $info = isset($_GET['info']) ? $_GET['info'] : ''; $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; if (!empty($info)) { echo 'Info: '.$info; echo '<br />Msg: '.$msg; echo '<br />'; } ?> <p><a href="kategori.php">« Back</a> | <a href="add-kategori.php">Reload</a></p> <form method="POST" action-xhr="#"> <table border="1"> <tr> <td>Nama Kategori</td> <td>:</td> <td><input type="text" name="nama_kategori" size="50"></td> </tr> </table> <p> <input type="submit" name="sbm" value="Submit" /> </p> </form> </div> <?php include 'footer.php';– Membuat file edit.kategori.php
Digunakan untuk membuat form edit kategori dan pemrosesan edit kategori ke database.
edit.kategori.php
<?php include 'config.php'; //cek id_kategori, kalau kosong maka diredirect ke halaman kategori $id_kategori = isset($_GET['id_kategori']) ? (int) $_GET['id_kategori'] : 0; if (empty($id_kategori)) { //header location digunakan untuk meredirect ke halaman yang lain. header('location:kategori.php?info=error&msg=kategori tidak ditemukan'); exit(); } //cek apakah user melakukan submit $nama_kategori = isset($_POST['nama_kategori']) ? $_POST['nama_kategori'] : ''; if (!empty($nama_kategori)) { //proses submit ke database MySQL /* Format update ke database: UPDATE table_name SET namakolom1=value1, namakolom2=value2, dst WHERE kondisi */ $sql = 'update tabel_kategori set nama_kategori=\''.$nama_kategori.'\' where id_kategori='.$id_kategori; //jalankan dan cek query di atas if ($conn->query($sql) === TRUE) { //berhasil $info = 'success'; $msg = 'Data berhasil diproses'; } else { //gagal $info = 'error'; $msg = 'Error terjadi: '.$conn->error; } $conn->close(); header('location:kategori.php?info='.$info.'&msg='.$msg); exit(); } /* ambil 1 data dari tabel_kategori berdasarkan id_kategori Format: SELECT * FROM nama_tabel where kondisi */ $sql = 'select * from tabel_kategori where id_kategori='.$id_kategori; $result = $conn->query($sql); //untuk mengambil 1 data dari query di atas $row = $result->fetch_assoc(); //cek apakah id_kategori ada di database? //kalau tidak ada redirect ke kategori.php if ($id_kategori != $row['id_kategori']) { header('location:kategori.php?info=error&msg=kategori tidak ditemukan'); exit(); } $title = 'Edit Kategori - Asset Pribadi'; include 'header.php'; ?> <div class="content"> <h1><?php echo $title; ?></h1> <?php //cek apakah ada info error/success? //kalau ada ditampilkan $info = isset($_GET['info']) ? $_GET['info'] : ''; $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; if (!empty($info)) { echo 'Info: '.$info; echo '<br />Msg: '.$msg; echo '<br />'; } ?> <p><a href="kategori.php">« Back</a> | <a href="edit-kategori.php?id_kategori=<?php echo $id_kategori;?>">Reload</a></p> <form method="POST" action-xhr="#"> <table border="1"> <tr> <td>Nama Kategori</td> <td>:</td> <td><input type="text" name="nama_kategori" size="50" value="<?php echo $row['nama_kategori']; ?>"></td> </tr> </table> <p> <input type="submit" name="sbm" value="Submit" /> </p> </form> </div> <?php include 'footer.php';– Membuat file delete.kategori.php
Digunakan untuk menghapus data kategori di database.
delete.kategori.php
<?php include 'config.php'; //cek id_kategori, kalau kosong maka diredirect ke halaman kategori $id_kategori = isset($_GET['id_kategori']) ? (int) $_GET['id_kategori'] : 0; if (empty($id_kategori)) { //header location digunakan untuk meredirect ke halaman yang lain. header('location:kategori.php?info=error&msg=kategori tidak ditemukan'); exit(); } /* ambil 1 data dari tabel_kategori berdasarkan id_kategori Format: SELECT * FROM nama_tabel where kondisi */ $sql = 'select * from tabel_kategori where id_kategori='.$id_kategori; $result = $conn->query($sql); //untuk mengambil 1 data dari query di atas $row = $result->fetch_assoc(); //cek apakah id_kategori ada di database? //kalau tidak ada redirect ke kategori.php if ($id_kategori != $row['id_kategori']) { header('location:kategori.php?info=error&msg=kategori tidak ditemukan'); exit(); } //proses delete data di database MySQL /* Format delete data di database: DELETE FROM table_name WHERE kondisi */ $sql = 'delete from tabel_kategori where id_kategori='.$id_kategori; //jalankan dan cek query insert di atas if ($conn->query($sql) === TRUE) { //berhasil $info = 'success'; $msg = 'Kategori <b>'.$row['nama_kategori'].'</b> berhasil dihapus.'; } else { //gagal $info = 'error'; $msg = 'Error terjadi: '.$conn->error; } $conn->close(); header('location:kategori.php?info='.$info.'&msg='.$msg);Setelah selesai semua, tinggal kita coba.
Akses url data asset pribadi:
http://localhost/belajar/belajar-mysql/Demikian tutorial cepat membuat CRUD dengan PHP MySQL HTML CSS dan javascript, jika ada yang kurang paham, bisa dipost di kolom komentar di bawah ini.
Semoga bermanfaat.
Belajar mudah HTML, CSS, Javascript, PHP, MySQL
1. Pengantar – Memulai belajar web programming secara otodidak (part 1)
2. HTML Dasar – HTML dasar yang mudah sekali (part 2)
3. Tag HTML Penting – Tag HTML yang sering dipakai untuk membuat halaman website (part 3)
4. HTML CSS – Konsep dasar CSS dan cara menghubungkan HTML – CSS (part 4)
5. HTML Javascript – HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)
6. HTML – PHP – Konsep dasar PHP dan cara menghubungkan dengan HTML (part 6)
7. HTML CSS JS – PHP MySQL – Membuat CRUD dengan PHP MySQL HTML CSS JS (part 7)
Bismillaahirrohmaanirrohiim... Untuk mendeteksi cpu usage tinggi memang perkara rumit, adakalanya karena codingan bermasalah, akses ke…
Bismillaahirrohmaanirrohiim... Jika tidak dirawat dan dicek berkala, log mongodb akan semakin membesar. Bahkan sampai menghabiskan…
Bismillaahirrohmaanirrohiim... Jika kita membuat website yang digunakan untuk memantau lokasi HP client, maka kita memerlukan…
Bismillaahirrohmaanirrohiim... Kali ini kita akan mencoba menerapkan rumus trigonometeri dari formula haversine, yang digunakan untuk…
Bismillaahirrohmaanirrohiim... Disini saya akan berbagi pengalaman tentang susahnya membuka tutup botol cleo kecil ukuran 220ml.…
Bismillaahirrohmaanirrohiim... Kali ini saya akan berbagi pengalaman tentang mati lampu yang disebabkan oleh permasalahan arus…