CRUD Sederhana Menggunakan PHP Dan MySQL

Halo, selamat datang di Ruang Developer Blog. Kali ini kita akan belajar bagaimana cara mengkoneksikan database MySQL ke aplikasi PHP kita, dan melakukan operasi baca tulis ke dalam database yang kita miliki melalui aplikasi kita.

Ada beberapa cara yang dapat kita gunakan untuk terhubung ke database menggunakan php. Yang paling umum yaitu menggunakan library MySQLi, dan PDO. Lalu apa perbedaan antara keduanya?. Library MySQLi hanya dapat kita gunakan untuk koneksi ke dalam database mysql, sedangkan library PDO dapat kita gunakan untuk koneksi ke berbagai jenis database.

Contoh koneksi database menggunakan MySQLi (procedural)

<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = mysqli_connect($servername, $username, $password);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
} else {
    echo "Connected successfully";
}

Contoh koneksi database menggunakan PDO

<?php
$servername = "localhost";
$username = "username";
$password = "password";

try {
    $conn = new PDO("mysql:host=$servername;dbname=myDB", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Connected successfully";
} catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

Pertanyaanya, apa yang harus kita gunakan ? MySQLi atau PDO?

Jawaban singkatnya adalah apa saja yang ingin kita gunakan. Keduanya sama-sama memiliki kelebihan. Koneksi dengan PDO dapat digunakan pada 12 jenis database yang berbeda, sedangkan MySQLi hanya bisa digunakan untuk koneksi ke dalam database SQL.

jadi jika kita ingin berganti database pada projek yang dibuat, koneksi dengan PDO membuatnya menjadi lebih mudah. Kita hanya akan diharuskan untuk merubah connection string dan beberapa query. Tetapi dengan MySQLi, kita harus menulis ulang seluruh kode termasuk query-nya.

PDO dan MySQLi mendukung pemrograman berorientasi objek, tetapi MySQLi juga dapat digunakan secara procedural. Keduanya juga telah mendukung prepared statement. Ini berfungsi untuk melindungi aplikasi dari upaya SQL Injection, dan sangat penting dalam keamanan aplikasi website.

Coding!

Agar lebih mudah memahaminya, kita akan praktekan langsung pada komputer kita.

Membuat Database

Kita akan menggunakan bantuan phpmyadmin yang ada pada xampp untuk membuat database mysql kita. (saya anggap xampp telah terinstall di komputer kamu). Aktifkan apache dan mysql server melalui xampp control panel.

pergi ke phpmyadmin di browser kamu, kemudian buat database baru dengan nama codelabs_crud, setelah itu buat tabel users dengan struktur sebagai berikut:

kamu dapat menggunakan sql yang ada di bawah ini atau membuatnya secara manual melalui interface yang diberikan oleh phpmyadmin

CREATE TABLE `codelabs_crud`.`users` ( `id` INT NOT NULL AUTO_INCREMENT , `name` VARCHAR(128) NOT NULL , `email` VARCHAR(128) NOT NULL , `password` VARCHAR(128) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;

Folder dan file project

Setelah membuat database silahkan buat folder dengan nama simple_crud di dalam folder htdocs milik xampp kemudian buat beberapa file dan folder di dalamnya dengan struktur seperti ini:

biarkan filenya kosong untuk saat ini

Koneksi database

Setelah struktur folder dibuat langkah selanjutnya kita akan mengkoneksikan projek kita dengan database yang tadi sudah kita buat.

Untuk koneksi di ini kita akan menggunakan library PDO terlebih dahulu saja

Buka file database_connection.php yang ada di config/database_connection.php

Kemudian tuliskan kode seperti di bawah ini:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "codelabs_crud";

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Connected successfully";
} catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

Setelah itu kita coba jalankan dengan cara pergi ke link project yang kita buat

http://localhost/codelabs/simple_crud/config/database_connection.php

(Note: sesuaikan link dengan lokasi folder project yang kamu miliki)

Jika koneksi berhasil akan muncul seperti ini:

Namun, jika terdapat kesalahan dan koneksi database gagal akan muncul seperti ini:

Perhatikan pesan errornya

Unknown database ‘codelabs_cruds’ berarti program kita tidak bisa menemukan database dengan nama codelabs_cruds karena nama database yang kita miliki adalah ‘codelabs_crud’ (tanpa huruf “s” di akhir)

ini hanya sebagai contoh saja, pesan error yang kamu dapatkan mungkin saja berbeda dan itu berarti error yang berbeda pula, perbanyaklah berlatih untuk membaca dan memahami pesan error.

Membuat data user

Setelah berhasil mengkoneksikan database, kali ini kita akan mencoba untuk melakukan operasi baca tulis data ke dalam database yang kita miliki. Pertama kita akan membuat fitur tambah data. Tapi sebelum itu, buka kembali file config/database_connection.php, kemudian ganti baris kode yang ada dibawah ini:

echo "Connected successfully";

Menjadi seperti ini

$db = $conn;

sehingga keseluruhan kode di dalam file config/database_connection.php menjadi seperti ini:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "codelabs_cruds";

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $db = $conn;
} catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

kita akan membuat tampilan form sederhana untuk menginputkan data user. agar lebih mudah kita akan gunakan css framework Bootstrap. Dokumentasi tentang bootstrap dapat kamu temukan di sini.

Jika kamu bingung ikuti saya terlebih dahulu saja.

buka file create_user.php, kemudian masukkan baris html seperti ini:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />

    <title>Codelabs | Simple CRUD</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
      <div class="container">
        <a class="navbar-brand" href="./index.php">Simple CRUD</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" href="./index.php">List User</a>
            <a class="nav-link" href="./create_user.php">Create User</a>
          </div>
        </div>
      </div>
    </nav>
    <div class="container py-5">
      <h2>Tambah Data User</h2>
      <form class="mt-4" method="POST">
        <div class="mb-3">
          <label for="name" class="form-label">Nama</label>
          <input name="name" type="text" class="form-control" id="name" />
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input name="email" type="email" class="form-control" id="email" />
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">Password</label>
          <input
            name="password"
            type="password"
            class="form-control"
            id="password"
          />
        </div>
        <button type="submit" class="btn btn-success">Simpan</button>
      </form>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Cek hasilnya di browser dengan pergi ke link

http://localhost/codelabs/simple_crud/create_user.php</code></pre>

(Note: sesuaikan link dengan lokasi folder project yang kamu miliki)

Hasilnya akan menjadi seperti ini

Sip, tampilan aplikasi sederhana kita sudah berhasil dibuat. Namun, ada beberapa hal yang harus diperbaiki. Jika kamu perhatikan kembali struktur project yang kita buat, kita memiliki beberapa file seperti delete_user.php, index.php, dan update_user.php. Semua file tersebut nantinya akan memiliki struktur html yang sama seperti file create_user.php, khususnya pada bagian head (kepala) dan foot (kaki). Agar kita tidak harus menuliskan kode yang sama pada setiap file kita akan membuat template untuk aplikasi kita.

Pertama, buka kembali file create_user.php, kemudian potong (cut) kode html mulai dari tag penutup </nav> hingga baris paling atas <html lang="en"> dan tempel (paste) ke dalam file template/head.php sehingga file template/head.php akan menjadi seperti ini:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />

    <title>Codelabs | Simple CRUD</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
      <div class="container">
        <a class="navbar-brand" href="./index.php">Simple CRUD</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" href="./index.php">List User</a>
            <a class="nav-link" href="./create_user.php">Create User</a>
          </div>
        </div>
      </div>
    </nav>
  </body>
</html>

Setelah itu, buka kembali file create_user.php dan potong kode html mulai dari tag pembuka <script> sampai baris paling bawah </html> dan tempel ke dalam file template/foot.php, sehingga file template/foot.php akan menjadi seperti ini:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>

</html>

Setelah itu, tambahkan kode

<?php
include('./template/head.php');
?>

pada baris teratas file create_user.php, dan tambahkan kode

<?php
include('./template/foot.php');
?>

pada baris paling bawah file create_user.php sehingga file create_user.php menjadi seperti ini:

<?php
include('./template/head.php');
?>

<div class="container py-5">
  <h2>Tambah Data User</h2>
  <form class="mt-4" method="POST">
    <div class="mb-3">
      <label for="name" class="form-label">Nama</label>
      <input name="name" type="text" class="form-control" id="name" />
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Email</label>
      <input name="email" type="email" class="form-control" id="email" />
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input
        name="password"
        type="password"
        class="form-control"
        id="password"
      />
    </div>
    <button type="submit" class="btn btn-success">Simpan</button>
  </form>
</div>

<?php
include('./template/foot.php');
?>

Jika selesai, pastikan tampilan aplikasi kita masih sama seperti sebelumnya.

Baik kita akan mulai bermain dengan data kali ini.

Pertama kita akan menangkap data yang kita kirimkan dari form. Pastikan kamu menggunakan metode POST seperti ini

<form class="mt-4" method="POST"></form>

Lalu apa itu metode POST??

POST merupakan salah satu http request yang biasanya digunakan untuk mengirimkan data ke dalam backend (untuk saat ini anggap saja server). Ada beberapa jenis http request yang sering digunakan sebagai berikut:

GET = Digunakan untuk mengirimkan permintaan data
POST = Digunakan untuk mengirimkan data
PUT/PATCH = Digunakan untuk mengirimkan permintaan memodifikasi data yang sudah ada (contoh update data user)
DELETE = Digunakan untuk mengirimkan permintaan hapus data

Baik kembali lagi ke bagian form, pastikan juga setiap input yang ada di dalam form kita memiliki atribut name. Contoh nya seperti ini

<input name="email" type="email" class="form-control" id="email" />

Pada contoh diatas input email memiliki atribut name=”email”, nama email ini akan kita gunakan untuk mengambil datanya ketika kita mengirimkan data melalui form, oleh karena itu atribut name tidak boleh memiliki nilai yang sama karena akan mempengaruhi proses pengambilan data.

setelah yakin semuanya sudah siap, pergi ke baris paling atas di bawah baris kode include("./template/head.php"); pada file create_user.php, kemudian tambahkan kode php seperti ini

$errors = []; // varioabel yang akan digunakan untuk menampung pesan error validasi

// script kode ini hanya akan dieksekusi jika kita melakukan submit form
if (!empty($_POST)) {

    // ambil data yang dikirimkan melalui form dan simpan ke dalam variabel
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    // lakukan validasi untuk tiap inputan, jika inputan kosong maka tambahkan pesan error kedalam variabel $errors
    if ($name == "") {
        $errors['name'] = "Nama tidak boleh kosong";
    }
    if ($email == "") {
        $errors['email'] = "Email tidak boleh kosong";
    }
    if ($password == "") {
        $errors['password'] = "Password tidak boleh kosong";
    }
}

setelah itu arahkan kursor ke bawah baris <h2>Tambah Data User</h2> kemudian tambahkan kode berikut ini

<?php foreach ($errors as $error) : ?>
<div class="alert bg-danger" role="alert">
  <?= $error ?>
</div>
<?php endforeach; ?>

pada kode diatas, kita mengambil data dari form dan menyimpannya ke dalam variabel kemudian melakukan validasi untuk input kosong. validasi sangat penting dalam proses menyimpan data ke dalam database. Pada kasus lain, validasi tidak hanya digunakan untuk menguji inputan yang kosong tetapi juga digunakan untuk memastikan data yang dikirmkan oleh pengguna melalui form benar-benar aman untuk disimpan dan tidak akan merusak sistem.

Baik, kita lanjutkan pada proses penyimpanan data.

Masih pada file yang sama (create_user.php), tambahkan kode seperti ini

include('./config/database_connection.php');

di bawah kode include('./template/head.php'); intuk menghubungkan file php kita dengan database.

Kemudian buat fungsi isEmailAvailable() di bawahnya

function isEmailAvailable($db, $email){
    $sql = "SELECT email FROM users WHERE email='$email'";
    return ($db->query($sql)->fetchAll() == null);
}

fungsi ini digunakan untuk cek apakah email yang diinputkan ada di dalam database atau tidak. Jika email tidak ada, fungsi ini akan mengembalikan nilai true dan jika email sudah ada maka akan mengembalikan nilai false.

Pergi ke bagian bawah baris dari kode ini

if ($password == "") {
    $errors['password'] = "Password tidak boleh kosong";
}

setelah itu masukkan kode berikut:

// cek jika tidak ada error maka lakukan proses penyimpanan data
if (!$errors) {
    // cek duplikasi data
    if (isEmailAvailable($db, $email)) {
        // hash password untuk keamanan
        $password = password_hash($password, PASSWORD_DEFAULT);
        // buat sql
        $sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$password')";
        // simpan data
        if ($db->exec($sql)) {
            // berhasil
            echo "<script>alert('Data berhasil disimpan');</script>";
            echo "<meta http-equiv='refresh' content='0; url=index.php'>";
        } else {
            // gagal
            echo "<script>alert('Gagal menyimpan data');</script>";
            echo "<meta http-equiv='refresh' content='0; url=index.php'>";
        }
    } else {
        $errors['email'] = "Email " . $email . " sudah digunakan";
    }
}

Pada kode ini kita periksa terlebih dahulu apakah ada error yang terjadi, jika tidak, kita periksa kembali untuk duplikasi email menggunakan fungsi isEmailAvailable($db, $email);. Jika email tersedia, kita akan menyimpan datanya. Pertama kita lakukan password hashing untuk mengamankan password, kemudian kita buat perintah sql untuk menyimpan data, lalu mengeksekusi sql tersebut. Sebuah alert akan dijakankan untuk mengetahui apakah data berhasil disimpan atau tidak. Setelah proses ini selesai maka halaman akan dialihkan ke link index.php (halaman untuk menampilkan data user, kita belum membuatnya untuk saat ini).

Catatan: Password hashing adalah proses merubah password menjadi karakter acak dengan jumlah dan algoritma tertentu. Password yang telah dirubah tersebut tidak dapat dikembalikan ke bentuk semula lagi, dan hanya bisa dikomparasikan (comparing) menggunakan algoritma yang sesuai untuk memeriksa apakah password yang dimasukkan saat login adalah password yang benar.

Baik, sejauh ini keseluruhan dari file create_user.php akan terlihat seperti ini:

<?php
include('./template/head.php');
include('./config/database_connection.php');

function isEmailAvailable($db, $email){
    $sql = "SELECT email FROM users WHERE email='$email'";
    return $db->query($sql)->fetchAll() == null;
}

$errors = []; // varioabel yang akan digunakan untuk menampung pesan error validasi

if (!empty($_POST)) {

    // ambil data yang dikirimkan melalui form dan simpan ke dalam variabel
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    // lakukan validasi untuk tiap inputan, jika inputan kosong maka tambahkan pesan error kedalam variabel $errors
    if ($name == "") {
        $errors['name'] = "Nama tidak boleh kosong";
    }
    if ($email == "") {
        $errors['email'] = "Email tidak boleh kosong";
    }
    if ($password == "") {
        $errors['password'] = "Password tidak boleh kosong";
    }

    // cek jika tidak ada error maka lakukan proses penyimpanan data
    if (!$errors) {
        // cek duplikasi data
        if (isEmailAvailable($db, $email)) {
            // hash password untuk keamanan
            $password = password_hash($password, PASSWORD_DEFAULT);
            // buat sql
            $sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$password')";
            // simpan data
            if ($db->exec($sql)) {
                // berhasil
                echo "<script>alert('Data berhasil disimpan');</script>";
                echo "<meta http-equiv='refresh' content='0; url=index.php'>";
            } else {
                // gagal
                echo "<script>alert('Gagal menyimpan data');</script>";
                echo "<meta http-equiv='refresh' content='0; url=index.php'>";
            }
        } else {
            $errors['email'] = "Email " . $email . " sudah digunakan";
        }
    }
}
?>

<div class="container py-5">
    <h2>Tambah Data User</h2>

    <?php foreach ($errors as $error) : ?>
        <div class="alert bg-danger" role="alert">
            <?= $error ?>
        </div>
    <?php endforeach; ?>
    <form class="mt-4" method="POST">
        <div class="mb-3">
            <label for="name" class="form-label">Nama</label>
            <input name="name" type="text" class="form-control" id="name">
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input name="email" type="email" class="form-control" id="email">
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input name="password" type="password" class="form-control" id="password">
        </div>
        <button type="submit" class="btn btn-success">Simpan</button>
    </form>
</div>

<?php
include('./template/foot.php');
?>

Kita sudah selesai membuat fitur untuk membuat data user, saatnya kita uji coba.

pergi ke link

http://localhost/codelabs/simple_crud/create_user.php

(Note: sesuaikan link dengan lokasi folder project yang kamu miliki)

Pertama kita cek validasi. Jangan inputkan apapun ke dalam form, kemudian tekan tombol simpan, maka hasilnya akan seperti ini:

kemudian kita coba untu menginputkan data dan menekan tombol simpan lagi, jika tidak ada error akan muncul alert yang menujukkan apakah data berhasil disimpan atau tidak, seperti ini:

Klik OK, maka kita akan dialihkan ke halaman index.php, untuk saat ini halaman index kita masih kosong, namun kita telah berhasil membuat fitur tambah data. Periksa tabel users di phpmyadmin

Silahkan lakukan beberapa pengujian seperti memasukkan email yang sama, atau yang lainnya. Pahami kembali alur kerjanya secara sederhana.

Menampilkan data users

Setelah berhasil membuat data user, kita akan menampilkan data user yang ada di database ke dalam aplikasi kita.

Buka file index.php, lalu tambahkan kode dibawah ini:

(jangan lupa menutup kode php kita dengan ?> karena nantinya akan digabung dengan kode html)

<?php
include('./template/head.php');
include('./config/database_connection.php');

function getAllUser($db)
{
    $sql = "SELECT * FROM users";
    return $db->query($sql)->fetchAll(PDO::FETCH_ASSOC);
}

?>

Pada kode di atas, kita kembali menyematkan file head.php dari folder template, dan file database_connection.php dari folder konfig yang akan kita gunakan untuk terhubung ke database kita. Kita juga membuat fungsi getAllUser($db) dengan parameter $db yang nantinya akan kita dapatkan dari folder database_connection.php. Fungsi ini akan mengembalikan data user yang ada di dalam database.

Masih di dalam file index.php, pergi ke baris paling bawah dan tambahkan kode berikut ini:

<div class="container py-4">
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Nama</th>
          <th>Email</th>
          <th>Password</th>
          <th>Kelola</th>
        </tr>
      </thead>
      <tbody>
        <?php if (getAllUser($db)) : ?>
        <?php foreach (getAllUser($db) as $user) : ?>
        <tr>
          <td><?= $user['id'] ?></td>
          <td><?= $user['name'] ?></td>
          <td><?= $user['email'] ?></td>
          <td><?= $user['password'] ?></td>
          <td>
            <a
              href="./update_user.php?id=<?= $user['id'] ?>"
              class="btn btn-sm btn-success"
              >Update</a
            >
            <a
              href="./delete_user.php?id=<?= $user['id'] ?>"
              class="btn btn-sm btn-danger"
              >Delete</a
            >
          </td>
        </tr>
        <?php endforeach; ?>
        <?php else : ?>
        <tr>
          <td colspan="5" class="text-center">Tidak ada data</td>
        </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</div>

Kode diatas kita adalah html yang kita gunakan untuk membentuk sebuah tabel yang menampung data user dari dalam database.

Pehatikan bagian kode ini:

<?php if (getAllUser($db)) : ?>
<?php foreach (getAllUser($db) as $user) : ?>
<tr>
  <td><?= $user['id'] ?></td>
  <td><?= $user['name'] ?></td>
  <td><?= $user['email'] ?></td>
  <td><?= $user['password'] ?></td>
  <td>
    <a
      href="./update_user.php?id=<?= $user['id'] ?>"
      class="btn btn-sm btn-success"
      >Update</a
    >
    <a
      href="./delete_user.php?id=<?= $user['id'] ?>"
      class="btn btn-sm btn-danger"
      >Delete</a
    >
  </td>
</tr>
<?php endforeach; ?>
<?php else : ?>
<tr>
  <td colspan="5" class="text-center">Tidak ada data</td>
</tr>
<?php endif; ?>

Di bagian tersebut kita memeriksa apakah ada data user di dalam database dengan cara memanggil fungsi getAllUser(). Jika ada data user maka akan dijalankan perulangan data menggunakan foreach untuk mencetak baris tabel lalu menampilkan data user pada kolom kolom yang sesuai. Serta mencetak dua buah tombol pada kolom terakhir yang nantinya akan kita gunakan untuk mengupdate dan menghapus data user.

catatan:

<?= > sama saja dengan <?php echo ?>. Sehingga:

<?= $user['id'] ?> sama dengan <?php echo $user['id'] ?>

Masih di dalam file index.php, tambahkan lagi kode berikut ini pada baris paling bawah untuk menyematkan file foot.php dari folder template.

<?php
include('./template/foot.php');
?>

Sehingga akhirnya keseluruhan dari file index.php akan menjadi seperti ini:

<?php
include('./template/head.php');
include('./config/database_connection.php');

function getAllUser($db)
{
    $sql = "SELECT * FROM users";
    return $db->query($sql)->fetchAll(PDO::FETCH_ASSOC); } ?>
<div class="container py-4">
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Nama</th>
          <th>Email</th>
          <th>Password</th>
          <th>Kelola</th>
        </tr>
      </thead>
      <tbody>
        <?php if (getAllUser($db)) : ?>
        <?php foreach (getAllUser($db) as $user) : ?>
        <tr>
          <td><?= $user['id'] ?></td>
          <td><?= $user['name'] ?></td>
          <td><?= $user['email'] ?></td>
          <td><?= $user['password'] ?></td>
          <td>
            <a
              href="./update_user.php?id=<?= $user['id'] ?>"
              class="btn btn-sm btn-success"
              >Update</a
            >
            <a
              href="./delete_user.php?id=<?= $user['id'] ?>"
              class="btn btn-sm btn-danger"
              >Delete</a
            >
          </td>
        </tr>
        <?php endforeach; ?>
        <?php else : ?>
        <tr>
          <td colspan="5" class="text-center">Tidak ada data</td>
        </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</div>
<?php
include('./template/foot.php');
?>

Pastikan tidak ada kesalahan pengetikan. Jalankan kembali aplikasi kita. pergi ke link

http://localhost/codelabs/simple_crud/index.php

(Note: sesuaikan link dengan lokasi folder project yang kamu miliki)

Jika tidak ada kesalahan, maka sekarang tampilan di browser kamu kurang lebih akan menjadi seperti ini:

Pergi ke halaman create user dengan cara klik menu yang ada di bagian navigasi kemudian cobalah tambahkan beberapa data user yang baru. Pastikan data yang ada di dalam tabel juga akan bertambah.

Eitss.. kenapa data di kolom ID dari 1 langsung 3 ???

Tenang, ini dikarenakan kita menggunakan auto increment pada kolom id di dalam database kita. Auto increment adalah data yang otomatis diisikan ke dalam kolom jika kita menambahkan data ke dalam database dan nilainya selalu bertambah satu secara otomatis (auto increment). Dan disini ternyata sebelumnya saya telah menghapus data dengan id 2 sehingga id yang dibuat adalah 3. Id di dalam database kamu mungkin saja berbeda, jika kamu sudah beberapa kali menginput data dan menghapusnya.

Baik, jadi di bagian ini kita sudah berhasil menampilkan data yang ada di dalam database. Apa selanjutnya ?

Memperbarui data user

Setelah kita berhasil menampilkan data yang ada di database, kali ini kita akan membuat fitur untuk update/edit data yang sudah kita simpan.

Karena tampilan untuk update user kurang lebih sama ketika kita menambahkan data, maka agar cepat kita akan menggunakan kode pada halaman tambah data user.

Pergi ke file create_user.php, salin semua kode yang ada di dalamnya, kemudian paste ke dalam file update_user.php dan sesuaikan isinya.

Sehingga file update_user.php sekarang menjadi seperti ini:

<?php
include('./template/head.php');
include('./config/database_connection.php');

function isEmailAvailable($db, $email)
{
    $sql = "SELECT email FROM users WHERE email='$email'";
    return $db->query($sql)->fetchAll() == null;
}

$errors = []; // variabel yang akan digunakan untuk menampung pesan error validasi

if (!empty($_POST)) {

    // ambil data yang dikirimkan melalui form dan simpan ke dalam variabel
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    // lakukan validasi untuk tiap inputan, jika inputan kosong maka tambahkan pesan error kedalam variabel $errors
    if ($name == "") {
        $errors['name'] = "Nama tidak boleh kosong";
    }
    if ($email == "") {
        $errors['email'] = "Email tidak boleh kosong";
    }
    if ($password == "") {
        $errors['password'] = "Password tidak boleh kosong";
    }

    // cek jika tidak ada error maka lakukan proses penyimpanan data
    if (!$errors) {
        // cek duplikasi data
        if (isEmailAvailable($db, $email)) {
            // hash password untuk keamanan
            $password = password_hash($password, PASSWORD_DEFAULT);
            // buat sql
            $sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$password')";
            // simpan data
            if ($db->exec($sql)) {
                // berhasil
                echo "<script>alert('Data berhasil disimpan');</script>";
                echo "<meta http-equiv='refresh' content='0; url=index.php'>";
            } else {
                // gagal
                echo "<script>alert('Gagal menyimpan data');</script>";
                echo "<meta http-equiv='refresh' content='0; url=index.php'>";
            }
        } else {
            $errors['email'] = "Email " . $email . " sudah digunakan";
        }
    }
}
?>

<div class="container py-5">
    <h2>Update Data User</h2>

    <?php foreach ($errors as $error) : ?>
        <div class="alert bg-danger" role="alert">
            <?= $error ?>
        </div>
    <?php endforeach; ?>
    <form class="mt-4" method="POST">
        <div class="mb-3">
            <label for="name" class="form-label">Nama</label>
            <input name="name" type="text" class="form-control" id="name">
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input name="email" type="email" class="form-control" id="email">
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input name="password" type="password" class="form-control" id="password">
        </div>
        <button type="submit" class="btn btn-success">Simpan</button>
    </form>
</div>

<?php
include('./template/foot.php');
?>

Tambahkan kode berikut dibawah block if (!empty($_POST)){}

if (!empty($_GET) and isset($_GET['id'])) {
    $id = $_GET['id'];
    $sql = "SELECT * FROM users WHERE id='$id'";
    $user = $db->query($sql)->fetch(PDO::FETCH_ASSOC);

    if (!$user) {
        header('location:./index.php');
    }
} else {
    header('location:./index.php');
}

Sehingga akan terlihat seperti ini:

if (!empty($_POST)) {
    ...
    ...
    ...
}

if (!empty($_GET) and isset($_GET['id'])) {
    $id = $_GET['id'];
    $sql = "SELECT * FROM users WHERE id='$id'";
    $user = $db->query($sql)->fetch(PDO::FETCH_ASSOC);

    if (!$user) {
        header('location:./index.php');
    }
} else {
    header('location:./index.php');
}

Kode tersebut kita gunakan untuk memeriksa parameter id yang dikirimkan melalui url seperti ini

update_user.php?id=1

jika parameter di url kosong atau bukan id maka halaman akan dialihkan ke index.php.

kemudian, id yang dikirimkan di dalam url juga akan kita gunakan untuk memeriksa apakah ada data user yang di maksud, jika user tidak ada maka halaman juga akan dialihkan ke index.php.

Baik kita akan lanjutkan.

Modifikasi form html yang ada sehingga menjadi seperti ini

<form class="mt-4" method="POST">
  <div class="mb-3">
    <label for="name" class="form-label">Nama</label>
    <input
      name="name"
      type="text"
      class="form-control"
      id="name"
      value="<?= $user['name'] ?>"
    />
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input
      name="email"
      type="email"
      class="form-control"
      id="email"
      value="<?= $user['email'] ?>"
    />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input name="password" type="password" class="form-control" id="password" />
  </div>
  <input type="hidden" name="id" value="<?= $user['id'] ?>" />
  <button type="submit" class="btn btn-success">Simpan</button>
</form>

Perhatikan bagian input dari form kita. Kita menambahkan input baru dengan type hidden yang akan digunakan untuk menyimpan id user yang ingin kita perbarui. Input dengan type hidden tidak akan dilihat oleh pengguna karena tidak akan di tampilkan pada form.

Selain itu, kita juga menambahkan atribut baru pada tiap inputan kita bernama value yang kita isi dengan data user yang ada dalam variabel $user

<input
  name="name"
  type="text"
  class="form-control"
  id="name"
  value="<?= $user['name'] ?>"
/>

atribut value digunakan untuk mengisi input dengan data, dan disini kita isi dengan data awal user sebelum diperbarui.

Lalu kenapa tidak ditambahkan pada input untuk password?

kamu pasti ingat bahwa kita mengubah password yang dibuat menjadi karakter acak (hashed password). Sehingga password ini tidak dapat langsung kita tampilkan untuk menghindari password ter-hash dua kali. Oleh karena itu, kita hanya akan mengupdate password jika kolom password kita isi dengan password yang baru.

Setelah memodifikasi form, kita akan memodifikasi script/kode php yang digunakan untuk proses menyimpan data.

Hapus baris kode untuk memvalidasi inputan password karena kita akan membolehkan input password ini kosong.

hapus kode ini

if ($password == "") {
    $errors['password'] = "Password tidak boleh kosong";
}

Pergi ke bagian atas, modifikasi blok kode if (!$errors){} sehingga menjadi seperti ini:

if (!$errors) {

    $id = $_POST['id'];

    // cek duplikasi data
    if (isEmailAvailable($db, $email, $id)) {
        // cek jika user merubah password
        if ($password != "") {
            // hash password untuk keamanan
            $password = password_hash($password, PASSWORD_DEFAULT);
            // buat sql
            $sql = "UPDATE users SET name='$name', email='$email', password='$password' WHERE id='$id'";
        } else {
            $sql = "UPDATE users SET name='$name', email='$email' WHERE id='$id'";
        }
        // simpan data
        if ($db->exec($sql)) {
            // berhasil
            echo "<script>alert('Data berhasil diperbarui');</script>";
            echo "<meta http-equiv='refresh' content='0; url=index.php'>";
        } else {
            // gagal
            echo "<script>alert('Gagal memperbarui data');</script>";
            echo "<meta http-equiv='refresh' content='0; url=index.php'>";
        }
    } else {
        $errors['email'] = "Email " . $email . " sudah digunakan";
    }
}

Pada blok kode tersebut kita melakukan beberapa perubahan sebagai berikut:

Menambahkan variabel $id yang menyimpan data id yang dikirimkan melalui form,
Mengirimkan satu parameter tambahan yaitu id user ke dalam fungsi isEmailAvailable(),
Memeriksa apakah input password tidak kosong. Jika input password tidak kosong maka password akan di hash seperti sebelumnya dan menyertakan perubahan password pada string $sql. jika input pasword kosong, maka tidak perlu menyertakan perubahan password pada string $sql.

Setelah itu pergi ke bagian atas dan modifikasi fungsi isEmailAvailable() menjadi seperti ini:

function isEmailAvailable($db, $email, $userID)
{
    $sql = "SELECT email FROM users WHERE id='$userID'";
    $oldEmail = $db->query($sql)->fetch(PDO::FETCH_ASSOC)['email'];

    $sql = "SELECT email FROM users WHERE email='$email'";
    $checkUser = $db->query($sql)->fetch(PDO::FETCH_ASSOC);

    return ($checkUser == null or $email == $oldEmail);
}

Pada fungsi isEmailAvailable() kita melakukan beberapa perubahan sebagai berikut:

Menambahkan satu parameter baru yaitu $userID,
Mengambil email user berdasarkan id yang ada di parameter $userID kemudian menyimpannya ke dalam variabel $oldEmail,
Mengambil data user berdasarkan email yang ada di parameter $email kemudian menyimpannya ke dalam variabel $checkUser,
Membandingkan apakah data user kosong atau email yang diinputkan sama dengan email lama user, dan hasil perbandingan tersebut dikirim sebagai nilai kembalian (return value) fungsi isEmailAvailable()

Akhirnya keseluruhan kode dalam file update_user.php akan menjadi seperti ini:

<?php
include('./template/head.php');
include('./config/database_connection.php');

function isEmailAvailable($db, $email, $userID)
{
    $sql = "SELECT email FROM users WHERE id='$userID'";
    $oldEmail = $db->query($sql)->fetch(PDO::FETCH_ASSOC)['email'];

    $sql = "SELECT email FROM users WHERE email='$email'";
    $checkUser = $db->query($sql)->fetch(PDO::FETCH_ASSOC);

    return ($checkUser == null or $email == $oldEmail);
}

$errors = []; // varioabel yang akan digunakan untuk menampung pesan error validasi

if (!empty($_POST)) {

    // ambil data yang dikirimkan melalui form dan simpan ke dalam variabel
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    // lakukan validasi untuk tiap inputan, jika inputan kosong maka tambahkan pesan error kedalam variabel $errors
    if ($name == "") {
        $errors['name'] = "Nama tidak boleh kosong";
    }
    if ($email == "") {
        $errors['email'] = "Email tidak boleh kosong";
    }

    // cek jika tidak ada error maka lakukan proses penyimpanan data
    if (!$errors) {

        $id = $_POST['id'];

        // cek duplikasi data
        if (isEmailAvailable($db, $email, $id)) {
            // cek jika user merubah password
            if ($password != "") {
                // hash password untuk keamanan
                $password = password_hash($password, PASSWORD_DEFAULT);
                // buat sql
                $sql = "UPDATE users SET name='$name', email='$email', password='$password' WHERE id='$id'";
            } else {
                $sql = "UPDATE users SET name='$name', email='$email' WHERE id='$id'";
            }
            // simpan data
            if ($db->exec($sql)) {
                // berhasil
                echo "<script>alert('Data berhasil diperbarui');</script>";
                echo "<meta http-equiv='refresh' content='0; url=index.php'>";
            } else {
                // gagal
                echo "<script>alert('Gagal memperbarui data');</script>";
                echo "<meta http-equiv='refresh' content='0; url=index.php'>";
            }
        } else {
            $errors['email'] = "Email " . $email . " sudah digunakan";
        }
    }
}

if (!empty($_GET) and isset($_GET['id'])) {
    $id = $_GET['id'];
    $sql = "SELECT * FROM users WHERE id='$id'";
    $user = $db->query($sql)->fetch(PDO::FETCH_ASSOC);

    if (!$user) {
        header('location:./index.php');
    }
} else {
    header('location:./index.php');
}
?>
<div class="container py-5">
    <h2>Update Data User</h2>
    <?php foreach ($errors as $error) : ?>
        <div class="alert bg-danger" role="alert">
            <?= $error ?>
        </div>
    <?php endforeach; ?>
    <form class="mt-4" method="POST">
        <div class="mb-3">
            <label for="name" class="form-label">Nama</label>
            <input name="name" type="text" class="form-control" id="name" value="<?= $user['name'] ?>">
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input name="email" type="email" class="form-control" id="email" value="<?= $user['email'] ?>">
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input name="password" type="password" class="form-control" id="password">
        </div>
        <input type="hidden" name="id" value="<?= $user['id'] ?>">
        <button type="submit" class="btn btn-success">Simpan</button>
    </form>
</div>

<?php
include('./template/foot.php');
?>

Sekarang kita coba mengupdate salah satu data yang kita miliki. Pergi ke halaman index.php lalu klik update pada salah satu data, maka akan diarahkan ke halaman update_user.php seperti ini:

lakukan beberapa perubahan data kemudian klik simpan, jika berhasil maka data akan diperbarui:

Periksa juga kamu di dalamd database, pastikan semuanya terupdate.

Sip, fitur update data user kita sudah berhasil dibuat. Berikutnya kita akan membuat fitur hapus data.

Hapus data user

Setelah berhasil memperbarui data user, kali ini kita akan membuat fitur untuk menghapus data user.

Buka file delete_user.php, tambahkan kode php berikut ini

<?php
include('./template/head.php');
include('./config/database_connection.php');

if (!empty($_GET) and isset($_GET['id'])) {
    $id = $_GET['id'];
    $sql = "SELECT * FROM users WHERE id='$id'";
    $user = $db->query($sql)->fetch(PDO::FETCH_ASSOC);

    if (!$user) {
        header('location:./index.php');
    }
} else {
    header('location:./index.php');
}

if (!empty($_POST)) {
    $id = $_POST['id'];
    $sql = "DELETE FROM users WHERE id='$id'";
    // hapus data
    if ($db->exec($sql)) {
        // berhasil
        echo "<script>alert('Data berhasil Dihapus');</script>";
        echo "<meta http-equiv='refresh' content='0; url=index.php'>";
    } else {
        // gagal
        echo "<script>alert('Gagal menghapus data');</script>";
        echo "<meta http-equiv='refresh' content='0; url=index.php'>";
    }
}
?>

pada kode tersebut seperti biasa kita menyematkan file head.php dan database_connection.php, kemudian kita memeriksa apakah parameter id telah dikirimkan melalui url dan apakah terdapat user sesuai dengan id yang ada di url. data user dimasukkan ke dalam variabel $user. Kemudian di blok kode berikutnya kita memeriksa apakah ada data id yang di kirimkan melalui form. jika id dikirimkan maka kita akan membuat sql string untuk menghapus data di dalam database berdasarkan id yang dikirimkan tersebut.

Setelah proses penghapusan dilakukan akan muncul alert yang menunjukkan apa kah data berhasil dihapus ata gagal. kemudian kita akan dialihkan ke halaman index.php.

Jangan lupa menutup script php dengan ?> karena berikutnya kita akan menuliskan kode html.

Tambahkan kode html berikut di bagian bawah dari script php:

<div class="container py-4 text-center">
  <h4>Hapus data user berikut ini?</h4>
  <br />
  <div>
    Nama:
    <?= $user['name'] ?>
  </div>
  <div>
    Email:
    <?= $user['email'] ?>
  </div>
  <br />
  <form method="POST">
    <input type="hidden" name="id" value="<?= $user['id'] ?>" />
    <button type="submit" class="btn btn-success">OK</button>
    <a href="./index.php" class="btn btn-danger">BATAL</a>
  </form>
</div>

Pada kode diatas kita menampilkan data user yang ingin dihapus sebagai pertanyaan konfirmasi. Kemudian kita juga membuat form yang memiliki satu input dengan type hidden yang berfungsi untuk mengirimkan id user untuk dihapus. Variabel $user disini kita dapatkan dari script php yang sebelumnya kita buat. Jika tombol OK ditekan maka form akan disubmit, jika tombol BATAL ditekan maka halaman akan dikembalikan ke index.php.

Terakhir, tambahkan kode php berikut ini pada baris paling bawah.

<?php
include('./template/foot.php');
?>

jangan lupa untuk menutup blok kode php dengan ?> karena di dalam file juga terdapat kode html.

Akhirnya keseluruhan kode dalam file delete_user.php akan menjadi seperti ini:

<?php
include('./template/head.php');
include('./config/database_connection.php');

if (!empty($_GET) and isset($_GET['id'])) {
    $id = $_GET['id'];
    $sql = "SELECT * FROM users WHERE id='$id'";
    $user = $db->query($sql)->fetch(PDO::FETCH_ASSOC);

    if (!$user) {
        header('location:./index.php');
    }
} else {
    header('location:./index.php');
}

if (!empty($_POST)) {
    $id = $_POST['id'];
    $sql = "DELETE FROM users WHERE id='$id'";
    // hapus data
    if ($db->exec($sql)) {
        // berhasil
        echo "<script>alert('Data berhasil Dihapus');</script>";
        echo "<meta http-equiv='refresh' content='0; url=index.php'>";
    } else {
        // gagal
        echo "<script>alert('Gagal menghapus data');</script>";
        echo "<meta http-equiv='refresh' content='0; url=index.php'>";
    }
}
?>

<div class="container py-4 text-center">
    <h4>Hapus data user berikut ini?</h4>
    <br>
    <div>Nama: <?= $user['name'] ?></div>
    <div>Email: <?= $user['email'] ?></div>
    <br>
    <form method="POST">
        <input type="hidden" name="id" value="<?= $user['id'] ?>">
        <button type="submit" class="btn btn-success">OK</button>
        <a href="./index.php" class="btn btn-danger">BATAL</a>
    </form>
</div>

<?php
include('./template/foot.php');
?>

Proses kode kita sudah selesai saatnya kita uji coba.

Pergi ke halaman index.php dan klik delete pada salah satu data yang ada di dalam tabel. Maka kita akan dialihkan ke halaman delete_user.php seperti ini:

Klik OK maka data akan dihapus, dan muncul alert seperti ini:

Klik OK lagi maka daftar user di halaman index.php telah diperbarui menjadi seperti ini:

Pastikan data di dalam database juga terhapus

Baik, sampai sejauh ini aplikasi web CRUD sedehana kita sudah selesai dibuat. Tentunya masih banyak bagian yang harus diperbaiki, untuk itu cobalah untuk modifikasi dan explore project yang kamu buat. Uji coba dan cari semua kesalahan yang mungkin muncul, pahami error yang terjadi karena proses trial and error itulah yang akan mengasah kemampuan memprogram kita.