6

6

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Website merupakan bagian yang tidak terpisahkan saat ini dengan teknologi

internet. Karena kemampuannya dalam menyebarkan informasi dari berbagai

format, baik dalam format teks, gambar, video, suara bahkan multimedia. Di

samping itu teknologi dalam menyajikan dan mengolah informasi berbasis web

terus berkembang, sehingga peran website saat ini dibutuhkan semua pihak.

2.1.1. Website

Menurut Yuhefizar (2013:2) mengemukakan bahwa “Website adalah

kumpulan halaman web yang mengandung informasi. Sebuah website dipanggil

melalui nama (domain), seperti www.lazada.co.id dan sebagainya. Halaman

pertama dari website disebut dengan homepage”.

Fungsi website saat ini sudah hampir dapat melayani berbagai kebutuhan

manusia, seperti untuk transaksi perbankan, saat ini bisa dilaksanakan secara

online melalui website e-banking, proses belajar, tersedia dalam bentuk website e-

learning. Untuk berbelanja, tersedia web e-commerce, e-shopping, e-bisnis dan

lain-lain.

Keunggulan website adalah dapat diakses oleh siapa saja, dimana saja dan

kapan saja tanpa terkendala oleh waktu, tempat dan jarak, semuanya bisa diakses

dengan bantuan teknologi internet.

7

7

A. Internet

Menurut Darma dkk (2009:1), “Internet atau Interconnected Network

ialah rangkaian komputer yang terhubung satu sama lain”. Setiap komputer dan

jaringan terhubung secara langsung maupun tidak langsung ke beberapa jalur

utama yang disebut backbone. Masing-masing dibedakan antara satu dengan yang

lainnya menggunakan unique name yang disebut alamat IP 32 bit.

Komputer dan Jaringan dengan berbagai platform (unix, linux, windows,

dan lain-lain) masing-masing mempunyai perbedaan dan ciri khas) dapat bertukar

informasi dengan adanya sebuah protocol standar yang dikenal dengan TCP/IP.

2.1.2. Bahasa Pemrograman

Untuk mengembangkan proses pembuatan website penulis

menggunakan beberapa bahasa pemrograman diantaranya:

A. Hyper Text Markup Language (HTML)

Menurut Raharjo dkk (2012:286), “HTML merupakan singkatan dari

Hypertext Markup Language. HTML merupakan file teks yang ditulis

menggunakan aturan-aturan kode tertentu untuk kemudian disajikan ke user

melalui suatu aplikasi web browser”. Oleh karena itu, dokumen HTML sering

disebut juga sebagai webpage (halaman web). Untuk membuat dokumen HTML,

kita tidak tergantung pada aplikasi tertentu. Karena dokumen HTML dapat dibuat

menggunakan aplikasi Text Editor apapun. Agar lebih mempermudah dalam

pembuatan Dokumen HTML , sekarang telah banyak tersedia aplikasi HTML

Editor, yaitu suatu aplikasi Text Editor yang dikhususkan untuk pembuatan kode-

8

8

kode HTML. Kode HTML dari suatu halaman web dapat kita lihat dari aplikasi

web browser yang kita gunakan, yaitu dengan cara memilih menu View-Source

(untuk Internet Explorer) dan View-Page Source (untuk Mozilla Firefox).

Keterkaitan teks antar dokumen disebut Hypertext sedangkan yang keterkaitan

selain teks antar dokumen disebut Hypermedia.

Jenis lainnya terdapat sebagai berikut.

1. VRML (Virtual Reality Markup Language)

2. WML (Wireless Markup Language)

3. DHTML (Dynamic HTML)

4. XHTML (Extensible Hypertext Markup Language)

5. XML (Extensible Markup Language)

6. XSL (Extensible Stylesheet Language)

B. PHP (Personal Home Page)

Menurut Raharjo dkk (2012:49), “PHP adalah salah satu bahasa

pemrograman skrip yang dirancang untuk membangun aplikasi web”. Php juga

merupakan bahasa yang dirancang untuk mudah diletakkan didalam kode HTML.

Sering kita jumpai kode PHP yang menyatu dengan kode HTML. Kode PHP

diawali dengan tag <?php dan diakhiri dengan ?>. Apabila kita melakukan

konfigurasi terhadap file php.ini untuk mengizinkan penggunaan tag pendek

(short tag) dengan mengubah nilai short_open_tag menjadi On, maka tag

tersebut dapat diganti dengan <? Dan ?>. Selain itu, PHP kita juga dapat

menggunakan tag gaya ASP,<% dan %>, dengan mengubah nilai asp_tags

9

9

dalam file php.ini menjadi on. Namun dalam penulisan tugas akhir ini penulis

hanya menggunakan tag <?php dan ?> untuk menulis kode-kode PHP.

Berikut contoh kode PHP yang sangat sederhana.

Gambar II.1.

Kode PHP

Perintah echo di dalam PHP berguna untuk mencetak nilai, baik teks

maupun numerik, ke layar web browser. Selain echo, kita juga dapat

menggunakan perintah print. Hasil yang diberikan dari kedua kode tersebut

adalah sama. Meskipun demikian, penggunaan echo lebih banyak digemari

oleh para programmer web.

Operator dalam PHP menurut Raharjo dkk (2012:64) ada 4, yaitu:

1. Operator Assignment

Operator Assignment adalah operator yang digunakan untuk mengisi

nilai ke dalam suatu variabel. PHP menggunakan operator sama dengan

(=) untuk melakukan hal ini, seperti layaknya bahasa C/C++ dan Java.

Sebagai bahan perbandingan, dalam bahasa Pascal/Delphi operator

yang digunakan sebagai operator assignment adalah (=).

10

10

Contoh:

Gambar II.2.

Contoh Operator Assignment

2. Operator Aritmatika

Php memiliki dukungan terhadap operasi perhitungan standar dengan

menyediakan operator-operator aritmatika.

3. Operator Relasional

Operator relasional digunakan untuk membandingkan dua buah nilai.

Hasil dari operasi perbandingan ini selalu menghasilkan nilai boolean

(true atau false). Dalam PHP, yang termasuk ke dalam operator

relasional adalah sebagai berikut.

4. Operator Logika

Operator Logika digunakan untuk mengoperasikan dua buah operand

yang bertipe Boolean. Hasil yang diberikan dari operasi ini juga akan

bertipe boolean. Operasi logika dapat berupa AND (dan), OR (atau),

dan NOT (Negasi). Tabel dibawah ini menunjukan operator logika

dalam PHP.

11

11

Tabel II.1.

Operator Logika

Operator Keterangan

&& Logika AND

|| Logika OR

! Logika NOT

C. CSS

Menurut Prasetio (2014:252) , “Cascading Style Sheets (CSS) adalah suatu

teknologi yang digunakan untuk memperindah tampilan halaman website (situs)”.

Penggunaan style CSS pada format suatu halaman diletakkan terpisah dari

tampilan halaman.

Isi dari halaman kode HTML anda terletak di dalam file lain atau dalam

salah satu bagian dari dokumen HTML, dan biasanya diletakkan di bagian kepala

atau tag <head>.

Ada dua jenis CSS yang dapat anda gunakan yaitu CSS yang bersifat

internal dan eksternal. Akan lebih mudah menggunakan yang eksternal, karena

script CSS akan tersimpan berupa file CSS tersendiri, jadi akan lebih mudah

dalam melakukan perubahan format, Anda cukup melakukan perubahan pada file

CSS, maka halaman yang terhubung dengan file CSS tersebut akan ikut berubah.

Jika anda menggunakan CSS yang bersifat internal pada halaman, maka bila ada

perubahan format harus melakukan banyak pengeditan pada semua file. CSS juga

memungkinkan untuk menerapkan banyak fitur dengan suatu sintak sederhana

yang mudah dipahami. Jika Anda terbiasa dengan konsep penggunaan style dalam

12

12

program pengolah kata, maka tidak akan menemukan masalah dalam memahami

CSS.

Kelebihan lain dari penggunaan CSS jika dibandingkan dengan hanya

menggunakan kode HTML saja yaitu lebih hemat waktu dan lebih mudah dalam

mengedit tampilan web. Hal ini dikarenakan CSS fungsinya seperti master

halaman.

D. Jquery

Menurut Sigit (2011:1), “Jquery adalah library atau kumpulan kode

javascript siap pakai”. Keunggulan messnggunakan Jquery dibandingkan dengan

javascript standar, yaitu menyederhanakan kode javascript dengan cara

memanggil fungsi-fungsi yang disediakan oleh jquery. Jquery pertama kali dirilis

tahun 2006 oleh Jhon Resig, Jquery menjadi sangat popular hingga telah

digunakan pada banyak website termasuk website kelas dunia.

Ada banyak sebab Jquery menjadi sangat popular, yakni:

1. Jquery kompatibel dengan banyak browser.

2. Jquery mendukung semua versi CS6

3. Ukuran Jquery sangat kecil, sekitar 20kb

4. Dokumentasi Jquery yang lengkap.

5. Dukungan komunitas terhadap Jquery

6. Tersedia juga plugin Jquery yang sangat beragam.

13

13

E. Javascript

Menurut Prasetio (2014:291), “Javascript adalah Bahasa Pemrograman

yang digunakan untuk membuat web lebih dinamis dan interaktif. ”. JavaScript

populer di internet dan dapat bekerja di sebagian besar penjelajah web populer

seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode

JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara

user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di

web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web

server.

Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah

situs web, lalu men-klik tombol submit, menunggu sekitar 20 detik untuk website

memproses isian form tersebut, dan mendapati halaman yang menyatakan bahwa

terdapat kolom form yang masih belum diisi.

Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan

untuk mengecek apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari

web server ke dalam web browser.

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk

validasi form, namun untuk berbagai keperluan yang lebih modern. Berbagai

animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern,

games, semuanya bisa dibuat menggunakan JavaScript.

14

14

F. Adobe Dreamweaver CS6

Menurut Agung (2012:129), “Adobe Dreamweaver CS6 adalah sebuah

software web design yang menawarkan cara mendesain website dengan dua

langkah sekaligus dalam satu waktu, yaitu mendesain dan melakukan scripting”.

Dreamweaver memiliki satu jendela mini yang disebut Code. Code adalah tempat

kode-kode HTML dan juga script pemrograman lainnya. Contoh tampilan Adobe

Dreamweaver CS6 adalah sebagai berikut.

Gambar II.3.

Tampilan Adobe Dreamweaver CS6

2.1.3. Basis Data

A. Definisi Basis Data

Menurut Rosa dan Salahhudin (2013: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.

15

15

B. Aplikasi Basis Data

Untuk mengembangkan proses penyimpanan data dalam pembuatan website

ini, penulis menggunakan beberapa aplikasi basis data diantaranya:

1. MYSQL

Menurut Raharjo dkk (2012:216) “MySQL merupakan sistem database

yang banyak digunakan untuk pengembangan aplikasi web”. MySQL

berfungsi untuk mengolah database menggunakan bahasa SQL. MySQL

bersifat open source sehingga kita bisa menggunakannya secara gratis.

Pemrograman PHP sangat mendukung/ support dengan database MySQL.

2. PHPMYADMIN

Menurut Prasetio (2014:53), “PhpMyadmin merupakan tools berbasis web

yang berguna untuk mengelola database MySQL”. PHPMYADMIN

sebenarnya adalah sebuah aplikasi pengolah database SQL yang ditulis

menggunakan bahasa pemrograman PHP. Sebagaimana aplikasi-aplikasi

lain untuk lingkungan web (aplikasi yang dibuka menggunakan pramban

atau browser) PHPMYADMIN juga mengandung unsur HTML,

XHTML, CSS, dan juga kode javascript.

2.1.4. Model Pengembangan Perangkat Lunak

Menurut Rosa dan Salahhudin (2013:28), Model air terjun menyediakan

pendekatan alur hidup perangkat lunak secara sequensial atau terurut dimulai dari

analisis, desaign, pengkodean, pengujian dan tahap pendukung (support). Berikut

adalah model awal air terjun:

16

16

Gambar II.4.

Gambaran model waterfall

1. Analisis kebutuhan perangkat lunak

Proses pengumpulan kebutuhan di lakukan secara intensif untuk

menspesifikasikan kebutuhan perangkat lunak agar dapat di pahami perangkat

lunak seperti apa yang di lakukan oleh user. Spesifikasi kebutuhan perangkat

lunak pada tahap ini perlu untuk di dokumentasikan.

2. Desain

Desain perangkat lunak adalah proses multilangkah yang focus pada desain

pembuatan program lunak termasuk struktur data, arsitektur, representasi antar

muka, dan prosedur pengodean. Tahap ini mentranlasi kebutuhan perangkat

lunak dari tahap analisis kebutuhan kerepresentasi desain agar dapat di

implementasikan menjadi program tahap selanjutnya. Desain perangkat lunak

yang dihasilkan pada tahap ini juga perlu di dokumentasikan.

3. Pembuatan kode program

Desain harus di translasikan kedalam program perangkat lunak. Hasil dari

tahap ini adalah program computer sesuai dengan desain yang telah di buat

pada tahap desain.

17

17

4. Pengujian

Pengujian focus pada perangkat lunak secara dari segi logik dan fungsional

dan memastikan bahwa semua ujian sudah di uji. Hal ini di lakukan untuk

memanimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan

sesuai dengan yang di inginkan.

5. Pendukung (support) atau pemeliharaan (maintenance)

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan

ketika sudah di kirimkan ke user. Perubahan bisa terjadi karena adanya

kesalahan yang muncul dan tidak terdeteksi saat pengujian atau perangkat

lunak harus beradaptasi dengan lingkungan baru. Tahap pengdukung atau

pemeliharaan dapat mengurangi proses pengembangan mulai dari analisis

spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk

membuat perangkat lunak baru.

2.2 Teori Pendukung

Berikut ini teori pendukung yang digunakan untuk membangun sebuah

website diantaranya:

2.2.1. Struktur Navigasi

Menurut Binanto (2010:268), “Struktur navigasi adalah gabungan dari

struktur referensi informasi situs web dan mekanisme link yang mendukung

pengunjung untuk melakukan penjelajahan situs”. Selain itu, Struktur navigasi

juga berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja

seluruh elemen yang akan digunakan dalam aplikasi. Dengan penggambaran

struktur navigasi, pembuatan sebuah aplikasi dapat dibuat dengan sistematis dan

18

18

mudah. Jenis struktur navigasi dikelompokkan menjadi 4 struktur yang berbeda

yaitu linear, hirarki, non linear, dan campuran yang mempunyai perbedaan dalam

bentuk rangkaiannya.

1. Struktur Navigasi Linear

Struktur navigasi linear merupakan struktur yang hanya memiliki 1 rangkaian

cerita yang terurut dan tidak diperkenankan adanya percabangan. Cocok

digunakan untuk presentasi multimedia yang tidak terlalu membutuhkan

interaktifitas. Tampilan struktur navigasi linear dapat dilihat dibawah ini.

Gambar II. 5.

Struktur Navigasi Linear

2. Struktur Navigasi Hirarki

Struktur navigasi hirarki sering disebut struktur navigasi bercabang, yaitu

merupakan struktur yang mengandalkan percabangan untuk menampilkan

data atau gambar pada layar dengan kriteria tertentu. Tampilan pada menu

utama disebut master page (halaman utama satu), halaman tersebut

mempunyai percabangan yang disebut slave page (halaman pendukung) dan

jika dipilih akan menjadi halaman kedua, dan begitu seterusnya. Tampilan

struktur navigasi hirarki dapat dilihat pada gambar dibawah ini.

19

19

Gambar II. 6.

Struktur Navigasi Hirarki

3. Struktur Navigasi Non Linear

Struktur navigasi non linear merupakan pengembangan dari struktur navigasi

linear, hanya saja pada struktur ini diperkenankan untuk membuat

percabangan. Percabangan pada struktur non linear berbeda dengan cabang

struktur hirarki. Pada struktur ini kedudukan semua page sama, sehingga

tidak dikenal adanya master atau slave page. Tampilan struktur navigasi non

linear dapat dilihat dibawah ini.

Gambar II. 7.

Struktur Non Linear

20

20

4. Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari struktur sebelumnya

dan disebut juga struktur navigasi bebas, maksudnya adalah jika tampilan

membutuhkan percabangan maka dibuat percabangan. Struktur ini paling

banyak digunakan dalam pembuatan aplikasi multimedia. Tampilan struktur

navigasi campuran dapat dilihat dibawah ini.

Gambar II. 8.

Struktur Navigasi Campuran

2.2.2 Enterprise Relationship Diagram

A. Entity Relationship Diagram (ERD)

Pemodelan awal basis data yang paling banyak digunakan adalah

menggunakan Entity Relationsip 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 menggunaka

ERD. ERD memiliki beberapa aliran notasi seperti, notasi Chen (dikembangkan

21

21

oleh Peter Chen), Barker (dikembangkan oleh Richard Barker), Ian Palmer, Harry

Ellis), notasi Crow’s Foot, dan beberapa notasi lain. Namun yang banyak

digunakan kedalam notasi Chen.

Menurut Rosa dan Salahhudin (2013:50), ”ERD merupakan suatu model

untuk menjelaskan hubungan antar data dalam basis data berdasarkan obyek-

obyek dasar data yang mempunyai hubungan antar relasi” .

ERD digunakan untuk memodelkan struktur data dan hubungan antar data,

untuk menggambarkannya digunakan beberapa notasi dan simbol.

Terdapat 3 komponen yang akan dibentuk yaitu :

1. Entitas

Entitas merupakan objek yang mewakili sesuatu yang nyata dan dapat

dibedakan dari sesuatu yang lain. Simbol dari entitasini biasanya

digambarkan dengan persegi panjang.

2. Atribut

Atribut memberikan informasi lebih rinci tentang jenis entitas. Atribut

memiliki struktur internal berupa tipe data. Gambar atribut diwakili oleh

simbol elips.

3. Relasi

Relasi adalah hubungan antara dua jenis entitas dan direpresentasikan

sebagai garis lurus yang menghubungkan dua entitas. Relasi yang terjadi

diantara dua himpunan entitas (misalnya A dan B) dalam satu basis data

yaitu :

22

22

a. One to one (satu ke satu)

Setiap anggota entitas A hanya boleh berhubungan dengan satu

anggota entitas B, begitu pula sebaliknya.Biasanya derajat relasi ini

digambarkan dengan simbol 1-1.

b. One to many (satu ke banyak)

Setiap anggota entitas A dapat berhubungan dengan lebih dari satu

anggota entitas B tetapi tidak sebaliknya.Biasanya derajat relasi ini

digambarkan dengan simbol 1-N.

c. Many to many (banyak ke banyak)

Setiap entitas A dapat berhubungan dengan banyak entitas himpunan

entitas B dan demikian pula sebaliknya. Biasanya simbol yang

digunakan adalah N-N.

B. Logical Record Structure (LRS)

Menurut Kusrini (2007:49), “ LRS atau Logical Record Structure

merupakan representasi dari struktur record-record pada tabel-tabel yang

terbentuk dari hasil relasi antar himpunan entitas”. Menentukan Kardinalitas,

Jumlah Tabel dan Foreign Key sebagai berikut:

1. One to One : Relasi 1:1 akan membentuk 2 tabel

2. One to Many : Relasi 1:M akan membentuk 2 tabel

2. Many to Many : Relasi M:N akan membentuk 3 tabel

23

23

2.2.3 Adobe Photoshop CS6

Menurut Prabawati (2014:1), “Adobe Photoshop merupakan aplikasi yang

digunakan untuk mengolah foto”. Perangkat lunak ini banyak digunakan oleh

fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin

pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan bersama

Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh

Adobe Systems. Versi ke-8 aplikasi ini disebut dengan nama Photoshop CS

(Creative Suite), versi ke-9 disebut Adobe Photoshop CS2, versi sepuluh disebut

Adobe Photoshop CS3 , versi ke-11 adalah Adobe Photoshop CS4 , versi ke-12

adalah Adobe Photoshop CS5 , dan versi terbaru adalah Adobe Photoshop CS6.

Gambar II.9.

Tampilan Adobe Photoshop cs6

24

24

2.2.4 Pengujian Web

Menurut Rosa dan Salahhudin (2013:275) pengujian web ada dua, yaitu:

1. Black Box Testing

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:

1. Jika user memasukan nama pemakai (username) 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.

Gambar II.10.

Contoh Gambar Blackbox

25

25

2. White Box Testing

White Box testing (pengujian kotak putih) yaitu menguji perangkat lunak

dari segi desain dan kode program apakah mampu menghasilkan fungsi-

fungsi, masukan, dan keluaran yang sesuai dengan spesifikasi kebutuhan.

Pengujian kotak putih dilakukan dengan memeriksa lojik dari kode

program. Pembuatan kasus uji bisa mengikuti standar pengujian dari

standar pemrograman yang seharusnya.

Gambar II. 11.

Contoh Gambar Whitebox