Anda di halaman 1dari 39

BAB IV

ANALISIS DAN PERANCANGAN SISTEM

4.1

Analisis Sistem Yang Sedang Berjalan


Analisis prosedur sistem diperlukan untuk memenuhi kebutuhan akan data

suatu sistem yang sedang berjalan disuatu perusahaan. Analisis sistem yang
sedang berjalan berikut ini merupakan prosedur pemesanan dan pembatalan tiket
kereta api yang sedang berjalan di PT. Kereta Api (Persero) Daop 2 Bandung.

4.1.1 Analisis Prosedur Yang Sedang Berjalan


Proses pemesanan tiket kereta api adalah proses dimana pelanggan
melakukan pemesanan terhadap sebuah tempat duduk dalam satu pemberangkatan
kereta api.
Secara konvensional, pelanggan dapat memesan tempat duduk dengan
menghubungi petugas loket atau datang ke tempat reservasi tiket, kemudian
pelanggan mengisi formulir pemesanan tiket yang berisi nama, alamat, tanggal
berangkat, tujuan , kelas gerbong kereta api yang digunakan dan jumlah tiket.
Yang kemudian formulir pemesanan tiket tersebut diberikan kembali kepada
petugas loket yang akan melakukan pengecekan terhadap database jadwal
perjalanan yang mereka sediakan. Jika petugas loket menemukan jadwal yang

69

70

cocok dengan keinginan pelanggan, maka pelanggan harus membayar sesuai


dengan tarif kereta api yang dipesan. Jika semua persyaratan ini dipenuhi oleh
pelanggan, petugas loket akan mencatat data-data

pelanggan tadi ke dalam

database. Pelanggan akan menerima tanda bukti pemesanan tempat duduk berupa
karcis atau tiket perjalanan. Pada hari keberangkatan, pelanggan cukup dengan
menunjukan tiket ini kepada petugas yang bersangkutan.
Proses yang sering terjadi dalam pemesanan tiket kereta api adalah
pembatalan tiket (batal pembeli & batal tunda) pelanggan mempunyai wewenang
untuk melakukan pembatalan pemesanan tiket kereta ataupun menunda
keberangkatan kereta api, tetapi dengan konsekuensi pelanggan dikenakan
sejumlah denda sesuai dengan aturan yang berlaku.
4.1.1.1 Model Use Case Diagram Yang Sedang Berjalan
Model use case diagram merupakan gambaran aktivitas yang berjalan
dilihat dari kebutuhan. Pada tahapan ini menggambarkan hubungan antara aktor
dengan sistem. Dibawah ini adalah pemodelan diagram use case pemesanan tiket
yang sedang berjalan dimana bisa kita lihat hubungan antara aktor dengan sistem.

pemesanan
<<include>>
petugas loket

user

pembatalan

Gambar 4.1 Use Case Diagram Yang Sedang Berjalan

71

4.1.1.2 Aktivity Diagram Pemesanan Tiket Yang Berjalan


Activity Diagramdi bawah ini menggambarkan proses ataupun tahapan dalam
melakukan proses pemesanan tiket, adapun gambarnya sebagai berikut :

user

: petugas loket

mulai

mengisi formulir
pemesanan tiket

verifikasi formulir
pemesanan
[tidak]
ya

membayar
sejumlah uang

menerima bukti
pembayaran berupa tiket

melakukan pengecekan
terhadap jadwal dan tempat
duduk yang tersedia

mencatat data user dan pemesanan


tempat duduk ke database

membuat bukti
pembayaran berupa tiket

selesai

Gambar 4.2 Aktivity Diagram Pemesanan Yang Sedang Berjalan

4.1.1.3 Skenario Aktivity Diagram Pemesanan Tiket Yang Berjalan


Skenario yang terjadi di dalam diagram use case pemesanan tiket yang
sedang berjalan dapat digambarkan didalam sebuah table, antara lain :

72

Tabel 4.1 Skenario Aktivity Diagram Pemesanan Yang Sedang Berjalan


Nama Use Case

: Pemesanan

Aktor

: User

Worker

: Petugas loket

Type

: Primary

Tujuan

: melakukan pemesanan tiket


ACTOR

SISTEM

1.User mengisi formulir pemesanan


tiket
2.Petugas loket memverifikasi formulir
pemesanan

tiket

untuk

jadwal

keberangkatan dan tempat duduk yang


tersedia.
3.Jika

sesuai,

user

membayar

sejumlah uang. Kalau tidak ada


jadwal dan tempat duduk tersedia
user

kembali

mengisi

formulir

pemesanan.
4. Mencatat data user dan pemesanan
tempat duduk ke dalam database

73

Tabel 4.1 Skenario Aktivity Diagram Pemesanan Yang Sedang Berjalan


(Lanjutan)
5.Mencetak bukti pembayaran berupa
tiket kereta api
6.

Menerima

bukti

pembayaran

berupa tiket

4.1.1.4 Activity Diagram pembatalan yang berjalan


Activity Diagramdi bawah ini menggambarkan proses ataupun tahapan dalam
melakukan proses pembatalan tiket, adapun gambarnya sebagai berikut :
User

Teller

mulai

memberikan bukti
pembayaran berupa tiket
menerima kembali
tiket yang sama

memvalidasi
tiket

tidak
ya
teller memberikan pilihan mengganti
jadwal atau pengembalian uang
pengembalian uang
sesuai dengan
ketentuan yang berlaku
uang
ubah jadwal
mengedit data pemesanan
tempat duduk ke database

menerima tiket yang baru


atau sejumlah uang

mencetak tiket
yang baru

selesai

Gambar 4.3 Aktivity Diagram Pembatalan Yang Sedang Berjalan

74

4.1.1.5 Skenario Aktivity Diagram Pembatalan Yang Berjalan


Skenario yang terjadi di dalam use case diagram pembatalan pemesanan
tiket yang sedang berjalan dapat digambarkan didalam sebuah table, antara lain :
Tabel 4.2 Skenario Aktivity Diagram Pembatalan Yang Sedang Berjalan
Nama Use Case

: Pembatalan

Aktor

: User

Worker

: Petugas loket

Type

: Secondary

Tujuan

: melakukan pembatalan
AKTOR

SISTEM

1.User userikan bukti pembayaran


berupa tiket kepada petugas loket
2.

Petugas

loket

menerima

bukti

pembayaran berupa tiket dari user yang


kemudian di validasi oleh petugas loket
apakah masih berlaku atau tidak. Jika
tidak petugas loket akan userikan
kembali tiket kepada user
3. menerima kembali tiket yang sama
4. Jika valid maka petugas loket akan
userikan pilihan apakah akan

75

Tabel 4.2 Skenario Aktivity Diagram Pembatalan Yang Sedang Berjalan


(Lanjutan)
mengganti jadwal pemberangkatan atau
menerima pengembalian uang.
5. User menerima sejumlah uang atau
tiket yang baru

4.1.2 Use Case Realization


Use Case Realization adalah sebuah proses bisnis yang sebenarnya dari
suatu use case yang berhubungan dengan dokumen atau simpanan data yang
dikelola oleh worker.

4.1.2.1 Use Case Realization Pemesanan


Use case realization di bawah ini menggambarkan bahwa user mengisi
formulir pemesanan kemudian diberikan kepada petugas loket yang kemudian
diproses dan disimpan di dalam database pemesanan tiket.

formulir pemesanan

petugas loket

dokumen pemesanan

Gambar 4.4 Use Case Realization Pemesanan

76

4.1.2.2. Use Case Realization Pembatalan


Use case realization di bawah ini menggambarkan bahwa user userikan
bukti pembayaran berupa tiket kepada petugas loket yang kemudian diproses dan
di simpan di dalam database pembatalan pemesanan tiket ataupun mengubah
jadwal keberangkatan.

dokumen pembatalan

tiket
petugas loket

Gambar 4.5 Use Case Realization Pembatalan

4.1.3 Evaluasi Sistem Yang Sedang Berjalan


Dari analisis sistem pemesanan tiket yang ada di PT. KA (Persero) telah di
ketahui bahwa antrian yang cukup panjang di loket pemesanan tiket serta
banyaknya calo merupakan beberapa hal yang dapat mengurangi kenyamanan
calon penumpang. Oleh karena itu penulis mengajukan pembuatan sistem
informasi yang bersifat realtime atau online karena dengan tingginya etos kerja
dari kebanyakan orang membuat pemesanan tiket dengan harus datang ke stasiun
yang telah ditentukan menjadikan efisiensi waktu menjadi kurang maksimal.
Kelebihan dari sistem online ini adalah calon penumpang tidak harus melewati
perjalanan yang cukup jauh untuk menuju ke stasiun, dan tidak perlu antri lama.
Dengan adanya tiket pemesananan secara online yang dapat di akses secara

77

langsung dimanapun dan kapanpun. Apalagi pada saat ini dimana efisiensi waktu
merupakan hal yang diingnkan oleh setiap orang.

4.2

Perancangan Sistem
Berdasarkan analisis terhadap objek penelitian yang telah dilakukan, maka

penulis melanjutkan dengan melakukan perancangan sistem. Perancangan sistem


ini merupakan gambaran dari sistem informasi pemesanan tiket yang akan
dibangun di PT. Kereta Api (Persero).

4.2.1 Tujuan Perancangan Sistem


Pada tahapan perancangan sistem ini bertujuan untuk menjelaskan
pembuatan sketsa dari beberapa elemen yang saling terhubung dalam suatu
kesatuan yang utuh dan memiliki fungsi serta manfaat. Perancangan sistem ini
terdiri dari :
1. Desain konseptual atau desain secara umum berupa perancangan sistem
dilihat secara global, dimana tujuannya untuk userikan gambaran secara
umum kepada pengguna tentang sistem yang akan dibangun.
2. Desain terperinci atau desain secara fisik, berupa penggambaran model use

case, activity diagram, sequnce diagram, collaboration diagram, class


diagram, component diagram, depeloyment diagram, perancangan

78

tampilan, perancangan input, perancangan output, dan coding atau


pengkodean.

4.2.2 Gambaran Umum Sistem yang Diusulkan


Setelah melihat hal-hal tersebut diatas maka perangkat lunak yang akan
dibangun yaitu Sistem Informasi Pemesanan Tiket yang merupakan sebuah
aplikasi untuk melakukan pemesanan ataupun pembatalan tiket dan userikan
informasi tentang jadwal pemberangkatan kereta api yang berbasiskan World
Wide Web (WWW). Yang dimana akan meningkatkan efisiensi waktu bagi para
pengguna jasa kereta api karena tidak akan melakukan antrian pada saat
melakukan pemesanan ataupun pembelian tiket serta akan menurunkan kegiatan
para calo yang semakin berkeliaran. Proses pemesanan tiket dapat dilakukan
dimana saja tanpa mengenal ruang dan waktu dengan memanfaatkan koneksi
internet. Perangkat lunak yang berbasis aplikasi web ini akan digunakan oleh tiga
kategori pengguna yaitu administrator, petugas loket, dan user . Ketiga kategori
tadi memiliki hak dan tugas yang berbeda.Hak (otorisasi) dan tugas tersebut
tertulis dalam tabel.

79

Tabel 4.3 Hak dan otorisasi user


Kategori pengguna

Tugas

Hak

Administrator

Mengelola pengguna SI
pemesanan

tiket,

mengelola

informasi

1. Menambah,

mengedit

dan

menyimpan pengguna baik user


maupun petugas loket.

jadwal.

2. Menambah,

menghapus

dan

mengedit jadwal pemberangkatan.


3. Mencari,

dan

menghapus

data

pemesanan.

petugas loket

Menerima pembayaran
deposito uang setelah

1. Menambah,

pendaftaran

dan

mengedit data pendaftaran.


2. Memvalidasi

memverifikasi

menghapus

pendaftaran

yang

kemudian akan dimasukan ke dalam


database user.
Menerima sejumlah uang sebagai
syarat untuk menjadi user.

User

Melakukan pendaftaran,
Melakukan pemesanan

1. Melihat jadwal pemberangkatan dan


tarif.
2. Melakukan

tiket ataupun melihat


jadwal keberangkatan.

pendaftaran

untuk

pemesanan

dan

menjadi user.
3. Melakukan

pembatalan tiket.

80

Alur Sistem Informasi pemesanan tiket secara sederhana adalah sebagai


berikut :
1. User dapat melihat jadwal pemberangkatan dan tarif pada Daerah Operasi
(DAOP) 2 Bandung.
2. User dapat menjadi user dengan syarat-syarat sebagai berikut :
a. User dapat melakukan pendaftaran untuk menjadi user secara
online ataupun off line.
b. Setelah melakukan pendaftaran secara online, user diberi waktu
tiga hari untuk datang ke stasiun kereta api terdekat untuk
melakukan deposito uang dengan melampirkan fotocopy KTP.
c. Uang deposito minimal satu juta rupiah.
3. User yang sudah menjadi user dapat melakukan pemesanan tiket secara
online.
a. Pemesanan tiket dapat dilakukan minimal satu hari sebelum
pemberangkatan dan maksimal pemesanan tiket tiga puluh hari
sebelum pemberangkatan.
b. Banyaknya pemesanan di batas sampai empat tempat duduk saja.

4.2.3

Model Use Case Diagram Yang Diusulkan


Use case adalah deskripsi fungsi dari sebuah sistem dari perspektif

pengguna. Use case bekerja denga cara mendeskripsikan tipikal interaksi antara
user (pengguna) sebuah sistem dengan sistemnya sendiri melalui sebuah cerita
bagaimana sistem dipakai. Use case diagram menyajikan interaksi antara use case

81

dengan aktor. Dimana, aktor dapat berupa orang, peralatan, atau sistem lain yang
berinteraksi dengan sistem yang sedang dibangun. Dibawah ini adalah pemodelan
diagram use case sistem informasi pemesanan tiket yang diusulkan.

Gambar 4.6 Use Case Diagram Sistem Informasi Pemesanan Tiket

4.2.4 Activity Diagram


Activity Diagram atau Diagram aktivitas yaitu penggambaran rangkaian
aliran aktivitas, digunakan untuk mendeskripsikan aktivitas yang dibentuk
dalam suatu operasi sehingga dapat juga digunakan untuk aktifitas lainnya
seperti use case atau interaksi.

82

4.2.4.1 Aktivity Diagram Pendaftaran


Aktivity Diagram di bawah ini menggambarkan proses ataupun tahapan
dalam melakukan proses pendaftaran, adapun gambarnya sebagai berikut :

mulai

display form
pendaftaran

isi form
pendaftaran

validasi form
pendaftaran

validasi field-field
form pendaftaran

[incomplete]
[OK]

simpan data pendaftaran ke


dalam database

konfirmasi
pendaftaran diterima

selesai

Gambar 4.7 Activity Diagram Pendaftaran

Nama use case

: Activity Diagram Pendaftaran

Actor

: user

Type

: Primary

Tujuan

: Pendaftaran user untuk menjadi user

83

Deskripsi

: user membuka form pendaftaran kemudian


melakukan pengisian formulir pendaftaran yang
kemudian akan divalidasi, jika lolos validasi maka
pendaftaran diterima jika tidak user kembali
melakukan pengisian formulir.

4.2.4.2 Activity Diagram Pembayaran


Activity Diagram dibawah ini menggambarkan tentang proses pembayaran
sejumlah uang setelah melakukan pendaftaran, adapun gambarnya seperti berikut :

: user

: teller

memberikan
fotocopy ktp

membayar
sejumlah uang

cek data pendaftaran di


database

verifikasi form
pendaftaran

[ Yes ]
[NO]

cek jumlah
uang

pembayaran < 1 juta


maka pendaftaran
ditolak

[NO]
[Yes]

mengaktifkan user menjadi


member

Gambar 4.8 Activity Diagram Pembayaran

84

Nama Use Case

: Pembayaran

Actor

: user, petugas loket

Type

: Primary

Tujuan

:Melakukan pembayaran sejumlah uang


sebagai syarat untuk menjadi user

Deskripsi

: user datang ke loket, kemudian petugas


loket

meminta

kepada

user

untuk

menyerahkan fotocopy ktp dimana petugas


loket akan membuka data pendaftaran di
database dan mencocokan dengan ktp user,
jika cocok maka user akan membayar
sejumlah uang, jika tidak petugas loket akan
mengedit
dengan

data
data

pendaftaran
ktp.

disesuaikan

Pembayaran

dibatas

minimal 1 juta rupiah maka petugas loket


akan mengaktifkan data pendaftara data user
jika pembayaran kurang dari 1 juta maka
pendaftaran akan ditolak.

4.2.4.3 Activity Diagram pemesanan


Activity Diagram dibawah ini menggambarkan tentang proses pemesanan
tiket atau tempat duduk dimana status user sudah berubah menjadi user dan
mempunyai saldo uang, adapun gambarnya seperti berikut :

85

display form
login

verifikasi user name


dan password

isi user name


dan password

cek user name dan


password di database
member

[ NO ]

[Yes]
pilih menu
pesan tiket

memilih asal
dan tujuan

display jadwal
pemberangkatan

memilih tanggal, kelas


kereta dan tempat duduk

memilih jadwal
pemberangkatan

saldo tidak
memenuhi

validasi saldo

[NO]
[Yes]
display pemesanan
berhasil

Gambar 4.9 Aktivity Diagram Pemesanan

Nama Use Case

: Pemesanan

Actor

: User

Type

: Primary

Tujuan

: Untuk melakukan proses pemesanan tiket

86

Deskripsi

: User melakukan login terlebih dahulu


dengan

menginputkan

username

dan

password yang kemudian akan divalidasi


apakah cocok atau tidak dengan database .
Jika

tidak

maka

user

akan

kembali

memasukan username dan password. Jika


cocok maka user akan memilih jadwal
pemberangkatan dan memilih tempat duduk,
kemudian akan tampil total bayar dari
penjumlahan jumlah tempat duduk dan
harga tiket, jika saldo memenuhi maka akan
muncul tampilan pemesanan berhasil jika
saldo

tidak

memenuhi

maka

proses

pemesanan di batalkan.

4.2.5 Sequence Diagram


Sequance diagram merupakan suatu interaksi objek yang disusun dalam
suatu urutan waktu di sekitar sistem. Sequence diagram terdiri dari dimensi waktu
dan dimensi dari objek-objek yang terkait didalam sistem dimana dua elemen itu
memperlihatkan tahap demi tahap apa yang seharusnya terjadi untuk
menghasilkan sesuatu didalam use case. Berikut ini adalah sequence diagram dari
sistem yang diusulkan :

87

4.2.5.1 Sequence Diagram Pendaftaran


Sequence diagram yang dihasilkan dari pendaftaran yaitu :

: form
pendaftaran

: user

: data
pendaftaran

1: open ()
2: isi form
3: validasi pendaftaran
4: data user
5: simpan ()
6: konfirmasi pendaftaran berhasil

Gambar 4.10 Sequence Diagram Pendaftaran


4.2.5.2 Sequence Diagram Pembayaran
Sequence diagram yang dihasilkan dari pembayaran yaitu :

: data_pendaftaran
: user

: data_user

: petugas loket

1: memberikan fotocopy ktp


2: cari ()
3: cek pendaftaran
4: data pendaftaran
5: membayar sejumlah uang
6: cek uang

7: approve data pendaftaran dan jumlah saldo

8: simpan ()

9: bukti pembayaran

Gambar 4.11 Sequence Diagram pembayaran

88

4.2.5.3 Sequence Diagram Pemesanan


Sequence diagram yang dihasilkan dari pemesanan yaitu :

: login user

: data_user

: form pemesanan

: data
pemesanan

: data_jadwal

: user
1: open ()
2: isi form
3: data user
4: login berhasil
5: open ()
6: pilih jadwal
7: cari ()
8: data jadwal
9: pilih tanggal
10: pilih kelas
11: pilih tempat duduk
12: display total harga
13: cek saldo
14: data pemesanan
15: simpan ()

16: konfirmasi pemesanan berhasil

Gambar 4.12 Sequene Diagram pemesanan

4.2.6 Collaboration Diagram


Collaboration diagram merupakan tipe diagram yang menekankan pada
hubungan antar objek yang menggambarkan interaksi antar objek pada masing-

89

masing peran objek tersebut, dan bukan menekankan pada waktu penyampaian
message seperti sequence diagram.
4.2.6.1 Collaboration Diagram Pendaftaran
Adapun collaboration diagram pendaftaran adalah sebagai berikut :

5: simpan ()

: data_pendaftaran
2: isi form
3: validasi pendaftaran
6: konfirmasi pendaftaran diterima
4: data daftar
1: open ()
: form_pendaftaran

: user

Gambar 4.13 Collaboration Diagram Pendaftaran

4.2.6.2 Collaboration Diagram Pembayaran


Adapun collaboration diagram pembayaran adalah sebgai berikut :
6: cek uang

8: simpan ()
7: approve data pendaftaran dan jumlah saldo

1: memberikan fotocopy ktp


5: membayar sejumlah uang
:
data_user
9: bukti pembayaran
: user

: petugas loket
2: cari ()
4: data pendaftaran
3: cek pendaftaran

: data_pendaftaran

Gambar 4.14 Collaboration diagram pembayaran

90

4.2.6.3 Collaboration Diagram Pemesanan


Adapun Collaboration Diagram Pemesanan adalah sebagai berikut :
2: isi form

3: data user
: login user
4: login berhasil
1: open ()

15: simpan ()

13: cek saldo

: data
pemesanan

: data_user

16: konfirmasi pemesanan berhasil

14: data pemesanan

: user

6: pilih jadwal
9: pilih tanggal
10: pilih kelas
11: pilih tempat duduk

12: display total harga

5: open ()
: form
pemesanan

8: data jadwal
7: cari ()

: data_jadwal

Gambar 4.15 Collaboration Diagram Pemesanan

4.2.7 Class Diagram


Class Diagram mendeskripsikan jenis-jenis objek dalam sistem dan
berbagai macam hubungan statis yang terdapat diantara mereka. Class diagram
juga menunjukan properti (atribut) dan operasi sebuah Class dan batasan-batasan
yang terdapat dalam hubungan-hubungan objek tersebut. UML menggunakan
istilah fitur sebagai istilah umum yang meliputi properti-properti dan operasi
sebuah Class.

91

Adapun class diagram dalam sistem informasi pemesanan tiket yang


diusulkan adalah sebagai berikut :

data_pendaftaran

data_user

no_daftar
nama_lengkap
tempat_lahir
jenis_kelamin
alamat
kode_pos
no_telepon
pekerjaan
email
user_name
password

id_member
nama_lengkap
tempat_lahir
tanggal lahir
jenis_kelamin
alamat
kode_pos
no_telepon
pekerjaan
email
user_name
password
saldo

petugas_loket
user_name
password
nip
nama lengkap
tambah()
edit()
hapus()
simpan()

cari()
hapus()
edit()
approve()

tambah()
cari()
edit()
simpan()
hapus()

data_jadwal

data_pemesanan
no_pemesanan
tgl_pemesanan
id_member
no_kereta
kelas
jumlah_pesan
no_tempat_duduk
total_bayar
tambah()
hapus()
cari()

no_kereta
nama_kereta
jam_berangkat
jam_tiba
kota_asal
kota_tujuan
kls_bisnis
kls_eksekutif
tambah()
edit()
hapus()
simpan()

Gambar 4.16 Class Diagram Pemesanan

4.2.8 Component Diagram


Component diagram terdiri dari satu atau beberapa diagram komponen
dan menggambarkan pengorganisasian dan keterkaitan dari semuanya ke dalam
komponen dalam desain fisik dan menampilkan hubunganhubungan mereka.

92

Adapun component diagram tersebut dapat digambarkan sebagai berikut :

koneksi.
php
database Pt. Kereta Api

data
pemes anan

data
pendaftaran

config

pendaftaran

pemesanan

Gambar 4.17 Component Diagram Sistem Informasi Pemesanan Tiket

4.2.9 Deployment Diagram


Deployment/physical

diagram

menggambarkan

detail

bagaimana

komponen di-deploy dalam infrastruktur sistem, di mana komponen akan terletak


(pada mesin, server atau piranti keras apa), bagaimana kemampuan jaringan pada
lokasi tersebut, spesifikasi server, dan hal-hal lain yang bersifat fisikal.
Sebuah node adalah server, workstation, atau piranti keras lain yang
digunakan untuk men-deploy komponen dalam lingkungan sebenarnya. Hubungan
antar node dan requirement dapat juga didefinisikan dalam diagram ini. Berikut

93

adalah deployment diagram yang dibutuhkan dalam perancangan sistem website


Sistem:

workstation

config package
HTTP Web
Server

koneksi.php
Server
Database

Server Pt. KA
(Koneksi Apache)
IE, Opera, Modzila

Mysql Database Server


Client

Browser

Gambar 4.18 Deployment Diagram Sistem Informasi Pemesanan Tiket

4.2

Perancangan Antar Muka


Perancangan antar muka yang diajukan untuk membuat aplikasi website

pemesanan tiket di Pt. Kereta (Api Persero) menggambarkan tentang rancangan


arsitektur sistem di dalam sebuah aplikasi yang akan dibuat baik itu dari segi input
maupun output. Dibawah ini adalah perancangan tampilan aplikasi website yang
akan dibuat :

94

4.2.1 Perancangan Input


Sebelum masuk ke perancangan input, berikut ini adalah Perancangan
halaman utama website untuk PT. Kereta Api (Persero).

HEADER
Icon link
menu

Gambargambar

CONTENT

MENU UTAMA

FOOTER

Gambar 4.19 Perancangan Tampilan Halaman utama

Pada perancangan input menjelaskan gambaran yang akan ada di Website


Pt. Kereta Api (Persero) dimana user dengan kategori user, user dan petugas loket
akan menginputkan data yang selanjutnya akan diproses.
Adapun Perancangan input tersebut, diantaranya sebagai berikut :

95

1. Pendaftaran User
Di dalam form pendaftaran user terdapat field-field yang harus diisi oleh user,
field-field tersebut berisi tentang informasi si pendaftar.

HEADER
Icon link
menu

Gambargambar

MENU UTAMA

Nama Lengkap :
Tempat lahir :
Tgl Lahir
:
Jenis kelamin :
Alamat
:
Kode Pos
:
No. Telp
:
Pekerjaan
:
Email
:
User Name
:
Password
:

Pria

Daftar

Wanita

Reset

FOOTER

Gambar 4.20 Form Pendaftaran User

Tabel 4.4 Tabel Navigasi Form Pendaftaran User


No.

Nama Navigasi

Keterangan

Daftar

Untuk mengirim data User

Reset

Untuk mengosongkan form

96

2.

Cari Jadwal
Form cari jadwal di sediakan untuk membantu dalam pencarian jadwal

keberangkatan kereta, adapun perancangannya adalah sebagai berikut :

HEADER
Icon link
menu

Asal :
Tujuan :
Cari
No. KA

Gambargambar

Nama Kereta

Jam Berangkat

MENU UTAMA

FOOTER

Gambar 4.21 Form Jadwal Kereta

Table 4.5 Tabel navigasi form jadwal kereta


No
1

Nama navigasi
Cari

Keterangan
Untuk mencari data

Jam tiba

97

3. Login User
Form ini disediakan bagi para user yang sudah berkategori user untuk dapat
masuk ke dalam web Pt. Ka sehingga fasilitasnya pun berbeda dengan user yang
berkategori user.

HEADER
Icon link
menu

LOGIN

User Name
Password

:
:

MENU UTAMA

Gambargambar

MASUK

FOOTER

Gambar 4.22 Form Login User

Tabel 4.6 Tabel Navigasi Login User


No.
1

Nama Navigasi
Masuk

Keterangan
Untuk masuk ke halaman meber

98

4.

Pesan Tiket
User dapat melakukan pemesanan tiket dengan memilih jadwal kereta

terlebih daulu yang kemudian klik pesan di samping pilihan jadwal, maka akan
tampil form di bawah ini.

HEADER

MENU

Nama Kereta Api :


Asal
:
Tujuan
:
Jam Berangkat
:
Kelas
:
Harga Bisnis
:
Harga Eksekutif
:
Jumlah Tiket
:

proses

FOOTER

Gambar 4.23 Form Pesan Tiket

Tabel 4.7 Tabel Navigasi Form Pesan Tiket


No
1

Nama Navigasi
Proses

Keterangan
Untuk memvalidasi saldo dan jumlah tiket

99

5. Login Admin
Form ini disediakan untuk user berkategori petugas loket dan administrator
itu sendiri, adapun perancanganya adalah sebagai berikut :

HEADER

LOGIN

User Name
Password

:
:

LOGIN

FOOTER

Gambar 4.24 Form Login Admin

Tabel 4.8 Tabel Navigasi Login Admin


No.
1

Nama Navigasi
Login

Keterangan
Untuk dapat masuk ke menu berkategori
petugas loket dan admin

100

6. Form Tambah User


Form tambah user adalah salah satu fasilitas yang ada pada menu petugas
loket, adapun perancangannya sebagai berikut :

HEADER

Nama Lengkap :
Tempat lahir :
Tgl Lahir
:
Jenis kelamin :
Alamat
:
Kode Pos
:
No. Telp
:
Pekerjaan
:
User
:
Password
:
Saldo
:

MENU

Pria

Simpan

Wanita

Batal

FOOTER

Gambar 4.25 Form Tambah User

Tabel 4.9 Tabel Navigasi Form Tambah User


No.

Nama Navigasi

Simpan

Batal

Keterangan
Untuk menyimpan data user yang baru
Untuk kembali ke menu petugas loket.

101

7. Form Edit User

HEADER

Nama Lengkap :
Tempat lahir :
Tgl Lahir
:
Jenis kelamin :
Alamat
:
Kode Pos
:
No. Telp
:
Pekerjaan
:
User
:
Password
:
Saldo
:

MENU

Pria

Simpan

Wanita

Batal

FOOTER

Gambar 4.26 Form Edit User

Tabel 4. 10 Tabel Navigasi Form Edit User


No.

Nama Navigasi

Keterangan

Simpan

Untuk mengupdate data user yang baru

Batal

Untuk kembali ke menu petugas loket.

102

8. Form Tambah Jadwal


Form Tambah jadwal disediakan bagi administrator, adapun perancangannya
adalah sebagai berikut :

HEADER

No. Kereta
:
Id Kereta
:
Jama Berangkat :
Jam Tiba
:
Jumlah Kursi
:
MENU

Simpan

Batal

FOOTER

Gambar 4.27 Form Tambah Jadwal


Tabel 4.11 Tabel Navigasi Form Tambah Jadwal
No.

Nama Navigasi

Keterangan

1.

Simpan

Untuk menyimpan data ke dalam database jadwal

2.

Batal

Kembali ke form jadwal dan tariff

103

9. Form Tambah Harga


Form tambah harga disediakan untuk administrator, adapun perancangannya
adalah sebagai berikut :

HEADER

Kode Harga
Kls eksekutif
Kls Bisnis
Simpan

:
:
:
Batal

MENU

FOOTER

Gambar 4.28 Form tambah harga

Tabel 4.12 Tabel Navigasi Form Tambah Harga


No.

Nama Navigasi

Keterangan

1.

Simpan

Untuk proses menyimpan data ke dalam database harga

2.

Batal

Untuk kembali ke form

104

4.3.3 Perancangan Output


Pada perancangan output menjelaskan gambaran yang akan ada di website
Pt. Kereta Api (Persero), adapun perancangannya adalah sebagai berikut :
1.

Data User
Pada form ini menampilkan semua data user yang ada di website Pt.

Kereta Api (persero), adapun rancangannya adalah sebagai berikut :

HEADER

Tambah

No

User Name

No Tlp

email

aksi

sacrafice

7002837

Ebel_@yaj

lombok

9909739

email

Detail|hapu
s
Detail|hapu
s

MENU

FOOTER

Gambar 4.29 Output Data User

105

Tabel 4.13 Tabel Navigasi Output Data User


No.

Nama Navigasi

Keterangan

1.

Tambah

Untuk menambah data user

2.

Detail

Untuk menampilkan profil user

3.

Hapus

Untuk menghapus data user

2.

Ouput Data Jadwal


Pada form ini menampilkan semua data keberangkatan kereta, adapun

perancangannya sebagai berikut :

HEADER

Tambah

MENU

No

Nama Kereta

Tujuan

Berangkat

aksi

Argo gede

gambir

07.00

Argo wilis

surabaya

09.00

Detail|hapu
s
Detail|hapu
s

FOOTER

Gambar 4.30 Form Ouput Data jadwal

106

Tabel 4.14 Tabel Navigasi Form Output Data Jadwal


No.

Nama Navigasi

Keterangan

1.

Detail

Untuk menampilkan data jadwal secara lengkap

2.

Hapus

Untuk mengahapus jadwal

3.

Tambah

Untuk menambah data jadwal baru

3.

Output Data Tarif


Pada form ini menampilkan semua data tarif berdasarkan kode harga baik

itu berkelas bisnis maupun eksekutif. Adapun gambar perancangannya seperti di


bawah ini :

HEADER

Tambah

MENU

Kd harga

Tujuan

eksekutif

bisnis

aksi

A01

Gambir

35000

30000

Edit | hapus

B02

Bandung

45000

40000

Edit | hapus

FOOTER

Gambar 4.31 Form Output Data Tarif

107

Tabel 4.15 Tabel Navigasi Form Output Data Tarif


No.

Nama Navigasi

Keterangan

1.

Edit

Untuk mengubah data tariff

2.

Hapus

Untuk menghapus data tariff

3.

Tambah

Untuk menambah data tarif yang baru