diff --git a/README.md b/README.md index b8dd34f..03b36dc 100644 --- a/README.md +++ b/README.md @@ -5,42 +5,70 @@ Aplikasi berbasis web yang bertujuan menampilkan informasi berupa pengumuman kep ## 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). +![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.
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 untuk _masuk_ untuk _user_ yang memiliki hak untuk mengubah/menambahkan/menghapus sebuah pengumuman.
+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/menghapus sebuah pengumuman.
+![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. - -#### Resolusi -Seluruh halaman ditampilkan dalam bentuk `full-screen`, sehingga menyesuaikan ukuran layar. +![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/menghapus pengumuman. +![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.
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`. +![halaman-admin](images/2017/09/Screenshot from 2017-09-25 09-56-35.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.
-> NB: Pada _mobile view_, navigasi _primary_ tersembunyi oleh tombol _menu_ (3 garis horizontal) pada sisi kanan atas. +> NB: Pada `mobile-view`, navigasi `primary` tersembunyi oleh tombol `menu` (3 garis horizontal) pada sisi kanan atas. ###### Hak Akses User -Terdapat tombol _keluar_ yang terletak pada sisi kanan atas, yang berfungsi untuk melepaskan hak akses dari pengguna (`logout`). +Terdapat tombol `keluar` (_logout_) yang terletak pada sisi kanan atas, yang berfungsi untuk melepaskan hak akses dari pengguna (_logout_). +![navigasi-user](images/2017/09/Screenshot from 2017-09-25 09-58-10_1.jpg) -###### Hak Akses Root -Terdapat 3 tombol yang terletak pada sisi kanan atas, yaitu _kategori_, _user_, dan _keluar_.
-Tombol _kategori_ berfungsi untuk mengalihkan pengguna ke halaman _Kategori_.
-Tombol _user_ berfungsi untuk mengalihkan pengguna ke halaman registrasi _user_ baru. -Tombol _keluar_ berfungsi untuk melepaskan hak akses dari pengguna (`logout`). +###### Hak Akses Admin +Terdapat 3 tombol yang terletak pada sisi kanan atas, yaitu `kategori`, `user`, dan `keluar`.
+Tombol `kategori` berfungsi untuk mengalihkan pengguna ke halaman `Kategori`.
+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 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.
Posisi kotak paling kiri/awal (berbentuk +) merupakan tombol untuk menambahkan atau membuat pengumuman baru. +![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. +![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.
+![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.
+![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 `Hapus`. Tombol `Ubah` berfungsi untuk mengalihkan pengguna ke halaman baru (memiliki layout sama seperti halaman kategori) untuk mengubah kategori tersebut (nama, `background`, atau `foreground`). Tombol `Hapus` berfungsi untuk menonaktifkan kategori tersebut sehingga tidak dapat digunakan dalam pembuatan pengumuman baru.
+![daftar-pengumuman](images/2017/09/Screenshot from 2017-09-25 10-02-28_3.jpg) diff --git a/images/2017/09/2017-09-25-105313_1366x768_scrot_1.jpg b/images/2017/09/2017-09-25-105313_1366x768_scrot_1.jpg new file mode 100644 index 0000000..a9bf8ea Binary files /dev/null and b/images/2017/09/2017-09-25-105313_1366x768_scrot_1.jpg differ diff --git a/images/2017/09/2017-09-25-110501_1366x768_scrot.png b/images/2017/09/2017-09-25-110501_1366x768_scrot.png new file mode 100644 index 0000000..93b78e7 Binary files /dev/null and b/images/2017/09/2017-09-25-110501_1366x768_scrot.png differ diff --git a/images/2017/09/2017-09-25-111613_1366x768_scrot.jpg b/images/2017/09/2017-09-25-111613_1366x768_scrot.jpg new file mode 100644 index 0000000..cb7d03a Binary files /dev/null and b/images/2017/09/2017-09-25-111613_1366x768_scrot.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 09-46-30_1.jpg b/images/2017/09/Screenshot from 2017-09-25 09-46-30_1.jpg new file mode 100644 index 0000000..28b4656 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 09-46-30_1.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 09-51-02_1.jpg b/images/2017/09/Screenshot from 2017-09-25 09-51-02_1.jpg new file mode 100644 index 0000000..69d9b7e Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 09-51-02_1.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 09-53-27.jpg b/images/2017/09/Screenshot from 2017-09-25 09-53-27.jpg new file mode 100644 index 0000000..bc363e8 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 09-53-27.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 09-56-35.jpg b/images/2017/09/Screenshot from 2017-09-25 09-56-35.jpg new file mode 100644 index 0000000..15b5031 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 09-56-35.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 09-56-35_1.jpg b/images/2017/09/Screenshot from 2017-09-25 09-56-35_1.jpg new file mode 100644 index 0000000..b7da1ff Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 09-56-35_1.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 09-58-10_1.jpg b/images/2017/09/Screenshot from 2017-09-25 09-58-10_1.jpg new file mode 100644 index 0000000..415c009 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 09-58-10_1.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 09-58-10_2.jpg b/images/2017/09/Screenshot from 2017-09-25 09-58-10_2.jpg new file mode 100644 index 0000000..ae492da Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 09-58-10_2.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 10-01-40.jpg b/images/2017/09/Screenshot from 2017-09-25 10-01-40.jpg new file mode 100644 index 0000000..a09eb66 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 10-01-40.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 10-02-28.jpg b/images/2017/09/Screenshot from 2017-09-25 10-02-28.jpg new file mode 100644 index 0000000..10f7b18 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 10-02-28.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 10-02-28_2.jpg b/images/2017/09/Screenshot from 2017-09-25 10-02-28_2.jpg new file mode 100644 index 0000000..c490122 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 10-02-28_2.jpg differ diff --git a/images/2017/09/Screenshot from 2017-09-25 10-02-28_3.jpg b/images/2017/09/Screenshot from 2017-09-25 10-02-28_3.jpg new file mode 100644 index 0000000..26fb0b1 Binary files /dev/null and b/images/2017/09/Screenshot from 2017-09-25 10-02-28_3.jpg differ