9 2.1 Konsep Dasar Web
World Wide Web adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 1991.Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip risetnya. Untuk itu beliau mengembangkan suatu sistem untuk keperluan pribadi, sistem itu adalah program peranti lunak yang diberi namaEnquire.Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang menautkan berbagai arsip sehingga memudahkan pencarian informasi yang dibutuhkan inilah yang kelak menjadi dasar dari sebuah perkembangan pesat yang dikenal sebagai WWW.
Pada tahun 1989 Berners-Lee membuat pengajuan untuk proyek pembuatan hypertext global, kemudian pada bulan Oktober 1990, „Waring Wera Wanua’ sudah dapat dijalankan dalam lingkungan CERN (Pusat Penelitian Fisika Partikel Eropa).
Pada musim panas tahun 1991, WWW secara resmi digunakan secara luas pada jaringan Internet.
2.1.1 Website
1. Definisi Internet
Menurut Hidayatullah dan Kawistara (2014:1) Internet adalah “jaringan global yang menghubungkan komputer-komputer di seluruh dunia”. Dengan internet, sebuah komputer bisa mengakses data yang terdapat pada komputer
lain di benua yang berbeda, dengan internet sebuah toko online bisa tetap terbuka selama 24 jam sehari dan 7 hari seminggu tanpa henti. Dengan internet kejadian penting yang terjadi di suatu negara bisa segera diketahui oleh orang lain di negara yang berbeda.
Internet dan jaringan komputer adalah hasil evolusi dari ARPANET, sebuah proyek riset tingkat tinggi yang dimiliki oleh Departement Pertahanan Amerika Serikat.DARPA mensponsori perkembangan jaringan yang menggunakan Internet Protocol (IP), TCP (Transmission Control Protocol) dan UDP (User Datagram Protocol).
2. Web Browser
Menurut Hidayatullah dan Kawistara (2014:4) “semua halaman dalam web browser mengandung intruksi-intruksi tentang bagaimana dia akan ditampilkan, browser juga dapat menampilkan halaman tersebut dengan cara membaca intruksi-intruksi ini intruksi yang paling umum tersebut disebut dengan tag-tag HTML”.
Browser bekerja untuk memecah bagian nama server dari URLnya ke dalam Protokol Internet menggunakan basis data terdistribusi yang dikenal dengan DNS (Domain Name System). DNS kemudian mencari nama URL tersebut kemudian memberikan alamat IPnya. Browser kemudian meminta resource dengan jalan mengirimkan HTTP request melalui Internet kepada komputer dengan alamat IP tersebut. Browser membuat request tersebut melalui
porttertentu supaya HTTP request yang lain tetap dapat ditangani, protocol HTTP biasanya menggunakan port 80.
3. Web Server
Menurut Hidayatullah dan Kawistara (2014:125) server adalah “tempat untuk menyimpan aplikasi web kemudian mengaksesnya melalui internet”.
Selain itu dibutuhkannya web server ini adalah karena untuk server side script seperti PHP, pemeriksaan akan tampil jika menggunakan web server. Itulah bedanya dengan client side script seperti HTML, CSS dan javascript yang cukup browser sudah bisa tahu apakah script suudah sesuai dengan keinginan atau belum.
2.1.2 Bahasa Pemrograman 1. HTML
Kebanyakan halaman web dibuat dengan menggunakan HTML. HTML merupakan kependekan dari Hyper Text Markup Language. HTML didesain untuk memenuhi hamper semua kebutuhan user. (Hidayatullah dan kawistara, 2014:45).
Seperti kebanyakan bahasa pemograman (atau bahasa lain didunia).HTML juga mempunyai struktur yang harus kita ikuti, jika tidak mengikuti struktur bahasa dalam HTML, maka kemungkinan web browser dapat melakukan kesalahan dalam menampilkan isi dari halaman web.
2. CSS (Cascading Style Sheets)
Menurut Andi (2015:2) CSS adalah “sekumpulan kode yang berfungsi mengendalikan beberapa komponen di dalam web sehingga menjadi tampak seragam dan berstruktur”. Singkatnya CSS membuat Anda dapat mengubah desain dari teks, warna, gambar, dan latar belakang dari hampir semua kode tag HTML.
Ada dua sifat CSS, yaitu internal dan eksternal. Jika internal yang di pilih maka skrip itu di masukan secara langsung ke halaman website yang akan di desain. Pada eksternal skrip CSS di pisahkan dan di letakan dalam berkas khusus.
3. PHP
Menurut Hidayatullah dan Kawistara (2014:232) “Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs Personal)”.PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir web.
PHP juga merupakan suatu bahasa scripting khususnya digunakan untuk web delevopment.Karena sifatnya yang server side scripting, maka untuk menjalankan PHP harus menggunakan web server dan dapat diintegrasikan dengan HTML, javascript, JQuery, Ajax. Namun pada umumnya PHP lebih banyak digunakan bersamaan dengan file bertipe HTML.
4. Dreamweaver CS5.5
Menurut Andi (2012:1), “dreamweaver CS5.5 merupakan salah satu aplikasi web editor paling lengkap untuk membangun sebuah aplikasi website. Dengan berbagai kemudahan dan fitur yang dimiliki membuat aplikasi ini menjadi pilihan utama bagi kebnyakan pengembang website. Dalam membangun aplikasi website, pengguna sangat dimanjakan karna tidak perlu mengetik kode HTML satu persatu”.
Untuk memulai pengguna Dreamweaver CS5.5, klik tombol start > All program > Adobe Dreamweaver CS5.5
Sumber: Andi (2012:3)
Gambar II.1
Tampilan Adobe Dreamweaver CS5.5
Dalam ruang kerja Dreamweaver CS5.5, ada beberapa elemen utama yang membentuk suatu ruang kerja yang merupakan satu kesatuan tampilan antara menu utama, panel inspector, serta toolbar.
Sumber: Andi (2012:5)
Gambar II.2
Ruang kerja Adobe Dreamweaver CS5.5
Komponen-komponen yang terdapat didalam ruang kerja Adobe Dreamveaver CS5 adalah :
a. Properties Bar, merupakan sekumpulan menu untuk menampilkan sekumpulan menu-menu toolbar yang akan digunakan sesuai dengan kebutuhan serta mengatur tampilan dan dokumen lain nya.
b. Dokumen Toolbar, berisi tombo-tombol dan menu pop-up yang menyediakan tampilan yang berbeda dari jendela dokumen.
c. Dokumen Window, berfungsi menampilkan dokumen dimana anda bekerja sekarang.
d. Property Inspector, berfungsi melihat dan mengubah berbagai property objek yang terpilih.
e. Panel Group, adalah kumpulan panel yang saling berkaitan satu sama lainnya yang dikelompokan dibawah satu judul.
f. Search dan CS Live, adalah merupakan toolbar pencarian informasi yang menuju kontak dialog adobe Community Help dan menu terbaru dreamweaver CS5.5.
5. Basis Data
Menurut Rosa dan Shalahuddin (2014:43) basis data adalah “sistem yang terkomputerisasi dengan tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan”.
Kebutuhan basis data dalam sistem informasi meliputi : 1. Memasukkan, menyimpan, dan mengambil data
2. Membuat laporan berdasarkan data yang telah disimpan
Pada intinya basis data adalah media untuk menyimpan data agar dapat diakses dengan mudah dan cepat.
1. XAMMP
Menurut Hidayatullah dan Kawistara(2014:127).“Xammp dapat banyak digunakan oleh sistem operasi windows, Linux, Mac, dan Solaris sehingga tidak masalah ketika berpindah-pindah sistem operasi”.
Kata XAMMP berasal dari X yang berarti cross plafrom karena XAMMP bisa dijalankan di banyak sistem operasi, A yang berarti Apache sebagai web servernya, M berarti MySQL sebagai Database Management Systemnya (DBMS), PP berarti PHP nya dan perl sebagai bahasa yang didukungnya.
2. MySQL
Menurut Hidayatullah dan Kawistara (2014:180)MySQL adalah “salah satu aplikasi DBMS yang sudah sangat banyak digunakan oleh para pemprograman aplikasi web”. Kelebihan dari MySQL itu sendiri adalah gratis, handal, selalu di up- date dan banyak forum yang memfasilitasi para pengguna jika memiliki kendala, MySQL juga menjadi DBMS yang sering dibundlingkan dengan web server sehingga instalasinya jadi lebih mudah.
6. Model Pengembangan Perangkat Lunak
Pada awalnya pengembangan perangkat lunak, para pembuat program (programmer) langsung melakukan pengodean perangkat lunak tanpa menggunakan prosedur atau tahapan pengembangan perangkat lunak.“SDLC atau Software Development Life Cycle atau sering disebut juga System Development Life Cycle adalah proses mengembangkan atau mengubah suatu sistem perangkat lunak dengan menggunakan model-model dan metodologi yang digunakan orang untuk mengembangkan sistem-sistem perangkat lunak sebelumnya (berdasarkan best practice atau cara-cara yang sudah teruji baik)” menurut (Rosa dan Shalahuddin, 2014:26).
Model waterfall menurut Rosa dan Shalahuddin (2014:28) “model SDLC air terjun (waterfall) sering juga disebut model sekuensi linier (sequential linier) atau alur hidup klasik”. Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain, pengodean, pengujian, dan tahap pendukung (support).
Sumber : Rosa dan Shalahuddin (2013:29) Gambar II.3 Ilustrasi Model Waterfall
1. Analisa Kebutuhan Perangkat Lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan kebutuhan perangkat lunak seperti apa yang dibutuhkan oleh user.
2. Desain
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.
3. Pembuatan Kode Program
Desain harus ditranslasikan ke dalam program perangat lunak.Hasil dari tahap ini adalah program komputer sesuai dengan yang telah dibuat pada tahap desain.
4. Pengujian
Pengujian fokus pada perangkat lunak secara dari segi lojik dan fungsional dan memastikan semua bagian sudah diuji.Hal ini dilakukan untuk meminimalisir kesalahan (error) dan memastikan hasil yang keluar sesuai dengan yang diinginkan.
5. Pendukung (support)
Tahap pendukung atau pemeliharaan dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk perubahan perangkat lunak yang sudah ada, tetapi tidak untuk membuat perangkat lunak baru.
2.2.Teori Pendukung
2.2.1 Strukur Navigasi
Pengertian struktur navigasi menurut Sutopo (2007:6) Struktur navigasi adalah “susunan menu atau hirarki dari suatu situs yang menggambarkan dari setiap halaman dan link atau navigasi tiap halaman pada situs web”.Struktur navigasi suatusitus web yang akan dibuat.
Struktur navigasi terdapat beberapa model navigasi dasar, yang harus di kenal dengan baik oleh desainer, karena setiap model navigasi dapat memberikan hasil dan solusi yang berbeda :
1. Linier (Satu Alur)
Linier (satu alur) merupakan struktur yang hanya mempunyai satu rangkaian cerita yang berurut. Dengan kata lain struktur ini hanya dapat menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya dan tidak dapat menampilkan dua halaman sebelumnya atau dua halaman sesudahnya.Salah satu yang terpenting dari struktur ini adalah tidak diperkenankan percabangan.
Sumber : Sutopo (2007:6)
Gambar II.4 Struktur Navigasi Linear
2. Hierarchical (hirarki)
Struktur hierarki (bercabang) ini bahwa “Hierarchical model di adaptasi dari oleh top – down desain. Konsep navigasi ini dimulai dari satu node yang
menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman utama.
Sumber : Sutopo (2007:6)
Gambar II.5
Struktur Navigasi Hirarki
3. Spoke and hub model
Dalam spoke and hub model hanya ada dua link yaitu dari homepage ke halaman tertentu dan dari dalaman tertentu ke halaman homepage. Spoke and hub model hanya menggunakan satu node untuk menghubungkan satu node ke node yang lain.
.
Sumber : Sutopo (2007:7)
Gambar II.6
Struktur Navigasi Spoke and Hub
4. Full Web Model
Full Web model memberikan kemampuan hyperlink yang banyak. Full Web Model banyak di gunakan karena user dapat mengaksessemua topik dengan sub topik dengan cepat. Namun kelemahan dari model ini yaitu dapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya.
Sumber : Sutopo (2007:8)
Gambar II.7
Struktur Navigasi Full Web Model
2.2.2. Entity Relation Diagram 1. Definisi ERD
Menurut Rosa danShalahuddin (2014:53) Entity Relation Diagram adalah
“bentuk paling awal dalam melakukan perancangan basis data relasional”.Jika menggunakan OODBMS maka perancangan ERD tidak perlu dilakukan.
Menurut Sukamto danShalahuddin (2013:50) “Entity Relation Diagram memiliki beberapa aliran notasi seperti notasi Chen, Barker, notasi Crow‟s Foot dan beberapa notasi lainnya”. Berikut adalah simbol-simbol Entity Relation Diagram (ERD) sebagai berikut :
a. Entitas, merupakan data inti yang akan disimpan penamaan entitas biasanya lebih ke kata benda dan belum merupakan nama table.
b. Relasi, yaitu relasi yang menghubungkan antar entitas, biasanya diawali dengan kata kerja.
c. Atribut, field atau kolom data yang butuh disimpan dalam suatu entitas d. Atribut multinilai, field atau kolom data yang butuh disimpan dalam suatu
entitas yang dapat memiliki nilai lebih dari Satu.
e. Atribut kunci primer, field atau kolom data yang butuh disimpan dalam suatu entitas dan digunakan sebagai kunci akses record yang diinginkan.
f. Asosiasi, penghubung antara relasi dan entitas dimana kedua ujungnya memiliki multiplicity
1. Derajat Relationship
Menurut Rosa danShallahuddin (2014:52) derajat relasi yang umum dijumpai pada penggambaran diagram E-R adalah satu (N-ary), dua (Binary), tiga (Ternary).
a. Relasi berderajat satu (N-ary Relationship)
Relasi berderajat satu yang sering disebut juga relasi rekursif (recursive relationship) yang menghubungkan banyak entitas, contohnya dimana seorang karyawan menikah dengan karyawan lainnya(satu-kesatu), seorang karyawan memimpin karyawan lainnya (satu-kebanyak), karyawan berteman dengan teman lainnya (banyak-kebanyak)
Sumber : Rosa danShallahuddin (2014:52) Gambar II.8
Relasi Berderajat Satu (N-ary) b. Relasi Berderajat Dua (Binarry Relationship)
Relasi berderajat dua sering disebut juga dengan relasi biner ( binary relationship) adalah satu relasi yang menghubungkan dua buah entitas, relasi berderajat dua dapat bertipe satu-kesatu, satu-kebanyak maupun banyak-
kebanyak, contohnya seorang pria menikahi seorang wanita, sebuah fakultas mengatur semua jurusan, ruang kuliah menempati mahasiswa.
Sumber : Rosa dan Shallahuddin (2014:52) Gambar II.9
Relasi Berderajat Dua (Relasi Biner)
c. Relasi Berderajat Tiga (Ternary Relationship)
Yaitu satu relasi yang menghubungkan tiga buah entitas.Relasi berderajat tiga berbeda dengan 3 relasi biner contoh.
Sumber : Rosa danShallahuddin (2014:52) Gambar II.10
Relasi Berderajat Tiga (Ternary)
2. Cardinality Ratio Constraint
Menunjukkan jumlah maksimum entitas yang dapat berelasi dengan entitas pada himpunan entitas yang lain.
Jenis-jenis Cardinality : a. One To One ( 1 : 1)
Kunci Primer salah satu entitas yang akan dijadikan kunci asing (foreign key) pada tabel yang lain dan kunci asing itu dijadikan kunci primer juga, dengan kata lain, relasi tidak menjadi tabel sendiri menurut (Rosa dan Shalahuddin (2014:61)
Contoh :
Gambar II.11 ContohOne To One b. One To Many ( 1 : M )
Kunci primer entitas yang memiliki hubungan one akan menjadikan kunci primer di entitas yang memiliki hubungan many dengan kata lain, relasi tidak menjadi tabel sendiri (Rosa dan Shalahuddin 2014:61)
Pasien
Ditempatkan Kendaraan
1 1
Contoh :
Gambar II.12 Contoh One To Many
c. Many To One ( M : 1 )
Menjadi sebuah tabel tersendiri dengan kunci primer adalah atribut yang menjadi kunci primer di kedua entitas yang direlasikannya (Rosa dan Shalahuddin, 2014:60).
Contoh :
Gambar II.13 Contoh Many to One
d. Many To Many ( M : M )
Menjadi sebuah tabel tersendiri dengan kunci primer (primary key) adalah kunci primer pada entitas dan memiliki atribut dengan nama seperti pada atribut entitas (Rosa dan Shalahuddin 2014:60).
Pegawai Bekerja Proyek
1 M
Siswa M Diajarkan 1 Dosen
Contoh :
Gambar II.14 Contoh Many To Many
2.2.3. Logical Record Structure (LRS)
Menurut Ladjamudin (2006:210) “ terdapat dua aturan dalam melakukan transformasi E-R Diagram ke logical record structure (LRS).” Dua aturan tersebut yaitu :
a. Setiap entity akan di ubah ke bentuk sebuah kotak dengan nama entity berada di luar kotak dan atribut berada di luat kotak.
b. Sebuah relasi kadang disatukan dalam sebuah kotak bernama entity, kadang di pisah dalam sebuah kotak tersendiri.
Aturan pokok di atas akan sangat di pengaruhi oleh elemen yang menjadi titik perthatian utama pada langkah transformasi yaitu cardinality/ kardinalitas.
2.2.4. Pengujian Web
Menurut Rosa dan shalahuddin (2014:274) pengujian Black Box adalah
“menguji perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dank kode program”. Metode ini digunakan untuk mengetahui apakah perangkat lunak berfungsi dengan benar. Pengujian black box dimaksudkan untuk mengetahui apakah fungsi-fungsi, masukan, dan keluaran dari perangkat lunak
Pegawai Bekerja Proyek
M M
sudah sesuai dengan spesifikasi yang dibutuhkan. Pengujian Black Box berusaha menemukan kesalahan dalam kategori :
1. Fungsi-fungsi yang tidak benar atau hilang 2. Kesalahan interface
3. Kesalahan dalam struktur data atau akses database eksternal 4. Kesalahan kinerja
5. Inisialisasi dan kesalahan terminasi
