7
LANDASAN TEORI
2.1. Konsep Dasar Web
Web dapat diakses oleh perangkat lunak client web yang disebut browser.
Browser membaca halaman-halaman web yang tersimpan dalam server web melalui protokol yang disebut HTTP (Hypertext Transfer Protocol). Jenis – jenis web adalah sebagai berikut:
2.1.1. Website
Menurut Yuhefizar dalam Prayitno & Safitri (2015:2) pengertian website adalah “keseluruhan halaman web yang terdapat dari sebuah domain yang mengandung informasi”.
Menurut Sibero (2013:11) “Web adalah suatu sistem yang berkaitan dengan dokumen digunakan sebagai media untuk menampilkan teks, gambar dan berbagai multimedia pada jaringan internet”.
Jadi website adalah sebuah halaman informasi pada jaringan internet yang dapat diakses oleh banyak orang yang berupa media teks, gambar dan berbagai multimedia. Kategori Website yaitu:
a. Web Statis
Web statis adalah web yang menampilkan informasi-informasi yang sifatnya statis (tetap).
b. Web Dinamis
Web dinamis adalah web yang menampilkan informasi serta dapat berinteraksi dengan pengguna. Web yang dinamis memungkinkan
pengguna untuk berinteraksi menggunakan form sehingga dapat mengolah informasi yang ditampilkan. Web dinamis bersifat interaktif, tidak kaku dan terlihat lebih indah.
1. Internet
Menurut Sibero dalam Hermawan (2013:8) “internet (Interconnected Network ) adalah jaringan komputer yang menghubungkan antara jaringan secara global, internet dapat juga disebut jaringan dalam suatu jaringan yang luas.”
2. Aplikasi Berbasis Web a. Web Server
Menurut Hidayatullah dan Kawistara dalam Lestari (2013:8). “Web Server adalah tempat dimana anda menyimpan aplikasi web, kemudian mengaksesnya melalui internet”.
b. Web Browser
Menurut Sibero dalam Hermawan (2013:9) “web browser adalah aplikasi perangkat lunak yang digunakan untuk mengambil dan menyajikan sumber informasi web. ”
2.1.2. Bahasa Pemograman
Bahasa pemograman yang digunakan penulis dalam pembuatan website adalah sebagai berikut:
1. PHP (Hypertext Prepocessor)
Menurut Winarno dan Zaki dalam (Lestari, 2013) menyatakan PHP adalah bahasa pemrograman untuk web yang menganut client server.
Menurut Hidayatullah dan Kawistara dalam Lestari (2013:18) menyatakan “PHP Hyepertext Preprocessor (PHP) adalah suatu bahasa scripting khususnya digunakan untuk web server.
2. HTML (Hyper Text Markup Language)
HTML merupakan bahasa pemograman sederhana yang berfungsi untuk membuat sebuah halaman web yang dalat diakses untuk menampilkan berbagai informasi.
Menurut Sibero dalam Hermawan (2013:11) “HyperText Markup Language atau HTML adalah bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dokumen web.”
HTML adalah suatu bahasa yang dikenal oleh web browser untuk menampilkan informasi yang lebih menarik dibandingkan dengan teks biasa dalam Hermawan (2013:13).
Dapat disimpulkan bahwa, HTML adalah sebuah bahasa pemograman yang bersifat sederhana dapat dikenal oleh web browser dan dapat dipahami dengan mudah. Hermawan (2013:13).
3. CSS (Cascading Style Sheet)
CSS merupakan cara menata halaman bertingkat, yang bearti setiap satu elemen yang telah diformat dan memiliki anak dan telah di format, maka anak dari elemen tersebut secara otomatis mengikuti format elemen induknya. CSS berfungsi untuk membuat kerangka sebuah halaman web agar terlihat menarik menurut Sibero dalam Hermawan (2013:12).
Jadi CSS merupakan suatu bahasa pemograman yang digunakan khusus untuk mengatur gaya tampilan halaman web. Hermawan (2013:12).
4. Jquery
Jquery adalah salah satu kumpulan pustaka fungsi yang dibentuk dari JavaScript yang terbaik saat ini menurut Sibero dalam Hermawan (2013:11).
Jquery merupakan sekumpulan kode JavaScript yang dibuat dalam berbagai modul dan dalam pemakaiannya sesederhana mungkin, sedemikian sehingga seorang programmer akan lebih dimudahkan dalam pemograman JavaScript, Jquery juga disebut sebagai library JavaScript menurut Oktavian dalam Hermawan (2013:11).
Dari teori diatas dapat disimpulkan bahwa Jquery merupakan sekumpulan kode JavaScript yang dibentuk sesederhana mungkin yang dapat memudahkan seorang programmer dalam pemograman JavaScript.
Hermawan (2013:11).
2.1.3. Basis Data
Databasee Management System (DBMS) atau dalam bahasa Indonesia sering disebut sebagai sistem manajemen basis data adalah suatu sistem aplikasi yang digunakan untuk menyimpan, mengelola dan menampilkan data,karena program tidak dapat dipisahkan dengan kebutuhan basis data apapun bentuknya, entah berupa file teks maupun database management system(DBMS). (sukamto dan Shalahuddin, 2013:40). Basis data terbagi menjadi dua, diantaranya:
1. Data
Menurut Indrajani dalam Sutoyo (2015:7) data adalah fakta-fakta mentah kemudian dikelola sehingga menghasilkan informasi yang penting bagi sebuah perusahaaan atau organisasi.
2. Basis Data
Menurut Indrajani dalam Sutoyo (2015:7) basis data adalah kumpulan data yang saling berhubungan secara logis dan didesain untuk mendapatkan data yang dibutuhkan oleh suatu organisasi. Macam – macam basis data yang digunakan dalam pembuatan web adalah:
a. MySQL (My structured Query Language)
Menurut Sibero dalam Hermawan (2013:13) ”MySQL atau dibaca
“MySekuel” dengan adalah RDMS (Relation Data-base Management System) yaitu aplikasi sistem yang menjalankan fungsi pengolahan data.”
Sedangkan menurut Bunafit dalam Lestari (2013:18) MySQL adalah software atau program database server.
Dapat disimpulkan bahwa MySQL adalah sebuah database yang berfungsi sebagai pengolahan data dan menyimpan data dalam bentuk tabel- tabel yang saling berhubungan. Hermawan (2013:13).
b. Adobe Dreamweaver CS6
Menurut Sulistya (2013:1-2) Dreamweaver adalah sebuah editor professional yang menggunakan HTML untuk mendesain web secara visual dan mengelola situs atau halaman web.
Menurut Sadeli (2013:5) dalam area kerja dari Dreamweaver CS6, sekilas tampak sama seperti versi sebelumnya tapi siapa yang tahu. Area kerja dari Dreamweaver CS6 terbagi dari 5 (Lima) bagian besar yaitu:
1) Properties Bar
Properties Bar adalah sekumpulan menu yang digunakan untuk menampilkan menu-menu toolbar yang akan digunakan sesuai dengan kebutuhan serta mengatur tampilan dokumen dan fungsi lainnya.
2) Document Toolbar
Document Toolbar adalah lembar yang digunakan untuk menampilkan file-file dokumen yang Anda buat berupa jendela dokumen (berbentuk tab). Document Toolbar mempunyai tiga tab yang dapat membantu Anda untuk mendesain web seperti Code, Split, dan Design.
3) Document Windows
Document Windows adalah jendela dokumen yang digunakan untuk meletakkan objek-objek atau komponen untuk membuat dan merancang website.
4) Property Inspecto
Property Inspecto adalah properties tab yang digunakan untuk mengatur properties dari objek-objek yang digunakan seperti mengatur jenis font, warna, ukuran teks dan lain sebagainya.
5) Panel Group
Panel Group adalah kumpulan panel-panel pelengkap yang berfungsi untuk mengorganisir, mengatur serta pelengkap website yang akan dibuat contoh : Panel CSS, berfungsi untuk mempercantik tampilan web yang dibuat. Pada dreamweaver CS6 ini terdapat beberapa panel baru salah satunya seperti Browser Labs.
c. XAMPP
Menurut Sidik dalam Hermawan (2013:21) “XAMPP (X(Windows/Linux) Apache MySQL PHP dan Perl) merupakan paket server web PHP dan database MySQL yang paling populer dikalangan pengembangan web dengan menggunakan PHP dan MySQL sebagai databasenya.”
XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, Mysql, PHP, Perl. XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket. Dalam paketnya sudah terdapat Apache (web server), MySQL (database), PHP (server side scripting), Perl, FTP server, phpMyadmin dan berbagai pustaka bantu lainnya. Dengan menginstall XAMPP maka tidak perlu melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL. Masing-masing huruf dari XAMPP memiliki kepanjangan, yaitu:
X : program ini dapat dijalankan pada window, linux.
Apache : sebuah aplikasi server web open source.
Mysql : sebuah aplikasi server database open source.
PHP : sebuah aplikasi pemrograman untuk web.
Perl : sebuah aplikasi pemrograman system.
Dapat disimpulkan bahwa XAMPP merupakan paket server web PHP yang berbasis Open Source. XAMPP menyediakan beberapa program yang lain didalamnya yaitu, Apache, MySQL, PHP, FileZila dan PhpMyadmin.
Hermawan (2013:21-23).
2.1.4. Model Pengembangan Perangkat Lunak
Sumber: Rosa A.S dan M. Shalahuddin (2013:28) Gambar II.1. Ilustrasi Model Waterfall
Model SDLC air terjun (waterfall) merupakan salah satu model pengembangan perangkat lunak yang ada di dalam model SDLC (Sequencial Development Life Cycle). Menurut Rosa A.S dan M. Shalahuddin dalam
Firmansyah (2014:185) “Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisi, desain, pengkodean, pengujian, dan tahap pendukung (Support).
Menurut Rosa A.S dan M. Shalahuddin (2013:26) mengemukakan bahwa
“ SDLC atau Software Development Life Cycle atau sering disebut juga System Development Life Cycle adalah proses mengem-bangkan atau mengubah suatu sistem perangkat lunak dengan menggunakan model - model dan metodologi yang digunakan orang untuk mengembangkan sistem - sistem perangkat lunak sebelumnya berdasarkan best practice atau cara-cara yang sudah teruji baik.”
Rosa A.S dan M. Shalahuddin (2013:28) menjelaskan bahwa model waterfall sering juga disebut model sekuensi linear atau alur hidup klasik.
Pengembangan sistem dikerjakan secara terurut mulai dari analisis, desain, pengkodean, pengujian dan tahap pendukung.
Dalam model air terjun dibagi menjadi lima tahap, yaitu (Rosa A.S dan M.
Shalahuddin 2013:29):
1. Analisis kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat unak agar dapat dipahami perangkat lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu untuk didokumentasikan.
2. Desain
Desain perangkat lunak adalah proses multi langkah yang fokus pada desain pembuatan orogram perangkat lunak termasuk struktur data, arsitektur perangkat lunak, representasi antarmuka, dan prosedur pengodean.
3. Pembuatan Kode Program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari tahap ini adalah program komputer sesuai dengan desain yang telah dibuat pada tahap desain.
4. Pengujian
Pengujian fokus pada perangkat lunak secara dari segi logic dan fungsional dan memastikan bahwa semua bagian sudah diuji.
5. Pendukung (support) atau pemeliharaan (maintenance)
Tahap pendukung atau pemeliharaan dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak yang baru.
2.2. Teori Pendukung
Untuk mendesain suatu model program maka diperlukan peralatan pendukung (tools system) untuk menggambarkan bentuk sistem secara struktural dan aktual dengan suatu pendekatan analisa terstruktur, tools sytem juga berguna untuk mempermudah dalam pembuatan program aplikasi yang akan dibuat, contohnya adalah dalam pembuatan logika dan algoritma program mulai dari input, process dan output yang akan dihasilkan. Adapun tools system yang akan dijelaskan sebagai model sistem yang akan dirancang, yaitu:
2.2.1. Struktur Navigasi
Menurut Ardiansyah (2016) dalam (Fabriyan Fandi Dwi Imaniawan, 2017:4) “Struktur Navigasi dapat diartikan sebagai alur dari suatu program yang menggambarkan rancangan hubungan antara area yang berbeda sehingga memudahkan proses pengorganisasian seluruh elemen-elemen website” Dalam pembuatan web penyewaan lapangan ini, menggunakan Struktur navigasi Linear dan Non-Linear yang digambarkan sebagai berikut:
1. Struktur Navigasi Linear (Satu Alur)
Struktur navigasi linear hanya mempunyai satu rangkaian cerita yang berurut yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya, pengguna akan melakukan navigasi secara berurutan, dalam frame atau byte informasi satu ke yang lainnya.
Sumber : Ardiansyah (2016:62)
Gambar II.2. Struktur Navigasi Linear 2. Struktur Navigasi Hirarki (Bercabang)
Struktur dasar ini disebut juga struktur linear dengan percabangan karena pengguna melakukan navigasi disepanjang cabang pohon struktur yang terbentuk oleh logika isi.
Sumber : Ardiansyah (2016:62)
Gambar II.3. Struktur Navigasi Hirarki 3. Struktur Navigasi Non Linear (Tidak Berurut)
Struktur navigasi non-linear merupakan pengembangan dari struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi bercabang.
Percabangan yang dibuat pada struktur non-linear ini berbeda dengan percabangan pada struktur hirarki, karena pada percabangan non-linear ini walaupun terdapat percabangan tetap tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave Page, pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan tidak terikat dengan jalur yang sudah ditentukan sebelumnya.
Sumber : Sumber : Ardiansyah (2016:62)
Gambar II.4. Struktur Navigasi Non Linear 4. Struktur Navigasi Composite (Campuran)
Struktur navigasi pengguna akan melakukan navigasi dengan bebas (secara non-linier), tetapi terkadang dibatasi presentasi linear film atau informasi penting dan pada data yang paling terorganisasi secara logis pada suatu hirarki.
Sumber : Ardiansyah (2016:62)
Gambar II.5. Struktur Navigasi Composite (Campuran)
2.2.2. Enterprise Relationship Diagram (ERD)
Pemodelan awal basis data yang paling banyak digunakan adalah menggunakan Entity Relationship Diagram (ERD), ERD dikembangkan berdasarkan teori himpunan dalam bidang matematika, ERD digunakan untuk pemodelan basis data relasional, sehingga jika penyimpanan basis data
menggunakan OODBMS maka perancangan basis data tidak perlu menggunakan ERD menurut Rosa A.S dan M. Shalahuddin dalam Hermawan (2013:18).
1. Entity
Entity merupakan objek yang mewakili sesuatu yang nyata dan dapat dibedakan dari sesuatu yang lain. Simbol dari entity biasanya digambarkan dengan persegi panjang.
2. Atribut
Setiap entitas pasti mempunyai elemen yang disebut atribut yang berfungsi untuk mendeskripsikan karakteristik dari entitas tersebut. Isi dari atribut mempunyai sesuatu yang dapat mengidentifikasi isi elemen satu dengan yang lain. Gambar atribut diwakili oleh simbol elips. Macam macam atribut :
a. Simple attribute
Simple attribute, yaitu atribut yang terdiri atas satu komponen tunggal dengan keberadaannya yang independen dan tidak dapat dibagi lagi ke komponen yang lebih kecil. Simple attribute dikenal juga dengan nama atomic attribute.
b. Composite attribute
Composite attribute, yaitu atribut yang memiliki berbagai komponen dimana semua komponennya memiliki keberadaan yang independen.
c. Single value attribute
Single value attribute, yaitu sebuah atribut yang mempunyai nilai tunggal untuk setiap kejadian.
d. Multi valued attribute
Multi valued attribute, yaitu sebuah atribut yang mempunyai beberapa nilai untuk setiap kejaidan pada sebuah entitas.
e. Derived attribute
Derived attribute, yaitu atribut yang memiliki nilai yang dihasilkan dari satu atau beberapa atribut lainnya, dan tidak harus dari satu entitas.
3. Hubungan atau relasi
Relasi didefinisikan sebagai hubungan yang terjadi antar entity.
Representasi diagram relasi adalah sebuah garis lurus yang menghubungkan dua buah entity. Jenis-jenis atau hubungan yang biasa terjadi antar satu entity dengen entity lain dalam sebuah basis data, meliputi:
a. One to one atau satu ke satu ( 1 : 1 )
Hubungan relasi satu ke satu yaitu setiap entitas pada himpunan entitas A berhubungan paling banyak dengan satu entitas pada himpunan B.
Contoh hubungan antara entity mahasiswa denga kartu mahasiswa.
Seorang mahasiswa hanya boleh memiliki satu kartu mahasiswa , satu kartu mahasiswa hanya boleh dimiliki oleh satu mahasiswa.
b. One to many atau satu ke banyak ( 1 : N )
Setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak entitas pada himpunan entitas B, tetapi ssetiap entitas pada entitas B dapat berhubungan dengan satu entitas pada himpunan entitas A.
Contohnya hubungan yang terjadi antara entity konsumen dengan motor.
Seorang konsumen dapat memiliki satu atau lebih motor. Sedangkan satu motor hanya dapat dimiliki oleh seorang konsumen.
c. Many to many atau banyak ke banyak ( N : M )
Setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak pada himpunan entitas B. Contohnya hubungan yang terjadi antar mahasiswa dengan mata kuliah. Satu mahasiswa dapat mengikuti lebih dari satu matakuliah dan satu matakuliah dapat diikuti lebih dari satu mahasiswa.
2.2.3. Logical Record Structure (LRS)
Menurut Lestari dalam Tabrani (2017:5) “Logical Record Structure dibentuk dengan nomor tipe record. Beberapa tipe record digambarkan oleh kotak empat persegi panjang dan dengan nama yang unik”.
Perbedaan LRS dengan ERD dan tipe record berada diluar field tipe record ditempatkan. LRS terdiri dari link-link diantara tipe record. Link ini menunjukkan arah dari satu tipe record lainnya. Banyak link dari LRS yang diberi tanda field- field yang kelihatan pada kedua link tipe record. Penggambaran LRS mulai dengan menggunakan model yang dimengerti. Dua metode yang dapat digunakan, dimulai dengan hubungan kedua model yang dapat dikonversikan ke LRS.
Metode yang lain dimulai dengan Entity Relationship Diagram dan langsung dikonversikan ke LRS. Tabrani (2017:5)
Berikut tahapan transformasi ERD ke LRS menurut Wulandari (2013):
1. Konversi ERD ke LRS,Entity Relationship Diagram harus diubah ke bentuk LRS (struktur record secara logic). Dari bentuk LRS inilah yang nantinya dapat ditransformasikan ke bentuk relasi tabel.
2. Konversi ERD ke LRS sebuah model sistem yang digambarkan dengan sebuah ERD akan mengikuti pola pemodelan tertentu. Dalam kaitannya dengan
konversi ke LRS, untuk perubahan yang terjadi adalah mengikuti aturan-aturan berikut:
a. Setiap entitas diubah kebentuk kotak dengan nama entitas, berada diluar kotak dan atribut berada didalam kotak.
b. Sebuah Relationship kadang disatukan, dalam sebuah kotak bersama entitas, kadang sebuah kotak bersama-sama dengan entitas, kadang disatukan dalam sebuah kotak tersendiri.
c. Konversi LRS ke relasi tabel atau tabel adalah bentuk pernyataan data secara grafis dimensi yang terdiri dari kolom dan baris. Relasi adalah bentuk visual dari sebuah file, dan tiap tuple dalam sebuah field, atau dalam bentuk lingkaran.
Diagram Entity Relationship dikenal dengan sebutan atribut. Konversi dari logical structure, dilakukan dengan cara:
1. Nama logical record structure menjadi nama relasi.
2. Tiap attribute menjadi sebuah kolom didalam relasi.
2.2.4. Implementasi dan Pengujian Web
Menurut Rosa A.S dan M. Shalahuddin dalam Mahdiati (2016:3) Black- box testing adalah menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program.
Pengujian dimaksudkan untuk mengetahui fungsi-fungsi, masukan dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan dan pengujian dengan metode Black-box testing memungkinkan pengembang software untuk membuat himpunan kondisi input yang akan melatih seluruh syarat-syarat fungsional suatu program.
Adapun beberapa kategori kesalahan yang diuji oleh Black-box testing, diantaranya:
a. Fungsi-fungsi yang salah atau hilang b. Kesalahan interface.
c. Kesalahan dalam struktur data atau akses database eksternal.
d. Kesalahan performa.
e. Kesalahan inisialisasi dan terminasi.
