Rauf's Blog: Tugas 8 PWEB B 2021

Di postingan ini, saya akan menunjukkan proses pembuatan website pendaftaran siswa baru. Langkah-langkah yang saya lakukan adalah:

1. Menyiapkan database

Dengan menggunakan Aplikasi XAMPP, saya bisa menggunakan web server apache dan databse mysql di local. Saya menyalakan service apache dan mysql, kemudian membuka halaman phpmyadmin. Disana saya membuat database baru bernama "pendaftaran_siswa". Kemudian di database tersebut, saya membuat tabel "calon_siswa"

2. Menghubungkan ke database

Supaya bisa menjalankan website di local dengan xampp, buatlah folder website di folder htdocs dalam directory xampp-nya. Kemudian supaya website tersebut dapat terhubung ke database, dibuatlah config.php yang akan berfungsi untuk membuat koneksi ke database.

3. Membuat halaman index

Halaman index ini akan ditampilkan pertama kali saat membuka website. Halaman ini hanya akan berisi tombol yang berfungsi untuk menambah siswa dan melihat siswa yang sudah terdaftar. Selain itu halaman index ini juga akan menjadi tempat redirect ketika siswa berhasil/gagal ditambahkan. Untuk stylingnya, saya menggunakan bootstrap 5.

4. Membuat pendaftaran

Untuk pendaftaran siswa, diperlukan 2 file php, yaitu untuk halaman pendaftaran dan untuk memproses pendaftaran. Halaman pendaftaran akan berisi form yang akan mengirim data formnya ke script proses pendaftaran dengan metode POST

Sementara untuk proses pendaftaran, script akan menghubungkan ke database dengan file config yang telah dibuat. Kemudian variable post akan diperiksa, jika tidak ada maka script akan langsung berhenti. Jika variable post ada, maka script akan mengambil semua data dari variable tersebut dan membuat query insert ke table calon_siswa. Setelah itu, script akan membuka halaman index dengan status berhasil jika insert berhasil dan status gagal jika insert tidak berhasil

5. Membuat halaman pendaftar
Halaman pendaftar akan berisikan tabel dari semua pendaftar, jumlah pendaftar, tombol kembali dan tombol mendaftar. Untuk mengambil data semua pendaftar, file config kembali digunakan untuk menghubungkan dengan database, kemudian melakukan query select ke tabel calon siswa. Untuk setiap row yang diambil, maka script akan menambahkan row tabel dengan data yang diambil. Selain itu ditambahkan pula tombol yang akan digunakan untuk mengedit dan menghapus data yang diberikan parameter id data. Kemudian script juga akan menampilkan jumlah baris yang berhasil diambil.

6. Membuat pengubahan siswa

Sama seperti pendaftaran siswa, untuk mengedit data diperlukan 2 file php, yaitu untuk halaman edit dan untuk memproses edit data. Juga mirip seperti pendaftaran, halaman edit akan berisi form yang akan mengirim data formnya ke script proses edit dengan metode POST. Di dalam halaman edit ini, script akan membuat koneksi ke database dan meng-query data dengan id yang dikirim dari halaman pendaftar. Data tersebut kemudian akan diisikan ke dalam formnya.

Sementara untuk proses editnya, script akan menghubungkan kembali ke database dengan file config yang telah dibuat. Kemudian variable post akan diperiksa mirip seperti ketika mendaftar. Jika variable post ada, maka script akan mengambil semua data dari variable tersebut dan membuat query update ke table calon_siswa dengan id yang sesuai. Setelah itu, script akan membuka halaman pendaftar jika update berhasil atau berhenti jika update tidak berhasil.

7. Membuat penghapusan siswa

Untuk menghapus data siswa, diperlukan id yang akan didapatkan dari halaman pendaftar. Script akan menghubungkan ke database dan mengecek apakah id diterima. Apabila iya, maka script akan meng-query delete ke table calon_siswa dengan id tersebut dan apabila berhasil akan kembali ke halaman pendaftar.

8. Deploy website

Karena php merupakan server side code, maka tidak bisa menggunakan github pages seperti sebelumnya. Karena itu saya menggunakan heroku untuk hosting servernya dan add on cleardb untuk database mysql-nya. Untuk menggunakan cleardb, diperlukan beberapa penyesuaian di file confignya dimana server, user, password, dan database perlu menggunakan credential dari cleardb.

Untuk proses deploynya sendiri, dapat menggunakan heroku cli. Mirip seperti deploy di github pages, hanya saja repo git akan dipush ke repo yang disediakan heroku.