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