Contoh TA - BAB II LANDASAN TEORI - Jurusan Sistem

BAB II

LANDASAN TEORI

2.1.    Konsep Dasar Web

          Menurut Rudyanto (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) untuk mengakses menggunakan perangkat lunak yang disebut browser”.

2.1.1 Website

          Menurut Sibero (2013:2) World Wide Web (W3) adalah “suatu sistem yang berkaitan dengan dokumen digunakan sebagai media untuk menampilkan teks, gambar, multimedia dan lainnya pada jaringan internet”.

          World Wide Web Consortium (W3C) organisasi dunia yang mengatur standar World Wide Web (W3). Organisasi ini berkomitmen dalam mengatur aturan pegembangan web, yang terdiri dari 320 anggota. Selain mengatur aturan pengembangan web, juga ikut melibatkan diri dalam dunia pendidikan. Beberapa standar hasil pengembangan dari W3C antara lain HTML, CSS, XHTML, DOM, SOAP, XML, dll.

Beberapa aplikasi berbasis web, yaitu:

1.             Internet

          Menurut Sibero (2013:10) “Internet (Interconnected Network) adalah jaringan komputer yang menghubungkan antar jaringan secara global, internet dapat juga disebut jaringan dalam suatu jarinngan yang luas”.

          Sedangkan menurut Pratama (2014:37) menjelaskan bahwa:

          Internet atau Internetworking adalah jaringan komputer terbesar di dunia yang menghubungkan semua jaringan komputer yang ada (Intranet, Wide Area Network, Metropolitan Area Network, Personal Area Network, dan lain-lain) beserta dengan semua komputer, perangkat terhubung (Smartphone, tablet, komputer benam, Switch, Router, Hub, dan perangkat penghubung lainnya), serta pengguna komputer itu sendiri, ke dalam satu wadah jaringan komputer dunia.

          Istilah dalam internet salah satunya adalah HTTP (Hyper Text Transfer Protocol). Menurut Hidayatullah dan Kawistara (2014:5), “Hypertext Transfer Protocol (HTTP) adalah protokol agar client dan server bisa berkomunikasi dengan gaya request-response”.

2.             Web Browser

          Menurut Sibero (2013:12) “Web browser adalah aplikasi perangkat lunak yang digunakan untuk mengambil dan menyajikan sumber informasi web”.

          Sumber informasi web diidentifikasi dengan Unifrom Resource Identifier (URL) yang dapat terdiri dari halaman web, video, gambar, ataupun konten lainnya. Sejarah web browser dimulai pada tahun 1991 saat Tim Berners-Lee membuat aplikasi web browser pertama pada komputer NeXT dengan nama World Wide Web Browser, kemudian di tahun 1993 NCSA (National Center Supercomputing Application) mengembangkan web browser grafis bernama NCSA Mosaic, yang kemudian dilanjutkan pada tahun 1994 merilis Netscape Navigator dan pada tahun 1998 berubah menjadi Mozila Firefox. Microsoft corp ikut meramaikan perkembangan web browser dengan merilis Internet Explorer pada tahun 1995, dan diikuti oleh Opera di tahun 1996. Tidak ketinggalan Apple Inc juga ikut meramaikan pasar web browser dengan merilis Safari pada tahun 2003. Dan di tahun 2008 Google Inc merilis web browser dengan nama Google Chrome.

3.             Web Server

          Menurut Sibero (2013:11)  “Web server adalah sebuah komputer yang terdiri dari perangkat keras dan perangkat lunak”.

          Secara bentuk fisik dan cara kerjanya, perangkat keras web server tidak berbeda dengan komputer rumah atau PC, yang membedakan adalah kapasitas dan kapabilitasnya. Perbedaan tersebut dikarenakan web server bekerja sebagai penyedia layanan yang dapat diakses oleh banyak pengguna, sehingga dibutuhkan kapasitas yang besar dibandingkan PC. Dukungan perangkat lunak sangat dibutuhkan memiliki agar web server dapat berjalan optimal. Setiap perangkat lunak web server memiliki karakteristik dan teknologi yang digunakan untuk mengatur kerja sistemnya.

2.1.2 Bahasa Pemrograman

          Bahasa pemrograman ini adalah suatu himpunan dari aturan sintaks dan semantik yang dipakai untuk mendefinisikan program komputer.

1.             HTML (Hyper Text Markup Leanguage)

                 Menurut Sibero (2013:19) HTML adalah “bahasa pemrograman yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dokumen web”. Struktur dokumen HTML terdiri dari tag pembuka dan tag penutup. Struktur dokumen HTML sebagai berikut :

<html>

<head>

<title></title>

</head>

              <body>

              </body>

</html>

     Struktur diatas adalah satu kesatuan yang harus ada dalam setiap dokumen HTML.

2.             PHP (Hypertext Prepocessor)

                 Menurut Saputra dan Feni Agustin (2013:2) menjelaskan “PHP merupakan bahasa pemrograman yang difungsikan untuk membangun suatu website dinamis”.

                 Menurut Sibero (2013:49) “PHP adalah pemrograman interpreter yaitu proses penerjemahan baris kode sumber menjadi kode mesin yang dimengerti komputer secara langsung pada saat kode baris dijalankan”.

                 PHP menyatu dengan kode HTML, maksudnya adalah beda kondisi. HTML digunakan sebagai pembangun atau pondasi dari kerangka layout web, sedangkan PHP difungsikan sebagai prosesnya. Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs Personal) dan PHP itu sendiri pertama kali dibuat oleh Rasmus Leodorf pada tahun 1995 untuk proses dinamis bernama F1 (Form Interpreter), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web. Kemudian Rasmus merilis kembali kode tersebut dan diumumkan pada khalayak umum dengan nama PHP/F1. Pada tahun 1997, sebuah perusahaan Zend menulis ulang kembali intepreter PHP menjadi lebih baik. Dan pada tahun 1998, singkatan PHP diubah menjadi Hypertext Prepocessor.

                 Untuk membedakan kode PHP dengan HTML, didepan kode PHP tersebut tag pembuka dan akhir kode PHP diberikan tag penutup. Contoh kode PHP didalam HTML:

<html>

<head>

<title>Contoh PHP</title>

</head>

<body>

<p>Dibawah ini adalah tulisan dari PHP</p>

<?php

Echo “Teks dari PHP”;

?>

</body>

</html>

3.              JavaScript

                 Menurut Sibero (2013:150), “Javascript adalah suatu bahasa pemrograman yang dikembangkan untuk dapat berjalan pada web browser”.

1.        Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengizinkan pengeksekusian perintah-perintah di sisi user artinya di sisi browser bukan di sisi server web. Javascript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test dan setiap instruksi di akhiri dengan karakter titik koma (;).

2.      CSS (Cascanding Style Sheet)

     Menurut Saputra dan Agustin (2012:5) “CSS (Cascanding Style Sheet) adalah suatu bahasa pemprograman web yang digunakan untuk mengendalikan dan membangun berbagai komponen dalam web sehingga tampilan web akan lebih rapi, terstruktur, dan seragam”.

     CSS merupakan pemprograman wajib yang harus dikuasai oleh setiap pembuat program (web programmer), terlebih dahulu pendesain web (web designer).

     CSS saat ini dikembangkan oleh Word Wide Web Consurtium (W3C) dan menjadi bahasa standar dalam pembuatan  web. CSS difungsikan sebagai penopang atau pendukung, dan pelengkap file html yang berperan dalam penataan kerangka dan layout. Secara umum yang dilakukan CSS adalah pengaturan layout, kerangka teks, gambar, warna, tabel, spasi, dan lain sebagainya.

3.      Dreamweaver

                 Menurut Madcoms (2011:2) ”Adobe Dreamweaver CS5 adalah versi terbaru dari Dreamweaver yang merupakan bagian dari Adobe Creative Suite 5. Dreamweaver sendiri merupakan aplikasi yang digunakan sebagai HTML editor profesional untuk mendesain web secara virsual”.

                 Aplikasi ini juga biasa dikenal dengan istilah WYSIWYG (What You See Is What You Get), yang intinya adalah anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah site dan dapat melihat hasil desainnya secara langsung.

2.1.3   Basis Data

          Menurut Sukamto dan Salahuddin (2013:43) menjelaskan bahwa “Sistem basis data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan”. Basis data juga dapat diartikan sebagai media untuk menyimpan data agar dapat diakses dengan mudah dan cepat.

          Sedangkan menurut Simarmata (2009:2) menjelaskan bahwa:

sebuah sistem basis data adalah tempat penyimpanan file data. Sebagai file data, suatu basis data tidak menyajikan informasi secara langsung kepada pengguna. Pengguna harus menjalankan aplikasi untuk mengakses data dari basis data dan menyajikannya dalam bentuk yang bisa dimengerti.

1.             MySQL

          Menurut Ichwan (2011:23) MySQL adalah “Relational Database Management System (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). Dimana setiap orang bebas menggunakan MySQL, namun tidak boleh dijadikan produk turunan atau bersifat closed source atau komersil”.

          Sedangkan menurut Sibero (2013:97), “MySQL atau dibaca My Sekuel adalah suatu RDBMS (Relational Database Management System) yaitu aplikasi sistem yang menjalankan fungsi pengolahan data”

2.             Xampp

          Menurut Wicaksono (2012:7) “XAMPP adalah sebuah software yang berfungsi untul menjalankan website berbasis PHP dan menggunakan pengolahan data MySQL dikomputer lokal”.

          Sedangkan menurut Ramdhan (2008:4) mengatakan bahwa “XAMPP adalah paket software yang didalamnya sedah terkandung Web server, Apache, Database, MySQL, dan PHP. Dengan menginstall XAMPP, maka tidak perlu lagi melakukan instalasi dan konfigurasi Web server, Apache, PHP, dan MySQL secara manual”.

          XAMPP berperan sebagai server web pada komputer lokal. Biasanya penginstalan program XAMPP berada di folder standar, yaitu C:\XAMPP

2.1.4   Model Pengembangan Perangkat Lunak

          Menurut Sukamto dan Shalahuddin (2013:2) menjelaskan bahwa “perangkat lunak (software) adalah program komputer yang terasosiasi dengan dokumentasi perangkat lunak seperti dokumentasi kebutuhan, model desain, dan cara pengembangan (User manual)”. Sebuah program tanpa terasosiasi dengan dokumentasinya maka belum dapat disebut perangkat lunak (Software).

          Model air terjun (waterfall) sering juga disebut dengan model sekuential linear atau alur hidup klasik (classic life). Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut yang dimulai dari analisis, desain, pengkodean, tahap pengujian dan tahap pendukung (support).

 

Sumber : Sukamto dan Shalahuddin (2013:2)

Gambar II.1

Model Waterfall

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

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.

3.             Pembuatan kode program

          Desain harus ditranslasikan kedalam 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.

5.             Pendukung (support) atau pemeliharaan (maintenance)

          Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena adanya kesalahan yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi dengan lingkungan baru.

2.2.       Teori Pendukung

          Di dalam website tidak terlepas dari penggunaan teori pendukung. Penggunaan teori pendukung dimaksudkan untuk memudahkan merancang dan mendesain suatu website.

2.2.1   Struktur Navigasi

          Menurut Sutopo (2007:2), “Struktur Navigasi adalah struktur bagaimana halaman web dihubungkan dengan halman lain”.

          Struktur navigasi dapat digolongkan menurut kebutuhan akan objek, kemudahan pemakaian, keinteraktifitasannya dan kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu situs web. Bentuk dasar dari struktur navigasi sebagai berikut :

1.             Linear (Satu Alur)

          Sebagai besar website menggunakan linear navigation model informasi diberikan secara sekuensial dimulai dari satu halaman.

 

Sumber : Sutopo(2007:6)

Gambar II. 2

Struktur Navigasi Linear

2.             Hierarchical (Hirarki)

          Hierarchical Model diadaptasi oleh top-down design. Konsep navigasi ini dimulai dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman-halaman utama.

 

Sumber : Sutopo (2007:7)

Gambar II. 3

Struktur Navigasi Hirarki (Hierarchical)

3.             Spoke-and-hub Model

          Dalam Spoke-and-hub Model hanya ada dua macam link yaitu dari homepage ke halaman tertentu dan dari halaman tertentu ke halaman homepage. Spoke-and-hub Model hanya menggunakan satu node untuk menghubungkan satu node ke node lainya

Sumber : Sutopo (2007:7)

Gambar II. 4

Struktur Navigasi Spoke-and-hub Model

4.             Full web model

          Full web model memberikan kemampuan hyperlink yang banyak. Full web model banyak digunakan karena user dapat mengakses semua topik dengan subtopik dengan cepat. Namun kelemahan dari model ini, yaitu dapat berkaitan user kehilangan cara untuk kembali ke topik sebelumnya.

 

Sumber : Sutopo (2007:8)

Gambar II. 5

Struktur Navigasi  Full Web Model

2.2.2   Entity Relationship Diagram

            ERD merupakan suatu model untuk menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. ERD untuk memodelkan struktur data dan hubungan antar data, untuk menggambarkan digunakan beberapa notasi dan simbol.

 Menurut Yuhefizard (2008:17) menjelaskan bahwa “Diagram E-R  digunakan untuk menggambarkan secara sistematis hubungan antar entity-entity yang ada dalam suatu sistem database menggunakan simbol-simbol sehingga lebih mudah dipahami”. Dalam rekayasa perangkat lunak, sebuah Entity Relationship Diagram (ERD) merupakan abstrak dan konseptual resresentasi data. Entity Relationship Diagram adalah salah satu metode pemodelan basis data yang digunakan untuk menghasilkan skema konseptual untuk jenis/model data semantik sistem. Dimana sistem seringkali memiliki basis data relasional, dan ketentuannya bersifat top-down.

1.        Komponen Entity Relationship Diagram

Menurut Yasin (2012:276) menjelaskan “ERD merupakan suatu model untuk menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. ERD untuk memodelkan struktur data dan hubungan antar data, untuk menggambarkannya digunakan beberapa notasi dan simbol. Pada dasarnya ada tiga simbol yang digunakan, yaitu:

a.     Entity

Entity merupakan objek yang mewakili sesuatu yang nyata dan dapat dibedakan dari sesuatu yang lain. Simbol dari entity ini biasanya digambarkan dengan persegi panjang.

 

Sumber: Yasin (2012:277)

Gambar II.6.Simbol Entitas

b.    Atribut

Setiap entitas pasti mempunyai elemen yang disebut atribut yang berfungsi untuk mendeskripsikan karakteristik dari entitas tersebut. Isi dari atribut mempunyai sesuatu yang dapat mengidentifikasikan isi elemen satu dengan yang lain. Gambar atribut diwakili oleh simbol elips.

 

Sumber: Yasin (2012:277)

Gambar II.7.Atribut Entitas Teknisi

c.    Hubungan / Relasi

Relasi didefinisikan sebagai penghubung yang terjadi antar entity. Representasi diagram relasi adalah sebuah garis lurus yang menghubungkan dua  buah entity. Jenis-jenis atau hubungan yang biasa terjadi ntar satu entity dengan entity lain dalam sebuah basis data, meliputi :

1.    One to One / Satu ke Satu (1 : 1)

Hubungan relasi satu ke satu yaitu setiap entitas pada himpunan entitas A berhubungan paling banyak dengan satu entitas pada himpunan entitas B. Contoh hubungan antara entity Mahasiswa dengan Kartu Mahasiswa. Seorang mahasiswa hanya boleh memiliki satu kartu mahasiswa, satu kartu mahasiswa hanya dimiliki oleh satu orang mahasiswa.

Sumber: Yasin (2012:277)

Gambar II.8.Relasi One to One

2.      One to many/ Satu ke Banyak ( 1 : * )

Setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak entitas pada himpunan entitas B, setiap entitas pada entitas B dapat berhubungan dengan satu entitas pad himpunan entitas A. Contohnya hubungan terjadi antara entiti konsumen dapat memiliki satu atau lebih motor. Sedangkan satu motor hanya dapat dimiliki oleh seorang konsumen.

 

Sumber: Yasin (2012:278)

Gambar II.9.Relasi One to Many

3.     Many to Many / Banyak ke Banyak ( * : * )

setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak entitas pada himpunan entitas B. Contohnya hubungan yang terjadi antara Mahasiswa dengan Mata Kuliah. Satu mahasiswa dapat mengikuti lebih dari satu mata kuliah dab satu mata kuliah dapat diikuti oleh lebih dari satu mahasiswa.

 

Sumber: Yasin (2012:278)

Gambar. II.10.Relasi Many to Many

2.        Derajat Relationship

Dalam hubungan antar entity, juga harus ditentukan derajat relasi antar entity. Derajat relasi menunjukkan jumlah maksimum record suatu entity ber- relasi denga record pada entity yang lainnya. Terdapat 3 macam derajat dari relationship, yaitu :

       1.    Unary Degree (derajat satu)

                Bila satu entity mempunyai relasi terhadap dirinya sendiri.

       2.    Binary Degree (derajat dua)

              Bila satu relasi menghubungkan dua entity.

       3.    Ternary Degree (derajat tiga)

              Bila satu entity menghubungkan lebih dari entity.

3.       Logical Relational Structure (LRS)

          Menurut Utomo (2010:32), ”Model yang dibangun menunjukan segala suatu yang harus dimasukan dalam sistem dan dalam sesuatu yang harus dikerjakan oleh sistem, tanpa memerinci bagian sistem kerja”. Oleh karena itu logika, tidak ada referensi ke pemilihan hardware, software atau media.

2.2.3 Pengujian Web

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

Langkah-langkah dalam black –box :

1.             Analisa kebutuhan dan spesifikasi

2.             Pemilihan Input.

3.             Pemilihan Output.

4.             Seleksi Input.

5.             Pengujian.

6.             Review Hasil.

7.             Evaluasi.

          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.

          Kategori error yang akan diketahui dengan pengujian black-box testing :

1.             Fungsi yang hilang atau tidak benar.

2.             Error dari antar-muka.

3.             Error dari struktur data atau akses eksternal database.

4.             Error dari kinerja atau tingkah laku.

5.             Error dari inisilisasi dan terminasi.