-
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