PBKK - FP

 PBKK - FP

Nama: Muhammad Revel Wivanto
Kelas: PBKK - B
NRP: 5025211233
DOC: https://github.com/revelwivanto/FP_PBKK
Publish: https://mrevel.blogspot.com/2023/12/pweb-tugas-10.html
Sheet: https://docs.google.com/spreadsheets/d/1fuV89FRAN5Gd7b_I1ZtpqPWKp8yxm4vNaJPdoyC99co/edit#gid=0

DESKRIBSI

Sebagai developer yang baik, kita ingin memberikan experience yang baik kepada pelanggan/user buatan kita, walaupun bisa lebih customizable apabila kita membuat dengan scratch, kita juga bisa membuat menggunakan frameworks, khususnya untuk projek saya, saya menggunakan google framework untuk mempermudah pengguna dalam menggunakan website, dimana pengguna sudah familiar dengan environment google.

Model (Model)

  • Google Sheets sebagai Database:
    • Model ini mewakili struktur data yang disimpan dalam spreadsheet Google Sheets. Setiap lembar dalam spreadsheet mungkin merepresentasikan satu entitas atau objek dalam aplikasi .
    • Skrip yang menangani operasi CRUD (Create, Read, Update, Delete) untuk memanipulasi data dalam spreadsheet ini.

View (Tampilan)

  • Halaman Web yang Dibuat dengan Google Script:
    • Terdiri dari HTML, CSS, dan JavaScript yang mengatur tampilan dan interaksi pengguna.
    • Tampilan mungkin menampilkan tabel data dari Google Sheets, formulir untuk memasukkan data baru, dan fungsi pencarian atau penyaringan.

Controller (Kontroler)

  • Skrip Kontroler di Google Apps Script:
    • Skrip ini bertanggung jawab atas logika aplikasi. Ini berinteraksi dengan tampilan dan model.
    • Mengatur permintaan pengguna seperti menyimpan data, mengambil data dari spreadsheet, memanipulasi data sesuai permintaan pengguna, seperti pengurutan atau pencarian, dan mengirim email berdasarkan input dari pengguna.

Alur Kerja Aplikasi

  1. Interaksi Pengguna:

    • Pengguna berinteraksi dengan tampilan yang disediakan melalui browser.
    • Mereka dapat mengirimkan permintaan seperti menyimpan data, melakukan pencarian, atau mengirim email.
  2. Tanggapan Kontroler:

    • Kontroler (dalam skrip Google Apps Script) menangkap permintaan pengguna dari tampilan.
    • Ini memproses permintaan, memanggil fungsi yang sesuai pada model (Google Sheets) untuk membaca, menulis, atau memanipulasi data.
  3. Pembaharuan Tampilan:

    • Setelah operasi selesai, hasilnya dikirim kembali ke tampilan untuk ditampilkan ke pengguna.
    • Pengguna melihat perubahan yang mereka minta, seperti data yang diperbarui atau hasil pencarian yang disaring.
  4. Keterlibatan Google Apps Script:

    • Seluruh proses ini terjadi di lingkungan Google Apps Script, memungkinkana mengelola data di Google Sheets, mengatur logika aplikasi, dan menampilkan halaman web yang berinteraksi dengan pengguna.

    Rancangan Arsitektur Website

    User side:

    • Dapat menginput data dari google form, sheets, ataupun langsung di website
    • Home Page yang menampilkan dekoratif dan logo perusahaan
    • Work Page yang menampilkan dashboard customizable
    • Contact Page yang memungkinkan pengiriman pesan

    Admin side:

    • Dapat menginput, edit, dan delete data dari google form, sheets, ataupun langsung di website

      DATABASE:

       

      Front End:





       

      CONTROL BACKEND:

      1. Input Data ke Dashboard

    • Fungsi Kontroler:
      • Kontroler akan menangani permintaan input data baru dari pengguna.
      • Saat pengguna mengisi formulir atau mengirimkan data melalui dashboard, kontroler akan menangkap permintaan tersebut.
      • Ini mungkin melibatkan validasi data, pengolahan input, dan kemudian memperbarui model (Google Sheets) dengan data yang baru.

    2. Edit Data di Dashboard

    1. Fungsi Kontroler:
      • Kontroler akan menangani permintaan pengeditan data yang ada pada dashboard.
      • Ketika pengguna mengubah entri pada tabel atau formulir, kontroler akan menangkap perubahan tersebut.
      • Ini melibatkan identifikasi data yang akan diubah, validasi perubahan, dan memperbarui entri yang relevan dalam model (Google Sheets).

     

3. Search Data di Dashboard

  • Fungsi Kontroler:
    • Kontroler akan menangani permintaan pencarian data dari dashboard.
    • Ketika pengguna memasukkan kata kunci pencarian, kontroler akan menangkap input tersebut.
    • Kontroler akan meneruskan permintaan pencarian ke model (Google Sheets), mungkin dengan menggunakan filter atau query untuk mengembalikan data yang sesuai dengan kriteria pencarian.

4. Sort Data di Dashboard

  • Fungsi Kontroler:
    • Kontroler akan menangani permintaan pengurutan data yang ditrigger oleh pengguna pada dashboard.
    • Saat pengguna memilih opsi pengurutan pada kolom tertentu, kontroler akan menangkap permintaan tersebut.
    • Kontroler akan menyusun ulang data yang relevan dalam model (Google Sheets) sesuai dengan kriteria pengurutan yang dipilih.

5. Mengirim Pesan

  • Fungsi Kontroler:
    • Kontroler akan menangani pengiriman pesan dari dashboard.
    • Ketika pengguna memilih untuk mengirim pesan, kontroler akan menangkap konten pesan, informasi penerima, dan detail lain yang diperlukan.
    • Kontroler akan menggunakan fungsi email atau integrasi yang tersedia (seperti Google Apps Script Mail Service) untuk mengirimkan pesan ke penerima yang ditentukan
    • https://youtu.be/CfGgoOTyIUw


      Referensi:
      https://media.neliti.com/media/publications/226198-pemanfaatan-google-spreadsheet-sebagai-m-60c3be38.pdf
      https://journal.atim.ac.id/index.php/jeat/article/view/405/310

     

Comments

Popular posts from this blog

PWEB4_FORM

Tugas4_Photolab