Membuat CRUD PHP & MYSQL + BOOTSTRAP 5 Dengan penjelasan coding lengkap

        Selamat datang di questkomputer.com! Pada kesempatan kali ini, kita akan menjelajahi pembuatan aplikasi CRUD (Create, Read, Update, Delete) menggunakan PHP dan MySQL yang dilengkapi dengan tampilan modern dari Bootstrap 5. Aplikasi CRUD merupakan salah satu dasar penting dalam pengembangan web, di mana kita dapat mengelola data dengan mudah melalui empat operasi utama tersebut. Dalam tutorial ini, kita akan membahas langkah demi langkah untuk membangun aplikasi CRUD yang efisien dan responsif, serta bagaimana menerapkan Bootstrap 5 untuk mempercantik antarmuka pengguna.

    Dengan kemajuan teknologi web yang pesat, menguasai PHP, MySQL, dan Bootstrap adalah keterampilan yang sangat berharga. Melalui artikel ini, Anda akan belajar cara mengintegrasikan ketiga teknologi tersebut untuk menciptakan aplikasi yang tidak hanya fungsional, tetapi juga menarik dan user-friendly. Jadi, siapkan komputer Anda dan mari kita mulai petualangan coding ini, di mana Anda akan mendapatkan pengetahuan praktis yang dapat diterapkan langsung dalam proyek web Anda selanjutnya.

        Lanjut langsung ke intinya silahkan teman-teman buka Web server Favorit kalian kemudian jalankan apache dan mysql nya, kali ini saya memberikan contoh menggunakan LARAGON.

Kemudian silahkan buka windows exploler lalu buka C:\laragon\www kemudian buat 1 folder dan berikan nama folder : crud2024 perhatikan pada gambar dibawah ini ketika sudah ditambahkan folser crud2024.

Setelah menambahkan 1 langkah selanjutnya adalah membuat database yang akan kita gunakan untuk membuat aplikasi web crud2024 :

Langkah 1: Setup Database 

Buat database dan tabel MySQL, dengan cara buka web browser favorit kalian dan ketikan : 

1. http://localhost/phpmyadmin/ 

2. Pada Tab SQL ketikan Syntax dibawah ini : 

Penjelasan dari kode atau syntax diatas : 

CREATE DATABASE crud_app; Baris ini membuat sebuah basis data baru dengan nama crud_app.

USE crud_app; Baris ini memilih basis data crud_app untuk digunakan. Semua perintah berikutnya akan dijalankan dalam konteks basis data ini.

CREATE TABLE users (: Baris ini memulai perintah untuk membuat sebuah tabel baru dengan nama users dalam basis data yang sedang digunakan.

id INT AUTO_INCREMENT PRIMARY KEY,: Baris ini mendefinisikan kolom pertama tabel dengan nama id yang bertipe data INT (integer). Kolom ini juga memiliki dua atribut tambahan:

• AUTO_INCREMENT: Nilai dalam kolom ini akan secara otomatis bertambah setiap kali baris baru ditambahkan.
• PRIMARY KEY: Kolom ini dijadikan kunci utama tabel, yang berarti setiap nilai dalam kolom ini harus unik dan tidak boleh kosong.

name VARCHAR(100) NOT NULL,: Baris ini mendefinisikan kolom kedua dengan nama name yang bertipe data VARCHAR dengan panjang maksimum 100 karakter. Atribut NOT NULL berarti kolom ini tidak boleh kosong (harus selalu diisi).

email VARCHAR(100) NOT NULL,: Baris ini mendefinisikan kolom ketiga dengan nama email yang bertipe data VARCHAR dengan panjang maksimum 100 karakter. Sama seperti kolom name, atribut NOT NULL berarti kolom ini tidak boleh kosong.

created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP: Baris ini mendefinisikan kolom keempat dengan nama created_at yang bertipe data TIMESTAMP. Nilai default dari kolom ini adalah CURRENT_TIMESTAMP, yang berarti secara otomatis akan diisi dengan waktu dan tanggal saat baris baru ditambahkan.

);: Baris ini menutup perintah CREATE TABLE dan menyelesaikan pembuatan tabel users.

        Secara keseluruhan, kode ini membuat basis data bernama crud_app, memilih basis data tersebut untuk digunakan, dan kemudian membuat tabel bernama users dengan empat kolom: id, name, email, dan created_at, dimana id adalah kunci utama yang akan bertambah otomatis dengan setiap entri baru.

Langkah 2: Buat Koneksi Database

Selanjut kita akan gunakan Text Editor silahkan buka text editor favorit teman-teman, kali ini saya menggunakan Visual Studio Code untuk tutorial kali ini, Silahkan Buka VSC kemudian klik File > Open Folder > Pilih Folder crud2024

\

Buat file db.php pada VSC yang kita buka sebelumnya untuk mengelola koneksi ke database. dengan cara klik icon new file pada VSC 

Icon New File

Klik New File Seperti Gambar diatas kemudian ketik db.php

Kemudian tambahkan syntax atau kode php dibawah ini : 

Penjelasan dari Syntax atau Kode PHP diatas adalah:

<?php: Tag pembuka untuk menulis kode PHP. Semua kode PHP ditulis di dalam tag ini.

$servername = "localhost";: Mendefinisikan variabel $servername dan menetapkannya dengan nilai "localhost". Ini menunjukkan bahwa server basis data berada di komputer lokal (localhost).

$username = "root";: Mendefinisikan variabel $username dan menetapkannya dengan nilai "root". Ini menunjukkan nama pengguna yang akan digunakan untuk mengakses basis data.

$password = "";: Mendefinisikan variabel $password dan menetapkannya dengan nilai kosong "". Ini menunjukkan kata sandi yang akan digunakan untuk mengakses basis data. Dalam contoh ini, tidak ada kata sandi yang diperlukan.

$dbname = "crud_app";: Mendefinisikan variabel $dbname dan menetapkannya dengan nilai "crud_app". Ini menunjukkan nama basis data yang akan diakses.

// Create connection: Komentar yang menjelaskan bahwa baris berikutnya digunakan untuk membuat koneksi ke basis data.

$conn = new mysqli($servername, $username, $password, $dbname);: Membuat objek mysqli baru dan menetapkan koneksi ke basis data menggunakan parameter yang telah ditentukan sebelumnya ($servername, $username, $password, $dbname). Objek ini disimpan dalam variabel $conn.

// Check connection: Komentar yang menjelaskan bahwa baris berikutnya digunakan untuk memeriksa koneksi ke basis data.

if ($conn->connect_error) {: Memeriksa apakah ada kesalahan dalam koneksi. Jika properti connect_error dari objek $conn tidak kosong, berarti terjadi kesalahan.

die("Connection failed: " . $conn->connect_error);: Jika ada kesalahan dalam koneksi, kode ini akan menghentikan eksekusi skrip dan mencetak pesan "Connection failed: " diikuti oleh rincian kesalahan koneksi.

}: Menutup blok if.

?>: Tag penutup PHP yang menunjukkan akhir dari kode PHP.

Secara keseluruhan, kode ini digunakan untuk membuat koneksi ke basis data MySQL menggunakan PHP. Pertama, variabel-variabel untuk parameter koneksi (nama server, nama pengguna, kata sandi, dan nama basis data) didefinisikan. Kemudian, objek mysqli dibuat untuk melakukan koneksi, dan jika terjadi kesalahan dalam koneksi, skrip akan dihentikan dan pesan kesalahan akan ditampilkan.

Langkah 3: Buat Halaman Utama

Buat file index.php yang akan menampilkan daftar pengguna dan form untuk menambah pengguna baru. pada VSC yang kita buka sebelumnya. dengan cara klik icon new file pada VSC.

Icon New File

Klik New File Seperti Gambar diatas kemudian ketik index.php

Kemudian tambahkan syntax atau kode php dibawah ini :

Penjelasan dari Syntax atau Kode PHP diatas adalah:

• <!DOCTYPE html>: Deklarasi tipe dokumen yang memberitahu browser bahwa dokumen ini adalah HTML5.
• <html lang="en">: Tag pembuka elemen html yang menetapkan bahasa halaman web ini adalah Inggris (en).
• <head>: Tag pembuka elemen head yang berisi meta informasi tentang dokumen.
• <meta charset="UTF-8">: Menetapkan karakter encoding dokumen sebagai UTF-8.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur viewport agar halaman dapat responsif terhadap ukuran layar perangkat.
• <title>CRUD PHP MySQL Bootstrap</title>: Menetapkan judul dokumen yang akan ditampilkan di tab browser.
• <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">: Menyertakan stylesheet Bootstrap dari CDN untuk mempermudah styling halaman.
• </head>: Menutup elemen head.
• <body>: Tag pembuka elemen body yang berisi konten utama dokumen.
• <div class="container mt-5">: Membuka elemen div dengan kelas container dari Bootstrap untuk membuat wadah dengan margin atas (mt-5).
• <h2 class="mb-4">User Management</h2>: Elemen heading dengan teks "User Management" dan margin bawah (mb-4).
• <?php include 'db.php'; ?>: Menyertakan file PHP db.php yang biasanya berisi kode untuk menghubungkan ke basis data.
• <!-- Read users -->: Komentar yang menandai bagian kode yang membaca data pengguna dari basis data.

• <table class="table">: Membuka elemen tabel dengan kelas table dari Bootstrap untuk styling.
• <thead>: Membuka elemen thead untuk header tabel.
• <tr>: Membuka elemen baris tabel.
• <th>ID</th>: Membuka elemen kolom header tabel dengan teks "ID".
• <th>Name</th>: Membuka elemen kolom header tabel dengan teks "Name".
• <th>Email</th>: Membuka elemen kolom header tabel dengan teks "Email".
• <th>Action</th>: Membuka elemen kolom header tabel dengan teks "Action".
• </tr>: Menutup elemen baris tabel.
• </thead>: Menutup elemen thead.
• <tbody>: Membuka elemen tbody untuk isi tabel.
• <?php: Tag pembuka untuk menulis kode PHP.
• $sql = "SELECT * FROM users";: Mendefinisikan variabel $sql dengan query SQL untuk memilih semua data dari tabel users.
• $result = $conn->query($sql);: Menjalankan query dan menyimpan hasilnya dalam variabel $result.
• if ($result->num_rows > 0) {: Memeriksa apakah ada baris yang ditemukan dalam hasil query.
• while($row = $result->fetch_assoc()) {: Mengambil setiap baris hasil query sebagai array asosiatif.
• echo "<tr>...";: Mencetak elemen baris tabel dengan data pengguna.
• <td>{$row['id']}</td>: Mencetak data id pengguna dalam elemen kolom tabel.
• <td>{$row['name']}</td>: Mencetak data name pengguna dalam elemen kolom tabel.
• <td>{$row['email']}</td>: Mencetak data email pengguna dalam elemen kolom tabel.
• <td>: Membuka elemen kolom tabel untuk aksi.
• <a href='update.php?id={$row['id']}' class='btn btn-warning btn-sm'>Edit</a>: Membuat tautan untuk mengedit pengguna dengan tombol Bootstrap berwarna kuning.
• <a href='delete.php?id={$row['id']}' class='btn btn-danger btn-sm'>Delete</a>: Membuat tautan untuk menghapus pengguna dengan tombol Bootstrap berwarna merah.
• </td>: Menutup elemen kolom tabel untuk aksi.
• </tr>: Menutup elemen baris tabel.
• } else {: Jika tidak ada baris yang ditemukan dalam hasil query.
• echo "<tr><td colspan='4'>No users found</td></tr>";: Mencetak baris tabel dengan pesan "No users found".
• }: Menutup blok if.
• ?>: Tag penutup untuk kode PHP.
• </tbody>: Menutup elemen tbody.
• </table>: Menutup elemen tabel.
• <!-- Create user form -->: Komentar yang menandai bagian kode untuk formulir pembuatan pengguna.
• <form action="create.php" method="post" class="mt-4">: Membuka elemen form yang mengirimkan data ke create.php dengan metode post, dan memiliki margin atas (mt-4).
• <div class="mb-3">: Membuka elemen div dengan margin bawah (mb-3).
• <label for="name" class="form-label">Name</label>: Elemen label untuk input nama dengan kelas form-label.
• <input type="text" class="form-control" id="name" name="name" required>: Elemen input teks untuk nama dengan kelas form-control, atribut id, name, dan required.
• </div>: Menutup elemen div.
• <div class="mb-3">: Membuka elemen div dengan margin bawah (mb-3).
• <label for="email" class="form-label">Email</label>: Elemen label untuk input email dengan kelas form-label.
• <input type="email" class="form-control" id="email" name="email" required>: Elemen input email dengan kelas form-control, atribut id, name, dan required.
• </div>: Menutup elemen div.
• <button type="submit" class="btn btn-primary">Add User</button>: Tombol submit dengan kelas btn btn-primary.
• </form>: Menutup elemen form.
• </div>: Menutup elemen div dengan kelas container.
• </body>: Menutup elemen body.
• </html>: Menutup elemen html.

Secara keseluruhan, kode ini adalah halaman web yang menampilkan daftar pengguna dari basis data, memungkinkan pengguna untuk menambah pengguna baru melalui formulir, dan mengedit atau menghapus pengguna yang sudah ada. Bootstrap digunakan untuk styling halaman agar lebih rapi dan responsif.

Langkah 4: Buat Fungsi Create

Buat file create.php untuk menambahkan pengguna baru ke database. untuk membuat create.php silahkan lihat gambar atau lakukan hal yang sama pada langkah sebelumnya, setelah itu tambahkan syntax atau kode php dibawah ini : 

• <?php: Tag pembuka untuk menulis kode PHP. Semua kode PHP ditulis di dalam tag ini.
• include 'db.php';: Menyertakan file db.php yang biasanya berisi kode untuk menghubungkan ke basis data. Ini memastikan bahwa koneksi basis data tersedia dalam skrip ini.
• $name = $_POST['name'];: Mengambil data dari input form dengan nama name yang dikirim melalui metode POST dan menyimpannya dalam variabel $name.
• $email = $_POST['email'];: Mengambil data dari input form dengan nama email yang dikirim melalui metode POST dan menyimpannya dalam variabel $email.
• $sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";: Membuat query SQL untuk memasukkan data baru ke dalam tabel users. Data yang dimasukkan adalah nilai dari variabel $name dan $email.
• if ($conn->query($sql) === TRUE) {: Menjalankan query SQL menggunakan objek koneksi $conn. Jika query berhasil dijalankan (TRUE), blok kode di dalam if akan dieksekusi.
• echo "New record created successfully";: Jika query berhasil, mencetak pesan "New record created successfully".
• } else {: Jika query tidak berhasil dijalankan (FALSE), blok kode di dalam else akan dieksekusi.
• echo "Error: " . $sql . "<br>" . $conn->error;: Jika query gagal, mencetak pesan error yang terdiri dari string "Error: ", query SQL yang gagal, dan pesan error dari objek koneksi $conn.
• $conn->close();: Menutup koneksi ke basis data.
• header("Location: index.php");: Mengarahkan browser ke halaman index.php setelah operasi insert selesai. Fungsi header() mengirimkan header HTTP yang mengarahkan browser untuk memuat URL yang ditentukan.
• ?>: Tag penutup PHP yang menunjukkan akhir dari kode PHP.

        Secara keseluruhan, skrip ini menerima data yang dikirim dari formulir melalui metode POST, menyisipkan data tersebut ke dalam tabel users dalam basis data, memeriksa apakah operasi berhasil, dan kemudian mengarahkan pengguna kembali ke halaman index.php.

Langkah 5: Buat Fungsi Update

Buat file update.php untuk memperbarui data pengguna.

<?php: Tag pembuka untuk menulis kode PHP.

include 'db.php';: Menyertakan file db.php yang biasanya berisi kode untuk menghubungkan ke basis data.

$id = $_GET['id'];: Mengambil data dari parameter URL id yang dikirim melalui metode GET dan menyimpannya dalam variabel $id.

$sql = "SELECT * FROM users WHERE id=$id";: Membuat query SQL untuk memilih semua data dari tabel users di mana kolom id sesuai dengan nilai $id.

$result = $conn->query($sql);: Menjalankan query SQL menggunakan objek koneksi $conn. Hasilnya disimpan dalam variabel $result.

$user = $result->fetch_assoc();: Mengambil baris hasil query sebagai array asosiatif dan menyimpannya dalam variabel $user.

?>: Tag penutup PHP yang menunjukkan akhir dari kode PHP.

<!DOCTYPE html>: Deklarasi tipe dokumen yang memberitahu browser bahwa dokumen ini adalah HTML5.

<html lang="en">: Tag pembuka elemen html yang menetapkan bahasa halaman web ini adalah Inggris (en).

<head>: Tag pembuka elemen head yang berisi meta informasi tentang dokumen.

<meta charset="UTF-8">: Menetapkan karakter encoding dokumen sebagai UTF-8.

<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur viewport agar halaman dapat responsif terhadap ukuran layar perangkat.

<title>Update User</title>: Menetapkan judul dokumen yang akan ditampilkan di tab browser.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">: Menyertakan stylesheet Bootstrap dari CDN untuk mempermudah styling halaman.

</head>: Menutup elemen head.

<body>: Tag pembuka elemen body yang berisi konten utama dokumen.

<div class="container mt-5">: Membuka elemen div dengan kelas container dari Bootstrap untuk membuat wadah dengan margin atas (mt-5).

<h2 class="mb-4">Update User</h2>: Elemen heading dengan teks "Update User" dan margin bawah (mb-4).

<form action="update_process.php" method="post">: Membuka elemen form yang mengirimkan data ke update_process.php dengan metode POST.

<input type="hidden" name="id" value="<?php echo $user['id']; ?>">: Elemen input tersembunyi yang menyimpan id pengguna. Nilai id diambil dari array asosiatif $user.

<div class="mb-3">: Membuka elemen div dengan margin bawah (mb-3).

<label for="name" class="form-label">Name</label>: Elemen label untuk input nama dengan kelas form-label.

<input type="text" class="form-control" id="name" name="name" value="<?php echo $user['name']; ?>" required>: Elemen input teks untuk nama dengan kelas form-control, atribut id, name, dan required. Nilai default diambil dari array asosiatif $user.

<div class="mb-3">: Membuka elemen div dengan margin bawah (mb-3).

<label for="email" class="form-label">Email</label>: Elemen label untuk input email dengan kelas form-label.

<input type="email" class="form-control" id="email" name="email" value="<?php echo $user['email']; ?>" required>: Elemen input email dengan kelas form-control, atribut id, name, dan required. Nilai default diambil dari array asosiatif $user.

<button type="submit" class="btn btn-primary">Update User</button>: Tombol submit dengan kelas btn btn-primary.

</form>: Menutup elemen form.

</div>: Menutup elemen div dengan kelas container.

</body>: Menutup elemen body.

</html>: Menutup elemen html.

Secara keseluruhan, skrip ini mengambil data pengguna dari basis data berdasarkan id yang dikirim melalui URL, menampilkan formulir dengan data pengguna yang diambil, dan memungkinkan pengguna untuk memperbarui data tersebut. Data yang diperbarui kemudian dikirim ke update_process.php untuk diproses lebih lanjut. Bootstrap digunakan untuk styling halaman agar lebih rapi dan responsif.

Buat file update_process.php untuk memproses pembaruan data.

<?php: Tag pembuka untuk menulis kode PHP.

include 'db.php';: Menyertakan file db.php yang biasanya berisi kode untuk menghubungkan ke basis data. Ini memastikan bahwa koneksi basis data tersedia dalam skrip ini.

$id = $_POST['id'];: Mengambil data dari input form dengan nama id yang dikirim melalui metode POST dan menyimpannya dalam variabel $id.

$name = $_POST['name'];: Mengambil data dari input form dengan nama name yang dikirim melalui metode POST dan menyimpannya dalam variabel $name.

$email = $_POST['email'];: Mengambil data dari input form dengan nama email yang dikirim melalui metode POST dan menyimpannya dalam variabel $email.

$sql = "UPDATE users SET name='$name', email='$email' WHERE id=$id";: Membuat query SQL untuk memperbarui data dalam tabel users. Query ini mengganti nilai name dan email dengan nilai dari variabel $name dan $email untuk baris di mana kolom id sesuai dengan nilai $id.

if ($conn->query($sql) === TRUE) {: Menjalankan query SQL menggunakan objek koneksi $conn. Jika query berhasil dijalankan (TRUE), blok kode di dalam if akan dieksekusi.

echo "Record updated successfully";: Jika query berhasil, mencetak pesan "Record updated successfully" untuk memberi tahu pengguna bahwa pembaruan data berhasil.

} else {: Jika query tidak berhasil dijalankan (FALSE), blok kode di dalam else akan dieksekusi.

echo "Error updating record: " . $conn->error;: Jika query gagal, mencetak pesan error yang terdiri dari string "Error updating record: " dan pesan error dari objek koneksi $conn.

$conn->close();: Menutup koneksi ke basis data setelah query selesai.

header("Location: index.php");: Mengarahkan browser ke halaman index.php setelah operasi pembaruan selesai. Fungsi header() mengirimkan header HTTP yang mengarahkan browser untuk memuat URL yang ditentukan.

?>: Tag penutup PHP yang menunjukkan akhir dari kode PHP.

Secara keseluruhan, skrip ini menerima data yang dikirim dari formulir melalui metode POST, memperbarui baris yang sesuai dalam tabel users di basis data, memeriksa apakah operasi pembaruan berhasil, dan kemudian mengarahkan pengguna kembali ke halaman index.php.

Langkah 6: Buat Fungsi Delete

Buat file delete.php untuk menghapus data pengguna.

<?php: Tag pembuka untuk menulis kode PHP.

include 'db.php';: Menyertakan file db.php yang biasanya berisi kode untuk menghubungkan ke basis data. Ini memastikan bahwa koneksi basis data tersedia dalam skrip ini.

$id = $_GET['id'];: Mengambil data dari parameter URL id yang dikirim melalui metode GET dan menyimpannya dalam variabel $id.

$sql = "DELETE FROM users WHERE id=$id";: Membuat query SQL untuk menghapus baris dari tabel users di mana kolom id sesuai dengan nilai $id.

echo "Record deleted successfully";: Jika query berhasil, mencetak pesan "Record deleted successfully" untuk memberi tahu pengguna bahwa data telah berhasil dihapus.

if ($conn->query($sql) === TRUE) {: Menjalankan query SQL menggunakan objek koneksi $conn. Jika query berhasil dijalankan (TRUE), blok kode di dalam if akan dieksekusi.

} else {: Jika query tidak berhasil dijalankan (FALSE), blok kode di dalam else akan dieksekusi.

echo "Error deleting record: " . $conn->error;: Jika query gagal, mencetak pesan error yang terdiri dari string "Error deleting record: " dan pesan error dari objek koneksi $conn.

$conn->close();: Menutup koneksi ke basis data setelah query selesai.

header("Location: index.php");: Mengarahkan browser ke halaman index.php setelah operasi penghapusan selesai. Fungsi header() mengirimkan header HTTP yang mengarahkan browser untuk memuat URL yang ditentukan.

• ?>: Tag penutup PHP yang menunjukkan akhir dari kode PHP.

Secara keseluruhan, skrip ini menerima id dari parameter URL, menghapus baris yang sesuai dari tabel users di basis data, memeriksa apakah operasi penghapusan berhasil, dan kemudian mengarahkan pengguna kembali ke halaman index.php.

Dengan langkah-langkah di atas, Anda akan memiliki aplikasi CRUD dasar menggunakan PHP, MySQL, dan Bootstrap 5. Jika ada pertanyaan atau butuh bantuan lebih lanjut, jangan ragu untuk bertanya!