# Dokumentasi
Panduan penggunaan aplikasi.
*Catatan :*
1. Semua bentuk tanggal dalam aplikasi ini ditampilkan dalam format `YYYY-MM-DD` (4 digit tahun - 2 digit bulan - 2 digit tanggal).
2. Perpindahan antar halaman menggunakan `navigasi`.
3. Untuk kembali ke halaman awal, klik pada logo *Live Info*.
4. Pada setiap proses yang dijalankan, akan ada notifikasi pemberitahuan yang terletak di atas (bagian tengah `navigasi`). Notifikasi tersebut dapat ditutup dengan cara klik pada notifikasi tersebut.
5. Jika terjadi `error` atau kesalahan pada aplikasi, silahkan refresh halaman dengan menekan tombol `F5` pada keyboard.
# 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. Hanya user dengan hak `administrator` yang memiliki akses ke halaman ini.
- *Profil*, mengalihkan ke halaman untuk mengubah profil.
- *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, kategori, 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).
> Hanya user yang membuat pengumuman tersebut yang dapat mengubah dan/atau mengaktifkan/menonaktifkan pengumuman tersebut, terkecuali `administrator` memiliki hak kepada semua pengumuman.
###### *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 yang sedang aktif 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 dari user baru.
- *Username*, username yang digunakan pada saat `login`.
- *Password*, password yang digunakan pada saat `login`.
###### *Screenshot :*
---
# Profile Page
Tampilan yang disajikan setelah user klik pada tombol *Profil* pada `navigasi`.
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
Halaman ini memiliki `navigasi` yang sama seperti pada **Administrator Page**.
Pada bagian `konten` terdapat sebuah `form` untuk mengubah profil. Bagian profil yang dapat diubah adalah *Nama Lengkap* dan *Password*.
Ketika user klik pada `input` *Password*, maka kolom *Password* akan memiliki 3 `input`, yaitu:
- *Password Baru*: `password` baru.
- *Password Lama*: `password` lama yang ingin diganti.
- *Ulangi Password Baru*: user diminta untuk mengetik ulang `password` barunya.
Jika user klik pada tombol *Simpan*, maka data user tersebut akan diperbarui sesuai isi `form` tersebut. Setelah proses berhasil, maka user akan `logout` secara otomatis.
###### *Screenshot :*
---
Jika masih belum jelas, silahkan kirim e-mail ke gregorio@lepisi.ac.id.