163 lines
8.8 KiB
Markdown
163 lines
8.8 KiB
Markdown
# 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 <a href="#landing-page">**Landing Page**</a>, hanya tidak terdapat tombol *Masuk*. Untuk kembali ke <a href="#landing-page">**Landing Page**</a>, 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 <a href="#administrator-page">**Administrator Page**</a>.
|
|
|
|
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 <a href="#administrator-page">**Administrator Page**</a>.
|
|
|
|
Pada bagian `konten` terdapat sebuah `form` yang sama seperti `form` pada <a href="#new-post-page">**New-Post Page**</a>, 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 <a href="#administrator-page">**Administrator Page**</a>.
|
|
|
|
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 <a href="#category-page">**Category Page**</a>.
|
|
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
|
|
|
Bagian `navigasi` sama seperti yang ada pada <a href="#administrator-page">**Administrator Page**</a>.
|
|
|
|
Bagian `konten` terdapat sebuah `form` yang sama seperti `form` pada <a href="#category-page">**Category Page**</a>. 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 <a href="#administrator-page">**Administrator Page**</a>.
|
|
|
|
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 <a href="#administrator-page">**Administrator Page**</a>.
|
|
|
|
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 <a href="mailto:gregorio@lepisi.ac.id">gregorio@lepisi.ac.id</a>.
|