7
BAB II
LANDASAN TEORI
2.1. Konsep Dasar Web A. Website
1. Pengertian Website
Menurut Bowo (2013:6) menyimpulkan bahwa:
Website adalah halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses seluruh dunia selama terkoneksi dengan jaringan internet.
Website merupakan komponen atau kumpulan komponen yang terdiri dari
teks, gambar, suara, video, animasi dan lain sebagainya. Sehingga lebih merupakan media informasi yang menarik untuk dikunjungi.
Semua informasi yang tersedia di dalam website tersimpan pada webserver. Informasi yang tersimpan di webserver tersebut umumnya akan ditampilkan dalam bentuk HTML (hypetext Markup Language). Dari komputer yang kita gunakan,
website dapat diakses dengan menggunakan sebuah software atau program aplikasi
yang disebut web browser. Contoh browser adalah internet explorer, opera, firefox,
chrome dan lain sebagainnya.
2. Pengertian Internet
Sibero (2011:10) “Internet (Interconnected Network) adalah jaringan komputer yang menghubungkan antar jaringan secara global, internet (Interconnected
Network) dapat juga disebut jaringan dalam suatu jaringan yang luas “.
Internet (Interconnected Network) merupakan sistem komputer umum yang
terhubung secara global dengan menggunakan TCP/IP sebagai protokol pertukaran paket (packet switching communication protocol) (Setiawan, 2009:9)
8
Istilah-istilah umum yang sering ditemukan didalam internet antara lain adalah: 1. Uniform Resource Locator (URL)
URL (Uniform Resource Locator) merupakan suatu rangkaian karakter
dengan format dan strandar tertentu yang digunakan untuk menunjukan alamat suatu sumber seperti dokumen dan gambar di internet (Interconnected Network). URL (Uniform Resource Locator) merupakan link atau tautan menuju ke halaman atau konten dalam sebuah website (Bowo, 2013:16).
2. Web Browser
Seperti yang telah diuraikan diatas tentang internet (Interconnected Network) dan juga web, muncul pertanyaan “Bagaimana web tersebut dapat digunakan sebagai dokumen yang dapat dipertukarkan?”, jawabnya adalah dengan menggunakan web
browser. “Web browser adalah aplikasi perangkat lunak yang digunakan untuk
mengambil dan menyajikan sumber infromasi web” (Sibero, 2011:12). Sumber informasi web diidentifikasi dengan Uniform Resource Identifier (URI) yang dapat terdiri dari halaman web, video, gambar, ataupun konten lainnya.
3. Web Server
Sadeli (2014:2) “Web server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP (Hypertext Transfer Protocol) dari klien yang dikenal dengan web server browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML (HyperText
Markup Languange)”.
5. E-Commerce (Electronic Commerce)
E-Commerce (Electronic Commerce) adalah penjualan atau pembelian barang
9 organisasi swasta lainnya, yang dilakukan melalui komputer pada media jaringan (Ahmadi 2013:7). Barang-barang dan jasa dipesan melalui jaringan tersebut, tetapi pembayaran dan pengiriman barang atau jasa dapat dilakukan di akhir atau offline.
B. Bahasa Pemrograman
Bahasa pemrograman yang digunakan dalam pengembangan website ini beberapa diantaranya :
1. PHP (Hypertext Preprocessor)
Menurut Sibero (2011:49-50), "PHP (Hypertext Preprocessor) adalah pemograman interpreter yaitu proses penerjemahan baris kode sumber menjadi kode mesin yang dimengerti komputer secara langsung pada saat baris kode dijalankan". PHP (Hypertext Preprocessor) disebut sebagai pemograman Server Side
Programming, hal ini dikarenakan seluruh prosesnya dijalankan pada server. PHP
(Hypertext Preprocessor) adalah suatu bahasa dengan hak cipta terbuka atau yang juga dikenal dengan istilah Open Source, yaitu pengguna dapat mengembangkan kode-kode fungsi PHP (Hypertext Preprocessor) sesuai dengan kebutuhan.
Pemograman PHP (Hypertext Preprocessor) dapat ditulis dalam dua bentuk yaitu penulisan baris kode PHP (Hypertext Preprocessor) pada file tunggal dan penulisan kode PHP (Hypertext Preprocessor) pada halaman html (embedded). Kedua cara penulisan tersebut tidak memiliki perbedaan, hanya menjadi kebiasaan gaya penulisan dari programmer. Berikut contoh penulisan kode program PHP (Hypertext Preprocessor):
singlefile_php.php <?php
10
echo "<html>"; echo "<head>";
echo "<title>Contoh PHP</title>"; echo "</head>";
echo "<body>";
echo "<p>Dibawah ini adalah tulisan dari PHP</p>"; echo "Teks dari PHP";
echo "</html>"; ?> embedded_php. <html> <head> <title>Contoh PHP</title> </head> <body>
<p>Dibawah ini adalah tulisan dari PHP</p> <?php
echo "Teks dari PHP"; ?> </body>
</html>
Untuk penulisan kode PHP (Hypertext Preprocessor) pada halaman HTML (HyperText Markup Languange) diperlukan tambahan konfigurasi pada web server agar dapat berjalan. Konfigurasi ini bertujuan untuk mendaftarkan ekstensi
11
(Hypertext Preprocessor) dengan ekstensi .php.
2. HTML (HyperText Markup Languange)
Menurut Sibero (2011:19-20) “HyperText Markup Languange atau HTML adalah bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dokumen web”. Struktur dokumen HTML (HyperText Markup Languange) terdiri tag pembuka dan tag penutup, HTML (HyperText Markup Languange) versi 1.0 dibangun oleh W3C, dan terus mengalami perkembangan. Sampai saat ini HTML
(HyperText Markup Languange) terakhir adalah versi 5.0. Struktur HTML (HyperText Markup Languange) sebagai berikut:
<html> <head> <title></title> </head> <body></body> </html>
Struktur diatas adalah satu kesatuan yang harus ada dalam setiap dokumen HTML(HyperText Markup Languange). Dokumen HTML (HyperText Markup
Languange) terdiri dari komponen yaitu tag, elemen, dan atribut.
3. CSS (Cascading Style Sheet)
Menurut Rozi (2016:69) “CSS adalah singkatan dari Cascading Style Sheet. CSS (Cascading Style Sheet) adalah Bahasa pengkodean yang digunakan untuk menata gaya tampilan halaman web agar lebih cantik dan indah saat ditampilkan di
12
CSS (Cascading Style Sheet) merupakan salah satu bahasa pemograman web yang digunakan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.CSS (Cascading Style Sheet) adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (Humaira, 2015:47). Singkatnya dengan menggunakan CSS (Cascading Style Sheet) ini akan dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada disitus anda, sekaligus memformat ulang situs anda (mengubah secara cepat). Penggunaan CSS (Cascading Style Sheet) ini tidak lepas dari kode-kode HTML (HyperText Markup Languange).Ibarat kata anda adalah seorang arsitek yang akan membangun sebuah bangunan, maka paling tidak anda harus mengetahui secara pasti mulai dari luas tanahnya. Kemudian seberapa ukuran rumah yang ingin anda bangun, berapa banyak dan berapa luas kamar, ruang tamu serta ruang utamanya.
4. jQuery (Javascript Library)
jQuery (Javascript Library) adalah salah satu javascript framework terbaik saat ini, jQuery (Javascript Library) dikembangkan John Resig pada tahun 2008 di
Bar Camp NYC. Pada awal perkembangannya, jQuery (Javascript Library) pertama
dibuat untuk meringkas penggunaan CSS Selector dalam suatu pustaka fungsi. jQuery
(Javascript Library) memiliki ciri khas pada penggunaan perintahnya prefix untuk
jQuery (Javascript Library) dengan tanda $ kemudian dilanjutkan dengan fungsi dan perintah (Sibero, 2011:218).
Menurut Hakim (2014:03) “JQuery adalah javascript library, kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita
13
dalam membuat kode Javascipt”. Secara standar, apabila kita membuat kode
Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit
dipahami.
5. Javascript
Menurut Sidik (2011:2) ”Javascript adalah bahasa script yang ringan dan mudah digunakan. Dengan adanya javascript ini, maka kini halaman web tidak sekedar menjadi halaman data dan informasi saja, tetapi juga dapat menjadi suatu program aplikasi dengan antarmuka web”.
6. MySQL (My Structure Query Languange)
Menurut Sukamto dan Shalahuddin (2015:46) “SQL (Structure Query
Languange) adalah Bahasa yang digunakan untuk mengelola data pada RDBMS (Relational Database Management System)”. MySQL (My Structure Query Languange) adalah database yang menghubungkan script PHP (Hypertext
Preprocessor) menggunakan perintah query dan escaps character yang sama dengan
PHP (Hypertext Preprocessor). MySQL (My Structure Query Languange) mempunyai tampilan client yang mempermudah anda dalam mengakses database dengan kata sandi untuk mengijinkan proses yang boleh anda lakukan (Kurniawan 2010:16).
7. Xampp
Menurut Wardana (2010:8), “XAMPP adalah paket software yang didalam nya sudah terkandung Web Server Apache, database MySQL (My Structure Query
14
8.. Adobe Dreamweaver CS5
Menurut Sadeli (2011:2) “Dreamweaver merupakan suatu perangkat lunak
web editor keluaran Adobe System yang digunakan untuk membangun dan mendesain
suatu website dengan fitur-fitur yang menarik dan kemudahan dalam penggunaannya”.
Selain mudah digunakan dalam membuat dan mendesign web Dreamweaver juga menambah flexibilitasnya dengan bahasa pemrograman web lainnya dan dapat berintegrasi pada beberapa perangkat lunak lainnya, dan tidak salah jika perangkat lunak ini menjadi pilihan utama bagi para web-designer amatir maupun expert.
Pada Dreamweaver CS5 terdapat beberapa fitur baru yang dapat digunakan mulai dari seputar CSS (Cascading Style Sheet), penggunaan fitur canggih seperti Ajax (Asynchronous Javascript) dan JQuery (Javascript Library) menggunakan
Browser Widget, serta pengujian tampilan web menggunakan Web Adobe BrowserLab.
Sumber : Sadeli (2011:2)
Gambar II.1 Adobe Dreamweaver CS5
15
C. Basis data
Menurut Sukamto dan Shalahuddin (2015:43), “Sistem basis data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan”. Pada intinya basis data adalah media untuk menyimpan data agar dapat diakses dengan mudah dan cepat. Pada buku ini menggunakan basis data relasional yang diimplementasikan dengan tabel-tabel yang saling memiliki relasi seperti pada gambar berikut.
Sumber : Sukamto dan Shalahuddin (2015:43) Gambar II.2 Ilustrasi Basis Data
Sistem informasi tidak dapat dipisahkan dengan kebutuhan akan basis data apapun bentuknya, entah berupa file teks ataupun Database Management System (DBMS). Kebutuhan basis data dalam sistem informasi meliputi:
1. Memasukan, menyimpan, dan mengambil data.
2. Membuat laporan berdasarkan data yang telah disimpan.
Tujuan dari dibuatnya tabel-tabel di sini adalah untuk menyimpan data ke dalam tabel-tabel agar mudah diakses.Oleh karena itu, untuk merancang tabel-tabel yang
16
akan dibuat maka dibutuhkan pola pikir penyimpanan data nantinya jika dalam bentuk baris-baris data (record) dimana setiap baris terdiri dari beberapa kolom.
D. Model Pengembangan Perangkat Lunak
Menurut Sukamto dan Shalahuddin (2015:28) “Model SDLC air terjun (waterfall) sering juga disebut model sekuensial linier (sequential linear) atau alur hidup klasik (classic life cycle)”.
Sumber : Sukamto dan Shalahuddin (2015:28) Gambar II.3 Ilustrasi Model Waterfall
Gambar menjelaskan bahwa model waterfall menekan pada sebuah keterurutan dalam proses pengembangan perangkat lunak. Berikut ini adalah penjelasan dari tahap-tahap yang dilakukan dalam model waterfall:
1. Analisis kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk mespesifikasikan 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.
17
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 di implementasikan menjadi program pada tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap 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 spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.
18
2.2. Teori Pendukung A. Struktur Navigasi
Struktur navigasi website menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi dalam website tersebut. Menurut Sutopo (2007:6) dalam pengembangan web, terdapat beberapa model navigasi dasar, yang harus dikenal dengan baik oleh designer, karena setiap model navigasi dapat memberikan solusi untuk kebutuhan yang berbeda. Adapun empat macam bentuk dasar dari struktur navigasi yang bisa digunakan di dalam proses pembuatan aplikasi website, yaitu:
1. Linier Navigation Model
Linier Navigation Model digunakan oleh sebagian besar website, informasi
diberikan secara sekuensial dimulai dari satu halaman. Beberapa designer menggunakan satu halaman untuk masuk atau keluar website.
Sumber : Sutopo (2007: 6)
Gambar II.4 Linier Navigation Model 2. Hierarchical Model
Hierarchical Model diadaptasi dari top-down design. Konsep navigasi ini dimulai
dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman-halaman utama. Apabila diperuntukan dari tiap halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan.
19
Sumber : Sutopo (2007 : 6)
Gambar II.5 Hierarchical Model 3. Spoke-and-hub Model
Spoke-and-hub Model hanya menggunakan satu titik node untuk berhubungan
dengan node lain. Pada model ini hanya terdapat dua macam link, yaitu dari homepage ke halaman tertentu, dan dari halaman tersebut kembali ke home page.
Sumber : Sutopo (2007:7)
Gambar II.6 Spoke-and-hub Model
4. Full Web Model
Full Web Model memberikan kemampuan hyperlink yang banyak. Full Web Model banyak digunakan karena user dapat mengakses semua topik dengan
subtopik secara cepat. Namun kelemahan dari model ini yaitu dapat berakibat kehilangan cara untuk kembali ke topik selanjutnya.
Sumber : Sutopo (2007:8)
Gambar II.7 Full Web Model
20
B. ERD (Entity Relationship Diagram)
Menurut Sukamto dan Shalahuddin (2015:53), “ERD (Entity Relationship Diagram) adalah bentuk paling awal dalam melakukan perancangan basis data relasional. Jika menggunakan OODBMS (Object Oriented Database Management System) maka perancangan ERD (Entity Relationship Diagram) tidak perlu dilakukan”.
Elemen-elemen diagram hubungan Entitas, terdiri dari : 1. Entitas (Entitiy),
Entitas adalah suatu yang nyata atau abstrak dimana kita akan menyimpan data. Ada 4 kelas entitas, yaitu misalnya pegawai, pembayaran, sekolah dan buku. 2. Relasi (Relationship),
Relasi adalah yang menghubungkan antar entitas, biasanya diawali dengan kata kerja.
3. Atribut,
Atribut adalah ciri umum semua atau sebagian besar intansi pada entitas tertentu, Sebutan lain atribut adalah property, elemen data, dan field. Misalnya nama, alamat, nomor pegawaidan gaji adalah atribut entitas pegawai. Sebuah atribut atau kombinasi atribut yang mengidentifikasikan satu dan hanya satu instansi suatu entitas disebut kunci utama atau pengenal. Misalnya nomor pegawai adalah kunci utama untuk pegawai.
Istilah yang harus dipahami sebelum merancang basis data dengan
menggunakan model entity relationship diagram Menurut Kusrini (2007:22), yaitu: 1. Super Key
21
Satu atau lebih atribut yang dapat dibedakan setiap baris data dalam tabel secara unik.
2. Kandidat Key
Merupakan kumpulan atribut minimal yang membedakan setiap baris data dalam tabel secara unik. Untuk bisa menjadi kandidat key , suatu atribut harus memenuhi persyaratan sebagai berikut :
a. Untuk satu nilai hanya mengidentifikasi satu baris dalam satu relasi (unik). b. Tidak memiliki subset yang juga merupakan kunci relasi.
c. Tidak dapat bernilai null.
3. Kunci Relasi (Relation Key) / Kunci Utama (Primary Key)
Nilai dari kunci relasi harus mengidentifikasikan sebuah baris yang unik di dalam sebuah relasi. Kunci relasi terdiri dari satu atau lebih atribut- atribut relasi. Agar bisa menjadi sebuah primary key, sebuah atribut haruslah memenuhi persyaratan sebagai kandidat key.
4. Kunci Alternatif (Alternatif Key)
Kunci yang tidak ada di dunia nyata, tetapi diadakan dan dijadikan primary key. Kunci alternative dibuat ketika tidak ada satu pun atribut dalam sebuah relasi yang bisa mewakili relasi tersebut, atau ada yang bisa menjadi kandidat key tetapi tidak cukup efektif untuk digunakan sebagai primary key.
5. Komposit Key
Komposit key merupakan primary key yang terdiri dari lebih dari satu atribut. 6. Foreign Key (FK)
22
Istilah FK (Foreign Key) juga banyak digunakan dalam perancangan. Sebuah FK
(Foreign Key) adalah sekumpulan atribut dalam suatu relasi (misal A)
sedemikian sehingga kumpulan atribut ini bukan kunci relasi A tetapi merupakan kunci dari relasi lain.
7. Kardinalitas Pemetaan
Kardinalitas pemetaan atau rasio kardinalitas menunjukan jumlah entity yang dihubungkan kesatu entity lain dengan suatu relationship sets. Kardinalitas pemetaaan meliputi:
a. Hubungan satu ke satu (one to one)
Yaitu satu entity dalam A dihubungkan dengan maksimum satu entity. b. Hubungan satu kebanyak (one to many)
Yaitu satu entity dalam A dihubungkan dengan sejumlah entity dalam entity dalam entity B dihubungkan dengan maksimum satu entity dalam A.
c. Hubungan banyak ke satu (many to one)
Yaitu satu entity dalam A dihubungkan dalam maksimum satu entity Satu entity dalam B dapat dihubungkan dengan sejumlah entity dalam A. d. Hubungan banyak ke banyak (many to many)
Satu entity dalam A dihubungkan dengan sejumlah entity dalam entity dalam B dihubungkan dengan sejumlah entity dalam A.
23
C. LRS (Logical Record Structure)
Menurut Wulandari (2013:17), “Logical Record Structure dibentuk dengan nomor tipe record”. Beberapa tipe record digambarkan oleh kotak empat persegi panjang dan dengan nama yang unik. Beda LRS (logical record structure) dengan diagram entity reletionship diagram nama tipe record berada diluar kotak field tipe
record ditempatkan. LRS (logical record structure) terdiri dari link-link tentara tipe record. Link ini menunjukan arah dari satu tipe record lainnya. Banyak link dari LRS
(logical record structure) yang diberi tanda field-field yang kelihatan pada kedua link
tipe record. Pengambaran LRS (logical record structure) mulai dengan menggunakan
model yang dimengerti. Dua metode yang dapat digunakan, dimulai dengan hubungan kedua model yang dapat dikonversikan ke LRS (logical record structure). Metode lain dimulai dengan Entity Relationship Diagram dan langsung dikonversikan ke LRS (logical record structure).
1. Konversi ERD (Entity Relationship Diagram) ke LRS (logical record structure),
Diagram Entity Relationship harus diubah kebentuk LRS (struktur record secara
logika). Dari bentuk LRS (logical record structure) inilah yang nantinya dapat ditransformasikan ke bentuk relasi (tabel).
2. Konversi ERD (Entity Relationship Diagram) ke LRS (logical record structure) sebuah model sistem yang digambarkan dengan sebuah ERD (Entity
Relationship Diagram) akan mengikuti pola pemodelan tertentu. Dalam
kaitannya dengan konversi ke LRS (logical record structure), untuk perubahan yang terjadi adalah mengikuti aturan-aturan berikut:
24
a. Setiap entitas diubah kebentuk kotak dengan nama entitas, berada diluar kotak dan atribut berada di dalam kotak.
b. Sebuah relationship kadang disatukan, dalam sebuah kotak bersama entitas, kadang sebuah kotak bersama-sama dengan entitas, kadang disatukan dalam sebuah kotak tersendiri.
3. Konversi LRS (logical record structure).ke relasi (tabel) relasi atau tabel adalah bentuk pernyataan data secara grafis 2 (dua) dimensi, yang terdiri dari kolom dari baris. Relasi adalah bentuk visual dari sebuah file, dan tiap tuple dalam sebuah
field atau yang dalam bentuk lingkaran Diagram entity relationship dikenal
dengan sebutan atribut. Konversi dari LRS (logical record structure). Dilakukan dengan cara:
a. Nama LRS (logical record structure) menjadi nama relasi. b. Tiap atribut menjadi sebuah kolom di dalam relasi.
D. Pengujian Web
Pengujian adalah satu set aktifitas yang direncanakan dan sistematis untuk menguji atau mengevaluasi kebenaran yang diinginkan. Aktifitas pengujian terdiri dari satu set atau sekumpulan langkah dimana dapat menempatkan desain kasus uji yang spesifik dan metode pengujian (Sukamto dan Shalahuddin, 2015:272).
Untuk menguji sebuah website penulis menggunakan Blackbox Menurut Sukamto dan Shalahuddin (2015:275) “Black Box Testing yaitu menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program”.
