# Landing Page
Tampilan yang disajikan pada awal mengunjungi halaman ini.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Pada `navigasi` terdapat logo *Live Info* pada bagian kiri, dan terdapat tombol *Masuk* atau `login` yang hanya dapat di lihat jika anda mengarahkan kursor ke tombol tersebut. Tombol ini berada di sisi kanan `navigasi`.
Bagian `konten` berisi pengumuman-pengumuman yang tersedia (disediakan oleh admin). Pengumuman-pengumuman ini secara bergilir ditampilkan dengan animasi transisi `slide`.
###### *Screenshot :*
---
# Login Page
Tampilan yang disajikan ketika user akan melakukan `login`.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Bagian `navigasi` mirip dengan `navigasi` pada **Landing Page**, hanya tidak terdapat tombol *Masuk*. Untuk kembali ke **Landing Page**, hanya perlu klik pada logo *Live Info*.
Pada bagian `konten` terdapat sebuah `form` yang memiliki 2 data yang harus di isi untuk dapat `login`, yaitu `username` dan `password`.
###### *Screenshot :*
---
# Administrator Page
Tampilan yang disajikan setelah user berhasil `login`.
Terbagi menjadi 3 bagian, yaitu `navigasi`, `navigasi sekunder`, dan `konten`.
Pada `navigasi` terdapat logo *Live Info* pada bagian kiri, serta 4 tombol pada bagian kanan. Tombol-tombol tersebut adalah:
- *Dokumentasi*, membuka tab baru yang akan menampilkan halaman ini.
- *Kategori*, mengalihkan ke halaman untuk mengubah dan menambah kategori.
- *User*, mengalihkan ke halaman untuk menambah user baru.
- *Keluar*, berfungsi jika user ingin `logout`.
Bagian `navigasi sekunder` merupakan navigasi yang berfungsi untuk menyaring pengumuman yang ingin di lihat. Terdapat 4 kategori penyaringan, yaitu:
- *Semua*, menampilkan semua pengumuman yang telah dibuat.
- *Aktif*, menampilkan semua pengumuman yang aktif.
- *Belum Aktif*, menampilkan semua pengumuman yang belum aktif.
- *Nonaktif*, menampilkan semua pengumuman yang tidak aktif (`expired`).
Bagian `konten` berisi daftar semua pengumuman yang telah dibuat (atau yang telah disaring melalui `navigasi sekunder`). Daftar ini ditampilkan dalam bentuk box/kotak yang terdiri dari 3 bagian, yaitu pada bagian atas merupakan informasi singkat tentang pengumuman tersebut (pembuat, tanggal dibuat, masa aktif, tanggal edit/ubah), lalu pada bagian tengah terdapat isi dari pengumuman tersebut, dan pada bagian bawah terdapat 2 tombol, yaitu:
- *Ubah*, untuk mengubah pengumuman yang dipilih.
- *Aktifkan*/*Matikan*, mengaktifkan/menonaktifkan pengumuman yang dipilih.
> Jika pengumuman tidak aktif atau `expired` maka kedua tombol tersebut tidak tersedia, tetapi digantikan dengan tulisan yang menyatakan bahwa pengumuman tersebut tidak aktif).
###### *Screenshot :*
---
# New-Post Page
Tampilan yang disajikan ketika user ingin menambah pengumuman baru.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Bagian `navigasi` sama seperti yang ada pada **Administrator Page**.
Pada bagian `konten` terdapat sebuah `form` yang harus di isi oleh user untuk membuat pengumuman baru. Terdapat 4 data yang harus di isi, yaitu:
- *Kategori*, yaitu kategori dari pengumuman tersebut.
- *Berlaku dari*, tanggal pengumuman tersebut mulai aktif.
- *Berlaku sampai*, tanggal pengumuman tersebut `expire`.
- *Konten*, isi dari pengumuman tersebut. User dapat memodifikasi isi dari pengumuman yang ingin dibuat, seperti menebalkan huruf (`bold`), memiringkan huruf (`italic`), dan lain-lain.
###### *Screenshot :*
---
# Edit-Post Page
Tampilan yang disajikan ketika user akan mengubah sebuah pengumuman.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Bagian `navigasi` sama seperti yang ada pada **Administrator Page**.
Pada bagian `konten` terdapat sebuah `form` yang sama seperti `form` pada **New-Post Page**, hanya pada `form` ini telah terisi data sesuai pengumuman yang akan diubah.
###### *Screenshot :*
---
# Category Page
Tampilan yang disajikan setelah user klik pada tombol *Kategori* pada `navigasi`.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Bagian `navigasi` sama seperti yang ada pada **Administrator Page**.
Bagian `konten` terbagi menjadi 2 bagian, yaitu pada bagian kiri adalah `form` untuk membuat kategori baru, dan pada bagian kanan merupakan daftar kategori yang telah dibuat.
Untuk membuat kategori baru, pengguna harus mengisi `form` yang tersedia, yang terdapat 3 data yang harus di isi lengkap, yaitu:
- *Nama*, nama dari kategori yang akan dibuat.
- *Background*, warna latar yang akan ada pada pengumuman yang menggunakan kategori ini.
- *Foreground*, warna tulisan yang akan digunakan pada pengumuman yang menggunakan kategori ini.
Pada daftar kategori, user dapat memodifikasi sebuah kategori. Pada setiap kategori, terdapat nama kategori tersebut beserta warna *background* dan warna *foreground* dari kategori tersebut. Lalu di bawahnya terdapat 2 tombol yaitu:
- *Ubah*, mengalihkan ke halaman untuk mengubah sebuah kategori.
- *Aktifkan*/*Matikan*, mengaktifkan/menonaktifkan kategori yang dipilih.
> Kategori yang tidak aktif tidak akan ditampilkan dalam pembuatan pengumuman baru.
> Jika terdapat pengumuman aktif yang dengan kategori yang dipilih, maka kategori tersebut tidak dapat dinonaktifkan.
###### *Screenshot :*
---
### Edit-Category Page
Tampilan yang disajikan setelah user klik tombol *Ubah* pada daftar kategori yang terdapat pada **Category Page**.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Bagian `navigasi` sama seperti yang ada pada **Administrator Page**.
Bagian `konten` terdapat sebuah `form` yang sama seperti `form` pada **Category Page**. Pengguna harus mengisi data yang ingin diubah dari kategori tersebut.
###### *Screenshot :*
---
# New-User Page
Tampilan yang disajikan setelah user klik pada tombol *Kategori* pada `navigasi`.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Bagian `navigasi` sama seperti yang ada pada **Administrator Page**.
Pada bagian `konten` terdapat sebuah `form` untuk mendaftarkan user baru yang terdiri dari 3 data yang harus diisi, yaitu:
- *Nama Lengkap*, nama yang ditampilkan ke user lain.
- *Username*, username yang digunakan pada saat `login`.
- *Password*, password yang digunakan pada saat `login`.
###### *Screenshot :*
---
Jika masih belum jelas, silahkan kirim e-mail ke gregorio@lepisi.ac.id.