7

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Lahirnya internet dan web telah menjawab kebutuhan manusia akan

teknologi saat ini, mendorong pola pikir mereka untuk terus meningkaykan

standar kebutuhan iniformasi dan telekomunikasi. Kini hampir di semua

organisasi yang ada bukan hanya perusahaan dan instansi pemerintahan telah

menggunakan media informasi berbasis web karena bisa diakses dimana dan juga

lebih efisien.

2.1.1. Website

Menurut Arief (2011:7) “Web adalah salah satu aplikasi yang berisikan

dokumen-dokumen multimedia (teks, gambar, suara, animasi, video) di dalamnya

yang menggunakan protokol HTTP (Hypertext Transfer Protocol) dan untuk

mengaksesnya menggunakan perangkat lunak yang disebut browser”.

Ada beberapa pendukung komponen sebuah website agar dapat diakses

oleh pemakai, diantaranya:

1. Internet

Menurut Darma Dan Shenia Ananda (2009:1)“Secara harfiah, internet

(kependekan dari ‘interconnected-networking’) ialah jaringan komputer yang

terhubung satu sama lain”. Hubungan melalui suatu sytem antar perangkat

komputer untuk lalu lintas data itulah yang dinamakan network. Mungkin anda

mengenal istilah LAN (Local Area Network), yang menghubung kompuer-

komputer dalamn area tertentu, seperti kantor, sekolah, atau warnet. Internet

8

kurang lebih seperti itu, hanya dalam area yang sangat luas, yaitu seluruh

dunia.Jadi, komputer yang terhubung melalui jaringan dan saling

berkomunikasi dengan waktu dan wilayah yang tak terbatas,disebut internet.

2. Web Browser

Menurut Anhar (2010:6) “Browser merupakan software yang diinstall

dimesin client, berfungsi untuk menterjemahkan tag HTML menjadi halaman

web”.

3. Web Server

Menurut Anhar (2010:4) “Web Server adalah aplikasi yang berfungsi untuk

melayani permintaan pemanggilan alamat dari pengguna melalui web

browser, dimana web server mengirim kembali informasi yang diminta

tersebut melalui HTTP (HiperText transfer Protocol) untuk ditampilkan

dilayar monitor komputer kita”.

2.1.2. Bahasa Pemrograman

Berikut adalah bahasa programan yang digunakan dalam perancangan

website:

1. HTML ( Hyper Text Markup Leanguage )

Menurut Anhar (2010:40) “HTML ( Hyper Text Markup Leanguage )

adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam

sebuah file yang digunakan untuk menampilkan halaman pada web

browser”.

2. PHP ( Personal Home Pages )

Menurut Anhar (2010:3) “Personal Home Pages (PHP) adalah bahasa

pemrograman web server-side yang bersifat open source. PHP merupakan

9

script yang terintegrasi dengan HTML dan berada pada server (server side

HTML embedded scripting) yang digunakan untuk membuat halaman

website yang dinamis.

3. CSS (Cascading Style Sheet)

Menurut Sulistyawan dan Rahmad Saleh (2008:33), “ CSS adalah sebuah

dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML

atau sekedar menjadi rujukan oleh HTML dalam pendefinisian style”.

4. Java Script

Menurut Zaki dan Smidev Community (2008:26),”Javascript adalah skrip

program berbasis client yang dieksekusi oleh browser sehingga membuat

halaman web bisa melakukan tugas-tugas tambahan yang tidak bisa

dilakukan oleh skrip HTML biasa”.

2.1.3. Basis Data

Iskandar dan A. Haris Rangkuti (2008:126) menyimpulkan bahwa:

Basis data adalah dua atau lebih simpanan data dengan elemen-elemen

data penghubung, yang dapat diakses lebih dari satu cara. Basis data

dinyatakan dengan tehnik-tehnik formal dan manajemen basis data. Dari

definisi diatas, maka dapat dikatakan bahwa basis data merupakan

kumpulan dari data yang saling berhubungan satu dengan yang lainnya.

Menurut Anhar (2010:21) “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”.

2.1.4. Adobe Dreamweaver CS 8

Adobe Dreamweaver CS 8 merupakan program aplikasi yang digunakan

untuk melakukan desain halaman website secara visual. Dalam mendesain

halaman website, aplikasi ini menyediakan fasilitas-fasilitas yang memberikan

10

kemudahan bagi parapengembang web, juga bagi pemula yang belajar

membangun website (Wahana Komputer, 2012:2).

Adobe Macromedia Dreamweaver CS 8 tampil dengan ruang kerja baru

yang lebih menarik dibandingkan dengan versi-versi sebelumnya. Berikut ini

adalah keterangan untuk bagian-bagian dari ruang kerja Adobe Macromedia

Dreamweaver CS 8:

1. Title Bar merupakan baris yang menampilkan nama program dan nama

dokumen yang sedang berjalan.

2. Menu Bar merupakan perintah-perintah untuk merancang dan mengolah

dokumen website.

3. Insert Bar merupakan tombol-tombol untuk memasukan berbagai objek ke

dalam dokumen website yang sedang kita buat agar lebih cepat dan praktis.

4. Document Toolbar merupakan tool-tool untuk menentukan model tampilan

dan judul halaman website.

5. Document Windows merupakan ruang kerja Dreamweaver sebagai tempat

untuk merancang sebuah website.

6. Panel Groups merupakan panel-panel dari berbagai fungsi Dreamweaver

seperti:Design, Code, Application, Tag Inspector, Files, Frames, dan

History.

7. Tag Selector merupakan tampilan informasi tag-tag yang sedang aktif

seperti: , , dan lain-lain.

8. Property Inspector merupakan pengaturan-pengaturan yang diterapkan pada

suatu objek, sehingga isi dari property inspector ini akan selalu berubah

sesuai dengan objek yang sedang aktif.

11

9. Files Panel merupakan direktori untuk membuka, maupun menyimpan file-

file website.

2.1.5 Model Pengembangan Perangkat Lunak

Metode yang digunakan pada pengembangan perangkat lunak ini

menggunakan model “Waterfall”. Model SDLC air terjun (Waterfall) sering juga

disebut model sekuensial linier (Sequential Linear) atau alur hidup klasik (Classic

Life Cycle). Menurut Sukamto dan M. Shalahuddin (2013:28) “Model air terjun

menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau

terurut dimulai dari analisi, desain, pengkodean, pengujian, dan tahap pendukung

(Support)”.

Sumber: Sukamto dan M.Shalahuddin (2013:29)

Gambar II.1. Ilustrasi Model Waterfall

Dengan keterangan sebagai berikut:

1. Analisa 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.

2. Desain

Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis

kebutuhan ke representasi desain agar dapat diimplementasikan menjadi

program ada tahap selanjutnya.

12

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 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 dikirim ke user. Perubahan bisa terjadi karena adanya kesalahan

yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus

beradaptasi dengan lingkungan baru. Pada tahap ini proses akan dilakukan

kembali sesuai urutan metode waterfall.

2.2. Teori Pendukukung

Dalam proses pembuatan website ini penulis menggunakan beberapa

peralatanpendukung. Adapun beberapa peralatan pendukung yang digunakan

adalah:

2.2.1. Struktur Navigasi

Menurut Suyanto (2008:62) “Struktur navigasi dalam situs web melibatkan

sistem navigasi situs web secara keseluruhan dan desain interface situs web

tersebut, navigasi memudahkan jalan yang mudah ketika menjelajahi situs web”.

13

Struktur navigasi juga dapat diartikan sebagai struktur alur dari suatu program

yang merupakan rancangan hubungan dan rantai kerja dari beberapa area yang

berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan

website.

Menurut Binanto (2010:269-270) ada empat 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 yang satu ke yang lainnya.

Sumber: Binanto (2010:269)

Gambar II.2. Struktur Navigasi Linear

2. Struktur Navigasi Hierarkis

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 II.3. Struktur Navigasi Hierarkis

14

3. Struktur Navigasi Nonlinear

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 Linier

4. Struktur Navigasi Komposit

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

tetapi terkadang dibatasi presentasi linear film atau informasi penting

dan/atau pada data yang paling terorganisasi secara logis pada suatu

hierarkis.

Sumber: Binanto (2010:270)

Gambar II.5. Struktur Navigasi Komposit

15

2.2.2. Entity Relationship Diagram (ERD)

Menurut Fathansyah (2012:81) mengemukakan bahwa:

ERD adalah model Entity-Relationship yang berisi komponen-komponen

himpunan entitas dan himpunan relasi yang masih-masing dilengkapi

dengan atribut-atribut yang mempresentasikan seluruh fakta dari dunia

nyata yang kita tinjau, dapat digambarkan dengan lebih sistematis dengan

menggunakan diagram entity-relationship (diagram E-R)

Di dalam Entity Relationship Diagram (ERD) dikenal beberapa komponen

yaitu:

1. Entitas (Entity) merupakan individu yang mewakili sesuatu yang nyata

(eksistensinya) dan dapat dibedakan dari sesuatu yang lain garis.

2. Relasi (Relationship) menunjukkan adanya hubungan diantara jumlah

entitas yang berasal dari himpunan entitas yang berbeda.

3. Atribut adalah properti atau karakteristik yang dimiliki oleh suatu entitas,

dimana properti atau karakteristik ini bemakna atau berarti bagi organisasi

atau perusahaan.

4. Garis penghubung adalah sebagai penghubung antar himpunan relasi

dengan himpunan entitas dan himpunan entitas dengan atributnya.

2.2.3. Derajat Relationship

Menurut Fathansyah (2012:78) menyimpulkan bahwa “kardinalitas relasi

menunjukkan jumlah maksimum entitas yang dapat berelasi dengan entitas yang

lain”.

Kardinalitas relasi yang terjadi diantara dua himpunan entitas (misalnya A

dan B) dapat berupa:

16

1. Satu ke Banyak ( One to One)

Yang berarti setiap entitas pada himpunan A berhubungan dengan paling

banyak dengan satu entitas pada himpunan entitas B. Dan begitu juga

dengan sebaliknya setiap entitas pada himpunan entitas B berhubungan

dengan paling banyak dengan satu entitas pada himpunan entitas A.

2. Satu ke banyak (One to Many)

Yang berarti setiap entitas pada himpunan entitas A dapat berhubungan

dengan banyak entitas pada himpunan entitas B tetapi tidak sebaliknya,

dimana setiap entitas pada himpunan entitas B berhubungan dengan paling

banyak dengan satu entitas pada himpunan entitas A.

3. Banyak ke banyak (Many to Many)

Yang berarti setiap entitas pada himpunan A dapat berhubungan dengan

banyak entitas pada himpunan entitas B, dan demikian juga dengan

sebaliknya diman setiap entitas pada himpunan entitas B dapat berhubungan

dengan banyak entitas pada himpunan entitas A.

2.2.4. LRS (Logical Record Structure)

Logical Record Structure dibentuk dengan nomor dari tipe record.

Beberapa tipe record digambarkan oleh kotak empat persegi panjang dan dengan

nama yang unik. Beda LRS dengan diagram entity relationship diagram nama tipe

record berada diluar kotak field tipe record ditempatkan.

Menurut Hasugian dan Shidiq (2012:608) memberikan batasan bahwa LRS

adalah “sebuah model sistem yang digambarkan dengan sebuah diagram-ER akan

mengikuti pola atau aturan permodelan tertentu dalam kaitanya dengan konvensi

ke LRS”.

17

Perubahan yang terjadi yaitu mengikuti aturan-aturan sebagai berikut

(Hasugian dan Shidiq, 2012:608) :

1. Setiap entitas akan diubah kebentuk kotak.

2. Sebuah atribut relasi disatukan dalam sebuah kotak bersama entitas jika

hubungan yang terjadi pada diagram-ER 1:M (relasi bersatu dengan

cardinality M) atau tingkat hubungan 1:1 (relasi bersatu dengan

cardinality yang paling membutuhkan referensi).

3. Sebuah relasi dipisah dalam sebuah kotak tersendiri (menjadi entitas baru)

jika tingkat hubunganya M:M (many to many) dan memiliki foreign key

sebagai primary key yang diambil dari kedua entitas yang sebelumnya

saling berhubungan.

2.2.5. Pengujian Web

Menurut Sukamto dan M. Shalahuddin (2013:275) menjelaskan bahwa

“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 semua fungsi dengan memakai perangkat lunak apakah sesuai dengan

spesifikasi yang dibutuhkanKasus uji yang dibuat untuk melakukan pengujian

kotak hitam harus dibuat dengan kasus benar dan kasus salah. misalkan untuk

kasus proses login maka kasus uji coba yang dibuat adalah:

1. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang benar.

18

2. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang salah,misalkan nama pemakai benar tapi kata sandi salah, atau

sebaliknya atau keduanya salah