Updated readme
This commit is contained in:
parent
d1d5ee1b0c
commit
10274602d9
181
README.md
181
README.md
@ -1,123 +1,128 @@
|
||||
# Dokumentasi
|
||||
Aplikasi berbasis web yang bertujuan menampilkan informasi berupa pengumuman kepada seluruh pihak pada [**Perguruan Tinggi LEPISI**][8c020676].
|
||||
# Landing Page
|
||||
Tampilan yang disajikan pada awal mengunjungi halaman ini.
|
||||
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
||||
|
||||
[8c020676]: http://lepisi.ac.id "LEPISI"
|
||||
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`.
|
||||
|
||||
## Tampilan
|
||||
Bagian `konten` berisi pengumuman-pengumuman yang tersedia (disediakan oleh admin). Pengumuman-pengumuman ini secara bergilir ditampilkan dengan animasi transisi `slide`.
|
||||
|
||||
### Resolusi
|
||||
Seluruh halaman ditampilkan dalam bentuk `full-screen`, sehingga menyesuaikan ukuran layar.
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
### 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>.
|
||||
|
||||
---
|
||||
# Login Page
|
||||
Tampilan yang disajikan ketika user akan melakukan `login`.
|
||||
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
||||
|
||||
### 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.
|
||||
|
||||
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*.
|
||||
|
||||
#### 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>
|
||||
|
||||
Tombol ini berada di sisi kanan atas halaman, jika user mengarahkan kursor ke sisi tersebut, maka tombol tersebut akan terlihat.
|
||||
|
||||
Pada bagian `konten` terdapat sebuah `form` yang memiliki 2 data yang harus di isi untuk dapat `login`, yaitu `username` dan `password`.
|
||||
|
||||
### 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>.
|
||||
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
### 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>.
|
||||
|
||||
---
|
||||
# Administrator Page
|
||||
Tampilan yang disajikan setelah user berhasil `login`.
|
||||
Terbagi menjadi 3 bagian, yaitu `navigasi`, `navigasi sekunder`, dan `konten`.
|
||||
|
||||
#### 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.
|
||||
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`.
|
||||
|
||||
##### 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.
|
||||
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`).
|
||||
|
||||
###### 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>.
|
||||
|
||||
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).
|
||||
|
||||
###### 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_).
|
||||
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
##### 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.
|
||||
|
||||
---
|
||||
# New-Post Page
|
||||
Tampilan yang disajikan ketika user ingin menambah pengumuman baru.
|
||||
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
||||
|
||||
#### 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>.
|
||||
|
||||
Bagian `navigasi` sama seperti yang ada pada <a href="#administratorpage">**Administrator Page**</a>.
|
||||
|
||||
### 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>.
|
||||
|
||||
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.
|
||||
|
||||
### 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>
|
||||
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
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>
|
||||
|
||||
---
|
||||
# Edit-Post Page
|
||||
Tampilan yang disajikan ketika user akan mengubah sebuah pengumuman.
|
||||
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
||||
|
||||
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>
|
||||
|
||||
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.
|
||||
|
||||
## Penggunaan
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
### 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`.
|
||||
---
|
||||
# Category Page
|
||||
Tampilan yang disajikan setelah user klik pada tombol *Kategori* pada `navigasi`.
|
||||
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
||||
|
||||
### 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>.
|
||||
Bagian `navigasi` sama seperti yang ada pada <a href="#administratorpage">**Administrator Page**</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.
|
||||
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.
|
||||
|
||||
### Pengumuman
|
||||
Pengguna hanya dapat melakukan perubahan pada pengumuman yang dibuat oleh dirinya sendiri.
|
||||
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.
|
||||
|
||||
#### 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`.
|
||||
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.
|
||||
|
||||
#### 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`.
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
#### Menonaktifkan Pengumuman
|
||||
Klik tombol `Matikan` pada pengumuman yang akan dinonaktifkan. Jika berhasil akan muncul label `Data berhasil dinonaktifkan`.
|
||||
---
|
||||
### 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`.
|
||||
|
||||
#### 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.
|
||||
Bagian `navigasi` sama seperti yang ada pada <a href="#administratorpage">**Administrator Page**</a>.
|
||||
|
||||
### Kategori
|
||||
Hanya `admin` yang dapat mengubah sebuah kategori.
|
||||
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.
|
||||
|
||||
#### 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.
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
#### 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).
|
||||
---
|
||||
# New-User Page
|
||||
Tampilan yang disajikan setelah user klik pada tombol *Kategori* pada `navigasi`.
|
||||
Terbagi menjadi 2 bagian, yaitu `navigasi` dan `konten`.
|
||||
|
||||
#### 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`.
|
||||
Bagian `navigasi` sama seperti yang ada pada <a href="#administratorpage">**Administrator Page**</a>.
|
||||
|
||||
#### 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`.
|
||||
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`.
|
||||
|
||||
### Label
|
||||
###### *Screenshot :*
|
||||
|
||||
|
||||
#### Menutup Label
|
||||
Klik pada label tersebut.~
|
||||
---
|
||||
Jika masih belum jelas, silahkan kirim e-mail ke <a href="mailto:gregorio@lepisi.ac.id">gregorio@lepisi.ac.id</a>.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user