Tugas 6 PWEB B 2021

Di postingan ini, saya akan menunjukkan proses pembuatan halaman login dan send message menggunakan Bootstrap. Hal-hal yang saya lakukan adalah:

1. Membuat halaman login

Pertama saya membuat halaman login terlebih dahulu. Saya menggunakan extension vscode yang mempunyai snippet untuk Bootstrap 5. Di snippet itu, style dan snippet Bootstrap 5 digunakan dari CDN yang disediakan oleh Bootstrap sendiri di dokumentasinya. Di login ini, saya membuat form yang mempunyai input username dan email, checkbox untuk remember me, dan tombol submit. Selain itu di halaman ini juga ada link ke halaman register dan contact us

2. Membuat halaman register

Meskipun untuk tugas tidak ada perintah membuat halaman register, saya tetap membuatnya karena tidak jauh berbeda dengan halaman login. Di halaman ini, selain ada form input username dan password, ada juga input email dan retype password. Selain itu, tidak ada checkbox untuk remember me. Mirip seperti halaman login juga, terdapat link ke halaman login dan contact us.

3. Membuat halaman contact us

Yang berikutnya adalah halaman contact us sebagai halaman untuk mengirim pesan. Di halaman ini saya membuat form yang memiliki input text nama, email, dan no telpon, juga input textarea untuk pesannya sendiri. Di halaman ini saya juga menggunakan Font Awesome untuk menambahkan icon sebagai dekorasi.

4. Deploy website

Seperti biasa, yang terakhir saya lakukan adalah men-deploy website. Sama seperti tugas-tugas sebelumnya, saya menggunakan github pages. Saya membuat sebuah repo baru di Github dan meng-push kodenya ke repo tersebut. Kemudian saya mengaktifkan github pages di setting repo tersebut sehingga website tersebut bisa diakses.

Websitenya bisa diakses dengan link berikut

Sementara source codenya bisa dilihat di link berikut

Tugas 6 MPPL A 2021

 Di postingan ini, saya akan menunjukkan prototype dari KAK Toko Online Shopi yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah prototype yang sudah kami buat:

Tugas 5 MPPL A 2021

 Di postingan ini, saya akan menunjukkan KAK dari studi kasus toko online yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah KAK yang sudah kami buat:

Tugas 5 PWEB B 2021

 Di postingan ini, saya akan menunjukkan proses pembuatan halaman survei status vaksinasi dan validasi formnya. Hal-hal yang saya lakukan adalah:

1. Membuat htmlnya

Hal yang pertama saya lakukan adalah membuat file htmlnya. Di halaman html tersebut, saya membuat form yang mempunyai input text nama, nrp, email, domisili, dropdown departemen, dan input bertipe radio untuk status vaksin. Saya menggunakan bootstrap sehingga untuk stylingnya hanya perlu menambahkan class-class ke element htmlnya.

2. Membuat javascript

Untuk web ini, saya menggunakan external javascript. Saya membuat file scriptnya lalu di html tadi saya menambahkan element <script> dengan atribut src ke file script yang telah dibuat. Di file script itu, saya membuat fungsi validateForm yang akan mengecek validasi form ketika form di-submit. Di fungsi itu, validitas setiap input diperiksa. Jika ada yang tidak valid, maka fungsi akan me-return false. Sedangkan jika valid, fungsi akan mengubah isi element dengan id success menjadi "Data berhasil di submit"

Untuk mengecek validitas setiap elemen, saya membuat fungsinya sendiri-sendiri. Saya juga membuat fungsi alertAndFocus yang akan digunakan fungsi yang mengecek validitas elemen untuk menampilkan alert dengan pesan alasan tidak valid dan membuat halaman focus ke elemen tersebut. Untuk syarat validitas, setiap elemen memiliki perbedaan. Untuk nama dan domisili, syarat validnya adalah sudah diisi. Begitu juga dengan departemen dan status vaksin, syarat validnya adalah sudah ada yang dipilih. Untuk NRP, selain ada syarat diisi, ada juga syarat input harus angka dan jumlah digitnya 14. Sedangkan untuk email, input harus memenuhi reges yang berfungsi untuk mengecek format email yang valid.

4. Men-deploy website

Langkah terakhir adalah men-deploy website tersebut. Masih sama seperti tugas sebelumnya, saya menggunakan github pages. Saya membuat sebuah repo baru di Github dan meng-push kodenya ke repo tersebut. Kemudian saya mengaktifkan github pages di setting repo tersebut sehingga website tersebut bisa diakses.

Websitenya bisa diakses dengan link berikut

Sementara source codenya bisa dilihat di link berikut

Tugas 4 PWEB 2021

 Di postingan ini, saya akan menjelaskan proses pembuatan website katalog yang saya kerjakan. Langkah-langkah yang saya lakukan adalah:

1. Membuat file html

Hal pertama yang saya lakukan adalah membuat file dengan nama index.html. Kemudian dengan memanfaatkan emmet di vscode, saya cukup mengetikkan html:5 untuk menggenerate boilerplate kode html 5. Kemudian saya tinggal menyesuaikan title dan lang.

2. Membuat kerangka website

Kemudian di dalam tag body, saya membuat kerangka websitenya. Pertama saya membuat header, tiga section yang masing-masing akan berisikan daftar produk, tentang, dan kontak, dan terakhir footer. Di dalam header saya menambahkan title, subtitle, dan juga nav. Di dalam nav sendiri saya menambahkan link ke section-section tadi. Dan terakhir, di dalam section produk saya menambahkan article untuk tiap baju.

3. Mengisi konten website

Langkah selanjutnya, saya menambahkan konten dari websitenya. Saya mencari gambar baju dari Google Image, kemudian diletakkan di folder img dan ditambahkan ke website. Saya juga memberikan deskripsi, harga, dan tombol beli di tiap baju. Tidak lupa juga saya menambahkan konten untuk section tentang dan kontak.

4. Menambahkan styling ke website

Kemudian setelah konten dirasa cukup, saya kemudian menambahkan styling. Untuk website ini saya menggunakan external css. Saya membuat file style.css di folder styles lalu mereference file itu di index.html. Di dalam file tersebut, saya memberikan styling ke class-class yang telah saya buat sebelumnya.

5. Men-deploy website

Setelah website dirasa cukup bagus, selanjutnya adalah men-deploy website tersebut. Masih sama seperti tugas sebelumnya, saya menggunakan github pages karena website ini masih statis. Saya membuat sebuah repo baru di Github dan meng-push kodenya ke repo tersebut. Lalu saya tinggal mengaktifkan github pages di setting repo tersebut dan website pun sudah bisa diakses.

Website ini bisa diakses dengan link berikut

Sementara source codenya bisa dilihat di link berikut

Tugas 4 MPPL A 2021

Di postingan ini, saya akan menampilkan Project Charter dari Moka Pos yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah Project Charter yang sudah kami buat:

Tugas 3 PWEB B 2021

 Pada postingan ini, saya akan menjelaskan hal-hal yang saya lakukan untuk melengkapi website warung tegal. Langkah-langkah yang saya lakukan adalah:

1. Menyalin html

Yang pertama kali saya lakukan adalah menyalin file html yang terdapat di contoh berikut. Saya juga mencari gambar yang mirip dengan gambar di contoh itu.

2. Menambahkan slideshow

Kemudian saya memutuskan untuk menambahkan slideshow gambar makanan dibawah navbar. Saya menggunakan referensi berikut dalam pembuatannya. Saya menyalin kode html, css, dan js dari referensi tersebut, kemudian menyesuaikannya dengan keperluan saya. 

3. Menambahkan video

Lalu saya juga memutuskan untuk menambahkan video. Video yang saya gunakan akan diputar dari Youtube sehingga tidak perlu meng-host videonya. Pertama saya menambahkan div baru dan meletakkan section course didalamnya. Div itu kemudian saya atur stylenya supaya float di kiri dan kemudian saya membuat section baru dengan class video. Kemudian saya mencari video yang sesuai, menekan tombol share, memilih embed dan menyalin kode iframenya ke section video tadi.

4. Men-deploy website

Sama seperti tugas-tugas sebelumnya, saya memilih menggunakan github pages. Saya membuat sebuah repo baru dan meng-push kode website ke repo tersebut. Kemudian saya mengaktifkan github pages dari setting repo tersebut. Website pun sudah bisa diakses.

Website ini bisa diakses dengan link berikut

Sementara source codenya bisa dilihat di link berikut