Cara menggunakan cara membuat crud php

Pada postingan kali ini, kita akan membahas sebuah tutorial sederhana yaitu membuat sebuah aplikasi CRUD (Create, Read, Update, Delete) dalam bahasa pemrograman PHP dengan mengunakan database MySQL dan sedikit sentuhan bootstrap 4 untuk tampilan front-endnya. Aplikasi CRUD banyak digunakan dalam mengolah data, baik itu untuk input data, tambah data, edit data atau hapus data yang terhubung langsung dengan database. Aplikasi CRUD banyak digunakan untuk aplikasi-aplikasi dinamis dan Istilah CRUD mungkin sudah tidak asing bagi back-end developer atau full-stack developer, bagi yang belum paham, kita akan menjelaskan sedikit apa itu CRUD.

Penjelasan singkat CRUD

CRUD adalah singkatan dari Create, Read, Update & Delete yang memiliki fungsi masing-masing untuk diimplementasikan kedalam aplikasi berbasis data. Keempat poin tersebut tidak bisa dipisahkan, karena akan berhubungan langsung dengan database yang saling melengkapi satu sama lain dalam mengolah basis data.

CRUD merupakan fasilitator dalam tampilan front-end, yang memiliki fungsi untuk merubah, menambah, menghapus sebuah data, yang artinya CRUD berjalan pada sisi server. Istilah CRUD pertama kali dicetus oleh James Martin pada 1983.

Membuat CRUD sederhana dengan PHP

Setelah kita tahu apa itu CRUD secara fundamental, sekarang kita akan membuat sebuah aplikasi CRUD sederhana dengan menggunakan PHP, MySQL dan Bootstrap dengan tema mengolah data customer.

Pada tutorial ini, kita akan melihat bagaimana CRUD itu bekerja dan kita akan memberikan penjelasan step by stepnya.

1. Persiapan

Beberapa komponen yang dibutuhkan diantaranya, code editor, web browser dan web server (untuk local bisa memakai XAMPP, Laragon atau lainnya).

Pada contoh kali ini, kita akan menjalankan aplikasi CRUD didalam web server local XAMPP. Buat folder baru didalam htdocs, beri nama tutorial_crud, lalu buat beberapa file yang dibutuhkan seperti:

• add.php
• add_process.php
• database_conn.php
• delete.php
• edit.php
• edit_process.php
• index.php

2. Membuat table baru dalam database MySQL

Setelah komponen sudah siapkan, langkah selanjutnya adalah kita membuat table baru dalam database phpmyadmin XAMPP. Buat database baru dengan menginputkan beberapa baris source code SQL dibawah ini:

CREATE TABLE `customers` (
  `customer_id` INT(11) NOT NULL AUTO_INCREMENT,
  `firstname` VARCHAR(255) NULL DEFAULT NULL,
  `lastname` VARCHAR(255) NULL DEFAULT NULL,
  `email` VARCHAR(255) NULL DEFAULT NULL,
  `created` DATETIME NULL DEFAULT NULL,
  PRIMARY KEY (`customer_id`)
) COLLATE = 'latin1_swedish_ci' ENGINE = InnoDB AUTO_INCREMENT = 1;

Setelah table database sudah berhasil terbuat, kita akan masuk ke step selanjutnya yaitu menghubungkan database kedalam aplikasi PHP.

3. Menghubungkan Database Dalam Aplikasi

Agar database yang sudah dibuat dapat digunakan dalam aplikasi, diperlukan beberapa source code tambahan untuk mengaktifkan fungsi ini. Hal ini bertujuan untuk menghubungkan database kedalam aplikasi PHP dengan memasukan beberapa informasi yang dibutuhkan seperti hostname, database username, database password, nama table pada database.

Silahkan ikuti source code dibawah ini didalam file database_conn.php yang sudah dibuat.

<?php

// database_conn.php

$hostname = 'localhost'; // hostname
$database_username = 'tutorial_crud';  // database username
$database_password = '1234';  // database password
$database_name = 'tutorial_crud'; // database name

// koneksi ke database
$db_connect = mysqli_connect($hostname, $database_username, $database_password, $database_name);
if(!$db_connect){
  die('Tidak dapat terhubung ke database:' .mysql_error());
}

Untuk nama database, nama table, database password, silahkan sesuaikan saja dengan yang kalian buat.

4. Membaca data dan menampilkan data

Pada langkah selanjutnya, kita akan membuat sebuah tampilan awal atau home pada index.php yang telah dibuat, file ini berfungsi untuk membaca dan menampilkan beberapa informasi terkait data yang akan kita tampilkan, serta tombol tambahan seperti edit atau delete untuk memudahkan dalam proses update data dan menghapus data. Untuk merapihkan tampilan table HTML dan tombol, kita mengunakan Bootstrap 4.

Kode didalam file ini akan mengambil semua data dari database MySQL kemudian di tampilkan kedalam front-end dengan menggunakan metode while dan array associative agar mempermudah. Silahkan ikuti source code dibawah ini:

<?php

// Membaca dan menampilkan data customer ke front-end
include 'database_conn.php';
    
$query = "select * from customers limit 200";
$result = mysqli_query($db_connect, $query); ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CRUD Sederhana Dengan mengunakan PHP, MySQL dan Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <?php include 'message.php';  ?>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="col-md-12">
            <div class="float-left mb-4">
                <h2>Customers List</h2>
            </div>            
            <div class="float-right">
                <a href="add.php" class="btn btn-success">Tambah customer baru</a>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nama depan</th>
                        <th scope="col">Nama terakhir</th>
                        <th scope="col">Email</th>
                        <th scope="col">Bergabung</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                <!-- Fetch data customer dengan array assosiative -->
                <?php if ($result->num_rows > 0): ?>
                <?php while($customer_data = mysqli_fetch_assoc($result)): ?>
                    <tr>
                        <th scope="row"><?php echo $customer_data['customer_id'];?></th>
                        <td><?php echo $customer_data['firstname'];?></td>
                        <td><?php echo $customer_data['lastname'];?></td>
                        <td><?php echo $customer_data['email'];?></td>
                        <td><?php $new_date = new DateTime($customer_data['created']); echo $new_date->format('Y-m-d');?></td>
                        <td> 
                            <a href="edit.php?customer_id=<?php echo $customer_data['customer_id'];?>" class="btn btn-primary">Edit</a>
                            <a href="delete.php?customer_id=<?php echo $customer_data['customer_id'];?>" class="btn btn-danger">Hapus</a>
                        </td>
                    </tr>
                <?php endwhile; ?>
                <?php else: ?>
                <tr>
                    <td colspan="3" rowspan="1" headers="">Tidak ada data ditemukan!</td>
                </tr>
                <?php endif; ?>
                <?php mysqli_free_result($result); ?>
              </tbody>
            </table>
        </div>
    </div>        
</div>
</body>
</html>

Setelah kita sukses untuk membaca dan menampilkan data kedalam tampilan utama, langkah penting selanjutnya adalah menambahkan fungsi lain yaitu menambah data, edit data dan menghapus data. Kita mulai dulu dengan menambah data.

Tampilan halaman utama

5. Tambah data

Pada langkah ini, kita akan membuat fungsi baru yaitu menambah data, untuk menjalankan fungsi ini, dibutuhkan beberapa komponen seperti front-end dan proses pada sisi server. Front-end ini berfungsi untuk membuat form dan mengambil semua isi data didalamnya seperti firstname, lastname dan email, kemudian dilanjutkan ke dalam file add_process.php yang berjalan pada sisi server untuk memproses data yang diambil tadi kedalam database.

Kalian bisa ikuti code dibawah ini kedalam file yang telah kalian buat tadi yang bernama add.php untuk menampilkan form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tambah data - CRUD Sederhana Dengan mengunakan PHP, MySQL dan Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header mb-4">
                    <h2>Tambah customer baru</h2>
                </div>
                <form action="add_process.php" method="post">
                    <div class="form-group">
                        <label>Nama depan</label>
                        <input type="text" name="firstname" class="form-control" required="">
                    </div>                        
                    <div class="form-group">
                        <label>Nama terakhir</label>
                        <input type="text" name="lastname" class="form-control" required="">
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" name="email" class="form-control" required="">
                    </div>
                    <input type="submit" class="btn btn-primary" name="submit" value="save">
                </form>
            </div>
        </div>        
    </div>
</body>
</html>

Selanjutnya copy paste source code dibawah ini kedalam file add_process.php untuk memproses data dan menambahkannya kedalam database. Untuk tanggal sendiri, isi dari variabel $created akan otomatis terbuat, sesuai dengan kapan user menginputkan data didalam form.

<?php

// add_process.php

include "database_conn.php";

if (count($_POST) > 0) {
    $firstname = $_POST["firstname"];
    $lastname = $_POST["lastname"];
    $email = $_POST["email"];
    $created = date("Y-m-d");

    $query = "INSERT INTO customers (firstname, lastname, email, created) VALUES ('$firstname', '$lastname', '$email', '$created')";

    if (mysqli_query($db_connect, $query)) {
        $message = 1;
    } else {
        $message = 4;
    }
}

header("Location: index.php?message=" . $message . "");

Tampilan halaman tambah data baru

Kita lanjut ke proses selanjutnya yaitu edit atau update data.

6. Edit atau update data

Fungsi ini dibutuhkan untuk merubah data yang ada didalam database, jika kalian mungkin sudah mencoba dengan menambahkan beberapa data kedalam database dan ingin dirubah informasinya, fungsi ini sangat dibutuhkan. Dengan adanya fungsi edit ini, kalian tidak perlu repot untuk membuka phpmyadmin secara manual.

Untuk menjalankan fungsi ini, dibutuhkan 2 komponen yaitu front-end untuk membuat form dan proses pada sisi server. Front-end diperlukan untuk menampilkan data didalam form yang otomatis terisi sesuai dengan data yang ada. Kemudian perubahan data didalam form tersebut, akan diproses melalui file edit_process.php untuk melakukan update data yang ada didalam database

Untuk menampilkan form dan membaca data yang berada didalam database, kalian bisa ikuti source code dibawah ini kedalam file yang sudah dibuat yaitu edit.php

<?php

include 'database_conn.php';
$query = "SELECT * FROM customers WHERE customer_id='" . $_GET["customer_id"] . "'"; // Fetch data from the table customers using id
$result = mysqli_query($db_connect, $query);
$customer = mysqli_fetch_assoc($result); ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit customer - CRUD Sederhana Dengan mengunakan PHP, MySQL dan Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
  <div class="page-header mb-4">
      <h2>Edit customer</h2>
  </div>
    <div class="row">
        <div class="col-md-12">
            <form action="edit_process.php" method="POST">
              <input type="hidden" name="customer_id" value="<?php echo $_GET["customer_id"]; ?>" class="form-control" required="">
              <div class="form-group">
                <label for="exampleInputEmail1">Nama depan</label>
                <input type="text" name="firstname" class="form-control" value="<?php echo $customer['firstname']; ?>" required="">
              </div>                
              <div class="form-group">
                <label for="exampleInputEmail1">Nama terakhir</label>
                <input type="text" name="lastname" class="form-control" value="<?php echo $customer['lastname']; ?>" required="">
              </div>              
              <div class="form-group">
                <label for="exampleInputEmail1">Email</label>
                <input type="email" name="email" class="form-control" value="<?php echo $customer['email']; ?>" required="">
              </div>
              <button type="submit" class="btn btn-primary" value="submit">Submit</button>
            </form>
        </div>
    </div>        
</div>
</body>
</html>

Dan selanjutnya yang penting adalah proses pada sisi server, file ini dibutuhkan untuk mengupdate data atau merubah data kedalam database. Namun untuk melakukan fungsi update ini diperlukan satu parameter untuk menandai data mana yang akan dirubah agar tidak rancu. Dalam contoh, kita menggunakan parameter customer_id sebagai penanda data. Untuk mengaktifkan fungsi edit, silahkan copy paste source code pada edit_process.php

<?php

// edit_process.php

include "database_conn.php";

if (count($_POST) > 0) {
    // ambil id dari customer sebagai penanda
    $customer_id = $_POST["customer_id"];

    $firstname = $_POST["firstname"];
    $lastname = $_POST["lastname"];
    $email = $_POST["email"];

    $query =
        "UPDATE customers set customer_id='" .
        $customer_id .
        "', firstname='" .
        $firstname .
        "', lastname='" .
        $lastname .
        "', email='" .
        $email .
        "' WHERE customer_id='" .
        $customer_id .
        "'"; // update form data from the database

    if (mysqli_query($db_connect, $query)) {
        $message = 2;
    } else {
        $message = 4;
    }
}
header("Location: index.php?message=" . $message . "");

Tampilan halaman form edit atau update data

Setelah membaca data, tambah data, dan update data sudah selesai, kita akan lanjut kedalam proses terakhir yaitu delete data.

7. Menghapus data

Fungsi yang terakhir adalah fungsi delete, dimana fungsi ini untuk menghapus data yang terdapat didalam database sesuai dengan keinginan kita. Untuk menjalankan fitur delete ini, perlu tambahan source code didalam file delete.php yang sudah kalian buat tadi.

Tambahan source codenya untuk file delete.php:

<?php

// delete.php

include "database_conn.php";

$customer_id = $_GET["customer_id"];

$query = "DELETE FROM customers WHERE customer_id='" . $customer_id . "'";
if (mysqli_query($db_connect, $query)) {
    $message = 3;
} else {
    $message = 4;
}
header("Location: index.php?message=" . $message . "");

Sama dengan proses update data, fungsi delete ini akan menghapus data sesuai dengan parameter yang digunakan agar tidak rancu, kita mengunakan parameter customer_id sebagai penanda data mana yang akan dihapus.

Tampilan halaman ketika data berhasil dihapus

8. Membuat fitur tambahan dengan mengunakan alert

Kita akan membuat fitur tambahan agar aplikasi CRUD lebih sempurna dengan menambahkan alert atau pesan peringatan. Fitur tambahan ini berfungsi untuk menampilkan pesan ketika proses CRUD berjalan, apakah berhasil atau tidak. Untuk mengaktifkan fitur alert ini, buat file baru yang bernama message.php dan copy paste source code dibawah:

<?php

// message.php

$messages = [
    1 => "Data berhasil ditambahkan",
    2 => "Data berhasil diupdate",
    3 => "Data berhasil didelete",
    4 => "MySQL Database Error, silahkan check query yang dimasukan",
];
$messages_id = isset($_GET["message"]) ? (int) $_GET["message"] : 0;

if ($messages_id != 0 && in_array($messages_id, [1, 2, 3, 4])) {
    echo $messages[$messages_id];
} else {
    echo "CRUD Sederhana Dengan mengunakan PHP, MySQL dan Bootstrap (CatatanWeb.com)";
}

Setelah semua komponen sudah siap dan source code sudah berada didalam filenya masing-masing, silahkan buka browser dan jalankan aplikasinya.

Tampilan halaman ketika data sukses ditambahkan

Kesimpulan

Demikian tutorial singkat membuat CRUD dengan PHP, MySQL dan Bootstrap. Dalam mengolah data dalam sebuah aplikasi, CRUD merupakan komponen penting yang dibutuhkan untuk menjalankan aplikasi dinamis berbasis data. CRUD berfungsi untuk menghubungkan antara database dengan tampilan antarmuka dengan fungsi-fungsi tertentu sesuai dengan keinginan kita, seperti menghapus, merubah, menambah, membaca data.

Langkah langkah pembuatan CRUD?

Apa itu CRUD pada php?

Apa itu CRUD di HTML?

Mengapa diperlukan CRUD dalam pengembangan aplikasi web?