BAB II LANDASAN TEORI 2.1. Konsep Dasar Web A. Pengertian Website Menurut Yuhefizar (2009:2) Website adalah keseluruhan halaman-halaman web yang terdapat dalam sebuah domain yang mengandung informasi. Website atas banyak halaman yang terkoneksi satu halaman dengan halaman yang lain. Hubungan antara halaman web disebut dengan hyperlink. Sedangkan teks yang dijadikan media penghubung disebut dengan hypertext. Di dalam sebuah website, terdapat komponen-komponen pendukung agar sebuah website dapat diakses oleh pemakai (user), diantaranya : 1. Internet Menurut Mc.Leod dan George P. Shell (2008:78) menjelaskan bahwa internet adalah jaringan komunikasi global yang menghubungkan jutaan komputer. Internet berisi berbagai sumber daya informasi dari mulai yang statis hingga yang dinamis dan interaktif. 2. Web Browser Menurut Mc.Leod dan George P. Shell (2008:78) menyatakan bahwa web browser adalah piranti lunak yang dirancang untuk menemukan dan membaca file-file di internet yang ditulis dalam bahasa Hypert Text Markup Language (HTML). 9
10 3. Web Server Menurut Arief (2011:19) web server adalah program aplikasi yang memiliki fungsi sebagai tempat menyimpan dokumen-dokumen web. 4. URL (Uniform Resource Locator) Menurut Sidik (2014:6) menyatakan bahwa Uniform Resource Locator adalah konsep nama file standard yang diperluas dengan jaringannya. 5. WWW (World Wide Web) Menurut Mc.Leod dan George P. Shell (2008:78) menyatakan bahwa World Wide Web adalah sekumpulan halaman web yang terhubung dengan internet dan menyimpan file-file hypermedia yang dapat diakses dari komputer dalam jaringan melalui link hypertext. 6. Home Page Menurut Mc.Leod dan George P. Shell (2008:78) menyatakan bahwa Home Page merupakan halaman pertama suatu situs web. Halaman-halaman situs lain akan dapat dijangkau dari home page. 7. E-Commerce Menurut Mc.Leod dan George P. Shell (2008:59) e-commerce adalah penggunaan jaringan komunikasi dan komputer untuk melaksanakan proses bisnis.
11 B. Bahasa Pemrograman 1. HTML (Hyper Text Markup Language) Menurut Prasetio (2015:98) HTML (Hyper Text Markup Language) adalah bahasa pemrograman yang digunakan untuk mendesain sebuah halaman web. a. HTML merupakan kependekan dari Hyper Text Markup Language. b. Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup. c. Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman. d. File HTML harus memiliki ekstensi htm atau html. e. File HTML dapat dibuat menggunakan editor teks yang biasa dipakai. 2. PHP (Perl Hypertext Preprocessor) Menurut Wahana Komputer (2011:14) PHP merupakan bahasa pemrograman yang digunakan untuk membuat program website dimana kode program yang telah dibuat dikompilasi dan dijalankan pada sisi server untuk menghasilkan halaman website yang dinamis. 3. CSS (Cascading Style Sheet) Menurut Ardhana (2012:108) Cascading Style Sheet (CSS) merupakan salah satu bahasa pemograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti microsoft word yang dapat mengatur beberapa style, misalnya heading, sub bab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa
12 berkas (file). Pada umumnya CSS digunakan untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumennya. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. C. Basis Data Menurut Rosa dan Shalahudin (2015:43) basis data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan. 1. PhpMyAdmin Menurut Wahana Komputer (2010:96) PhpMyAdmin adalah salah satu antar muka yang disukai untuk mengolah database MySQL. 2. MySQL (My Structure Query Language) Menurut Kadir (2008:2) MySQL merupakan software yang tergolong sebagai DBMS (Database Management System) yang bersifat Open Source.
13 D. Software yang digunakan 1. XAMPP Menurut Riyanto (2010:1) XAMPP merupakan paket PHP dan MySQL berbasis open source, yang dapat digunakan sebagai tools pembantu pengembangan aplikasi berbasis PHP. XAMPP mengkombinasikan beberapa paket perangkat lunak berbeda ke dalam satu paket. Memanfaatkan XAMPP sebagai database karena XAMPP menyediakan aplikasi database MySQL dengan interface lebih mudah dalam pengoperasiannya, tool-tool yang disediakan cukup lengkap dan memenuhi kebutuhan perancangan database. Selain itu XAMPP juga merupakan aplikasi gratis. 2. Adobe Photoshop CS 5 Menurut Madcoms (2011:55) Adobe Photoshop CS 5 merupakan salah satu program grafis yang dapat digunakan untuk mengolah gambar dan membuat desain dalam pembuatan situs web dengan fasilitas tools yang disediakan akan memberi kemudahan dalam mengolah gambar maupun membuat desain halaman web. 3. Sublime Text Editor Menurut Atkia (2014:31) Sublime Text Editor adalah aplikasi text editor yang digunakan untuk membuka file apapun namun sejatinya para programmer digunakan untuk menulis code. Sublime text editor memang banyak keunggulanya mulai dari tampilanya yang simple, elegan dan kaya akan fitur lainnya. Sublime text editor juga memiliki sisi lain, aplikasi ini bisa membuat tampilan dengan menggunakan script.
14 E. Model Pengembangan Perangkat Lunak Menurut Rosa dan Shalahuddin (2015:28) yaitu, Model SDLC air terjun (waterfall) sering juga disebut model sekuensi linier (sequential linear) atau alur hidup klasik (classic life cycle). Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut, dimulai dari analisis, desain, pengodean, pengujian, dan tahap pendukung. Sumber : Rosa dan Shalahuddin (2015:29) Gambar II.1 Model Waterfall Adapun tahapan model waterfall sebagai berikut; 1. Analisis Kebutuhan Perangkat Lunak Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu untuk di dokumentasikan.
15 2. Desain Desain perangkat lunak adalah proses multi langkah yang fokus pada desain pembuatan program perangkat lunak termasuk struktur data, arsitektur perangkat lunak, representasi antarmuka, dan prosedur pengkodean. Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi desain agar dapat diimplementasikan menjadi program pada tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahp ini juga perlu didokumentasikan. 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 lojik dan fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai dengan yang diinginkan. 5. Pendukung (support) atau pemeliharaan (maintenance) Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat mengulangi proses pengembangan mulai dari analisis
16 spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru. 2.2. Teori Pendukung Dalam proses pembuatan website ini penulis menggunakan beberapa peralatan pendukung yang diantaranya, adalah : A. Struktur Navigasi Menurut Suyanto (2007:62) Struktur Navigasi dalam situs web melibatkan struktur navigasi web secara keseluruhan dan desain interface situs web tersebut. Struktur navigasi juga dapat diartikan sebagai struktur alur dari suatu program yang merupakan rancangan hubungan dan rantai kerja dari beberapa area berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan website. 1. Struktur Navigasi Linear (Satu Alur) Linear (satu alur) merupakan struktur yang hanya mempunyai satu rangkaian cerita yang berurut. Dengan kata lain struktur ini hanya dapat menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat di tampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya dan tidak dapat ditampilkan dua halaman sebelumnya atau dua halaman sesudahnya. Salah satu yang terpenting dari struktur ini adalah tidak di perkenankan terjadinya percabangan.
17 riha Sumber : Suyanto (2007:62) Gambar II.2 Struktur Navigasi Linear 2. Struktur Navigasi Hirarki (Bercabang) Struktur hirarki ini percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama kesatu), halaman utama ini akan mempunyai halaman percabangan yang dikatakan slave page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama master page (halaman utama kedua) dan seterusnya. Yang terpenting dari struktur penjejakan ini tidak diperkenankan adanya tampilan secara linier. Sumber : Suyanto (2007:63) Gambar II.3 Struktur Navigasi Hirarki 3. Non-linier (Tidak Berurut) Struktur penjejakan non-linear (tidak berurut) merupakan pengembangan dari struktur penjelasan linear. Pada struktur ini diperkenankan pembuatan penjejakan bercabang. Pemakai bebas menelusuri website tanpa dibatasi oleh suatu rute dimana kontrol navigasi dapat mengakses ke semua halaman manapun.
18 Percabangan yang dibuat pada struktur non-linear ini berbeda dengan percabangan pada struktur hirarki, karena pada percabagan non-linear ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada Master Page dan Slave Page. Sumber : Suyanto (2007:65) Gambar II.4 Struktur Navigasi Non-Linear 4. Composite (Campuran) Composite (Campuran) atau disebut juga struktur penjejakan bebas merupakan gabungan dari ketiga struktur sebelumnya yaitu struktur linear, hirarki, non-linear. Jika suatu tampilan membutuhkan percabangan, maka dapat dibuat percabangan dan bila dalam percabangan tersebut suatu tampilan yang sama kedudukannya maka dapat dibuat struktur linear dalam percabangan tersebut. Setiap struktur peta penjejakan seperti yang baru dibahas mempunyai fungsi dan tujuan dari web yang hendak dibuat. Semakin kompleks peta penjejakan yang digunakan, maka semakin sulit pula pembuatan page dari peta penjejakan tersebut.
19 Sumber : Suyanto (2007:67) Gambar II.6 Struktur Navigasi Composite B. ERD (Entity Relationship Diagram) Menurut Rosa dan Shalahuddin (2015:50), ERD atau Entity Relationship Diagram merupakan sebuah diagram yang digunakan untuk merancang hubungan antar table-table dalam basis data. Berikut adalah yang sering digunakan pada ERD untuk merancang table-table beserta relasinya dalam basis data : 1. Entitas (entity) Entitas (entity) menunjukan obyek-obyek dasar yang terkait di dalam sistem. Obyek dasar dapat berupa orang, benda atau hal lain yang keterangannya perlu disimpan dalam basis data. Untuk menggambarkan entitas dilakukan dengan mengikuti aturan-aturan sebagai berikut : a. Entitas dinyatakan dengan simbol persegi panjang. b. Nama entitas berupa kata benda tunggal.
20 c. Nama entitas sedapat mungkin menggunakan nama yang mudah dipahami dan menyatakan maknanya dengan jelas. 2. Atribut (atributte) Atribut sering juga disebut sebagai property, merupakan keterangan-keterangan yang terkait pada sebuah entitas yang perlu disimpan sebagai basis data. Atribut berfungsi sebagai penjelas sebuah entitas untuk menggambarkan atribut yang dilakukan dengan mengikuti aturan sebagai berikut : a. Atribut dinyatakan dengan simbol elipps. b. Nama atribut dituliskan dalam simbol elipps. c. Nama atribut berupa kata benda tunggal. d. Nama atribut sedapat mungkin menggunakan nama yang mudah dipahami dan dapat menyatakan maknanya dengan jelas. e. Atribut dihubungkan dengan entitas yang bersesuaian dengan menggunakan garis. 3. Relasi (relation) Relasi atau hubungan adalah kejadian atau transaksi yang terjadi diantara dua entitas yang keterangannya perlu disimpan dalam basis data. Aturan penggambaran relasi antar entity adalah : a. Relasi dinyatakan dengan simbol belah ketupat b. Nama relasi dituliskan di dalam simbol belah ketupat c. Relasi menghubungkan dua entitas d. Nama relasi menggunakan kata kerja aktif (diawali awalan me) tunggal.
21 e. Nama relasi sedapat mungkin menggunakan nama yang mudah dipahami dan dapat dinyatakan maknanya dengan jelas. C. LRS (Logical Record Structure) Menurut Simarmata (2007:115) menyatakan bahwa Membentuk skema LRS berdasarkan ERD diagram. adalah sebagai berikut: 1. Jika relasinya satu ke satu, maka foreign key diletakkan pada salah satu dari dua entitas yang ada atau dengan menyatakan kedua entitas tersebut. 2. Jika relasinya satu ke banyak, maka foreign key diletakkan di entitas yang many. 3. Jika relasinya banyak ke banyak, maka dibuat file konector yang berisi 2 foreign key yang berasal dari kedua entitas. Kardinalitas relasi menunjukkan maksimum entitas yang dapat berelasi dengan entitas pada himpunan entitas lain. Kardinalitas relasi terjadi diantara dua himpunan entitas (misalkan A dan B) dapat berupa : a. Satu ke satu (one to one) Berarti setiap entitas pada himpunan A berhubungan dengan paling banyak dengan satu entitas pada himpunan entitas B, dan begitu juga sebaliknya setiap entitas pada himpunan entitas B berhubungan dengan paling banyak dengan satu entitas himpunan B. b. Satu ke banyak (one to many) Berarti setiap entitas pada himpunan entitas A dan dapat berhubungan dengan banyak entitas pada himpunan entitas B, tetapi tidak sebaliknya,
22 dimana setiap entitas pada himpunan entitas berhubungan dengan paling banyak dengan satu entitas pada himpunan entitas A. c. Banyak ke satu (many to one) Berarti setiap entitas pada himpunan entitas A berhubungan dengan paling banyak dengan satu entitas pada himpunan B, tetapi tidak sebaliknya, dimana setiap entitas pada himpunan entitas A berhubungan dengan paling banyak satu entitas pada himpunan entitas. d. Banyak ke banyak (many to many) Berarti setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak entitas pada himpunan entitas B, demikian juga sebaliknya, dimana setiap entitas pada himpunan entitas B dapat berhubungan dengan banyak entitas pada himpunan entitas A. D. Pengujian Web Menurut Rosa dan Shalahuddin (2015:275) Black Box Testing (pengujian kotak hitam) yaitu menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program. Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi, masukan, dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian kotak hitam harus dibuat dengan kasus benar dan kasus salah, misalkan untuk kasus proses login maka kasus uji yang dibuat adalah :
23 1. Jika user memasukan nama pemakai (usename) dan kata sandi (password) yang benar. 2. Jika user memasukan nama pemakai (username) yang salah, misalnya nama pemakai benar tapi kata sandi salah atau sebaliknya, atau keduanya salah.