Tugas 9 PWEB B 2021

Di postingan ini, saya akan menunjukkan proses penambahan upload foto pada website pendaftaran siswa baru yang telah saya buat untuk tugas sebelumnya. Langkah-langkah yang saya lakukan adalah: 

1. Mengubah database

Yang pertama harus dilakukan adalah menyesuaikan tabel calon siswa. Tabel calon siswa akan ditambahkan kolom bertipe string yang akan berisikan path ke foto yang telah diupload. Kolom ini tidak boleh null sehingga diperlukan nilai default untuk data lama yang belum punya foto.

2. Mengubah halaman pendaftar

Di halaman daftar pendaftar perlu ditambahkan kolom yang nantinya akan berisi foto pendaftar. Kolom itu nantinya akan berisi elemen img dengan src-nya adalah path foto yang disimpan di database.

3. Mengubah pendaftaran

Selanjutnya perlu mengubah form dan proses pendaftaran. Di form pendaftaran akan ditambahkan input dengan tipe file. Selain itu di form tersebut akan ditambahkan atribut enctype dengan nilai "multipart/form-data".

Di proses pendaftaran, data foto akan diambil menggunakan variabel $_FILES. Kemudian akan dibuatkan nama secara random dan dibuatkan path ke file tersebut. Selanjutnya memanggil fungsi move_uploaded_file untuk memindah file upload ke path yang baru. Apabila berhasil, maka baru akan menambahkan data pendaftar ke database dengan juga menyertakan path dari file tadi

4. Mengubah pengeditan data siswa

Sama seperti di pendaftaran, form untuk pengeditan data akan ditambahkan dengan input foto. Foto yang saat ini sedang digunakan juga akan ditampilkan.

Di proses pengeditan, akan dicek apakah foto akan diubah atau tidak dengan mengecek isi variabel $_FILES. Jika tidak ada data foto, maka foto tidak diubah dan prosesnya sama seperti sebelumnya. Jika file ada, maka foto akan diubah. Mirip seperti mendaftar, akan dibuatkan nama secara random dan disiapkan path fotonya. Jika foto berhasil diupload, maka path foto yang lama akan diambil dan foto yang lama dihapus. Baru kemudian mengubah data di database dengan data yang baru.

5. Mengubah delete

Ketika menghapus data siswa, terlebih dahulu perlu menghapus foto siswa tersebut. Path foto akan diambil dari database, kemudian akan diperiksa apakah fotonya benar-benar ada dan bukan foto default. Jika memenuhi 2 kondisi tersebut, maka foto akan dihapus dan baru data siswa tersebut juga dihapus dari database.

6. Deploy website

Karena website ini memerlukan persisten storage, maka heroku yang digunakan pada tugas sebelumnya tidak dapat digunakan. Karena itu, untuk tugas kali ini saya menggunakan 000webhost. Saya membuat akun dan membuat website baru. Kemudian dengan file manager yang disediakan, saya mengupload tugas ini ke website tadi.

Kemudian saya perlu membuat database yang akan digunakan dan membuat tabel calon siswa di database tersebut

Terakhir, file config perlu sedikit penyesuaian agar terhubung dengan database yang baru.

Baru setelah itu website dapat digunakan. Website ini dapat diakses di link berikut sedangkan source codenya dapat diakses di link berikut.