Tugas 8

Posted May 1st 2023

Silaturahmi Online

Gabrielle Immanuel Osvaldo Kurniawan (5025211135) / Victor Gustinova (5025211159) / Rayssa Ravelia (5025211219) / PWEB (A)

Tugas ke-8 kami adalah membuat sistem rancangan UI untuk aplikasi Silaturahmi Online Hari Raya untuk memperingati Hari Raya Idul Fitri 1 Syawal 1444 Hijriah, 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.

Berikut ini adalah link repository dari sistem pendaftaran siswa baru yang kami buat:

Link github : github

Link deploy web: N/A (dijalankan pada local host)

Penjelasan & Screenshot Web

Sistem kami dibagi menjadi 2 bagian utama yaitu:

1. 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 (adminpass). Password harus sesuai untuk masuk ke halaman mailbox.

Apabila password yang dimasukkan tidak sesuai maka akan dikeluarkan pesan sebagai berikut:

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 contact book ketika isian tidak lengkap :

Forum

Halaman forum memiliki layout seperti pada gambar di atas. Halaman ini memiliki 3 bagian utama yaitu:

a. Navigation Bar

Terdapat logo yang bisa di klik untuk kembali ke halaman utama (index.php),

b. Forum

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 balasan akan disembunyikan)

c. Button tambah pesan

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 di atas. 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.

2. 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.

Query select dalam bentuk tabel untuk mailbox.php

Query select dalam bentuk card untuk forum.php

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 gagal dapat dilihat pada tampilan alert di mailbox sebagai berikut :

Page updated

Google Sites

Report abuse