7
LANDASAN TEORI
2.1. Konsep Dasar Web
Menurut Janner Simarmata (2013:50) "secara teknis web adalah sebuah sistem yang disajikan dengan teks, gambar, suara dan lain-lain yang tersimpan dalam sebuah server web internet yang disajikan dalam bentuk hypertext".
Informasi web dalam bentuk teks umumnya ditulis dalam formast HTML (Hypertext Markup Language). Informasi lainnya disajikan dalam bentuk grafis (dalam format JPG, PNG, GIF), suara (dalam format AU, WAV), dan objek multimedia lainnya (seperti MDI, Shockwave, Quicktime, Movie, 3D World ).
A. Website
Menurut Betha Sidik & Husni Iskandar Pohan (2014:1) “World Wide Web (WWW), lebih dikenal dengan website, merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet”.
Jenis-jenis website berdasarkan sifat atau stylenya.
1. Website dinamis
Merupakan sebuah web yang menyediakan konten atau isi yang selalu berubah–ubah setiap saat. Bahasa pemrograman yang digunakan antara lain php,asp, .net dan pemanfatakan database mysql atau mssql.
2. Website statis
Merupakan web yang kontennya jarang diubah. Bahasa pemrograman yang digunakan adalah html dan belum memanfaatkan database.
B. Internet
Menurut Kadir (2014:1) “internet merupakan contoh jaringan terbesar yang menghubungkan jutaan komputer yang tersebar di seluruh penjuru dunia dan tidak terikat pada satu organisasi pun.
Fasilitas yang tersedia di internet meliputi : 1. HTTP (Hypertext Transfer Protocol)
Merupakan aturan pengiriman informasi berupa hypertext (teks pada komputer yang memungkinkan user saling mengirimkan informasi).
2. Aplikasi Web
Aplikasi web merupakan halaman dinamis yang mengizinkan interaksi dengan user. User melakukan sesuatu interaksi dengan aplikasi web misalnya, user mengklik sebuah tombol dan warna latar belakang web berubah.
3. Web server
Web server merupakan sesuatu perangkat lunak yang dijalankan pada komputer server dan berfungsi agar dokumen web yang disimpan di server dapat diakses oleh pemakai (user) internet seperti misalnya xampp.
4. Situs Web/Homepage
Home page merupakan halaman awal dari sebuah situs web.
5. Web Hosting
Layanan web hosting mengizinkan perorangan atau organisasi membuat sebuah website yang meletakan semua file websitenya dan menyediakan konektivitas dengan internet agar dapat diakses melalui internet
.
6. HTML (Hypertext Markup Language)
HTML adalah suatu format data yang digunakan untuk membuat dokumen hypertext (teks pada komputer yang memungkinkan user saling mengirimkan informasi), HTML memiliki tag-tag yang telah didefinisikan untuk membuat halaman web. Penulisan tag-tag HTML dapat menggunakan huruf besar atau huruf kecil, karena HTML tidak case sensitive (membedakan huruf besar dan huruf kecil memiliki maksud berbeda).
C. Basis Data
Menurut Shalahuddin & Rosa (2016:43) memberikan batasan bahwa
"Sistem basis data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan".
Pada intinya basis data adalah media untuk menyimpan data agar dapat diakses dengan mudah dan cepat.
1. Tipe Basis Data a. Tipe Data Numerik
Tipe data numerik dibedakan menjadi dua macam kelompok, tipe data integer dan tipe data floating point. Tipe data integer untuk data bilangan bulat, tipe data floating point untuk data bilangan desimal.
b. Tipe Data String
Pada tipe data ini dapat berisi nilai string (alpanumerik/karakter) dan numerik.
c. Tipe Data Date
Tipe data ini menyimpan informasi waktu, baik tanggal maupun jam
D. Adobe Dreamweaver CS6
Menurut Christianus Sigit Sulistya (2013:1) “Dreamweaver adalah sebuah editor profesional yang menggunakan HTML untuk mendesain web secara visual dan mengelola situs atau halaman web”.
Pada Dreamweaver CS6 terdapat beberapa kemampuan bukan hanya sebagai software untuk desain web saja tetapi juga untuk menyunting kode serta pembuatan aplikasi web dengan menggunakan berbagai bahasa pemrograman, banyak kelebihan dalam dreamweaver CS6, diantaranya :
1. Dapat dilihat tampilan website preview pada komputer, handphone, dan printer.
2. Membangun web dengan CSS diantaranya CSS Layout, CSS Panel, dan CSS Visualization.
3. Fasilitas lengkap pendukung CSS
Sumber: Christianus Sigit Sulistya (2013:2)
Gambar II.1. Tampilan halaman welcome screen dreamweaver CS6
a. Mengenalkan ruang kerja Adobe Dreamweaver CS6
Tampilan ruang kerja dari Adobe Dreamweaver CS6 seperti terlihat pada gambar dibawah ini :
Sumber: Christianus Sigit Sulistya (2013:3)
Gambar II.2. Tampilan lembar kerja Adobe Dreamweaver CS6
Dibawah ini adalah penjelasan dan gambar fitur-fitur yang tersedia pada Adobe Dreamweaver CS6, yaitu:
1) Document Toolbar
Document toolbar berisikan tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari jendela dokumen.
Sumber: Christianus Sigit Sulistya (2013:4)
Gambar II.3. Tampilan Document Toolbar
2) Insert Bar
Insert bar terdiri dari tombol-tombol untuk membuat dan menyisipkan objek seperti tabel, layer, dan gambar.
Coding Windows
Property Inspector
Insert Bar
Jendela Dokumen
Site Panel
Sumber: Christianus Sigit Sulistya (2013:6) Gambar II.4. Tampilan Insert Bar
3) Jendela Dokumen
Jendela dokumen merupakan bagian yang digunakan untuk mendesain halaman situs web.
Sumber: Christianus Sigit Sulistya (2013:7)
Gambar II.5. Tampilan Jendela Dokumen
4) Panel Group
Panel group adalah suatu kumpulan panel yang dikelompokkan bersama dibawah satu judul.
Sumber: Christianus Sigit Sulistya (2013:8) Gambar II.6. Tampilan Panel Group
5) Panel CSS
CSS merupakan pendukung HTML dalam mendesain web. Perintah- perintah yang sering digunakan dapat dikumpulkan dalam CSS sehingga
dapat digunakan kembali dalam mendesain web dan anda tidak perlu mengulang perintah dari awal.
Sumber: Elcom (2013:8-9)
Gambar II.7. Tampilan Panel CSS
6) Panel Files
Dalam Panel Files terdapat toolbar yang membantu anda dalam membengun web. Dalam panel ini, Anda dapat melihat deretan file-file yang ada dalam web anda dan menentukan lokasi dari situs yang anda buat.
Sumber: Christianus Sigit Sulistya (2013:9) Gambar II.8. Tampilan Panel Files 7) Panel Snippets
Panel snippets merupakan kode yang sering digunakan dan disisipkan pada dokumen. Anda dapat mengambil kode snappets built-in yang ada di dalam bagian snippet dengan cara menentukan terlebih dahulu kode apa yang akan disisipkan ke dalam dokumen seperti bila anda ingin membuat sebuah judul beserta menu, maka anda harus memilih header.
8) Tag Inspector
Dalam tag inspector, anda dapat melihat struktur hierarki tag dan atribut-atribut yang dapat ditambahkan atau di edit.
9) Tag Selector
Tag selector terdapat pada bagian bawah jendela dokumen atau pada bagian status bar. Fungsi dari tag selector adalah untuk menampilkan hierarki tag pada design view yang aktif.
Sumber: Christianus Sigit Sulistya (2013:10) Gambar II.9. Tampilan Tag Selector
10) Property Inspector
Property Inspector digunakan untuk melihat dan mengubah berbagai property objek dan teks yang terpilih.
Sumber: Christianus Sigit Sulistya (2013:11)
Gambar II.10. Tampilan Panel Property Inspector
E. XAMPP
Menurut Agus Hariyanto (2017:19) “XAMPP adalah singkatan dari Cross- Platform (X), Apache (A), MYSQL (M), PHP (P) dan Perl (P). Sesuai namanya, dalam XAMPP sudah memuat semua yang dibutuhkan dalam membangun sebuah apliaksi berbasis web dengan PHP dan database MYSQL”.
Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama Xampp merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman dinamis.
Saat ini telah hadir paket Xampp yang memadukan antara Apache-PHP dan MySQL dalam satu paket, seperti halnya PHPTriad. Hal yang lebih istimewa dari paket Xampp adalah :
1. Xampp dapat berjalan pada operating system Linux dan Windows. Selain itu, Xampp juga dapat berjalan di Manchitos.
2. Mudah bagi programmer apabila ingin berganti versi PHP, yaitu cukup dengan melakukan switch versi.
3. Mudah dan cepat dalam proses instalasi.
4. Tidak memakan banyak spesifikasi memori komputer.
5. Tidak banyak pilihan bahasa.
6. Pengaturan running aplikasi Xampp dapat diatur sesuai dengan keinginan pengguna.
F. PHP (Personal Home Page)
Menurut Agus Hariyanto (2017:12) “PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu, PHP masih bernama Form Interpreted (FI), yang wujudnya berupa skrip yang digunakan untuk mengolah data formulir dari web”.
G. MySQL
Menurut Agus Hariyanto (2017:65) “ MySQL merupakan salah satu database yang saat ini paling populer paling digunakan dalam lingkungan pengembangan aplikasi berbasis web. Selain kehandalannya, database MySQL juga merupakan database relasional yang memiliki kecepatan akses data yang cukup tinggi. Oleh karena database MySQL dan PHP bagaikan dua sisi mata uang yang tidak bisa dipisahkan”.
Sebagai software DBMS, MySQL memiliki fitur sebagai berikut:
1. Multiplatform
MySQL tersedia pada beberapa platform (Windows, Linux, Unix, dan lain- lain).
2. Andal, Cepat, dan mudah digunakan
MySQL tergolong sebagai database server (server yang melayani permintaan terhadap database) yang andal, dapat menangani database yang besar dengan kecepatan tinggi, mendukung banyak sekali fungsi untuk mengakses database, sekaligus mudah untuk digunakan. Berbagai tool pendukung juga tersedia, MySQL dapat menangani sebuah table yang berukuran dalam terabyte (1 terabyte = 1024 gigabyte). Namun, ukuran yang sesungguhnya dangat bergantung pada batasan sistem operasi.
3. Jamninan Keamanan Akses
MySQL mendukung pengamanan database dengan berbagai kriteria pengaksesannya. Sebagai gambaran, dimungkinkan untuk mengatur user tertentu agar bisa mengakses data yang bersifat rahasia (misalnya gaji pegawai), sedangkan user lain tidak boleh. MySQL juga mendukung konektivitas ke berbagai software. Sebagai contoh dengan menggunakan ODBC (Open Database Connectivity), database yang ditangani MySQL dapat diakses melalui program yang dibuat dengan visual Basis. MySQL juga mendukung program klien yang berbasis JAVA (Java Database Connectivity). MySQL juga bisa diakses melalui apliaksi berbasis web misalnya dengan menggunakan PHP.
4. Dukungan SQL
Seperti tersirat dalam namanya, MySQL mendukung perintah SQL (Structured Query Language). Sebagai diketahui, SQL merupakan standar dalam pengaksesan database relasional.
H. Jquery
Menurut Wardana (2016:30) “jQuery adalah sebuah pustaka JavaScript yang telah didesain untuk memudahkan pengguna dalam membuat client side scripting yang andal dan yang paling populer”.
Hal ini dikarenakan jquery memiliki beberapa keunggulan, diantaranya:
1. Mudah dioperasikan, karena hanya mengetikan beberapa baris kode saja, sehingga tidak perlu menuliskan program yang panjang.
2. Jquery dapat menyesuaikan style CSS dalam semua browser web, sehingga pengunjung dapat menikmati tampilan website anda yang bagus dari semua browser.
3. Menyediakan fasilitas untuk tampilan animasi seperti pada pembuatan animasi menggunakan flash.
4. Jquery merupakan Open Source, sehingga bebas dan gratis digunakan oleh siapa saja.
I. CSS (Cascading Style Sheet)
Menurut Suryana & Koesheryatin (2014:101) “CSS (Cascading Style Sheet) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letaknya, jenis huruf, warna dan semua yang berhubungan dengan tampilan. Pada umumnya CSS digunakan untuk menformat halaman web yang ditulis dengan HTML atau XHTML.
Jika anda memiliki banyak file HTML, anda hanya perlu satu file CSS, sehingga ketika anda mengganti jenis huruf pada file CSS tersebut akan berubah, karena CSS sendiri distandarisasi oleh W3c ( World Wide Web Consortium).
J. Metode Pengembangan Perangkat Lunak
Menurut Shalahuddin & Rosa (2016:28-30) menyimpulkan bahwa : Model SDLC air terjun (waterfall) sering juga disebut model sekuensial linier (sequential linear) atau hidup klasik (classic life cycle). Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau berurutan dimulai dari analisis, desain, pengkodean, pengujian dan tahap pendukung (support).
Berikut adalah gambar model air terjun:
Sumber : (Destiana & Fajrin, 2014)
Gambar II.11. Ilustrasi Model Waterfall 1. Analisa kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk mespesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat
lunak seperti apa yang dibutuhkan oleh user, seperti : data produk, data customer, data transaksi, data admin. 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, refresentasi antarmuka, dan prosedur pengodean. Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisi
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 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 kesalahan 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 analisi
spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.
Dari kenyataan yang terjadi sangat jarang model air terjun dapat dilakukan sesuai alurnya karena sebab berikut :
1. Perubahan spesifikasi perangkat lunak terjadi ditengah alur pengembangan.
2. Sangat sulit bagi pelanggan untuk mendefinisikan semua spesifikasi dialur awal pengembangan. Pelanggan sering kali butuh contoh (prototype) untuk menjabarkan spesifikasi kebutuhan sistem lebih lanjut.
3. Pelanggan tidak mungkin bersabar mengakomodasi perubahan-perubahan yang diperlukan diakhir alur pengembangan.
Dengan berbagai kelemahan yang dimiliki model air terjun tapi model ini telah menjadi dasar dari model-model yang lain dalam melakukan perbaikan model pengembangan perangkat lunak. Hal positif dari model air terjun adalah struktur tahap pengembangan sistem jelas, dokumentasi dihasilkan disetiap tahap pengembangan, dan sebuah tahap dijalankan setiap tahap sebelumnya selesai dijalankan (tidak ada tumpang tindih pelaksanaan tahap).
2.2. Teori Pendukung A. Struktur Navigasi
Menurut Sutopo (2013:6) “Dalam pengembangan web, terdapat beberapa model navigasi dasar, yang harus dikenal dengan baik oleh desainer, karena setiap model navigasi dapat memberikan solusi untuk kebutuhan yang berbeda”.
Ada empat macam bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan website, yaitu :
1. Struktur Navigasi Linier
Struktur navigasi linier yaitu struktur yang mempunyai satu rangkaian cerita 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.
2. Struktur Navigasi Non-linier
Struktur navigasi non-linier merupakan pengembangan dari struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan pada struktur non-linier ini berbeda dengan percabangan pada struktur hirarki, karena pada percabangan non-linier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave Page.
3. Struktur Navigasi Hierarchical
Struktur navigasi hierarchical adalah suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Dimana tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama pertama) yang memiliki halaman percabangan yaitu Slave Page (halaman pendukung). Jika salah satu halaman pendukung diaktifkan, maka tampilannya disebut Master Page (halaman utama kedua), dan seterusnya.
Pada struktur navigasi ini tidak diperbolehkan adanya tampilan secara linier.
4. Struktur Navigasi Composite (campuran)
Struktur navigasi composite (campuran) disebut juga struktur navigasi bebas yang merupakan gabungan dari ketiga struktur yang ada. Struktur navigasi
ini biasa digunakan dalam pembuatan multimedia karena dapat memberikan keinteraksian yang lebih tinggi.
Contoh Struktur Navigasi :
Sumber : (Sintawati & Sari, 2017)
Gambar II.12. Contoh Struktur Navigasi B. ERD (Entity Relationship Diagram)
Menurut Shalahuddin & Rosa (2016:50-51) manyatakan bahwa “ERD digunakan untuk pemodelan basis data relasional. Sehingga jika penyimpanan basis data menggunakan OODBMS maka perancangan basis data tidak perlu menggunakan ERD”.
ERD memiliki beberapa aliran notasi seperti notasi Chen (dikembangkan oleh Peter Chen), Barker (dikembangkan oleh Richard Barker, Ian Palmer, Harry Ellis), notasi Crow’s Foot, dan beberapa notasi lain. Namun yang banyak digunakan adalah notasi dari Chen.
Berikut ini adalah simbol-simbol yang digunakan pada ERD dengan notasi Chen:
1. Komponen Entity Relationship Diagram (ERD) a. Entity
Entity adalah benda yang yang memiliki identifikasi yang berbeda.
Entity dapat digambarkan sebagai persegi yang berisi nama dari entity tersebut.
b. Relationship
Relationship adalah hubungan antara entity. Entity merupakan pengikut dari relationship. Relationship dapat digambarkan dalam bentuk belah ketupat yang mana berisi nama dari relasi tersebut.
Relationship dapat berupa hubungan one –to-one , one-to-many, atau many-to-many.
1) Hubungan one-to-one (1 atau 1...1)
Hubungan dimana setiap entity yang ada hanya dapat mempunyai maksimal (satu) hubungan dengan entity yang lain.
2) Hubungan one-to-many (1…*)
Hubungan dimana setiap entity yang dapat mempunyai satu atau lebih dari satu hubungan dengan entity yang lain.
3) Hubungan many-to-many (*…*)
Hubungan dimana setiap entity dapat mempunyai lebih dari satu relasi dengan entity lainnya.
c. Property atau atribut
Property atau atribut adalah sifat karateristik deskriptif suatu entitas.
Setiap property atau atribut mempunyai key diantranya primary key
(PK) dan foreign key (FK), yang bertujuan untuk menunjukkan hubungan antara kedua entitas.
Contoh ERD :
Sumber : (Rangkuti & Iskandar, 2016)
Gambar II.13. Contoh Entity Relationtship Diagram C. LRS (Logical Record Structure)
Menurut Saputra dan Agustiin (2013:59) “LRS (Logical Record Structure) adalah representasi dari struktur record-record pada tabel-tabel yang terbentuk dari hasil antar himpunan entitas”.
Berikut penjelasan skema LRS (Logical Record Structure) berdasarkan diagram ERD:
1. Jika relasinya satu ke satu, maka foreign key diletakkan pada salah satu dari dua entitas yang ada atau menyatukan kedua entitas tersebut.
2. Jika relasinya satu ke banyak, maka foreign key diletakkan pada entitas many.
3. Jika relasinya banyak ke banyak, maka dibuat "file konektor" yang berisi dua foreign key yang berasal dari kedua entitas.
Membentuk beberapa tabel berdasarkan primary key yang terpilih dengan syarat sudah mencapai aturan normalisasi sekurang-kurangnya 3NF dari skema DB atau LRS yang ada.
Contoh LRS :
Sumber : (Rangkuti & Iskandar, 2016)
Gambar II.14. Contoh Logical Record Structure
D. Pengujian Web
Menurut Shalahuddin & Rosa (2016:275) menyimpulkan bahwa: “Black Box Testing adalah 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.”
Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat mencoba semua fungsi dengan perangkat lunak apakah sesuai dengan spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian kotak hitam harus dibuat dengan kasus benar dan kasus kesalahan, misalkan untuk 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.
Contoh Pengujian Web :
Sumber : (Septiani, Goni, & Sayfulloh, 2017)
Gambar II.15. Contoh Pengujian Web
