Kerangka dan Perancangan Sketsa Commuter

Baca Juga

Pembuatan website Commuter.

Website ini bertujuan untuk mempermudah sesorang mendaptkan informasi terkini mengenai kendaraan, lalulintas, cuaca dll. Seorang user bisa berinteraksi dengan user lainnya. Mari kita simak bersama berbagai tahapan-tahapan pembuatan programnya.

Pertama membuat kerangka untuk mempermudah pembuatan programnya.

A. Kerangka untuk halaman utama sebelum login.

Gambar 1 . Sketsa sebelum login

Jadi , user bisa mengakses informasi meski tanpa login namun terbatas.




Gambar 2 : Tampilan menu utama sebelum login

Berikut adalah menu-menu dalam halam utama tanpa login:

1. Home : untuk beranda

2. Daftar : untuk mendaftar

3. Bantuan : berisi cara pemakaian program

4. About : Berisi tentang pencipta program dll


Di dalam halaman utama juga ada form info dimana disitu akan menampilkan berbagai informasi terbaru/ berita yang sedang terjadi. Seperti cuaca , keadaan lalu lintas dll.

B. Kerangka untuk halaman utama setelah login .

Untuk masuk halaman utama dengan session login harus mengisi data terlebih dahulu, jika belum terdaftar maka user harus mendaftar terlebih dahulu lewat menu daftar, jika sudah memiliki akun maka user harus login dengan akun yang sudah terdaftar. Berikut adalah sketsa login :




Gambar 3 : Sketsa login

Program ini meiliki 2 sesi login :

1. Login sebagai pelanggan

2. Login sebagai Driver (Sopir)

a. Berikut adalah kerangka halaman utama setelah login. (login pelanggan)




Gambar 4 : Kerangka menu setelah login (pelanggan)

Dalam sesi login sebagai pelanggan ada berbagai menu-menu :

1. Home : Beranda , dimana disini ada menu tempat sekarang (check in) terus ada tempat tujuan.

2. Terminal / pangkalan ojek : menu ini berisi tentang informasi terminal / pangkalan ojek.

3. Chat/pesan : merupakan tempat dimana pelanggan dengan driver (sopir) bisa berinteraksi disinilah terjadi berbagai proses termasuk transaksi dll.

4. Profil : berisi informasi profil user.

5. Bantuan : berisi cara pemakaian aplilkasi , contoh tutorial dll

6. Logout : untuk keluar dari sesi maka user akan menekan tombol ini maka user akan di direct ke halam utama (tanpa login).

Gambar 5 : kerangka home dalam login pelanggan


Gambar 6 : Kerangka tampilan menu Terminal/pangkalan ojek




Gambar 7 : kerangka tampilan menu chat/pesan


b. Login sebagai Driver .

Login sebagai driver (sopir) menu menu sedikit berbeda dengan menu login sebagai pelanggan berikut adalah kerangkanya .




Gambar 8 : Kerangka menu utama setelah login sebagai Driver (sopir)

Dalam sesi meu login sebagai driver (sopir) berikut adalah menu-menu yang ada di dalamnya.

1. Home : halaman depan

2. Kendaraan : Di dalam menu ini terdapat profil/spesifikasi mobil yang di pakai oleh sang driver contohnya sperti informasi plat nomor , harga dari jasanya dll.

3. Chat/pesan : berisi komunikan antara driver dengan pengguna.

4. Profil : berisi informasi /biodata sang drver.

5. Bantuan:panduan penggunaan aplikasi

6. Logout : keluar dari sesi login menuju menu utama tanpa login.




Gambar 9 : Kerangka menu home untuk sesi login sebagai driver.



Gambar 10 : kerangka menu kendaraan

Dalam menu kendaraan ini berisi informasi tentang kendaraan, spesifikasi dll. Jika informasi mau di update / ingin di lakukan perubahan , disitu sudah ada sebuah tombol yang akan d direct ke halaman perubahan sesuai dengan apa yang ingin driver rubah.





Gambar 11 : kerangka menu chat/pesan.


Desain Program.

1. Tanpa Login.


Untuk mencari driver, pelanggan harus mengisi/menginput tempat sekarang artinya tempat sekarang dia berada, yang kedua yaitu harus memasukan tujuan.


Setelah melakukan inputan tempat dengan benar maka program akan menampilkan data yang di cari oleh pelanggan. Jika tidak maka program akan memberikan keterangan . sebagai berikut




Menu login.


Menu daftar : untuk mendaftar program akan menampilkan pilihan kepada user. Jika user sebagai pelanggan makan klik gambar pelanggan dan seterusnya. Untuk kategori driver di bedakan menjadi 2 , yaitu dariver motor (ojek) dan driver mobil (angkutan kota)

Daftar sebagai pelanggan.

Daftar sebagai Driver mobil

Daftar sebagai Driver motor(ojek)


Dan berikut adalah Laporan kesalaha(Erroe Reporting), Laporan sukses (program running successfully) :







1. Login sebagai pelanggan.

Tampilan menu home, ada dua pilihan menu untuk driver tergantung keinginan sang user.

Tampilan jika sudah mengklik salah satu dari gambar yang tadi di menu home.

Setelah melakukan proses pencarian program akan menampilkan hasil di lengkapi peta petunjuk lokasinya. Nah di sinilah awal mula sang pelanggan bisa mengontak sang driver, melewati menu chat yang di sedikan program untuk setiap driver.

Laporan jika lokasi tidak di temukan.

Tampilan menu terminal/pangkalan ojek sebelum ada data

Tampilan menu terminal/pangkalan ojek jika data di temukan, program akan menampilkan jenisnya serta lokasinya di samping.

Tampilan menu chat/pesan masih belum di buka (read)

Tampilan menu chat setelah terbuka (read)

Tampilan menu profil user.

Tampilan menu edit user
Laporan (error reporting)








1. Login sebagai Driver (sopir)

Tampilan menu home.

Tampilan menu kendaraan : berisi spesifikasi /data kendaraan serta di samping kanan mengenai profil drivernya, program juga menyesiakan menu untuk mengedit biodata user dan data kendaraan.


Tampilan edit data motor dan biodata user.

Tampilan menu chat/pesan sebelum read

Tampilan menu chat/pesan setelah di read , disitu juga menampilkan peta lokasi dari pelanggan yang bersangkutan.

Demikianlah pembuatan kerangkan dan desain, jika ada kesalahan kami mohon maaf..

Berharap program ini bisa bermanfaat.

kelompok 3 :
1. Syamsul Yadi
2. Hendrik Wehfani
3. Abdul Malik Drakel
4. Didin Itehe
5. Suwandi Aliha
6. Irwan Nacikit