[TUTORIAL] Membuat REST API Sederhana menggunakan PHP (Project Case: Aplikasi Mahasiswa dan E-Commerce)

Assalamu‘alaikum wr. wb.

Halo gais! Jika sebelumnya pernah membahas mengenai Perbedaan REST API dan RESTful API, bagaimana jika kita akan membuat Aplikasi Web REST API Sederhana menggunakan PHP? Kali ini kita akan memcoba untuk 

Sumber (Referensi) : Developer.Adobe.com, Phppot.com, Komputasi.Wordpress.com, Wpwebinfotech.com (Blog), dan Code.Tutsplus.com

A

Selamat datang pada panduan bertahap untuk membangun REST API sederhana menggunakan PHP dan MySQL. Di era sekarang, akses internet dilakukan melalui beragam perangkat, mulai dari komputer desktop, laptop, tablet, hingga ponsel pintar. Perkembangan teknologi web modern tidak lagi terbatas pada pembuatan situs web saja, tetapi juga mencakup aplikasi Android, aplikasi iOS, serta kebutuhan komunikasi dan pertukaran data antarserver aplikasi.

Bagi Pemula, proses membangun REST API sederhana mungkin terasa cukup rumit. Namun, dengan panduan yang jelas dan disusun oleh para ahli, mempelajari pengembangan REST API menjadi jauh lebih mudah dan terarah. Dalam tutorial lengkap ini, Anda akan mempelajari langkah demi langkah cara membuat REST API sederhana menggunakan PHP dan MySQL.

Di era web modern saat ini, REST API banyak digunakan untuk mengakses dan mengelola data. Dengan menerapkan REST API pada aplikasi web, Anda dapat dengan mudah mengintegrasikannya dengan berbagai framework front-end modern. Dalam panduan ini, Anda akan dipandu untuk membangun sebuah aplikasi demo yang menampilkan daftar pengguna dari database MySQL melalui sebuah Endpoint REST API.

Untuk membaca selengkapnya mengenai Perbedaan REST API dan RESTful API, silakan lihat di sini.

APLIKASI MAHASISWA

A

Sebelum memulai untuk membuat Aplikasi Mahasiswa dengan REST API PHP, buatlah Struktur Folder seperti ini :

📁 mahasiswa
├── 📁 class
   ├── Mahasiswa.php
├── 📁 nilai
   ├── getdata.php
   ├── simpan.php
   ├── update.php
   ├── delete.php
   ├── getxml.php
   ├── mahasiswa.xml
├── 📁 includes
   ├── header.php
   ├── footer.php
   ├── nav.php
├── deleteForm.php
├── displaydata.sql
├── displayxml.php
├── index.php
├── mahasiswa.sql
├── setup.php
├── tambah.php

Proyek REST API Mahasiswa ini dibangun menggunakan PHP native dan MySQL dengan tujuan untuk :

• Mengelola data Mahasiswa
• Menyimpan Mata Kuliah yang diambil
• Menampilkan Nilai Mata Kuliah
• Menyajikan data dalam format JSON dan XML

Sistem menerapkan konsep :

• REST API
• CRUD (Create, Read, Update, Delete)
• Pemisahan Logic dan Tampilan
• Reusability kode

A. Membuat Class Aplikasi

File ini adalah jantung sistem, berfungsi sebagai :

• Model data mahasiswa
• Pengolah seluruh query CRUD
• Penghubung antara Endpoint dan Database
• Penghasil response JSON dan XML

Pertama, marilah kita buat terlebih dahulu File Class PHP Mahasiswa.php, yang berisikan :

<?php
class Mahasiswa{
    //tambah koneksi db
    private $host = 'localhost';
    private $user = 'root';
    private $pass = '';
    private $database = "mahasiswa";
    private $tblNIlai = 'tbl_nilai';
    private $dbConnect = null;
    public function __construct(){
        if(!$this->dbConnect){
            $conn = new mysqli($this->host, $this->user, $this->pass, $this->database);
            if($conn->connect_error){
                die("Error failed to connect to MySQL: " . $conn->connect_error);
            }else{
                $this->dbConnect = $conn;
            }
        }
        // Ensure the table exists. If it doesn't, create it.
        $createSql = "CREATE TABLE IF NOT EXISTS `" . $this->tblNIlai . "` (
            `id` int(10) NOT NULL AUTO_INCREMENT,
            `nama` varchar(100) DEFAULT NULL,
            `matakuliah` varchar(100) DEFAULT NULL,
            `nilai` int(10) NOT NULL,
            PRIMARY KEY (`id`)
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4";
        if (!$this->dbConnect->query($createSql)) {
            // If table creation fails, stop and show a clear message.
            die('Failed to ensure table exists: ' . $this->dbConnect->error);
        }
    }
    public function getData($id = null){
        if($id){
            $sqlQuery = "SELECT * FROM tbl_nilai WHERE id = " . intval($id);
        } else{
            $sqlQuery = "SELECT * FROM tbl_nilai";
        }
        $result = mysqli_query($this->dbConnect, $sqlQuery);
        if(!$result){
            die('Error in query: '. mysqli_error($this->dbConnect));
        }
        $mhsData = array();
        while($mhsRecord = mysqli_fetch_array($result)){
            $mhsData[] = $mhsRecord;
        }
        header('Content-Type:application/json');
        echo json_encode($mhsData);
    }
    public function tambahNilai($nilai){
        $nama = $nilai['nama'];
        $mataKuliah = $nilai['mata_kuliah'];
        $nilai = $nilai['nilai'];
        $sqlQuery = "
            INSERT INTO ".$this->tblNIlai." 
            SET nama='".$nama."', matakuliah='".$mataKuliah."', nilai='".$nilai."'";
        if(mysqli_query($this->dbConnect, $sqlQuery)){
            $pesan = "Nilai berhasil ditambahkan.";
            $status = 1;
        } else{
            $pesan = "Gagal menambahkan nilai.";
            $status = 0;
        }
        $nilaiResponse = array(
            'status' => $status,
            'status_pesan' => $pesan
        );
        header('Content-Type:application/json');
        echo json_encode($nilaiResponse);
    }
    public function updateNilai($nilai){
        $id = $nilai['id'];
        $nama = $nilai['nama'];
        $mataKuliah = $nilai['mata_kuliah'];
        $nilai = $nilai['nilai'];
        $sqlQuery = "
            UPDATE ".$this->tblNIlai." 
            SET nama='".$nama."', matakuliah='".$mataKuliah."', nilai='".$nilai."'
            WHERE id = ".$id;
        if(mysqli_query($this->dbConnect, $sqlQuery)){
            $pesan = "Nilai berhasil diupdate.";
            $status = 1;
        } else{
            $pesan = "Gagal mengupdate nilai.";
            $status = 0;
        }
        $nilaiResponse = array(
            'status' => $status,
            'status_pesan' => $pesan
        );
        header('Content-Type:application/json');
        echo json_encode($nilaiResponse);
    }
    public function deleteNilai($nilai){
        $id = $nilai['id'];
        $sqlQuery = "
            DELETE FROM ".$this->tblNIlai." 
            WHERE id = ".$id;
        if(mysqli_query($this->dbConnect, $sqlQuery)){
            $pesan = "Nilai berhasil dihapus.";
            $status = 1;
        } else{
            $pesan = "Gagal menghapus nilai.";
            $status = 0;
        }
        $nilaiResponse = array(
            'status' => $status,
            'status_pesan' => $pesan
        );
        header('Content-Type:application/json');
        echo json_encode($nilaiResponse);
    }
    public function getXml() {
       
        $sqlQuery = "select * from tbl_nilai";
        $result = mysqli_query($this->dbConnect, $sqlQuery);
       
        //var_dump($result);
        if(!$result){
            die('Error in query: '. mysqli_error($this->dbConnect));
        }
        $nialiArray = array();
        while( $result_array  = mysqli_fetch_assoc($result) ) {
             array_push($nialiArray, $result_array);
        }
            if(count($nialiArray)){
                $this->createXMLfile($nialiArray);
            }
    /* free result set */
    $result->free();
    }
    
    function createXMLfile($nilaArray){
        $filePath = 'mahasiswa.xml';
        $dom     = new DOMDocument('1.0', 'utf-8');
        $root      = $dom->createElement('mahasiswa');
        for($i=0; $i<count($nilaArray); $i++){
            $id        =  $nilaArray[$i]['id'];
            $nama = htmlspecialchars($nilaArray[$i]['nama']);
            $matakuliah    =  $nilaArray[$i]['matakuliah'];
            $nilai    =  $nilaArray[$i]['nilai'];
            $score = $dom->createElement('score');
            $score->setAttribute('id', $id);
           
            $nama     = $dom->createElement('nama', $nama);
            $score->appendChild($nama);
            $matakuliah     = $dom->createElement('matakuliah', $matakuliah);
            $score->appendChild($matakuliah);
            $nilai     = $dom->createElement('nilai', $nilai);
            $score->appendChild($nilai);
           
            $root->appendChild($score);
        }
        $dom->appendChild($root);
        $dom->save($filePath);
    }
}
?>

1. Properti Class

Biasanya, Properti Class ini adalah tujuannya untuk mendeklarasikan dari sebuah Properti.

private $host = "localhost";
private $user = "root";
private $pass = "";
private $database = "mahasiswa";
private $conn;
private $table = "tbl_nilai";

Penjelasan :

• Properti ini menyimpan konfigurasi database
• $conn digunakan untuk menyimpan koneksi MySQL
• $table menunjuk ke tabel yang menyimpan Data Mahasiswa.

Tujuannya adalah :

Agar seluruh method CRUD menggunakan satu koneksi yang sama, sehingga lebih efisien dan konsisten.

2. Constructor (__construct)

public function __construct() {
    $this->conn = new mysqli(
        $this->host,
        $this->user,
        $this->pass,
        $this->database
    );

    if ($this->conn->connect_error) {
        die("Koneksi database gagal");
    }
}

Langkah-langkah eksekusi :

• Endpoint memanggil class Mahasiswa
• Constructor otomatis dijalankan
• Sistem membuat koneksi ke MySQL
• Jika gagal → proses dihentikan

Alasan koneksi diletakkan di constructor :

• Supaya setiap method CRUD langsung siap digunakan
• Tidak perlu membuat koneksi berulang

3. Method getData() – READ (JSON)

public function getData() {
    $query = "SELECT * FROM $this->table";
    $result = mysqli_query($this->conn, $query);

    $data = [];
    while ($row = mysqli_fetch_assoc($result)) {
        $data[] = $row;
    }

    header("Content-Type: application/json");
    echo json_encode($data);
}

Langkah kerja :

• Menjalankan query SELECT
• Mengambil data dari database
• Mengonversi data menjadi array PHP
• Mengirim response dalam format JSON

Contoh Output :

[
  {
    "id": "1",
    "nama": "Andi",
    "matakuliah": "Basis Data",
    "nilai": "90"
  }
]

4. Method tambahNilai() – CREATE

public function tambahNilai($nilai){
    $nama = $nilai['nama'];
    $mataKuliah = $nilai['mata_kuliah'];
    $nilai = $nilai['nilai'];
    $sqlQuery = "
        INSERT INTO ".$this->tblNIlai." 
        SET nama='".$nama."', matakuliah='".$mataKuliah."', nilai='".$nilai."'";

    if(mysqli_query($this->dbConnect, $sqlQuery)){
        $pesan = "Nilai berhasil ditambahkan.";
        $status = 1;
    } else{
        $pesan = "Gagal menambahkan nilai.";
        $status = 0;
    }
    $nilaiResponse = array(
        'status' => $status,
        'status_pesan' => $pesan
    );
    header('Content-Type:application/json');
    echo json_encode($nilaiResponse);
}

Langkah kerja :

• Data diterima dari endpoint
• Query INSERT disusun
• Data disimpan ke database
• Status keberhasilan dikirim ke client

5. Method updateNilai() – UPDATE

public function updateNilai($nilai){
    $id = $nilai['id'];
    $nama = $nilai['nama'];
    $mataKuliah = $nilai['mata_kuliah'];
    $nilai = $nilai['nilai'];
    $sqlQuery = "
        UPDATE ".$this->tblNIlai." 
        SET nama='".$nama."', matakuliah='".$mataKuliah."', nilai='".$nilai."'
        WHERE id = ".$id;

    if(mysqli_query($this->dbConnect, $sqlQuery)){
        $pesan = "Nilai berhasil diupdate.";
        $status = 1;
    } else{
        $pesan = "Gagal mengupdate nilai.";
        $status = 0;
    }
    $nilaiResponse = array(
        'status' => $status,
        'status_pesan' => $pesan
    );
    header('Content-Type:application/json');
    echo json_encode($nilaiResponse);
}

Langkah kerja :

• Endpoint mengirim ID dan data baru
• Query UPDATE dijalankan
• Data di database diperbarui
• Response dikirim

6. Method hapusNilai() – DELETE

    public function updateNilai($nilai){
        $id = $nilai['id'];
        $nama = $nilai['nama'];
        $mataKuliah = $nilai['mata_kuliah'];
        $nilai = $nilai['nilai'];
        $sqlQuery = "
            UPDATE ".$this->tblNIlai." 
            SET nama='".$nama."', matakuliah='".$mataKuliah."', nilai='".$nilai."'
            WHERE id = ".$id;

        if(mysqli_query($this->dbConnect, $sqlQuery)){
            $pesan = "Nilai berhasil diupdate.";
            $status = 1;
        } else{
            $pesan = "Gagal mengupdate nilai.";
            $status = 0;
        }
        $nilaiResponse = array(
            'status' => $status,
            'status_pesan' => $pesan
        );
        header('Content-Type:application/json');
        echo json_encode($nilaiResponse);
    }

Langkah kerja :

• Endpoint mengirim ID
• Query DELETE dijalankan
• Data dihapus dari database
• Status dikirim ke client

7. Method getXML() – READ (XML)

public function getXML() {
    header("Content-Type: text/xml");
    echo "<?xml version='1.0'?>";
    echo "<mahasiswa>";

    $query = "SELECT * FROM $this->table";
    $result = mysqli_query($this->conn, $query);

    while ($row = mysqli_fetch_assoc($result)) {
        echo "<data>";
        echo "<nama>{$row['nama']}</nama>";
        echo "<matakuliah>{$row['matakuliah']}</matakuliah>";
        echo "<nilai>{$row['nilai']}</nilai>";
        echo "</data>";
    }

    echo "</mahasiswa>";
}

Penting :

XML dibentuk secara manual oleh PHP, bukan otomatis.

B. Endpoint REST API

Folder ini berisi file yang menerima Request dari Client.

1. Read Data (getdata.php)

Tujuannya, untuk mendapatkan semua data menggunakan API metode HTTP GET, dimasukkan ke dalam associative array, lalu dienkripsi menjadi string JSON menggunakan json_encode().

Inilah isi File dari getdata.php :

<?php
$requestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Mahasiswa.php');
$api = new Mahasiswa();
switch($requestMethod) {
    case 'GET':
        $idNilai = '';
        $nama = '';
        $mataKuliah = '';
        $nilai = '';
        if(isset($_GET['id'])) {
            $idNilai = $_GET['id'];
        }
        if(isset($_GET['nama'])) {
            $nama = $_GET['nama'];
        }
        if(isset($_GET['mata_kuliah'])) {
            $mataKuliah = $_GET['mata_kuliah'];
        }
        if(isset($_GET['nilai'])) {
            $nilai = $_GET['nilai'];
        }
        $api->getData($idNilai, $nama, $mataKuliah, $nilai);
        break;
    default:
        header("HTTP/1.0 405 Method Not Allowed");
        break;
}
?>

Alur :

• Client mengakses URL
• File ini dipanggil
• Class Mahasiswa di-load
• Method getData() dijalankan

2. Create Data (simpan.php)

Menggunakan metode HTTP POST. Data dikirimkan melalui body request. Sistem akan melakukan sanitasi input (idealnya menggunakan mysqli_real_escape_string) sebelum disimpan ke database untuk mencegah SQL Injection.

Tujuannya, untuk mendapatkan semua data menggunakan API metode GET. Inilah isi File dari simpan.php :

<?php
$resquestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Mahasiswa.php');
$api = new Mahasiswa();
switch($resquestMethod){
    case 'POST':
        $api->tambahNilai($_POST);
        break;
    default:
        header("HTTP/1.0 405 Method Not Allowed");
        break;
}
?>

Alur :

• Data dikirim via POST
• Data diteruskan ke tambahNilai()
• Database diperbarui
• JSON response dikirim

3. update.php

Tujuannya, untuk memperbarui semua Data Nilai Mahasiswa, dan sebagai penghubung dari logkia ke File Mahasiswa.php.

Inilah isi File dari update.php :

<?php
$resquestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Mahasiswa.php');
$api = new Mahasiswa();
switch($resquestMethod){
    case 'POST':
        $api->updateNilai($_POST);
        break;
    default:
        header("HTTP/1.0 405 Method Not Allowed");
        break;
}
?>

4. delete.php

Tujuannya, untuk memperbarui semua Data Nilai Mahasiswa, dan sebagai penghubung dari logkia ke File Mahasiswa.php.

Inilah isi File dari delete.php :

<?php
$resquestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Mahasiswa.php');
$api = new Mahasiswa();
switch($resquestMethod){
    case 'POST':
        $api->updateNilai($_POST);
        break;
    default:
        header("HTTP/1.0 405 Method Not Allowed");
        break;
}
?>

5. Format Alternatif XML (getxml.php)

Meskipun JSON lebih populer, XML tetap disediakan untuk menunjukkan fleksibilitas API. Penulisan XML dilakukan secara manual dengan menyusun tag-tag layaknya dokumen HTML namun dengan struktur data yang ketat.

Isi File dari getxml.php :

<?php
$requestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Mahasiswa.php');
$api = new Mahasiswa();
$xml = $api->getXml();
echo $xml;
?>

C. Integrasi & Komponen UI

Pada bagian ini tujuannya digunakan untuk menghindar dari Duplikasi HTML. Meskipun inti dari proyek ini adalah API, File di root folder seperti index.php dan tambah.php berfungsi sebagai Client Internal.

• HTML & CSS: Digunakan untuk membungkus data yang diterima dari API agar enak dipandang manusia.
• Modularitas UI: Folder includes/ memastikan elemen yang berulang (Header/Footer) tidak perlu ditulis berkali-kali. Ini disebut prinsip DRY (Don't Repeat Yourself).

1. Halaman Utama (index.php)

Pertama, kita buat terlebih dahulu File index.php sebagai Halaman Utama-nya :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/nav.php');
include('includes/header.php');
include('class/Mahasiswa.php');
// Koneksi ke database
$koneksi = new mysqli("localhost", "root", "", "kampus");
// Cek koneksi
if ($koneksi->connect_error) {
    die("Koneksi gagal: " . $koneksi->connect_error);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jadwal</title>
</head>
<body>
    <div class="container">
    <br />
<?php
    // Ambil data dari database
    // $sql = "SELECT * FROM nilai";
    // $result = $koneksi->query($sql);
    $url = 'http://mahasiswa:8081/nilai/getdata.php';
    $client = curl_init($url);
    curl_setopt($client, CURLOPT_RETURNTRANSFER, 1);
    $response = curl_exec($client);
    curl_close($client);
    $result = json_decode($response);
    
    echo "<table border=1 class='table'>";
    echo "<thead class='thead-light'>";
    echo "<tr><th>Nama</th><th>Mata Kuliah</th><th>Nilai</th></tr>";
    echo "</thead>";
    echo "<tbody>";
    
    if ($result && is_array($result) && count($result) > 0) {
        foreach ($result as $item) {
            echo "<tr>";
            echo "<td>".$item->nama."</td>";
            echo "<td>".$item->matakuliah."</td>";
            echo "<td>".$item->nilai."</td>";
            echo "</tr>";
        }
    } else {
        echo "<tr><td colspan='3'>Tidak ada data</td></tr>";
    }
    
    echo "</tbody>";
    echo "</table>";
?>
    <br />
    <br />
    <a href="http://mahasiswa:8081/tambah.php">Tambah Nilai</a>
    <!--a href="http://mahasiswa:8081/edit.php">Edit Nilai</a>
    <a href="http://mahasiswa:8081/deleteForm.php">Hapus Nilai</a-->
    <a href="http://mahasiswa:8081/displaydata.php">Tampilkan Data Nilai</a>
    <a href="http://mahasiswa:8081/displayxml.php">Tampilkan Data XML</a>
    </div>
</body>
</html>
<?php include('includes/footer.php'); ?>

Tampilan :

2. Menampilkan Nilai (displaydata.php)

Setelah itu, maka kita akan membuat File Halaman displaydata.php untuk menampilkan semua nilai :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('includes/nav.php');
include('class/Mahasiswa.php');
?>
<div class="container">
    <h1>Tampilkan Nilai </h1>
    <?php
    // $url = 'http://mahasiswa:8081/nilai/getdata.php?id=1';
    $url = 'http://mahasiswa:8081/nilai/getdata.php';
    $client = curl_init($url);
    curl_setopt($client, CURLOPT_RETURNTRANSFER, 1);
    $response = curl_exec($client);
    curl_close($client);
    $result = json_decode($response);
    
    echo "<table border=1>";
    echo "<tr><th>Nama</th><th>Mata Kuliah</th><th>Nilai</th><th>Edit</th><th>Delete</th></tr>";
    
    if ($result && is_array($result) && count($result) > 0) {
        foreach ($result as $item) {
            echo "<tr>";
            echo "<td>".$item->nama."</td>";
            echo "<td>".$item->matakuliah."</td>";
            echo "<td>".$item->nilai."</td>";
            echo "<td><a href='edit.php?id=".$item->id."'>Edit</a></td>";
            echo "<td><a href='deleteForm.php?id=".$item->id."'>Delete</a></td>";
            echo "</tr>";
        }
    } else {
        echo "<tr><td colspan='5'>Tidak ada data</td></tr>";
    }
    
    echo "</table>";
    ?>
    <a href="http://mahasiswa:8081/nilai/mahasiswa.xml">Tampilkan Data XML</a>
</div>
<?php include('includes/footer.php'); ?>

Tampilan :

3. Menampilkan File XML (displayxml.php)

Kemudian, buatlah File Halaman displayxml.php untuk menampilkan File XML :

<?php
//header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('includes/nav.php');
?>
<div class="container">
<h1>Tampilkan XML</h1>
<?php
$xmlurl = 'http://mahasiswa:8081/nilai/getxml.php';
$xml_data = simplexml_load_file('http://mahasiswa:8081/nilai/mahasiswa.xml') or
die("Error: Object Creation failure");
foreach ($xml_data->children() as $data)
{
    //display each sub element in xml file
    //echo "ID : ", $data->id . "<br> ";
    echo "Nama : ", $data->nama . "<br> ";
    echo "Matakuliah : ", $data->matakuliah . "<br> ";
    echo "Nilai : ", $data->nilai . "<br>";
    echo "------------------------------------";
    echo "<br>";
}
?>
</div>
<?php include('includes/footer.php');?>

Tampilan :

4. Menampilkan XML (mahasiswa.xml)

Pada File ini, hanyalah menampilkan Data dalam bentuk XML yang telah dibuat oleh File displayxml.php.

Tampilan :

5. Menambahkan Data (tambah.php)

Jika sudah, buatlah File Halaman tambah.php untuk menambahkan Data Mahasiswa :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/nav.php');
include('includes/header.php');
include('class/Mahasiswa.php');
?>
<div class = "container">
    <h1>Tambah Nilai </h1>
    <form action="http://mahasiswa:8081/nilai/simpan.php" method="post">
        <div class="mb-3">
            <label for="exampleInputEmail" class="form-label">Nama</label>
            <input type="text" class="form-control" id="exampleInputEmail" name="nama" aria-describedny="emailHelp">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Mata Kuliah</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="mata_kuliah">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Nilai</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="nilai">
        </div>
        <div class="mt-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>
<?php include('includes/footer.php'); ?>

Tampilan :

Pada Tampilan UI tersebut, terdiri dari Input Type seperti "Nama", "Mata Kuliah", dan "Nilai" untuk memasukkan Nama Mahasiswa, Mata Kuliah, dan Nilai. Setelah User menekan Tombol "Submit", maka akan muncul Layar seperti ini :

Akan menuju File simpan.php dengan muncul Pesan "Nilai berhasil ditambahkan".

6. Edit Data (edit.php)

Kemudian, buatlah File Halaman edit.php untuk mengubah Data Mahasiswa :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/nav.php');
include('includes/header.php');
include('class/Mahasiswa.php');
if((isset($_GET['id'])) && (is_numeric($_GET['id']))) {
    $id = $_GET['id'];
} elseif ((isset($_POST['id'])) && (is_numeric($_POST['id']))) {
    $id = $_POST['id'];
}
?>
<div class="container">
    <h1>Edit Nilai </h1>
    <form action="http://mahasiswa:8081/nilai/update.php" method="post">
        <input type="hidden" name="id" value="<?php echo $id; ?>"> 
        <div class="mb-3">
            <label for="exampleInputEmail" class="form-label">Nama</label>
            <input type="text" class="form-control" id="exampleInputEmail" name="nama" aria-describedny="emailHelp">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Mata Kuliah</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="mata_kuliah">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Nilai</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="nilai">
        </div>
        <div class="mt-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
    <br />
    <br />
</div>
<?php include('includes/footer.php'); ?>

Tampilan :

Pada Tampilan UI tersebut, hampir sama seperti tambah.php. Dan juga terdiri dari Input Type seperti "Nama", "Mata Kuliah", dan "Nilai" untuk memasukkan (mengubah) Nama Mahasiswa, Mata Kuliah, dan Nilai. Setelah User menekan Tombol "Submit", maka akan muncul Layar seperti ini :

Akan menuju File update.php dengan muncul Pesan "Nilai berhasil diupdate".

7. Hapus Data (deleteForm.php)

Kemudian, buatlah File Halaman deleteForm.php untuk menghapus Data Mahasiswa :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/nav.php');
include('includes/header.php');
include('class/Mahasiswa.php');
if((isset($_GET['id'])) && (is_numeric($_GET['id']))) {
    $id = $_GET['id'];
} elseif ((isset($_POST['id'])) && (is_numeric($_POST['id']))) {
    $id = $_POST['id'];
}
?>
<div class="container">
    <h1>Hapus Nilai </h1>
    <form action="http://mahasiswa:8081/nilai/delete.php" method="post">
        <input type="hidden" name="id" value="<?php echo $id; ?>"> 
        <div class="mt-3">
            <button type="submit" class="btn btn-primary">Submit</button>
            <a href="displaydata.php" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
<br />
<?php include('includes/footer.php'); ?>

Tampilan :

Pada Tampilan deleteForm.php di atas, hanya muncul Tombol "Submit" untuk menghapus Data, dan Tombol "Cancel" untuk membatalkan Penghapusan Data. Setelah User menekan Tombol "Submit", maka akan muncul Layar seperti ini :

Akan menuju File delete.php dengan muncul Pesan "Nilai berhasil dihapus".

D. Database dan Setup

Pada bagian ini adalah Komponen Backend yang menghubungkan antara Server dan Database.

1. Database SQL (mahasiswa.sql)

File mahasiswa.sql merupakan berkas yang berisi struktur basis data (database schema) yang digunakan oleh sistem REST API Mahasiswa. File ini berfungsi sebagai blueprint database, yaitu pedoman untuk membuat database beserta tabel-tabel yang diperlukan agar aplikasi dapat berjalan dengan baik. Di dalam file ini biasanya terdapat perintah SQL seperti CREATE DATABASE, USE database, dan CREATE TABLE yang mendefinisikan kolom-kolom untuk menyimpan data mahasiswa, mata kuliah, serta nilai mata kuliah. Dengan adanya file mahasiswa.sql, proses instalasi sistem menjadi lebih terstruktur karena pengembang atau pengguna cukup mengimpor file ini ke MySQL (melalui phpMyAdmin atau command line) tanpa harus membuat tabel secara manual satu per satu.

Selain itu, file mahasiswa.sql berperan penting dalam menjaga konsistensi struktur data antara kode program dan database. Semua query CRUD (Create, Read, Update, Delete) yang dijalankan oleh class Mahasiswa.php sangat bergantung pada struktur tabel yang didefinisikan dalam file ini. Jika struktur tabel tidak sesuai, misalnya nama kolom berbeda atau tipe data tidak tepat, maka REST API tidak akan dapat berjalan dengan benar. Oleh karena itu, mahasiswa.sql menjadi fondasi utama sistem, karena tanpa database yang sesuai, seluruh alur REST API—mulai dari pengambilan data JSON hingga pembentukan XML—tidak dapat dilakukan.

Inilah Isi dari File Database mahasiswa.sql :

-- phpMyAdmin SQL Dump
-- version 5.1.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Aug 06, 2024 at 10:17 AM
-- Server version: 10.4.22-MariaDB
-- PHP Version: 8.0.12
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `mahasiswa`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_nilai`
--
CREATE TABLE `tbl_nilai` (
  `id` int(10) NOT NULL,
  `nama` varchar(30) DEFAULT NULL,
  `matakuliah` varchar(30) DEFAULT NULL,
  `nilai` int(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `tbl_nilai`
--
INSERT INTO `tbl_nilai` (`id`, `nama`, `matakuliah`, `nilai`) VALUES
(1, 'Inzaghi', 'AI', 100),
(2, 'Tomi', 'Web Programming', 90),
(3, 'Izzumi Poshaf', 'Pengantar TI', 95),
(6, 'Budi Setiadi', 'IoT', 85);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_nilai`
--
ALTER TABLE `tbl_nilai`
  ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_nilai`
--
ALTER TABLE `tbl_nilai`
  MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Dan inilah Query SQL untuk membuat Tabel baru :

CREATE TABLE tbl_nilai (
  id int(10) NOT NULL,
  nama varchar(30) DEFAULT NULL,
  matakuliah varchar(30) DEFAULT NULL,
  nilai int(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Kueri SQL untuk mengisi Data :

INSERT INTO tbl_nilai (id, nama, matakuliah, nilai) VALUES
(1, 'Inzaghi', 'AI', 100),
(2, 'Tomi', 'Web Programming', 90),
(3, 'Izzumi Poshaf', 'Pengantar TI', 95),
(6, 'Budi Setiadi', 'IoT', 85);

Sehingga, jika kita buka lagi Laman phpMyAdmin, maka Database yang telah kita buat tadi telah muncul di sini :

Sedangkan, inilah isi dari Tabel pada Database tbl_nilai :

A

2. File setup.php

File setup.php merupakan file pendukung yang digunakan untuk melakukan pengujian awal terhadap koneksi database sebelum sistem REST API dijalankan secara penuh. File ini biasanya berisi konfigurasi koneksi database, seperti nama host, username, password, dan nama database, lalu mencoba melakukan koneksi menggunakan fungsi atau library MySQL (misalnya mysqli). Tujuan utama dari file ini adalah untuk memastikan bahwa lingkungan server sudah siap, database dapat diakses, serta konfigurasi koneksi yang digunakan di dalam class Mahasiswa.php sudah benar. Dengan adanya setup.php, pengembang dapat dengan cepat mendeteksi kesalahan konfigurasi tanpa harus menelusuri error yang muncul saat API dipanggil.

Inilah isi dari File setup.php :

<?php
// Database connection
$host = 'localhost';
$user = 'root';
$pass = '';
$database = 'mahasiswa';
$conn = new mysqli($host, $user, $pass, $database);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
// Create table if it doesn't exist
$sql = "CREATE TABLE IF NOT EXISTS tbl_nilai (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama VARCHAR(100) NOT NULL,
    matakuliah VARCHAR(100) NOT NULL,
    nilai VARCHAR(10) NOT NULL
)";
if ($conn->query($sql) === TRUE) {
    echo "Table 'tbl_nilai' created successfully or already exists!";
} else {
    echo "Error creating table: " . $conn->error;
}
$conn->close();
?>

Selain sebagai alat pengujian, setup.php juga berfungsi sebagai media debugging awal dalam proses pengembangan. Jika koneksi database gagal, file ini akan menampilkan pesan kesalahan secara langsung, sehingga pengembang dapat mengetahui apakah masalah berasal dari server database, kredensial yang salah, atau database yang belum dibuat. Perlu ditekankan bahwa setup.php bukan bagian dari REST API dan tidak digunakan oleh client, melainkan hanya digunakan oleh pengembang atau administrator sistem. Setelah sistem dipastikan berjalan dengan baik, file ini biasanya tidak diakses lagi oleh pengguna akhir, namun tetap disimpan sebagai alat bantu untuk maintenance dan troubleshooting di kemudian hari.

3. File setup_database.php

File setup_database.php merupakan file otomatisasi pembuatan database dan tabel yang digunakan pada tahap awal pengembangan sistem REST API Mahasiswa. Berbeda dengan file mahasiswa.sql yang bersifat statis dan harus diimpor secara manual, file ini menggunakan kode PHP untuk menjalankan perintah SQL secara langsung, sehingga database dan tabel dapat dibuat hanya dengan mengakses file ini melalui browser. Dengan demikian, setup_database.php berfungsi sebagai installer database berbasis PHP, yang sangat membantu dalam proses setup awal, terutama bagi pengguna yang belum familiar dengan pengelolaan database secara manual.

Inilah isi dari File setup_database.php :

<?php
// Database credentials
$host = 'localhost';
$user = 'root';
$pass = '';
$database = 'mahasiswa';
// Create connection
$conn = new mysqli($host, $user, $pass);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
// Create database if it doesn't exist
$sql = "CREATE DATABASE IF NOT EXISTS " . $database;
if ($conn->query($sql) === TRUE) {
    echo "Database created successfully or already exists.<br>";
} else {
    echo "Error creating database: " . $conn->error . "<br>";
}
// Select the database
$conn->select_db($database);
// Create table
$sql = "CREATE TABLE IF NOT EXISTS tbl_nilai (
    id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    nama VARCHAR(100) NOT NULL,
    matakuliah VARCHAR(100) NOT NULL,
    nilai INT(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4";
if ($conn->query($sql) === TRUE) {
    echo "Table 'tbl_nilai' created successfully or already exists!<br>";
    echo "<strong>Database setup completed! You can delete this file now.</strong>";
} else {
    echo "Error creating table: " . $conn->error;
}
$conn->close();
?>

Hasil Akhir :

APLIKASI E-COMMERCE

A

Selanjutnya, kita akan membuat Aplikasi E-Commerce Sederhana. Proyek REST API E-Commerce ini dirancang menggunakan pendekatan PHP Native dengan kombinasi paradigma Object-Oriented Programming dan procedural untuk menjaga keseimbangan antara struktur dan kesederhanaan implementasi. Sistem menggunakan MySQL dengan engine InnoDB sebagai basis penyimpanan data karena mendukung transaksi dan integritas referensial yang lebih baik. Pola REST diterapkan dengan memisahkan endpoint berdasarkan metode operasi seperti GET, POST, UPDATE, dan DELETE dalam file terpisah di dalam folder produk/, sehingga setiap file memiliki tanggung jawab yang jelas terhadap satu jenis operasi. Selain itu, sistem mendukung interoperabilitas data melalui ekspor XML yang dihasilkan secara dinamis dari database dan disimpan sebagai file onlineshop.xml.

Secara arsitektural, sistem ini dibagi menjadi beberapa lapisan. Presentation Layer terdiri dari file seperti index.php, add.php, dan edit.php yang menangani interaksi antarmuka pengguna. API Layer berada pada folder produk/ yang berfungsi sebagai endpoint REST untuk pemrosesan data. Business Logic Layer terpusat pada class/Onlineshop.php, yang menjadi inti pengolahan data dan eksekusi query. Data Layer diwakili oleh struktur database yang didefinisikan dalam onlineshop.sql. Terakhir, Interoperability Layer diwujudkan melalui pembentukan file XML yang memungkinkan sistem lain mengakses data dalam format standar.

Sebelum memulai untuk membuat Aplikasi Mahasiswa dengan REST API PHP, buatlah Struktur Folder seperti ini :

📁 mahasiswa
├── 📁 class
   ├── Mahasiswa.php
├── 📁 nilai
   ├── getdata.php
   ├── simpan.php
   ├── update.php
   ├── delete.php
   ├── getxml.php
   ├── mahasiswa.xml
├── 📁 includes
   ├── header.php
   ├── footer.php
   ├── nav.php
├── deleteForm.php
├── displaydata.sql
├── displayxml.php
├── index.php
├── mahasiswa.sql
├── setup.php
├── tambah.php

Proyek ini menggunakan pendekatan :

• PHP Native (Object-Oriented + Procedural Hybrid)
• MySQL (InnoDB)
• REST-style endpoint (GET, POST, PUT, DELETE via file terpisah)
• XML Interoperability (Export data ke XML)
• Layering sederhana :
• Presentation Layer → index.php, add.php, edit.php
• API Layer → folder produk/
• Business Logic Layer → class/Onlineshop.php
• Data Layer → MySQL (onlineshop.sql)
• Interoperability Layer → onlineshop.xml

A. Database Layer (onlineshop.sql)

File onlineshop.sql berfungsi sebagai blueprint atau cetak biru struktur basis data yang digunakan dalam sistem e-commerce ini. Di dalamnya didefinisikan pembuatan database beserta tabel utama yaitu tbl_produk. Struktur tabel dirancang untuk menyimpan informasi penting produk seperti nama, harga, stok, deskripsi, gambar, serta waktu pembuatan data. Kolom id menggunakan AUTO_INCREMENT untuk menjamin setiap produk memiliki identitas unik secara otomatis. Tipe data DECIMAL(10,2) digunakan untuk harga agar menjaga presisi numerik dalam transaksi keuangan. Engine InnoDB dipilih karena mendukung konsistensi transaksi dan performa yang stabil. Sementara itu, charset utf8mb4 memastikan kompatibilitas dengan berbagai karakter internasional, termasuk simbol dan emoji.

Dengan adanya file SQL ini, proses deployment menjadi sistematis karena database dapat direplikasi dengan struktur yang sama di berbagai lingkungan server.

1. onlineshop.sql

File ini adalah Blueprint Database. Ia mendefinisikan :

• Nama database
• Struktur tabel produk
• Primary key
• Engine
• Charset

Contoh Struktur Kueri SQL :

CREATE DATABASE IF NOT EXISTS ecommerce;
USE ecommerce;

CREATE TABLE IF NOT EXISTS tbl_produk (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama_produk VARCHAR(150) NOT NULL,
    harga DECIMAL(10,2) NOT NULL,
    stok INT NOT NULL,
    deskripsi TEXT,
    gambar VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Penjelasan Teknis :

• AUTO_INCREMENT → memastikan ID unik
• DECIMAL(10,2) → presisi harga
• InnoDB → mendukung transaksi dan foreign key
• utf8mb4 → kompatibel emoji & karakter multibyte

Sehingga, jika kita buka lagi Laman phpMyAdmin, maka Database yang telah kita buat tadi telah muncul di sini :

Sedangkan, inilah isi dari Tabel pada Database produk :

A

B. Logic Layer

File Onlineshop.php merupakan pusat logika bisnis dalam sistem ini. Di dalamnya terdapat class yang mengenkapsulasi seluruh operasi CRUD terhadap tabel produk. Class ini menerima koneksi database melalui constructor, kemudian menyimpan referensi koneksi tersebut sebagai properti privat sehingga hanya dapat diakses melalui method internal class.

File ini adalah Core Class yang menangani seluruh operasi CRUD. Pertama, marilah kita buat terlebih dahulu File Class PHP Onlineshop.php, yang berisikan :

<?php
class Onlineshop {
    // Tambah koneksi db
    private $host = 'localhost';
    private $user = 'root';
    private $pass = '';
    private $database = "onlineshop";
    private $products = 'produk';
    private $dbConnect = null;
    public function __construct(){
        if($this->dbConnect === null){
            $conn = new mysqli($this->host, $this->user, $this->pass, $this->database);
            if($conn->connect_error){
                die("Error failed to connect to MySQL: " . $conn->connect_error);
            } else {
                $this->dbConnect = $conn;
            }
        }
    }
    public function getData($id = null) {
        $sqlQuery = "SELECT * FROM " . $this->products;
        if($id) {
            $sqlQuery .= " WHERE id = " . $id;
        }
        $result = mysqli_query($this->dbConnect, $sqlQuery);
        if(!$result) {
            die('Error in query: '. mysqli_error($this->dbConnect));
        }
        $productsData = array();
        while($productRecord = mysqli_fetch_array($result)){
            $productsData[] = $productRecord;
        }
        header('Content-Type:application/json');
        echo json_encode($productsData);
    }
    public function tambahNilai($product) {
        $nama = $product['nama'];
        $deskripsi = $product['deskripsi'];
        $harga = $product['harga'];
        $gambar = $product['gambar'];
        
        $sqlQuery = "
            INSERT INTO ".$this->products." 
            (nama, deskripsi, harga, gambar)
            VALUES ('".$nama."', '".$deskripsi."', '".$harga."', '".$gambar."')";
        if(mysqli_query($this->dbConnect, $sqlQuery)){
            $pesan = "Produk berhasil ditambahkan.";
            $status = 1;
        } else{
            $pesan = "Gagal menambahkan produk.";
            $status = 0;
        }
        $productResponse = array(
            'status' => $status,
            'status_pesan' => $pesan
        );
        header('Content-Type:application/json');
        echo json_encode($productResponse);
    }
    public function updateNilai($product) {
        $id = $product['id'];
        $nama = $product['nama'];
        $deskripsi = $product['deskripsi'];
        $harga = $product['harga'];
        $gambar = $product['gambar'];
        
        $sqlQuery = "
            UPDATE ".$this->products." 
            SET nama='".$nama."', deskripsi='".$deskripsi."', harga='".$harga."', gambar='".$gambar."'
            WHERE id = ".$id;
        if(mysqli_query($this->dbConnect, $sqlQuery)){
            $pesan = "Produk berhasil diupdate.";
            $status = 1;
        } else{
            $pesan = "Gagal mengupdate produk.";
            $status = 0;
        }
        $productResponse = array(
            'status' => $status,
            'status_pesan' => $pesan
        );
        header('Content-Type:application/json');
        echo json_encode($productResponse);
    }
    public function deleteNilai($product) {
        $id = $product['id'];
        $sqlQuery = "
            DELETE FROM ".$this->products." 
            WHERE id = ".$id;
        if(mysqli_query($this->dbConnect, $sqlQuery)){
            $pesan = "Produk berhasil dihapus.";
            $status = 1;
        } else{
            $pesan = "Gagal menghapus produk.";
            $status = 0;
        }
        $productResponse = array(
            'status' => $status,
            'status_pesan' => $pesan
        );
        header('Content-Type:application/json');
        echo json_encode($productResponse);
    }
    public function getXml() {
        $query = "SELECT * FROM produk";
        $result = $this->dbConnect->query($query);
        $xml = new SimpleXMLElement('<produkList/>');
        while ($row = $result->fetch_assoc()) {
            $produk = $xml->addChild('produk');
            $produk->addChild('id', $row['id']);
            $produk->addChild('nama', $row['nama']);
            $produk->addChild('deskripsi', $row['deskripsi']);
            $produk->addChild('harga', $row['harga']);
            $produk->addChild('gambar', $row['gambar']);
        }
        $xml->asXML('../produk/onlineshop.xml');
    }
    
    function createXMLfile($productArray){
        $filePath = 'onlineshop.xml';
        $dom = new DOMDocument('1.0', 'utf-8');
        $root = $dom->createElement('onlineshop');
        
        for($i=0; $i<count($productArray); $i++){
            $id = $productArray[$i]['id'];
            $nama = htmlspecialchars($productArray[$i]['nama']);
            $deskripsi = htmlspecialchars($productArray[$i]['deskripsi']);
            $harga = $productArray[$i]['harga'];
            $gambar = htmlspecialchars($productArray[$i]['gambar']);
            
            $productNode = $dom->createElement('product');
            $productNode->setAttribute('id', $id);
            $nameNode = $dom->createElement('nama', $nama);
            $productNode->appendChild($nameNode);
            $descNode = $dom->createElement('deskripsi', $deskripsi);
            $productNode->appendChild($descNode);
            $priceNode = $dom->createElement('harga', $harga);
            $productNode->appendChild($priceNode);
            $imageNode = $dom->createElement('gambar', $gambar);
            $productNode->appendChild($imageNode);
            $root->appendChild($productNode);
        }
        $dom->appendChild($root);
        $dom->save($filePath);
    }
    
    public function tambahProduk($data) {
        $stmt = $this->dbConnect->prepare("INSERT INTO produk (nama, deskripsi, harga, gambar) VALUES (?, ?, ?, ?)");
        if($stmt) {
            $stmt->bind_param("ssds", $data['nama'], $data['deskripsi'], $data['harga'], $data['gambar']);
            $stmt->execute();
            $stmt->close();
            // Update XML file after adding a product
            $this->getXml();
        }
    }
    public function updateProduk($data) {
        $stmt = $this->dbConnect->prepare("UPDATE produk SET nama=?, deskripsi=?, harga=?, gambar=? WHERE id=?");
        if($stmt !== false) {
            $stmt->bind_param("ssdsi", $data['nama'], $data['deskripsi'], $data['harga'], $data['gambar'], $data['id']);
            $stmt->execute();
            $stmt->close();
            // Update XML file after updating a product
            $this->getXml();
        }
    }
    public function deleteProduk($id) {
        $stmt = $this->dbConnect->prepare("DELETE FROM produk WHERE id=?");
        if($stmt !== false) {
            $stmt->bind_param("i", $id);
            $stmt->execute();
            $stmt->close();
            // Update XML file after deleting a product
            $this->getXml();
        }
    }
}
?>

Pada arsitektur aplikasi web, Database Layer berfungsi sebagai abstraction layer yang menjembatani Business Logic dengan sistem penyimpanan data. Dalam implementasi ini, class Onlineshop tidak hanya berfungsi sebagai model data, tetapi juga sebagai data access object (DAO) karena secara langsung mengelola koneksi MySQL dan eksekusi query. Koneksi database dibuat di dalam constructor menggunakan mysqli, sehingga setiap kali objek class dipanggil, sistem memastikan koneksi aktif dan siap digunakan. Dengan adanya properti seperti $host, $user, $pass, $database, dan $products, konfigurasi database menjadi terenkapsulasi dalam satu tempat.

Struktur ini membuat aplikasi tidak perlu menuliskan koneksi database berulang kali di berbagai file endpoint. Semua file seperti getdata.php, save.php, update.php, dan delete.php cukup memanggil method dari class ini. Secara arsitektural, pendekatan ini meningkatkan cohesion dan mengurangi coupling antar file.

1. Properti Class (Koneksi Database)

Biasanya, Properti Class ini adalah tujuannya untuk mendeklarasikan dari sebuah Properti.

private $host = 'localhost';
private $user = 'root';
private $pass = '';
private $database = "onlineshop";
private $products = 'produk';
private $dbConnect = null;

Penjelasan :

• Properti ini menyimpan konfigurasi database
• $conn digunakan untuk menyimpan koneksi MySQL
• $products menunjuk ke tabel yang menyimpan Data Produk

Tujuannya adalah :

Agar seluruh method CRUD menggunakan satu koneksi yang sama, sehingga lebih efisien dan konsisten.

2. Constructor (__construct)

public function __construct(){
    if(!$this->dbConnect){
        $conn = new mysqli($this->host, $this->user, $this->pass, $this->database);
        if($conn->connect_error){
            die("Error failed to connect to MySQL: " . $conn->connect_error);
        } else {
            $this->dbConnect = $conn;
        }
    }
}

Langkah-langkah eksekusi :

• Endpoint memanggil class Mahasiswa
• Constructor otomatis dijalankan
• Sistem membuat koneksi ke MySQL
• Jika gagal → proses dihentikan

Alasan koneksi diletakkan di constructor :

• Supaya setiap method CRUD langsung siap digunakan
• Tidak perlu membuat koneksi berulang

3. Operasi Read (getData)

Method getData($id = null) digunakan untuk membaca data dari tabel produk. Jika parameter $id diberikan, query akan ditambahkan kondisi WHERE id = .... Jika tidak, seluruh data akan diambil.

$sqlQuery = "SELECT * FROM " . $this->products;

Hasil query kemudian diubah menjadi array dan langsung dikembalikan dalam format JSON menggunakan :

header('Content-Type:application/json');
echo json_encode($productsData);

Secara arsitektural, method ini bukan hanya Data Access tetapi juga sekaligus Response Handler karena langsung mencetak JSON ke output.

Inilah Program Lengkapnya :

public function getData($id = null) {
    $sqlQuery = "SELECT * FROM " . $this->products;
    if($id) {
        $sqlQuery .= " WHERE id = " . $id;
    }
    
    $result = mysqli_query($this->dbConnect, $sqlQuery);
    
    if(!$result) {
        die('Error in query: '. mysqli_error($this->dbConnect));
    }
    
    $productsData = array();
    while($productRecord = mysqli_fetch_array($result)){
        $productsData[] = $productRecord;
    }
    header('Content-Type:application/json');
    echo json_encode($productsData);
}

4. Versi Non-Prepared Statement (tambahNilai)

Pendekatan ini menyusun query secara langsung (string concatenation). Secara teknis berfungsi, tetapi memiliki risiko SQL Injection jika input tidak disanitasi.

public function tambahNilai($product) {
    $nama = $product['nama'];
    $deskripsi = $product['deskripsi'];
    $harga = $product['harga'];
    $gambar = $product['gambar'];
    
    $sqlQuery = "
        INSERT INTO ".$this->products." 
        (nama, deskripsi, harga, gambar)
        VALUES ('".$nama."', '".$deskripsi."', '".$harga."', '".$gambar."')";

    if(mysqli_query($this->dbConnect, $sqlQuery)){
        $pesan = "Produk berhasil ditambahkan.";
        $status = 1;
    } else{
        $pesan = "Gagal menambahkan produk.";
        $status = 0;
    }
    $productResponse = array(
        'status' => $status,
        'status_pesan' => $pesan
    );
    header('Content-Type:application/json');
    echo json_encode($productResponse);
}

5. Versi Prepared Statement (tambahProduk)

Pendekatan ini lebih aman karena :

• Menggunakan parameter binding
• Memisahkan struktur query dari data
• Mencegah manipulasi query

Dari perspektif Database Layer modern, versi prepared statement adalah praktik terbaik (best practice).

public function tambahProduk($data) {
    $stmt = $this->dbConnect->prepare("INSERT INTO produk (nama, deskripsi, harga, gambar) VALUES (?, ?, ?, ?)");
    if($stmt) {
        $stmt->bind_param("ssds", $data['nama'], $data['deskripsi'], $data['harga'], $data['gambar']);
        $stmt->execute();
        $stmt->close();

        // Update XML file after adding a product
        $this->getXml();
    }
}

6. Operasi Update

Terdapat 2 (Dua) pendekatan pada Operasi Update, yaitu :

• Versi Raw Query (updateNilai)
• Versi Prepared Statement (updateProduk)

a. Operasi Update Nilai (updateNilai)

Inilah Struktur Kode untuk melakukan Operasi Update Nilai :

public function updateNilai($product) {
    $id = $product['id'];
    $nama = $product['nama'];
    $deskripsi = $product['deskripsi'];
    $harga = $product['harga'];
    $gambar = $product['gambar'];
    
    $sqlQuery = "
        UPDATE ".$this->products." 
        SET nama='".$nama."', deskripsi='".$deskripsi."', harga='".$harga."', gambar='".$gambar."'
        WHERE id = ".$id;

    if(mysqli_query($this->dbConnect, $sqlQuery)){
        $pesan = "Produk berhasil diupdate.";
        $status = 1;
    } else{
        $pesan = "Gagal mengupdate produk.";
        $status = 0;
    }
    $productResponse = array(
        'status' => $status,
        'status_pesan' => $pesan
    );
    header('Content-Type:application/json');
    echo json_encode($productResponse);
}

Pendekatan ini menyusun query secara langsung (string concatenation). Secara teknis berfungsi, tetapi memiliki risiko SQL Injection jika input tidak disanitasi.

b. Operasi Update Produk (updateProduk)

Inilah Struktur Kode untuk melakukan Operasi Update Produk :

public function updateProduk($data) {
    $stmt = $this->dbConnect->prepare("UPDATE produk SET nama=?, deskripsi=?, harga=?, gambar=? WHERE id=?");
    if($stmt !== false) {
        $stmt->bind_param("ssdsi", $data['nama'], $data['deskripsi'], $data['harga'], $data['gambar'], $data['id']);
        $stmt->execute();
        $stmt->close();

        // Update XML file after updating a product
        $this->getXml();
    }
}

Menentukan tipe data :

• s = string
• d = double
• i = integer

Hal ini memastikan integritas tipe data sebelum dikirim ke MySQL.

8. Operasi Delete (deleteProduk)

Method deleteProduk($id) menggunakan prepared statement :

public function deleteProduk($id) {
    $stmt = $this->dbConnect->prepare("DELETE FROM produk WHERE id=?");
    if($stmt !== false) {
        $stmt->bind_param("i", $id);
        $stmt->execute();
        $stmt->close();

        // Update XML file after deleting a product
        $this->getXml();
    }
}

Pendekatan ini memastikan ID diperlakukan sebagai integer dan tidak dapat dimanipulasi sebagai bagian dari query injection.

9. Integrasi Database dengan XML

Database Layer dalam kode ini memiliki fitur tambahan: interoperabilitas XML.

Terdapat dua mekanisme :

a. getXml()

Menggunakan SimpleXMLElement untuk:

• Mengambil semua data produk
• Membuat struktur XML
• Menyimpan file ke ../produk/onlineshop.xml

public function getXml() {
    $query = "SELECT * FROM produk";
    $result = $this->dbConnect->query($query);

    $xml = new SimpleXMLElement('<produkList/>');

    while ($row = $result->fetch_assoc()) {
        $produk = $xml->addChild('produk');
        $produk->addChild('id', $row['id']);
        $produk->addChild('nama', $row['nama']);
        $produk->addChild('deskripsi', $row['deskripsi']);
        $produk->addChild('harga', $row['harga']);
        $produk->addChild('gambar', $row['gambar']);
    }

    $xml->asXML('../produk/onlineshop.xml');
}

b. createXMLfile()

Menggunakan DOMDocument yang lebih fleksibel dan terstruktur.

Setiap kali method :

• tambahProduk()
• updateProduk()
• deleteProduk()

function createXMLfile($productArray){
    $filePath = 'onlineshop.xml';
    $dom = new DOMDocument('1.0', 'utf-8');
    $root = $dom->createElement('onlineshop');
    
    for($i=0; $i<count($productArray); $i++){
        $id = $productArray[$i]['id'];
        $nama = htmlspecialchars($productArray[$i]['nama']);
        $deskripsi = htmlspecialchars($productArray[$i]['deskripsi']);
        $harga = $productArray[$i]['harga'];
        $gambar = htmlspecialchars($productArray[$i]['gambar']);
        
        $productNode = $dom->createElement('product');
        $productNode->setAttribute('id', $id);

        $nameNode = $dom->createElement('nama', $nama);
        $productNode->appendChild($nameNode);

        $descNode = $dom->createElement('deskripsi', $deskripsi);
        $productNode->appendChild($descNode);

        $priceNode = $dom->createElement('harga', $harga);
        $productNode->appendChild($priceNode);

        $imageNode = $dom->createElement('gambar', $gambar);
        $productNode->appendChild($imageNode);

        $root->appendChild($productNode);
    }
    $dom->appendChild($root);
    $dom->save($filePath);
}

Dijalankan, sistem otomatis memanggil $this->getXml(); untuk memperbarui file XML agar sinkron dengan database.

Secara konseptual, ini menciptakan mekanisme sinkronisasi antara relational database dan file-based representation.

C. API Layer

Folder ini adalah implementasi REST Endpoint.

1. getdata.php

File ini adalah Endpoint untuk mengambil semua produk dalam format JSON. Inilah isi dari File getdata.php :

<?php
$requestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Onlineshop.php');
$api = new Onlineshop();
switch($requestMethod) {
    case 'GET':
        $idNilai = '';
        $nama = '';
        $deskripsi = '';
        $harga = '';
        if(isset($_GET['id'])) {
            $idNilai = $_GET['id'];
        }
        if(isset($_GET['nama'])) {
            $nama = $_GET['nama'];
        }
        if(isset($_GET['deskripsi'])) {
            $deskripsi = $_GET['deskripsi'];
        }
        if(isset($_GET['harga'])) {
            $harga = $_GET['harga'];
        }
        if(isset($_GET['gambar'])) {
            $harga = $_GET['gambar'];
        }
        $api->getData($idNilai, $nama, $deskripsi, $harga, $gambar);
        break;
    default:
        header("HTTP/1.0 405 Method Not Allowed");
        break;
}
?>

Alur Eksekusi :

• Client request GET
• Class dipanggil
• Query dijalankan
• Response dikembalikan dalam JSON

2. save.php

File ini berfungsi untuk Menambahkan produk baru. Inilah isi dari File save.php :

<?php
$requestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Onlineshop.php');
$api = new Onlineshop();
if ($requestMethod == 'POST') {
    // Cek apakah semua data yang diperlukan ada
    if (isset($_POST['nama']) && isset($_POST['deskripsi']) && isset($_POST['harga']) && isset($_FILES['gambar'])) {
        $nama = $_POST['nama'];
        $deskripsi = $_POST['deskripsi'];
        $harga = $_POST['harga'];
        $gambar = $_FILES['gambar'];
        // Nama file tujuan
        $targetDir = "../img/";
        $fileName = basename($gambar["name"]);
        $targetFile = $targetDir . $fileName;
        
        // Ensure img directory exists
        if (!is_dir($targetDir)) {
            mkdir($targetDir, 0755, true);
        }
        // Pindahkan file yang diunggah ke direktori tujuan
        if (move_uploaded_file($gambar["tmp_name"], $targetFile)) {
            // Jika file berhasil diunggah, simpan data menggunakan class method
            $imagePath = "img/" . $fileName;
            $data = array(
                'nama' => $nama,
                'deskripsi' => $deskripsi,
                'harga' => $harga,
                'gambar' => $imagePath
            );
            $api->tambahProduk($data);
            // Redirect back to home page
            header("Location: ../index.php?success=1");
            exit;
        } else {
            header("Location: ../add.php?error=File upload failed");
            exit;
        }
    } else {
        header("Location: ../add.php?error=Missing required fields");
        exit;
    }
}
?>

3. update.php

File ini berisikan tentang Memperbarui data produk berdasarkan ID. Inilah isi dari File update.php :

<?php
$requestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Onlineshop.php');
$api = new Onlineshop();
if ($requestMethod == 'POST') {
    if (!isset($_POST['id']) || !is_numeric($_POST['id'])) {
        header("Location: ../index.php?error=Invalid product ID");
        exit;
    }
    
    $id = (int)$_POST['id'];
    $nama = isset($_POST['nama']) ? $_POST['nama'] : '';
    $deskripsi = isset($_POST['deskripsi']) ? $_POST['deskripsi'] : '';
    $harga = isset($_POST['harga']) ? $_POST['harga'] : '';
    $gambar = isset($_FILES['gambar']) ? $_FILES['gambar'] : null;
    
    $imagePath = null;
    
    // If new image is uploaded
    if ($gambar && $gambar['size'] > 0) {
        $targetDir = "../img/";
        $fileName = basename($gambar["name"]);
        $targetFile = $targetDir . $fileName;
        
        // Ensure img directory exists
        if (!is_dir($targetDir)) {
            mkdir($targetDir, 0755, true);
        }
        
        if (move_uploaded_file($gambar["tmp_name"], $targetFile)) {
            $imagePath = "img/" . $fileName;
        } else {
            header("Location: ../edit.php?id=" . $id . "&error=File upload failed");
            exit;
        }
    } else {
        // If no new image, get current image path
        $koneksi = new mysqli("localhost", "root", "", "onlineshop");
        if ($koneksi->connect_error) {
            die("Connection failed: " . $koneksi->connect_error);
        }
        $stmt = $koneksi->prepare("SELECT gambar FROM produk WHERE id=?");
        $stmt->bind_param("i", $id);
        $stmt->execute();
        $result = $stmt->get_result();
        if ($row = $result->fetch_assoc()) {
            $imagePath = $row['gambar'];
        }
        $stmt->close();
        $koneksi->close();
    }
    
    // Update using class method
    $data = array(
        'id' => $id,
        'nama' => $nama,
        'deskripsi' => $deskripsi,
        'harga' => $harga,
        'gambar' => $imagePath
    );
    $api->updateProduk($data);
    header("Location: ../index.php?success=1");
    exit;
} else {
    header("HTTP/1.0 405 Method Not Allowed");
    exit;
}
?>

4. delete.php

File ini berisikan tentang Menghapus data produk berdasarkan ID. Inilah isi dari File delete.php :

<?php
$requestMethod = $_SERVER["REQUEST_METHOD"];
include('../class/Onlineshop.php');
$api = new Onlineshop();
if ($requestMethod == 'POST') {
    if (!isset($_POST['id']) || !is_numeric($_POST['id'])) {
        header("Location: ../index.php?error=Invalid product ID");
        exit;
    }
    
    $id = (int)$_POST['id'];
    
    // Delete using class method
    $api->deleteProduk($id);
    header("Location: ../index.php?success=1&message=Product deleted successfully");
    exit;
} else {
    header("HTTP/1.0 405 Method Not Allowed");
    exit;
}
?>

5. getxml.php

File ini menghasilkan XML dari database. Inilah isi dari File getxml.php :

<?php
include('../class/Onlineshop.php');
$onlineshop = new Onlineshop();
$onlineshop->getXml();
header('Content-Type: text/xml');
echo $onlineshop->getXml();
//echo file_get_contents('onlineshop.xml');
?>

6. Menampilkan XML (onlineshop.xml)

Pada File ini, hanyalah menampilkan Data dalam bentuk XML yang telah dibuat oleh File displayxml.php.

Tampilan :

A

Juga, File ini :

• Bisa dibuat otomatis oleh getxml.php
• Bukan dibuat manual
• Digunakan untuk interoperability (integrasi sistem lain)

D. Presentation Layer

Lapisan presentasi menangani interaksi pengguna secara langsung melalui browser. File index.php berfungsi sebagai halaman utama yang menampilkan seluruh produk dalam bentuk tabel atau kartu. Di dalamnya terdapat proses include file header, navigasi, dan footer untuk menjaga konsistensi tampilan.

File add.php menyediakan form untuk menambahkan produk baru. Form menggunakan enctype="multipart/form-data" karena mendukung pengunggahan file gambar. Data form dikirim ke produk/save.php untuk diproses.

File edit.php mengambil parameter ID dari URL, menampilkan data produk yang sudah ada dalam form yang telah terisi (pre-filled), lalu mengirim hasil perubahan ke update.php. Sementara itu, deleteForm.php berfungsi sebagai halaman konfirmasi sebelum data benar-benar dihapus untuk mencegah kesalahan pengguna. File product-detail.php menampilkan informasi lengkap satu produk berdasarkan ID yang dipilih.

1. Halaman Utama (index.php)

Pertama, kita buat terlebih dahulu File index.php sebagai Halaman Utama-nya :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('class/Onlineshop.php');
// Koneksi ke database (tangani error jika tabel/database tidak ada)
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
try {
    $koneksi = new mysqli("localhost", "root", "", "onlineshop");
    $koneksi->set_charset("utf8mb4");
    // Ambil data dari database
    $sql = "SELECT * FROM produk";
    $result = $koneksi->query($sql);
} catch (mysqli_sql_exception $e) {
    // Tampilkan pesan yang ramah dan instruksi impor database
    echo "<div style='padding:20px;background:#fee;border:1px solid #f99;margin:20px;'>";
    echo "<strong>Database error:</strong> " . htmlspecialchars($e->getMessage()) . "<br>";
    echo "Table <strong>produk</strong> not found. Import the file <strong>onlineshop.sql</strong> into your MySQL server.";
    echo "</div>";
    include('includes/footer.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
    <style>
        body {
            font-size: 1rem; /* Set ukuran font default */
        }
        .card-body p {
            font-size: 1rem; /* Set ukuran font dalam card */
        }
    </style>
</head>
<body>
    <?php include('includes/nav.php'); ?>
    <div class="ecommerce-container">
        <?php if (isset($_GET['success'])): ?>
            <div class="container">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    Operation completed successfully!
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        <?php endif; ?>
        <?php if (isset($_GET['error'])): ?>
            <div class="container">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <?php echo htmlspecialchars($_GET['error']); ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        <?php endif; ?>
        <div class="text-wrapper row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            <div class="col mb-10">
                <p>Welcome to E-Commerce Shop! Order now for more Offers!</p>
                <a class="btn btn-primary" href="add.php">Add Product</a>
                <a class="btn btn-primary" href="displaydata.php">Show Product</a>
                <br />
                <br />
            </div>
        </div>
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            <?php if ($result->num_rows > 0): ?>
                <?php while ($product = $result->fetch_assoc()): ?>
            <div class="col mb-5">
                        <div class="card h-100 border-0 shadow">
                            <img class="card-img-top" src="<?php echo htmlspecialchars($product['gambar']); ?>" alt="<?php echo htmlspecialchars($product['nama']); ?>" />
                            <div class="card-body text-center">
                                <div class="list-group list-group-flush">
                                    <div class="text-center">
                                        <h4 class="fw-bolder"><?php echo htmlspecialchars($product['nama']); ?></h4>
                                        <h5 class="fw-normal lh-sm"><?php echo htmlspecialchars($product['deskripsi']); ?></h5>
                                        <p>Rp.<?php echo htmlspecialchars($product['harga']); ?></p>
                                    </div>
                                </div>
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="product-detail.php?id=<?php echo $product['id']; ?>">View options</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php else: ?>
                <p>No products found</p>
            <?php endif; ?>
        </div>
    <br />
    <br />
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
<?php include('includes/footer.php'); ?>
</html>

Tampilan :

2. Deskripsi Produk (product-detail.php)

Jika User ingin mengeklik "View options", maka akan muncul seperti pada Gambar di bawah ini :

Maka, inilah Kode pada File product-detail.php :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('includes/nav.php');
include('class/Onlineshop.php');
// Koneksi ke database
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
try {
    $koneksi = new mysqli("localhost", "root", "", "onlineshop");
    $koneksi->set_charset("utf8mb4");
    
    if (isset($_GET['id']) && is_numeric($_GET['id'])) {
        $id = (int)$_GET['id'];
        $sql = "SELECT * FROM produk WHERE id = ?";
        $stmt = $koneksi->prepare($sql);
        $stmt->bind_param("i", $id);
        $stmt->execute();
        $result = $stmt->get_result();
        $product = $result->fetch_assoc();
        $stmt->close();
        
        if (!$product) {
            echo "<div class='container' style='margin-top: 50px;'>";
            echo "<div class='alert alert-danger'>Product not found.</div>";
            echo "<a href='/' class='btn btn-primary'>Back to Home</a>";
            echo "</div>";
            include('includes/footer.php');
            exit;
        }
    } else {
        header("Location: /");
        exit;
    }
} catch (mysqli_sql_exception $e) {
    echo "<div style='padding:20px;background:#fee;border:1px solid #f99;margin:20px;'>";
    echo "<strong>Database error:</strong> " . htmlspecialchars($e->getMessage()) . "<br>";
    echo "</div>";
    include('includes/footer.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($product['nama']); ?> - E-Commerce</title>
</head>
<body>
    <div class="container" style="margin-top: 50px; margin-bottom: 50px;">
        <div class="row">
            <div class="col-md-6">
                <img src="<?php echo htmlspecialchars($product['gambar']); ?>" alt="<?php echo htmlspecialchars($product['nama']); ?>" class="img-fluid" style="max-height: 500px; object-fit: cover; border-radius: 5px;">
            </div>
            <div class="col-md-6">
                <h1><?php echo htmlspecialchars($product['nama']); ?></h1>
                <p style="color: #27ae60; font-size: 1.8rem; font-weight: bold;">Rp. <?php echo number_format($product['harga'], 2, ',', '.'); ?></p>
                
                <h3>Description</h3>
                <p style="font-size: 1.1rem; line-height: 1.6;"><?php echo nl2br(htmlspecialchars($product['deskripsi'])); ?></p>
                
                <hr>
                
                <div style="margin-top: 30px;">
                    <a href="/" class="btn btn-secondary" style="margin-right: 10px;">Back to Shop</a>
                    <a href="edit.php?id=<?php echo $product['id']; ?>" class="btn btn-primary" style="margin-right: 10px;">Edit</a>
                    <a href="deleteForm.php?id=<?php echo $product['id']; ?>" class="btn btn-danger">Delete</a>
                </div>
                
                <div style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 5px;">
                    <strong>Product ID:</strong> <?php echo $product['id']; ?><br>
                    <strong>Status:</strong> <span class="badge badge-success">Available</span>
                </div>
            </div>
        </div>
    </div>
    <br />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
<?php include('includes/footer.php'); ?>
</html>

3. Menampilkan Produk (displaydata.php)

Setelah itu, maka kita akan membuat File Halaman displaydata.php untuk menampilkan semua produk :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('class/Onlineshop.php');
// Koneksi ke database
$koneksi = new mysqli("localhost", "root", "", "onlineshop");
// Cek koneksi
if ($koneksi->connect_error) {
    die("Koneksi gagal: " . $koneksi->connect_error);
}
// Ambil data dari database
$sql = "SELECT * FROM produk";
$result = $koneksi->query($sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Products - E-Commerce</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <?php include('includes/nav.php'); ?>
<div class="container">
    <h1>Tampilkan Produk</h1>
    <table border="1" class="table">
        <thead class="thead-light">
            <tr><th>Nama</th><th>Deskripsi</th><th>Harga</th><th>Gambar</th><th>Edit</th><th>Delete</th></tr>
        </thead>
        <tbody>
            <?php if ($result->num_rows > 0): ?>
                <?php while ($item = $result->fetch_assoc()): ?>
                    <tr>
                        <td><?php echo htmlspecialchars($item['nama']); ?></td>
                        <td><?php echo htmlspecialchars($item['deskripsi']); ?></td>
                        <td><?php echo htmlspecialchars($item['harga']); ?></td>
                        <td><img src="<?php echo htmlspecialchars($item['gambar']); ?>" alt="Product Image" width="100"></td>
                        <td><a class="btn btn-primary" href="edit.php?id=<?php echo $item['id']; ?>">Edit</a></td>
                        <td><a class="btn btn-danger" href="deleteForm.php?id=<?php echo $item['id']; ?>">Delete</a></td>
                    </tr>
                <?php endwhile; ?>
            <?php else: ?>
                <tr><td colspan="6">No products found</td></tr>
            <?php endif; ?>
        </tbody>
    </table>
    <br />
    <a class="btn btn-primary" href="produk/onlineshop.xml">Tampilkan Data XML</a>
</div>
<br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php include('includes/footer.php'); ?>

Tampilan :

3. Menampilkan File XML (displayxml.php)

Kemudian, buatlah File Halaman displayxml.php untuk menampilkan File XML :

<?php
include('includes/header.php');
include('includes/nav.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display XML - E-Commerce</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="container">
    <h1>Tampilkan Produk</h1>
    <?php
    $xmlurl = 'produk/getxml.php';
    $xml_data = simplexml_load_file('produk/onlineshop.xml') or
    die("Error: Object Creation failure");
    foreach ($xml_data->children() as $data) {
        //display each sub element in xml file
        //echo "ID : ", $data->id . "<br> ";
        echo "Nama : ", $data->nama . "<br> ";
        echo "Deskripsi : ", $data->deskripsi . "<br> ";
        echo "Harga : ", $data->harga . "<br>";
        echo "------------------------------------";
        echo "<br>";
    }
    echo "</thead>";
    echo "</table>";
    ?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php include('includes/footer.php'); ?>

Tampilan :

5. Menambahkan Data (add.php)

Jika sudah, buatlah File Halaman add.php untuk menambahkan Data Produk :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('includes/nav.php');
include('class/Onlineshop.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Product - E-Commerce</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    
<div class="container" style="margin-top: 40px; margin-bottom: 40px;">
    <h1>Tambah Produk</h1>
    <?php if (isset($_GET['error'])): ?>
        <div class="alert alert-danger"><?php echo htmlspecialchars($_GET['error']); ?></div>
    <?php endif; ?>
    <form action="produk/save.php" method="post" enctype="multipart/form-data">
        <div class="mb-3">
            <label for="nama" class="form-label">Nama</label>
            <input type="text" class="form-control" id="nama" name="nama" required>
        </div>
        <div class="mb-3">
            <label for="deskripsi" class="form-label">Deskripsi</label>
            <textarea class="form-control" id="deskripsi" name="deskripsi" required></textarea>
        </div>
        <div class="mb-3">
            <label for="harga" class="form-label">Harga</label>
            <input type="number" step="0.01" class="form-control" id="harga" name="harga" required>
        </div>
        <div class="mb-3">
            <label for="gambar" class="form-label">Gambar</label>
            <input type="file" class="form-control" id="gambar" name="gambar" required>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <a href="index.php" class="btn btn-secondary">Cancel</a>
    </form>
    <br/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php include('includes/footer.php'); ?>

Tampilan :

A

A

A

A

A

6. Edit Data (edit.php)

Kemudian, buatlah File Halaman edit.php untuk mengubah Data Produk :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('class/Onlineshop.php');
$id = null;
$product = null;
if((isset($_GET['id'])) && (is_numeric($_GET['id']))) {
    $id = (int)$_GET['id'];
} elseif ((isset($_POST['id'])) && (is_numeric($_POST['id']))) {
    $id = (int)$_POST['id'];
}
if ($id) {
    // Fetch product data
    $koneksi = new mysqli("localhost", "root", "", "onlineshop");
    if (!$koneksi->connect_error) {
        $stmt = $koneksi->prepare("SELECT * FROM produk WHERE id = ?");
        $stmt->bind_param("i", $id);
        $stmt->execute();
        $result = $stmt->get_result();
        $product = $result->fetch_assoc();
        $stmt->close();
        $koneksi->close();
    }
}
if (!$product && $id) {
    echo "<div class='container' style='margin-top: 50px;'>";
    echo "<div class='alert alert-danger'>Product not found.</div>";
    echo "<a href='index.php' class='btn btn-primary'>Back to Home</a>";
    echo "</div>";
    include('includes/footer.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Product - E-Commerce</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <?php include('includes/nav.php'); ?>
<div class="container" style="margin-top: 40px; margin-bottom: 40px;">
    <h1>Edit Produk </h1>
    <?php if (isset($_GET['error'])): ?>
        <div class="alert alert-danger"><?php echo htmlspecialchars($_GET['error']); ?></div>
    <?php endif; ?>
    <form action="produk/update.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="id" value="<?php echo $id; ?>"> 
        <div class="mb-3">
            <label for="nama" class="form-label">Nama</label>
            <input type="text" class="form-control" id="nama" name="nama" value="<?php echo $product ? htmlspecialchars($product['nama']) : ''; ?>" required>
        </div>
        <div class="mb-3">
            <label for="deskripsi" class="form-label">Deskripsi</label>
            <textarea class="form-control" id="deskripsi" name="deskripsi" required><?php echo $product ? htmlspecialchars($product['deskripsi']) : ''; ?></textarea>
        </div>
        <div class="mb-3">
            <label for="harga" class="form-label">Harga</label>
            <input type="number" step="0.01" class="form-control" id="harga" name="harga" value="<?php echo $product ? htmlspecialchars($product['harga']) : ''; ?>" required>
        </div>
        <div class="mb-3">
            <label for="gambar" class="form-label">Gambar</label>
            <?php if ($product && $product['gambar']): ?>
                <div style="margin-bottom: 10px;">
                    <img src="<?php echo htmlspecialchars($product['gambar']); ?>" alt="Current image" style="max-width: 200px; max-height: 200px; object-fit: cover;">
                    <p><small>Current image (leave file input empty to keep current image)</small></p>
                </div>
            <?php endif; ?>
            <input type="file" class="form-control" id="gambar" name="gambar">
        </div>
        <div class="mt-3">
            <button type="submit" class="btn btn-primary">Submit</button>
            <a href="index.php" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
    <br />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php include('includes/footer.php'); ?>

Tampilan :

A

A

A

A

A

7. Hapus Data (deleteForm.php)

Kemudian, buatlah File Halaman deleteForm.php untuk menghapus Data Produk :

<?php
header("Access-Control-Allow-Origin: *");
include('includes/header.php');
include('includes/nav.php');
include('class/Onlineshop.php');
if((isset($_GET['id'])) && (is_numeric($_GET['id']))) {
    $id = $_GET['id'];
} elseif ((isset($_POST['id'])) && (is_numeric($_POST['id']))) {
    $id = $_POST['id'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delete Product - E-Commerce</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="container">
    <h1>Hapus Produk </h1>
    <form action="produk/delete.php" method="post">
        <input type="hidden" name="id" value="<?php echo $id; ?>"> 
        <div class="mt-3">
            <button type="submit" class="btn btn-danger">Confirm Delete</button>
            <a href="displaydata.php" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
    <br />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php include('includes/footer.php'); ?>

Tampilan :

A

A

A

A

A

A

8. File CSS

Terakhir, agar Tampilan UI-nya bagus, maka yang harus kalian lakukan adalah dengan membuat File CSS dengan File style.css.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
:root {
  --green: #27ae60;
  --black: #333;
  --white: #fff;
  --bg-color: #eee;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --border: 0.1rem solid var(--black);
}
html {
  scroll-behavior: smooth;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
/* Default Styles for Larger Screens */
.w-layout-blockcontainer {
  max-width: 728px;
}
body {
  margin: auto;
  padding: 0;
  font-size: 1rem;
  font-family: Arial, sans-serif;
  position: relative;
  background-color: #ffffff;
}
dl {
  display: block;
  margin-left: 0;
  margin-right: 0;
}
dt {
  margin-left: 0.8em;
}
dd {
  display: block;
  margin-left: 1em;
}
ul {
  margin-top: 20px;
  margin-bottom: 10px;
  list-style-type: disc;
  padding-left: 40px;
}
li {
  display: inline;
  margin-bottom: 10px;
}
a {
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.5rem;
}
ul li a {
  /* color: #1a1b1f; */
  margin-top: 5px;
  text-decoration: none;
}
p {
  margin-bottom: 10px;
  font-size: 1.5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.5rem; /* Ukuran font heading */
}
h1 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-weight: 400;
  line-height: 62px;
  font-family: Arial, sans-serif;
}
h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 50px;
  font-family: Arial, sans-serif;
}
h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 46px;
  font-family: Arial, sans-serif;
}
h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 38px;
  font-family: Arial, sans-serif;
}
h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 34px;
  font-family: Arial, sans-serif;
}
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 28px;
  font-family: Arial, sans-serif;
}
a {
  color: #1a1b1f;
  text-decoration: none;
  transition: opacity 0.2s;
  display: block;
  font-size: 16px;
}
td th a:hover {
  color: #32343a;
  text-decoration: none;
}
a:active {
  color: #43464d;
  text-decoration: none;
}
img {
  display: block;
}
.image {
  margin-left: 0;
  padding-bottom: 10px;
}
.text-wrapper {
  margin-bottom: 10px;
}
.table {
  font-size: 1rem; /* Ukuran font tabel */
}
.ecommerce-container {
  background-color: #f5faf5;
  border-bottom: 1px solid #e4f3e5;
  display: block;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 40px 20px;
}
.card-img-top {
  height: 300px;
  object-fit: cover;
}
.card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}
.card-footer {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .row-cols-md-3 {
    --bs-columns: 2;
  }
}
@media (max-width: 576px) {
  .row-cols-2 {
    --bs-columns: 1;
  }
}
.blog-text {
  align-items: stretch;
}

Hasil Akhir :

https://www.blogger.com/blog/post/edit/2490536221435885189/97211384087650834

Mohon maaf apabila ada sedikit kesalahan pada Kode Program apapun. Untuk melihat Artikel sebelumnya mengenai Cara membuat Website Dinamis Sederhana dengan HTML, CSS, PHP, dan MySQL, silakan lihat di sini.

Terima Kasih 😄😘👌👍 :)

Wassalammu‘alaikum wr. wb.