diff --git a/README.md b/README.md index b05acce16df0c062011d029d65b8d673bbcd5ada..367c46dba55ee432e242279b6ab65fd728742732 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -<p align="center"><img src ="mocks/header.PNG"></p> +<img src ="mocks/header.PNG"> ## Apa itu PR-OJEK? @@ -7,16 +7,16 @@ PR-OJEK adalah sebuah aplikasi penyedia jasa ojek online berbasis web. Melalui w ### Getting Started Untuk menggunakan aplikasi ini, seorang pengguna harus melakukan login menggunakan sebuah akun. Untuk pengguna yang belum memiliki akun, dapat melakukan sign up terlebih dahulu. -<p align="center"><img src ="mocks/login.PNG" width="400"></p> +<img src ="mocks/login.PNG" width="400"> ### Bagaimana cara menjadi Driver? Seorang pengguna dapat menggunakan satu akun untuk menjadi penumpang sekaligus driver ojek online. Terdapat beberapa cara untuk mendaftarkan diri sebagai seorang driver diantaranya, 1. Saat mendaftarkan akun baru, tandai pilihan 'Also sign me up as a driver!' -<p align="center"><img src ="mocks/register.PNG" width="400"></p> +<img src ="mocks/register.PNG" width="400"> 2. Dengan akun yang sudah pernah dibuat, pada tab profile, pilih edit profile, kemudian atur opsi Status Driver agar menyala (warna hijau). (Opsi status driver pada akun yang mendaftar sebagai driver sejak sign up akan menyala secara otomatis). -<p align="center"><img src ="mocks/edit-profile-driver.PNG" width="400"></p> +<img src ="mocks/edit-profile-driver.PNG" width="400"> ## Dapatkah saya berhenti menjadi seorang driver? Untuk berhenti menjadi seorang driver, atur opsi Status Driver agar berada di posisi mati (warna abu) pada pengaturan profil. @@ -26,15 +26,15 @@ PR-OJEK menyediakan halaman profil bagi setiap penggunanya. Fitur yang didukung yaitu, 1. Mengubah foto profil -<p align="center"><img src ="mocks/edit-profile-upload.PNG" width="400"></p> +<img src ="mocks/edit-profile-upload.PNG" width="400"> 2. Mengubah nama panjang dan nomor telepon -<p align="center"><img src ="mocks/edit-profile.PNG" width="400"></p> +<img src ="mocks/edit-profile.PNG" width="400"> -3. Mengubah status dari penumpang menjadi driver atau sebaliknya. +3. Mengubah status dari penumpang menjadi driver atau sebaliknya. -4. Khusus driver, ditampilkan pula informasi berupa rata-rata rating berdasarkan seluruh vote penumpang yang diberikan kepadanya. -<p align="center"><img src ="mocks/profile.PNG" width="400"></p> +4. Khusus driver, ditampilkan pula informasi berupa rata-rata rating berdasarkan seluruh vote penumpang yang diberikan kepadanya. +<img src ="mocks/profile.PNG" width="400"> ### Apa itu Preferred Location? Preferred location merupakan setiap lokasi yang dilayani pengguna jika berperan sebagai driver. @@ -43,35 +43,35 @@ Preferred location merupakan setiap lokasi yang dilayani pengguna jika berperan 1. Buka profil, klik gambar pensil di sebelah tulisan 'Preferred Locations'. 2. Untuk menambah lokasi, tuliskan nama lokasi dibawah 'Add New Location', kemudian klik ADD. -<p align="center"><img src ="mocks/edit-preferred-location.PNG" width="400"></p> +<img src ="mocks/edit-preferred-location.PNG" width="400"> 3. Untuk mengubah nama lokasi, klik pensil di sebelah nama lokasi yang ingin diubah. -<p align="center"><img src ="mocks/edit-preferred-location2.PNG" width="400"></p> +<img src ="mocks/edit-preferred-location2.PNG" width="400"> 4. Ketik nama baru, kemudian klik save. -<p align="center"><img src ="mocks/edit-preferred-location3.PNG" width="400"></p> +<img src ="mocks/edit-preferred-location3.PNG" width="400"> 5. Untuk menghapus, klik silang di baris nama lokasi yang ingin dihapus, kemudian klik OK. -<p align="center"><img src ="mocks/delete-preferred-location.PNG" width="400"></p> +<img src ="mocks/delete-preferred-location.PNG" width="400"> ### Melakukan Pemesanan #### Memilih Lokasi 1. Klik tab **Order** 2. Tuliskan lokasi penjemputan dan tujuan 3. Anda dapat memasukkan pula nama driver yang kamu inginkan (opsional) -4. Klik tombol **Next** -<p align="center"><img src ="mocks/order-ojek.PNG" width="400"></p> +4. Klik tombol **Next** +<img src ="mocks/order-ojek.PNG" width="400"> #### Memilih Driver 1. Pada halaman ini, akan tampil daftar driver yang kamu inginkan dan driver-driver lain yang tersedia sesuai dengan lokasi pengguna -2. Untuk memilih driver, klik tombol **I Choose You** di samping driver yang kamu pilih -<p align="center"><img src ="mocks/select-driver.PNG" width="400"></p> +2. Untuk memilih driver, klik tombol **I Choose You** di samping driver yang kamu pilih +<img src ="mocks/select-driver.PNG" width="400"> #### Memberikan Rating dan Komentar 1. Setelah perjalanan selesai, pengguna dapat memberikan rating kepada driver (skala 1-5) 2. Pengguna juga dapat menuliskan komentar kepada driver -3. Klik **Complete Order** -<p align="center"><img src ="mocks/complete-order.PNG" width="400"></p> +3. Klik **Complete Order** +<img src ="mocks/complete-order.PNG" width="400"> ### Melihat History Terdapat 2 tab pada **History**, yaitu **My Previous History** dan **Driver History** @@ -79,17 +79,17 @@ Terdapat 2 tab pada **History**, yaitu **My Previous History** dan **Driver Hist My Previous History akan berisi daftar perjalanan dimana pemilik akun menjadi pelanggan. Informasi yang ditampilkan berupa foto dan nama driver, tanggal perjalanan, rute, dan juga rating serta komentar yang diberikan kepada driver. Terdapat pula tombol **Hide** yang digunakan untuk tidak menampilkan history perjalanan tersebut. (Namun data tetap tersimpan pada basis data). -<p align="center"><img src ="mocks/history-penumpang.PNG" width="400"></p> +<img src ="mocks/history-penumpang.PNG" width="400"> #### Driver History Driver History akan berisi daftar perjalanan dimana pemilik akun menjadi driver. Informasi yang ditampilkan berupa foto dan nama pelanggan, tanggal perjalanan, rute, dan juga rating serta komentar yang diberikan oleh pelanggan. Terdapat pula tombol **Hide** yang digunakan untuk tidak menampilkan history perjalanan tersebut. (Namun data tetap tersimpan pada basis data). -<p align="center"><img src ="mocks/history-driver.PNG" width="400"></p> +<img src ="mocks/history-driver.PNG" width="400"> ## TOOLS > Tidak digunakan framework apapun pada web ini. -> [color=green] + ### Front-End Tools yang digunakan adalah HTML dan CSS untuk tampilan. Java Script digunakan untuk mengatur perubahan pada tampilan yang berada pada client, seperti validasi input, pengaturan tab yang aktif, edit preferred location, pemberian rating, dsb.