Perancangan Antar Muka Analisis Sistem Yang Berjalan

1. Kode Transaksi TRXXX No Nama Pembeli Contoh : UD01 Pemesanan dengan nama anton .

4.2.5 Perancangan Antar Muka

Perancangan antar muka merupakan tahapan untuk membuat tampilan atau design dari sistem yang akan dibuat. Rancangan tampilan yang dibuat meliputi rancangan struktur menu, rancangan input dan rancangan output dari sistem yang akan dibuat.

4.2.5.1. Struktur Menu

Perancangan struktur menu bertujuan untuk memudahkan dalam penggunaan fungsi – fungsi program dalam sistem informasi reservasi tiket berbasis web pada baraya travel. Perancangan menu user dan admin dapat dilihat pada gambar berikut : 1. Struktur menu admin Admin Beranda Data Pesanan Data user Daftar Jadwal Berita Atur akun Gambar 4.12 : Struktur menu admin 2. Struktur menu utama Utama Home Profil Berita Informasi Bantuan Gambar 4.13 : Struktur menu utama

4.2.5.2. Perancangan Input

Perancangan input merupakan tahapan dalam perancangan antar muka interface yang bertujuan merancang tampilan aplikasi untuk menginputkan data kedalam sistem informasi reservasi tiket berbasis web yang telah dirancang.

4.2.5.2.1. Tampilan halaman utama

Home Profil Berita Informasi Bantuin Search our Website Cari Enter Username Enter password Go BARAYA TRAVEL Pemesanan tiket online Lupa Password? Buar akun baru 1. Pembelian 1. Pembelian 2. Informasi Promo 3. Best Price 4. New Item 5. Promo Gambar 4.14 : Tampilan halaman utama

4.2.5.2.2. Tampilan Menu registrasi member

ISI SESUAI DATA ANDA YANG VALID Username Nama lengkap password Jenis kelamin Alamat Pria Wanita Provinsi Kota Kodepos Telp Hp Email Gambar 4.15 : Registrasi member

4.2.5.2.3. Tampilan menu jadwal keberangkatan

Pilih Jadwal Keberangkatan Tempat Asal Tujuan Tgl Berangkat Cari Gambar 4.16 : Menu Jadwal Keberangkatan

4.2.5.2.4. Tampilan jadwal Keberangkatan

Nomor Aksi Ongkos Jam berangkat Kota tujuan Kota asal Gambar 4.17 : Tampilan Jadwal Keberangkatan

4.2.5.2.5. Tampilan pemilihan tempat duduk penumpang

Driver Sit 3 Sit 6 Sit 7 Sit 5 Sit 4 Sit 2 Sit 1 Gambar 4.18 Pemilihan tempat duduk

4.2.5.2.6. Tampilan daftar pemesanan

Daftar Pesanan Anda No Kota asal Kota Tujuan No. Kursi Tgl berangkat Ongkos Aksi Pesan Lagi Selasai Gambar 4.19 : Daftar pemesanan

4.2.5.2.7. Tampilan login user

Enter Username Enter password Go Lupa Password? Buar akun baru Gambar 4.20 : Login User

4.2.5.2.8. Tampilan login administrator

Administrator Login Username Password Remember Me Authentification Forgot your username or password? Gambar 4.21 : Login Admin

4.2.5.2.9. Tampilan halaman utama administrator

BARAYA ADMINISTRATOR TRAVEL HOME PAGE Wellcome Admin username Change themes Loguot Beranda Data Pesanan Laporan Data user Daftar jadwal Berita Atur akun Logo Logo Logo Logo Logo Logo Logo Beranda Daftar supir Daftar mobil Daftar kota Agenda Galeri Gambar 4.22 : Halaman Utama admin

4.2.5.2.10. Tampilan Daftar Supir

BARAYA ADMINISTRATOR TRAVEL HOME PAGE Wellcome Admin username Change themes Loguot Beranda Data Pesanan Laporan Data user Daftar jadwal Berita Atur akun Logo Logo Logo Logo Logo Logo Logo Beranda Daftar supir Daftar mobil Daftar kota Agenda Galeri Tambah Supir No Aksi Masa Berlaku SIM Tgl Masuk No. Telp Tgl Lahir Tempat lahir Alamat Nama Supir Gambar 4.23 : Daftar Supir

4.2.5.2.11. Tampilan tambah supir

Tambah Supir Nama Supir Alamat Tempat lahir Tgl Lahir Telp Hp Tgl Masuk Masa Aktif SIM Upload Poto Tambah Batal Browse Gambar 4.24 : Tambah supir

4.2.5.2.12. Tampilan edit data supir

Edit Supir Nama Supir Alamat Tempat lahir Tgl Lahir Telp Hp Tgl Masuk Masa Aktif SIM Upload Poto Ubah Batal Browse Gambar 4.25 : Edit supir

4.2.5.2.13. Tampilan daftar tujuan

Tambah Tujuan No Nama Tujuan Aksi Gambar 4.26 : Daftar tujuan

4.2.5.2.14. Tampilan ubah data tujuan

Edit tujuan Nama tujuan Ubah Batal Gambar 4.27 : Ubah data tujuan

4.2.5.2.15. Tampilan tambah tujuan

Tambah tujuan Nama tujuan Ubah Batal Gambar 4.28 : Tambah tujuan

4.2.5.3. Perancangan ouput

Perancangan output merupakan rencana pembuatan halaman antarmuka untuk keluaran sebuah program. Berikut ini adalah perancangan output pada sistem informasi reservasi tiket berbasis web pada baraya travel:

4.2.5.3.1. Bukti pemesanan

BUKTI PEMBELIAN TIKET ONLINE DI BARAYA TRAVEL Data Pembeli Nama Alamat Kota Telp Hp : : : : No. order No Kota asal No. sit Ongkos Jam berangkat Kota tujuan Jumlah tiket Total pembayaran : : Gambar 4.29 : Bukti Pemesanan tiket

4.2.6. Perancangan Arsitektur Jaringan