7 2.1. Konsep Dasar Web
A. Pengertian Web
Menurut Ardhana (2012:1) mengemukakan bahwa:
“World Wide Web atau lebih sering dikenal sebagai web adalah suatu layanan sajian informasi yang menggunakan konsep hyperlink (tautan), yang memudahkan surfer (sebutan para pemakai komputer yang melakukan browsing atau penelusuran informasi melalui internet). Keistimewaan inilah yang telah menjadikan Web sebagai service yang paling cepat pertumbuhannya”.
Pada dasarnya web mengizinkan pemberian highlight (penyorotan/penggaris bawahan) pada kata-kata atau gambar dalam sebuah dokumen untuk menggabungkan atau menunjuk ke media lain seperti dokumen, frase, movie clip, atau file suara. Web dapat menghubungkan dari sembarang tempat dalam sebuah dokumen atau gambar ke sembarang tempat di dokumen lain (Ardhana, 2012:1).
Beberapa pembahasan yang terkait dengan teknologi website diantaranya yaitu :
1. Internet
Menurut Hidayatullah dan Kawistara (2014:1) “Internet adalah jaringan global yang menghubungkan komputer-komputer di seluruh dunia. Dengan Internet, sebuah komputer bisa mengakses data yang terdapat pada komputer lain di benua yang berbeda”.
Internet melibatkan berbagai jenis komputer serta topology jaringan yang berbeda. Dalam mengatur integrasi dan komunikasi jaringan, digunakan standar protokol internet yaitu TCP/IP. TCP bertugas untuk memastikan bahwa semua hubungan bekerja dengan baik, sedangkan IP bertugas untuk menstransmisikan paket data dari satu komputer ke komputer lainnya (Hidayatullah dan Kawistara, 2014:1).
2. Web Server
Menurut Ardhana (2015:2) “Web server adalah sebuah perangkat server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umunya berbentuk dokumen HTML”.
Salah satu contoh dari web server adalah Apache. Apache (Apache Web Server – The HTTP Web Server) merupakan web server yang paling banyak dipergunakan di internet (Ardhana, 2015:2).
3. Web Browser
Menurut Sibero (2011:11) “Web Browser adalah software yang digunakan untuk menampilkan informasi dari web server. Software ini kini telah dikembangkan dengan menggunakan user interface grafis, sehingga pemakai dapat dengan melakukan ‘point dan click’ untuk pindah antar dokumen”.
Ada berbagai macam perangkat web browser yang kini digunakan seperti Mozilla Firefox, Google Chrome, Opera, Safari, Internet Explorer dan lain sebagainya. Web browser lebih sering diartikan sebagai mesin pencari seperti Google padahal sebenarnya web browser berbeda dengan mesin pencari atau
search engine dimana web browser berdiri sendiri sementara search engine biasanya merupakan bagian dari suatu web browser (Sibero, 2011:11).
B. Bahasa Pemrograman
Bahasa pemrograman yang terkait dengan teknologi pengembangan website beberapa diantaranya adalah:
a. PHP
Menurut Sibero (2011:49), “PHP adalah suatu bahasa dengan hak cipta terbuka atau yang dikenal juga dengan istilah OpenSource, yaitu pengguna dapat mengembangkan kode-kode fungsi PHP sesuai dengan kebutuhannya”.
b. HTML
Menurut Madcoms (2016:15), “Hypertext Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan formating hypertext sederhana yan ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolahan kata dan disimpan dalan format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.
Segala ketentuan dalam pemrograman HTML diatur oleh W3C (World Wide Web Consortium). W3C mendefinisikan HTML sebagai aplikasi dari SGML (Standard Generalized Markup Languange). SGML adalah bahasa untuk mendefinisikan bahasa lain dengan menemukan struktur file dalam
bentuk DTD (Document Type Definition), yang merupakan sintaks dari berbagai elemen dan bahasa yang salah satunya adalah HTML.
c. Javascript
Menurut Sibero (2013:150), “Javascript adalah bahasa skrip (scripting language), yaitu kumpulan instruksi atau perintah yang digunakan untuk mengendalikan beberapa bagian dari sistem operasi”.
d. Jquery
Menurut Hakim (2014:03), “JQuery adalah javascript library, kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript”. Secara standar, apabila kita membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami.
e. CSS
Menurut Madcoms (2016:46), “CSS (Cascading Style Sheet) adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format/tampilan suatu halamn HTML.
Dengan CSS maka akan memungkinkan untuk mendesain (Style) tampilan dokumen (PHP dan HTML) dengan memisahkan isi dan dokumen HTML dengan kode untuk menampilkan (CSS). Di dalam dunia desain web, layout atau mengatur letak web, format huruf, dan lainnya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan dapat jadi yang paling lama dibanding dengan bagian desain web lainnya. Karena jika membuat layout salah, maka web juga salah diterjemahkan oleh browser. Hal itu juga dapat
disebabkan karena setiap browser memiliki dukungan bahasa (CSS) yang beda.”
Dalam pengembangan website selain menggunakan beberapa bahasa pemrograman, dipergunakan juga beberapa tools atau software pendukung untuk membantu dalam proses pembuatan program, beberapa diantaranya adalah:
a. PhpMyAdmin
Menurut Sadeli (2014:10), “PhpMyAdmin adalah sebuah software yang berbentuk seperti halaman situs yang terdapat pada web server”. Fungsi dari halaman ini adalah sebegai pengendali database MySQL sehingga pengguna MySQL tidak perlu repot untuk menggunakan perintah-perintah SQL. Karena dengan adanya halaman ini semua hal tersebut dapat dilakukan dengan meng-klik menu fungsi yang ada pada halaman PhpMyAdmin.”
b. Macromedia Dreamweaver CS5
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 professional untuk mendesain web secara visual. Aplikasi ini juga bisa 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 website dan dapat melihat hasil desainnya secara langsung.
Dengan kemampuan fasilitas yang optimal dalam jendela Design akan memberikan kemudahan untuk mendesain web meskipun untuk para 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 di dalamnya.”
c. XAMPP
Menurut Wicaksono (2008:7) mendefinisikan bahwa “XAMPP adalah sebuah software yang berfungsi untuk menjalankan website berbasis PHP dan menggunakan pengolahan data MyQSL di komputer lokal”. XAMPP juga dapat disebut sebuah CPanel Server Virtual, yang dapat membantu anda melakukan preview sehingga dapat memodifikasi website tanpa harus online atau terakses dengan internet.
C. Basis Data (Database)
Menurut Saputra (2011:1) “Database atau memiliki istilah lain Basis Data merupakan suatu kumpulan data yang berhubungan dan berkaitan dengan subjek tertentu pada tujuan tertentu pula. Hubungan antardata ini dapat dilihat oleh adanya field ataupun kolom”.
Database pasti berhubungan dengan data dan informasi. Data merupakan kenyataan yang menggambarkan suatu kejadian-kejadian dan kesatuan nyata. Sedangkan Informasi merupakan suatu data yang telah diolah dan disusun sedemikian rupa sehingga akan memiliki nilai, dan tentunya harus memberikan manfaat bagi yang menggunakannya (Saputra, 2011:1).
D. Model Pengembangan Perangkat Lunak
Salah satu model pengembangan perangkat lunak adalah Waterfall. Menurut Sukamto dan Shalahudin (2013:29) “model SDLC air terjun (Waterfall) sering juga disebut model sekuensial linier (sequential linier) atau alur hidup klasik (classic life cycle)”. Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain, pengodean, pengujian, dan tahap pendukung (support).
Sumber : Sukamto dan Shalahudin (2013:29) Gambar II.1. Ilustrasi Model Waterfall
Tahapan metode waterfall menurut Sukamto dan Shalahudin (2013:29) adalah:
1. Analisis Kebutuhan Perangkat Lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang di butuhkan oleh user. Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu untuk didokumentasikan. 2. Desain
Desain perangkat lunak adalah proses Multi langkah yang focus pada desain pembuatan program perangkat lunak termasuk struktur data, arsitektur perangkat lunak, representasi antarmuka, dan prosedur
pengodean. Tahap ini mentranlasi 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 di kondisikan.
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 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.
2.2. Teori Pendukung A. Struktur Navigasi
Menurut Binanto (2010:268) “Struktur navigasi adalah susunan menu atau hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan link atau navigasi tiap halaman pada suatu situs web”.
Struktur navigasi dapat digolongkan menurut kebutuhan akan objek, kemudahan pemakain, keinteraktifitasannya dan kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu situs web. Bentuk dasar struktur navigasi adalah sebagai berikut :
pengguna akan melakukan navigasi secara berurutan, dari frame atu byte informasi yang satu ke yang lainnya, seperti yang terlibat pada gambar :
Sumber : Binanto (2010:269)
Gambar II.2. Struktur Navigasi Linier
2. Hierarkis
Struktur dasar ini disebut struktur “linier dengan percabangan” karena pengguna melakukan navigasi di sepanjang cabang pohon struktur yang terbentuk oleh logika isi, seperti yang terlihat pada gambar berikut:
Sumber : Binanto (2010:269)
Gambar II.3.
Struktur Navigasi Hierarkis 3. Nonlinier
Pengguna akan melakukan navigasi dengan bebas melalui isi proyek dengan tidak terkait dengan jalur yang sudah ditentukan sebelumnya, seperti yang terlihat pada gambar berikut :
Sumber : Binanto (2010:270)
Gambar II.4.
Struktur Navigasi Nonlinier
4. Komposit
Pengguna akan melakukan navigasi dengan bebas (secara non-linier), tetapi terkadang dibatasi presentasi liniear film atau informasi penting dan/atau pada data yang paling terorganisasi secara logis pada suatu hierarki, seperti terlihat pada gambar berikut :
Sumber : Binanto (2010:270)
Gambar II.5.
B. Entity Relationship Diagram (ERD)
Menurut Ladjamudin (2013:142) “ERD adalah suatu model jaringan yang menggunakan susunan data yang disimpan dalam sistem secara abstrak”.
Diagram yang mempunyai hubungan entitas atau yang lebih dikenal dengan sebutan E-R Diagram, adalah notasi grafik dari sebuah model data atau sebuah model jaringan yang menjelaskan tentang data yang tersimpan (storage data) dalam sistem secara abstrak. Diagram hubungan entitas tidak menyatakan bagaimana memanfaatkakn data, mengubah data, dan menghapus data (Ladjamudin, 2013:142).
Komponen-komponen yang ada pada Entity Relationship Diagram (ERD) adalah sebagai berikut :
1. Entity
Pada E-R Diagram, entity digambarkan dengan sebuah bentuk persegi panjang. Entity adalah sesuatu apa saja yang ada di dalam sistem, nyata maupun abstrak dimana data tersimpan atau dimana terdapat data. Entitas diberi nama dengan kata benda dan dapat dikelompokkan dalam empat jenis nama, yaitu orang, benda, lokasi, kejadian (terdapat unsur waktu di dalamnya).
2. Relationship
Pada E-R Diagram, relationship dapat digambarkan dengan sebuah bentuk belah ketupat. Relationship adalah hubungan alamiah yang terjadi antara entitas. Pada umumnya penghubung (relationship) diberi nama dengan kata kerja dasar, sehingga memudahkan untuk melakukan pembacaan relasinya (bisa dengan kalimat aktif atau kalimat pasif).
3. Derajat Relationship (Relationship Degree)
Relationship Degree atau Derajat Relationship adalah jumlah entitas yang berpartisipasi dalam satu relationship. Derajat relationship yang sering dipakai dalam ERD :
a. Unary Relationship
Unary Relationship adalah model relationship yang terjadi diantara entity yang berasal dari entity set yang sama. Sering juga disebut sebagai recursive relationship atau reflective relationship.
b. Binary Relationship
Binary Relationship adalah model relationship antara instance-instance dari suatu tipe entitas (dua entity yang berasal dari entity yang sama). Relationship ini paling umum digunakan dalam pembuatan model data. c. Ternary Relationship
Ternary Relationship merupakan relationship antara instance-instance dari tiga tipe entitas secara sepihak.
d. Atribut
Secara umum atribut adalah sifat atau karakteristik dari tipa entitas maupun tiap relationship. Maksudnya atribut adalah sesuatu yang menjelaskan apa sebenarnya yang dimaksud entitas maupun relationship, sehingga sering dikatakan atribut adalah elemen dari setiap entitas dan relationship.
Kardinalitas relasi menunjukkan jumlah maksimum tupel yang dapat berelasi dengan entitas pada entitas yang lain. Macam-macam kardinalitas relasi, yaitu:
a) One to One
Tingkat hubungan satu ke satu, dinyatakan dengan satu kejadian pada entitas pertama, hanya mempunyai satu hubungan dengan satu kejadian pada entitas yang kedua dan sebaliknya.
b) One to Many atau Many to One
Tingkat hubungan satu ke banyak adalah sama dengan banyak ke satu. Tergantung dari arah mana hubungan tersebut dilihat. Untuk satu kejadian pada 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.
c) One to Many
Yang berarti satu tupelo pada entitas A dapat berhubungan dengan banyak tupel pada entitas B. Tetapi tidak sebaliknya, dimana setiap tupel pada entitas B, berhubungan dengan paling banyak satu tupel pada entitas A.
d) Many to One
Yang berarti setiap tupelo pada entitas A dapat berhubungan dengan paling banyak satu tupel pada entitas B. tetapi tidak sebaliknya, dimana setiap tupelpada entitas B berhubungan dengan paling banyak tupel pada entitas A.
e) Many to Many
Tingkat hubungan paling banyak ke banyak terjadi jika tiap kejadian pada sebuah entitas akan mempunyai banyak hubungan dengan kejadian pada entitas lainnya. Baik dilihat dari sisi entitas yang pertama, maupun dilihat dari sisi yang kedua.
C. LRS (Logical Record Structure)
Menurut Wulandari (2013:15), “Logical Record Structured dibentuk dengan nomor tipe record digambarkan oleh kotak empat persegi panjang dan dengan nama unik. Beda LRS dengan diagram entity relationship diagram nama tipe record berada diluar kotak field tipe record ditempatkan. LRS Terdiri dari link-link tentara tipe record. Link ini menunjukkan arah dari satu tipe record lainnya. Banyak Link dari LRS yang diberi tanda field-field yang kelihatan pada kedua link tipe record. Penggambaran LRS mulai dengan menggunakan model yang dimengerti. Dua metode yang digunakan, mulai dengan hubungan kedua model yang dapat dikonversikan ke LRS. Metode lain dimulai dengan metode Entity Relationship Diagram dan langsung dikonversikan ke LRS.
D. Pengujian Web
Menurut Rizky (2011:237), Testing adalah sebuah proses yang dijawantahkan sebagai siklus hidup dan merupakan bagian dari proses rekayasa perangkat lunak secara terintegrasi demi memastikan kualitas dari perangkat lunak serta memenuhi kebutuhan teknis yang disepakati dari awal.
Menurut Rizky (2011:264), “Blackbox testing adalah tipe testing yang memperlakukan perangkat lunak yang tidak diketahui kinerja internalnya”. Sehingga para tester memandang perangkat lunak seperti layaknya sebuah “kotak hitam” yang tidak penting dilihat isinya, tapi cukup dikenal proses testing dibagian luar.
Jenis testing ini hanya memandang perangkat lunak dari sisi spesifikasi dan kebutuhan yang telah didefinisikan pada saat awal perancangan. Sebagai contoh, jika terdapat sebuah perangkat lunak yang merupakan sebuah sistem informasi inventory di sebuah perusahaan. Maka pada jenis whitebox testing, perangkat lunak tersebut akan berusaha listing programnya untuk kemudian dites menggunakan teknik – teknik yang telah dijelaskan sebelumnya. Sedangkan pada jenis blackbox testing, perangkat lunak tersebut akan di eksekusi kemudian berusaha dites apakah telah memenuhi kebutuhan pengguna yang didefinisikan pada saat awal tanpa harus membongkar listing programnya.
Menurut Rizky (2011:264), beberapa keuntungan yang diperoleh dari jenis testing ini antara lain:
a. Anggota tim tester tidak harus dari seseorang yang memiliki kemampuan teknis dibidang pemrograman.
b. Kesalahan dari perangkat lunak ataupun bug sering kali ditemukan oleh komponen tester yang berasal dari pengguna.
c. Hasil dari blackbox testing dapat memperjelas kontradiksi ataupun keracunan yang mungkin timbul dari eksekusi sebuah perangkat lunak.
d. Proses testing dapat dilakukan lebih cepat dibandingkan whitebox testing.
Menurut Rizky (2011:265), beberapa teknik testing yang tergolong dalam tipe ini antara lain:
1. Equivalence Partitioning
Pada teknik ini, tiap inputan data dikelompokan ke dalam grup tertentu, yang kemudian dibandingkan output nya.
2. Boundary Value Analysis
Merupakan teknik yang sangat umum digunakan pada saat awal dari sebuah perangkat lunak selesai dikerjakan. Pada teknik ini, dilakukan inputan yang melebihi dari batasan sebuah data. Sebagai contoh, untuk sebuah inputan harga barang, maka dapat dilakukan testing dengan menggunakan angka negatif (yang tidak diperbolehkan dalam sebuah harga). Jika perangkat lunak berhasil mengatasi inputan yang salah tersebut, maka dapat dikatakan teknik ini telah selesai dilakukan.
3. Cause Effect Graph
Dalam teknik ini, dilakukan proses testing yang menghubungkan sebab dari sebuah inputan dan akibatnya pada output yang dihasilkan. Sebagai contoh, pada sebuah inputan nilai siswa, jika diinputan angka 100, maka output nilai huruf yang dikeluarkan jika ternyata inputan nilai nilai adalah 67,5.
Seperti namanya, teknik ini berusaha melakukan proses inputan data dengan menggunakan nilai acak. Dari hasil inputan tersebut kemudian dibuat sebuah tabel yang menyatakan validasi dari output yang dihasilkan.
5. Feature Test
Pada teknik ini, dilakukan proses testing terhadap spesifikasi dari perangkat lunak yang telah selesai dikerjakan.
