BAB 2 TINJAUAN REFERENSI 2.1 Landasan teori 2.1.1 Unified Modeling Language (UML) Unified modeling language adalah sekumpulan dari model konstruksi, dan notasi yang di definisikan oleh Object Management Group (OMG) yang adalah organisasi standar untuk pengembangan sebuah sistem. (Satzinger, Jackson, & Burd, 2012, p. 46) Dengan menggunakan UML, analisis dan end-user lebih dapat menggambarkan dan memahami bermacam - macam diagram yang secara spesifik digunakan dalam proyek pengembangan sebuah sistem. (Satzinger, Jackson, & Burd, 2012, p. 46) Dapat disimpulkan bahwa UML ini digunakan untuk menggambarkan dan memahami diagram sebagai dasar dan model dalam dan atau pengembangan sebuah sistem. 2.1.1.1 Use-case Diagram Dalam buku Systems Analysis and Design in a Changing World edisi keenam, Satzinger, Jackson, dan Burd mengatakan bahwa use-case mendeskripsikan seseorang yang menggunakan sistem, yaitu actor selalu berada diluar boundary yang memiliki porsi manualnya sendiri di dalam sistem dan terkadang aktor ini bukanlah manusia secara harafiah namun adalah sistem lain dan atau alat lain dan menunjukkan hubungan antara use-case dengan actor tersebut (Satzinger, Jackson, & Burd, 2012, p. 81) Elemen yang terdapat dalam use-case yang ditunjukkan pada Gambar 2.1 adalah: 1. Simple stick figure Menggambarkan actor yang berperan dan atau seseorang yang menggunakan use-case 2. Connecting line Menunjukkan indikasi hubungan yang terjadi antara use- case dengan aktor 9
38
Embed
BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
BAB 2
TINJAUAN REFERENSI
2.1 Landasan teori
2.1.1 Unified Modeling Language (UML)
Unified modeling language adalah sekumpulan dari model konstruksi,
dan notasi yang di definisikan oleh Object Management Group (OMG) yang
adalah organisasi standar untuk pengembangan sebuah sistem. (Satzinger,
Jackson, & Burd, 2012, p. 46)
Dengan menggunakan UML, analisis dan end-user lebih dapat
menggambarkan dan memahami bermacam - macam diagram yang secara
spesifik digunakan dalam proyek pengembangan sebuah sistem. (Satzinger,
Jackson, & Burd, 2012, p. 46)
Dapat disimpulkan bahwa UML ini digunakan untuk menggambarkan
dan memahami diagram sebagai dasar dan model dalam dan atau
pengembangan sebuah sistem.
2.1.1.1 Use-case Diagram
Dalam buku Systems Analysis and Design in a Changing
World edisi keenam, Satzinger, Jackson, dan Burd mengatakan bahwa
use-case mendeskripsikan seseorang yang menggunakan sistem, yaitu
actor selalu berada diluar boundary yang memiliki porsi manualnya
sendiri di dalam sistem dan terkadang aktor ini bukanlah manusia
secara harafiah namun adalah sistem lain dan atau alat lain dan
menunjukkan hubungan antara use-case dengan actor tersebut
(Satzinger, Jackson, & Burd, 2012, p. 81)
Elemen yang terdapat dalam use-case yang ditunjukkan pada
Gambar 2.1 adalah:
1. Simple stick figure
Menggambarkan actor yang berperan dan atau seseorang
yang menggunakan use-case
2. Connecting line
Menunjukkan indikasi hubungan yang terjadi antara use-
case dengan aktor
9
10
3. Automation boundary
Mendefinisikan batasan antara aktor dan aplikasi/sistem
yang digambarkan dengan kotak.
4. Use-case
Ditampilkan dalam bentuk oval dengan nama di dalam
use-case yang menggambarkan aktivitas dalam sistem, dan
digunakan untuk merespon dan menanggapi input dari user
(Satzinger, Jackson, & Burd, 2012, p. 69)
Gambar 2. 1 elemen-elemen use-case diagram
(Satzinger, Jackson, & Burd, 2012, p. 69)
Use-case diagram adalah permodelan UML yang digunakan
untuk menampilkan secara grafis bagaimana hubungan use-case
dengan user, dan kegiatan apa saja yang dapat dilakukan oleh user
dalam sebuah sistem.
11
Gambar 2. 2 Contoh Use-case diagram (Satzinger, Jackson, & Burd, 2012, p. 81)
Sebagai sebuah contoh pada gambar 2.2 diatas dapat dilihat,
bahwa dalam use-case diagram menampilkan sub-system dengan
lebih lengkap, dan lebih detail menjelaskan tentang use-case dan
actor dari individual sub-system tersebut. Pada kasus ini tujuan dari
diagram ini adalah menunjukkan hubungan, alur, bahkan tugas actor
dari sistem Customer Account sub-system. (Satzinger, Jackson, &
Burd, 2012, p. 81)
2.1.1.2 Use-case Description
Use-case description sama seperti use-case diagram, namun
ditunjukkan dalam model tekstual yang mendeskripsikan informasi atau
proses detail peran setiap use case. Pada umumnya, cara terbaik untuk
membuat sebuah use-case diagram adalah dengan menggunakan fully
developed use case description, karena menjelaskan sebuah use-case
dengan sangat detail. (Satzinger, Jackson, & Burd, 2012, p. 122)
12
Gambar 2. 3 Contoh use-case description dan komponen-komponennya
(Satzinger, Jackson, & Burd, 2012, p. 122)
Berdasarkan gambar 2.3, dapat disimpulkan beberapa komponen
dalam use-case description antara lain:
1. Use Case Name : Nama dari use-case
2. Scenario : Alur skenario (aktivitas) dalam suatu use- case
3. Triggering Event : Sesuatu hal yang memicu use-case tersebut
dijalankan/bekerja.
4. Brief Description : Penjelasan singkat alur yang dijalankan use-
case tersebut.
5. Actors : Suatu hal yang terkait dengan use-case. Actor
tidak selalu manusia, actor dapat juga sebuah sistem atau alat.
6. Related Use-Cases: Berdasarkan artinya, related Use Cases adalah
use-case lain yang masih berhubungan/berkaitan dengan use-case
13
yang sedang dijelaskan. Biasanya menjelaskan bagaimana dapat
saling berkaitan.
7. Stakeholders : Divisi atau actor lain yang menggunakan use-case.
8. Preconditions : Kondisi yang harus terpenuhi sebelum use-case
dimulai/berjalan.
9. Postconditions : Kondisi yang terjadi setelah use-case selesai
dijalankan.
10. Flow of Activities : Tahapan secara detail yang dilakukan oleh
user dan respon yang diberikan oleh sistem kepada user.
11. Exception Conditions: Aktivitas yang mempengaruhi suatu use-
case tidak dapat berjalan dengan baik/semestinya.
2.1.1.3 Activity Diagram
Gambar 2. 4 Contoh activity diagram (Satzinger, Jackson, & Burd, 2012, p. 125)
14
Activity Diagram mendeskripsikan berbagai macam aktivitas
dari user dan atau aktor yang melakukan aktivitas tersebut, dan alur
berurutan mengenai aktivitas-aktivitas tersebut yang dapat dilihat
pada Gambar 2.4. (Satzinger, Jackson, & Burd, 2012, p. 57)
Gambar 2. 5 Simbol-simbol activity diagram (Satzinger, Jackson, & Burd,
2012, p. 57)
Pada Gambar 2.5 simbol-simbol dalam activity diagram terdiri dari:
1. Oval
Sebagai representasi dari aktivitas individual dalam sebuah workflow
2. Connecting arrow
Representasi alur atau urutan aktivitas-aktivitas yang ada
3. Black circle
Titik hitam ini menunjukan dimulainya, dan berakhirnya alur aktivitas.
Titik hitam ini ada di dua tempat berbeda, yaitu awal dan akhir workflow.
Pada awal workflow berbentuk titik hitam, dan pada akhir workflow
berbentuk titik hitam dengan lingkaran diluarnya.
4. Diamond
Simbol ini menunjukan titik keputusan yang digunakan oleh user sebagai
pengambil keputuan dan akan menentukan langkah selanjutnya alur
aktivitas ini akan berjalan.
15
5. Heavy solid line
Heavy solid line ini adalah synchronization bar yang memisahkan satu
langkah menjadi beberapa langkah/ alur dan atau mengkombinasikan
/menyatukan beberapa alur yang terpisah menjadi satu langkah.
6. Swimlane heading
Merepresentasikan agent atau user yang menampilkan dan atau
menjalankan aktivitas.
Gambar 2. 6 Contoh activity diagram secara lengkap (Satzinger, Jackson,
& Burd, 2012, p. 59)
Pada gambar 2.6 menunjukkan contoh activity diagram pada kegiatan
e-commerce (online checkout) yang mengandung beberapa actor, dan alur
aktivitas yang dilakukan saat checkout order.
16
2.1.1.4 Class Diagram
Menurut Satzinger, class diagram berguna untuk menunjukkan kelas
dari suatu obyek yang ada pada sebuah sistem dan hubungan yang terjadi
diantara kelas-kelas tersebut.
Gambar 2. 7 Kelas dan hubungannya dalam class diagram (Satzinger,
Jackson, & Burd, 2012, pp. 101-107)
Pada gambar 2.7 dapat dilihat, bahwa class diagram memiliki
beberapa komponen, yaitu persegi panjang sebagai representasi kelas-kelas
beserta karakteristik dan atau sifat dari kelas tersebut, dan garis penghubung
antara persegi panjang yang menunjukkan hubungan antar kelas tersebut.
Dalam class diagram, terdapat 3 access modifier, yaitu:
1. Private : dilambangkan dengan simbol minus ( - )
17
2. Protected : dilambangan dengan simbol pagar ( # )
3. Public : dilambangkan dengan simbol plus ( + )
Terdapat 3 jenis hubungan yang ada pada class diagram, yaitu:
1. Association
Association adalah relasi antara dua class yang saling
berhubungan, dilambangkan dengan garis yang menghubungkan antar
class satu dengan lainnya. Hubungan itu di antara lain (Satzinger,
Jackson, & Burd, 2012, pp. 101-107) :
1. Zero to one (0..1)
2. One and one only (1)
3. One and one only alternate (1..1)
4. Zero or more (0..*)
5. Zero or more alternate (*)
6. One or more (1..*)
2. Generalization/specification
Gambar 2. 8 Generalization dan Specification Association (Satzinger,
Jackson, & Burd, 2012, p. 105)
Generalization pada gambar 2.8 merupakan sebuah relasi
hierarki dimana class dibagi berdasarkan persamaan dan
perbedaannya, relasi ini terbagi lagi menjadi 2 yaitu:
a. Superclass : Sebuah superclass merupakan class general yang
dapat mewarisi sifat dan kesamaannya kepada subclass.
18
b. Subclass : Sebuah subclass merupakan class yang lebih
spesifik, memiliki karakter mirip yang diturunkan oleh
superclass/parent classnya, namun pada dasarnya subclass
memiliki perbedaan antara satu dengan lainnya.
Specification yang ditampilkan pada Gambar 2.8 merupakan
pengembangan dari subclass, sebuah subclass dapat memiliki sifat/atribut
yang sama dengan parent/super class-nya. Walaupun tetap memiliki
perbedaan satu sama lain. Hal yang membuat berbeda dapat atribut atau
hal lainnya yang lebih spesifik. (Satzinger, Jackson, & Burd, 2012, pp.
101-107)
3. Whole/part relationships dibagi menjadi dua :
a. Aggregation
Aggregation merupakan hubungan dimana sebuah class mengambil
peran sebagai parent dan kelas lainnya berperan sebagai child. Dalam
aturan agregat, sebuah child dapat bertahan tanpa adanya parent.
Aggregation dilambangkan dengan diamond.
b. Composition
Composition merupakan relasi whole part yang lebih kuat
dibandingkan dengan agregat sehingga hubungan antara parent dan child
tidak dapat terpisahkan. Apabila kelas parent dihapus maka child menjadi
tidak berguna dan harus dihapus juga. Composition dilambangkan dengan
diamond yang diberi warna hitam didalamnya (Satzinger, Jackson, &
Burd, 2012, pp. 101-107).
2.1.1.5 Sequence Diagram
Sequence Diagram adalah diagram lanjutan dari use-case,
menunjukkan skenario atau flow antara aktor dan sistem. Sebuah sistem
sequence diagram digunakan untuk mendeskripsikan urutan dari informasi
sebuah sistem. Dalam sequence diagram, interaksi yang diperlihatkan lebih
kompleks dan berbeda dibanding use-case diagram, dimana aktor dan sistem
akan berinteraksi dengan memasukkan data dan juga akan menerima data,
sebagai contoh penerapan sequence diagram terdapat pada Gambar 2.9.
(Satzinger, Jackson, & Burd, 2012, pp. 126-127)
19
Notasi yang ada dalam sequence diagram antara (Satzinger,
Jackson, & Burd, 2012, pp. 126-133) :
a. Actor : Dilambangkan dengan stickman, memiliki sistem kerja yang
sama dengan use-case dimana aktor berinteraksi dengan sistem.
b. Object : Representasi seluruh sistem automasi yang dilambangkan
dengan nama obyek yang digaris bawahi didalam sebuah kotak.
c. Lifeline : Dilambangkan dengan garis putus-putus, mengindikasikan
alur dari pesan yang dikirim dan yang diterima oleh aktor dan obyek,
serta menunjukkan waktu perjalanan obyek tersebut.
d. Input Message : Mendeskripsikan tujuan dan data yang dikirimkan.
e. Return Value : Dilambangkan dengan panah putus-putus yang
menunjukkan suatu respon setelah user menjalankan suatu proses.
Respon tersebut berupa boolean (true-false).
f. Loop : pesan yang dikirim dan return value terdapat dalam
kotak yang lebih besar dan berjalan berulang kali sesuai dengan
kondisinya, sebagai contoh notasi ini terdapat pada Gambar 2.10.
g. True/false condition : Mengindikasikan pesan berulang selama
kondisinya masih benar.
h. Alt frame : Mengindikasikan kondisi if-else yang dapat dilihat
pada Gambar 2.11.
20
Gambar 2. 9 Penerapan Sequence Diagram (Satzinger, Jackson, & Burd,
2012, p. 342)
Gambar 2. 10 Contoh notasi loop (Satzinger, Jackson, & Burd, 2012, p. 128)
21
Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, &
Burd, 2012, p. 130)
2.1.2 Android
Android merupakan sistem operasi mobile berbasis kernel Linux yang
dikembangkan oleh Android Inc dan kemudian diakuisisi oleh Google.
Sistem operasi ini bersifat open source (terbuka), sehingga para programmer
dapat membuat aplikasi secara mudah. Sistem operasi Android memiliki fitur
yang dimiliki oleh smartphone pada umumnya seperti aplikasi yang
melimpah, email, fitur online seperti browser, dll. (Enterprise, 2010, p. 1)
2.1.3 Waterfall Model
Waterfall model atau terkadang disebut dengan classic life cycle
adalah metode yang pendekatannya berurutan dan sistematik dalam
pengembangan software yang diawali dengan menspesifikasikan kebutuhan
customer dan memprosesnya melalui perencanaan, pembuatan model,
konstruksi, pengaplikasian serta maintenance setelah software selesai dibuat.
(Pressman & Maxim, 2015, pp. 41-42)
Gambar 2. 12 Waterfall Model (Pressman & Maxim, 2015, pp. 41-42)
22
Seperti yang terlihat di Gambar 2.12, terdapat air terjun kecil antara
tahap pertama ke tahap lainnya, oleh sebab itu model ini disebut dengan
Waterfall Model atau daur ulang perangkat lunak.
Beberapa tahapan yang harus dilalui dalam proses waterfall seperti
yang terlihat dalam Gambar 2.12 adalah sebagai berikut:
a. Communication
Tahap yang pertama dilakukan adalah berkomunikasi antara
developer dan customer dalam membahas dan menganalisa masalah
untuk menentukan kebutuhan sistem dan data-data yang diperlukan, serta
mendefinisikan fitur dan fungsi dari software yang akan dibuat.
b. Planning
Tahapan ini adalah tahapan perencanaan yang menjelaskan
mengenai estimasi tugas yang akan dilakukan, resiko yang dapat terjadi,
estimasi produk yang dihasilkan, penjadwalan pembuatan software dan
memastikan proses pengerjaan software tetap berlangsung lancar.
c. Modeling
Pada tahap ini developer mulai merancang dan memodelkan
arsitektur sistem yang dapat berupa perancangan struktur data, arsitektur
software, tampilan interface dari software, dan algoritma dasar program
untuk lebih memahami gambaran besar dari perencanaan yang telah
dibuat di tahap sebelumnya.
d. Construction
Pada tahap ini developer memulai untuk coding atau membuat
kode yang dapat dibaca dan di mengerti oleh mesin untuk dibuat menjadi
sebuah software. Setelah tahap coding selesai, pengujian terhadap sistem
akan dijalankan untuk menemukan dan mengkoreksi kesalahan yang
mungkin dan atau telah terjadi untuk diperbaiki.
e. Deployment
Tahap terakhir ini adalah tahap implementasi software kepada
customer, serta melakukan evaluasi pada software. Pada tahap ini dapat
dilakukan perbaikan dan pengembangan software berdasarkan hasil
evaluasi agar software dapat berjalan dan berkembang sesuai dengan
fungsinya.
23
2.1.4 PHP (Hypertext Preprocessor)
PHP atau Hypertext Preprocessor adalah bahasa pemrograman script
serverside yang sengaja dirancang lebih cenderung untuk membuat dan
mengembangkan website. Bahasa pemrograman ini dirancang khusus untuk
para pengembang website agar dapat menciptakan suatu halaman website
yang bersifat dinamis. Gambar 2.13 menunjukkan korelasi antara PHP dan
model MVC
Gambar 2. 13 PHP dan MVC Model (Yudhanto & Prasetyo, 2018, p. 7)
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995 dan
terus dikembangkan hingga saat ini. Ada banyak sekali web termasuk
CMS yang dibuat menggunakan bahasa pemrograman PHP, salah satu
contohnya adalah Wordpress. (Yudhanto & Prasetyo, 2018, p. 7)
2.1.5 Hypertext Markup Language (HTML)
Hypertext Markup Language adalah sebuah bahasa untuk
mendeskripsikan bagaimana tulisan, grafik dan file yang mengandung
informasi lainnya terorganisir dan terhubung bersama. Hypertext awalnya
merupakan teks yang tersimpan dalam form elektronik yang berhubungan
antar halaman. Namun saat ini pengertian hypertext berubah menjadi suatu
hal yang mengarah kepada semua hal yang berhubungan dengan obyek (teks,
gambar, file, dll) yang dapat dihubungkan dengan obyek lain.
Sampai saat ini, sudah lebih dari 110 juta web server menjawab request
user untuk lebih dari 25 miliar teks dan file multimedia. Kata yang biasa
pengguna gunakan dalam kehidupan sehari-hari adalah “mengunjungi web
24
halaman”, namun apa yang sesungguhnya terjadi adalah pengguna melihat
semua teks dan gambar dalam sebuah alamat dalam komputer. Teks yang
dibaca, dan gambar yang dilihat adalah hasil render dari web browser. Untuk
mendukung tampilan HTML yang baik dalam sebuah website, diperlukan
HTML, CSS (Cascading Style Sheet), JavaScript bergabung dan
berkolaborasi untuk menghasilkan object atau elemen tertentu seperti teks,
gambar, video, tabel, dll sehingga menjadi konten dari sebuah halaman web
yang baik (Meloni, 2012, p. 2)
2.1.6 Cascading Style Sheet (CSS)
Cascading Style Sheet membantu sebuah konten yang telah ditulis
dengan Hypertext Markup Language atau HTML menjadi lebih indah dan
lebih bagus. Konsep dalam Cascading Style Sheet atau biasa disebut
Stylesheet ini cukup sederhana, yaitu dengan membuat sebuah Stylesheet
dokumen yang menspesifikasikan font, warna, spacing, dan karakteristik
lainnya untuk membangun tampilan unik pada tampilan website-nya.
Memisahkan file CSS / Stylesheet dengan file HTML memudahkan
perubahan dan perbaikan kode di masa yang akan datang, dan memudahkan
dalam menghubungkan setiap halaman yang telah dan atau sudah diberi
tampilan.
Berikut adalah contoh penulisan CSS:
h1 {
font: 36pt Courier;
}
Dari code di atas, dapat dilihat bahwa CSS terdiri dari tiga komponen utama:
1. Selector
Selector berfungsi sebagai penamaan atau penanda dalam
sebuah tag atau elemen HTML yang akan dimodifikasi
tampilannya dengan CSS. Dapat dilihat dari contoh diatas
memiliki Selector h1, yang berarti semua tag h1 dalam file HTML
akan memiliki font berukuran 36, dengan jenis huruf Courier.
2. Property
25
Property merupakan suatu atribut yang akan diubah dalam
selector, berdasarkan contoh diatas maka property yang akan
diubah adalah font dalam tag h1.
3. Value
Value adalah nilai apa yang akan di ubah dalam suatu property
tersebut. Value ini dapat berupa teks maupun angka, untuk teks
pada umumnya memiliki nilai tetap yang dapat dipilih seperti
jenis penempatan tulisan, yaitu ‘center’, ‘ left’ atau ‘right’, untuk
angka pada umumnya memiliki value yang tidak tetap yang dapat
di isi dengan apapun yang ingin dideklarasikan. Pada kode diatas,
dapat disimpulkan bahwa value yang dimiliki merupakan nilai
tidak tetap yang harus diisi sendiri, nilai yang dipilih merupakan
angka 36 dan nilai tetap dimana untuk font sudah tersedia pada
library (Meloni, 2012, p. 57)
2.1.7 JavaScript
Javascript adalah sebuah bahasa pemrograman yang digunakan pada
website agar menjadi lebih interaktif dan dinamis. Javascript adalah bahasa
pemrograman client-side dimana tampilan akhir akan dilihat oleh user secara
langsung. JavaScript tidak memerlukan mesin kompilasi untuk eksekusi
instruksi, cukup memodifikasinya dengan tag <script> dalam HTML, lalu
save dan refresh, maka perubahan yang dibuat akan langsung terlihat pada
web browser.
Menurut Meloni, ada beberapa hal yang dapat javascript lakukan. Hal
itu di antara lain adalah (Meloni, 2012, pp. 66-67):
a. Menampilkan pesan kepada user sebagai bagian dari web page
dalam status line di browser maupun pada alert box.
b. Menyortir konten dari sebuah form dan melakukan
perhitungan. Pada umumnya ini berhubungan dengan angka
dan kuantitas.
c. Membuat animasi gambar atau membuat gambar dapat
bergerak ketika user menggerakan mouse di sekitar gambar.
d. Membuat banner iklan yang interaktif kepada user, untuk
menampilkan tampilan grafik yang lebih bagus dan menarik.
26
e. Mendeteksi apakah browser sedang digunakan, dan
menjalankan fungsi lanjutan tertentu yang hanya dapat
dijalankan di dalam browser yang kompatibel.
f. Mendeteksi plug-ins yang ter-instal dan memberitahu user
jika ada plug-in yang diperlukan.
g. Memodifikasi seluruh ataupun sebagian dari web page tanpa
perlu user melakukan reload.
h. Menampilkan dan berinteraksi dengan data dari sebuah remote.
2.1.8 Web Server
Web server adalah perangkat lunak yang berfungsi sebagai penerima
input yang dikirimkan melalui browser, kemudian memberikan tanggapan
permintaan dalam bentuk halaman situs web atau lebih umumnya dalam
dokumen HTML. Namun, web server dapat mempunyai dua pengertian
berbeda, yaitu sebagai bagian dari perangkat keras (hardware), maupun
sebagai bagian dari perangkat lunak (software). Jika merujuk pada hardware,
webserver digunakan untuk menyimpan semua data seperti dokumen HTML,
gambar, file CSS stylesheet, dan file JavaScript. Sedangkan pada sisi
software, fungsi web server adalah sebagai pusat kontrol untuk memproses
input yang diterima dari browser. Semua yang berhubungan dengan website
biasanya juga berhubungan dengan web server, karena tugas web server
adalah mengatur semua komunikasi yang terjadi antara browser dengan
server untuk memproses sebuah website. (Yudhanto & Prasetyo, 2018, p. 10)
2.1.9 Model-View-Controller (MVC)
Model-View-Controller atau MVC adalah sebuah metode untuk
membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan
(View) dan cara bagaimana memprosesnya (Controller) contohnya dapat
dilihat pada Gambar 2.14. (Yudhanto & Prasetyo, 2018, p. 6) Penjelasan
setiap komponen dalam MVC adalah sebagai berikut :
a. Model : Model mewakili struktur data, dan berisi fungsi-fungsi yang
membantu seseorang dalam pengelolaan basis data, seperti
memasukkan data ke basis data, pembaruan data, dll.
27
b. View : View adalah bagian yang mengatur tampilan ke pengguna,
contohnya halaman web.
c. Controller: Controller merupakan bagian yang menjembatani model
dan view. Controller berisi perintah-perintah yang berfungsi untuk
memproses suatu data dan mengirimkannya ke halaman web.
Gambar 2. 14 Model-View- Controller (MVC) (Yudhanto & Prasetyo,
2018, p. 6)
2.1.10 Framework
Framework adalah kerangka kerja. Framework juga dapat diartikan
sebagai kumpulan script (terutama class dan function) yang dapat membantu
developer/programmer dalam menangani berbagai masalah-masalah dalam
pemrograman, seperti koneksi ke database, pemanggilan variabel, file, dll.
Dan framework dapat disebut juga dengan kumpulan fungsi-fungsi / library,
sehingga pekerjaan developer lebih fokus dan lebih cepat dalam membangun
aplikasi.
Framework adalah komponen pemrograman yang siap digunakan ulang
kapan saja, sehingga programmer tidak harus membuat script yang sama untuk
tugas yang sama dan tidak perlu membuat fungsi dari awal. Programmer cukup
memanggil kumpulan library atau fungsi yang sudah ada di dalam
28
framework, cara menggunakan fungsi tersebut sudah ditentukan dan memiliki
aturan masing-masing. Pada gambar 2.15 ditampilkan beberapa framework
PHP yang cukup dikenal oleh kalangan programmer. (Yudhanto & Prasetyo,
2018, p. 8)
Gambar 2. 15 Contoh beberapa framework PHP (Yudhanto & Prasetyo,
2018, p. 9)
2.1.11 Laravel
Laravel adalah salah satu framework PHP terbaik yang dikembangkan
oleh Taylor Otwell. Proyek Laravel dimulai pada April 2011. Awal mula proyek
ini dibuat karena Otwell sendiri tidak menemukan framework yang up-to-date
dengan versi PHP. Mengembangkan versi PHP yang ada juga bukan merupakan
ide yang bagus karena keterbatasannya sumber daya. Oleh sebab itu, Otwell
membuat sendiri framework bernama Laravel, dan membuat syarat penggunaan
Laravel harus diimbangi minimal dengan PHP versi 5.3.
Laravel merupakan framework web development PHP yang bersifat
open source dirilis di bawah lisensi MIT dan dibangun dengan konsep MVC
(Model-view-controller). Laravel adalah pengembangan website berbasis
MVC yang ditulis dalam bahasa PHP, dirancang untuk meningkatkan
kualitas perangkat lunak dengan mengurangi pengembangan awal dan biaya
pemeliharaan, serta untuk meningkatkan pengalaman bekerja dengan aplikasi
29
yang menyediakan sintaks ekspresif, jelas, dan aplikasi yang dapat
menghemat waktu. (Yudhanto & Prasetyo, 2018, pp. 17-18)
Beberapa alasan laravel adalah salah satu framework PHP yang
sangat baik untuk digunakan (Yudhanto & Prasetyo, 2018, pp. 19-21) :
- Mudah dan dokumentasinya lengkap
Platform laravel menarik dan mudah digunakan, programmer
hanya perlu memiliki pemahaman dasar mengenai PHP, maka
struktur framework ini akan mudah dipahami karena dokumentasinya
yang sangat baik, rapi, dan jelas.
- Open Source
Merupakan framework open source, yang berarti dapat digunakan
secara bebas, gratis, dan memungkinkan programmer membuat web
aplikasi yang besar dan kompleks dengan cukup mudah, yaitu hanya
dengan bermodalkan editor dan web server yang telah terinstal PHP.
- Arsitektur MVC
Dengan menggunakan pola MVC, struktur kode menjadi lebih
rapi dimana struktur itu memisahkan antara logika dan tampilan.
- Blade Template
Hal menarik yang dimiliki Laravel adalah Blade Template, selain
unik juga sangat menarik perhatian untuk digunakan. Contoh
penggunaan Blade Template adalah dapat memetakan template yang
di miliki dengan membaginya menjadi beberapa blade sehingga
menjadi lebih mudah untuk diatur.
- Memiliki Fitur Migration
Migration adalah salah satu fitur utama yang dimiliki oleh
Laravel. Migration memungkinkan user untuk mempertahankan
struktur database yang dimiliki tanpa harus membuatnya kembali.
Dengan fitur ini user dapat mengembalikan beberapa perubahan
terakhir yang kita lakukan pada database.
- Keamanan
Laravel memberikan beberapa pilihan penting yang dapat
digunakan untuk membuat aplikasi agar tetap aman.
- Komunitas yang Besar
30
Laravel didukung dengan komunitas yang besar, dengan hal ini
pula maka user yang baru mulai mempelajari framework ini akan
mudah mencari solusi atas setiap permasalahan yang mungkin akan
ditemukan selama proses belajar/mengerjakan aplikasi.
- Hemat Waktu
Dengan semua kelebihan Laravel diatas, maka dapat disimpulkan
akan mudah mempelajari framework ini, cukup membuka
dokumentasi, karena akan sangat menghemat waktu dalam proses
pembuatan aplikasinya.
2.1.12 React Native
React Native adalah sebuah framework Javascript untuk menulis kode
yang secara nyata membangun aplikasi mobile untuk iOS dan Android. Library
dalam React Native adalah berbasis React, Library Javascript Facebook untuk
membangun UI. Namun, dibanding menargetkan web browser, React Native
fokus kepada platform mobile. Dalam arti lain, web developer kini dapat
membangun aplikasi mobile menggunakan library javascript yang dimana sudah
terdapat dan sudah sangat familiar dalam dunia web. Framework ini juga
mempermudah developer karena dapat dijalankan pada Android maupun iOS.
React Native ditulis dengan gabungan bahasa javascript dan XML,
atau lebih dikenal dengan JSX. Untuk back-end nya React Native
menggunakan fitur Javascript interface untuk menghubungkan API yang
biasa dikenal dengan istilah fetch. Aplikasi akan dibangun menggunakan
komponen asli dari UI mobile, sehingga akan tampak seperti aplikasi mobile
pada umumnya. (Eisenman, 2016, p. 1)
2.1.12.1 Expo
Expo adalah alat yang membantu developer membangun
project React Native. Expo bukanlah milik Facebook ataupun React
Native, namun expo berkembang di sekitar React Native. Dalam
penggunaanyan Expo jauh lebih mudah dan cepat, karena hanya perlu
menggunakan command yang lebih pendek, yaitu “npm start / expo
start”, lalu hasil dari program mobile apps sudah dapat terlihat
(Zammetti, 2018, p. 13)
31
2.1.12.2 Native Base
Berdasarkan website resmi Native Base (NativeBase, 2020),
Native Base adalah sebuah UI komponen library yang gratis dan open
source untuk membangun mobile apps pada React Native.
2.1.13 Visual Studio Code
Visual Studio Code adalah cross-platform development tool pertama
milik Microsoft dibawah keluarga Visual Studio. Arti dari cross-platform
adalah alat ini berjalan dalam sistem operasi Windows, Linux, dan macOS.
Alat ini gratis dan dapat digunakan bebas atau dapat disebut juga dengan
open source. Visual Code memungkinkan programmer mengedit folder code
atau folder-based project dengan lebih mudah.
Keunggulan Visual Code adalah angka bahasa yang besar dan kaya
akan fitur editing seperti IntelliSense, mencari referensi simbol, dan dengan
cepat mencapai sebuah type definition, dll. (Sole, 2019, p. 2)
2.1.14 Postman
Postman adalah tool yang digunakan untuk melakukan pengujian
API. Postman memiliki GUI yang mudah dipahami, dan dapat mengirimkan
HTTP request. Postman mengijinkan user untuk mengirimkan request
dengan HTTP methods yang berbeda(GET, POST, PUT, DELETE) dan user
dapat melakukan pengecekan respon dari server. Dengan alat ini, user dapat
dengan mudah mengetes API dengan mengirim sebuah request client dan
postman akan langsung mengirimkan HTTP response agar pengecekan dapat
dilakukan lebih cepat. User juga dapat menyimpan kasus atau proyek yang
telah dilakukan pengujian dan mengelompokannya ke dalam koleksi yang
berbeda (Chan, Chung, & Huang, 2019, p. 27)
2.1.15 Database
Database adalah koleksi dari data yang terkait secara logis dengan
deskripsinya dan dirancang untuk memenuhi kebutuhan dari sebuah
organisasi. Database memiliki sifat tunggal, namun memungkinkan adanya
tempat penyimpanan yang besar dan dapat dipakai disaat yang bersamaan
oleh beberapa departemen dan user.
32
Database digunakan oleh beberapa sumber coorporate yang tidak
digunakan lagi untuk file data redundan, namun digunakan untuk seluruh
data yang terintegrasi dengan duplikat data yang minimum. Untuk
penganalisaan informasi yang dibutuhkan oleh organisasi, diperlukan
identifikasi entity, attribute, relationships. (Connolly & Begg, 2015, p. 63)
Kumpulan database ini dikelola dan dikendalikan oleh Database
Management System (DBMS).
2.1.15.1 DBMS (Database Management System)
DBMS adalah sistem software yang memungkinkan
penggunanya untuk menjelaskan, membuat, memelihara dan
mengontrol akses ke database. (Connolly & Begg, 2015, p. 64)
DBMS menyediakan beberapa fasilitas berupa:
1. Memberikan akses kepada user untuk menjelaskan database
menggunakan Data Definition Language (DDL).
2. Memberikan akses kepada user untuk memasukkan,
memperbarui, menghapus, mengambil data dari database
menggunakan Data Manipulation Language (DML).
3. Memiliki kontrol akses ke database, contohnya:
a. Security system
b. Integrity system
c. Concurrency control system
d. Recovery control system
e. User-accessible catalog
2.1.15.2 Entity-Relationship Diagrams
Entity-Relationship (ER) diagram digunakan untuk
mengidentifikasi data penting berupa entity, dan relationship, serta
merepresentasikannya dalam diagram. Data-data yang ditampilkan
pada diagram ini adalah entity type, relationship type, dan attribute.
(Connolly & Begg, 2015, p. 405)
1. Entity Type
Entity type adalah sekumpulan object dengan karakteristik
dan atau tipe yang sama. Object dapat bersifat physical (object asli)
atau conceptual (object abstrak). Entity type dapat diidentifikasi
dengan nama dan karakteristik. (Connolly & Begg, 2015, p. 406)
33
Entity type diklasifikasikan dalam dua tipe (Connolly &
Begg, 2015, p. 417), yaitu:
- Strong entity type
Entity type ini bersifat tidak bergantung pada entity type
lainnya. Karakteristik strong entity type adalah setiap entity
dapat diidentifikasikan secara unik menggunakan primary key
attribute dari entity type tersebut.
- Weak entity type
Entity type ini memiliki sifat bergantung pada entity type
lainnya. Karakteristik weak entity type adalah setiap entity
tidak dapat diidentifikasi secara unik hanya menggunakan
attribute yang terkait dengan entity type tersebut. Atau
dapat diidentifikasikan secara unik hanya melalui
hubungan dengan attribute yang memiliki primary key.
2. Relationship type
Relationship type adalah kumpulan hubungan antara entity
type. Setiap tipe hubungan diberikan nama sesuai dengan
fungsinya masing-masing. (Connolly & Begg, 2015, p. 408)
Attributes adalah karakteristik dari sebuah entity atau
relationship type, atau nilai yang dapat mendeskripsikan adanya
entity dan merepresentasikan tujuan utama dari data yang
disimpan pada database. (Connolly & Begg, 2015, p. 413)
Attribute memiliki lima key (Connolly & Begg, 2015, pp. 415-
416), yaitu :
- Candidate key
Candidate key adalah sekumpulan attribute dengan
jumlah yang minimal yang dapat mengidentifikasi
setiap entity type secara unik.
- Primary key
Primary key adalah candidate key yang terpilih untuk
mengidentifikasi setiap entity type secara unik.
- Composite key
34
Composite key adalah candidate key yang terdiri dari
dua atau lebih attribute.
- Alternate key
Alternate key adalah candidate key yang tidak dipilih
sebagai primary key.
- Foreign key
Foreign key adalah attribute atau sekelompok attribute
dalam satu relasi yang cocok dengan candidate key dari
beberapa relasi yang sama. Biasanya foreign key ini
dipakai untuk merujuk pada primary key atau candidate
key pada attribute lain. (Connolly & Begg, 2015, p. 159)
2.1.15.2.1 Multiplicity
Multiplicity adalah jumlah dan atau kisaran kemungkinan
dari entity type yang berhubungan dengan entity type tunggal
melalui hubungan tertentu. (Connolly & Begg, 2015, pp. 419-
422)
1. One-to-One (1:1) Relationships
Gambar 2. 16 Contoh One-to-One Relationship
(Connolly & Begg, 2015, pp. 419-422)
35
2. One-to-Many (1:*) Relationships
Gambar 2. 17 Contoh One-to-Many Relationship (Connolly
& Begg, 2015, pp. 419-422)
3. Many-to-Many (*:*) Relationships
Gambar 2. 18 Contoh Many-to-Many Relationship
(Connolly & Begg, 2015, pp. 419-422)
2.1.15.3 Phpmyadmin
Berdasarkan website resmi PhpMyadmin, PhpMyadmin adalah
sebuah software gratis yang berbentuk seperti halaman situs pada web
server. Fungsi dari halaman ini adalah, sebagai administrasi database
MySQL. Beberapa hal yang dapat dilakukan PhpMyadmin adalah