# Dokumentasi
Aplikasi berbasis web yang bertujuan menampilkan informasi berupa pengumuman kepada seluruh pihak pada [**Perguruan Tinggi LEPISI**][8c020676].

  [8c020676]: http://lepisi.ac.id "LEPISI"

## Tampilan

### Resolusi
Seluruh halaman ditampilkan dalam bentuk `full-screen`, sehingga menyesuaikan ukuran layar.

### Label Pemberitahuan
Label pemberitahuan adalah sebuah label yang berfungsi untuk menampilkan pemberitahuan kepada pengguna. Pemberitahuan ini dapat berupa `error`, maupun informasi tambahan (konfirmasi berhasil unggah data, dll). <a href="#menutup-label">`Cara menutup label`</a>.
![label](images/2017/09/2017-09-25-111613_1366x768_scrot.jpg)

### Tampilan Awal
Halaman yang pertama kali ditampilkan adalah halaman yang menampilkan pengumuman dalam ukuran teks yang besar. Jika jumlah pengumuman lebih dari 1, maka setiap pengumuman akan ditampilkan dengan metode animasi bergeser.<br>
Halaman inilah yang ditampilkan ke umum.
![tampilan-awal](images/2017/09/2017-09-25-110501_1366x768_scrot.png)

#### Navigasi
Secara kasat mata, terlihat tidak ada tombol navigasi pada halaman awal. Tetapi, telah tersedia tombol `masuk` (_login_) untuk `user` yang memiliki hak untuk mengubah/menambahkan/menonaktifkan sebuah pengumuman.<br>
![navigasi](images/2017/09/Screenshot from 2017-09-25 09-46-30_1.jpg)
Tombol ini berada di sisi kanan atas halaman, jika user mengarahkan kursor ke sisi tersebut, maka tombol tersebut akan terlihat.
![navigasi-masuk](images/2017/09/Screenshot from 2017-09-25 09-51-02_1.jpg)

### Halaman Login/Masuk
Pada halaman ini, pengguna dapat memasukkan data akun mereka (`username` dan `password`) untuk mendapatkan hak akses untuk mengubah/menambahkan/menonaktifkan pengumuman. <a href="#masuklogin">`Cara masuk/login`</a>.
![masuk-login](images/2017/09/Screenshot from 2017-09-25 09-53-27.jpg)

### Halaman Administrator
Setelah pengguna memasukkan data dengan benar, maka pengguna akan dialihkan ke halaman awal dengan tampilan yang berbeda.<br>
Pada halaman ini ditampilkan seluruh pengumuman yang telah dibuat dalam bentuk `stack` atau berupa kotak-kotak. Pada halaman ini juga terdapat 2 navigasi yaitu `primary` dan `secondary`. <a href="#masuklogin">`Cara masuk/login`</a>.
![halaman-admin](images/2017/09/2017-09-25-135939_1366x768_scrot.jpg)

#### Navigasi
Terdapat 2 jenis navigasi pada halaman administrator, yaitu `primary` dan `secondary`. Navigasi `primary` berfungsi untuk membantu pengguna untuk beralih antar halaman. Sedangkan navigasi `secondary` berfungsi untuk membantu pengguna untuk men-sortir pengumuman yang ingin ditampilkan.

##### Primary
Tersedia tombol `home` pada sisi kiri atas.<br>
> NB: Pada `mobile-view`, navigasi `primary` tersembunyi oleh tombol `menu` (3 garis horizontal) pada sisi kanan atas.

###### Hak Akses User
Terdapat tombol `keluar` (_logout_) yang terletak pada sisi kanan atas, yang berfungsi untuk melepaskan hak akses dari pengguna (_logout_). <a href="#keluarlogout">`Cara keluar/logout`</a>.
![navigasi-user](images/2017/09/Screenshot from 2017-09-25 09-58-10_1.jpg)

###### Hak Akses Admin
Terdapat 3 tombol yang terletak pada sisi kanan atas, yaitu `kategori`, `user`, dan `keluar`.<br>
Tombol `kategori` berfungsi untuk mengalihkan pengguna ke halaman `Kategori`.<br>
Tombol `user` berfungsi untuk mengalihkan pengguna ke halaman registrasi `user` baru.
Tombol `keluar` berfungsi untuk melepaskan hak akses dari pengguna (_logout_).
![navigasi-admin](images/2017/09/Screenshot from 2017-09-25 09-56-35_1.jpg)

##### Secondary
Navigasi ini berupa 4 tombol _sortir_ (`Semua`, `Aktif`, `Belum Aktif`, `Nonaktif`), yang berguna untuk men-_sortir_ pengumuman yang ingin ditampilkan berdasarkan status pengumuman tersebut.
![navigasi-secondary](images/2017/09/Screenshot from 2017-09-25 09-58-10_2.jpg)

#### Daftar Pengumuman
Setiap pengumuman ditampilkan dalam bentuk sebuah kotak yang memiliki warna sesuai warna dari kategori pengumuman tersebut.<br> Dalam setiap kotak pengumuman, terdapat tanggal berlaku dan tanggal berakhir pengumuman tersebut, isi/konten dari pengumuman tersebut, serta tombol `Ubah` dan tombol `Matikan`/`Aktifkan`. <a href="#mengubah-pengumuman">`Cara mengubah pengumuman`</a>. <a href="#menonaktifkan-pengumuman">`Cara menonaktifkan pengumuman`</a>. <a href="#mengaktifkan-pengumuman">`Cara mengaktifkan pengumuman`</a>.<br>
Posisi kotak paling kiri/awal (berbentuk +) merupakan tombol untuk menambahkan atau membuat pengumuman baru. <a href="#menambah-pengumuman-baru">`Cara menambah pengumuman`</a>.
![daftar-pengumuman](images/2017/09/2017-09-25-105313_1366x768_scrot_1.jpg)

### Halaman Registrasi User
Halaman ini ditujukan untuk keperluan penambahan `user` baru. Pada halaman ini tersedia sebuah formulir pendaftaran. Pada formulir ini terdapat 3 `input` berupa teks (`Nama Lengkap`, `Username`, dan `Password`), diikuti di bawahnya sebuah tombol registrasi. <a href="#registrasi-user-baru">`Cara registrasi user baru`</a>.
![registrasi-user](images/2017/09/Screenshot from 2017-09-25 10-01-40.jpg)

### Halaman Kategori
Pada halaman ini terbagi menjadi 2 sisi. Sisi sebelah kiri adalah formulir untuk menambahkan kategori baru. Sementara sisi sebelah kanan adalah daftar kategori yang telah dibuat.<br>
![kategori](images/2017/09/Screenshot from 2017-09-25 10-02-28.jpg)

Pada formulir penambahan kategori baru, terdapat 1 `input` berupa teks (diisi dengan nama kategori baru), 2 `input` berupa warna (`Background`, dan `Foreground`), dan diikuti 1 tombol penambahan. <a href="#menambah-kategori">`Cara menambah kategori`</a>.<br>
![tambah-kategori](images/2017/09/Screenshot from 2017-09-25 10-02-28_2.jpg)

Pada daftar kategori, untuk setiap kategori, terdapat nama kategori (termasuk warna `background` dan `foreground` kategori tersebut.), serta 2 tombol, yaitu tombol `Ubah` dan tombol `Matikan`/`Aktifkan`. Tombol `Ubah` berfungsi untuk mengalihkan pengguna ke halaman baru (memiliki layout sama seperti halaman kategori) untuk mengubah kategori tersebut (nama, `background`, atau `foreground`). Tombol `Matikan` berfungsi untuk menonaktifkan kategori tersebut sehingga tidak dapat digunakan dalam pembuatan pengumuman baru. Sedangkan tombol `Aktifkan` berfungsi untuk mengaktifkan sebuah kategori sehingga dapat digunakan dalam pembuatan pengumuman baru. <a href="#mengubah-kategori">`Cara mengubah kategori`</a>. <a href="#menonaktifkan-kategori">`Cara menonaktifkan kategori`</a>. <a href="#mengkatifkan-kategori">`Cara mengaktifkan kategori`</a>.<br>
![daftar-pengumuman](images/2017/09/Screenshot from 2017-09-25 10-02-28_3.jpg)


## Penggunaan

### Masuk/Login
Beralih ke <a href="#halaman-loginmasuk">`Halaman Login/Masuk`</a> lalu masukkan `username` dan `password` dari `user` yang sudah terdaftar, setelah itu klik tombol `Masuk`. Jika berhasil, maka akan muncul label `Berhasil masuk`.

### Keluar/Logout
Klik tombol `Keluar` yang terletak pada pojok kanan atas navigasi `primary`. Jika berhasil, maka akan muncul label `Berhasil keluar` dan dialihkan ke <a href="#halaman-awal">`Halaman Awal`</a>.

### Registrasi User Baru
Untuk mendaftarkan user baru, ada 3 data yang diperlukan pada <a href="#halaman-registrasi-user">`Halaman Registrasi User`</a>. `Nama Lengkap` merupakan nama lengkap/asli dari user baru. `username` dan `password` merupakan data yang nanti digunakan user baru untuk dapat `masuk`/`login`. Setelah semua data terisi, klik pada tombol `Registrasi`.
> NB: Hanya `admin` yang dapat menambahkan user baru.

### Pengumuman
Pengguna hanya dapat melakukan perubahan pada pengumuman yang dibuat oleh dirinya sendiri.

#### Membuat Pengumuman Baru
Klik pada tombol `+` yang ada pada <a href="#halaman-administrator">`Halaman Administrator`</a> (akan dialihkan ke <a href="#halaman-pengumuman-baru">`Halaman Pengumuman Baru`</a>). Pilih kategori dari pengumuman yang akan dibuat. Pilih tanggal berlaku dan tanggal berakhir pengumuman tersebut (jika tidak diubah, maka secara otomatis menggunakan tanggal hari ini). Setelah itu, isi konten dari pengumuman tersebut. Setelah selesai, klik tombol `Unggah` yang terletak di bawah formulir. Jika berhasil, maka akan ada label `Data berhasil diunggah`.

#### Mengubah Pengumuman
Klik tombol `Ubah` pada pengumuman yang akan diubah. Pengguna dapat mengubah kategori, tanggal berlaku dan berakhir, serta isi dari pengumuman tersebut. Setelah selesai, klik tombol `Ubah` yang terletak di bawah formulir. Jika berhasil akan muncul label `Data berhasil diperbarui`.

#### Menonaktifkan Pengumuman
Klik tombol `Matikan` pada pengumuman yang akan dinonaktifkan. Jika berhasil akan muncul label `Data berhasil dinonaktifkan`.

#### Mengaktifkan Pengumuman
Klik tombol `Aktifkan` pada pengumuman yang akan diaktifkan. Jika berhasil, maka akan muncul label `Data berhasil diperbarui` dan tanggal berlaku dari pengumuman tersebut secara otomatis diubah ke tanggal hari ini.

### Kategori
Hanya `admin` yang dapat mengubah sebuah kategori.

#### Menambah Kategori
Beralih ke <a href="#halaman-kategori">`Halaman Kategori`</a>. Masukkan nama kategori (tidak dapat sama dengan kategori yang sudah tersedia). Pilih warna `background` dan `foreground`. Klik tombol `Tambah`. Jika berhasil akan muncul label `Data berhasil diunggah`.
> NB: `Background` adalah warna latar yang digunakan pada pengumuman. `Foreground` adalah warna teks yang digunakan pada pengumuman.

#### Mengubah Kategori
Beralih ke <a href="#halaman-kategori">`Halaman Kategori`</a>. Klik tombol `Ubah` pada kategori yang akan diubah. Ubah data dari kategori tersebut. Klik `Ubah` yang terletak di bawah formulir (sisi sebelah kiri).

#### Menonaktifkan Kategori
Beralih ke <a href="#halaman-kategori">Halaman Kategori</a>. Klik tombol `Matikan` pada kategori yang akan dinonaktifkan. Jika berhasil, akan muncul label `Data berhasil dinonaktifkan` dan tombol `Matikan` berubah menjadi tombol `Aktifkan`.

#### Mengaktifkan Kategori
Beralih ke <a href="#halaman-kategori">`Halaman Kategori`</a>. Klik tombol `Aktifkan` pada kategori yang akan diaktifkan. Jika berhasil, akan muncul label `Data berhasil diperbarui` dan tombol `Aktifkan` berubah menjadi tombol `Matikan`.

### Label

#### Menutup Label
Klik pada label tersebut.~