6 2.1 Konsep Dasar Web
Konsep dasar web meliputi berbagai aspek dan sudut pandang yang berbeda-beda sesuai dengan keterangan dalam hal-hal yang berkaitan dengan web. 2.1.1 Website
Menurut Yuhefizar (2013:2) dalam (Prayitno & Safitri, 2015) pengertian website adalah “keseluruhan halaman-halaman web yang terdapat dari sebuah domain yang mengandung informasi”.
Komponen dalam website dapat diuraikan menjadi WWW (world wide web), internet dan aplikasi berbasis web. Adapun uraian dari komponen dalam website adalah sebagai berikut:
1. WWW (World Wide Web)
Menurut Sibero (2013:11) dalam (Supriyanta & Nisa, 2015) “World Wide Web (W3) atau yang dikenal juga dengan istilah web adalah suatu sistem yang berkaitan dengan dokumen digunakan sebagai media untuk menampilkan teks, gambar, multimedia dan lainnya pada jaringan internet”.
2. Internet
Menurut Sibero (2013:10) dalam (Supriyanta & Nisa, 2015) “Internet (Interconnected Network) adalah jaringan komputer yang meng-hubungkan antar jaringan secara global, internet dapat juga disebut jaringan dalam suatu jaringan yang luas”.
3. Aplikasi berbasis web
Aplikasi berbasis web terbagi menjadi web server dan web browser. Adapun uraian dari web server dan web browser yaitu:
a. Web server
Menurut Sadeli (2013:2) dalam (Supriyanta & Nisa, 2015) “WebServer adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP dan HTTPS dari klien yang dikenal dengan webbrowser yang umumnya berbentuk dokumen HTML”.
Salah satu aplikasi web server adalah XAMPP. Menurut Yudhanto dan Agus Purbaya (2014:11) dalam (Supriyanta & Nisa, 2015) “XAMPP merupakan program paket PHP dan MySQL berbasis opensource yang saat ini merupakan andalan para programmer PHP dalam melakukan programming dan melakukan testing hasil programnya”.
b. Web browser
Untuk mengakses aplikasi berbasis web, diperlukan sebuah web browser. Menurut Sibero (2013:12) dalam (Supriyanta & Nisa, 2015) mengemukakan bahwa “WebBrowser adalah aplikasi perangkat lunak yang digunakan untuk mengambil dan menyajikan sumber informasi web”.
2.1.2 Bahasa Pemrograman
Untuk membuat website yang dinamis dan mudah di upgrade setiap saat dari browser, dibutuhkan sebuah program yang mampu mengolah data dari komputer client atau dari komputer server itu sendiri sehingga mudah dan nyaman untuk disajikan di browser, untuk melakukan semua itu bisa menggunakan
pemrograman PHP (Perl Hypertext Preprocessor), HTML (Hyper Text Markup Language), Bootstrap, CSS (Cascading Style Sheet), Jquery, Javascript dan Notepad++.
1. PHP (Perl Hypertext Preprocessor)
Menurut Hidayatullah dan Kawistara (2014:231) dalam (Fridayanthie & Mahdiati, 2016) menyatakan bahwa:
PHP singkatan dari Perl Hypertext Preprocessor yaitu bahasa pemrograman web server-side yang bersifat open source. PHP merupakan script yang berintergrasi dengan HTML dan berada pada server (server side HTML embedded scripting). PHP adalah script yang digunakan untuk membuat halaman web dinamis. Dinamis berarti halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh client. Mekanisme ini ,menyebabkan informasi yang diterima client selalu yang terbaru/up to date. Semua script PHP dieksekusi pada server dimana script tersebut dijalankan.
2. HTML (Hyper Text Markup Language)
Menurut Hidayatullah dan Kawistara (2014:13) dalam (Fridayanthie & Mahdiati, 2016) mengemukakan bahwa:
Hyper Text Markup Language atau HTML adalah bahasa standar yang digunakan untuk menampilkan halaman web. Yang bisa dilakukan HTML yaitu: mengatur tampilan dari halaman web dan isinya, membuat table dalam halaman web, mempublikasikan halaman web secara online, membuat form yang bisa digunakan untuk menangani registrasi dan transaksi via web, menambahkan objek-objek seperti citra, audio, video, animasi, java aplet dalam halaman web, serta menampilkan area gambar (canvas) di browser. 3. Bootstrap
Menurut Slamet Riyanto (2014:18) dalam (Ana & Tatang, 2017) yaitu:
Bootstrap adalah kumpulan alat gratis untuk membuat website dan aplikasi web. Bootstrap berisi HTML dan CSS berbasis desain template untuk tipografi, bentuk, tombol, navigasi, dan komponen antarmuka lainnya, serta opsional ekstensi JavaScript. Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di twitter sebagai kerangka untuk mendorong konsistensi di alat internal
4. Cascading Style Sheet (CSS)
Menurut Kadir (2013:138) dalam (Supriyanta & Nisa, 2015) “Cascading Style Sheets (CSS) adalah skrip yang ditujukan secara khusus untuk mengatur tampilan aplikasi web”.
5. Jquery
Menurut Hidayatullah dan Kawistara (2014:421) dalam (Fridayanthie & Mahdiati, 2016) “JQuery adalah suatu library JavaScript yang akan menjadikan web lebih bagus dalam hal user interface, lebih stabil, dan dapat mempercepat waktu kinerja dalam pembuatan web hanya perlu memanggil fungsinya saja tanpa harus membuat dari awal”.
6. Javascript
Menurut Kadir (2013:58) dalam (Supriyanta & Nisa, 2015) “Java script adalah bahasa skrip yang digunakan untuk mengontrol tindakan-tindakan yang diperlukan di halaman web”.
7. Notepad++
Menurut (Palevi & Krisnawati, 2013) yaitu:
Notepad++ adalah sebuah aplikasi text editor yang bersifat gratis. Notepad menitikberatkan kegunaan aplikasi untuk editing text dalam waktu yang cepat dan praktis. Notepad++ mendukung banyak format bahasa pemrograman seperti PHP, HTML, JavaScript dan CSS. Aplikasi ini dapat diunduh secara bebas di alamat “notepad-plus-plus.org”.
2.1.3 Basis Data
Menurut Rosa dan Shalahuddin (2013) dalam (Mubarok & Hadianti, 2016) “Sistem Basis Data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan”.
Salah satu aplikasi basis data yaitu MySQL.
Menurut Bondan Arum K., (2014) dalam (Maudi, Nugraha, & Sasmito, 2014) menyimpulkan bahwa:
MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQLadalah implementasi dari manajemen basis data relasional (RDBMS). Pada saat ini MySQL merupakan basis data server yang sangat terkenal di dunia, semua itu karena bahasa dasar
yang digunakan untuk mengakses basis data yaitu SQL (Structure Query Language). Dengan menggunakan SQL, proses pengaksesan basis data lebih user-friendly dibandingkan dengan yang lain, misalnya dBAse atau clipper karena mereka masih menggunakan perintah-perintah pemrograman murni.
Menurut (Eri Mardiani dan Nur Rahmansyah, 2016:26) dalam (Ana & Tatang, 2017) yaitu:
SQL merupakan kependekan dari kata Structured Query Language. SQL merupakan bahasa permintaan yang melekat pada suatu database atau SMBD tertentu. Dengan kata lain, SQL adalah perintah atau bahasa yang melekat didalam SMBD, seperti MySQL Server, MsQL, PostgreSQL, Interbase dan Oracle”.
Untuk mengelola basis data dalam MySQL salah satunya dengan PHPMyAdmin. Menurut Rahman (2013:21) dalam (Supriyanta & Nisa, 2015) “PHPMyAdmin adalah sebuah software berbasis pemrograman PHP yang dipergunakan sebagai administrator MySQL melalui browser (web) yang digunakan untuk managementdatabase”.
2.1.4 Model Pengembangan Perangkat Lunak
Model pengembangan perangkat lunak yang penulis gunakan dalam penyusunan laporan Tugas Akhir ini menggunakan model waterfall.
Menurut Rosa dan Shalahuddin (2014:28) dalam (Prayitno & Safitri, 2015) “Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisi, desain, pengkodean, pengujian, dan tahap pendukung (Support)”. Langkah-langkah yang penting dalam model ini adalah sebagai berikut:
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.
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 prosuder pengodean. 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 untuk didokumentasikan.
3. Pembuatan kode program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari tahap ini adalah program computer sesuai desain yang telah dibuat pada tahap desain.
4. Pengujian
Pengujian focus pada perangkat lunak secara dari segi lojik dan fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai dengan yang diinginkan.
5. Pendukung (support) atau pemeliharaan (maintenance)
Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena
adanya kesalahn yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi dengan lingkungan baru. 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.
Sumber: Rossa dan Shalahuddin (2014:29)
Gambar II.1. Ilustrasi Model Waterfall
2.2 Teori Pendukung 2.2.1 Struktur Navigasi
Menurut Ardiansyah (2016:61) dalam (Imaniawan & Wati, 2017) “Struktur Navigasi dapat diartikan sebagai alur dari suatu program yang menggambarkan rancangan hubungan antara area yang berbeda sehingga memudahkan proses pengorganisasian seluruh elemen-elemen website”.
Macam-macam struktur navigasi pada website: 1. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut, yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada sruktur
jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.
Gambar II.2. Struktur Navigasi Linier 2. Struktur Navigasi Non-Linier
Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan dari struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat pada struktur nonlinier ini berbeda dengan percabangan pada struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave Page.
Gambar II.3. Struktur Navigasi Non-Linier 3. Struktur Navigasi Hirarki
Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama pertama), halaman utama ini mempunyai halaman percabangan yang disebut Slave Page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama Master Page (halaman utama
kedua), dan seterusnya. Pada struktur navigasi ini tidak diperkenankan adanya tampilan secara linier.
Gambar II.4. Struktur Navigasi Hirarki 4. Struktur Navigasi Campuran
Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa disebut dengan struktur navigasi bebas. Struktur navigasi ini banyak digunakan dalam pembuatan website karena struktur ini dapat digunakan dalam pembuatan website sehingga dapat memberikan ke-interaksian yang lebih tinggi.
Gambar II.5. Struktur Navigasi Campuran
2.2.2 ERD (Entity Relationship Diagram)
Menurut (Rossa dan Shalahuddin, 2014:50) dalam (Susanti, Junianto, & Rachman, 2017) menyimpulkan bahwa:
ERD digunakan Untuk pemodelan basis data relasional. ERD tidak digunakan untuk penyimpanan basis data yang penyimpanan basis data yang menggunakan OODBMS (Object Oriented Database management System). ERD merupakan suatu model atau teknik pendekatan yang
dapat menyatakan suatu gambaran hubungan entity didalam sebuah sistem, dimana hubungan tersebut dinyatakan sebagai to-one, one-to-many, many-to-one dan many-to-many.
Untuk membuat kardinalitas diperlukan LRS. Menurut Wulandari (2013:17) dalam (Sumirat & Jakaria, 2017) “Logical Record Structure dibentuk dengan nomor dari tipe record.Beberapa tipe record digambarkan oleh kotak empat persegi panjang dengan nama yang unik”.
LRS mempunyai derajat relationship yang digunakan untuk menunjukan banyaknya himpunan yang saling berelasi. Menurut Jatnika (2013:64) dalam (Saifudin & Maharani, 2017) menjelaskan bahwa “Derajat Relationship adalah jumlah entity yang berpartisipasi dalam suatu relationship”.
Ada tiga derajat relationship menurut Jatnika (2013:64) dalam (Saifudin & Maharani, 2017), diantaranya:
a. Unary Degree (Derajat Satu)
Sumber : Jatnika (2013:64)
Gambar II. 6 Contoh Unary Degree b. Binary Degree (Derajat Dua)
Sumber : Jatnika (2013:64)
c. Ternary Degree (Derajat Tiga)
Sumber : Jatnika (2013: 64)
Gambar II. 8 Contoh Ternary Degree
2.2.3 Implementasi dan Pengujian Web
Sebuah sistem atau aplikasi perangkat lunak harus bebas dari error atau kesalahan, untuk itu perlu adanya tahapan dalam pengujian untuk mengetahui beberapa kekurangan atau kesalahan yang ada. Sebelum sistem perangkat lunak diterapkan atau digunakan.
Menurut Rosa dan Shalahuddin (2014:275-276) dalam (Fridayanthie & Mahdiati, 2016) “Black-box testing adalah perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program.”
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 untuk kasus proses login maka kasus uji yang dibuat adalah:
1. Jika user memasukkan nama pemakai (username) dan kata sandi (password) yang benar.
2. Jika user memasukkan nama pemakai (username) dan kata sandi (password) yang salah, misalnya nama pemakai benar tapi kata sandi salah, atau sebaliknya, atau keduanya salah.
