44 BAB IV PERANCANGAN 4.1 Perancangan Sistem Sistem yang dibuat yaitu suatu aplikasi bantu dalam mengupdate keberadaan barang client. Selain sistem tracing yang sudah tersentralisasi kelebihan lainnya yaitu kita dapat melihat jumlah request update yang disubmit melalui aplikasi ini dapat dilihat grafis kuantitasnya. 4.1.1 Cara kerja sistem Cara kerja sistem ini adalah sebagai berikut : Proses tracing (pelacakan) Pada tahap ini admin atau user menginput Nomor mawb untuk shipment yang ingin dilacak. Terlebih dahulu input prefix lalu mawb nya. Sistem akan memproses data maskapai apa yang dilacak, lalu melakukan request data kesitus pelacak maskapai tersebut. Setelah mendapat data sistem menampilkan data sesuai dengan yang di informasikan maskapai. Adapun proses tambahan yang diperuntukan untuk admin atau user yang telah diregistrasi oleh admin yaitu dapat melihat history mawb yang dilacak dan grafis kuantitas maskapai apa yang sering dilacak oleh sistem aplikasinya. Proses tambahan nya sebagai berikut : Proses manage dan report Pada tahap ini admin atau user yang teregristrasi mengakses login page yang terdapat dikanan atas web page. Setelah melakukan login maka halaman yang tampil adalah jumlah yang banyak request dan maskapai apa saja yang dilacak. Proses tambahan ini berguna untuk tim untuk merekomendasikan maskapai yang sering digunakan kepada client.
45 4.1.2 ERD (Entity Relationship Diagram) Sesuai dengan pengertian pada bab sebelumnya tentang ERD, Dibawah ini menjelaskan ERD pada sistem aplikasi pelacak kargo udara berbasis web sebagai berikut: 4.1.2.1 Penentuan Entitas Langkah awal adalah menentukan Entitas dari sistem pelacak kargo, yaitu sebagai berikut. Gambar 4.0 Entitas 4.1.2.2 Penentuan Atribut Langkah berikut nya adalah menentukan atribut dari masing-masing entitas, yaitu sebagai berikut : cargo: prefix: merupakan 3 digit kode unik maskapai (string) PK title: merupakan nama maskapai (string) url: alamat url daripada maskapai (string) history: id: identitas dari tabel history (integer) PK prefix: merupakan 3 digit kode unik (string) awb: merupakan 8 digit nomor unik (string)
46 datetime: merupakan tanggal dan waktu kapan user melakukan request (string) tracing: mawb: merupakan identitas suatu kiriman yang tergabung dari prefix dan awb (string) PK Origin: merupakan asal pengiriman (string) Destination: merupakan tujuan pengiriman (string) TotalPcs: merupakan jumlah berapa satuan pengiriman (string) TotalWgt: merupakan jumlah berapa berat dalam pengiriman (string) detail_tracing: Id: merupakan identitas dari tabel detail_tracing (integer) PK mawb: merupakan identitas suatu kiriman yang tergabung dari prefix dan awb (string) FK Station: merupakan tempat keberadaan kiriman saat itu (string) FLTNo: merupakan kode pesawat dari maskapai (string) Status: merupakan keadaan ter-update suatu pengiriman (string) Date: merupakan tanggal update dari pengiriman berada (string) Time: merupakan waktu ter-update pelacakan pengiriman di masukkan datanya (string) users: id: merupakan identitas dari tabel users (integer) PK username: identitas login (string) password: kata kunci untuk masuk dengan identitas login yang dipakai (string)
47 Cargo mawb TotalPcs tracing 100 Origin 80 60 40 20 0 Gambar 4.1 Gambar Entitas beserta atribut nya 4.1.2.3 Penentuan Kardinalitas Relasi Berikutnya adalah penentuan kardinalitas relasi, detail nya adalah sebagai berikut : Hubungan : 100 80 60 40 20 Destination TotalWgt 0 East 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr West id 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr a. cargo digunakan oleh history: users 100 username 80 60 40 20 0 North id Station East West North password 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr Detail_tracing mawb 100 80 60 40 20 0 FLTNo East West North Date Time Status 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr Ea W No Tabel utama: cargo Tabel kedua: history Relationship: One-to-Many (1:n) Attribute penghubung: prefix (FK prefix di history) b. tracing digunakan oleh detail_tracing: Tabel utama: tracing
48 Tabel kedua: detail_tracing Relationship: One-to-many (1:n) Attribute penghubung: mawb (FK mawb di detail_tracing 4.1.2.4 Pembuatan ERD Berikut adalah Entity Relationship Diagram nya adalah sebagai berikut : prefix title id prefix awb url datetime Cargo 1 n memiliki History mawb TotalPcs tracing 100 Origin 80 60 40 20 0 100 80 60 40 20 0 TotalWgt 1 n 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr East id Destination users 100 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr 80 memiliki username West North East West id North Station password 100 80 60 Detail_tracing mawb 100 80 60 40 20 0 40 20 0 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr FLTNo Date Time Status 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr 60 Gambar 404.2 Entity Relationship Diagram 20 East West North 0 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr
49 4.1.3 UML (Unified Modeling Language) dengan usecase diagram, sequence diagram dan activity diagram Sesuai dengan pengertian pada bab sebelumnya tentang UML, ada beberapa diagram yang digunakan untuk memperjelas pengunaan UML dalam pemrograman berorientasi objek. Dibawah ini menjelaskan fungsi UML pada sistem pelacak kargo udara berbasis web dengan menggunakan usecase diagram, sequence diagram dan activity diagram yang digunakan untuk mempresentasikan interaksi antara aktor dengan sistem untuk lebih jelasnya sebagai berikut : 4.1.3.1 Diagram Usecase Admin Mengolah Data Memasukkan Nomor AWB User Menampilkan Hasil Gambar 4.3 Diagram Usecase Berikut adalah penjelasan gambar. Skenario : 1) Mengupdate data Proses ini dilakukan oleh admin untuk menambahkan user, mengakses ke menu grafis kuantitas yang berisi banyak jumlah request update dan maskapai yang sering digunakan, serta melakukan update data tracing. 2) Memasukkan Nomor AWB
50 Pada saat menu halaman utama terbuka admin atau pengguna (user) bisa langsung melakukan lacak dengan mengisi prefix terlebih dahulu diikuti nomor AWB nya. 3) Menampilkan Hasil Proses ini merupakan tampilan hasil setelah admin atau pengguna (user) mengklik tombol trace! / menekan Enter pada keyboard. 4.1.3.2 Diagram Sequence Halaman Login Dashboard Manage 1.Mengakses Halaman Login 2.Menampilkan Halaman 3.Memasukkan Username dan Password 4.Masuk ke halaman dashboard 5.Menampilkan halaman dashboard 6.Memilih menu di dashboard 9.Meneruskan data 7.Mengolah data menu yang dipilih 8.Menampilkan data Gambar 4.4 Diagram Sequence Admin Berikut adalah penjelasan gambar. Skenario : 1. Admin mengakses halaman login 2. Menampilkan halaman login 3. Admin memasukkan username dan password untuk otorisasi akses 4. Mengakses kehalaman dashboard setelah otorisasi 5. Memberi tampilan halaman dashboard 6. Memilih menu pada halaman dashboard
51 7. Mengolah data pada menu manage 8. Menampilkan data yang telah diolah 9. Meneruskan kepada admin Halaman Utama Hasil Server 1.Membuka Situs 2.Menampilkan Halaman 3.Memasukkan Nomor MAWB 4.proses data ke server 5.Menerima data 6.Memberikan data hasil tracing Gambar 4.5 Diagram Sequence User Berikut adalah penjelasan gambar. Skenario : 1. User membuka situs 2. Memberi tampilan halaman utama kepada Admin/User 3. Admin/User memasukkan nomor AWB 4. Web memproses data yang diteruskan kepada server 5. Pemberian data kepada hasil 6. Memberikan hasil tracing kepada Admin/User
52 4.1.3.3 Diagram Aktivitas Gambar 4.6 Diagram Aktivitas Proses Administrasi Berikut adalah penjelasan gambar. Skenario : Admin mengakses halaman login lalu sistem menampilkan nya, Setelah itu, admin memasukkan username dan password yang kemudian akan divalidasi oleh sistem, apabila benar maka akan menampilkan halaman dashboard dan bila salah maka akan menampilkan kembali
53 halaman login. Admin memilih menu pada halaman dashboard dan sistem menampilkannya. Apabila data sudah diolah oleh admin maka sistem merekam dalam database dan menampilkan perubahan datanya. Gambar 4.7 Diagram Aktivitas Proses Tracing Berikut adalah penjelasan gambar. Skenario : User membuka situs tracing, lalu tampil halaman utama untuk memasukkan nomor mawb. Kemudian, user memasukkan nomor mawb yang akan di proses oleh sistem tracing. Apabila data terdapat dalam database maka data tersebut diambil lalu akan ditampilkan dihalaman tracing. Sedangkan, bila data tidak ditemukan maka sistem akan menampilkan pesan error.
54 4.2 Rancangan Database Dalam aplikasi ini dibutuhkan basis data yang konsisten dan mampu melayani penyimpanan data dan penarikan data yang nanti akan digunakan sebagai acuan oleh tim. Maka untuk merancang basis data ini akan dibuat Tabel Databasenya. 4.2.1 Basis Data yang Digunakan Untuk perancangan basis data, penggunaannya bisa dilihat pada uraian dibawah ini. 1. Tabel Cargo Tabel Cargo berguna untuk menyimpan data maskapai. Dalam tabel ini terdapat beberapa kolom, sebagai berikut : a. prefix, merupakan kolom dengan tipe data varchar(3) yang akan digunakan untuk menyimpan data maskapai. Prefix merupakan unique code yang dimiliki maskapai yang telah ditentukan oleh IATA (International Air Transport Association). prefix ini merupakan primary key untuk tabel cargo. b. title, merupakan kolom dengan tipe data varchar (50) yang akan digunakan untuk menyimpan data nama Maskapai penerbangan nya. c. url, merupakan kolom dengan tipe data varchar (200) yang digunakan untuk menyimpan data url/link dari situs Maskapai penerbangan nya. Tabel 4.0 Tabel Cargo Nama kolom Tipe Panjang Keterangan Prefix Varchar 3 primary key Title Varchar 50 Url Varchar 200
55 2. Tabel history Tabel history berguna untuk melihat history chart dan berapa banyak request yang telah dilakukan. Dalam tabel ini terdapat beberapa kolom, sebagai berikut : a. id, merupakan kolom dengan tipe data int(11). Id ini berguna sebagai identitas apabila akan melakukan update atau delete table. Id ini bersifat auto increment dan merupakan primary key untuk tabel history. b. prefix, merupakan kolom dengan tipe data varchar (3) prefix di tabel history bekerja sebagai foreign key karena memiliki hubungan dengan prefix pada tabel cargo. c. awb, merupakan kolom dengan tipe data varchar (8) merupakan 8 digit yang tertera pada AirWayBill guna untuk tracing dan check status. d. datetime, merupakan kolom dengan tipe data datetime yang akan digunakan time stamp (waktu stempel). Tabel 4.1 Tabel History Nama kolom Tipe Panjang Keterangan Id Integer 11 primary key Prefix Varchar 3 Foreign key Awb Varchar 8 Datetime Datetime 3. Tabel Tracing Tabel tracing berguna untuk penyimpanan data tracing yang didapatkan berdasarkan report oleh maskapai. Dalam tabel ini terdapat beberapa kolom, sebagai berikut : a. mawb, merupakan kolom dengan tipe data varchar(11). Mawb adalah identitas suatu kiriman yang tergabung dari prefix dan awb. Mawb merupakan primary key untuk tabel tracing. b. Origin, merupakan kolom dengan tipe data varchar(3). Origin merupakan asal pengiriman dari suatu barang.
56 c. Destination, merupakan kolom dengan tipe data varchar(3). Destination merupakan tujuan dari pengiriman suatu barang. d. TotalPcs, merupakan kolom dengan tipe data varchar(5). TotalPcs merupakan berapa banyak koli pada suatu pengiriman. e. TotalWgt, merupakan kolom dengan tipe data varchar(10). TotalWgt merupakan berapa actual total berat pada suatu pengiriman. Tabel 4.2 Tabel tracing Nama kolom Tipe Panjang Keterangan Mawb Varchar 11 primary key Origin Varchar 3 Destination Varchar 3 TotalPcs Varchar 5 TotalWgt Varchar 10 4. Tabel detail_tracing Tabel detail_tracing berfungsi sebagai penyimpanan data yang termasuk turunan daripada tracing. Dalam tabel ini terdapat beberapa kolom, sebagai berikut : a. id, merupakan kolom dengan tipe data int(11). Id ini berguna sebagai identitas apabila akan melakukan update atau delete table. Id ini bersifat auto increment dan merupakan primary key untuk tabel detail_tracing. b. mawb, merupakan kolom dengan tipe data varchar(11). Mawb adalah identitas suatu kiriman yang tergabung dari prefix dan awb. Mawb merupakan foreign key untuk tabel detail_tracing karena memliki hubungan dengan mawb pada tabel tracing. c. Station, merupakan kolom dengan tipe data varchar(3). Station merupakan lokasi keberadaan suatu pengiriman ter-update dalam sebuah pelacakan. d. FLTNo, merupakan kolom dengan tipe data varchar(7). FLTNo merupakan identitas pesawat suatu maskapai.
57 e. Status, merupakan kolom dengan tipe data varchar(20). Status merupakan keadaan suatu pengiriman ter-update dalam sebuah pelacakan. f. Date, merupakan kolom dengan tipe data varchar(20). Date merupakan tanggal ter-update suatu pengiriman dalam sebuah pelacakan. g. Time, merupakan kolom dengan tipe data varchar(5). Time merupakan tanggal kapan update berlangsung. Tabel 4.3 Tabel detail_tracing Nama kolom Tipe Panjang Keterangan Id Integer 11 Primary key Mawb Varchar 11 Foreign key Station Varchar 3 FLTNo Varchar 7 Status Varchar 20 Date Varchar 20 Time Varchar 5 5. Tabel users Tabel users berguna untuk autentifikasi bahwa users tersebut memiliki otorisasi untuk mengakses history chart dan berapa banyak request yang telah dilakukan. Dalam tabel ini terdapat beberapa kolom, sebagai berikut : a. id, merupakan kolom dengan tipe data int(11). Id ini berguna sebagai identitas apabila akan melakukan update atau delete tabel. Id ini bersifat auto increment dan merupakan primary key untuk tabel users. b. username, merupakan kolom dengan tipe data varchar (20) berguna sebagai identitas untuk melakukan autentifikasi login. c. password, merupakan kolom dengan tipe data varchar (32) merupakan kolom password untuk melakukan auntentifikasi login.
58 Tabel 4.4 Tabel users Nama kolom Tipe Panjang Keterangan Id Integer 11 primary key Username Varchar 20 Password Varchar 32 4.3 Rancangan Antar Muka Perancangan antar muka pada sistem pelacak kargo udara berbasis web ini dibagi menjadi Halaman Menu Utama, Halaman Login dan Halaman Dashboard. 4.3.1 Halaman Menu Utama Pada halaman utama diberi nama index.php. halaman utama ini terdiri dari 1 menu bar, Company s Logo, text box, button dan beragam text. Rinciannya adalah : - Menu Bar : Terletak pada kiri atas dari halaman, terdapat berbagai link, yaitu: Home untuk kembali kehalaman utama, About untuk mengetahui profil perusahaan dan Login untuk mengakses halaman Dashboard User. - Company s Logo : Terletak di tengah diatas text box. - Text Box : Terletak di bawah setelah Company s Logo text box yang lebih kecil untuk memasukkan nomor prefix dan text box yang lain untuk memasukkan nomor AWB. - Trace! Button : merupakan tombol apabila prefix dan AWB sudah diisi maka selanjutkan menekan tombol trace! untuk mendapatkan hasil nya. - Latest News : berisi tentang informasi perkembangan dari situs - Airline s name : berisi tentang informasi maskapai apa yang dilacak. Informasi akan muncul apabila sudah melakukan/menekan tombol trace!
59 - Detail Shipment : berisi tentang informasi detail kargo dan perjalanan kargo. Informasi akan tersedia apabila sudah melakukan tombol trace! - Cargo Tracing Feature : berisi tentang informasi fitur apa saja yang terdapat pada situs - Ayutrans.com 1999-2016 : Berisi tahun berdirinya perusahaan dan versinya. Gambar 4.8 Rancangan Muka Halaman Menu Utama 4.3.2 Halaman Login Pada halaman login diberi nama login.php. halaman login ini terdiri dari 1 menu bar, Company s Logo, text box dan button. Rinciannya adalah : - Menu Bar : Terletak pada kiri atas dari halaman, terdapat berbagai link, yaitu: Home untuk kembali kehalaman utama, About untuk mengetahui profil perusahaan dan Login untuk mengakses halaman Admin.
60 - Company s Logo : Terletak di tengah diatas text box. - Text Box : Terletak di bawah setelah Company s Logo, merupakan text box username dan password untuk masuk ke menu history. - login Button : merupakan tombol apabila username dan password sudah diisi. Maka, klik tombol login atau tekan enter untuk eksekusi. Gambar 4.9 Rancangan Muka Halaman Login 4.3.3 Halaman Dashboard Pada halaman Dashboard diberi nama index.php yang terdapat pada subfolder admin. halaman Dashboard ini terdiri dari 1 menu bar, Chart dan text. Rinciannya adalah : - Menu Bar : Terletak di atas dari halaman, terdapat berbagai link, yaitu: Dashboard untuk kembali kehalaman Dashboard, Manage User untuk keperluan menambah, update dan delete akun user, Manage Cargo untuk
61 keperluan menambah, update dan delete maskapai yang terdaftar, serta History untuk keperluan melihat record jumlah yang telah direquest beserta detail waktunya. Adapun Logout pada kanan atas apabila ingin keluar. - Chart : Terletak tidak jauh dibawah Dashboard. Chart atau grafik yang digunakan adalah Morris Donut Chart. Dalam chart ini terdapat laporan berapa jumlah request dan maskapai apa saja yang digunakan. Gambar 4.10 Rancangan Muka Halaman Dashboard