8

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Bab ini memaparkan konsep dasar web dan berbagai macam teori yang

mendukung pelaksanaan Tugas Akhir, yang memberikan pemahaman yang lebih

detail mengenai topik-topik tersebut sehingga akan memudahkan proses merancang

dan membuat web pada bab selanjutnya.

A. Website dan Internet

1. Definisi Website

Menurut Sarwono (2012:4), “Website dikenal dengan kependekan web atau situs

web yang merupakan sekumpulan halaman-halaman yang dirancang dengan

menggunakan bahasa HTML”.

Web mengizinkan pemberian highlight (penyorotan/penggaris bawahan) pada kata

atau gambar dalam sebuah dokumen untuk menghubungkan atau menunjukkan ke

media lain seperti dokumen, frase, move clip, atau file suara. Web dapat

menghubungkan dari sembarang tempat dalam sebuah dokumen atau gambar ke

sembarang tempat di dokumen lain. Dengan menghubungkan browser yang memiliki

Graphichal User Interface (GUI), link-link dapat dihubungkan ke tujuan dengan

menunjukkan link tersebut dengan mouse dan menekannya.

9

2. Definisi Internet

Menurut Irawan (2011:2) “Internet merupakan kependekan dari kata

„internetwork’, yang berarti rangkaian komputer yang terhubung menjadi beberapa

rangkaian jaringan sistem komputer terhubung secara global dan menggunakan

TCP/IP sebagai protokol”.

Sedangkan Menurut Sibero (2013:10), “Internet (Interconnected Network)

adalah jaringan komputer yang menghubungkan antar jaringan secara global, internet

dapat juga disebut jaringan didalam suatu jaringan yang luas”.

Seperti halnya jaringan komputer lokal maupun jaringan komputer area, internet juga

menggunkan protokol komunikasi yang sama yaitu TCP/IP (Transmission Control

Protocol / Internet Protocol).

Adapun beberapa aplikasi berbasis web dan fasilitas yang tersedia di internet

meliputi sebagai berikut :

a. Web Server

Menurut Sibero (2013:11), “Web Server adalah sebuah komputer yang terdiri

dari sekumpulan perangkat keras dan perangkat lunak. Secara bentuk fisik dan cara

kerjanya, perangkat keras web server tidak berbeda dengan komputer rumah atau PC,

yang membedakan adalah kapasitas dan kapabilitasnya”.

Perbedaan tersebut dikarenakan web server bekerja sebagai penyedia layanan yang

dapat diakses oleh banyak pengguna, sehingga dapat dibutuhkan kapasitas dan

kapabilitas dibandingkan PC. Dukungan perangkat lunak sangat dibutuhkan agar web

server dapat secara optimal.

10

b. Web Browser

Menurut Sibero (2013:12), “Web Browser adalah aplikasi perangkat lunak yang

digunakan untuk mengambil dan menyajikan sumber informasi web. Sumber

informasi web diidentifikasi dengan Uniform Resource Identifier (URL) yang dapat

terdiri dari halaman web, video, gambar, ataupun konten lainnya”.

c. World Wide Web (W3)

Menurut Sibero (2013:11),”World Wide Web (W3) atau lebih dikenal juga dengan

istilah web adalah suatu sistem yang berkaitan dengan dokumen digunakan sebagai

media untuk menampilkan teks, gambar, multimedia dan lainnya pada jaringan

internet.

Menurut Sibero (2013:11) mendefinisikan bahwa:

Web statis adalah website yang tidak memiliki kode server-side processing seperti

PHP atau ASP.NET. secara teknis, yang disebut dengan website statis adalah

halaman web dengan ekstensi html atau htm. Website statis pada umumnya hanya

digunakan untuk menampilkan informasi tanpa meminta data dari user. Kebanyakan

website didunia pada awalnya hanya berupa halaman statis hingga ditemukannya tag

FORM pada kode HTML.

Menurut Sibero (2013:11) mendefinisikan bahwa:

Web dinamis adalah website yang dibuat dari file yang mengandung kode server-side

processing seperti PHP atau ASP.NET. website dinamis memberikan kesempatan

kepada user untuk lebih berinteraksi dengan halaman web tersebut. Contoh

diperlukannya website dinamis adalah ketika pembuatan halaman buku tamu atau

pembuatan aplikasi-aplikasi database.

B. E-Commerce

Menurut Joni (2010:33) Mendefinisikan bahwa:

E-Commerce adalah pembelian, penjualan, dan pemasaran barang serta jasa

melalui sistem elektronik seperti televisi, radio, jaringan komputer atau internet.

Juga dapat didefinisikan sebagai suatu cara berbelanja atau berdagang dengan

online atau direct selling yang memanfaatkan fasilitas internet dimana terdapat

website yang menyediakan layanan get and delivery.

11

Menurut Joni (2013:33), Ruang lingkup e-commerce diantaranya :

1) Bussines to Bussines (B2B)

Merupakan sistem komunikasi basis antar pelaku bisnis perusahaan atau transaksi

secara elektronik antar perusahaan yang dilakukan secara rutin dan dalam

kapasitas produk yang besar.

2) Bussines to Consumer (B2C)

Merupakan sistem komunikasi bisnis antar pelaku bisnis dengan konsumen untuk

memenuhi kebutuhan tertentu pada saat tertentu.

3) Consumer to Consumer (C2C)

Merupakan sistem komunikasi dan transaksi bisnis antar konsumen untuk

memenuhi kebutuhan tertentu pada saat tertentu.

4) Consumer to Bussiness (B2C)

Merupakan individu yang menjual produk atau jasa kepada organisasi dan

individu yang mencari penjualan dan melakukan transaksi.

C. Bahasa Pemrograman

1. PHP

Menurut Sibero (2013:49) Mendefinisikan bahwa:

PHP adalah pemrograman interpreter yaitu proses penerjemahan baris kode

sumber kode mesin yang dimengerti komputer secara langsung pada saat baris

kode dijalankan PHP disebut sebagai pemrograman Server Side Programming,

PHP adalah suatu bahasa dengan hak cipta terbuka atau yang dikenal juga dengan

Open Source, yaitu pengguna dapat mengembangkan kode-kode fungsi PHP

sesuai dengan kebutuhannya.

Pemrograman PHP dapat ditulis dalam dua bentuk yaitu penulisan baris kode

PHP pada file tunggal dan penulisan kode PHP pada halaman html (emdedded).

Kedua cara penulisan tersebut tidak memiliki perbedaan, hanya menjadi kebiasaan

12

gaya penulisan dari programmer. Utnuk penulisan kode PHP pada halaman HTML

diperlukan tambahan konfigurasi pada Web Server agar dapat berjalan. Konfigurasi

ini bertujuan untuk mendaftarkan enstensi.html agar dapat dikenali Apache Web

Server dan diproses seperti halnya file PHP dengan ekstensi.php.

2. HTML (Hypertext Markup Language)

Menurut Sibero (2013:19), “Hypertext Markup Language atau HTML adalah

bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran

dokumen web. Struktur dokumen HTML terdiri dari tag penutup”.

Dokumen HTML terdiri dari beberapa komponen yaitu tag, elemen, dan atribut.

Berikut ini adalah penjelasan dari masing-masing komponen tersebut :

a. Tag

Tag adalah tanda awal “ < “ dan tanda akhir “ > “ yang digunakan sebagai

pengapit suatu elemen. Tag elemen pembuka diawali dengan tanda “ < ” dan

diakhiri dengan tanda “ > “. Sedangkan untuk elemen penutup diawali dengan

tanda “ < “ dan “ / “ kemudian diakhiri dengan tanda “ < “ dan sebelum tanda “ >

“ ditambahkan tanda “ / “.

b. Elemen

Elemen adalah nama penanda yang diapit oleh tag yang memiliki fungsi dan

tujuan tertentu pada dokumen HTML. Elemen dapat memiliki elemen anak dan

nilai. Elemen anak adalah suatu elemen yang berada didalam elemen pembuka

dan elemen penutup induknya. Nilai yang dimaksud adalah suatu teks atau

karakter yang berada diantara elemen pembuka dan elemen penutup

13

c. Atribut

Atribut adalah properti elemen yang digunakan untuk mengkhususkan suatu

elemen. Elemen dapat memiliki atribut yang berbeda pada tiap masing-

masingnya. Pendefinisian nilai atribut hanya dapat dilakukan pada elemen

pembuka. Untuk elemen dari tag yang memiliki atribut yang sama dengan

induknya, namun nilai atribut tidak didefinisikan secara implisit maka nilai

atribut elemem tersebut sama dengan nilai atribut pada tag induk atau istilah

lainnya inherit. Sifat inherit tersebut tidak berlaku untuk atribut identitas,

seperti atribut id dan name.

3. CSS (Cascading Style Sheets)

Menurut Sibero (2013:112), “CSS (Cascading Style Sheets) memiliki arti gaya

menata halaman bertingkat, yang berarti setiap satu elemen yang telah diformat dan

memiliki anak dan telah diformat, maka anak dari elemen tersebut secara otomatis

mengikuti format elemen induknya”.

Cascading Style Sheets dikembangkan untuk menata gaya pengaturan halaman

web. Pada awalnya CSS dikembangkan pada SGML pada tahun 1970, dan terus

dikembangkan hingga saat ini CSS telah mendukung banyak bahasa Markup seperti :

HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML

User Interface Languange).

Pada bulan Desember tahun 1996 W3C mengenalkan spesifikasi CSS level 1 atau

juga dikenal CSS1 yang mendukung format huruf, warna pada teks, dan lain-lain.

Kemudian pada bulan Mei tahun 1998 W3C mengeluarkan CSS2 yang didalamnya

14

terdapat fungsi pengaturan letak elemen, dan saat ini W3C telah memperbaiki serta

meningkatkan kemampuan CSS3.

4. Adobe Dreamweaver CS5

Menurut Andi (2011:2), “Adobe Dreamweaver CS5 adalah versi terbaru dari

Dreamweaver yang merupakan bagian dari Adobe Creative Suite 5. Dreamweaver

sendiri merupakan aplikasi yang digunakan sebagai HTML editor profesionsl untuk

mendesain web secara visual”.

Aplikasi ini juga biasa dikenal dengan istilah WYSIWYG (What You See Is What

You Get), yang intinya adalah anda tidak harus berurusan dengan tag-tag HTML

untuk membuat sebuah site dan dapat melihat hasil desainnya secara langsung.

Dengan kemampuan fasilitas yang optimal dalam jendela Design akan memberikan

kemudahan untuk mendesain web meskipun untuk para web desainer pemula

sekalipun. Kemampuan Dreamweaver untuk berinteraksi dengan beberapa bahasa

pemrograman seperti PHP, ASP, JavaScript, dan yang lainnya juga memberikan

fasilitas maksimal kepada desainer web dengan menyertakan bahasa pemrograman di

dalamnya.

5. XAMPP

Menurut Aditya (2011:16) mendefinisikan bahwa “XAMPP adalah perangkat

lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari

beberapa program”. Fungsinya adalah sebagai server yang berdiri sendiri (localhost),

yang terdiri atas program apache HTTP Server, MySQL database, dan penerjemah

bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP

merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP

15

dan Perl. Program ini tersedia dalam GNU General Public License dan bebas,

merupakan web yang mudah digunakan yang dapat melayani tampilan halaman web

yang dinamis.

6. Javascript

Menurut Hidayatullah dan Jauhari (2014:422) “JavaScript adalah suatu bahasa

scripting yang digunakan sebagai fungsionalitas dalam membuat suatu web”.

JavaScript sendiri bersifat client-side sehingga untuk menggunakannya browser

Anda harus mengaktifkan fitur JavaScript (bila konfigurasi browser Anda diset pada

konfigurasi default, secara otomatis browser Anda sudah mengaktifkan fitur

JavaScript).

JavaSript dikembangkan oleh netscape, sebagai bahasa pemrograman

“sederhana” karena tidak dapat digunakan untuk membuat suatu aplikasi atau applet.

Namun, dengan JavaScript kita dapat membuat sebuah halaman web yang interaktif

dengan mudah.

7. JQuery

Menurut Hidayatullah dan Jauhari (2014:426), “JQuery adalah kumpulan fungsi-

fungsi JavaScript yang sudah dibentuk sebagai suatu objek”. Sehingga penggunaan

JQuery ini bisa dikategorikan sebagai suatu library yang nantinya kita hanya perlu

menggunakan fungsi-fungsi di dalam library tersebut.

JQuery pertama kali dirilis oleh Jhon Resig pada tahun 2006. Pada

perkembangannya JQuery tidak sekedar sebagai library JavaScript, namun memiliki

keandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak

16

developer web menggunakannya. JQuery dikenal dengan slogan “Write less, do

more” artinya penulisan kode yang sedikit tetapi memiliki beberapa aksi (action).

8. Basis Data

Menurut Rosa A.S dan M.Shalahuddin (2014:43) “Sistem basis data adalah

sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah

diolah atau informasindan membuat informasi tesedia saat dibutuhkan”. Pada intinya

basis data adalah media untuk menyimpan data agar dapat diakses dengan mudah dan

cepat.

a. MySQL

Menurut Anhar (2010:21) mendefinisikan bahwa:

MySQL (My Structure Query Language) adalah sebuah perangkat lunak sistem

manajemen basis data SQL (Database Management System) atau DBMS dari

sekian banyak DBMS, seperti Oracle, MS SQL, Postagre SQL, dan lain-lain.

MySQL merupakan DBMS yang multithread, multi-user yang bersifat gratis

dibawah lisensi GNU General Public Licence (GPL).

Menurut Anhar (2010:21), Beberapa kelebihan MySQL, antara lain:

1) MySQL dapat berjalan dengan stabil pada bagian sistem operasi, seperti Windows,

Linux, FreeBSD, Mac Os X Server, Solaris, dan masih banyak lagi.

2) Bersifat Open Source, MySQL di distribusikan secara open source (gratis),

dibawah lisensi GNU General Public Licence (GPL).

3) Bersifat Multiuser, MySQL dapat digunakan oleh beberapa user dalam waktu

yang bersamaan tanpa mengalami masalah.

4) MySQL memiliki kecepatan yang baik dalam menangani query (perintah SQL).

Dengan kata lain, dapat memproses lebih banyak SQL per satuan waktu.

17

b. PHPMyAdmin

Menurut Sadeli (2013:10), “PHPMyAdmin adalah sebuah software yang

berbentuk seperti halaman situs yang terdapat pada web server”.

D. Model Pengembangan Perangkat Lunak

Menurut Rosa A.S dan M.Shalahuddin (2014:28) “Model SDLC air terjun

(waterfall) sering juga disebut model sekuensial 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 (support). Sekuensial ini terdiri dari 5

tahap yang sal ing terkait dan mempengaruhi seperti terlihat pada gambar 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 didokumentasikan.

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 pengodean. 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 tahap ini juga perlu didokumentasikan.

18

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 (supprort) atau pemeliharaan (maintenance)

Tidsk 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.

Gambar II.1. Ilustrasi Pengembangan Waterfall

Sumber: Rosa dan Shalahuddin (2014:28)

Sistem / Rekayasa

Informasi

Analisis Desain Pengodean Pengujian

19

2.2. Teori Pendukung

Dalam merancang suatu program tentu saja diperlukan peralatan pendukung (tool

system). Peralatan pendukung ini sangat berguna untuk menjelaskan proses jalannya

program sehingga mudah dimengerti oleh siapa saja menggunakan program yang

akan dibuat.

A. Struktur Navigasi

Menurut Mahendra (2009:1), “Struktur navigasi adalah alur yang digunakan

dalam aplikasi yang dibuat sebelum menyusun aplikasi multimedia kedalam sebuah

software, kita harus menentukan terlebih dahulu alur apa yang akan digunakan dalam

aplikasi yang dibuat.

Menurut Binanto (2010:269) ada 4 macam bentuk dasar dari struktur navigasi

yang biasa digunakan yaitu:

1. Struktur Navigasi Linear

Pengguna akan melakukan navigasi secara berurutan, dari frame atau byte

informasi ke informasi lainnya.

Sumber: Binanto: (2010:269)

Gambar II.2.

Struktur Navigasi Linear

20

2. Struktur Navigasi Hirarki

Struktur dasar ini disebut juga struktur “linear dengan percabangan” karena

pengguna melakukan navigasi disepanjang cabang pohon struktur yang terbentuk

oleh logika isi.

Sumber: Binanto: (2010:269)

Gambar 11.3.

Struktur Navigasi Hirarki

3. Struktur Navigasi Non-Linear

Pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan

tidak terikat dengan jalur yang sudah ditentukan sebelumnya.

Sumber: Binanto: (2010:270)

Gambar II.4.

Struktur Navigasi Non-Linear

21

4. Struktur Navigasi Campuran (Composite)

Pengguna akan melakukan navigasi dengan bebas (secara non-linear), tetapi

terkadang dibatasi presentasi linear film atau informasi penting dan atau pada

data yang saling terorganisasi secara logis pada suatu hirarki.

Sumber: Binanto: (2010:270)

Gambar II.5.

Struktur Navigasi Composite

B. Entity Relationship Diagram

Menurut Janner dan Iman (2010:67), “Entity Relationship Diagram adalah alat

pemodelan data utama dan akan membantu mengorganisasi data dalam suatu proyek

ke dalam entitas-entitas dan menentukan hubungan antar entitas”. Proses

memungkinkan analisis menghasilkan struktur basis data yang baik sehingga data

dapat disimpan dan diambil secara efisien.

Dalam ERD terdapat beberapa komponen seperti:

22

1. Entitas (entity)

Entitas adalah sesuatu yang nyata atau abstrak dimana kita akan menyimpan data

dan empat kelas entitas, yaitu misalnya pegawai, pembayaran, kampus, dan buku.

Contoh suatu entitas disebut instansi, misalnya pegawai Adi, pembayaran Joko

dan lain sebagainya.

2. Relasi (Relationship)

Relasi adalah hubungan alamiah yang terjadi antara satu atau lebih entitas,

misalnya proses pembayaran pegawai.

3. Kardinalitas

Kardinalitas menentukan kejadian suatu entitas untuk suatu kejadian pada entitas

yang berhubungan. Misalnya mahasiswa bisa mengambil banyak mata kuliah.

4. Atribut (Attribute)

Attribute adalah ciri umum semua atau sebagian besar instansi pada entitas

tertentu. Sebutan lain atribut adalah property, elemen, data dan field. Misalnya

nama, alamat, nomor pegawai dan gaji adalah atribut entitas pegawai. Sebuah

atribut atau kombinasi atribut yang mengidentifikasi satu dan hanya instansi suatu

entitas disebut kunci utama atau pengenal. Misalnya, nomor pegawai adalah

kunci utama untuk pegawai.

C. Logical Record Structure

Menurut Ladjamudin (2013:159), “aturan-aturan dalam melakukan transformasi

E-R Diagram ke Logical Record Structure”. Adalah sebagai berikut:

a. Setiap entity akan diubah kebentuk sebuah kotak dengan nama entity berada

diluar kotak dan atribut berada didalam kotak.

23

b. Sebuah relasi kadang disatukan dalam sebuah kotak bersama entity, kadang

dipisah dalam sebuah kotak tersendiri.

Aturan pokok diatas akan sangat dipengaruhi oleh elemen yang menjadi titik

perhatian utama pada langkah transformasi yaitu cardinality atau kardinalitas.

D. Pengujian Web

Menurut Rosa dan Shalahuddin (2014: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.

Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat

mencoba sesama fungsi dengan memakai perangkat lunak apakah sesuai dengan

spesifikasi sesama fungsi dengan spesifikasi yang dibutuhkan. Kasus uji yang dibuat

untuk melakukan pengujian kotak hitam harus dibuat dengan kasus benar atau salah.