BAB II LANDASAN TEORI

(1)

7

LANDASAN TEORI

2.1. Konsep Dasar Web

Web browser telah menjadi pilihan antar muka pemakai untuk aplikasi fungsi berbagai jenis usaha. Pada suatu usaha aplikasi web interaktif digunakan dalam beragam cara. Tidak hanya penggunaan dan fungsi solusi berbasis web perusahaan yang meluas tapi juga aplikasi web menjadi semakin kompleks, memberi interaktif pemakai akhir, integrasi aplikasi lain dan pengaksesan basis data dan sumber data.

A. Website

Menurut Arief (2011:7) “Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya yang menggunakan protokol HTTP (Hypertext Transfer Protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser”.

Situs website dikategorikan menjadi dua yaitu website statis dan website dinamis, website statis adalah website yang berisi atau menampilkan informasi- informasi yang sifatnya tetap (statis), sedangkan website dinamis adalah website yang menampilkan informasi serta dapat berinteraksi dengan user.

Ada beberapa hal yang diperlukan dalam mengakses sebuah website.

Berikut ini merupakan hal-hal yang berkaitan dengan website, diantaranya :

(2)

1. Internet (Interconnected Network)

Menurut Priyatno (2009:9) “Internet (Interconnected Network) adalah kumpulan jaringan komputer di seluruh dunia yang saling berhubungan antara satu dengan yang lainnya. Internet juga dapat didefinisikan sebagai suatu jaringan yang menghubungkan antar komputer-komputer dan jaringan di seluruh dunia untuk saling berbagi data dan informasi”.

2. 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 mengirimkan kembali informasi yang diminta tersebut melalui HTTP (Hypertext Transfer Protocol) untuk ditampilkan ke layar monitor komputer kita”.

3. Web Browser

Menurut Anhar (2010:6) “Browser merupakan software yang diinstall di mesin client, berfungsi untuk menerjemahkan tag HTML menjadi halaman web browser yang sering digunakan adalah Internet Explorer, Mozilla, Opera, Netscape dan lainnya”.

B. Bahasa Pemrograman

Bahasa Pemrograman adalah sebuah instruksi standar untuk memerintah komputer agar mempunyai fungsi tertentu. Bahasa pemrograman ini merupakan suatu himpunan dari aturan sintaks dan semantik yang dipakai untuk mendefinisikan program komputer.

(3)

1. PHP (Hypertext Preprocessor)

Menurut Saputra dan Feni Agustin (2012:3) menyatakan bahwa “PHP memiliki kepanjangan Hypertext Preprocessor merupakan suatu bahasa pemrograman yang difungsikan untuk membangun suatu website dinamis”.

Sedangkan menurut Simarmata (2010:148) menyatakan bahwa “php mengijinkan pengembang untuk menempelkan kode di dalam HTML, dengan menggunakan bahasa yang sama, seperti Perl dan UNIX shells objek sumber tersusun sebagai halaman HTML, tetapi dengan generasi konten dinamis yang programatic”.

HTML digunakan sebagai pembangun atau pondasi kerangka, PHP berjalan pada sisi server, sehingga php disebut juga sebagai bahasa Server Side Scripting. Artinya bahwa dalam setiap untuk menjalankan PHP wajib membutuhkan web server dalam menjalankannya.PHP ini bersifat open source, sehingga dapat dipakai secara cuma-cuma dan mampu lintas platform, yaitu dapat berjalan pada sistem operasi Windows maupun Linux.PHP juga dibangun sebagai modul pada web serverapache dan sebagai binary yang dapat berjalan sebagai CGI.

2. CSS (Cascading Style Sheet)

Menurut Saputra dan Feni Agustin (2012:5) mengemukakan “CSS atau yang memiliki kepanjangan Cascading Style Sheet, merupakan suatu bahasa pemrograman web yang digunakan untuk mengendalikan dan membangun berbagai komponen dalam web sehingga dalam tampilan web akan lebih rapi, terstruktur, dan seragam”.

(4)

Menurut Yuhefizar (2008:165) memberi batasan CSS adalah “Mekanisme sederhana untuk memberikan style (seperti font, warna, jarak, spasi, dan lain- lain) kepada dokumen web yang ditulis dalam HTML atau XML”. CSS digunakan dalam pembuatan halaman website sebagai pelengkap guna mempercantik tampilan. CSS sudah menjadi bahasa standard yang digunakan baik oleh web designer maupun web programmer dalam hal mengatur tampilan keluaran (layout) dari halaman web agar terlihat lebih menarik, sebab tampilan adalah hal yang pertama dan utama dalam pembuatan web itu sendiri. Saat ini CSS dikembangkan oleh W3C (World Wide Web Cosurtium) dan telah mencapai versi ketiga dalam pengembangannya. Permasalahan yang seringkali dihadapi oleh pembuat web dalam menggunakan CSS adalah kompatibilitas antar web browser, hal disebabkan setiap web browser terkadang merupakan standardisasi berbeda satu sama lain sehingga layoutyang digunakan seringkali tidak sesuai.

3. HTML (Hyper Text Markup Language)

Menurut Saputra (2012:25) mengemukakan bahwa “HTML merupakan suatu bahasa yang dikenali oleh web browser untuk menampilkan informasi seperti teks, gambar, suara, animasi, bahkan video”.

Sedangkan menurut Kusnadi (2011:137) mengemukakan bahwa “HTML merupakan suatu format data yang digunakan untuk membuat website dalam internet”.

4. Javascript

Javascript sangat membantu dalam membangun sebuah web yang keren dan fungsional. Bahasa pemrograman Javascript digunakan jutaan website untuk

(5)

menambah fungsi-fungsi yang dibutuhkan seperti membuat form, menghubungkan dengan server, membuat kalender, mendeteksi visitor web, memvalidasi data dan lain-lain.

Menurut Prasetio (2014:291) mengemukakan bahwa “Javascript adalah bahasa pemrograman yang digunakan untuk membuat web lebih dinamis dan interaktif”. Javascript terintegrasi dengan html.

Kode javascript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag

<head> yang dibuka dengan tag <script type = “teks javascript”>

Sumber: Prasetio (2014 : 291)

Gambar II.1 Contoh Javascript

Kode javascript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari javascript). Untuk memanggil kode javascript yang terdapat di file tersendiri, dibagian awal <head> harus ditentukan dahulu namafile.js yang dimaksud.

Sumber: Prasetio (2014 : 291)

Gambar II.2

Pemanggilan file javascript 5. Jquery

Menurut Sigit (2011:1) mengemukakan bahwa “Jquery adalah library atau kumpulan kode javascript siap pakai”. Keunggulan menggunakan jquery dibandingkan dengan javascript standar yaitu menyederhanakan kode javascript dengan cara memanggil fungsi-fungsi yang disediakan oleh jquery.

Javascript sendiri merupakan bahasa scripting yang bekerja disisi client/browser sehingga website bisa lebih interaktif.

(6)

Jquery pertama kali dirilis tahun 2006 oleh Jhon Resig.Jquery menjadi sangat populer hingga telah banyak digunakan pada website termasuk website kelas dunia seperti google, amazone, twitter dan lain-lain.

Kelebihan-kelebihan jquery antara lain : a. Jquery kompatibel dengan banyak browser b. Jquery mendukung semua versi CSS c. Ukuran jquery sangat kecil, sekitar 20 kb d. Dokumentasi jquery yang lengkap e. Dukungan komunitas terhadap jquery

f. Tersedianya plugin jquery yang sangat beragam

Dengan tersedianya beragam plugin jquery, semakin memudahkan pengembang website menggunakan jquery untuk berbagai keperluan. Plugin jquery berfungsi menyederhanakan kode jquery itu sendiri. Karena itu, dengan plugin jqueryakan jauh lebih ringkas dalam penulisan kode javascript. Cara pemanggilan plugin jquery hampir sama dengan menggunakan jquery biasa.

<html>

<head>

</head>

<body>

</body>

</html>

Sumber : Sigit (2011:2)

Gambar II.3

Pemanggilan jquery dan jquery plugin

(7)

C. Aplikasi

Pada pembuatan website ini, penulis menggunakan beberapa software atau aplikasi, guna mempermudah proses pembuatan website ini. Aplikasi yang penulis gunakan diantaranya

1. Adobe Dreamweaver CS6

Menurut Madcoms (2013:2) menjelaskan bahwa “dreamweaver merupakan aplikasi yang digunakan sebagai HTML editor professional untuk mendesain web secara virtual”. Aplikasi ini juga yang biasa dikenal dengan istilah What You See Is What You Get (WYSIWYG) yang intinya adalah kita tidak harus berurusan dengan tag-tag HTML untuk membuat site dan dapat melihat hash desainnya secara langsung.

Dengan kemampuan fasilitas yang optimal dalam jendela desain akan memberiakn kemampuan untuk mendesain web meskipun untuk web desainer pemula sekalipun. Kemampuan dreamweaver untuk berinteraksi dengan beberapa bahasa pemrograman seperti php, ASP, javascript dan yang lainnya juga memberikan fasilitas maksimal kepada desainer web dengan menyertakan bahasa pemrograman web didalamnya.

2. Adobe Photoshop

Hakim (2012) “Adobe Photoshop adalah perangkat lunak editor citra buatan Adobe System yang dikhususkan untuk pengeditan foto atau gambar dan pembuatan efek”. Perangkat lunak ini banyak digunakan fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar atau foto, dan bersama Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe

(8)

Systems.Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS (Creative Suite), versi sembilan disebut Adobe Photoshop CS4, versi keduabelas adalah Adobe Photoshop CS5, dan versi yang terakhir (ketigabelas) adalah Adobe Photoshop CS6.

Photoshop dirancang untuk menyunting gambar untuk cetakan berbasis kertas Photoshop yang ada saat ini juga dapat digunakan untuk memproduksi gambar untuk (World Wide Web).Beberapa versi terakhir juga menyertakan aplikasi tambahan, (Adobe Image Ready), untuk keperluan tersebut.Photoshop juga memiliki hubungan yang erat dengan beberapa perangkat lunak penyunting media, animasi, dan authoring buatan adobe lainnya.File format asli Photoshop, .PSD, dapat diekspor ke dan dari Adobe Image Ready, Adobe illustrator, Adobe Premiere Pro, Adobe After Effect dan Adobe Ecore DVD untuk membuat DVD professional, menyediakan penyuntingan gambar non- linear dan layanandan special effect seperti background, tekstur, dan lain-lain untuk keperluan televisi, film, dan situs web.

3. XAMPP

Menurut Nugroho (2013:1) “Xampp adalah paket web lengkap yang dapat anda pakai untuk belajar pemrograman web, khususnya PHP dan MySQL, paket ini dapat di download dan legal”. Xampp memudahkan para web developer untuk mengembangkan dan membuat sebuah website di localPC/Laptop, sehingga proses pembuatan sebuah website menjadi lebih aman dan cepat dibandingkan melakukan proses pembuatan website lewat online server.

Sebenarnya ada banyak sekali jenis software lain yang dapat menjalankan Apache, MySQL dan PHP. Namun karena proses instalasi dan pengembangan

(9)

dari XAMPP lebih mudah, maka banyak developer web yang menyarankan untuk menggunakan XAMPP untuk menjalankan AMP (Apache, MySQL, PHP). Selain dari pada itu, XAMPP juga dapat berjalan di platform (sistem operasi) besar, seperti Macintosh, Windows, dan Linux (Ubuntu, Solaris, Debian, CeNTOS).

D. Basis Data

Menurut Kustiyaningsih (2011:146) “Database adalah struktur penyimpanan data. Untuk menambah, mengakses dan memproses data yang disimpan dalam sebuah database komputer, diperlukan sistem manajemen database seperti MySQL Server”.

Intinya database dalam dunia programming difungsikan untuk menyimpan seluruh data atau informasi yang dihasilkan dari proses interaksi didalam aplikasi, baik itu desktop ataupun internet programming. Dan biasanya pembangunan database akan dilakukan terlebih dahulu sebelum membangun aplikasi. Berikut penjelasan database yang penulis gunakan dalam membangun sistem ini.

1. MySQL (My Structured Query Language)

Menurut Anhar (2010:21) “MySQL (My Structure Query Language) adalah salah satu Database Management System (DBMS) dan sekian banyak DBMS seperti Oracle, MS SQL, Postrage SQL dan lainnya”. MySQL merupakan DBMS yang multithread, multi-user yang bersifat gratis dibawah lisensi GNU General Public Licence.Tidak seperti Apache yang merupakan software yang dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber

(10)

dimiliki oleh penulisnya masing-masing.MySQL dimiliki dan disponsori oleh sebuah perusahaan Swedia, yaitu MySQL AB. MySQL AB memegang hak cipta kode sumbernya.Seperti yang disebutkan sebelumnya, MySQL bersifat gratis atau open source sehingga kita bisa menggunakannya secara gratis.

Pemrograman PHP juga sangat mendukung/support dengan database MySQL sehingga apabila kita mempelajarinya dengan sungguh-sungguh kita dapat mengaplikasikan PHP & MySQL dalam membuat aplikasi website maupun dalam membuat website.

Beberapa kelebihan MySQL, antara lain :

a. MySQL dapat berjalan dengan stabil pada berbagai sistem operasi, seperti Windows, Linux, FreeBSO, Mac Os X Server, Solaris dan masih banyak lagi.

b. Bersifat Open Source, MySQL didistribusikan secara open source (gratis), dibawah lisensi GNU General Public Licence (GPL).

c. Bersifat Multiuser, MySQL dapay digunakan oleh beberapa user dalam waktu yang bersamaan tanpa mengalami masalah.

d. MySQL memiliki kecepatan yang baik dalam menangani query (perintah SQL). Dengan kata lain, dapat memproses lebih banyak SQL per satuan waktu.

Dari segi security atau keamanan data, MySQL memiliki beberapa lapisan sekuriti, seperti level subnet mask, namahost, dan izin akses user dengan sistem perizinan yang mendetail serta password yang terenkripsi.

(11)

E. Model Pengembangan Perangkat Lunak

Menurut Sukamto dan M.Shalahuddin (2013:28) mengatakan bahwa

“Model SDLC air terjun (waterfall) sering juga disebut model sekuensial linier (sequential linier) atau alur hidup klasik (classic life cycle) yang menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain, pengodean, pengujian dan tahap pendukung (support)”.

Analisis Desain Pengkodean Pengujian

Sumber : Sukamto dan M.Shalahuddin (2013:29) Gambar II.4 Model Air Terjun

Berikut adalah penjelasannya :

1. Analisis kebutuhan perangkat lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu untuk didokumentasikan.

2. Desain

Desain perangkat lunak adalah proses multi langkah yang fokus pada desain pembuatan program perangkat lunak termasuk struktur data, arsitektur, perangkat lunak, representasi antarmuka, dan prosedur pengkodean. Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi desain agar dapat diimplementasikan menjadi program pada tahap

(12)

selanjutnya.Desain perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.

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 dari segi logik dan fungsional dan memastikan bahwa semua bagian sudah diuji.Hal ini dilakukan untuk meminimalisir kesalahan (error) dan memastikan keluaran yang hasilnya sesuai dengan yang diinginkan.

5. Pendukung (support) atau pemeliharaan (maintenance)

Tahap pendukung atau pemeliharaan dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.

2.2. Teori Pendukung A. Struktur Navigasi

Menurut Binanto (2010:269) ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam proses pembuatan aplikasi multimedia, yaitu :

1. Struktur Navigasi Linier

Pengguna akan melakukan navigasi secara berurutan, dari frame atau byte informasi yang satu ke yang lainnya.

(13)

Sumber : Binanto (2010:269)

Gambar II.5 Struktur Navigasi Linier 2. Struktur Navigasi Hirarkies

Struktur dasar ini disebut juga struktur “Linier Percabangan” karena pengguna melakukan navigasi disepanjang cabang pohon struktur yang terbentuk oleh logika isi.

Gambar II.6

Struktur Navigasi Hirarkies

3. Struktur Navigasi Non-Linier

Pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan tidak terkait dengan jalur yang sudah ditentukan sebelumnya.

(14)

Gambar II.7

Struktur Navigasi Non-Linier

4. Struktur Navigasi Komposit

Pengguna akan melakukan navigasi dengan bebas (secara non-linier), tetapi terkadang dibatasi presentasi linier film atau informasi penting atau pada data yang paling terorganisasi secara logis pada suatu hierarki.

Gambar II.8

Struktur Navigasi Komposit

(15)

B. ERD (Entity Relationship Diagram)

Menurut Yanto (2016:50) “Entity Relationship Diagram (ERD) adalah suatu diagram untuk menggambarkan desain konseptual dari model suatu basis data relasional”.

Contoh Kasus Entity Relationship Diagram :

Matakuliah Jadwal Kelas

Mahasiswa Prodi

Nilai Dosen

Mengambil Memiliki

Mengajar

Menerbitkan

nidn N_quis

Kd nilai

N_uas N_uts

N_tugas nidn

Bid_ilmu alamat Nm_dosen

Tgl_lahir

nim nama

jk alamat

telp

Kd_mk Kd kelas

Nm_kelas

Kd jadwal waktu

tanggal

ket Kd_prodi

sks

Nm_mk

Kd mk

Kd prodi Nm_prodi

M 1

M

M M

1

Sumber : (Yanto, 2016:48)

Gambar II.9

Contoh Kasus Entity Relationship Diagram

(16)

C. LRS (Logical Record Structure)

Menurut Simarmata dan Paryudi (2007:37) “LRS atau skema basis data adalah sekelompok objek dalam basis data yang saling berhubungan”. Dalam skema, objek yang dihubungkan memiliki relasi satu sama lain.

Berikut Contoh Kasus Logical Record Structure :

Kdbarang PK Nmbarang Tarif

Tabel_barang

Notrans PK Kdbarang PK Nmbarang Jumlah Subtotal harga

Tabel_detail

Kdkonsumen PK Emailkonsumen Alamat notelp

Tabel_konsumen

Kdtrans PK Tgl

Total

Kduser PK Kdkonsumen PK Nama_customer Harga Status

Tabel_transaksi

Kduser PK Nmuser Password level

Tabel_user

M 1

1

1 1 1

M

Sumber : Paryudi dan Simarmata (2007:267) Gambar II.10

Contoh Logical Record Structure

Terdapat tiga kardinalitas di dalam Logical Record Structure yaitu : 1. One to One (1-1)

Tingkat hubungan satu ke satu, dinyatakan dengan satu kejadian pada entitas pertama, hanya mempunyai satu hubungan dengan saat kejadian pada entitas yang kedua dan sebaliknya.

2. One to Many (1-M)

Tingkat hubungan satu kebanyak adalah sama dengan banyak ke satu.

Tergantung dari arah mana hubungan tersebut dilihat. Untuk satu kejadian pada

(17)

entitas yang pertama dapat mempunyai banyak hubungan dengan kejadian pada entitas yang kedua. Sebaliknya satu kejadian pada entitas yang kedua hanya dapat mempunyai satu hubungan dengan satu kejadian pada entitas yang pertama.

3. Many to Many (M-M)

Tingkat hubungan kebanyakan terjadi jika tiap kejadian pada sebuah entitas akan mempunyai banyak hubungan dengan kejadian baik pada entitas lainnya.

Baik dilihat dari sisi entitas yang pertama, maupun dilihat dari sisi yang kedua.

D. Pengujian Web

Dalam testing dan implementasi sistem dikenal dua metode pengujian yang populer yaitu pengujian Black-box testing dan White-box testing. Namun disini penulis menggunakan pengujian dengan metode Black-box testing. Menurut Sukamto dan M. Shalahuddin (2013:275) “Black-box Testing (Pengujian Kotak Hitam) yaitu menguji perangkat lunak dari segi 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 dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian kotak hitam harus dibuat dengan kasus benar dan kasus salah, misalkan kasus proses login maka kasus uji yang dibuat adalah :

1. Jika user memasukkan nama pengguna (Username) dan kata sandi (Password) yang benar.

(18)

2. Jika user memasukkan nama pengguna (Username) dan kata sandi (Password) yang salah, misalnya nama pengguna benar tapi kata sandi salah, atau sebaliknya atau keduanya salah.