{"id":1,"date":"2025-05-18T08:40:40","date_gmt":"2025-05-18T08:40:40","guid":{"rendered":"https:\/\/indahsyah.infokand23.my.id\/blog\/?p=1"},"modified":"2025-05-22T13:09:32","modified_gmt":"2025-05-22T13:09:32","slug":"pemrogramanweb6","status":"publish","type":"post","link":"https:\/\/indahsyah.infokand23.my.id\/blog\/pemrogramanweb6\/","title":{"rendered":"PRAKTIK CRUD SEDERHANA BERKONSEP OOP PHP & MYSQL #6"},"content":{"rendered":"\n

Assalamu’alaikum warahmatullahi wabarakatuh. Hi, all!

Pada praktikum ke-6 mata kuliah pemrograman web semester 4 jurusan informatika, saya mempelajari dan mencobakan bagaimana membuat CRUD sederhana dengan konsep Object Oriented Programming<\/em> (OOP) atau PBO dengan php dan MySQL<\/strong> di VS Code. Kali ini, saya akan memaparkan seluruh langkah-langkah yang harus dilakukan untuk membuat CRUD sederhana mengenai data mahasiswa<\/strong>.<\/p>\n\n\n\n

PENGENALAN SINGKAT<\/strong><\/h2>\n\n\n\n

Pemrograman Berorientasi Objek (Object-Oriented Programming\/OOP) adalah paradigma pemrograman yang berfokus pada penggunaan objek<\/strong> untuk membangun aplikasi. Konsep dasarnya dimulai dari class<\/strong>, yaitu blueprint atau template yang digunakan untuk membuat banyak objek (instance) dengan struktur dan perilaku yang sama. Ketika sebuah objek dibuat dari class, ia akan memiliki member variable<\/strong> (atribut) dan member function<\/strong> (metode). Atribut menyimpan data milik objek, sedangkan metode digunakan untuk mengakses dan memanipulasi data tersebut. OOP mendukung enkapsulasi<\/strong>, yaitu proses menggabungkan data dan fungsi dalam satu unit (objek), serta menyembunyikan detail implementasinya agar hanya fungsi yang relevan saja yang bisa diakses dari luar.<\/p>\n\n\n\n

Konsep inheritance (pewarisan)<\/strong> memungkinkan sebuah class baru (child class atau subclass) mewarisi atribut dan metode dari class lain (parent class atau superclass). Hal ini mendukung efisiensi dalam pengembangan program karena kode dapat digunakan kembali. Polymorphism<\/strong> memungkinkan fungsi atau metode yang sama digunakan dalam konteks berbeda, dan salah satu bentuk polymorphism adalah overloading<\/strong>, di mana suatu fungsi atau operator dapat memiliki implementasi berbeda tergantung pada tipe data yang digunakan. Selain itu, OOP juga menerapkan abstraksi data<\/strong>, yaitu menyembunyikan kompleksitas sistem dengan hanya menampilkan bagian penting kepada pengguna.<\/p>\n\n\n\n

Dua fungsi khusus dalam OOP adalah constructor<\/strong> dan destructor<\/strong>. Constructor dipanggil secara otomatis saat objek dibuat untuk menginisialisasi nilai awal, sedangkan destructor dipanggil saat objek dihapus atau keluar dari cakupan (scope) untuk melakukan proses pembersihan memori. Dengan seluruh konsep ini, OOP mempermudah pemrograman yang kompleks menjadi lebih modular, dapat digunakan kembali, dan lebih mudah dipelihara.<\/p>\n\n\n\n

PERSIAPAN<\/strong><\/h2>\n\n\n\n

Langkah pertama yang bisa dilakukan yakni menginstall VSCode dan XAMPP serta buka MySQL. Lalu, buat folder baru dalam folder htdocs dengan nama crud. Namun, saya membuat strukturnya seperti:

htdocs>web_programming>OOP>crud<\/strong><\/p>\n\n\n\n

Untuk struktur lebih lengkap, dapat berpedoman kepada struktur berikut.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Buat folder assets<\/em>, lalu buat file CSS dan JS dengan mengunduhnya pada link berikut.
CSS: https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.5\/dist\/css\/bootstrap.min.css<\/a>
JS: https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.5\/dist\/js\/bootstrap.bundle.min.js<\/a><\/p>\n\n\n\n

KONEKSI DATABASE<\/strong><\/h2>\n\n\n\n

Buat database<\/em> baru dengan nama pemrograman_web<\/strong>, lalu buat tabel mahasiswa dengan 4 kolom, yakni ID, nama, NIM, dan jurusan, sehingga akan terlihat seperti ini di database<\/em>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Setelah itu, kita bisa membuat koneksi ke MySQL dengan membuat file<\/em> baru pada folder config<\/strong>, beri nama filenya Database.php<\/strong>. Buat kodenya seperti berikut. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Kode ini digunakan untuk membuat koneksi ke database<\/em> MySQL menggunakan OOP di PHP. File ini merupakan class Database <\/em>yang punya method getConnection() <\/em>untuk menghubungkan website<\/em> ke database pemrograman_web.<\/p>\n\n\n\n

CONFIG<\/strong><\/h2>\n\n\n\n

Selanjutnya, buat file Config.php dalam folder config. Ini adalah file yang digunakan untuk menyimpan variabel konstan seperti alamat utama (URL dasar) dari proyek website<\/em> (dalam kode yakni BASE_URL). Dengan adanya config dan BASE_URL, kita bisa memanggil alamat dasar ini di berbagai file dalam proyek tanpa harus menuliskannya berulang-ulang. Hal ini memudahkan pengelolaan dan perubahan URL jika suatu saat diperlukan.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

ALERT<\/strong><\/h2>\n\n\n\n

Kemudian, buat folder function <\/em><\/strong>dan buat file Alert.php. Ini digunakan untuk membuat fungsi yang memberikan feedback berupa pesan kepada pengguna saat beroperasi dengan data. Ada 2 argument statement<\/em>, yaitu $msg yang berisi pesan dan $sts yang berisi kode. Jika status = 1, maka pesan berhasil, namun jika 0 maka pesan gagal. Berikut kode program fungsi alert.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

MODEL MAHASISWA<\/strong><\/h2>\n\n\n\n

Selanjutnya, buat folder model <\/strong>lalu tambah file baru dengan nama Mahasiswa.php<\/strong>. Class (yang dibuat untuk mewakili data tabel mahasiswa) ini dibuat untuk membuat fungsi operasi CRUD. Pertama-tama, tambahkan kode untuk memulai sesi dengan session_start()<\/strong> dan deklarasikan variabel yang terlibat dan digunakan sebagai berikut. Fungsi construct di baris bawah adalah kode untuk memanggil koneksi database dari MySQL<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Setelahnya, buat fungsi CRUD: Create<\/strong> data mahasiswa baru, read<\/strong> data mahasiswa yang sudah ada, update<\/strong> data mahasiswa dari perubahan terbaru berdasarkan ID, dan delete <\/strong>untuk menghapus data mahasiswa berdasarkan ID jika salah.<\/p>\n\n\n\n

<\/p>\n\n\n\n

$_SESSION[\u2018flash_message\u2019] berfungsi untuk membuat session<\/em> yang berisi pesan berhasil atau tidak berhasil sebuah data baru. Sedangkan, header<\/em> digunakan untuk mengarahkan kembali setelah menekan tombol ke file index.php dengan parameter msg. Jadi, setelah aksi selesai, user<\/em> akan diarahkan kembali ke halaman utama\/index.php dengan pesan sukses\/gagal.<\/p>\n\n\n\n

Fungsi read<\/em> memiliki default parameter $id yang berisi string kosong, jika $id == \u201c\u201d maka akan mengeksekusi kueri untuk menampilkan seluruh data mahasiswa, jika $id !== \u201c\u201d maka akan mengeksekusi kueri untuk menampilkan data mahasiswa berdasarkan id mahasiswa. Berikut kode
program fungsi CRUD.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

FUNCTION MAHASISWA<\/strong><\/h2>\n\n\n\n

Kemudian, buat file baru di folder function<\/strong>, buat nama filenya Mahasiswa.php<\/strong>. File ini membantu sebagai jembatan antara database dan model yang telah dibuat tadi. File ini berfungsi sebagai controller<\/strong> yang menangani permintaan CUD dan mengarahkan ke method yang sesuai di class Mahasiswa. Berikut adalah kodenya.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Pertama akan dilakukan pengecekan sebuah parameter action yang dikirimkan melalui method GET, jika ada terdapat parameter action yang dikirimkan maka nilai parameter akan diambil dan digunakan sesuai dengan fungsinya. Singkatnya, kode ini tidak hanya mengambil koneksi ke database, namun juga membuat objek Mahasiswa dengan koneksi tersebut. Jika action=create, data dari form disimpan ke database. Jika action=update, data diubah berdasarkan id. Jika action=delete, data dihapus berdasarkan id.<\/p>\n\n\n\n

TAMPILAN DATA<\/strong><\/h2>\n\n\n\n

Untuk menampilkan data, bisa disebut file-filenya dengan sebutan “view<\/strong>” yang berfungsi untuk menampilkan dan memperbarui tampilan data. Beri nama dengan index.php.<\/strong> Ini adalah halaman utama <\/strong> yang menampilkan data mahasiswa<\/strong> dalam bentuk tabel, dan menyediakan tombol untuk tambah, edit, dan hapus data.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

File ini berfungsi sebagai halaman utama untuk menampilkan data mahasiswa dari database dalam bentuk tabel. Pada bagian awal, file menghubungkan ke database dan memanggil method untuk mengambil data mahasiswa. Jika terdapat pesan dari sesi sebelumnya, seperti notifikasi sukses atau gagal saat menambah, mengedit, atau menghapus data, pesan tersebut akan ditampilkan sebagai alert. Di tabel, data mahasiswa ditampilkan dengan kolom NIM, Nama, dan Jurusan, serta terdapat tombol aksi untuk mengedit dan menghapus data mahasiswa. Tombol tambah mahasiswa mengarahkan ke halaman form input data baru. Saat tombol hapus diklik, pengguna akan diminta konfirmasi sebelum data dihapus. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Selanjutnya, buat file dengan nama edit.php untuk mengedit data yang sudah disubmit di data mahasiswa. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

File ini berfungsi sebagai halaman edit data mahasiswa. Pertama, file menghubungkan ke database dan memanggil method untuk mengambil data mahasiswa berdasarkan id<\/code> yang dikirim lewat URL ($_GET['id']<\/code>). Data mahasiswa yang diambil kemudian ditampilkan di form HTML agar pengguna bisa mengubahnya. Form ini memiliki input untuk NIM, Nama, dan Jurusan, dengan nilai awal (value) sudah terisi dari data mahasiswa yang diambil tadi. Ada juga input tersembunyi untuk menyimpan id<\/code> mahasiswa supaya saat dikirim ke server, data yang diedit tahu targetnya. Saat tombol “Update” ditekan, form akan mengirim data ke function\/Mahasiswa.php<\/code> dengan parameter action=update<\/code>, di mana proses update di database akan dilakukan. Fungsi utama file ini adalah menampilkan form edit data mahasiswa dengan data awal terisi dan mempersiapkan data yang diupdate dikirim ke server.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Terakhir, buat file bernama create.php dalam folder CRUD tadi yang berisi form inputan untuk memambahkan data mahasiswa.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

File ini adalah halaman untuk menambah data mahasiswa baru. Di sini, dibuat form dengan input untuk NIM, Nama, dan Jurusan yang wajib diisi (required). Setelah diisi, data akan dikirim via metode POST ke file function\/Mahasiswa.php dengan parameter action=create yang bertugas memproses penambahan data ke database. Jadi, fungsi utama halaman ini adalah menyediakan form input agar user bisa memasukkan data mahasiswa baru yang nantinya disimpan ke database.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

OPTIMALISASI CRUD<\/strong><\/h2>\n\n\n\n

Dari program yang telah dibuat, dapat dilakukan optimalisasi seperti:<\/p>\n\n\n\n

1. Menggabungkan file<\/em> untuk create<\/em> dan edit <\/em>di dalam satu file saja<\/strong><\/p>\n\n\n\n

Terdapat redundansi antara create.php dan edit.php, karena keduanya sama-sama menampilkan formulir dengan input nim, nama, dan jurusan. Bedanya hanya di create.php buat form<\/em> kosong untuk tambah data baru, sementara edit.php buat form<\/em> dengan data sudah terisi untuk edit data lama. Jadi, untuk mempermudah pengelolaan<\/strong> dan mengurangi pengulangan kode<\/strong>., saya membuat file baru dengan nama form_mahasiswa.php<\/strong> untuk menangani create<\/em> dan edit <\/em>data.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Kode ini adalah halaman form dinamis untuk menambahkan (create<\/em>) atau mengedit (update<\/em>) data mahasiswa tergantung pada ada atau tidaknya parameter id di URL. Pertama, script memuat file koneksi database (Database.php) dan model mahasiswa (Mahasiswa.php), lalu membuat objek koneksi database dan objek Mahasiswa. Jika ada parameter id pada URL, maka dianggap mode edit dan data mahasiswa diambil berdasarkan id untuk ditampilkan di form, serta action form diarahkan ke proses update. Jika tidak ada id, maka form berjalan dalam mode create dengan field kosong dan action diarahkan ke proses create. Form ini menampilkan input untuk NIM, nama, dan jurusan, serta tombol submit yang teksnya akan berubah sesuai mode-nya (Create <\/em>atau Update<\/em>). Kode juga menggunakan fungsi htmlspecialchars() untuk menghindari potensi XSS saat menampilkan nilai di form.<\/p>\n\n\n\n

Pada index, disesuaikan juga seperti ini agar saat ditekaan tombol tambah dan edit maka akan menuju ke laman form_mahasiswa.php.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

2. Menambahkan aturan untuk pengisian NIM, nama, dan jurusan<\/strong><\/p>\n\n\n\n

Aturan pengisian di tambah dan edit untuk NIM adalah hanya bisa diisi oleh integer. Sementara, untuk nama dan jurusan hanya bisa diisi oleh string. Jika tidak sesuai atau kolom kosong, muncul peringatan bahwa input tidak sesuai atau kolom masih kosong.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Validasi data dibuat dengan JavaScript sebelum form dikirim (submit). Validasi dilakukan terhadap tiga field utama, yaitu NIM, Nama, dan Jurusan. Pertama-tama, kode menggunakan addEventListener untuk menangani submit form dengan ID. Saat tombol submit ditekan, kode ini dijalankan.
Langkah pertama di dalam fungsi ini adalah mengosongkan semua pesan kesalahan yang sebelumnya mungkin sudah ditampilkan, dengan mengakses elemen-elemen HTML yang memiliki ID nimError, namaError, dan jurusanError. Kemudian, variabel valid di-set ke true sebagai penanda bahwa secara default semua input dianggap valid. Setelah itu, masing-masing nilai input (nim, nama, dan jurusan) diambil menggunakan document.getElementById(\u2026).value.trim() untuk menghapus spasi kosong di awal atau akhir teks.<\/p>\n\n\n\n


Selanjutnya, validasi dilakukan satu per satu. Untuk nim, dicek apakah input kosong atau bukan angka murni menggunakan regex \/^\\d+$\/. Jika tidak valid, akan muncul pesan error dan valid diubah menjadi false. Hal serupa dilakukan untuk nama dan jurusan, dengan regex \/^[a-zA-Z\\s]+$\/ untuk memastikan hanya huruf dan spasi yang diizinkan. Jika ada satu saja field yang tidak valid, maka e.preventDefault() akan dipanggil di bagian akhir fungsi untuk mencegah form dikirim ke server, sehingga pengguna dapat memperbaiki inputnya terlebih dahulu.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Untuk proyek dan implementasi CRUD langsung dapat dilihat dan dicobakan dari link proyek GitHub <\/a>saya.<\/p>\n\n\n\n

Demikian pemaparan praktikum 6 pemrograman web kali ini. Silakan berikan kritik dan saran yang membangun untuk saya ke depannya. <\/p>\n\n\n\n

Gracias!<\/p>\n","protected":false},"excerpt":{"rendered":"

Assalamu’alaikum warahmatullahi wabarakatuh. Hi, all! Pada praktikum ke-6 mata kuliah pemrograman web semester 4 jurusan informatika, saya mempelajari dan mencobakan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":29,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions\/133"}],"wp:attachment":[{"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/indahsyah.infokand23.my.id\/blog\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}