129 lines
6.9 KiB
Markdown
129 lines
6.9 KiB
Markdown
# 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="#landingpage">**Landing Page**</a>, hanya tidak terdapat tombol *Masuk*. Untuk kembali ke <a href="#landingpage">**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.
|
|
- *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 <a href="#administratorpage">**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="#administratorpage">**Administrator Page**</a>.
|
|
|
|
Pada bagian `konten` terdapat sebuah `form` yang sama seperti `form` pada <a href="#newpostpage">**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="#administratorpage">**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 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 <a href="#categorypage">**Category Page**</a>.
|
|
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
|
|
|
Bagian `navigasi` sama seperti yang ada pada <a href="#administratorpage">**Administrator Page**</a>.
|
|
|
|
Bagian `konten` terdapat sebuah `form` yang sama seperti `form` pada <a href="#categorypage">**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="#administratorpage">**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 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 <a href="mailto:gregorio@lepisi.ac.id">gregorio@lepisi.ac.id</a>.
|