Membangun Sistem CRUD Sederhana dengan HTML, CSS, jQuery, dan PHP
Aplikasi CRUD adalah salah satu aplikasi dasar dalam pengembangan web yang memungkinkan pengguna untuk menambah, membaca, memperbarui, dan menghapus data. Tutorial ini akan membahas langkah demi langkah cara membuat aplikasi CRUD menggunakan HTML, CSS, jQuery, dan PHP.
1. Persiapan Struktur HTML
Langkah pertama adalah membuat struktur HTML dasar yang mencakup tabel untuk menampilkan data dan form untuk menambahkan data baru.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CRUD Sederhana</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Sistem CRUD Sederhana</h1> <button id="addNew">Add New</button> <table id="dataTable"> <thead> <tr> <th>ID</th> <th>Nama</th> <th>Aksi</th> </tr> </thead> <tbody> <!-- Data akan ditampilkan di sini --> </tbody> </table> <div id="formContainer" style="display:none;"> <input type="text" id="nameInput" placeholder="Masukkan Nama"> <button id="saveButton">Save</button> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </body> </html>
2. Menambahkan CSS untuk Tampilan yang Menarik
Selanjutnya, tambahkan file CSS untuk memperindah tampilan tabel dan tombol. Berikut contoh styles.css:
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
table {
width: 60%;
margin: 20px auto;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
button {
padding: 10px;
color: #fff;
background-color: #007bff;
border: none;
cursor: pointer;
}
#formContainer {
margin-top: 20px;
}
#addNew {
margin: 10px;
background-color: #28a745;
}
3. Fungsionalitas CRUD dengan jQuery
Tambahkan jQuery untuk mengaktifkan fitur interaktif seperti menambah dan menghapus data. Berikut contoh script.js:
$(document).ready(function() {
$('#addNew').click(function() {
$('#formContainer').toggle();
});
$('#saveButton').click(function() {
let name = $('#nameInput').val();
if (name) {
$.post('process.php', { action: 'create', name: name }, function(response) {
$('#dataTable tbody').append(response);
$('#nameInput').val('');
$('#formContainer').hide();
});
}
});
$(document).on('click', '.deleteButton', function() {
let id = $(this).data('id');
$.post('process.php', { action: 'delete', id: id }, function() {
$('#row' + id).remove();
});
});
});
4. Menghubungkan dengan PHP dan Database
Buat file process.php untuk memproses data menggunakan PHP. Berikut contoh script PHP:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "crud_db";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
if ($_POST['action'] == 'create') {
$name = $_POST['name'];
$sql = "INSERT INTO users (name) VALUES ('$name')";
if ($conn->query($sql) === TRUE) {
$id = $conn->insert_id;
echo "<tr id='row$id'><td>$id</td><td>$name</td><td><button class='deleteButton' data-id='$id'>Delete</button></td></tr>";
}
}
if ($_POST['action'] == 'delete') {
$id = $_POST['id'];
$sql = "DELETE FROM users WHERE id=$id";
$conn->query($sql);
}
$conn->close();
?>
Kode di atas menangani proses Create dan Delete. Untuk mengimplementasikan Read dan Update, tambahkan tombol dan script tambahan untuk menampilkan data dari database dan memperbarui data yang sudah ada.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda telah membuat aplikasi CRUD sederhana yang memungkinkan Anda untuk menambah, membaca, memperbarui, dan menghapus data. Tutorial ini adalah dasar yang bagus untuk memahami pengelolaan data menggunakan HTML, CSS, jQuery, dan PHP.
