diff --git a/README.md b/README.md index 26b8f84d7891c56b93350f368b2897131e92e551..d981e773d684496568cc56b6e720ad124d5a5f62 100644 --- a/README.md +++ b/README.md @@ -1,151 +1,125 @@ -# Tugas 1 IF3110 Pengembangan Aplikasi Berbasis Web - -Membuat sebuah Website Toko Buku -## Deskripsi Singkat - -Pada tugas besar ini, Anda diminta untuk membuat aplikasi *toko buku online* **berbasis web** yang memungkinkan seorang pengguna untuk membeli dan memberi komentar pada buku. Untuk menggunakan aplikasi ini, seorang pengguna harus melakukan *login*. - -Anda diminta untuk membuat tampilan sedemikian hingga mirip dengan tampilan pada contoh. Website yang diminta tidak responsive. Desain tampilan tidak perlu dibuat indah. Icon dan jenis font tidak harus sama dengan contoh. Warna font, garis pemisah, dan perbedaan ukuran font harus terlihat sesuai contoh. Format rating dan waktu harus terlihat sesuai contoh. Perhatikan juga **tata letak** elemen-elemen. +# Laporan Tugas Besar 1 IF3110 Pengembangan Aplikasi Berbasis Web ## Anggota Tim -Setiap kelompok beranggotakan **3 orang dari kelas yang sama**. Jika jumlah mahasiswa dalam satu kelas modulo 3 menghasilkan 1, maka hanya 1 kelompok terdiri dari 4 mahasiswa. Jika jumlah mahasiswa modulo 3 menghasilkan 2, maka ada dua kelompok yang beranggotakan 4 orang. +**Kelompok JLAS** -## Petunjuk Pengerjaan +<span style="font-family: Cursive"> +Alvin Limassa 13516039 <br /> +Suhendi 13516048 <br /> +Louis Leslie 13516087 <br /> +Jeffry 13516156 <br /> +</span> -1. Buatlah organisasi pada gitlab dengan format "IF3110-2018-KXX-nama_kelompok", dengan XX adalah nomor kelas. -2. Tambahkan anggota tim pada organisasi anda. -3. Fork pada repository ini dengan organisasi yang telah dibuat. -4. Ubah hak akses repository hasil Fork anda menjadi **private**. -5. Silakan commit pada repository anda (hasil fork). Lakukan berberapa commit dengan pesan yang bermakna, contoh: `add register form`, `fix logout bug`, jangan seperti `final`, `benerin dikit`. Disarankan untuk tidak melakukan commit dengan perubahan yang besar karena akan mempengaruhi penilaian (contoh: hanya melakukan satu commit kemudian dikumpulkan). Sebaiknya commit dilakukan setiap ada penambahan fitur. **Commit dari setiap anggota tim akan mempengaruhi penilaian.** Jadi, setiap anggota tim harus melakukan commit yang berpengaruh terhadap proses pembuatan aplikasi. -6. Edit file readme ini semenarik mungkin (gunakan panduan Markdown language), diperbolehkan untuk merubah struktur dari readme ini. (Soal tidak perlu dipertahankan). -7. Pada Readme terdapat tampilan aplikasi, dokumentasi yang menjelaskan website yang Anda buat, dan penjelasan mengenai pembagian tugas masing-masing anggota (lihat formatnya pada bagian **pembagian tugas**). -8. Merge request dari repository anda ke repository ini dengan format **Nama kelompok** - **NIM terkecil** - **Nama Lengkap dengan NIM terkecil** sebelum **26 Oktober 2018 23.59**. +## Preview -## Tools +### **Login** -1. Untuk backend, wajib menggunakan **PHP** tanpa framework apapun. Harap diperhatikan, Anda harus mengimplementasikan fitur menggunakan HTTP method yang tepat. -2. Gunakan **MySQL** untuk menyimpan data. -3. Untuk frontend, gunakan Javascript, HTML dan CSS. **Tidak boleh** menggunakan library atau framework CSS atau JS seperti JQuery atau Bootstrap. CSS sebisa mungkin ada di file yang berbeda dengan HTML (tidak inline styling). + -## Spesifikasi +Pada halaman ini, pengguna dapat melakukan login dengan username yang telah didaftarkan. Bila username yang diinput belum terdapat di database, atau password yang diinput tidak sesuai dengan username yang diinput, aplikasi akan menampilkan peringatan kepada user bahwa username/password yang diinput tidak sah. -### Login +#### *pesan error* + - +Bila username dan password yang diinput terdapat di basis data dan cocok, pengguna akan di-*redirect* ke halaman Search Book. -Pengguna dapat melakukan login sebagai user. Login hanya membandingkan username dan password saja, dan tidak perlu proteksi apapun. Identitas pengguna yang sudah login akan disimpan sebagai cookie dalam browser (misal cookie menyimpan id=2 menandakan bahwa pengguna dengan id 2 sudah login). Identitas tersebut tidak boleh disimpan sebagai parameter HTTP GET. Jika cookie ini tidak ada, maka pengguna dianggap belum login dan aplikasi akan selalu mengarahkan (*redirect*) pengguna ke halaman ini, meskipun pengguna membuka halaman yang lain. Masa berlaku cookie ditentukan sendiri oleh peserta. +### **Register** -**--Bonus--** -Data yang disimpan pada cookie berupa `access token` yang dibangkitkan secara random dan memiliki `expiry time`. Jika `access token` ini tidak ada atau tidak valid, maka pengguna dianggap belum login. `Expiry time` sebuah `access token` berbeda dengan waktu berlaku cookie. + -### Register +Pada halaman ini, pengguna dapat mendaftarkan diri agar dapat menggunakan aplikasi ini. Pengguna harus mengisi semua biodata yang diminta. Terdapat beberapa ketentuan dalam mengisi biodata, antara lain username harus berjumlah 5-20 karakter alfanumerik, email harus sesuai dengan format email, password minimal 6 karakter, dan nomor telepon memiliki 9-12 angka. - +Bila biodata yang diisi sudah lengkap dan sesuai ketentuan, pengguna akan otomatis melakukan login, dan di-*redirect* ke halaman Search Book. -Pengguna dapat mendaftarkan diri sebagai user agar dapat menggunakan aplikasi ini. Pengguna tidak dapat mendaftarkan diri menggunakan email dan/atau username yang sudah pernah digunakan sebelumnya. **Validasi email dan username dilakukan menggunakan AJAX**. Jika email dan username valid akan ditandai dengan lambang centang seperti pada gambar. Setelah mendaftarkan diri, pengguna akan secara otomatis login dengan user yang baru didaftarkannya. +### **Search Book** -### Search-Books + - +Search Books merupakan halaman utama yang ditampilkan ketika user telah login. Pada halaman Search Books, terdapat sebuah input field yang dapat diisi pengguna untuk melakukan pencarian buku berdasarkan judul. -Search-Books merupakan halaman utama yang ditampilkan ketika user telah login. Pada halaman Search-Books, terdapat sebuah input field dapat diisi pengguna untuk melakukan pencarian buku berdasarkan judul. +Setelah pengguna menekan tombol search, pengguna akan dibawa ke halaman Hasil Search. -Setelah pengguna menekan tombol search, pengguna akan dibawa ke halaman Search-Result. +Pada bagian atas terdapat Navigation Bar, yang terdiri dari logo, tombol logout, dan tulisan dengan format "Hi, \<username\>". Selanjutnya, terdapat menu bar yang menampilkan 3 menu utama seperti pada gambar. Menu yang sedang dibuka diberikan warna background yang berbeda sebagai penanda halaman apa yang sedang dibuka pengguna. -Perlu diperhatikan, pada bagian atas terdapat logo, tombol logout, dan tulisan dengan format "Hi, username". Selanjutnya, terdapat menu bar yang menampilkan 3 menu utama seperti pada gambar. Menu yang sedang dibuka diberikan warna background yang berbeda sebagai penanda halaman apa yang sedang dibuka pengguna. +### **Hasil Search** -### Search-Result + - +Pada Hasil Search, ditampilkan daftar buku dan jumlah hasil pencarian. Pada tiap entri buku ditampilkan judul, penulis, gambar, potongan sinopsis, serta rating dari buku tersebut. Jika tombol detail ditekan, pengguna akan dibawa ke halaman Detail Buku dari buku yang bersangkutan. -Pada Search-Result, ditampilkan daftar buku dan jumlah hasil pencarian. Pada tiap entri buku ditampilkan judul, penulis, gambar, potongan sinopsis, serta rating dari buku tersebut. Jika tombol detail ditekan, pengguna akan dibawa ke halaman Book-Detail dari buku yang bersangkutan. +### **Detail Buku** -### Book-Detail - - + Pada halaman ini, ditampilkan detail buku yang terdiri dari judul, penulis, gambar, rating, serta komentar dan rating dari user lain. -Pada halaman ini juga disediakan dropdown untuk memasukkan jumlah buku yang ingin dipesan dan tombol order. Jika tombol order ditekan, proses pemesanan akan dilakukan **menggunakan AJAX**, yang berarti halaman tidak akan di-*refresh* setelah tombol order ditekan. Tidak ada proses pembayaran yang ditangani oleh sistem. - - - -Setelah proses pemesanan selesai dilakukan, akan muncul notifikasi pada browser pengguna. **Jangan menampilkan notifikasi setelah tombol order ditekan, tetapi setelah mendapat response dari AJAX**. Informasi yang diberikan oleh notifikasi mengikuti contoh. +Pada halaman ini juga disediakan dropdown untuk memasukkan jumlah buku yang ingin dipesan dan tombol order. Jika tombol order ditekan, proses pemesanan akan dilakukan dan akan muncul notifikasi seperti gambar di bawah. -**--Bonus--** -Tampilan notifikasi dibuat semirip mungkin dengan contoh. + -### Profile +### **Profile** - + -Pada halaman ini, ditampilkan nama lengkap, username, email, alamat, nomor telepon, dan foto profil. Pada bagian kanan atas terdapat tombol edit, jika pengguna menekan tombol tersebut, pengguna dibawa ke halaman Edit-Profile. +Pada halaman ini, ditampilkan nama lengkap, email, alamat, nomor telepon, dan foto profil. Pada bagian kanan atas terdapat tombol edit, yang bila pengguna menekan tombol tersebut, pengguna dibawa ke halaman Edit Profile. -### Edit-Profile +### **Edit Profile** - + Pada halaman ini, pengguna dapat mengubah nama yang ditampilkan, alamat, nomor telepon, dan foto profil. -Pada bagian bawah halaman, terdapat tombol Back dan Save. Jika tombol Back ditekan, pengguna kembali ke halaman Profile tanpa mengubah informasi profilnya. Jika tombol save ditekan, nama dan alamat pengguna akan diganti sesuai input field, dan pengguna dibawa ke halaman Profile. +Pada bagian bawah halaman, terdapat tombol Back dan Save. Jika tombol Back ditekan, pengguna kembali ke halaman Profile tanpa mengubah informasi profilnya. Jika tombol Save ditekan, nama, alamat dan nomor telepon pengguna akan diganti dengan data yang diisi pada *input field*, dan pengguna akan dibawa balik ke halaman Profile. -### History +### **History** - + Pada halaman ini, ditampilkan daftar buku yang sudah pernah dipesan oleh pengguna, diurutkan berdasarkan waktu pemesanan dengan pesanan paling baru merupakan entri paling atas. -Pada tiap entri pada history, terdapat tombol review. Jika tombol review ditekan, pengguna akan dibawa ke halaman Review. Jika pengguna sudah memberikan review untuk order tersebut, tombol review akan hilang dari entri yang bersangkutan. +Pada tiap entri pada History, terdapat tombol Review. Jika tombol Review ditekan, pengguna akan dibawa ke halaman Review. Jika pengguna sudah memberikan review untuk order tersebut, tombol review akan hilang dari entri yang bersangkutan. +##### *tombol detail hilang setelah memberikan review* + -### Review +### **Review** - + -Pada halaman ini, pengguna dapat memberikan review untuk buku yang dipesan berupa rating dan komentar. Review yang diberikan dari halaman ini akan muncul pada halaman Book-Detail dari buku yang di-review. Setelah selesai, user akan dibawa kembali ke halaman History. +Pada halaman ini, pengguna dapat memberikan *review* untuk buku yang dipesan berupa rating dan komentar. *Review* yang diberikan pada halaman ini akan muncul pada halaman Detail Buku dari buku yang di-*review*. Setelah selesai, user akan dibawa kembali ke halaman History. -**--Bonus--** -Rating dibuat seperti contoh. +##### *memberikan review untuk buku* + -### Validasi - -Validasi **wajib** dilakukan pada *client-side*, dengan menggunakan **javascript** bukan HTML 5 input type, yaitu: -- Setiap field pada form tidak boleh kosong. -- Email harus sesuai format email. -- Jumlah buku yang dipesan minimal 1. -- Rating buku hanya boleh bernilai 1-5. -- Nama pengguna maksimal 20 karakter. -- Nomor telepon pengguna minimal 9 digit dan maksimal 12 digit. - -## Knowledge - -Untuk meringankan beban tugas ini, ada berberapa keyword yang bisa anda cari untuk menyelesaikan tugas ini. -- HTTP methods: get, post, put, delete -- CSS: margin, padding, header tag, font-size, text-align, float, clear, border, color, div, span, placeholder, anchor tag. -- Javascript : XMLHTTPRequest, alert. -- PHP: mysqli_connect, mysql_query, $_GET, $_POST, $_COOKIE, var_dump, print_r, echo, require, fungsi header. -- SQL query: SELECT, INSERT, UPDATE, DELETE, WHERE, operator LIKE. -Jika ada pertanyaan silakan tanyakan lewat milis. ### Pembagian Tugas -*Setiap anggota kelompok diwajibkan untuk mengerjakan bagian tampilan dan fungsionalitas.* **Tampilan** -1. Login : 1351xxxx, 135xxxxx -2. Register : 135xxxxx -3. Lanjutkan ... +1. Login : 135116048 +2. Register : 13516048 +3. Search : 13516087 +4. Hasil Search : 13516087 +5. History : 13516039 +6. Review : 13516039 +7. Detail Buku : 13516087 +8. Profile : 13516156 +9. Edit Profile : 13516156 +10. Navigation Bar : 13516039 **Fungsionalitas** -1. Login : 135xxxxx, 135xxxxx -2. Register : 135xxxxx -3. Fungsionalitas : 135xxxxx,135xxxxx -4. Lanjutkan... +1. Login : 135116048 +2. Register : 13516048 +3. Search Buku : 13516087 +4. Order Buku : 13516087 +5. Show History : 13516039 +6. Show Review : 13516039 +7. Show Detail Buku : 13516087 +8. Show Profile : 13516156 +9. Edit Profile : 13516156 +10. Validasi Form : 13516039, 13516048, 13516087, 13516156 ## About -Asisten IF3110 2018 - -Audry | Erick | Holy | Kevin J. | Tasya | Veren | Vincent H. +Kelompok JLAS Tugas Besar 1 IF3110 Pengembangan Aplikasi Berbasis Web 2018 Dosen : Yudistira Dwi Wardhana | Riza Satria Perdana | Muhammad Zuhri Catur Candra - diff --git a/assets/preview/detail.jpg b/assets/preview/detail.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c938c51afb5c107d3d29772752c2a2490f363d30 Binary files /dev/null and b/assets/preview/detail.jpg differ diff --git a/assets/preview/edit_profile.jpg b/assets/preview/edit_profile.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4e60c748ff898d95e9393e577dbd703605368ca7 Binary files /dev/null and b/assets/preview/edit_profile.jpg differ diff --git a/assets/preview/error_login.jpg b/assets/preview/error_login.jpg new file mode 100644 index 0000000000000000000000000000000000000000..52a0000f3577f9481ed47b6734b11610213db558 Binary files /dev/null and b/assets/preview/error_login.jpg differ diff --git a/assets/preview/history.jpg b/assets/preview/history.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ba1d8d562402665ba788899eff7bf6233336a3d3 Binary files /dev/null and b/assets/preview/history.jpg differ diff --git a/assets/preview/history2.jpg b/assets/preview/history2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4ae9f5f5fbb006f45a09f9d1b89dff9620c96991 Binary files /dev/null and b/assets/preview/history2.jpg differ diff --git a/assets/preview/login.jpg b/assets/preview/login.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a2372479bc3f570f73c8f4a501ff74bd5b12352b Binary files /dev/null and b/assets/preview/login.jpg differ diff --git a/assets/preview/notification.jpg b/assets/preview/notification.jpg new file mode 100644 index 0000000000000000000000000000000000000000..29becedfd37504b4caba4860e1ab7bbf169c1b36 Binary files /dev/null and b/assets/preview/notification.jpg differ diff --git a/assets/preview/profile.jpg b/assets/preview/profile.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a9682637f2b6fc23c3cfe47eee509b8e26c03fb8 Binary files /dev/null and b/assets/preview/profile.jpg differ diff --git a/assets/preview/register.jpg b/assets/preview/register.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8a5b12bda228274c260dec43f60c5520e6c9aa76 Binary files /dev/null and b/assets/preview/register.jpg differ diff --git a/assets/preview/review.jpg b/assets/preview/review.jpg new file mode 100644 index 0000000000000000000000000000000000000000..027ebf8ee9075887594da82040fef68c8099c798 Binary files /dev/null and b/assets/preview/review.jpg differ diff --git a/assets/preview/review2.jpg b/assets/preview/review2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..aaeb2f6d21c50b9d8f2441afec856cad11ecf8a7 Binary files /dev/null and b/assets/preview/review2.jpg differ diff --git a/assets/preview/search.jpg b/assets/preview/search.jpg new file mode 100644 index 0000000000000000000000000000000000000000..62e7ab790a4058065d5f10b42490bf2ce4ccb372 Binary files /dev/null and b/assets/preview/search.jpg differ diff --git a/assets/preview/search_result.jpg b/assets/preview/search_result.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c7a403f7cb6614530ac5bfbb0baf649d73c00049 Binary files /dev/null and b/assets/preview/search_result.jpg differ