| baris1kolom1 | baris1kolom2 |
| baris2kolom1 | baris2kolom2 |
Tag ini digunakan untuk membuat paragraph dalam HTML. Jadi apabila menggunakan tag
sama saja menulis tag…
Tag ini digunakan untuk menampilkan teks dokumen sesuai dengan penulisan teks pada editor. Tag ini berguna untuk penggunaan spasi antar baris dan memudahkan untuk meletakkan tab dalam dokumen.
2.2.1.4 Membuat Form Fasilitas form dapat digunakan untuk membuat formulir pada halaman web. Dengan formulir user bisa memasukkan data-datanya, baik yang berupa informasi maupun keperluan yang lain. Ada beberapa tag yang digunakan dalam pembuatan form ini:
Tag Tag ini digunakan untuk membuat form. Format penulisannya adalah sebagai berikut: …
Tag Tag ini digunakan untuk membuat komponen-komponen input dari sebuah form. Format penulisannya adalah sebagai berikut: …
Tag Tag ini digunakan untuk membuat suatu pilihan pada sebuah daftar. Format penulisannya adalah sebagai berikut: …
Tag ini digunakan di dalam tag . Formatnya adalah : item
Tag Tag ini digunakan untuk membuat kotak masukkan yang banyak baris. Format penulisannya adalah sebagai berikut: …
2.2.1.5 Menyisipkan Script Dalam pembuatan halaman web biasanya perancang web ingin menggabungkan bahasa pemrograman lain (script) agar halaman web terlihat lebih bagus. Untuk memasukkan skrip ke dalam dokumen HTML digunakan tag . Format penulisannya adalah sebagai berikut: …script statement…
2.3
PHP (Hypertext Prepocessor) PHP adalah teknologi yang dikembangkan pada tahun 1995 oleh Rasmus
Lerdorf. Beberapa versi awal yang tidak dipublikasikan digunakan untuk situs pribadinya sebagai pencatat siapa saja yang mengakses daftar riwayat hidup yang ia tampilkan di situsnya. PHP merupakan singkatan dari PHP : Hypertext Preprocessor yang merupakan nama baru dari kepanjangan aslinya yaitu Personal Home Page Tool. PHP berasal dari beberapa script Perl yang kemudian terus berkembang dan akhirnya menciptakan versi “real” dari PHP yang dikenal sebagai PHP/FI (PHP + Form Interpreter). PHP 3.0 dianggap sebagai “first real version” dari PHP, walaupun sudah banyak situs yang menggunakan PHP sebelum PHP 3.0 di release. PHP 3.0 merupakan penulisan ulang source kode PHP dari awal oleh Andi Gutsman dan Zeev Zuraski, saat itu lebih dari 10 % situs yang berada di internet menggunakan PHP 3.0. PHP 4 direlease secara official pada bulan Mei tahun 2000. Sampai saat ini PHP telah digunakan lebih dari 9 juta domain yang berada di internet.
Dengan menginstal Xampplite, sebenarnya kita tidak hanya menginstal PHP saja, tetapi juga sekaligus menginstal Apache sebagai web server dan MySQL sebagai databasenya. Adapun kelebihan-kelebihan dari PHP yaitu : PHP dapat diperoleh secara gratis. PHP mudah dibuat dan kecepatan akses tinggi. PHP dapat berjalan dalam web server yang berbeda dan dalam sistem operasi yang berbeda pula. PHP dapat dijalankan pada sistem operasi UNIX, Windows98, Windows NT dan Macintosh. PHP adalah termasuk bahasa yang embedded (dapat digabung atau diletakkan dalam tag HTML). PHP didukung oleh banyak sistem database, yaitu: oracle, Sybase, MySQL, solid, generic ODBC, postgres SQL.
2.3.1 Script PHP Script PHP diawali oleh tanda ‘’, pemberian tanda script pada PHP 3.0 masih berlaku pada PHP 4.0. Sebagai konsistensi, kita menggunakan tanda ‘’ sebagai akhir dari script PHP. Nama file yang mengandung script PHP sejak versi 4.0 menggunakan ekstensi file .php sebagai standar. Pada versi sebelumnya ekstensi nama script PHP beragam, ada yang menggunakan .php3 ada juga yang menggunakan .phtml, sebagai standar sebaiknya kita menggunakan ekstensi .php untuk memudahkan kita melakukan pengelolaan file yang kita miliki. PHP mempunyai dua jenis penulisan script yang akan dieksekusi oleh webserver, yaitu : a. Embedded script, yaitu cara penulisan script PHP dengan memasukkannya ke dalam script HTML. Contoh embedded script: File Contoh1.php
Contoh embedded script
b. Non-embedded script, yaitu cara penulisan script PHP yang tidak dimasukkan ke dalam script HTML. Contoh non-embedded script: File Contoh2.php
2.3.2 Variabel dan tipe data Variabel digunakan untuk menyimpan data sementara dan nilainya bisa berubah-ubah setiap kali program dijalankan. Dalam PHP, setiap variable selalu dimulai dengan tanda $ dan diikuti dengan nama variabelnya, tidak melihat apakah data tersebut integer, real maupun string, PHP akan secara otomatis mengkonversi data menurut tipenya. Nama variabel dapat berupa kombinasi antara huruf alfabet dan angka dengan panjang maksimal 32 karakter. Berikut adalah aturan singkat variabel dalam PHP:
Diawali dengan tanda dollar ( $ ).
Bersifat case sensitive (membedakan huruf besar dan kecil).
Nama variabel hanya bisa diawali dengan huruf atau garis bawah, baru dapat diikuti dengan beberapa huruf atau angka maupun garis bawah.
Contoh yang benar: $nama=”indra”; $_umur=”20 tahun”; $_1001_malam=”cerita”; Contoh yang salah: $…umur=20; $1001_malam=”cerita”; // Kedua contoh ini salah karena tidak diawali dengan huruf atau _. Dalam bahasa pemrograman lain ada bermacam-macam tipe data, misalnya integer (bilangan bulat), float (bilangan pecahan), char (karakter angka dan huruf), string (kumpulan huruf atau angka), dan berbagai tipe data lainnya. PHP mempunyai lima macam tipe data, yaitu : a. Integer, contohnya : $umur=50; $nilai=60; $suhu=40; b. Float/double, contohnya : $harga=35000.00; $IPK=3.37;
10$panjang=12,77; c. String, contohnya : $nama=”indra”; $umur=”20 tahun”; d. Array, contohnya : $nama[0]=”indra”; $nama[1]=”Keren”; echo “Nama Saya=$nama[0] $nama[1]; /* outputnya: Nama Saya = indra keren e. Objek, contohnya : Class bikin_kopi { Function bikin ( ) { Return “masukan gula dan kopi ke dalam gelas, lalu tuang air mendidih”;}} $obj=new bikin_kopi; echo “cara membuat kopi adalah” .$obj -> bikin ( );
2.3.3 Konstanta Konstanta adalah variabel yang nilai tetap. PHP telah mendefinisikan beberapa konstanta seperti E_ERROR, E_WARNING, PHP_VERSION dan sebagainya. Cara membuat konstanta, standar penulisan konstanta : Define (“nama_konstanta”,”nilai_konstanta”); Contoh :
2.4
ERD (Entity Relationship Diagram) ERD merupakan notasi grafis dalam pemodelan data konseptual yang
mendeskripsikan
hubungan
antara
penyimpanan.
ER
digunakan
untuk
memodelkan struktur data dan hubungan antar data, karena hal ini relatif kompleks. Dengan ERD kita dapat menguji model dengan mengabaikan proses yang harus dilakukan. Ada beberapa komponen dalam penggambaran sebuah ERD, antara lain :
2.4.1 Entitas Entitas merupakan suatu individu yang mewakili suatu yang nyata eksistensinya dan dapat dibedakan dengan yang lainnya. Mahasiswa dalam suatu universitas, mata kuliah dalam suatu universita dapat dikatakan sebagai sebuah entitas. Simbol yang dipergunakan untuk entitas adalah persegi panjang.
Gambar 2.2 Entitas 2.4.2 Atribut Setiap entitas memiliki sekumpulan atribut yang saling berkaitan. Maka atribut
merupaka
sifat
atau
karakteristik
dari
suatu
entitas yang
menyediakan penjelasan detail tentang entitas tersebut. Misalnya, seorang mahasiswa dapat memiliki atribut-atribut npm, nama, alamat, tanggal lahir dan lain sebagainya. Simbol atribut dalam ERD adalah elips.
Gambar 2.3 Attribut
2.4.3 Relasi Relasi menunjukkan adanya hubungan atau keterkaitan antara suatu entitas dengan entitas lain. Dalam ERD sebuah relasi disimbolkan dengan gambar belah ketupat.
Gambar 2.4 Relasi
Setiap relasi mempunyai derajat relasi untuk menjelaskan jumlah entitas yang berpartisipasi dalam suatu relasi. Ada tiga jenis relasi, yaitu : a.
Unary (Derajat Satu) Satu relasi dihubungkan dengan satu entitas.
Gambar 2.5 Relasi Unary a.
Binary (Derajat Dua) Relasi yang terjadi jika dua entitas dihubungkan dengan satu relasi.
Gambar 2.6 Relasi Binary
c.
Ternary (Derajat Tiga) Relasi yang terjadi jika tiga entitas dihubungkan dengan satu relasi.
Gambar 2.7 Relasi Ternary 2.4.4
Penghubung Dalam penggambaran ERD, untuk menghubungkan entitas dengan
atributnya dan entitas dengan relationship-nya digunakan simbol garis.
Gambar 2.8 Simbol Penghubung
2.4.5
Cardinality Ratio dan Participation Constraint Cardinality ratio menjelaskan batasan jumlah keterhubungan satu
entitas dengan entitas lainnya. Jenis cardinality ratio yaitu: a.
One to one (1:1) : relasi satu ke satu.
1
1
Gambar 2.9 Relasi One to One
b.
One to many / many to one (1:M / M:1) : relasi satu ke banyak atau banyak ke satu.
1
M
Gambar 2.10 Relasi One to Many
c.
Many to Many (M:N) : relasi banyak ke banyak.
M
N
Gambar 2.11 Relasi One to Many
2.5
Basis Data Dalam sebuah aplikasi yang dinamis di butuhkan sebuah media yang di
rancang untuk menyimpan seluruh data informasi dengan karakteristik yang memudahkan bagi kita untuk mengambil, mengubah, mengisi dan menghapus data. Data tersebut dapat di integrasikan menjadi sebuah system yang dikenal sebagai Database Management System (DBMS). Database Management Sistem (DBMS) sangat di perlukan dalam pembuatan aplikasi ini karena semua informasi yang di tampilkan di dalam halaman web semua data nya disimpan disini. MySQL adalah Relational Database Management Sistem (RDBMS) yang didistribusikan secara gratis di bawah lisensi GPL (Generasl Public License). Yang pada awalnya MySQL dikembangkan pada platform sistem operasi Linux namun kemudian dikembangkan untuk penggunaan pada platform windows. Operasi dasar yang dapat dilakukan pada MySQL meliputi pembuatan (create) database, modifikasi database dan operasi Query (operasi yang digunakan untuk menampilkan atau mengambil data dari database). Pada SQL itu sendiri jenis operasi nya terbagi menjadi 2, yaitu : a. Data Definition Language (DDL)
Create
Alter
Drop
b. Data Manipulation Language (DML)
Insert
Update
Select
Delete
2.5.1 Create Database dan Tabel Membuat sebuah database dengan MySQL bukanlah hal yang sulit, perintah yang digunakan sederhana saja yaitu : MySQL > create database contoh_db; Membuat table-table didalam database yang telah dibuat juga dapat dilakukan dengan perintah create, dapat dilihat pada contoh berikut: MySQL> create table coba_table (nama char(40), nomor int);
2.5.2 Data Definition Language (DDL) Data Definition Language (DDL) merupakan standar khusus SQL yang mendefinisikan jenis data yang akan dibuat (baik berupa angka maupun huruf), cara relasi data, validasi data dan lain sebagainya. Berikut ini adalah penggunaan perintah-perintah DDL, antara lain : Pembuatan Database, digunakan untuk membuat database, table, index dan view. Sintaksnya adalah sebagai berikut : CREATE DATABASE nama_database ; Pembuatan Tabel, setelah database aktif, maka dapat dilakukan perintah lainnya pada database tersebut. Yang paling utama adalah pembuatan tabel. Sintaksnya adalah sebagai berikut ; CREATE TABLE nama_tabel; (nama_kolom1 jenis_kolom1,nama_kolom2 jenis_kolom2,…); Melihat Struktur Tabel, untuk melihat struktur tabel, digunakan perintah show tables. Sintaksnya adalah sebagai berikut : SHOW TABLES; Kemudian untuk melihat atribut yang ada pada setiap tabelnya digunakan perintah describe atau desc saja. Sintaksnya adalah sebagai berikut : DESCRIBE nama_tabel Atau DESC nama_tabel
Mengubah Struktur Tabel, mengubah struktur tabel ini dapat dilakukan jika tejadi kesalahan atau perlu diadakan pergantian. Untuk mengubahnya digunakan perintah :
Melakukan perubahan nama field atau kolom, sintaksnya adalah sebagai berikut : ALTER TABLE nama_tabel CHANGE nama_field_lama nama_field_baru tipe_data
Melakukan perubahan tipe data, sintaksnya adalah sebagai berikut : ALTER TABLE nama_tabel MODIFY nama_field tipe_data_baru
Menambah kolom, sintaksnya adalah sebagai berikut : ALTER TABLE nama_tabel ADD nama_kolom tipe_data_baru ;
Menghapus kolom. Penghapusan kolom bisa dilakukan jika memang tidak akan digunakan. Sintaksnya adalah sebagai berikut : ALTER TABLE nama_tabel DROP COLOM nama_field; Mengganti Nama Tabel, untuk mengganti nama tabel, perintah yang digunakan adalah Alter Table. Sintaksnya adalah sebagai berikut : ALTER TABLE nama_tabel_lama RENAME nama_tabel_baru; Menghapus Tabel, adakalanya terdapat tabel yang ingin dihapus karena tidak akan digunakan. Untuk menghapusnya digunakan perinyah Drop. Sintaksnya adalah sebagai berikut : DROP TABLE nama_tabel; Pembuatan Index, Untuk membuat indeks, sintaksnya adalah sebagai berikut : CREATE [UNIQUE] INDEX nama_index ON nama_tabel (nama_kolom); Pembuatan View, untuk membuat view, sintaksnya adalah sebagai berikut CREATE VIEW nama_view[(nama-kolom1,…)] AS SELECT statement
[WITH CHECK OPTION];
2.5.3 Data Manipulation Language (DML) DML (Data Manipulation Language) merupakan standar database dengan perintah SQL untuk memproses dan mengolah data agar terjaga dalam hal keakuratannya yang mempunyai fungsi untuk menampilkan, mengubah serta menghapus baris dalam tabel. Perintah DML, antara lain: Insert, digunakan untuk memasukkan data ke dalam kolom atau field pada tabel yang telah dibuat. Sintaksnya adalah sebagai berikut : INSERT INTO nama_tabel[(nama_kolom1,….)] VALUES(data1,…);
Update, digunakan untuk mengubah atau merevisi data apabila terjadi suatu kesalahan. Sintaksnya adalah sebagai berikut : UPDATE nama_tabel SET nama_kolom = ekspresi WHERE kondisi;
Delete, terkadang tidak semua data yang dapat digunakan. Maka untuk menghapus record atau data yang tidak terpakai digunakan perintah delete. Sintaksnya adalah sebagai berikut : DELETE FROM nama_tabel WHERE kondisi;
Select, perintah SELECT merupakan perintah dasar SQL yang digunakan untuk menampilkan data. Perintah ini memiliki cakupan yang sangat luas. Bentuk umumnya adalah sebagai berikut : SELECT [DISTINCT] nama_kolom From nama_tabel [WHERE kondisi] [GROUP BY nama_kolom] [HAVING kondisi] [ORDER BY nama-kolom [ASC/DESC]]
Untuk menampilkan semua kolom digunakan perintah : SELECT * FROM nama_tabel;
Untuk menampilkan beberapa kolom atau field, maka sintaksnya adalah : SELECT nama_fielf1, nama_field2,…..nama_fieldn FROM nama_tabel;
Limit, jika memiliki jumlah data yang sangat banyak maka akan lebih baik menggunakan limit untuk membatasi data yang ditampilkan. Pada prinsipnya penggunaan klausa ini memudahkan dalam melihat data yang berjumlah banyak dan dengan batas tertentu yang disukai.contoh : SELECT * FROM sahabat LIMIT 0,3;
Order By, klausa ini digunakan untuk mengurutkan data. Klausa ini memiliki pilihan ascending atau descending. Ascending (ASC) akan mengurutkan data menaik dari data yang terkecil. Sedangkan descending (DESC) adalah kebalikannya. Contoh : SELECT nama, nip, alamat FROM staff ORDER BY nip ASC;
2.5.4 Fungsi Aplikasi MySQL Fungsi MySQL digunakan sebagai penghubung antar SQL sehingga query tersebut dapat dijalankan pada server dan dapat dilihat hasilnya oleh client. Fungsi MySQL dapat juga dikatakan sebagai interpreter query karena setiap user menggunakan query SQL, maka fungsi ini harus diletakkan. Dengan kata lain query SQL tidak dapat dijalankan tanpa adanya fungsi MySQL. Fungsi MySQL ditunjukan pada tabel 2.1 Tabel 2.1 Fungsi MySQL Fungsi MySQL
Penggunaan
mysql_close()
Untuk menutup koneksi dengan MySQL
mysql_connect()
Untuk membuka koneksi dengan database MySQL
mysql_create_db()
Untuk membuat database
mysql_db_name()
Untuk menghasilkan hasil data
mysql_db_query()
Untuk mengantarkan query MySQL
mysql_error()
Untuk menampilkan pesan kesalahan dalam bentuk teks dari server MySQL
mysql_field_name() Menampilkan nama field khusus pada database MySQL mysql_free_result()
Untuk menghasilkan keadaan memori yang bebas
mysql_list_dbs()
Untuk menampilkan database di server MySQL
mysql_query()
Untuk mengirimkan perintah SQL
mysql_result()
Untuk menghasilkan data
2.5.5 Koneksi Server Dalam membuat web sistem informasi ini dibutuhkan beberapa scipt utama yang berbeda yaitu script HTML dan PHP untuk membuat aplikasi dan script SQL untuk membuat database dari aplikasi tersebut. Dari fungsi script yang berbeda tersebut akan dihubungkan sehingga menjadi sebuah aplikasi yang dinamis. Script penghubung itu sendiri merupakan sintaks dari PHP yang berfungsi untuk memanggil database dan server MYSQL. Karena MySQL merupakan suatu server database yang bersifat multi user yang hanya dapat berjalan di sisi server, maka user tidak dapat mengaksesnya tanpa ada izin dari server tersebut. Dalam MySQL, fungsi yang digunakan untuk koneksi ke server adalah mysql_connect() atau mysql_pcconnect(). Sintaksnya adalah sebagai berikut : Mysql_connect() (“server_host”,”user”,”password”) Berikut keterangan dari sintaks diatas, server_host adalah nama host server yang sedang digunakan, user adalah hak akses user pada database server MySQL, password adalah password user pada database server MySQL.
2.6
Pembuatan Kode - Kode Program Sesuai dengan tahapan yang digunakan pada perancangan sistem pakar
yaitu tool atau alat design untuk membantu dalam pembuatan web maupun kode
program. Berikut adalah editor yang digunakan untuk membantu pembuatan program: 1. Macromedia Dreamweaver 2004 Editor yang digunakan untuk membantu pembuatan program adalah Macromedia Dreamweaver 2004, merupakan suatu aplikasi yang digunakan untuk membuat, mendesain suatu halaman website. Dengan menggunakan tools yang disediakan oleh aplikasi Macromedia Dreamweaver sehingga dapat mendesain website lebih menarik dan lebih baik. Layar utama Dreamweaver 2004 ditunjukan pada gambar 2.1
Gambar 2.12 Layar Utama Dreamweaver 2004
Bagian-bagian (panel) dari Dreamweaver
Insert Bar Merupakan tombol menu yang digunakan penulis untuk memasukkan beberapa type object seperti gambar, tabel, dan layar ke dalam dokumen. Ada beberapa menu yang disediakan untuk memudahkan dalam mendesain.
Document toolbar Merupakan menu yang digunakan penulis untuk melihat dokumendokumen yang sudah dibuat. Panel yang diberikan untuk menunjukkan nama dokumen y ang sudah dibuat.
Document window Merupakan form (tampilan) yang digunakan oleh penulis untuk melihat, mendesain, memanipulasi dan membuat suatu dokumen.
Panel Group Merupakan suatu menu yang digunakan untuk mengumpulkan panel dalam satu grup. Digunakan untuk mengeksplor file dengan menggunakan sistem drag and drop.
Tag Selector Tag selektor digunakan untuk memilih tag apa saja yang dipilih dan digunakan untuk dimasukkan oleh penulis ke dalam dokumen untuk menciptakan suatu tampilan website yang menarik dan interaktif.
Property Inspektor Merupakan suat menu yang digunakan penulis untuk menentukan jenis tulisan, format, ukuran dan membuat variasi dari jenis tulisan ataupun objek yang berbeda.
File panel File panel digunakan penulis dalam manajemen dokumen atau folder web yang terkait, mengakses file dan meremote file yang terletak dalam server yang digunakan.
2.7
Struktur Navigasi Struktur Navigasi adalah struktur atau alur dari suatu program. Struktur
navigasi termasuk struktur terpenting dalam pembuatan suatu aplikasi dan gambarannya harus sudah ada pada tahap perencanna. Peta navigasi merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen aplikasi dengan pemberian perintah dan pesan. Peta navigasi juga memberikan kemudahan dalam menganalisa keinteraktifannya terhadap pengguna. Peta navigasi mempunyai beberapa ciri khas yang dapat digolongkan menurut kebutuhan akan obyek, kemudahan pemakaian, keinteraktifitasannya, dan kemudahan membuatnya yang berpengaruh terhadap waktu pembuatan suatu aplikasi. Beberapa dasar struktur pembuatan aplikasi adalah :
2.7.1 Struktur Navigasi Linear Linier merupakan struktur yang hanya mempunyai satu rangkaian cerita yang berurut. Struktur ini menampilkan satu demi satu tampilan layar secara berurut menurut urutannya dan tidak diperbolehkan adanya percabangan. Tampilan yang dapat ditampilkan adalah satu halaman sebelumnya atau satu halaman sesudahnya.
Gambar.2.13 Struktur Navigasi Linear
2.7.2 Struktur Navigasi Hirarki Struktur
hirarki
marupakan
suatu
struktur
yang
mengandalkan
percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page, halaman utama ke satu. Halaman utama ini akan mempunyai halaman percabangan yang dikatakan Slave Page, halaman pendukung. Jika salah satu halaman pendukung diaktifkan, maka tampilan tersebut akan bernama Master Page, halaman utama kedua. Pada struktur penjejakan ini tidak diperkenankan adanya tampilan secara linier.
Gambar 2.14 Struktur Navigasi Hirarki 2.7.3 Struktur Non Linier Pada struktur non linear diperkenankan membuat penjejakan bercabang. Percabangan ini berbeda dengan percabangan pada struktur hirarki. Pada
percabangan non linier walaupun terdapat percabangan tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada pada master page dan slave page.
Gambar.2.15 Struktur Navigasi Non Linear
2.7.4 Struktur Navigasi Campuran Struktur penjejakan campuran merupakan gabungan dari ketiga struktur sebelumnya. Struktur penjejakan ini banyak digunakan dalam pembuatan aplikasi multimedia sebab dapat memberikan keinteraksian yang lebih tinggi.
Gambar.2.16 Struktur Navigasi Campuran
BAB III ANALISA DAN PEMBAHASAN 3.1 Tujuan Program Dalam penulisan ilmiah ini penulis membuat website sistem informasi deteksi dini gejala kerusakan mobil yang bertujuan agar para pemilik kendaraan mobil dapat lebih mengetahui penanggulangan pertama jika mobil tersebut rusak. Proses pembuatan aplikasi ini melalui beberapa tahapan, mulai dari perancagan konsep, pembuatan struktur navigasi, perancangan database, perancangan halaman aplikasi, pembuatan aplikasi, implementasi, spesifikasi hardware dan software.
3.2 Perancangan Konsep Pada proses pembuatan web ini, penulis membagi menjadi dua bagian halaman web, pertama adalah halaman web yang akan digunakan oleh pengunjung, kedua adalah halaman web yang digunakan oleh admin untuk mengelola situs tersebut. Maka terdapat dua kategori pengguna web ini, yaitu : 1. User adalah pengguna yang hanya dapat memilih beberapa gejala yang yang sudah disediakan pada halaman web, tetapi tidak dapat melakukan perubahan terhadap isi web. 2. Administrator adalah pengguna yang bertugas untuk mengelolah isi web, baik konten dari web maupun database yang digunakan dalam web tersebut.
3.3 Strukur Navigasi Struktur Navigasi adalah stuktur atau alur dari suatu program. Struktur navigasi termasuk struktur yang penting dalam pembuatan suatu aplikasi dan gambarannya harus sudah ada pada tahap perencanaan. Peta navigasi merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen aplikasi. Struktur navigasi web ini
terbagi menjadi 2 buah struktur navigasi yaitu struktur navigasi user (pemakai) serta struktur navigasi admin.
3.3.1 Struktur Navigasi User Struktur Navigasi user digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi tersebut. Struktur Navigasi user ini menggunakan salah satu jenis struktur navigasi yaitu Struktur Navigasi Campuran. Struktur Navigasi Campuran merupakan gabungan dari Struktur Navigasi Linear dan Struktur Navigasi Hirarki.
Gambar 3.1 Struktur Navigasi User 3.3.2 Struktur Navigasi Admin Struktur Navigasi administrator digunakan untuk menggambarkan bagaimana hubungan antara isi-isi dalam halaman administrator. Melalui struktur navigasi website ini, terlihat bagaimana isi, data, dan susunan dari sebuah website. Pembuatan struktur navigasi administrator ini akan sangat membantu admin ketika akan mengatur seluruh halaman web. Pada halaman ini hanya dapat digunakan oleh satu orang admin. Struktur Navigasi Admin ini menggunakan
salah satu jenis struktur navigasi yaitu Struktur Navigasi Campuran. Struktur penjejakan campuran merupakan gabungan dari Struktur Navigasi Linear dan Struktur Navigasi Hirarki.
Gambar 3.2 Struktur Navigasi Admin 3.4
Rancangan Database Proses pengolahan dan penyimpanan data pada web ini, yang perlu
dilakukan adalah menambahkan sebuah database, untuk itu hal pertama yang harus dilakukan yaitu dengan merancang struktur database secara konseptual sehingga dalam proses pembuatan selanjutnya dapat diketahui pasti proses jalannya aplikasi web dan juga proses keluar dan masuknya data serta pengolahan dari data tersebut.
3.4.1 ERD Model Entity Relationship adalah penyajian data dengan menggunakan Entity dan Relationship. Tujuan dari penggambaran diagram entity relationship adalah untuk menggambarkan secara sistematis hubungan antara entity-entity yang ada pada suatu sistem database dengan menggunakan simbol-simbol.
Gambar 3.3 ERD
3.4.2 Desain Table Dalam pembuatan aplikasi ini, hasil ERD menghasilkan 7 buah tabel yang akan disimpan dalam sebuah database. Tabel-tabel yang akan digunakan dalam aplikasi adalah tabel admin, tabel kategori, tabel daf_rusak, tabel bengkel, tabel forum_tema, tabel forum dan tabel anggota.
Gmbar 3.4 Relasi antar tabel 1. Tabel User Tabel ini digunakan untuk administrator. Admin bertugas untuk mengelola isi web, baik konten dari web maupun database yang digunakan dalam web tersebut. Table ini berisi nama, password, nama lengkap email dan level dari admin tersebut. Pembuatan tabel admin ditunjukan pada gambar 3.5
Gambar 3.5 Desain Tabel User
2. Tabel anggota Tabel ini di gunakan untuk menyimpan data-data dari user yang mendaftarakan diri pada form register. Tabel berisi1 18 field dengan primary key nya adalah id_anggota. Pembuatan tabel anggota ditunjukan pada gambar 3.6
Gambar 3.6 Desain Tabel Anggota
3. Tabel forum tema Kegunaan tabel ini adalah untuk menyimpan judul dari masalah yang dibicarakan pada halaman forum. Judul topik dapat langsung dipilih atau ditentukan oleh pengguna aplikasi. Pembuatan tabel forum_tema ditunjukan pada gambar 3.7
Gambar 3.7 Desain Tabel Forum_tema
4. Tabel forum Tabel ini berguna untuk menyimpan tanggapan dari sebuah tema forum yang dibicarakan. Pembuatan tabel forum ditunjukan pada gambar 3.8
Gambar 3.8 Desain Tabel Forum
5. Tabel daftar kerusakan Kegunaan tabel ini adalah untuk menyimpan semua jenis keruskan mobil beserta deskripsi penjelasannya. Pembuatan tabel daftar kerusakn ditunjukan pada gambar 3.8
Gambar 3.9 Desain Tabel Forum
6. Tabel Kategori Tabel ini berguna untuk meyimpan semua kategori yang membagibagi jenis kerusakan mobil. Pembuatan tabel kategori ditunjukan pada gambar 3.10
Gambar 3.10 Desain Tabel Kategori 7. Tabel Bengkel Tabel ini berguna untuk menyimpan daftar bengkel, adapun informasi yang disimpan untuk satu bengkel dalam web ini adalah nama, alamat dan telpon bengkel. Pembuatan tabel bengkel ditunjukan pada gambar 3.11
Gambar 3.11 Desain Tabel Bengkel
8. Tabel Solusi Tabel ini diguunakan untuk menyimpan daftar solusi dari kerusakan-kerusakan mobil. pada tabel ini akan disimpan data gejala,penyebab dan tindakan dalam menanagani kerusakan mobil. Pembuatan tabel solusi ditunjukan pada gambar 3.12
Gambar 3.12 Desain Tabel Solusi
9. Tabel Modul Tabel ini digunakan untuk menyimpan daftar modul, modul diguanakan untuk memberikan judul untuk suatu kelompok script program, seperti modul daftar kerusakan yang berisi semua script pengaturan untuk database dan tampilan nya. Pembuatan tabel modul ditunjukan pada gambar 3.13
Gambar 3.13 Desain Tabel Modul
3.5
Rancangan Halaman Aplikasi Informasi Deteksi Dini Gejala Kerusakan Mobil Pada tahap perancangan aplikasi, akan dibahas proses perancangan
halaman-halaman yang merupakan interface atau tampilan dari aplikasi yang akan dibuat. Adapun halaman-halaman dari aplikasi deteksi kerusakan mobil ini yaitu : Halaman Home, Halaman Daftar kerusakan, Halaman Detai kerusakan, Halaman Daftar Bengkel, Halaman Register, Halaman Forum, Halaman Login Admin dan Halaman Admin. Berikut akan dijelaskan rancangan dari masing–masing halaman tersebut 3.5.1
Rancangan Halaman Home User Halaman home ini adalah halaman yang pertama kali tampil. Halaman ini
menampilkan judul dari web yaitu Deteksi kerusakan mobil online dan beserta daftar menu yang terdiri dari : home, daftar keruskan, daftar bengkel, dan forum, kemudian pada text box isi ditampilkan beberapa tips mengatasi kerusakn mobil beserta beberapa daftar bengkel. Pada halaman home juga terdapat form untuk login dengan memasukan username dan password beserta link untuk ke Halaman Register jika ingin menjadi anggota baru. Logout juga terdapat pada halaman ini
yang berfungsi jika user ingin mengakhiri sesi pada web ini. Rancangan halaman home ditampilkan seperti pada gambar 3.14 Judul Aplikasi
Login | Logout Username : Password :
Register Isi Daftar menu
gambar 3.14 Rancangan Halaman Home 1.
Rancangan Halaman Daftar Kerusakan Halaman ini akan menampilkan seluruh gejala kerusakan yang ada pada
database daf_rusak. Pada saat memilih menu daftar kerusakan pertama akan muncul judul-judul dari daftar kerusakn yang ditampilkan secara vertikal selanjutnya setelah memilih salah satu dari judul akan muncul detail dari judul tersebut yang berisi rincian dari daftar kerusakan beserta penanggulanngan kerusakannya. Rancangan halaman daftar kerusakan ditampilkan seperti gambar 3.15
Judul Aplikasi
Daftar menu
Kerusakan 1 Kerusakan 2 Kerusakan 3 Kerusakan 4
gambar 3.15 Rancangan Halaman Daftar kerusakan
2.
Rancangan Halaman Detail Kerusakan Pada halaman ini akan ditampilkan detail dari kerusakan yang telah
dipilih sebelumnya pada halaman daftar kerusakan, yang akan di tampilkan pada halaman ini adalah nama kategori keruskan, detail kerusakan dan cara menangani kerusakannya. Rancangan halaman detail kerusakan ditampilkan seperti gambar 3.16 Judul Aplikasi
Daftar menu
Kerusakan 1 Detail kerusakan 1 ……. ………………………… Penanggulang nya ……. …………………………
gambar 3.16 Rancangan Halaman Detail kerusakan 3.
Rancangan Halaman Daftar Bengkel Halaman ini akan menampilkan daftar bengkel yang ada pada database
bengkel, informasi yang akan ditampilkan pada menu ini yaitu nam-nama bengkel beserta alamat lokasi dan juga nomor telpon yang dapat dihubungi. Rancangan halaman daftar bengkel ditampilkan seperti gambar 3.17
Judul Aplikasi
Daftar bengkel 1 Nama bengkel :…… Alamat : ………… Telp : …………
Daftar menu
Daftar bengkel 2 Nama bengkel :…… Alamat : ………… Telp : …………
gambar 3.17 Rancangan Halaman Daftar Bengkel
4.
Rancangan Halaman Register Halaman register ini berisi form pengisian yang diisi oleh user yang ingin
menjadi anggota, kegunaan menjadi anggota adalah mendapat hak akses untuk berinterkasi pada halaman forum. Pada halaman register ini user harus mengisi data diri pada form yang telah di sediakan yang terdiri dari nama, alamat, jenis kelamin, tanggal lahir, dan juga username beserta password untuk login. Rancangan halaman register ditampilkan seperti gambar 3.18
Judul Aplikasi
Daftar menu
Form Register
gambar 3.18 Rancangan Halaman Register 5.
Rancangan Halaman Forum Halaman ini hanya dapat diakses bagi user yang telah mendaftarkan
dirinya pada halaman register selain itu dapat pula di akses oleh user yang telah terdaftar menjadi anggota dan melakukan proses login. Pada halaman ini user dapat berdiskusi dengan user lain mengenai gejala-gejala kerusakn mobil beserta penanggulangannya. User dapat membuat topik baru dan user juga dapat melakukan join room atau ikut berdiskusi dalam topik yang telah di buat user lain. Rancangan halaman forum ditampilkan seperti gambar 3.19
Judul Aplikasi
Form topik baru
Daftar menu
Join room
Daftar Topik 1 Daftar Topik 2 Daftar Topik 3 Daftar Topik 4
gambar 3.19 Rancangan Halaman Forum 3.5.2
Rancangan Halaman Admin Halaman admin adalah halaman yang hanya di khususkan bagi
administrator web ini. Pada halaman ini admin pada menentukan apakah suatu data dapat dihapus, ditambah atau di ubah. Pada halaman admin, admin dapat mengubah daftar kerusakan, daftar bengkel, menambah kategori kerusakan, soulusi dan menghapus topik diskusi pada forum. 1.
Rancangan Halaman Login Admin Karena halaman admin berfungsi untuk mengatur seluruh databse dan
tampilan pada website ini, maka hanya admin sajalah yang boleh mengkasesnya. Oleh sebab itu halaman login admin akan tampil pertama kali jika admin ingin mengakses halaman admin. Login berisi form untuk menginput username dan password admin. Rancangan halaman login admin di tampilkan seperti gambar 3.20
Header Login Administrator User name: Password :
submit
footer
gambar 3.20 Rancangan Halaman Login Admin 2.
Rancangan Halaman Home Admin Setelah melalui proses login dengan kondisi username dan password benar
maka selanjutnya admin akan dihadapkan ucapan selamat datang dan telah berhasil login, selain itu admin juga dahadapkan pada daftar pilihan menu yang diguanakan untuk mengatur (tambah, edit, hapus) suatu data. Rancangan halaman admin di tampilkan seperti gambar 3.21 Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Selamat datang admin
gambar 3.21 Rancangan Halaman Home Admin
3.
Rancangan Halaman Manajemen User Halaman manajemen user digunakan admin untuk mengubah username
dan password admin untuk login kehalaman admin. Pada halaman ini ditampilkan
username dan email admin. Rancangan halaman manjemen user ditunjukan pada gambar 3.22.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Manajemen User 1
Tambahuser
no
username
1 email
aksi Edit | hapus 2
2
3
gambar 3.22 Rancangan Halaman Manjemen User
Keterangan : 1. Link menuju ke halaman tambah user 2. Link menuju ke halaman edit user 4.
Rancangan Halaman Tambah User Perancangan halaman tambah user yang berisi form untuk melakukan
penambahan user dan password ditunjukan pada gambar 3.23. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Tamb ahuser 1
Username : Password : Email :
2 3
simpan
batal
gambar 3.23 Rancangan Halaman Manjemen User
Keterangan : 1. Textbox untuk mengisi Username 2. Textbox untuk mengisi Password 3. Textbox untuk mengisi Email
5.
Rancangan Halaman Edit User Perancangan halaman edit user yang berisi form untuk melakukan
pengubahan terhadap user dan password ditunjukan pada gambar 3.24. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Edit user 1 Username : Password : Email :
2 3
simpan
batal
gambar 3.24 Rancangan Halaman Manjemen User Keterangan : 1. Textbox untuk mengisi Username 2. Textbox untuk mengisi Password 3. Textbox untuk mengisi Email 6.
Rancangan Halaman Manejemen Modul Halaman di guanakan admin untuk mengatur modul / fungsi-fungsi pada
aplikasi ini, admin dapat menambahkan modul baru, mengurangi bahkan menghapusnya. Rancangan halaman manjemen modul di tujunjukkan pada gambar 3.25.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Manajemen Modul Tambah Modul
1 aksi Edit | hapus Edit | hapus 2
gambar 3.25 Rancangan Halaman Manjemen User
Keterangan : 1. Link menuju ke halaman tambah modul 2. Link menuju ke halaman edit modul
7.
Rancangan Halaman Tambah Modul Perancangan halaman edit user yang berisi form untuk melakukan
penambahan terhadap modul ditunjukan pada gambar 3.26. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Tambah Modul Nama Modul Link Publish Aktif Status Urutan simpan
: : : Y/N : Y/N : Y/N :
1 2 3 4 5 6
batal
gambar 3.26 Rancangan Halaman Tambah Modul
Keterangan : 1. Textbox untuk mengisi nama modul 2. Textbox untuk mengisi link modul
3. Listbox untuk memilih Yes / No 4. Listbox untuk memilih Yes / No 5. Listbox untuk memilih Yes / No 6. Textbox untuk mengisi urutan modul
8.
Rancangan Halaman Edit Modul Perancangan halaman edit user yang berisi form untuk melakukan
pengubahan terhadap modul ditunjukan pada gambar 3.27. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Edit Modul Nama Modul Link Publish Aktif Status Urutan simpan
: : : Y/N : Y/N : Y/N : batal
1 2 3 4 5 6
gambar 3.27 Rancangan Halaman Tambah Modul Keterangan : 1. Textbox untuk mengisi nama modul 2. Textbox untuk mengisi link modul 3. Listbox untuk memilih Yes / No 4. Listbox untuk memilih Yes / No 5. Listbox untuk memilih Yes / No 6. Textbox untuk mengisi urutan modul
9.
Rancangan Halaman Kategori Halaman di guanakan admin untuk mengatur kategori kerusakan mobil
yang ada pada database, admin dapat menambah,menghapus dan mengedit kategori melalui bagian ini. Rancangan halaman manjemen kategori di tujunjukkan pada gambar 3.28.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Manajemen Kategori Tambah Kategori
1 aksi Edit | hapus Edit | hapus 2
gambar 3.28 Rancangan Halaman Kategori
Keterangan : 1. Link menuju ke halaman tambah kategori 2. Link menuju ke halaman edit kategori
10.
Rancangan Halaman Tambah Kategori Perancangan halaman edit user yang berisi form untuk melakukan
penambahan terhadap kategori ditunjukan pada gambar 3.29. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Tambah Kategori
Nama Kategori : Keterangan : simpan
1 2
batal
gambar 3.29 Rancangan Halaman Tambah Modul
Keterangan : 1. Textbox untuk mengisi nama kategori 2. Textbox untuk mengisi keterangan
11.
Rancangan Halaman Edit Kategori Perancangan halaman edit user yang berisi form untuk melakukan
pengubahan terhadap kategori ditunjukan pada gambar 3.30. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Edit Kategori 1
Nama Kategori : Keterangan : simpan
2
batal
gambar 3.30 Rancangan Halaman Tambah Modul Keterangan : 1. Textbox untuk mengisi nama kategori 2. Textbox untuk mengisi keterangan 12.
Rancangan Halaman Daftar Kerusakan Halaman di guanakan admin untuk mengatur daftar kerusakan pada mobil
yang ada pada database, admin dapat menambah, menghapus dan mengedit daftar kerusakan melalui bagian ini. Rancangan halaman manjemen daftar jerusakandi tujunjukkan pada gambar 3.31. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Manajemen Daftar kerusakan Tambah Daftar
1 aksi Edit | hapus Edit | hapus 2
gambar 3.31 Rancangan Halaman Daftar Kerusakan
Keterangan : 1. Link menuju ke halaman tambah kategori 2. Link menuju ke halaman edit kategori 13.
Rancangan Halaman Tambah Daftar Kerusakan Perancangan halaman edit user yang berisi form untuk melakukan
penambahan terhadap daftar kerusakan ditunjukan pada gambar 3.32. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Tambah Daftar Kerusakan Judul Kategori isi
simpan
: : :
1 2 3
batal
gambar 3.32 Rancangan Halaman Tambah Daftar Kerusakan Keterangan : 1. Textbox untuk mengisi Judul 2. Combobox untuk mengisi kategori 3. Textbox untuk mengisi isi daftar kerusakan 14.
Rancangan Halaman Edit Daftar Kerusakan Perancangan halaman edit user yang berisi form untuk melakukan
pengubahan terhadap daftar kerusakan ditunjukan pada gambar 3.33.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Edit Daftar Kerusakan Judul Kategori isi simpan
1 2 3
: : : batal
gambar 3.33 Rancangan Halaman Edit Daftar Kerusakan Keterangan : 1. Textbox untuk mengisi Judul 2. Combobox untuk mengisi kategori 3. Textbox untuk mengisi isi daftar kerusakan 15.
Rancangan Halaman Solusi Halaman di guanakan admin untuk mengatur daftar kerusakan pada mobil
yang ada pada database, admin dapat menambah, menghapus dan mengedit daftar kerusakan melalui bagian ini. Rancangan halaman manjemen daftar jerusakandi tujunjukkan pada gambar 3.34. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Manajemen Solusi Tambah Daftar
1 aksi Edit | hapus Edit | hapus 2
gambar 3.34 Rancangan Halaman Solusi Keterangan : 1. Link menuju ke halaman tambah kategori 2. Link menuju ke halaman edit kategori
16.
Rancangan Halaman Tambah Solusi Perancangan halaman edit user yang berisi form untuk melakukan
penambahan terhadap daftar kerusakan ditunjukan pada gambar 3.35. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Edit Modul Judul Solusi : Jenis Kerusakan : Gejala Kerusakan : Penyebab : Tindakan : simpan
1 2 3 4 5
batal
gambar 3.35 Rancangan Halaman Tambah Solusi Keterangan : 1. Textbox untuk mengisi judul Solusi 2. Combobox untuk mengisi jenis kerusakan 3. Textbox untuk mengisi gejala keruskan 4. Textbox untuk mengisi penyebab 5. Textbox untuk mengisi tindakan 17.
Rancangan Halaman Edit Solusi Perancangan halaman edit user yang berisi form untuk melakukan
pengubahan terhadap database solusi ditunjukan pada gambar 3.36. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Edit Modul Judul Solusi : Jenis Kerusakan : Gejala Kerusakan : Penyebab : Tindakan : simpan
batal
gambar 3.36 Rancangan Halaman Edit Solusi
1 2 3 4 5
Keterangan : 1. Textbox untuk mengisi judul Solusi 2. Combobox untuk mengisi jenis kerusakan 3. Textbox untuk mengisi gejala keruskan 4. Textbox untuk mengisi penyebab 5. Textbox untuk mengisi tindakan 18.
Rancangan Halaman Daftar Bengkel Halaman di guanakan admin untuk mengatur daftar bengkel yang ada pada
database, admin dapat menambah, menghapus dan mengedit daftar bengkel melalui bagian ini. Rancangan halaman manjemen daftar bengkel di tujunjukkan pada gambar 3.37.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Manajemen Daftar Bengkel Tambah Bengkel
1 aksi Edit | hapus Edit | hapus 2
gambar 3.37 Rancangan Halaman Daftar Bengkel Keterangan : 1. Link menuju ke halaman tambah daftar bengkel 2. Link menuju ke halaman edit daftar bengkel
19.
Rancangan Halaman Tambah Daftar Bengkel Perancangan halaman edit user yang berisi form untuk melakukan
penambahan terhadap daftar bengkel pada database ditunjukan pada gambar 3.38.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Tambah Bengkel 1 Nama Bengkel : Alamat : Telpon :
2 3
simpan
batal
gambar 3.38 Rancangan Halaman Tambah Daftar Bengkel Keterangan : 1. Textbox untuk mengisi nama bengkel 2. Textbox untuk mengisi alamat bengkel 3. Textbox untuk mengisi telpon 20.
Rancangan Halaman Edit Daftar Bengkel Perancangan halaman edit daftar bengkel yang berisi form untuk
melakukan pengubahan terhadap daftar bengkel pada database, ditunjukan pada gambar 3.39. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Edit Bengkel 1 Nama Bengkel : Alamat : Telpon :
2 3
simpan
batal
gambar 3.39 Rancangan Halaman Tambah Modul Keterangan : 1. Textbox untuk mengisi nama bengkel 2. Textbox untuk mengisi alamat bengkel 3. Textbox untuk mengisi telpon
21.
Rancangan Halaman Daftar Anggota Halaman di guanakan admin untuk mengatur daftar anggota yang isinya
adalah profil anggota, admin hanya dapat menghapus dan melihat profil aggota melalui bagian ini. Untuk penambahan anggota harus dlakukan di halaman user dan admin tidak dapat mengubah atau mengedit isi profil dari suatu anggota. Rancangan halaman manjemen daftar anggota di tunjukkan pada gambar 3.40 Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Daftar Anggota
aksi Lihat | hapus Lihat | hapus 1
2
gambar 3.40 Rancangan Halaman Daftar Anggota Keterangan : 1. Link menuju ke halaman lihat daftar anggota 2. Link menuju ke halaman hapus anggota
22.
Rancangan Halaman Lihat Anggota Perancangan halaman lihat anggota yang berisi form untuk melihat profil
anggota, ditunjukan pada gambar 3.41.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Profil Anggota
1 Email Nama No hp Jenis kelamin Tggl lahir Alamat
: : : : : :
2 3 4 5 6 7
kembali
gambar 3.41 Rancangan Halaman Lihat Anggota Keterangan : 1. Image untuk menampilkan foto profil anggota 2. Textbox untuk menampilkan email anggota 3. Textbox untuk menampilkan nama anggota 4. Textbox untuk menampilkan nomor handphone anggota 5. Textbox untuk menampilkan jenis kelamin anggota 6. Textbox untuk menampilkan tanggal lahir anggota 7. Textbox untuk menampilkan alamat anggota
23.
Rancangan Halaman Forum Halaman ini di gunakan admin untuk melihat dan mengatur tema forum
yang telah dibuat oleh user. Admin hanya bisa menghapus tema dari suatu forum dan tidak dapat menambahkan atau mengedit suatu tema forum. Rancangan halaman forum di tunjukkan pada gambar 3.42.
Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Tema Forum aksi hapus hapus
gambar 3.42 Rancangan Halaman Forum
24.
Rancangan Halaman Join Room Halaman ini di gunakan admin untuk melihat dan mengatur komntar-
komentar yang telah dibuat user untuk suatu tema forum. Admin hanya bisa menghapus dan tidak dapat menambahkan atau mengedit suatu komentar pada join room. Rancangan halaman forum di tunjukkan pada gambar 3.43. Header Daftar Menu Manajemen user Manajemen Modul Kategori Daftar Kerusakan Solusi Daftar Bengkel Daftar Anggota Forum JoinRoom Logout
Tema Forum aksi hapus hapus
gambar 3.43 Rancangan Halaman JoinRoom
3.6 Pembuatan Halaman Aplikasi Informasi Deteksi Dini Gejala Kerusakan Mobil Masing-masing rancangan halaman tersebut lalu diterapkan pada halaman web, kemudian dilakukan pengujian dan evaluasi terhadap halaman aplikasi yang telah dibuat. Jika halaman yang dibuat masih kurang memuaskan atau belum akurat bahkan masih memerlukan perbaikan, maka pembuatan aplikasi kembali ke
tahap desain sistem. Jika pengujian berhasil dan sesuai dengan yang diharapkan, maka aplikasi secara keseluruhan sudah selesai dan siap untuk dipergunakan. Halaman yang akan dibuat dalam aplikasi informasi kerusakan mobil ini adalah halaman home, halaman daftar kerusakan, halaman detail kerusakan, halaman daftar bengkel, halaman video, halaman register, halaman forum, halaman login admin dan halaman admin.
3.6.1 Halaman User Halaman User adalah halaman yang dapat di akses oleh user, pada halaman ini user dapat melihat daftar kerusakan mobil beserta detail dari kerusakan tersebut dan juga terdapat ip-tips merawat mobil selain itu user juga dapat melihat video tentang menangani kerusakan mobil. Untuk user yang telah mendaftar di web ini mendapat hak akses untuk forum. Pembuatan halaman user ini dimulai dari membuat tabel yang berungsi untuk peletakkan posisi header, bagian isi, dan footer seperti gambar di bawah ini pada software dreamweaver.
Header
Bagian isi Footer
gambar 3.44 implementasi halaman user
Selanjutnya untuk pengaturan css penulis meletakannya di file yang berbeda, sehigga akan memudahkan pengeditan css. Script untuk menhubungkan css nya sebagai berikuit : Untuk bagian isi dari website ini dibagi menjadi 2 scipt, yaitu script kanan.php dan kiri.php. Script kiri.php digunakan untuk menampilkan list menu navigasi, dan script kanan.php digunakan untuk menampilkan isi dari pilihan menu navigasi yang telah dipilih user. Sehingga untuk menampilkan setiap isi dari halaman di web ini pengaturan nya terletak di script kanan.php tersebut.
1.
Pembuatan Halaman Home User Halaman home adalah halaman yang pertama kali muncul jika user
mengakses website ini. Untuk menampilkan halaman ini meggunakan script yang diletakkan pada file kanan.php. Script yang digunakan dalam pembuatan bagian ini adalah : if($_GET[module]=='home'){ echo "
| SELAMAT DATANG DI WEBSITE BENGKEL ONLINE |
| Web ini di buat untuk membantu para pemilik kendaraan mobil mengatasi kerusakan mobil |
| • $k[nama_kategori] ($k[jml]) |
| $d[judul] |
[ Kembali ] |
| $s[Gejala] |
| GEJALA : $s[Gejala] |
| PENYEBAB : $s[penyebab] |
| TINDAKAN : $s[tindakan] |
[ Kembali ] |
| $b[nama] |
| Aalamat : $b[alamat] |
| NAMA LENGKAP | input type=text name=nama_lengkap size=30> |
| NO HANDPHONE | |
| PASSWORD | |
| JENIS KELAMIN | -------- PRIA WANITA |
| TANGGAL LAHIR | |
| ALAMAT | |
| Upload Foto | |
| NAMA | |
| TEMA | |
| "; echo" Tema : $k[tema] From : $k[nama_lengkap] "; echo"Tanggal : $k[hari], $tgl "; echo"Jam: $k[id_forum_tema] WIB E-mail : $k[email] "; echo"Comment Gambar 3.25 Tampilan Halaman Daftar Bengkel Gambar 3.53 Tampilan Halaman Daftar Bengkel 10. Pembuatan Halaman Join Room Halaman join room dapat digunakan jika user ingin memberikan komentar pada suatau tema forum. Pembuatan halaman ini juga mengguanak nperintah sql untuk memanngila tema forum selanjutnya mengguankan statement insert untuk memasukan komentar pada tema forum tersebut. Berikut ini adalah penggalan program untuk menampilkan halaman joinroom. elseif($_GET[module]=='joinroom'){$forum=mysql_query("SELECT * FROM forum_tema,anggotaWHERE forum_tema.id_anggota=anggota.id_anggota AND id_forum_tema='$_GET[id]'"); echo" Anda Telah Bergabung Di forum $f[tema]"; echo" From : $f[nama_lengkap] "; echo"Tanggal : $f[hari], $tgl "; echo"Jam Comment Selamat DatangHai $_SESSION[namauser], silahkan klik menu pilihan yang berada di sebelah kiri untuk mengelola content website. Suggest Documents |
