Tugas 7
Posted April 16th 2023
CRUD Pendaftaran Siswa Baru
Rayssa Ravelia / 5025211219 / PWEB (A)
Pada tugas ke-7, kami belajar untuk mengimplementasikan CRUD (Create, Read, Update, dan Delete) pada data pendaftaran siswa baru, sehingga memudahkan dalam mengelola data siswa secara efisien. Sistem pendaftaran siswa baru yang saya menggunakan bahasa PHP, JS, HTML, CSS , MySQL menggunakan XAMPP yang dijalankan pada local host, serta terdapat bootstrap.
Berikut ini adalah link repository dari sistem pendaftaran siswa baru yang saya buat:
Link github : github
Penjelasan & Screenshot Web
Terdapat 4 page yang dibentuk yakni sebagai berikut :
1. Landing Page
Landing page dijalankan menggunakan index.php
Pada landing page, terdapat dua tombol yang user dapat pilih yakni "Daftar Baru" dan "Pendaftar". Tombol "Daftar Baru" akan mengarahkan user ke form-daftar.php yang berisi formulir pendaftaran siswa baru, sementara tombol "Pendaftar" akan mengarahkan user ke list-siswa.php yang berisi list siswa baru yang sudah mendaftar.
2. Daftar Baru
Daftar Baru dijalankan menggunakan form-daftar.php
Pada Daftar Baru, pengguna harus memasukkan nama, alamat, jenis kelamin, agama, dan sekolah asal yang nantinya akan disimpan ke dalam list-siswa.php setelah berhasil melakukan pendaftaran.
Terdapat juga validasi form apabila form tidak diisi yang dibuat dengan JS. Berikut ini adalah screenshot contoh apabila ada bagian yang tidak diisi:
Apabila pendaftaran berhasil maka akan langsung kembali diarahkan ke landing page dengan pesan sebagai berhasil, sebagai berikut:
3. Pendaftar
Pendaftar dijalankan menggunakan list-siswa.php
Pada Pendaftar, pengguna dapat melihat daftar siswa yang sudah mendaftar dalam bentuk kolom yang berisi no, nama, alamat, jenis kelamin, agama, dan sekolah asal. Terdapat pula bagian tindakan yang dimana admin dapat melakukan "edit" atau "hapus“. Tindakan "edit" akan mengarahkan ke laman form-edit.php yang dimana pengguna dapat mengubah datanya. Pada tindakan "hapus" akan menghapus data siswa yang sudah mendaftar.
Di bagian bawah kolom juga terdapat total siswa yang sudah mendaftar. Tombol "(+) Tambah Baru" yang akan mengarahkan pengguna ke formulir pendaftaran siswa baru yaitu pada form-daftar.php.
Apabila kita klik tombol "(+) Tambah Baru" terdapat juga hover effect sebagai berikut:
Sebagai contoh kita tambah 2 data siswa baru, maka list siswa akan bertambah menjadi sebagai berikut:
Jika kita klik tindakan "Hapus" pada data siswa nomor 2 maka list siswa menjadi：
Dapat dilihat bahwa siswa dengan no 2 sudah dihapus, sehingga total siswa menjadi 2. Urutan nomor tetap sesuai dengan data input yang dimasukkan saat siswa berhasil melakukan pendaftaran.
4. Formulir Edit Siswa
Formulir Edit Siswa dijalankan menggunakan form-edit.php
Pada formulir edit siswa, pengguna dapat mengubah data siswa yang dipilih. Sebagai contoh kita edit data siswa no 1, maka akan langsung tertuju pada laman formulir edit sebagai berikut
Kemudian, kita ubah nama siswa no. 1 dari "Rayssa" menjadi "Alyssa"
Maka, data pada list siswa yang sudah mendaftar akan juga berubah sebagai berikut:
Cara Deploy Local Host
Untuk melakukan deploy web ini secara localhost, berikut ini adalah langkah-langkah yang harus diikuti:
1. Pastikan bahwa XAMPP sudah di-install, kemudian nyalakan XAMPP melalui aplikasi atau Command Line Interface (CLI) sebagai berikut:
Menyalakan XAMPP melalui CLI
Menyalakan XAMPP pada aplikasi
(pastikan MySQL dan Apache running)
2. Download repository yang tertera pada link github dalam bentuk zip
3. Unzip file tersebut dan pastikan posisi folder berada di tempat yang sama dengan htdocs pada XAMPP berada, sebagai contoh sebagai berikut:
Dapat dilihat bahwa folder hasil unzip yaitu pendaftaran-siswa-baru-main berada di dalam folder htdocs
4. Buka browser, dan buka http://localhost/phpmyadmin/
5. Masuk ke bagian Import lalu File to import, masukkan file sql yang berada di dalam folder repository github yang memiliki nama file calon_siswa.sql
Pastikan sudah ada database yang dipilih kemudian klik Import
6. Ubah config.php kemudian sesuaikan $nama_database dengan nama database yang dipilih
7. Buka browser dengan format http://localhost/[lokasi folder]/ sebagai contoh sebagai berikut:
Untuk menuju laman lain, Anda dapat mengklik tombol yang ada dari landing page atau langsung menambahkan /[nama file php] pada browser untuk menuju laman yang ingin dituju, misalnya http://localhost/pendaftaran-siswa/pendaftaran-siswa-baru/form-daftar.php maka akan keluar laman berikut ini:
