SISTEM INFORMASI KATALOG SEPEDA MOTOR BERBASIS
WEB
Oleh:
ACHMAD RIZAL SIDIK
NPM : 0734010181
J URUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” J AWA TIMUR
SURABAYA
FAKULTAS TEKNOLOGI INDUSTRI
Jl. Rungkut Madya Gunung Anyar Surabaya 60294 Tlp. (031) 8706369, 8783189 Fax (031) 8706372 Website: www.upnjatim.ac.id
KETERANGAN REVISI
Mahasiswa di bawah ini :
Nama : Achmad Rizal Sidik
NPM : 0734010181
Program Studi : Teknik Informatika
Telah mengerjakan revisi skripsi dengan judul :
“
SISTEM INFORM ASI KATALOG SEPEDA M OTOR BERBASIS WEB
”.Oleh karenanya mahasiswa tersebut diatas dinyatakan bebas revisi skripsi dan diijinkan
untuk membukukan skripsi dengan judul tersebut.
Surabaya, 10 September 2012
Dosen Penguji yang memerintahkan revisi:
1.) I r. Sutiyono, MT.
{
}
Nur Cahyo Wibowo, S.Kom. M.Kom.
Dosen Pembimbing Pendamping
SISTEM INFORMASI KATALOG SEPEDA MOTOR
BERBASIS WEB
Disusun Oleh:
ACHMAD RIZAL SIDIK
0734010181
Telah dipertahankan dihadapan dan diterimaoleh Tim Penguji Skripsi
Program Studi Teknik Informatika Fakultas Teknologi Industri
Universitas Pembangunan Nasional “Veteran” Jawa Timur
Pada Tanggal : 19 Juli 2012
Pembimbing:
1.
Nur Cahyo Wibowo, S.Kom, M.Kom. NIP. 379030401971
2.
Fetty Tr i Anggraeny, S.Kom, M.Kom NIP. 382020602081
Tim Penguji: 1.
Rinci Kembang Hapsari, S.Si, M. Kom. NPT. 377120801681
2.
Ir. Sutiyono, MT.
NIP. 196007131987031001
3.
Bar ry Nuqoba, S.Si, M.Kom. NPT. 384110901551
Mengetahui
Dekan Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional “Veteran” J awa Timur
Puji syukur senantiasa penulis ucapkan kehadirat Tuhan YME, yang telah
melimpahkan rahmat dan hidayah-Nya, sehingga penulis dimudahkan dalam
penyelesaian penulisan laporan Tugas Akhir di jurusan Teknik Informatika
sebagaimana yang diharapkan. Penulis menyadari sepenuhnya masih terdapat banyak
kekurangan dalam penyelesaian penulisan laporan Tugas akhir ini. Namun penulis
berusaha menyelesaikan laporan ini dengan sebaik mungkin.
Segala kritik saran yang bersifat membangun sangat diharapkan dari semua
pihak, guna perbaikan dan pembangunan dimasa yang akan datang. Akhirnya besar
harapan penulis agar laporan ini dapat diterima dan berguna bagi semua pihak. Amin.
Surabaya, September 2012
Dalam penulisan laporan Tugas Akhir ini penulis menyadari telah banyak
mendapatkan bantuan dari berbagai pihak. Oleh karena itu pada kesempatan ini
dengan kesungguhan dan rasa rendah hati, penulis ingin menyampaikan ucapan
terima kasih kepada :
1. Tuhan YME yang selalu memberikan kesehatan, rezeki, kemudahan, dan
kasih-Nya yang sabar baik bagi penulis sendiri maupun orang – orang di
sekitar penulis.
2. Bapak sutiyono, selaku Dekan Fakultas Teknik Industri Universitas
Pembangunan Nasional “Veteran” Jatim.
3. Ibu Dr. Ir. Ni Ketut Sari, MT. selaku Kepala Jurusan Teknik Informatika FTI
UPN “Veteran” Jatim.
yang telah membimbing, memberikan arahan, dan nasehat Terima Kasih
Banyak atas bimbingan dan semua nasehat serta arahan yang telah diberikan.
6. Orang tua tercinta, adik, dan kakak tersayang, yang telah memberikan
dorongan baik moril maupun materiil sehingga laporan Praktek Kerja
Lapangan ini dapat penulis selesaikan.
7. Kawan satu perkumpulan angkatan 2007, teman – teman KKN dan semua
Penulis menyadari Laporan Tugas Akhir ini masih jauh dari sempurna,
sehingga saran dan kritik yang membangun sangat penulis harapkan. Akhir kata,
semoga laporan ini bermanfaat bagi pembaca dan bagi civitas akademi FTI UPN
“Veteran” Jatim.
Surabaya, Oktober 2012
Halaman
KATA PENGANTAR ... i
ABSTRAK ... iv
DAFTAR ISI ... v
DAFTAR TABEL... .. ix
DAFTAR GAMBAR ... x
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Perumusan Masalah ... 2
1.3 Batasan Masalah ... 3
1.4 Tujuan dan Manfaat ... 3
1.5 Metodologi Penelitian ... 3
1.6 Sistematika Penulisan ... 4
BAB II TINJAUAN PUSTAKA ... 6
2.1 Katalog ... 6
2.2 Konsep Dasar Sistem Informasi ... 8
2.3 Konsep Dasar OOP di PHP (Class, Method dan Object) .... 8
2.4 Web sebagai sistem... 9
2.5 Bahasa Pemrograman ... 12
2.6 PHP ... 13
2.7 HTML ... 16
2.11 Internet ... 25
2.12 Web Browser ... 26
2.13 Siklus Hidup Sistem ... 27
BAB III ANALISIS DAN PERANCANGAN SISTEM ... 29
3.1Analisa Sistem ... 29
3.2Perancangan sistem... 30
3.2.1 Deskripsi Umum... 30
3.2.2 Kebutuhan Sistem ... 30
3.2.3 Perancangan Parameter Pencarian ... 31
3.2.4 Conceptual Data Model ... 31
3.2.5 Alur Pengaksesan Aplikasi ... 32
3.2.6 Use Case Diagram ... 33
3.2.7 Activity Diagram ... 35
3.2.8 Class Diagram ... 36
3.2.9 Desain Antarmuka ... 38
A. Antarmuka Fitur Menu Awal ... 38
B. Antarmuka Menu Katalog ... 39
C. Antarmuka Menu Admin ... 39
BAB IV IMPLEMENTASI ... 42
4.1. Lingkungan Implementasi ... 42
4.2. Implementasi Program ... 43
4.2.1.3 Pembuatan Halaman Home ... 48
4.2.1.4 Tampilan Video ... 51
4.2.2. Pembuatan Tampilan Admin ... 52
4.2.2.1. Pengedittan Tampilan Atribut ... 53
4.2.2.2. Pembuatan Halaman Ubah Password ... 57
BAB V UJI COBA DAN EVALUASI ... 59
5.1. Lingkungan Uji Coba... 59
5.2. Skenario Uji Coba ... 59
5.3. Pelaksanaan Uji Coba ... 60
5.3.1. Persiapan Aplikasi... 61
5.3.2. Uji coba Web KASTOR ... 63
5.3.3. Menu Home ... 64
A. Pencarian dengan 1 Kategori ... 65
B. Pencarian dengan lebih 1 Kategori ... 66
C. Link Lihat Detail ... 67
5.3.4. Menu Katalog ... 68
5.3.5. Menguji Menu Admin ... 69
A. Log In ... 70
B. Error pada Log In ... 71
C. Menu Motor ... 72
1. Merk ... 72
2. Genre ... 84
E. Menu Mengubah Password ... 86
F. Menu Keluar ... 88
5.4. Evaluasi ... 88
BAB VI PENUTUP ... 89
6.1. Kesimpulan ... 89
6.2. Saran ... 89
Penyusun : Achmad Rizal Sidik
iv
ABSTRAK
Seseorang membutuhkan pertimbangan khusus dalam memiliki sepeda motor sebagai alat transportasinya. Hal yang diperhatikan adalah mengenai beberapa faktor. Biaya, kecepatan, keindahan (warna), tahun, harga menjadi pertimbangan sebelum seseorang membeli sebuah sepeda motor. Terkadang pula merk apapun tidak menjadi masalah asalkan sesuai dengan kriteria mereka. Disisi lain pula, terdapat sekelompok orang yang memperhatikan kriteria-kriteria tersebut tetapi juga menyoroti dalam satu merk sepeda motor saja. Dengan begitu sepeda motor yang didapat sesuai dengan keinginan.
Mencari sepeda motor sesuai dengan kriteria adalah pekerjaan yang sulit dan membutuhkan waktu lama. Demi mendapatkan sepeda motor yang benar-benar sesuai harapan, seseorang akan rela menelusuri setiap toko. Ini memakan waktu dan boros biaya. Bahkan bisa saja kriteria yang dimaksud gagal ditemukan. Hal ini dapat berarti merupakan tindakan yang sia-sia.
Sebuah sistem informasi terkomputerisasi dapat menjadi media penelusuran informasi sepeda motor. Cukup dengan mengakses sistem ini maka sepeda motor yang dimaksud bisa ditemukan sesuai kriterianya. “Sistem Informasi Katalog Sepeda Motor Berbasis Web” ini menjadi solusi dalam menjawab kebutuhan seseorang mengenai sepeda motor yang diinginkan. Semua kegiatan penentuan kriteria dan pencarian informasi dapat dilakukan dalam sistem tersebut. Mendapatkan informasi tidak perlu lagi mendatangi lokasi.
PENDAHULUAN
1.1. Latar Belakang
Di era modern saat ini, aktifitas mobilitas dalam masyarakat menjadi lebih
tinggi dibandingkan dengan era-era sebelumnya. Keadaan ini menuntut setiap
lapisan masyarakat memiliki alat transportasi dalam mendukung aktifitas yang
dilakukan. Banyak yang memilih menggunakan mobil, bahkan untuk sepeda
motor jauh lebih banyak lagi. Oleh karena itu, sepeda motor merupakan alat
transportasi yang paling dominan saat ini khususnya masyarakat Indonesia.
Sejumlah informasi mengenai alat transportasi yang akan dicari merupakan modal
utama untuk mendapatkan alat transportasi tersebut. Sebelum seseorang mulai
memutuskan untuk mendapatkan alat transportasi yang diinginkan biasanya
dimulai dengan melakukan beberapa pertimbangan. Sesuai dengan informasi yang
didapatkan maka dapat ditentukan pula jenis sepeda motor yang diinginkan serta
dapat diketahui pula status dan spesifikasi kendaraan tersebut.
Mencari sepeda motor yang ditentukan berdasarkan kriteria tertentu,
adalah merupakan pekerjaan yang cukup sulit dan merepotkan dan membutuhkan
waktu lama, demi mendapatkan sepeda motor yang benar-benar sesuai dengan
harapan seseorang akan rela menelusuri setiap toko, sebenarnya tindakan
demikian dapat memakan waktu dan biaya yang cukup banyak. Resiko yang
umumnya terjadi adalah bisa saja kriteria yang dimaksud gagal ditemukan, hal ini
jika menerapkan sebuah pencarian yang lebih sistematis. Suatu aktifitas seseorang
dalam mencari informasi mengenai sepeda motor dapat diperoleh dengan
penggunaan komputer dalam menangani informasi. Sejumlah informasi mengenai
sepeda motor akan tersedia dalam sistem informasi yang mana siap diolah oleh
pengguna. Untuk kemudian dapat menampilkan sepeda motor yang dimaksud.
Sebuah sistem informasi terkomputerisasi dapat menjadi media
penelusuran informasi sepeda motor. Cukup dengan mengakses sistem ini maka
sepeda motor yang dimaksud bisa ditemukan sesuai kriterianya. “Sistem
Informasi Katalog Sepeda Motor Semua Merk Berbasis Web” diharapkan
menjadi solusi dalam menjawab kebutuhan seseorang mengenai sepeda motor
yang diinginkan. Semua kegiatan penentuan kriteria dan pencarian informasi
dapat dilakukan dalam sistem tersebut. Mendapatkan informasi tidak perlu lagi
mendatangi lokasi. Dengan demikian masalah tersebut cocok diangkat dengan
judul “Sistem Informasi Katalog Sepeda Motor Semua Merk Berbasis Web”.
1.2. Perumusan Masalah
Pada latar belakang di atas, maka dapat di ambil permasalahan yaitu :
a. Bagaimana merancang dan membangun sistem untuk mengolah pencarian
informasi sepeda motor.
b. Bagaimana cara menerapkan katalog sepeda motor dalam bentuk sistem
informasi.
c. Apa sajakah informasi yang didapatkan pengguna dalam mengakses
1.3. Batasan Masalah
Untuk lebih memfokuskan pada permasalahan, maka sistem yang akan
dibuat nantinya akan dibatasi pada :
a. Informasi mengenai semua merk sepeda motor yang populer di Indonesia.
b. Pencarian berdasarkan kecocokan kriteria sepeda motor.
c. Kriteria yang jadi acuan merupakan kriteria yang sering diutamakan
seseorang dalam melakukan pertimbangan .
d. Informasi berupa spesifikasi dan harga dari suatu merk sepeda motor.
e. Spesifikasi sepeda motor meliputi mesin, harga, transmisi, dimensi,
kapasitas dan rangka.
f. Spesifikasi sepeda motor menjadi dasar informasi.
g. Hanya seorang admin yang dapat mengelola katalog.
1.4. Tujuan dan Manfaat
Tujuan penulisan skripsi ini adalah implementasi pencarian informasi
sepeda motor semua merk dengan media katalog berbasis web.
Manfaatnya adalah dapat membantu seseorang dalam menemukan
informasi mengenai kendaraan bermotor yang mana sesuai dengan kriteria
seseorang tersebut .
Langkah-langkah yang ditempuh untuk keperluan pembuatan tugas akhir
ini antara lain:
a. Studi Literatur
Mendaptkan beberapa informasi dan dasar teori baik dari buku, internet,
maupun sumber-sumber yang lainnya yang terkait dengan judul penelitian
ini.
b. Pengumpulan dan Analisa Data
Pengumpulan data dilakukan dengan cara: observasi, identifikasi dan
klasifikasi melalui studi literatur. Dari pengumpulan data tersebut,
dilakukan analisa data yaitu melakukan uji coba penetration testing
c. Rancang – Bangun Sistem
Pada tahap ini dilakukan penerapan konsep pencarian informasi dan
pendataan mengenai semua merk sepeda motor serta mendefinisikan
susuna dari system yang dibuat.
d. Uji Coba dan Evaluasi Sistem
Pada tahap ini dilakukan uji coba terhadap sistem yang telah dibangun,
apakah sudah sesuai dengan yang diharapkan.
e. Dokumentasi
Pada tahap ini dilakukan pembuatan laporan mulai dari studi literatur
sampai dengan implementasi, serta penarikan kesimpulan dan saran.
Penulisan serta pembahasan tugas akhir ini dibagi menjadi tujuh bab
dengan sistematika sebagai berikut :
BAB I : PENDAHULUAN
Bab ini berisi tentang latar belakang, rumusan masalah,
batasan masalah, tujuan dan manfaat, metode penelitian dan
sistematika penulisan.
BAB II : TINJAUAN PUSTAKA
Pada bab ini membahas tentang teori-teori dasar yang
mendukung penelitian ini.
BAB III : ANALISIS DAN PERANCANGAN SISTEM
Pada bab ini membahas mengenai analisis kebutuhan yang
diperlukan untuk mengatasi permasalahan tersebut.
BAB IV : IMPLEMENTASI
Pada bab ini berisi tentang hasil dari perancangan sistem
yang telah dibuat, yang meliputi penerpan alur dan apa saja
yang dibutuhkan untuk menjalankan aplikasi ini.
BAB V : UJI COBA DAN EVALUASI
Pada bab ini berisi penjelasan tentang hasil uji coba aplikasi
dan evaluasinya.
BAB VI : PENUTUP
Pada bab ini akan ditarik suatu kesimpulan mengenai
BAB II
TINJ AUAN PUSTAKA
2.1
KatalogKatalog dari bahasa Latin catalogus, adalah sebuah buku berisikan , bisa
dengan gambar-gambar atau tidak.biasanya berisi informasi gambar produk,
harga, serta ukurannya. Beberapa definisi katalog menurut ilmu perpustakaan
dapat disebutkan sebagai berikut:
- Katalog berarti daftar berbagai jenis koleksi perpustakaann/produk yang disusun
menurut sistem tertentu.(Fathmi, 2004,p.6 )
- A catalogue is a list of, an index to, a collection of books and/or other
materials. It enables the user to discover : what material is present in the
collection, where this material may be found. (Hunter, 199, p. 1)
- Katalog perpustakaan/produk merupakan suatu rekaman atau daftar bahan
pustaka yang dimiliki oleh suatu perpustakaan atau beberapa perpustakaan yang
disusun menurut aturan dan sistem tertentu. (Dasar-Dasar Ilmu Perpustakaan,
2003,p. 130)
Pada definisi di atas dapat disimpulkan bahwa katalog merupakan daftar
dari koleksi perpustakaan/produk atau beberapa perpustakaan/produk yang
berbeda yang disusun secara sistematis, sehingga memungkinkan pengguna
katalog dapat mengetahui dengan mudah koleksi apa yang dimiliki oleh pustaka
produk dan dimana koleksi tersebut dapat ditemukan. Sedangkan pengertian
katalog induk (union catalog) sangat berkaitan erat dengan kerjasama
istilahnya merupakan kerjasama antar pihak pustaka produk dalam pengerjaan
katalog dan hasilnya adalah katalog induk. Jadi secara ringkas dapat dikatakan
bahwa katalog induk merupakan hasil kerjasama dalam pengerjaan katalog oleh
beberapa pustaka perusahaan atau penyatuan dari beberapa katalog produk.
Berikut adalah contoh katalog induk yaitu Katalog Induk Thailand dan Katalog
Induk Lousiana yang dapat di akses melalui internet dengan alamat :
http://uc.thailis.or.th dan http://search.lousilibraries.org/.
Fungsi Katalog Induk Sebetulnya tidak jauh berbeda dengan fungsi
katalog. Charles Ammi Cutter menyebutkan tiga fungsi katalog yaitu:
- Memungkinkan seseorang menemukan sebuah buku/produk yang diketahui dari
kriterianya, judul atau subyeknya.
- Menunjukkan apa yang dimiliki suatu perusahaan oleh pengarang tertentu, pada
subyek tertentu, dalam jenis literatur tertentu.
- Membantu dalam pemilihan produk berdasarkan edisinya atau berdasarkan
karakternya (bentuk sastra atau berdasarkan topik).Fungsi tersebut dikemukakan
oleh Cutter lebih dari 100 tahun yang lalu, namun sampai saat ini masih sangat
relevan tentunya dengan beberapa penyesuaian seperti istilah buku sebaiknya
diganti dengan istilah koleksi. Sedangkan untuk katalog induk mempunyai fungsi
tambahan antara lain mempermudah penyalinan katalog (copy cataloguing),
mendukung pengawasan bibliografi (bibliographic control), dan menopang silang
layan (inter libraryloan). (Nur Hassane, 2007 ) [2]
2.2 Konsep Dasar Sistem Infor masi
Sistem adalah kumpulan dari unsur atau elemen-elemen yang saling berkaitan
atau berinteraksi dan saling mempengaruhi dalam melakukan kegiatan bersama
untuk mencapai suatu tujuan tertentu. Contoh :
A. Sistem Komputer terdiri dari : Software, Hardware, Brainware
B. Sistem Akuntansi dan sebagainya.
Menurut Jerry FithGerald ; sistem adalah suatu jaringan kerja dari
prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan
suatu kegiatan atau menyelesaikan suatu sasaran tertentu, sedangkan menurut
Ludwig Von Bartalanfy ; Sistem merupakan seperangkat unsur yang saling terikat
dalam suatu antar relasi diantara unsur-unsur tersebut dengan lingkungan.
Syarat-Syarat Sistem :
A. Sistem harus dibentuk untuk menyelesaikan tujuan.
B. Elemen sistem harus mempunyai rencana yang ditetapkan.
C. Adanya hubungan diantara elemen sistem.
D. Unsur dasar dari proses (arus informasi, energi dan material) lebih penting
daripada elemen sistem.
E. Tujuan organisasi lebih penting dari pada tujuan elemen. (HM,
Jogiyanto,2003) [3]
2.3 Konsep Dasar OOP di PHP (Class, Method dan Object)
OOP yang merupakan kependekan kata Object Oriented Programming
adalah suatu metode pemrograman yang menggunakan objek. Objek yang
peneliti sebagai objek seperti komputer, HP, kursi, meja, gitar, gelas dan
sebagainya.
Setiap objek memiliki karakteristik atau sifat sendiri yang membedakan
antara objek yang satu dengan objek yang lainnya.
Dalam OOP selalu ada yang namanya class, method (behavior),
property (attribute). Class bisa dikatakan sebagai cetakan untuk membuat objek.
Method bisa dikatakan sebagai aksi yang dimiliki oleh class. Sedangkan attribute
adalah karakteristik atau sifat-sifat yang dimiliki oleh objek yang dibuat nantinya.
Pendeklarasian suatu class selalu terdapat sintak class yang kemudian diikuti
dengan nama class dan setelah itu diikuti oleh body class. Body class selalu
berada diantara kurung kurawal atau berada diantara tanda { dan }.
(rumahscript, 2011)[12]
2.4 Web sebagai sistem
Website atau situs juga dapat diartikan sebagai kumpulan halaman yang
menampilkan informasi data teks, data gambar diam atau gerak, data animasi,
suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun
dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana
masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).
Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi
informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi
informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah
berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi
dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh
pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun
pemilik.
Penggunaan web sebagai system secara umum memiliki dua karakteristik
antara lain:
• Situs web statis
Situs web statis merupakan situs web yang memiliki isi tidak
dimaksudkan untuk diperbarui secara berkala sehingga pengaturan ataupun
pemutakhiran isi atas situs web tersebut dilakukan secara manual. Ada tiga jenis
perangkat utilitas yang biasa digunakan dalam pengaturan situs web statis:
Editor teks merupakan perangkat utilitas yang digunakan untuk
menyunting berkas halaman web, misalnya: Notepad atau TextEdit, sedangkan
Editor WYSIWYG merupakan perangkat lunak utilitas penyunting halaman web
yang dilengkapi dengan antar muka grafis dalam perancangan serta
pendisainannya, berkas halaman web umumnya tidak disunting secara lengsung
oleh pengguna melainkan utilitas ini akan membuatnya secara otomatis berbasis
dari laman kerja yang dibuat oleh pengguna. perangkat lunak ini misalnya:
Microsoft Frontpage, Macromedia Dreamweaver.
Editor berbasis templat, beberapa utilitas tertentu seperti Rapidweaver dan iWeb,
pengguna dapat dengan mudah membuat sebuah situs web tanpa harus
mengetahui bahasa HTML, melainkan menyunting halaman web seperti halnya
halaman biasa, pengguna dapat memilih templat yang akan digunakan oleh utilitas
ini untuk menyunting berkas yang dibuat pengguna dan menjadikannya halam
• Situs web dinamis
Situs web dinamis merupakan situs web yang secara spesifik didisain
agar isi yang terdapat dalam situs tersebut dapat diperbarui secara berkala dengan
mudah. Sesuai dengan namanya, isi yang terkadung dalam situs web ini umumnya
akan berubah setelah melewati satu periode tertentu. Situs berita adalah salah satu
contoh jenis situs yang umumnya mengimplementasikan situs web dinamis tidak
seperti halnya situs web statis, pengimplementasian situs web dinamis umumnya
membutuhkan keberadaan infrastruktur yang lebih kompleks dibandingkan situs
web statis. Hal ini disebabkan karena pada situs web dinamis halaman web
umumnya baru akan dibuat saat ada pengguna yang mengaksesnya, berbeda
dengan situs web statis yang umumnya telah membentuk sejumlah halaman web
saat diunggah di server web sehingga saat pengguna mengaksesnya server web
hanya tinggal memberikan halaman tersebut tanpa perlu membuatnya terlebih
dulu.
Untuk memungkinkan server web menciptakan halaman web pada saat
pengguna mengaksesnya, umumnya pada server web dilengkapi dengan mesin
penerjemah bahasa skrip (PHP, ASP, ColdFusion, atau lainnya), serta perangkat
lunak sistem manajemen basisdata relasional seperti MySQL. Struktur berkas
sebuah situs web dinamis umumnya berbeda dengan situs web statis,
berkas-berkas pada situs web statis umumnya merupakan sekumpulan berkas-berkas yang
membentuk sebuah situs web. Berbeda halnya dengan situs web dinamis,
berkas-berkas pada situs web dinamis umumnya merupakan sekumpulan berkas-berkas yang
penerjemah server web, berfungsi memanajemen pembuatan halaman web saat
halaman tersebut diminta oleh pengguna.
(Wikipedia Indonesia, 2011)[10]
2.5 Bahasa Pemrograman
Bahasa pemrograman, atau sering diistilahkan juga dengan bahasa
komputer, adalah teknik komando/instruksi standar untuk memerintah komputer.
Bahasa pemrograman ini merupakan suatu himpunan dari aturan sintaks dan
semantik yang dipakai untuk mendefinisikan program komputer. Bahasa ini
memungkinkan seorang programmer dapat menentukan secara persis data mana
yang akan diolah oleh komputer, bagaimana data ini akan disimpan/diteruskan,
dan jenis langkah apa secara persis yang akan diambil dalam berbagai situasi.
Menurut tingkat kedekatannya dengan mesin komputer, bahasa
pemrograman terdiri dari:
• Bahasa Mesin, yaitu memberikan perintah kepada komputer dengan
memakai kode bahasa biner, contohnya 01100101100110
• Bahasa Tingkat Rendah, atau dikenal dengan istilah bahasa rakitan
(bah.Inggris Assembly), yaitu memberikan perintah kepada komputer
dengan memakai kode-kode singkat (kode mnemonic), contohnya MOV,
SUB, CMP, JMP, JGE, JL, LOOP, dsb.
• Bahasa Tingkat Menengah, yaitu bahasa komputer yang memakai
campuran instruksi dalam kata-kata bahasa manusia (lihat contoh Bahasa
Tingkat Tinggi di bawah) dan instruksi yang bersifat simbolik, contohnya
• Bahasa Tingkat Tinggi, yaitu bahasa komputer yang memakai instruksi
berasal dari unsur kata-kata bahasa manusia, contohnya begin, end, if, for,
while, and, or, dsb.
Sebagian besar bahasa pemrograman digolongkan sebagai Bahasa Tingkat Tinggi,
hanya bahasa C yang digolongkan sebagai Bahasa Tingkat Menengah dan
Assembly yang merupakan Bahasa Tingkat Rendah.
(Wikipedia Indonesia,2011) [1]
2.6 PHP
PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan
atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs
web dinamis. PHP dapat digunakan untuk membangun sebuah CMS. Pada
awalnya 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
sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan
menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber
terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.
(Wikipedia Indonesia, 2011)[6]
Beberpa perintah – perintah yang akan digunakan adalah mengenai operasi
operasi dasar pada PHP MySQL. Berikut perintah yang digunakan berserta
contoh:
<?php if (!$conn) die (“Koneksi gagal”);
mysql_select_db($database,$conn) or die (“Database tidak ditemukan”); >
Penjelasan Script:
a. mysql_connect
digunakan untuk membuat koneksi dari PHP ke server MySQL. Data mengenai
hostname, mysql username, dan password yang digunakan telah diwakilkan oleh
variabel $hostmysql, $username, $password. Penulisannya akan sama dengan:
mysql_connect(“localhost”,”username”,”password”);
b. mysql_select_db
untuk memilih database yang akan digunakan.
c. if (!$conn) die (“Koneksi gagal”);
jika koneksi gagal dibuat (!$conn), maka akan muncul pesan kesalahan
Setiap operasi PHP yang berhubungan dengan MySQL, akan membutuhkan
sintaks diatas. agar lebih mudah, lebih baik disimpan terlebih dahulu dengan
nama konfig.php. Jika sintaks tersebut dibutuhkan lagi, maka peneliti melakukan
include terhadap file konfig.php tersebut.
2. Membuat tabel pada MySQL
<?php
include (“konfig.php”);
mysql_query(“CREATE TABLE user (
namadpnVARCHAR(20),
namablkg VARCHAR(20),
Penjelasan script:
1. include (“konfig.php”);
perintah include digunakan untuk mengikut sertakan sebuah file (pada contoh
diatas adalah file konfig.php).
2. mysql_query
format umum dari perintah ini adalah mysql_query(string dari query).
mysql_query dapat dilihat penggunaannya pada script tersebut.
3. Memasukkan data pada table
<?php
include (“konfig.php”);
$insert = “INSERT INTO users (namadpn,namablkg,negara) VALUES (‘Saya’,'Sendiri’,'Indonesia’)”;
mysql_query($insert) or die (“tidak dapat memasukkan data ke tabel”);?>
4 . Menampilkan data dari tabel
<?php echo “Jumlah data: $numrows <br>”;
echo “Nama Depan: $row[namadpn] <br>”; echo “Nama Belakang: $row[namablkg] <br>”; echo “Negara: $row[negara]“;
} ?>
Penjelasan script:
1. mysql_num_rows
digunakan untuk menghitung jumlah baris yang didapat dari hasil eksekusi query
(mysql_query).
2. while ( ) { }
digunakan untuk melakukan perulangan selama data yang yang diinginkan masih
3. mysql_fetch_array
menampilkan data dari tabel dalam bentuk array. (rumahweb, 2008)[11]
2.7 HTML
HTML berupa kode-kode tag yang menginstruksikan penjelajah web untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang
merupakan file HTML dapat dibuka dengan menggunakan penjelajah web seperti
Mozilla Firefox atau Google Chrome. HTML juga dapat dikenali oleh aplikasi
pembuka email ataupun dari PDA dan perangkat lunak lain yang memiliki
kemampuan browser. Dengan menggunakan perintah-perintah HTML
memungkinkan pengguna untuk melakukan tugas-tugas berikut:
Menentukan ukuran dan alur tulisan.
Mengintegerasikan gambar dengan tulisan.
Membuat Pranala.
Mengintegerasikan berkas suara dan rekaman gambar hidup.
Membuat form interaktif.
HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya
dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan
kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat
tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya
dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk
mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan
diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML
lebih menekankan pada penggambaran komponen-komponen struktur dan
penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya
built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan
perataan text yang dikehendaki ke komputer yang menampilkan halaman web.
(Suprianto, Dodit.2008) [7]
2.8 Javascript
Javascript adalah bahasa skrip yang populer di internet dan dapat bekerja di
sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla
Firefox, Netscape dan Opera. Kode Javascript dapat disisipkan dalam halaman
web menggunakan tag SCRIPT
Javasript ini menjadi bahasa inti dalam add ons (extensions) google chrome.
Dengan menggunakan bahasa ini maka segala proses program extension chome
dapat ditangani. Segala hal proses yang menyangkut perhitungan, iterasi,
percabangan bisa diatasi dengan membuat beberapa fungsi-fungis khusus dalam
bahasa javascript.
Kode Javascript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag
<head> yang dibuka dengan tag
<script type="teks/Javascript">.
<script type="teks/Javascript">
alert("Halo Dunia!");
<script>
Kode Javascript juga bisa diletakkan di file tersendiri yang berekstensi. js
sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang
dimaksud menggunakan contoh kode seperti berikut:
<script type="teks/Javascript" src="alamat.js">
</script>
Penulisan JavaScript
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag
<head> yang dibuka dengan tag <script type="teks/javascript">. <script type="teks/javascript">
alert("Halo Dunia!"); <script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js
(singkatan dari JavaScript. Untuk memanggil kode JavaScript yang terdapat di file
sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang
dimaksud menggunakan contoh kode seperti berikut
<script type="teks/javascript" src="alamat.js"> </script>
Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau
dipanggil berdasarkan trigger pada event tertentuPeletakkan script di head akan
menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil.
<html>
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>.Ketika
menempatkan script pada bagian <body> berarti antara isi dan JavaScript
<html>
Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak
terbatas.[7]
External J avaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam
beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus
menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat
ditulis di file secara eksternal.[7] Jadi, antara dokumen HTML dan JavaScript
dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas
JavaScript tersebut disimpan dengan ekstensi .js
J avaScript : js/xxx.js document.write("pesan ini tampil ketika halaman
diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag
<script> pada halaman HTML-nya
<html>
<p>Script di atas berada di berkas "xx.js" (eksternal) </p> </body>
</html>
2.9 CSS
CSS (Cascading Style Sheets) digunakan dalam kode HTML (Hypertext Markup
Language) untuk menciptakan suatu kumpulan Style yang terkadang dapat
digunakan untuk memperluas kemampuan HTML (Hypertext Markup
Language). CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk
format tampilan HTML (Hypertext Markup Language), bahasa yang
direkomendasikan W3C (World Wide Web Consortium) untuk melukiskan gaya
seperti huruf, warna, ukuran, jarak, posisi pada dokumen-dokumen web. CSS
(Cascading Style Sheet) sangat membantu para web designer untuk memperindah
halaman web template.
CSS (Cascading Style Sheet) sama fungsinya dengan cara format HTML
(Hypertext Markup Language) biasa, namun CSS (Cascading Style Sheet)
mempunyai lebih banyak elemen yang bisa peneliti atur.
Tag table punya elemen border, CSS (Cascading Style Sheet) juga punya
format untuk border namun lebih detail lagi seperti : border-top, border-right,
border-bottom, border-left. artinya lebih kompleks karena memungkinkan peneliti
membuat sisi border yang berbeda.
Versi
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3.
CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2
dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang
mampu melakukan banyak hal dalam desain website. CSS2 mendukung
layout) dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan
lebih baik dari versi pertama.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya
animasi warna hingga animasi 3D. CSS3 desainer lebih dimudahkan dalam hal
kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni
@media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple
background, border-radius, drop-shadow, border-image, CSS Math, dan CSS
Object Model.
Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
color: #0789de; }
Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit
oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.
Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property,
dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu :
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara
penulisannya cukup dengan menambahkan atribut style=" ..." dalam tag HTML
tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan
memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet:
<head>
<title>Contoh Bentuk Inline</title> </head>
<body bgcolor="#FFFFFF"> <p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body> </html>
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag
<body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan
digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag
HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html> <head>
<title>Contoh Bentuk Embedded/title> </head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in} h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in} </style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1> <p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p> </body>
</html>
Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih,
didesain. Kalau halaman web yang lain akan didesain dengan model yang sama,
maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan
diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju
berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang
ada di skrip tersebut.
Fakta Menggunakan CSS
Fakta Menggunakan CSS diantaranya :
• Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak
didukung oleh browser-browser lama.
• Lebih fleksibel dalam penempatan posisi layout. Dalam layouting
CSS, peneliti mengenal Z-Index untuk menempatkan objek dalam posisi
yang sama.
• Menjaga HTML dalam penggunaan tag yang minimal, hal ini
berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
• Dapat menampilkan konten utama terlebih dahulu, sementara
gambar dapat ditampilkan sesudahnya.
• Penerjemahan CSS setiap browser berbeda, tata letak akan berubah
jika dilihat di berbagai browser
• CSS adalah layouting "Masa Depan" dengan penggabungan
Contoh Berkas CSS
<p>This is a paragraph.</p>
(bahasa Inggris: database management system) atau DBMS yang multithread,
multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat
MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General
Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial
untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.
[8]
Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat lunak
dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki
perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta hampir
atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang
mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael
"Monty" Widenius.
(wikipedia.2011) [9]
2.11 Internet
Keberadaan internet pertama kali terdapat di negara Uni Sovyet, ketika
pada tahun 1957 telah meluncurkan sebuah satelit bernama Sputnik. Peluncuran
Sputnik ini dirasakan sebagai ancaman oleh musuh besar mereka yaitu Amerika
Serikat. Setelah Uni Sovyet negara lain seperti Amerika Serikat juga mendirikan
badan yang disebut Research Project Agency (ARPA). ARPA bernaung dibawah
Departemen Pertahanan AS atau yang dikenal dengan Departement of Defense
(DoD).
Pada tahun 1969, DoD memberi tugas kepada ARPA untuk membangun
sebuah mata rantai komunikasi antara DoD dengan militer yang tidak dapat
disabotase oleh musuh mereka. Jaringan komunikasi yang diciptakan ini disebut
ARPANET. Pada awalnya ARPANET hanya menghubungkan 4 situs saja.
ARPANET yang ditemukan dan dikenal secara singkat sebagai internet, dibangun
dari satu set protokol yang dikenal sebagai Transmition Control Protocol/Internet
Protocol atau TCP/IP. Pada tahun 1986 U.S National Security Foundation (NSF)
membangun NFSNet yang menghubungkan lima pusat super komputer NSF di
Walaupun Masuknya NSFNet pada bidang ini merupakan faktor utama
perkembangan internet, namun titik balik terbesarnya adalah tahun 1991. Ketika
NSF mulai membuka komersialisasi lalulintas pada jaringan, maka sejak tahun
1991 itu pula seluruh lalulintas jaringan NSF dipergunakan oleh institusi
pemerintah dan pendidikan. Jaringan-jaringan komersial segera muncul dan
populasi internetpun berkembang pesat. [6]
2.12 Web Browser
Web browser adalah suatu perangkat lunak yang digunakan untuk
menampilkan halaman-halaman website yang berada di internet. Adapun
beberapa istilah yang sering muncul pada saat peneliti menggunakan web browser
adalah sebagai berikut :
a. Website adalah halaman-halaman web saling terhubung dalam suatu
website
b. Homepage adalah halaman awal ketika suatu situs dimunculkan, biasanya
juga sebagai penghubung ke website-website yang lain
c. URL adalah alamat unik pada suatu halaman web, yang sigunakan web
server untuk mengirimkan halaman web tersebut ke komputer yang
mengaksesnya
d. WWW adalah kumpulan dari dokumen-dokumen elektronik yang
kemudian disebut web, tiap dokumen tersebut dinamakan web page
e. Portal adalah web yang menyediakan berbagai jenis layanan misal
Terdapat beberapa macam web browser yang dapat peneliti pakai untuk
menampilkan halaman-halaman website. Dengan adanya web browser ini dapat
mendukung sebuah sistem informasi berbasis web agar berjalan dan dapat
dioperasikan. [10]
2.13 Siklus Hidup system
Siklus hidup syitem adalah sebuah aplikasi dalam pendekatan sistem untuk
mengembangkan sistem informasi berbasis computer. Siklus hidup sistem terbagi
menjadi 3 tahap, yaitu.
Perencanaan
Meliputi perumusan masalah, pendefinisian masalah, penyatuan
keobyektifan sistem, mengenali bagian – bagian sistem, melakukan studi
kelayakan, menyiapkan sebuah proposal sistem, menyetujui atau menolak proyek
serta menetapkan sebuah mekanisme control.
Analisis
Meliputi pengesahan studi sistem, pegorganisasian tim proyek,
mendefinisikan kebutuhn informasi, mendefinisikan kriteria sistem, menyiapkan
proposal desain serta menyetujui atau menolak proyek desain.
Desain
Meliputi persiapan detail sistem, mengenali konfigurasi alternative sistem,
melakukan evaluasi konfigurasi alternatif sistem, menyeleksi konfigurasi terbaik,
menyiapkan proposal penerapan serta menyetujui atau menolak penerapan sistem.
Meliputi perencanaan penerapan, perumusan penerapan, pengenalan
hardware, pengenalan software, menyiapkan database, menyiapkan fasilitas fisik,
melakukan pelatihan terhadap user, menyiapkan proposal penerapan sistem baru,
menyetujui atau menolak proposal sistem baru, serta menerapkan penggunaan
sistem baru.
Operasi (Sistem)
Meliputi penggunaan sistem, audit sistem, perawatan sistem, menyiapkan
proposal perancangan ulang, serta menyetujui atau menolak proposal perancangan
ANALISIS DAN PERANCANGAN SISTEM
Web merupakan salah satu fasilitas membantu kemudahan orang untuk
mencari sesuatu di dunia maya. Dan didunia website sendiri katalog online
merupakan jasa pembantu dalam memilih sebuah barang dengan melihat
bagaimana bentuk barangnya, fungsi barang dan kisaran harganya. Tetapi harga
sebuah barang khususnya motor sendiri selalu tidak stabil.
3.1. Analisa Sistem
Berdasarkan uraian permasalahan diatas maka dapat diambil kesimpulan
bahwa yang dibutuhkan adalah web yang bersifat dinamis karena bisa mengikuti
perkembangan motor terbaru dan dimasukkan menjadi sebuah katalog tanpa harus
merombak keseluruhan isi web dana juga membuat halaman khusus untuk admin.
Jadi di WEB KASTOR, user bisa mendapatkan referensi tentang produk
sepeda motor sesuai kriteria yang diinginkan, dan bisa melihat koleksi sepeda
motor tersedia di WEB KASTOR. Kemudian admin bisa menambahkan produk
sepeda motor, mengubah jenis spesifikasi sepeda motor, dan menghapus produk
3.2. Perancangan Sistem
Pada tahap ini akan dilakukan perencaan dan perancangan model
mengenai aplikasi yang akan dibuat. Beberapa tahapan perancangan akan
dipaparkan satu persatu dalam setiap point pembahasan berikut ini.
3.2.1. Deskr ipsi Umum
Web dinamis adalah sebuah website yang dibuthkan dikarena ketika ingin
menambah data maupun menguranginya, penelit i tidak perlu merubah dan
mengatur seluruh isi web. Keamanan web dapat lebih diperkuat setelah
melakukan tahapan testing pembuatan login administrator. Untuk menguji
keamanan web perlu diadakan testing mengenai berbagai jenis serangan yang
sering terjadi seperti error pada sistem, informasi login akun, file password dan
semacamnya. Melihat beberapa kemiripan dalam aktifitas testing maka
sebenarnya aktifitas ini dapat diwakili ke dalam aplikasi dan menjadi layaknya
alat bantu agar melakukan pengujian dengan praktis.
3.2.2. Kebutuhan Sistem
Sebuah aplikasi membutuhkan beberapa hal agar sistemnya dapat
benar-benar bekerja sebagaimana semestinya. Dalam menjalankan sebuah web maka
pengguna minimal telah memenuhi beberapa persyaratan standar yang dibutuhkan
oleh pengguna antara lain:
1.Akses Internet
2.Browser yang telah terpasang pada sistem operasi
mem iliki Vari able cha racters (30)
<M> Variabl e characte rs (30) Inte ger
Variabl e cha racters (30) <M>
Variab le characte rs (30) <M> Variabl e characte rs (30) Variabl e characte rs (20)
<M>
3.2.3. Perancangan Parameter Pencarian
Pada sub bab ini akan di bahas tentang pencarian yang adalah salah satu
fungsi yang ada pada web ini. Di dalam fungsi pencarian, yang terpenting adalah
sebuah parameter yang berguna untuk membedakan yang penelit i
inginka.parameter yang akan di gunakan adalah, Budget, genre, Dimensi (p x l x t)
(mm), mesin, transmisi, rangka. Untuk memudahkan penguna, maka di dalam fungsi
pencarian, tidak perlu menginput atau mengisi semua parameter yang ada. Cukup
parameter yang di inginkan oleh penguna.
3.2.4. Conceptual Data Model
Dalam Perancangan ini digunakan untuk merancang sebuah database,
yang nantinya akan dikoneksikan ke bahasa pemrograman yang digunakan.
Perancangan tersebut dapat dilihat pada gambar dibawah ini.
FK_PRODUK_ M_MEM ILIKI_MERK_ MOT
FK_JENIS_SP_MEM PUNYAI_ KATEGORI
FK_JENIS_ SP_MENCAKUP_PRODUK_M
FK_PRODUK_M_MEL IPUT I_GENRE
FK_MERK_ MOT _MENGAMBIL_GAMBARFK_GAMBAR_MENGAMBIL _MERK_MOT
FK_GAMBAR_ME NGAMBIL _PRODUK_M
Gambar 3.2. Physical Data Model
3.2.5. Alur Pengaksesan Aplikasi
Pada perancangan tahap ini adalah berguna dalam mendefinisikan dan
memahami beberapa aktifitas yang nantinya akan dilakukan pengguna saat
mengakses aplikasi ini. Dalam menggunakan aplikasi sebenarnya terdapat urutan
langkah dasar yang sering dilakukan oleh pengguna. Urutan aktifitas ini akan
menjadi landasan sebuah aplikasi yang dibentuk. Hal ini dapat dilihat pada alur
pengaksesan aplikasi yang direncanakan dalam mendukung aktifitas pengguna
saat menggunakan aplikasi. Alur pengaksesan aplikasi dapat diperhatikan pada
Gambar 3.3. Flowchart Alur Pengaksesan Aplikasi.
3.2.6. Use Case Diagram
Para rancangan kali ini berguna dalam menunjukkan aktifitas yang bisa
dilakukan. Semua aktifitas ini akan dipaparkan dalam sebuah diagram use case.
Aktifitas system secara keseluruhan dapat diketahui pada Gambar 3.4 dibawah ini.
Gambar 3.4. Use Case Diagram
Berdasarkan diagram pada Gambar 3.2 terdapat 2 aktifitas saja. Jadi pada
use digram hanya ada dua pengelompokan jenis. Pengguna bertindak sebagai user
dan pengguna sebagai administrator pengolah data yang berda didalam katalog
tersebut.
Aktifitas pertama adalah pengguna saja(user). Pengguna hanya dapat
melihat isi dan mencari data sesuai yang diinginkan saja dalam menu yang
disediakan .
Aktifitas pertama tersebut merupakan awal dari aktifitas kedua yaitu
pengguna bisa masuk sebagai admin.Perbedaan admin sendiri dengan user biasa
adalah tugas admin yang bisa bertugas membuat isi dari katalog, dan mampu
merubah keseluruhan isi website dan itu hanya bisa dilakukan jika bis masuk ke
dalam halaman admin.
membuat data merk sepeda pada
melihat spesifikasi
pencarian dengan satu kategori Pencarian lebih dari satu kategori
membuat produk
3.2.7. Activity Diagram
Pada bagian ini berguna dalam mendefinisikan rincian tindakan yang
dilakukan setiap aktifitas dalam web system informasi ini. Aktifitas utama
meliputi fungsi dan perbedaan antara admin dengan user biasa, setiap yang masuk
dalam system informasi ini disebut dengan pengguna tapi ada 2 perbedaan user
adalah pengguna biasa, sedangkan admin adalah pengguna sekaligus pengatur
keseluruhan isi dari system informasi yang akan ditampilkan kepada user biasa.
Aktifitas ini memiliki rangkain langkah-langkah hingga menjadi sebuah suatu
aktifitas utama yang utuh. Dalam hal ini memiliki rangkaian tugas seperti yang
ditunjukkan pada Gambar 3.5.
Gambar 3.5 Activity Diagram Mengisi katalog pencarian sepeda motor yang
diinginkan
3.2.8 Class Diagram
Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus
menawarkan layanan untuk memanipulasi keadaan tersebut (metode/fungsi).
Class diagram menggambarkan struktur dan deskripsi class, package dan object
beserta hubungan satu sama lain seperti containment, pewarisan, asosiasi, dan
lain-lain. Atribut dan metode dapat memiliki sifat-sifat yang dibawa oleh
Berikut ini merupakan class diagram dari sistem aplikasi ini dapat dilihat pada
gambar 3.6.
Gambar 3.6 Class Diagram
Berikut ini adalah penjelasan dari class diagram :
1. Class Diagram login merupakan class inti karena dengan melakukan proses
login, kita dapat mengakses proses-proses dari class lainnya. Class login
memiliki atribut username dan password, serta memiliki method mengisi(),
validasi(), menampilkan hasil().
2. Class Diagram produk terdiri atas atribut id_produk, id_genre, id_merk,
nama_produk, harga_produk Class produk memiliki method mengelola().
3. Class Diagram jenis spesifikasi terdiri atas atribut id_jenis, id_produk,
4. Class Diagram gambar terdiri atas atribut id_gambar, id_produk, id_merk,
judul_gambar, alamat_gambar, keterangan_gambar. Class gambar memiliki
method mengelola().
3.2.9 Desain Antar muka
Hal yang paling penting yang dapat dilakukan dan perlu perencanaan lebih
lanjut lainnya adalah memastikan antarmuka pengguna dapat bekerja untuk
mendukung fungsionalitas aplikasi. Keberhasilan sebuah program ditentukan dari
pengguna itu sendiri. Dalam hal ini pengguna harus paham akan aplikasi yang
digunakan. Hal tersebut hanya terwujud jika antarmuka aplikasi tidak
membingungkan bagi pengguna Dan mudah untuk di gunakan.
A. Antar muka Fitur Menu awal
Pada bagian ini merupakan desain antarmuka dari penentuan tampilan
awal menu. Dengan adanya tampialn yang bagus di awal. Maka di harapkan
pengguna akan lebih tertarik pada menu-menu lainya
Gambar 3.7. Antarmuka Searching Kendaraan
Pada antarmuka ini, pengunjung dapat mencari jenis kendaraan yang
sesuai dengan keinginan pengunjung yang terliputi dari budget, genre,
dimensi, mesin, kapasitas, transmisi dan rangka.
B. Antar muka Menu Katalog
Desain berikut ini adalah gambaran dari gallery yang ada di dalam
Web ini. Antarmukanya seperti yang ditunjukkan pada gambar dibawah ini.
Gambar 3.8. Antarmuka Form Katalog
Menu ini berguna untuk melihat keseluruhan sepeda motor yang ada di
dalam database di web ini. Di harapkan dengan adanya menu ini, penguna
dapat lebih leluasa untuk mencari informasi tentang sepeda motor yang akan
mereka cari.
C. Antar muka Menu Admin
Desain antamuka pada bagian ini adalah berfungsi mempermudah para
admin untuk mengganti dan mengupdate. ini dapat diperhatikan pada Gambar
Gambar 3.9. Antarmuka Menu Admin
Dalam menu ini terdapat Username dan Password, di harapakan dengan
adanya ini, hanya orang-orang yang tertentu yang akan dapat menganti dan
mengupdate database dari web ini. Di dalam menu admin, akan terdapan
menu-menu yang lainya. Yang berguna sebagai penunjang kerja dari para admin, di
antaranya :
• Sub menu Motor
Gambar 3.10. Sub Menu Motor
but t on but t on but t on
User name
User name
but t on
Gambar
but t on
but t on
but t on but t on
Input tan Data
Input tan Data
Input tan Data
Brow se Logo
Menu ini brfungsi untuk mengedit Sepeda motor yang ada di dalam data
base, semisal tentang yang berkaitan Merk, Logo, nama Dll
• Sub menu Atribut
Gambar 3.11. Sub Menu Atribut
Menu ini berpengaruh tentang sesuatu yang menyakut dengan onderdile
dan atribut yang ada pada Web ini
• Sub menu Ubah pasword
Gambar 3.12. Sub Menu Ubah Password
Pada antar muka di menu ini adalan fungsi untuk menganti password. Yang
bertujuan agar para admin dapat lebih menjamin keamaanan dalam web ini.
but t on but t on but t on
but t on
but t on
Kat egori
Jenis At ribut
but t on but t on but t on but t on
but t on but t on Sandi Lama
42
IMPLEMENTASI
4.1 Lingkungan implementasi
Pada dasarnya pembuatan sistem informasi ini dapat dibuat disegala sistem
operasi baik sistem operasi berbasis dari Windows, Linux, Mac Os dan
sebagainya. Didalam pengimplementasian sistem informasi ini menggunakan
sistem operasi keluarga platform windows. Untuk lebih tepatnya menggunakan
Windows 7 dalam melakukan penerapan terhadap sistem. Windows 7 yang masih
standart tanpa modifikasi dapat dipastikan kestabilannya dibandingkan
pendahulunya yaitu Windows Vista.
Pada pengimplementasiannya juga dibutuhkan web service seperti
Apache, Sql dan Php. Sebenarnya kalau mau menginstal secara manual harus
menginstal satu demi satu dan mensetting secara manual penempatan data. Tetapi
ada juga web service yang langsung instan satu paket yaitu menggunakan
XAMPP ataupun WAMPP . Pada aplikasi ini saya menggunakan XAMPP. Jika
ditinjau dari segi bahasa web yang didukung adalah berupa HTML, Javascript,
CSS,PHP dan semacamnya bisa tercakup dalam XAMPP.
Pada sisi program pembuatan desain dan pengkodean sistem informasi ini
saya menggunakan produk dari Adobe Corporation yaitu Adobe Photosop dan
Adobe Dreamweaver. Adobe Photosop digunakan untuk mendesain gambar dan
sedangkan Adobe Dreamweaver digunakan untuk pengaturan dan pengkodean
script serta pengaturan web. Semua output percobaan aplikasi ditampilkan lewat
4.2 Implementasi Pr ogram
Pengartian dari implementasi program disini yaitu penerapan program dari
model-model perancangan ke dalam pembangun sistem informasi berbasis web.
Beberapa hal yang berhubungan dengan implementasi program turut serta
dilakukan implementasi. Misalnya seperti pembuatan tampilan user yang mana
nantinya ini merupakan tampilan pertama yang akan muncul dari aplikasi ini, dan
ditujukan untuk pengguna umum saja. Untuk pembuatan tampilan admin nantinya
ini dikhususkan untuk admin saja .
Implementasi dari sisi program yang akan dilakukan meliputi dari proses
pembuatan, pendefinisian, pengkodean, dan konfigurasi program. Beberapa yang
perlu didefinisikan adalah hal-hal mengenai bagaimana proses ini akan disusun
dan dibentuk serta fungsi yang disediakan didalamnya. Jika dari sisi pengkodean
maka melakukan pemanggilan database dilakukan melalui bahasa php ke mysql .
yang ada dalam XAMPP. Nanti juga dijelaskan maksud dari masing-masing
fungsi yang digunakan dalam pembuatan sistem informasi berbasis web ini.
4.2.1 Pembuatan Tampilan User
Pada tahapan pembuatan tampilan user sendiri. Sebenarnya banyak sekali
pengkodean didalamnya, tetapi yang paling awal dipanggil adalah index.php. Dan
didalam folder yang berektensi “.php” banyak sekali bahasa php didalamnya,
table dibawah ini akan menjelaskan beberapa fungsi dari script php yang
Tabel 4.1. Daftar Tabel Fungsi Script php
Scr ipt Fungsi
<?php Awalan untuk mengeksekusi bahasa php
?> Penutup bahasa php
$variabel Penginisial variable
Include Memasukan/ memanggil data dari halaman lain
$_post Penempatan data dan pemanggilan data dari database
If Jika
Elseif Jika tidak
Echo Menampilkan
While Perulangan data selama data masih ada
Else Pilihan jika tidak
mysql_select_db Memanggil database
mysql_query Memanggil data didalam table database
mysql_connect Database dikoneksikan
or die Jika mati/tidak terpanggil
mysql_error DatabaseError
mysql_fetch_array Pemanggilan data yang berada dalam query
Select Pilih
From Dari
session_start Jika dimulai perintah maka akan berjalan
$_SESSION Data dimasukan dan dimulai
Date Tanggal
stripslashes Melindungi pemasukan data
mysql_num_rows Menghitung jumlah baris dari eksekusi query
4.2.1.1Koneksi Data
Pada pengkonfigurasian dan penyambung antara web dengan database
maka diperlukan koneksi, dan didalam suatu halaman yang ingin dihubungkan
maka dibutuhkan script pemanggil tempat database dan database yang mau
diambil maka saya membuat conectdb.php yang berada dalam folder config.
Terdapatnya target website berupa alamat database maka sistem akan melakukan
pemanggilan data untuk memenuhi permintaan pengguna tersebut, maka
dialamatkan sebagai connect.php.
Pengkodean halaman connectdb.php
Gambar 4.1 Potongan Script connectdb.php
<?php
class configsys{
/ / global configurat ion var $debug_m ode = true; var $exit _on_error = t rue; / / Dat abase set t ing
var $db_host = " localhost "; var $db_user = " root " ; var $db_passw ord = " " ;
4.2.1.2Pengkodean Method Class
Dalam OOP selalu ada yang namanya class, method (behavior) dan
property (attribute). Class bisa dikatakan sebagai cetakan untuk membuat objek.
Method bisa dikatakan sebagai aksi yang dimiliki oleh class. Sedangkan attribute
adalah karakteristik atau sifat-sifat yang dimiliki oleh objek yang dibuat nantinya.
Pendeklarasian suatu class selalu terdapat sintak class yang kemudian diikuti
dengan nama class dan setelah itu diikuti oleh body class
Pengkodean method pengambilan data
Gambar 4.2 Potongan Script class.php untuk pengambilan data
/ / met hod mengambil dat a
funct ion select($sql,$get numrow s=false) { $r = mysql_query($sql);
if (! $r) {
$t his->set _error(" An Error on : $sql <br/ >mysql_error : " .mysql_error()); return false;
} if($get numrow s==t rue) {
$num_row s = mysql_num_row s($r); mysql_free_result ($r);
return $num_row s; } else ret urn $r; }
Pengkodean method insert data
Gambar 4.3 Potongan Script class.php untuk insert data
Pengkodean method penghapusan data
Gambar 4.4 Potongan Script class.php untuk penghapusan data
/ / m et hod mem asukkan dat a funct ion run_sql($sql,$is_update) { $r = mysql_query($sql);
if (! $r) {
$st rmsg = ($is_updat e) ? "update" : "insert " ;
$t his->set _error(" Error on $st rmsg : $sql <br/ >mysql_error : " .mysql_error()); ret urn false; }
if(! $is_updat e){$id = mysql_insert _id(); if ($id == 0) ret urn t rue;
else ret urn $id; } else {
$row s = mysql_affected_row s(); if ($row s == 0) return t rue; else ret urn $row s; } }
/ / m et hod menghapus dat a
funct ion delet e_sql($t able,$condit ion){
$act ion_del=m ysql_query(" DELETE FROM $table WHERE $condit ion" ); if(! $act ion_del) {
$t his->set _error(" An Error on delet e : $sql <br/ >mysql_error : ".m ysql_error()); return false;
Pengkodean method update data
Gambar 4.4 Potongan Script class.php untuk update data
Gambar 4.5 Potongan Script class.php untuk update data
4.2.1.3Pembuatan Halaman Home / Halaman Utama
Gambar 4.6 Tampilan Awal/index.php/home
/ / m et hod mengubah dat a
funct ion updat e($t able , $dat a , $w here) {
foreach ( $dat a as $kolom => $row ) {$set []= $kolom." ='" .$row ." '" ; }
$set = im plode(',',$set );
$query = " UPDATE ".$t able." SET " .$set." WHERE ".$w here ; $this->query($query);
Pada tampilan awal disuguhkan dengan mode pencarian motor yang ingin
dicari oleh user. Jadi user diberi kemudahan menemukan motor seperti apa yang
diinginkan tanpa harus klik sana-sini. Mode pencarian akan ditampilkan dalam
bentuk katalog disamping mode pencarian yang telah disediakan.
Mode pencarian berdasarkan spesifikasi motor. Jadi user memasukkan
spesifikasi yang dinginkan. Untuk memperoleh informasi motor sesuai kriteria
user. / / proses pencarian
if ($harga==" semua") $harga=" ";
else $harga=" and harga_produk-00 " .$harga; if ($genre==" Semua" ) $genre=" ";
else $genre=" and nama_genre='" .$genre." '"; if ($panjang==" Semua" ) $panjang=" ";
else $panjang=" and panjang-0.0" .$panjang; if ($lebar==" Semua" ) $lebar=" ";
Gambar 4.7 Potongan Script index.php
else $tipem esin=" and t ipe_mesin='".$t ipemesin." '"; if ($volum e==" Semua" ) $volume="" ;
else $volume=" and volum e_mesin-0.0" .$volum e; if ($t ransmisi==" Semua") $t ransmisi=" ";
else $transmisi=" and t ransmisi='" .$t ransmisi." '"; if ($rangka==" Semua" ) $rangka=" ";
else $rangka=" and rangka='" .$rangka." '" ;
$sql_show =" select * from v_produk_spek_pivot w here 1
" .$harga.$genre.$panjang.$lebar.$t inggi.$t ipemesin.$volum e.$t ransmisi.$rangka." group by id_produk" ;
$result _show =mysql_query($sql_show ,$koneksi) or die ("gagal menampilkan dat a" .mysql_error());
$no=1;
if(m ysql_num_rows($result _show ) > 0)
w hile($data_show =mysql_fet ch_array($result _show )) {
if($no%2==0)
$bgcolor=" class=\ " light \ "" ; else
4.2.1.4Tampilan Video
Pada sistem informasi ini juga di sediakan tampilan video yang
dimasukkan pada mempublish katalog.
Gambar 4.8 Tampilan Video
Penkodean Halaman Video
Gambar 4.9 Potongan script katalog-popup.php
/ / t ampilan video
<script type=" t ext / javascript "> jw player(" container" ).set up({ flashplayer: "script s/ player.sw f" ,
file: " <?php echo $row ['pat h_video'] ?>" , height : 250,
