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.

Website ini dapat diakses di https://tugas-8-pweb-pendaftaran-siswa.herokuapp.com/

Source code dapat diakses di https://github.com/raassh-23/tugas-8-pweb-pendaftaran-siswa

Tugas 10 MPPL A 2021

Pada postingan ini, saya akan menjelaskan Manajemen Sumber Daya dari proyek yang telah kelompok kami kerjakan.

Nama Kelompok : 

• Muhammad Nur Abdurrauf (05111940000140)
• Syamil Difaul Haq Sukur (05111940000196)

Berikut detail dari Manajemen Sumber Daya yang telah kami kerjakan :  

Studi Kasus ETS MPPL 2021

 Pada postingan ini, kami akan menjelaskan studi kasus untuk ETS MPPL 2021 yang telah kami kerjakan

Nama Kelompok : 

• Nabil Fikri Arief (05111940000086)
• Muhammad Nur Abdurrauf (05111940000140)
• Syamil Difaul Haq Sukur (05111940000196)

Berikut detail dari hasil pekerjaan kami:

Berikut adalah video demonya:

ETS PWEB B 2021

 Nama: Muhammad Nur Abdurrauf

NRP: 05111940000140

Berikut adalah jawaban dari soal no 1-3 ETS PWEB:

Untuk soal no 4 yaitu membuat front end website, berikut adalah video demonya:

Link website: https://raassh-23.github.io/ets-pweb-b-2021/

Link source code: https://github.com/raassh-23/ets-pweb-b-2021

ETS MPPL A 2021

Nama: Muhammad Nur Abdurrauf

NRP: 05111940000140

Berikut adalah jawaban dari soal ETS MPPL.

Tugas 9 MPPL A 2021

 Di postingan ini, saya akan menunjukkan manajemen mutu untuk Toko Online Shopi yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah detail manajemen mutu yang sudah kami buat:

Tugas 7 PWEB B 2021

Di postingan ini, saya akan menunjukkan proses pembuatan halaman yang menampilkan isi html lain dan halaman memilih daerah yang dibuat dengan menggunakan ajax. Langkah yang saya lakukan adalah:

1. Halaman index

Pertama saya membuat halaman index untuk mengarahkan ke halaman tugas-tugasnya. Saya menggunakan bootstrap untuk stylingnya. Di halaman ini hanya terdapat 2 button yang mengarah ke tugas 1 (Menampilkan data dari halaman lain) dan tugas 2 (Menampilkan nama daerah)

2. Menampilkan data dari halaman lain

Disini saya mengikuti dan memodifikasi tutorial di halaman website ini. Saya membuat tugas1.html yang merupakan tempat ajax digunakan dan juga tampil.html yang berisi data yang akan ditampilkan. Di halaman tugas1.html, terdapat button yang akan memanggil script ajax untuk menampilkan isi dari tampil.html. Selain itu juga terdapat button untuk kembali ke index.

Kode htmlnya

Kode javascriptnya

3. Menampilkan nama daerah

Disini saya mengikuti dan memodifikasi tutorial berikut. Tetapi saya tidak membuat backend-nya dan memilih untuk menggunakan api yang telah ada, yaitu api berikut. Untuk menggunakan api tersebut, yang melakukan fork reponya dan mengaktifkan github pages untuk repo tersebut. Kemudian saya membuat halaman tugas2.html yang akan berisikan form select untuk provinsi, kabupaten, kecamatan, dan kelurahan, juga button untuk kembali ke index. Untuk select provinsi, data diambil menggunakan ajax ketika halaman sudah siap/terbuka. Sedangkan untuk select kabupaten, kecamatan, dan kelurahan, data diambil ketika ada perubahan pilihan.

Kode htmlnya

Kode javascriptnya

4. Deploy

Seperti tugas-tugas sebelumnya, saya menggunakan github pages untuk tempat deploynya. Saya membuat sebuah repo baru di Github, meng-push kodenya ke repo tersebut dan mengaktifkan github pages di setting repo tersebut sehingga website tersebut bisa diakses.

Website tugas ini bisa diakses dengan link berikut

Sementara source code tugas ini bisa dilihat di link berikut

Tugas 8 MPPL A 2021

Di postingan ini, saya akan menunjukkan manajemen biaya untuk Toko Online Shopi yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah manajemen biaya yang sudah kami buat: 

Berikut adalah video presentasi kami:

Tugas 7 MPPL A 2021

Di postingan ini, saya akan menunjukkan manajemen penjadwalan untuk Toko Online Shopi yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah jadwal yang sudah kami buat: