Silaturahmi Online
Kelompok PWeb (Silaturahmi Online)
Link repository: repo
Link deploy: N/A (Deploy dilakukan pada localhost)
Tugas kedelapan adalah membuat sistem rancangan UI untuk aplikasi Silaturahmi Online Hari Raya, kemudian diimplementasikan menggunakan bahasa php dan juga database SQL. Sistem ini memiliki 2 mode akses yaitu guest (masyarakat) dan admin (pejabat). Guest (masyarakat) memiliki akses untuk menuliskan pesan dan melihat balasan pesan dalam forum sedangkan admin (pejabat) dapat melihat pesan yang disampaikan masyarakat kemudian memberikan balasan spesifik pada pesan tersebut.
Sistem kami dibagi menjadi 2 bagian utama yaitu:
Frontend
Dashboard
Halaman Dashboard berisi 2 menu yaitu user atau admin, adanya kedua menu ini adalah untuk mengarahkan user ke halaman yang sesuai. Pada menu admin pengguna diminta untuk memasukkan password pada modal yang ditampilkan sebagai berikut :
Karena adminnya hanya 1 pejabat yaitu bapak Eri Cahyadi maka hanya disediakan 1 password tanpa perlu register akun admin dengan password seperti yang tertera pada modal. Password harus sesuai untuk masuk ke halaman mailbox.
Form tambah pesan (contact book)
Halaman contact book memiliki layout seperti gambar diatas terdiri dari 2 bagian yaitu navbar dan form. Navbar dapat digunakan untuk kembali ke halaman index.php dengan klik pada ikon logo surabaya. Pada form pengguna dapat scroll atau memperbesar field isian pesan sehingga lebih mudah terbaca. Button kirim akan mentrigger proses backend tambah pesan hanya ketika semua field form sudah terisi. Berikut tampilan ketika isian tidak lengkap :
Forum
Halaman forum memiliki layout seperti pada gambar diatas. Halaman ini memiliki 3 bagian utama yaitu : navbar dimana terdapat logo yang bisa di klik untuk kembali ke halaman utama (index.php), forum yang mana menampilkan isi dari database kepada pengguna sistem dalam bentuk card yang disusun secara mansory (masyarakat dapat melihat balasan walikota pada footer card pesan mereka, jika pesan belum mendapat balasan maka footer card akan disembunyikan), button tambah pesan yang digunakan untuk berpindah ke halaman form pengisian contact book.
Form balas pesan
Halaman balas pesan memiliki layout seperti gambar diatas. Pada halaman ini terdapat navbar dan form penambahan balasan. Pada form juga ditampilkan nama pengirim pesan dan isi pesannya namun bagian tersebut tidak bisa diedit. Admin hanya dapat menambahkan balasan pesan pada field yang tersedia kemudian mengirimnya ke database menggunakan proses balas pesan.
Mailbox admin
Halaman mailbox admin memiliki layout tampilan seperti gambar diatas. Pada halaman ini terdapat navbar dengan fungsi yang sama dengan halaman sebelumnya kemudian tabel pesan lengkap sesuai yang ada pada database. Pada halaman ini admin dapat melihat pesan dan memberikan balasan dengan menekan button balas. Setiap pesan hanya dapat dibalas 1 kali dan tidak bisa diedit, button akan terdisable ketika sudah menerima balasan.
Backend (SQL&PHP)
Database sql
Untuk database dibuat sebuat table bernama pesan dengan atribut seperti berikut :
Tabel tersebut memiliki identifier id dan valuenya akan auto increment saat adanya penambahan baris data. Setiap baris data mewakili pesan yang diberikan oleh user. Nama pengirim pesan, isi pesan, serta balasan yang diberikan akan disimpan pada setiap baris. Nama pengirim bersifat null karena pengirim pesan tidak wajib memberikan nama. Karena balasan tidak langsung diberikan, maka balasan dapat bernilai null.
Menampilkan pesan
Untuk menampilkan pesan dalam halaman forum maupun mailbox digunakan script php untuk mengambil data dari database menggunakan query select. Hasil select akan disimpan dalam variabel kemudian akan ditampilkan semuanya dalam bentuk card (dalam forum) maupun tabel (dalam mailbox) sehingga dapat dilihat oleh pengguna.
Proses tambah pesan
Proses tambah pesan akan dimulai ketika user sudah mengisi form dengan benar. Dalam proses ini data isian yang ada pada form akan dibaca kemudian disimpan dalam variabel. Kemudian dibuat query ‘insert into’ untuk memasukkan data tersebut dalam tabel database. Query akan mengembalikan status sukses jika query berjalan dengan baik jika tidak maka akan mengembalikan status gagal. Status tersebut akan tampak pada pengguna dalam bentuk pesan alert di halaman forum. Berikut adalah tampilan penambahan pesan berhasil dan penambahan pesan gagal :
Proses balas pesan
Proses balas pesan akan dimulai ketika form balasan sudah diisi oleh admin (pejabat) dengan benar. Sama seperti proses penambahan pesan ke database pada proses ini dilakukan penambahan pesan_balasan ke database. Hasil sukses dan gagall dapat dilihat pada tampilan alert di mailbox sebagai berikut :
Komentar
Posting Komentar