[EAS Pemrograman Web]

ETS Pemrograman Web

Nama: Lucky Virgiawan Dwi Widodo
NRP: 5053231007
Kelas: Pemrograman Web (M)

Link Jawaban:
Link Demo: 

Link GitHub: 
Link Deploy: 

Soal dan Jawaban EAS Pemrogaman Web No 1-6:

Soal

  1. Deskripsikan Topik Final Project yang dikerjakan, dan jelaskan fitur yang tersedia di dalam aplikasi

  2. Jelaskan Arsitektur MVC Aplikasi Final Project yang dikerjakan

  3. Buatlah Desain UI dari aplikasi dan jelaskan fungsinya

  4. Implementasikan Aplikasi yang telah didesain dengan menggunakan teknologi web tanpa framework

  5. Buat PPT presentasi yang menunjang Demo Aplikasi

  6. Demokan aplikasi dengan membuat video dan diupload di Youtube.


Jawaban

  1. Topik Final Project: Web Bootcamp: Decoding

Final project kelompok kami yaitu membuat website bootcamp yang bernama Decoding. Website kami menggunakan sistem database MySQL dan PHP untuk backendnya.

Fitur website kami memuat:

  1. Login (admin dan user)

  2. Daftar (user)

  3. Upload file foto

  4. Download file kartu user (.pdf)

  5. Download file tabel daftar user (.pdf)

  6. Edit/hapus data user (.pdf)

Skenario:

  1. User Disambut dengan Home page yang menampilkan opsi Login (User/Admin) atau DaftarBaru (User)

  2. Form Registrasi (Khusus user). user akan memasukan Data sebagai atribut + Upload file foto

  3. User berhasil mendaftar dan mendapatkan File / kartu Member yang dapat dicetak/didownload menjadi file .PDF

  4. Admin bisa langsung memiliki hak akses masuk Halaman Daftar user terdaftar

  5. Admin dapat Mengedit / menghapus user terdaftar

  6. Admin dapat mencetak/mendownload Tabel daftar user ke file .PDF

  7. User yang memilih masuk lewat login memiliki hak masuk kedalam daftar user terdaftar namun tidak terdapat akses Edit/Hapus


  1. Arsitektur Model-View-Controller (MVC)

  • Model, bagian yang bertugas untuk menyiapkan, mengatur, memanipulasi, dan mengorganisasikan data yang ada di database.

    • Landing page : Menginformasikan apa saja yang akan didapatkan di Bootcamp ini

    • Login : Memvalidasi kredensial user (admin/user) terhadap data di database

    • Dashboard : Menampilkan fitur yang bisa diakses oleh user/admin

    • Registrasi: Menyimpan data pendaftaran user ke database, termasuk informasi profil dan file foto.

    • Edit/Hapus Data User: Mengupdate atau menghapus informasi user berdasarkan input admin.

    • Download File: Mengambil data file dari database untuk diunduh 

  • View, bagian yang bertugas untuk menampilkan informasi dalam bentuk Graphical User Interface (GUI).

    • Login Page: Menyediakan form login untuk admin dan user.

    • Registrasi Page: Menyediakan form pendaftaran untuk user baru, termasuk input untuk foto.

    • Form Edit Data: Menampilkan form untuk admin mengubah informasi user.

  • Controller, bagian yang bertugas untuk menghubungkan serta mengatur model dan view agar dapat saling terhubung.

    • Login: Mengambil data dari form login, memverifikasinya melalui model, dan mengarahkan user ke dashboard sesuai perannya.

    • Registrasi: Mengolah data dari form registrasi dan menyimpannya melalui model.

    • Dashboard: Mengambil data dari model dan menampilkan dashboard sesuai role user.

    • Upload/Download File: Mengatur alur untuk mengunggah atau mengunduh file.

    • Edit/Hapus Data: Mengolah permintaan admin untuk mengedit atau menghapus user.


  1. Desain UI

Link Figma: Final Project Web Programming | Bootcamp Website Design


  1. Landing Page

Tampilan utama website yang berisi informasi terkait bootcamp dan konten website


  1. Login Page

halaman Login Admin / User menentukan hak akses


  1. Dashboard (Peserta)

Tampilan dashboard website khusus untuk yang login menggunakan akun peserta.


  1. Dashboard (Admin)

Tampilan dashboard website yang dikhususkan untuk admin saja yang dapat mengakses list daftar peserta bootcamp


  1. Form Pendaftaran Peserta (Peserta)

Laman user melakukan registrasi member bootcamp yang berisikan data pribadi peserta dan beserta upload foto diri.\


  1. Manajemen List Peserta (Admin)

Laman list peserta yang hanya bisa diakses oleh admin. Berisi list daftar peserta yang mendaftar bootcamp. Admin dapat mengedit maupun menghapus data setiap peserta


  1. Form Edit Data Peserta (Admin)

Laman list peserta yang hanya bisa diakses oleh admin. Berisi list daftar peserta yang mendaftar bootcamp. Admin dapat mengedit maupun menghapus data setiap peserta


  1. Implementasi aplikasi (coding)
    Link GitHub: https://github.com/Ardyansyah3103/Decoding-Bootcamp-Regist


  1. Presentasi untuk menunjang demo aplikasi

Link Canva: Final Project Presentation | Bootcamp Website


  1. Demo website bootcamp

Link YouTube: https://youtu.be/uGmUCK5MmgI

Komentar

Posting Komentar

Postingan populer dari blog ini

[Tugas Study Case] Simple Landing Page

Gambar
Simple Landing Page Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link GitHub:  https://github.com/rukiwatsuyoidesune/Web-LandingPage Link Website:  https://topupin-landing-page.vercel.app Source Code: <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> TopUpin! </title> <link rel= "preconnect" href= "https://fonts.googleapis.com" > <link rel= "preconnect" href= "https://fonts.gstatic.com" crossorigin > <link href= "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" rel= "stylesheet" > <style> * { margin : 0px ; padding : 0px ; ...
Baca selengkapnya

[Tugas Pertemuan ke-1] Portofolio

Gambar
 Membuat Web Portofolio Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link Website Portofolio:  https://luckyvdw.vercel.app/ Link Repo GitHub:  https://github.com/rukiwatsuyoidesune/Web-Portfolio Link CV:  https://drive.google.com/file/d/1Hrije4sIHTRPKH9X0Nuk83PHi4sjhRvr/view?usp=sharing Link Blogspot:  https://luckyvdw.blogspot.com Pertemuan pertama minggu lalu, kami diajarkan pengantar web programming. Lalu sebelum kelas berakhir, kami diberi tugas untuk membuat website portofolio/pribadi dengan memuat CV. Berikut adalah yang saya lakukan untuk mengerjakan tugas ini: 1. Memahami konsep penggunaan elemen HTML. 2. Memahami perbedaan antara header, body, main, div, section, dan article. 3. Mengatur layout website dan menggunakan CSS. 4. Membuat dan mengupload repository ke github. 5. Menggunakan vercel untuk men-deploy website.
Baca selengkapnya

[Tugas Pertemuan ke-3] Tabel

Gambar
Membuat Tabel Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Tabel Nilai Siswa Source Code (HTML): <!DOCTYPE html> <html lang= "id" > <head> <title> HTML Table </title> <style> table , th , td { border : 2px solid black; border-collapse : collapse ; } th , td { padding : 10px ; } </style> </head> <body> <table style= "width:75%" > <thead style= "background-color: #305bb1;" > <tr> <th rowspan= "2" style= "color: white;" > Nama </th> <th colspan= "3" style= "color: white;" > Nilai </th> </tr> <tr> <th style= "color: white;" > Kimia </th>...
Baca selengkapnya