Laporan Praktikum 6 Pemrograman Web

Pada praktikum ini saya belajar tentang Object-Oriented Programming menggunakan PHP untuk membuat sebuah CRUD sederhana untuk mengelola data mahasiswa.

Untuk code lengkap dari project kali ini dapat dilihat pada github berikut: https://github.com/SitiFadhilahRahmi/Praktikum-PWEB.git

MEMBUAT CRUD SEDERHANA

  • Download file css dan js bootstrap untuk menggunakan komponen dan fitur Bootstrap. Simpan dalam folder assets
  • Buat database untuk menyimpan data mahasiswa dengan nama pemrograman-web dan buat sebuah tabel mahasiswa yang berisi id, nim, nama, dan jurusan
  • Selanjutnya buat folder config untuk menyimpan file konfigurasi seperti koneksi database, pengaturan global, dan variabel yang digunakan secara bersama di seluruh bagian aplikasi. Pada praktikum kali ini, buat file Database.php di dalam folder config untuk koneksi ke database.
  • Selanjutnya buat file Config.php di dalam folder config untuk membuat variabel constant yaitu BASE_URL yang berisi base url dari project dan nantinya dapat diakses dari kelas manapun
  • Selanjutnya buat file folder function untuk menampung file-file yang berisi function-function yang akan digunakan dalam project ini. Lalu buat file Alert.php di dalam folder ini yang berisi fungsi untuk menampillkan alert atau pesan ketika terdapat operasi yang dijalankan.
  • Selanjutnya buat folder model dan buat file Mahasiswa.php di dalamnya yang akan digunakan untuk membuat fungsi create, read, update, dan delete data mahasiswa.
  • Tambahkan session_start() pada baris paling atas untuk memulai sesi agar bisa menyimpan dan mengakses data
  • Lalu deklarasikan variabel-variabel yang dibutuhkan dan buat fungsi constructor untuk memanggil koneksi database
  • Selanjutnya adalah membuat fungsi CRUD-nya. Dimulai dari fungsi create untuk menambahkan data mahasiswa ke database. Fungsi ini menyusun perintah SQL INSERT INTO dengan tiga kolom yaitu nim, nama, dan jurusan, kemudian mempersiapkan pernyataan SQL tersebut menggunakan koneksi database ($this->conn). Nilai-nilai dari properti objek ($this->nim, $this->nama, dan $this->jurusan) diikat ke pernyataan SQL menggunakan bind_param() dengan tipe data string (“sss”). Jika eksekusi berhasil, maka sebuah pesan sesi disetel (“Data berhasil disimpan!”) dan pengguna diarahkan kembali ke index.php dengan parameter msg=1 melalui fungsi header(). Jika gagal, maka disetel pesan (“Data gagal disimpan!”) dan pengguna diarahkan ke index.php dengan parameter msg=0.
  • Fungsi selanjutnya adalah fungsi read yang digunakan untuk mengambil data dari tabel; jika parameter $id kosong, maka semua data diambil, sedangkan jika $id diisi, hanya data dengan ID tersebut yang diambil dari database
  • Lalu fungsi update() untuk memperbarui data mahasiswa di database berdasarkan ID, dengan menggunakan prepared statement untuk mengganti nilai nim, nama, dan jurusan. Jika berhasil, akan menampilkan pesan sukses dan mengarahkan pengguna kembali ke BASE_URL dan jika gagal akan menampilkan pesan gagal.
  • Terakhir ada fungsi delete untuk menghapus data dari database berdasarkan ID tertentu. Query SQL DELETE FROM … WHERE id=? disiapkan, di mana id merupakan parameter yang akan ditentukan dari properti objek $this->id. Untuk mencegah SQL injection, query ini dipersiapkan menggunakan prepare(), lalu nilai ID diikat ke dalam query menggunakan bind_param(“s”, $this->id) dengan tipe data string. Jika perintah execute() berhasil dijalankan, maka akan dibuat sebuah pesan bahwa data berhasil dihapus, dan pengguna akan diarahkan ke index.php dengan parameter msg=1. Namun jika eksekusi gagal, maka akan muncul pesan kegagalan dan pengguna tetap diarahkan ke index.php dengan parameter msg=0.
  • Setelah semua fungsi CRUD selesai dibuat, selanjutnya adalah membuat sebuah controller antara model Mahasiswa dengan view. Buat file Mahasiswa.php di dalam folder function yang telah dibuat sebelumnya. Lalu:
  • Tambahkan file Database.php, Config.php, dam Mahasiswa.php di folder model yang telah dibuat sebelumnya menggunakan perintah include
  • Buat object database dan mahasiswa dan koneksikan dengan database
  • Lalu buat code untuk untuk menangani aksi CRUD berdasarkan nilai parameter action yang dikirim melalui URL. Jika action bernilai ‘create’, maka data mahasiswa berupa NIM, nama, dan jurusan yang dikirim dari form akan diproses dan disimpan ke database menggunakan metode create(). Jika action bernilai ‘delete’, maka data mahasiswa akan dihapus berdasarkan ID yang dikirim melalui URL dengan memanggil metode delete(). Sementara jika action bernilai ‘update’, maka data mahasiswa akan diperbarui berdasarkan ID dan data baru dari form menggunakan metode update().
  • Selanjutnya adalah membuat index.php sebagai halaman utama yang menampilkan data-data mahasiswa yang telah dimasukkan ke database. Index.php ini berisi:
  • Perintah include Alert.php, Database.php, dan Mahasiswa.php dari folder model
  • Membuat objek Database dan mendapatkan koneksi database.
  • Membuat objek Mahasiswa dan mengambil data mahasiswa menggunakan metode read().
  • Selanjutnya masuk ke tampilan halaman. Disini menggunakan Bootstrap untuk styling.
  • Lalu terdapat tulisan di bagian atas yaitu “Data Mahasiswa” yang dibuat menggunakan h4 dan tombol “Tambah Mahasiswa” yang mengarah ke halaman create.php.
  • Selanjutnya membuat code untuk Menampilkan Notifikasi (Flash Message). Jika session flash_message dan msg tersedia, maka akan ditampilkan alert (sukses atau gagal) dengan fungsi alert().
  • LaluMenampilkan Data Mahasiswa dalam Tabelyang  berisi kolom nomor, NIM, nama, jurusan, dan action. Data diambil dari $result dan ditampilkan baris per baris.
  • Pada kolom Action terdapat dua tombol yaitu Edit yang mengarahkan ke halaman edit.php dengan ID mahasiswa dan Hapus untuk menghapus data dengan memanggil function/Mahasiswa.php?action=delete&id=…, disertai konfirmasi sebelum menghapus

Tampilan dari index.php

  • File berikutnya adalah Create.php yang berisi form untuk menambahkan data mahasiswa. Pada file ini dibuat form input yang dikirim ke function/Mahasiswa.php?action=create dengan metode POST.
  • Terdiri dari 3 input field:
  • NIM (name=”nim”)
  • Nama (name=”nama”)
  • Jurusan (name=”jurusan”)
  • Semua input bersifat wajib (required).
  • Tombol Submit: Tombol bertuliskan “Create” dan menggunakan class Bootstrap btn btn-primary.
  • Buat file edit.php yang berisi form untuk mengedit data mahasiswa. Edit.php ini berisi:
  • Code PHP di bagian atas untuk include Database.php dan Mahasiswa.php. Lalu inisialisasi objek Database dan objek Mahasiswa. Lalu ada Pengambilan Data Berdasarkan ID. Jika $_GET[‘id’] ada, data mahasiswa dengan ID tersebut diambil menggunakan metode read() dan disimpan dalam $result.
  • Selanjutnya ada kode html untuk membuat form edit.
  • Form dikirim ke function/Mahasiswa.php?action=update menggunakan POST.
  • Akan ada form Input berupa Hidden input: untuk menyimpan ID mahasiswa, dan Text input untuk NIM, Nama, dan Jurusan.
  • Semua input sudah terisi nilai lama dari database (value=”<?=$result[‘…’]?>”).
  • Tombol Submit yang bertuliskan “Update”, akan menjalankan proses update saat diklik.

Tampilan form edit:

OPTIMISASI KODE.

  • Jika dilihat dari code sebelumnya, form di bagian edit.php dan create.php hampir sama, hanya berbeda pada nilai yang dikirim (ID mahasiswa). Untuk membuat code lebih efisien, maka kita dapat membuat form input yang bisa digunakan bersama, dan menyesuaikan input form berdasarkan kondisi apakah itu untuk create atau edit.
  • Buat form.php sebagai template form.
  • Lalu sesuaikan file create.php dan edit.php. Jika sebelumnya kedua file harus membuat formnya masing-masing, setelah disesuaikan, file create dan edit hanya perlu memanggil form.php yang telah dibuat tadi.
  • Pada create.php tidak perlu menambahkan value untuk data mahasiswa karena form ini digunakan untuk menambahkan data baru. Cukup sertakan file form.php.
  • Pada edit.php, kita mengisi form dengan data mahasiswa yang sudah ada (menggunakan $result[‘nim’], $result[‘nama’], dan $result[‘jurusan’]). Form ini menyertakan hidden field untuk ID mahasiswa yang akan diupdate.

Dengan membuat form yang terpisah dari file edit dan create seperti di atas, kita tidak perlu membuat form dua kali untuk setiap proses edit dan create. Kita cukup memanggil form.php untuk menggunakannya.

2 thoughts on “Laporan Praktikum 6 Pemrograman Web”

Leave a Reply to John Doe Cancel Reply

Your email address will not be published. Required fields are marked *

Scroll to Top