8 2.1. Konsep Dasar Web
Menurut Kusuma Ardhana. (2012:3) memberikan batasan bahwa, “World Wide Web atau lebih 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”.
Menurut Hidayat (2010:2) menyimpulkan bahwa :
Website adalah kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik yang bersifat statis atau dinamis yang membentuk satu rangkaian bangunan yang saling terkait, yang masing- masing dihubungkan dengan jaringan-jaringan halaman.
Jadi, Web adalah suatu layanan yang disajikan berupa informasi yang menggunakan konsep hyperlink, baik yang bersifat statis atau dinamis yang membentuk suatu rangkaian bangunan yang saling terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman.
2.1.1. Internet
Menurut Irfan,dkk (2009:12) memberikan batasan bahwa, “Internet adalah suatu jaringan komputer yang satu dengan yang lain, yang terhubung untuk keperluan komunikasi dan informasi”.
Menurut Sibero (2013:10) memberikan batasan bahwa, “Internet (Interconnected Network) adalah jaringan komputer yang menghubungkan antar
jaringan secara global, internet dapat juga disebut jaringan dalam sebuah jaringan yang luas”.
2.1.2. Web Server
Menurut Madcoms (2011:229) menyimpulkan bahwa :
WebServer adalah suatu program yang mempunyai tanggung jawab atau tugas menerima perintah HTTP dari komputer klien, yang dikenal dengan nama web browser, dan melayani mereka dengan menyediakan respon HTTP berupa konten data, biasanya berupa halaman web yang terdiri dari dokumen HTML, dan objek yang terkait seperti gambar dan lain-lain.
2.1.3. Web Browser
Menurut Anhar (2010:6) memberikan batasan bahwa, “ Browser merupakan software yang diinstal mesin client, berfungsi untuk menerjemahkan tag HTML menjadi halaman web. Browser yang sering digunakan adalah Internet Explorer, Mozilla ,Opera, Netscape, dan lainnya”.
Menurut Ibrahim (2008:13) memberikan batasan bahwa, “Web Browser adalah suatu aplikasi yang digunakan untuk mengakses web”.
2.1.4. HTTP
Menurut Irawan (2009:73) memberikan batasan bahwa, “HTTP merupakan protokol standar yang digunakan untuk transfer data melalui jaringan internet.
HTTP merupakan kependekan dari Hyper-Text Transport Protocol. Protokol ini mengatur interaksi antara web sever denggan web browser lainnya”.
2.1.5. Bahasa Pemprograman
Bahasa Pemprograman adalah suatu komando atau perintah yang dibuat manusia untuk membuat komputer menjadi memiliki fungsi tertentu , Kadang sering diartikan suatu susunan aturan penulisan (sintaks) yang membentuk kode- kode yang kemudian akan diterjemahkan dalam program komputer menjadi bahasa rakitan (assembly) dan terus diolah hingga dimengerti oleh mesin. Dalam penulisan ini ada beberapa bahasa pemprograman yang penulis ambil diantaranya:
1. HTML
Menurut Saputra & Feni Agustin (2011:1) memberikan batasan bahwa,
“HTML merupakan kependekan dari Hyper Text Markup Language. Biasanya html ini digunakan sebagai pondasi dari suatu aplikasi web. Pengerjaan file html dapat dilakukan sembarang, maksudnya ialah menggunakan editor apa saja, html dapat dikerjakan”.
Menurut Raharjo (2014:4) memberikan batasan bahwa, “HTML adalah singkatan dari Hyper Text Markup Language, yaitu bahasa (aturan) standar yang digunakan untuk menampilkan teks,gambar,vidio dan audio ke dalam halaman web”.
2. Pemrograman PHP
Menurut Suprianto (2008:1) menyimpulkan bahwa :
PHP merupakan kependekan dari kata Hypertext Preprocessor. PHP tergolong sebagai perangkat lunak open source yang diatur dalam aturan general purpose licences (GPL).
Menurut Sibero (2013:49) memberikan batasan bahwa, “PHP adalah pemprograman interpreter yaitu proses penerjemahan baris kode sumber menjadi kode mesin yang dimengerti komputer secara langsung pada saat baris kode dijalankan”.
3. CSS
Menurut Ardhana (2012 :108) memberikan batasan bahwa, “ Cascading Style Sheet (CSS) merupakan salah satu bahasa pemprograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam”.
4. MySQL
Menurut Solichin (2010:10) memberikan batasan bahwa, “MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa inggris : database management system) atau DBMS yang multithread,multi-user, dengan sekitar 6 juta instansi di dunia”.
5. JavaScript
Menurut Sunyoto (2007:17) memberikan batasan bahwa, “Javascript adalah bahasa scripting yang popular di internet dan dapat bekerja di sebagian besar browser populer seperti Internet Explorer (IE), Mozilla Firefox , Netscape dan Operd”.
6. JQuery
Menurut Wahana Komputer (2012:2) memberikan batasan bahwa, “ JQuery merupakan pustaka JavaScript yang dibangun untuk mempercepat dan
memperingkas serta menyerhanakan manipulasi dokumen HTML, menangan event, animasi, dan interaksi Ajax untuk mempercepat pengembangan web.
2.1.6. Basis Data
Menurut Shalahuddin dan Rosa A.S (2016:43) menyimpulkan bahwa:
Sistem Basis Data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan.
2.1.7.Metode Waterfall
Menurut Shalahuddin dan Rosa A.S. (2016:28) menyimpulkan bahwa : Model SDLC air terjun (waterfall) sering juga disebut model sekunsial linier (sequential linear) 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). Berikut adalah gambar ,model air terjun :
1. Analisis 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. 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, representasi antarmuka, dan prosedur pengodean. Tahap ini mentranslasi kebutuhan perangkat lunak dari tahap analisis menjadi program pada tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan.
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 (maintenace)
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 pe,eliharaan dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat lunak baru.
2.2. Peralatan Pendukung (Tool System)
Dalam membuat suatu model sistem, penulis memerlukan alat bantu untuk meracang suatu sistem secara struktual dan katual, daintaranya, UML, Kamus Data dan Teknik Pengkodean.
2.2.1.UML (Unified Modeling Language)
Menurut Shalahuddin dan Rosa A.S.(2016:138) menyimpulkan bahwa : Secara fisik, UML adalah sekumpulan spesfikasi yang dikeluarkan oleh OMG. UML terbaru adalah UML 2.3 yang terdiri dari 4 macam spesifikasi, yaitu Diagram Interchange Specification, UML Infrastructure, UML Superstructure, dan Object Constraint Language (OCL). Seluruh spesifikasi tersebut dapat diakses di website http://www.omg.org.
1. Diagram UML
Pada UML 2.3 terdiri dari 13 macam diagram yang dikelompokkan dalam 3 kategori. Pembagian kategori dan macam-macam diagram tersebut dapat dilihat pada gambar di bawah ini.
UML 2.3 Diagram
Behavior Diagram
Structure Diagram Intraction Diagram
Class Diagram
Package Diagram Component
Diagram
Composite Structure Diagram Object Diagram
Deployment Diagram
Use Case Diagram
Activity Diagram
State Machine Diagram
Sequense Diagram
Communication Diagram
Timming Diagram
Interaction Overview Diagram
Sumber : Shalahuddin dan Rosa A.S. (2016:140)
Gambar II.1. Diagram UML
Berikut ini penjelasan singkat dari pembagian kategori beerikut :
a. Structure diagrams yaitu kumpulan diagram yang menggunakan untuk menggambarkan suatu structur statis dari sistem yang dimodelkan
b. Behavior diagrams yaitu kumpulan diagram yang digunakan untuk menggambarkan kelakuan sistem atau rangkaian perubahan yang terjadi pada sebuah sistem.
c. Interaction diagrams yaitu kumpulan diagram yang digunakan untuk menggambarkan interaksi sistem dengan sistem lain maupun interaksi antar subsistem pada suatu sistem.
Penjelasan tentang masing-masing diagram akan dilakukan pada sub bab- sub bab berikut.
1) Class Diagram
Diagram kelas atau class diagram menggambarkan struktur sistem dari segi pendefinsian kelas-kelas yang akan dibuat untuk membangun sistem.
2) Object Diagram
Diagram Object menggambarkan struktur sistem dari segi penamaan objek dan jalannya objek dalam sistem.
3) Component diagram
Diagram komponen atau component diagram dibuat untuk menunjukkan organisasi dan ketergantungan diantara kumpulan komponen dalam sebuah sistem.
4) Composite Structure Diagram
Composite Structure Diagram baru mulai ada pada UML versi 2.0, pada versi 1.x diagram ini belum muncul. Diagram ini dapat digunakan untuk menggambarkan stuktur dari bagian-bagian yang saling terhubung maupun mendeskripsikan struktur pada saat berjalan (runtime) dari instance yang saling terhubung.
5) Package Diagram
Package Diagram menyediakan cara mengumpulkan elemen-elemen yang saling terkait dalam diagram UML.
6) Deployment Diagram
Diagram Deloyment atau Deployment Diagram menunjukkan konfigurasi komponen dalam proses eksekusi aplikasi.
7) Use Case Diagram
Use Case Diagram atau diagram use case merupakan pemodelan untuk kelakuan (behavior) sistem informasi yang akan dibuat. Use Case mendeksripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem informasi yang akan dibuat. Secara kasarr, use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem informasi dan siapa saja yang berhak menggunakan fungsi-fungsi itu.
8) Activity Diagram
Diagram aktivitas atau activity diagram menggambarkan workflow (aliran kerja) atau aktivitas dari sebuah sistem atau proses bisnis atau menu yang ada pada perangkat lunak. Yang perlu diperlihatkan disini adalah bahwa diagram aktivitas menggambarkan aktivitas sistem bukan apa yang dilakukan aktor, jadi aktivitas yang dapat dilakukan oleh sistem.
9) State Machine Diagram
State Machine Diagram atau statechart diagram atau dalam bahasa indonesia disebut diagram mesin status atau sering juga disebut diagram status digunakan untuk menggambarkan perubahan status atau transisi status dari sebuah mesin atau sistem objek.
10) Sequence Diagram
Diagram sequence menggambarkan kelakuan objek pada use case dengan mendeksripsikan waktu hidup objek dan message yang dikirimkan dan diterima antar objek
11) Communication Diagram
Communication Diagram atau diagram komunikasi pada UML versi 2.x adalah penyederhanaan dari diagram kolaborasi (collaboration diagram) pada UML versi x.1. Collaboration diagram sudah tidak muncul lagi pada versi 2.x. Diagram komunikasi sebenarnya adalah diagram kolaborasi tetapi dibuat untuk tiap sekuen.
12) Timing Diagram
Timming Diagram merupakan diagram yang fokus pada penggambaran terkait batasan waktu. Timming diagram digunakan untuk menggambarkan tingkah laku sistem dalam periode waktu tertentu.
Timming diagram biasanya digunakan untuk mendeskripsikan operasi dari alat dijital karena penggambaran secara visual akan lebih mudah dipahami daripada kata-kata.
13) Interaction Overview Diagram
Interaction Overview Diagram mirip dengan diagram aktivitas yang berfungsi untuk menggambarkan sekumpulan urutan aktivitas. Interaction Overview Diagram adalah bentuk aktivitas diagram yang setiap titik merepresentasikan diagram interaksi.
2.2.2.Struktur Navigasi
Menurut Sutopo (2007:245) menyimpulkan bahwa :
Struktur navigasi adalah struktur bagaimana halaman web dihubungkan dengan halaman lain. Terdapat empat macam struktur navigasi, yaitu linear navigation model, hierarchical model, spoke-and-hub model, dan full web model.
1. Linear navigation model
Linear navigation model digunakan oleh sebagian besar Website. Informasi
diberikan secara sekuensial dimulai dari satu halaman. Beberapa desainer menggunakan satu halaman untuk masuk dan keluar dari Web site.
Homepage Halaman 1 Halaman 2 Halaman 3
Sumber : Sutopo (2007:6)
Gambar II.2 Stuktur navigasi linear navigation model
Homepage
Topik C Tobik B
Subtopik C3 Subtopik
C2 Subtopik
C1 Subtopik
A2 Subtopik
A1
Topik A
Sumber : Sutopo (2007:6)
Gambar II.3 Struktur Navigasi hierarchical model
2. Hierarchical model
Hierarchical model diadaptasikan dari top-down design. Konsep navigasi
ini satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan.
3. Spok-and-hub model
Spok-and-hub model hanya menggunakan satu node untuk berhubungan
dengan node lain. Pada model ini hanya mendapat dua macam link, yaitu dari homepage ke halaman teretntu, dan dari halaman tersebut kembali ke homepage.
Topik C
Topik B Topik D
Topik H Topik F
Topik G
Topik A Homepage Topik E
Sumber : Sutopo (2007:7)
Gambar II.4 Struktur navigasi Spok-and-hub model
Homepage
Topik F Topik G
Topik G1
Topik E Topik D
Topik C
Topik B Topik A
Sumber : Sutopo (2007:8)
Gambar II.5 Struktur navigasi full web 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 ni, yaitu dapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya.
2.2.3.ERD (Entity Relation Diagram)
Menurut Wahyudi (2008:199) memberikan batasan bahwa, “Database digunakan untuk menyimpan data yang terstruktur. Struktur data ini dapat didesain menggunakan beberapa variasi teknis, stu diantaranya disebut dengan entity relation modelling atau ERM, model ER adalah sebuah konsep kata dari data yang menggambarkan keadaan sebenarnya dari entities dan relationship.
2.2.4.LRS (Logical Record Structure)
Menurut Lestari (2013) memberikan batasan bahwa, “Logical Record Structure dibentuk dengan nomor tipe record. Beberapa tipe record digambarkan oleh kotak empat persegi panjang dan dengan nama yang unik”.
Menurut Simarmata (2007:115) memberikan batasan bahwa, “Logical Record Structure adalah representasi dari struktur record-record pada tabel-tabel yang terbentuk dari hasil relasi antar himpunan entitas”.
2.2.5.Dreamweaver CS6
Menurut Sadeli (2013:2) memberikan batasan bahwa, “Dreamweaver merupakan suatu perangkat lunak web editor keluaran Adobe System yang digunakan untuk membangun dan mendesain suatu website dengan fitur-fitur yang menarik dan kemudahan dalam penggunanya”.
2.2.6.XAMPP
Menurut Arief (2011:44) memberikan batasan bahwa, “Xampp adalah program untuk menyediakan beberapa bahasa pemprograman yang akan berjalan di server”.
2.2.7.Apache
Menurut Suprianto (2008:1) memberikan batasan bahwa, “merupakan web server yang digunakan oleh PHP,berfungsi menampilkan hasil proses script PHP ke komputer browser dalam bentuk tag HTML”.
2.2.8.Blackbox
Menurut Shalahuddin dan Rosa A.S. (2016:275) memberikan batasan bahwa,“Black-Box Testing yaitu menguji perangkat lunak dari segi spesfikasi fungsional tanpa mengujii desain lain dan kode program.
2.2.9.E-Commerce
Menurut Wong (2010:33) memberikan batasan bahwa, “electronic commerce adalah pembelian,penjualan dan pemasaran barang serta jasa melalui sistem elektronik”.
