7
LANDASAN TEORI
2.1. Konsep Dasar Web
Semakin canggih teknologi dan ilmu pengetahuan, maka komputer dan internet sudah menjadi infrastruktur untuk membantu menjalani aktifitas kehiduppan manusia di jaman sekarang ini. Perkembangan alikasi web yang semakin pesat sejak munculnya teknologi internet sangat membantu dalam kemudahan serta kecepatan pengiriman, penyampaian dan penerimaan informasi. Mulai dari perusahaan-perusahaan, sekolah-sekolah, perguruan tinggi, dan lembaga atau organisasi lainnya telah banyak memanfaatkan aplikasi web. Internet memiliki banyak keunggulan bagi para konsumen misalnya dalam hal kenyamanan akses 24 jam sehari, jangkauan global, sumber informasi potensial dan masih banyak lainnya.
2.1.1. Website
Menurut Rahmat (2010:2) memberikan pengertian bahwa “website atau situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman”. Hubungan antara satu halaman web dengan halaman web lainnya disebut Hyperlink, sedangkan teks yang dijadikan media penghubung disebut Hypertext.
2.1.2. Internet
Menurut Simarmata (2010:47) menyimpulkan bahwa: Internet adalah kelompok atau kumpulan dari jutaan komputer. Penggunaan Internet memungkinkan kita untuk mendapatkan informasi dan komputer yang ada di dalam kelompok tersebut dengan asumsi bahwa pemilik komputer memberikan izin akses. Untuk mendapatkan sebuah informasi, sekumpulan protokol harus digunakan, yaitu sekumpulan aturan yang menetapkan bagaimana suatu informasi dapat dikirim dan diterima.
2.1.3. Web Browser
Menurut Oktavian (2010:13)“ Web Browser adalah program komputer yang digunakan untuk membaca HTML, kemudian menerjemahkan dan menampilkan hasilnya secara visual ke layar komputer. Anda dapat menggunakan Salah satu program web browser, seperti Mozilla Firefox, Internet Explorer, Opera Safari, Google Chrome, dan sebagainya”.
Dengan web browser seorang pengguna bisa mengakses informasi, yang disediakan pada banyak website secara cepat dan murah. Meskipun browser juga bisa digunakan untuk mengakses informasi yang disediakan web server pada jaringan private.
2.1.4. Web Server
Menurut Sadeli (2013:2) “Web Server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP dan HTTPS dari klien yang
dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman halaman web yang umumnya berbentuk dokumen HTML”.
2.1.5. Basis Data
Menurut Anhar (2010:45) “Database atau Basis data adalah sekumpulan tabel tabel yang berisi data dan merupakan kumpulan dari field atau kolom. Struktur file yang menyusun sebuah database adalah data record dan data field”.
Basis data juga dapat dikatakan sebagai Kumpulan data yang selain terintegrasi karena basis data dirancang untuk dapat digunakan oleh banyak pemakai memegang data operasional dan juga penjelasan mengenai data tersebut, dan menghindari aplikasi data.
2.1.6. XAMPP (X-Apache, MySQL, PHP and PERL)
Menurut Riyanto (2011:4) “Xampp merupakan paket PHP dan MySQL berbasis open source yang dapat digunakan sebagai rool pembantu pengembangan aplikasi berbasis PHP”. Xampp mengkombinasikan kan beberapa paket perangkat lunak berbeda kedalam satu paket sampai Xampp versi 1.7.4.
Sumber: Wicaksono (2008:7)
Gambar II.1.
2.1.7. MySQL
Menurut Hirin dan Listanto (2011:27) “MySQL adalah salah satu perangkat lunak sistem manajemen basis data (database) SQL atau sering disebut dengan DBMS (Database Management System)”.
Berbeda dengan basis data konvensional seperti dat, dbf, mdb MySQL memiliki kelebihan yaitu bersifat multithread, dan multi-user serta mendukung sistem Jaringan. MySQL di distribusikan secara gratis dibawah GNU General Public License (GPL), namun ada juga versi komersial bagi kalangan tertentu yang menginginkannya.
Sumber: Hirin dan Listanto (2011:27) Gambar II.2.
MySQL
2.1.8. CSS (Casading Style Sheet)
Menurut Wahana Komputer (2013:110) “Casading Style Sheet (CSS) merupakan salah satu bahasa style (tampilan) yang dapat diterapkan pada halaman web”.
Css berfungsi memisahkan antara design dengan content halaman web. Css bekerja dengan cara mengontrol tag-tag HTML, bisa berupa mendefinisikan
ulang tag atau membuat aturan sendiri, kemudian menerapkan aturan tersebut tanpa ID atau kelas.
2.1.9. Javascript
Menurut Nugroho (2012:35) “Javascript bahasa pemrograman berbasis client, artinya bahasa ini berjalan pada sisi browser pengguna, bukan pada server”. Salah satu keuntungan dari bahasa ini adalah ringan karena berjalan pada masing-masing browser dan pekerjaan tidak dibebankan pada server. Jika diakses oleh 1000 orang maka setiap beban akan ditanggung oleh masing-masing browser.
Pada awalnya, Javascript digunakan dalam dunia web untuk menangani berbagai event pengguna dan melakukan event validasi. Menangani event pengguna misalnya menangani ketika pengguna mengubah pilihan pada combo box sehingga sekarang dikenal dengan istilah AJAX, yang memanfaatkan Javascript sebagai teknologi utama.
2.1.10. JQuery
Menurut Kadir (2011:8) mengemukakan bahwa “JQuery adalah “open source add-on pustaka JavaSript yang menekan pada interaksi antara JavaSript dengan HTML”. Jquery merupakan kode JavaSript yang telah ditulis, kita tinggal menambahkan satu atau dua baris koding untuk memanggil koding Jquery.
Jquery memberikan cara yang mudah dalam membuat efek-efek webpage yang canggih kepada para pengembang dan perancang website, karena Jquery sangat mudah di implemntasikan pada setiap halaman web.
2.1.11. HTML (Hyper Text Markup Language)
Menurut Anhar (2010:40) mengemukakan bahwa “Hyper Text Markup Language (HTML) adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang digunakan untuk menampilkan halaman pada web browser”.
2.1.12. PHP (Hypertext Prepropesor)
Menurut Arief (2011:43) memberikan definisi bahwa “PHP (Hypertext Prepropesor) adalah bahasa server side scripting yang menyatu dengan HTML untuk membuat halaman web dinamis”. Karena PHP akan dieksekusi di server kemudian hasilnya dikirimkan ke browser dalam format HTML. Dengan demikian kode program yang ditulis dengan PHP tidak akan terlihat oleh user sehingga keamanan halam web lebih terjamin. PHP dirancang untuk membentuk halaman web yang dinamis, yaitu halaman web yang dapat membentuk suatu tampilan berdasarkan permintaan terkini seperti menampilkan isi basis data ke halaman web.
2.1.13. Adobe Dreamwever CS6
Menurut Madcoms (2013:2) “Adobe Dreamweaver CS6 adalah versi terbaru dari Adobe Dreamweaver, yang merupakan bagian dari Adobe Creative Suite 6”. Adobe Dreamweaver sendiri merupakan aplikasi yang digunakan sebagai HTML editor profesional untuk mendesain web secara virtual. Aplikasi ini juga biasa dikenal dengan istilah WYSIWYG (What You See Is What You Get), yang
artinya adalah anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah site dan dapat melihat hasil desainnya secara langsung.
Kemampuan Adobe 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 di dalamnya.
Sumber: Sigit (2010:1)
Gambar II.3.
Adobe Dreamwever CS6
2.1.14. Domain
Menurut Nilasari (2014:21) mengatakan bahwa “Domain merupakan alamat unik di dunia maya yang digunakan untuk mengidentifikasi sebuah website”. Sebuah website dapat membeli alamat domain atau memilih alamat domain yang gratis.
Sebetulnya nama domain digunakan untuk mempermudah dalam menghafalkan alamat sebuat website. Ada pengalamatan yang berdasarkan IP, IP terdiri dari atas deretan angka yang dikenal dengan IP Addres. Kombinasi 4 deret
angka IP dimulai dari 0.0.0.1 sampai dengan 255.255.2555.255, sedangkan pengalamatan yang didasarkan pada domain dikenal dngan istilah DNS atau Domain Name Service. Semula nama domain hanya dapat ditulis dengan menggunakan abjad lain. Namun saat ini, abjad asing sudah dimungkinkan untuk menjadi nama domain.
2.1.15. Hosting
Menurut Nilasari (2014:27) mengemukakan bahwa “Web Hosting adalah sebuah layanan hosting internet yang memberikan akses pada individu atau organisasi”. Sehingga website mereka terakses ke world, wide, web. Perusahaan web host menyediakan tempat di server mereka untuk disewa oleh klien, seperti sebuah pusat data. Tipe-tipe hosting sangat beragam sesuai dengan kebutuhan para penggunanya. Berikut beberapa tipe hosting:
1. Layanan Web Hosting Gratis
Layanan seperti ini ditawarkan oleh berbagai perusahaan dengan layanan yang terbatas, beberapa ada yang menyertakan iklan.
2. Layanan Shared Web Hosting
Sebuah website ditempatkan dalam server yang sama dengan situs lainnya. 3. Reseller Web Hosting
Klien akan menjadi pemilik web host sendiri, para reseller akan menyadiakan layanan yang serupa dengan provider hosting.
2.1.16. Model Pengembangan Perangkat Lunak
Menurut Sukamto dan Shalahuddin (2015:28) menjelaskan bahwa “Model SDLC air terjun (Waterfall)sering juga disebut model sekuensial linier (sequential linear) atau alur hidup kelasik (classic life cycle)”. Model waterfall ini sering juga disebut model sekuensial linier yang menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain, pengkodean, pengujian dan tahap pendukung (support). Berikut adalah gambar model air terjun(waterfall):
ANALISIS DESAIN PENGODEAN PENGUJIAN
SISTEM / REKAYASA INFORMASI
Sumber: Sukamto (2015:29)
Gambar II.4. Ilustrasi Model Waterfall
Adapun fungsi dari tiap-tiap bagian model waterfall adalah sebagai berikut :
1. Analisis
Analisis sistem dilakukan untuk mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikan.
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 selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.
3. Pengkodean
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 dari segi lojik dan fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk meminilimasir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai dengan yang diinginkan.
5. Pendukung atau Pemeliharaan
Tidak menutup kemungkinan sebuah piranti lunak akan mengalami perubahan ketika sudah dikirimkan ke pengguna. Perubahan dapat terjadi karena adanya kesalahan yang muncul dan tidak terdeteksi saat pengujian, atau dapat juga terjadi piranti lunak atau software harus beradaptasi dengan lingkungan baru. Tahap ini dapat mengurangi proses pengembangan mulai tahap analisis spesifikasi.
2.2. Teori Pendukung 2.2.1. Struktur Navigasi
Menurut Suyanto (2008:62) “Struktur navigasi dalam sistem web melibatkan sistem navigasi situs web secara keseluruhan dengan desain interface situs web tersebut, navigasi memudahkan jalan yang mudah ketika menjelajahi situs web”. Struktur navigasi juga dapat diartikan sebagai struktur alur dan suatu program yang merupakan rancangan hubungan dan rantai kerja dan beberapa area yang berbeda dapat membantu mengorganisasikan seluruh elemen pembuatan website.
Menurut Binanto (2010:269) ada 4 macam bentuk dasar struktur navigasi, yaitu: Struktur Navigasi Linier, Struktur Navigasi Non Linier, Struktur Navigasi Hierarchy, dan Struktur Navigasi Composite.
1. Struktur Navigasi Linier
Struktur Navigasi Linier (Terurut) merupakan struktur navigasi yang hanya memiliki 1 rangkaian cerita yang terurut dan tidak diperkenalkan adanya percabangan dan cocok digunakan untuk presentasi multimedia yang tidak terlalu membutuhkan interaktifitas.
Sumber : Binanto (2010:269)
Gambar II.5. Struktur Navigasi Linier 2. Struktur Navigasi Non Linier
Struktur Navigasi Non Linier (Tidak Terurut) merupakan pengembangan dari struktur navigasi linier, hanya saja pada struktur ini diperkenankan untuk
membuat percabangan. Percabangan pada struktur navigasi non linier berbeda dengan percabangan struktur navigasi hierarchy, pada struktur ini kedudukan semua page sama sehingga tidak dikenal adanya master atau slow page.
Sumber : Binanto (2010:269)
Gambar II.6.
Struktur Navigasi Non Linier 3. Struktur Navigasi Hierarchy
Struktur Navigasi Hierarchy sering disebut struktur navigasi bercabang. Yaitu merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data atau gambar pada layer dengan kriteria tertentu. Tampilan pada menu utama disebut master page (halaman pendukung) dan jika dipilih akan menjadi halaman kedua, begitu seterusnya.
Sumber : Binanto (2010 :270)
Gambar II.7.
4. Struktur Navigasi Composite
Struktur Navigasi Composite (Campuran) merupakan struktur gabungan dari ketiga struktur sebelumnya. Struktur ini disebut juga struktur navigasi bebas, kelebihan dengan menggunukan struktur ini adalah suatub aplikasi mampu memberikan keterkaitan informasinya lebih baik.
Sumber: Binanto (2010 :270)
Gambar II.8.
Struktur Navigasi Composite
2.2.2. Entity ReIalionship Diagram (ERD)
Menurut Hariyanto (2010:98) “Diagram ERD merupakan representasi grafis himpunan entitas, relationship, dan konstrain integritas yang dihasilkan pada aktivitas-aktivitas pembangunan. Konstrain integritas pada entitas atau relationship merupakan bagian penting spesifikasi ERD”.
ERD bersama-sama dengan detail pendukung merupakan model data yang pada gilirannya digunakan sebagai spesifikasi untuk database. Simbol-simbol yang ada dalam ERD, yaitu:
Tabel II.1. Simbol-simbol ERD
Notasi Keterangan
Entitas, Adalah suatu objek yang dapat didefinisikan dalam lingkungan pemakai.
Relasi, menunjukan adanya hubungan di antara sejumlah entitas yang berbeda.
Atribut, berfungsi mendeskripsikan karakter entitas (atribut yang berfungsi sebagai key diberi garis bawah)
Garis, sebagai penghubung antara relasi dengan enttas, relasi dan entitas dengan atribut.
Sumber: Hariyanto (2008:98)
Keterangan: 1. Entitas
Entitas adalah objek yang menarik di bidang organisasi yang dimodelkan. Entitas biasanya disebut sebagai kata benda tunggal dan direpresentasikan sebagai persegi panjang dalam diagram entitas hubungan.
2. Hubungan
Suatu hubungan adalah hubungan antara dua jenis entitas dan direpresentasikan sebagai garis lurus yang menghubungkan dua entitas. Derajat yang paling
umum pada suatu relationship adalah biner. Jenis-jenis relationship biner terdiri:
a. One-to-one relationship (1:1)
Berarti setiap entitas pada suatu himpunan berhubungan paling banyak dengan satu entitas pada himpunan lainnya, begitupun sebaliknya, contoh:
Dosen Mengepalai Jurusan
Nama dos Alamat dos Nama dos Kode jur Kode jur Nama jur
1 1
Sumber: Hariyanto (2010:100)
Gambar II.9. Relasi One-to-one (1:1) b. One-to-many relationship (1:M)
Berarti setiap entitas pada suatu himpunan berhubungan dengan banyak entitas pada himpunan entitas lainnya, tetapi tidak sebaliknya, contoh:
Dosen Mengajar Kuliah
Nama dos Alamat dos Nama dos Kode jur Kode jur Nama jur
1 M SKS Semester Waktu Tempat Sumber: Hariyanto (2010:101) Gambar II.10. Relasi One-to-many (1:M)
c. Many-to-many relationship (M:M)
Berarti setiap entitas pada suatu himpunan dapat berhubungan dengan banyak entitas pada himpunan lainnya, dan begitupun sebaliknya, contoh :
Dosen Mengajar Mahasiswa Nama dos Nama dos NIM NIM Nama
M M
Fakultas Jurusan Mata kul Tempat
Nama Waktu
Sumber: Hariyanto (2010:102)
Gambar II.11.
Relasi Many-to-many (M:M) 3. Atribut
Attribute merupakan karakteristik dari entity atau relationship, yang menyediakan penjelasan detail tentang entity atau relationship tersebut. Dari setiap atribut-atribut entitas terdapat satu atribut yang dijadikan sebagai kunci (key). Adapun macam-macam atribut yaitu:
a. Simple Attribute
Atribut yang terdiri atas satu komponen tunggal dengan keberadaan yang independen dan tidak dapat dibagi menjadi bagian yang lebih kecil lagi, yang disebut juga dengan nama atomic attribute.
Sumber: Indrajani (2014:247)
Gambar II.12.
b. Composite Attribute
Atribut yang terdiri dari beberapa komponen, dimana masing-masing komponen memiliki keberadaan yang independen.
Sumber: Indrajani (2014:247)
Gambar II.13.
Composite Attribute
c. Single-valued Atrribute
Atribut yang mempumpunyai nilai tunggal untuk setiap kejadian.
Sumber: Indrajani (2014:248)
Gambar II.14.
Single-valued Attribute
d. Multi-valued Attribute
Atribut yang mempunyai beberapa nilai untuk setiap kejadian.
Sumber: Indrajani (2014:248)
Gambar II.15.
e. Derived Attribute
Atribut yang memiliki nilai yang dihasilkan dari beberapa atribut lainnya dan tidak harus berasal dari satu entitas.
Sumber: Indrajani (2014:249)
Gambar II.16.
Derived Attribute
f. Atribut Key (Attribute Keys)
Satu atau beberapa atribut yang mempunyai nilai unik sehingga dapat digunakan untuk membedakan data pada suatu baris atau record dengan baris lain pada suatu entitas.
Sumber: Indrajani (2014:249)
Gambar II.17.
Attribute Keys
Ada beberapa jenis key yaitu : 1) Primary Key (Kunci Utama)
Yaitu sebuah atribut atau 1 set minimal atribut yang tidak hanya mendefinisikan secara unik kejadian spesifik tetapi juga dapat mewakili setiap kejadian dari suatu entitas.
2) Foreign Key (Kunci Asing)
Yaitu non key atribut pada sebuah relasi yang juga menjadi key (primary) atribut pada relasi yang lainnya. foreign key biasanya digunakan sebagai penghubung antara record-record dari kedua relasi tersebut.
3) Secondary Key
Atribut yang digunakan untuk menggantikan primary key, sehingga dapat menghilangkan kemungkinan primary key yang tidak unik.
4) Candidate Key
Atribut yang dapat dijadikan calon primary key. 5) Alternate Key
Atribut yang tidak terpilih menjadi primary key. 6) Composite Key
Primary key yang tidak terbentuk dari beberapa atribut atau field (minimal 2 field).
2.2.3. Logical Relationship Structure (LRS)
Menurut Frieyadie (2007:13) mengemukakan bahwa “Sebelum tabel dibentuk dari field atau atribut entitas secara fisik atau level internal, maka harus dibuatkan suatu bentuk relational model yang dibuat secara logic atau level external dan konsep, dari pernyataan tersebut dibutuhkan yang disebut dengan Logical Relationship Structure (LRS)”.
LRS merupakan hasil dari pemodelan Entity Relationship (ER) beserta atributnya sehingga bisa terlihat hubungan-hubungan antar entitas.
Sumber: Suryati dan Bambang Eka Purnama (2010:37) Gambar II.18.
Contoh Logical Record Structure
2.2.4. Pengujian Web
Menurut Rosa dan Shalahudin (2013:275) “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-fingsi, masukan, dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian kotak hitam hmarus dibuat dengan kasus benar dan kasus salah, misalkan untuk kasus proses login maka harus 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 pemkai benar tapi kata sandi salah atau sebaliknya , atau keduanya salah. Tabel_Raskin (FK) Nomor_KTP Perumahan Kelurahan Ekonomi Kendaraan Tabel_Penduduk (PK) Nomor_KTP Nama_KK Pendidikan Pekerjaan Nama_Istri Pendidikan_istri Jumlah_Keluarga Jumlah_Anak Dusun RT RW Jml_Pendapatan_Per bulan Tabel_Pembayaran (FK) Nomor_KTP Penetapan_Beras Harga Total_Bayar_Dibaya r Sisa_Uang
Tebel II.2. Tampilan Black-Box
