BAB I PENDAHULUAN 1.1 Latar Belakang Masalah

BAB I PENDAHULUAN

1.1

Latar Belakang Masalah Perkembangan teknologi informasi khususnya dibidang dunia teknologi

sangat pesat perkembangnya. Hal ini telah menjadi bagian dari kehidupan kita sehari-hari misalnya penggunaan Internet sebagai media untuk mendapatkan informasi. Dengan akses yang mudah di jangkau pada saat ini membuat internet menjadi kebutuhan dalam mencari informasi. Informasi dalam internet disajikan dalam bentuk halaman web atau website, yang merupakan gabungan dari teks, gambar dan animasi dari keduanya. Dengan demikian, penyajian suatu informasi dapat lebih menarik dan mudah diserap. Saat ini mobil sudah menjadi alat transportasi yang sangat dibutuhkan oleh berbagai lapisan masyarakat. Begitu pentingnya peran mobil membuat semakin banyak masyarakat merasa perlu memiliki mobil, baru maupun bekas. Namun, seringkali keinginan masyarakat untuk memiliki mobil tidak diiringi dengan pengetahuan tentang cara merawat dan memperbaiki kerusakan pada mobil, sehingga kerusakan-kerusakan ringan yang terjadi akan menjadi kerusakan serius, karena tidak segera diperbaiki. Untuk membantu masyarakat dalam menangani kerusakan-kerusakan ringan tersebut dibutuhkan suatu aplikasi yang dapat mengidentifikasi tanda-tanda kerusakan yang mungkin terjadi pada komponenkomponen mobil, dari komponen-komponen yang terkait dengan sistem bahan bakar, sistem pelumasan, sistem pendinginan mesin, sistem pengapian. Dengan memanfaatkan teknologi web yang dapat memberikan media informasi dinamis, maka tepat jika aplikasi untuk mendapatkan informasi mengenai kerusakan mobil berada pada jaringan internet. Selain mudah untuk diakses, mudah pula untuk digunakan oleh siapa saja yang membutuhkan. Berdasarkan uraian diatas maka penulis ingin menyajikan solusi tersebut dengan merealisaikannya dalam bentuk perancangan website yang diberi judul “Perancangan aplikasi berbasis web informasi deteksi dini gejala kerusakan

1

2

mobil menggunakan PHP dan MYSQL”. Aplikasi untuk mendeteksi kerusakan mobil ini dapat dengan mudah melayani para pengguna mobil dalam mendiagnosis kerusakan tanpa harus langsung di bawa ke bengkel, yang selain memakan waktu, tenaga dan biaya.

1.2.

Batasan Masalah Pembuatan aplikasi ini menggunakan bahasa pemrograman PHP dan

MYSQL, di mana untuk pemanfatan aplikasinya membutuhkan koneksi internet. Aplikasi sistem informasi gejala kerusakan mobil ini di batasi pada mobil yang berbahan bakar bensin dan informasi beberapa bagian kerusakan beserta tindakan pertama yang harus dilakukan. Pada aplikasi ini terdapat forum yang dapat diguanakan user untuk berinteraksi dengan user yang lain, dan juga terdapat fungsi pencarian kata atau searching untuk mencari suatu kata kunci dari sebuah informasi.

1.3.

Tujuan Penulisan Secara umum penulisan ini bertujuan sebagai suatu referensi dan media

informasi dalam memecahkan suatu masalah, selain itu tujuan lain membuat aplikasi ini adalah : 1. Merancang web aplikasi deteksi dini gejala kerusakan mobil dengan PHP dan MYSQL. 2. Dengan aplikasi ini masyarakat dapat lebih mengetahui penyebab kerusakan-kerusakan ringan dan solusi dari penyebab tersebut tanpa harus membawa mobil kebengkel, yang selain memakan waktu, tenaga dan biaya. Selain itu dengan pemanfaatan teknologi berbasis web semakin membuat aplikasi ini mudah di akses di manapun sehingga lebih bermanfaat bagi masyarakat

1.4.

Metode Penelitian Penulis melakukan beberapa tahapan dalam menyusun aplikasi ini dengan

susunan diantaranya :

3

a. Studi Pustaka. Yaitu dengan melakukan pencarian materi berdasarkan referensi dari berbagai pembahasan seperti buku dan beebrapa artikel dari internet yang dapat menunjang penyelesaian penulisan ini.

b. Studi lapangan. Dalam mneggunakan studi lapangan penulis menggunakan 2 metode yaitu : 

Metode pengumpulan data, dalam metode ini penulis mendapatkan sumber-sumber yang mendukung pembuatan aplikasi dengan mendownload dari internet dan meng-croping dari gambar yang sudah ada, menyalin materi dari buku. Langkah tersebut adalah untuk kita masukkan kedalam database aplikasi sistem informasi ini. Penulis juga mengajukan pertanyaan ke masyarakat umum, contoh pertanyaan yang penulis ajukan adalah : 1. Sejauh mana anda mengetahui tentang mesin mobil anda ? 2. Apa saja kerusakan yang sering terjadi pada mobil anda ? 3. Bagaimana anda menangani keruskannya? 4. Jika mesin mobil mati mendadak apa yang biasa anda lakukan? 5. Informasi apa saja yang anda butuhkan dalam menangani kerusakan tersebut ? 6. Apa saja konten yang dibutuhkan suatu website sistem informasi untuk mendeteksi kerusakan mobil? 7. Pada saat kapan aplikasi ini di gunakan?



Metode perancangan aplikasi, Dalam penulisan ini penulis juga menggunakan suatu metode perancangan aplikasi yang paling umum digunakan yaitu dengan siklus hidup pengembangan system (system development life cycle – SDLC) atau disebut juga siklus hidup system

4

(system life cycle - SLC). Metode SDLC menggunakan beberapa tahapan dalam mengembangkan system, yaitu: 1. Perencanaan sistem (system planning) 2. Analisis sistem (system analysis) 3. Desain / perencanaan sistem (system design) 4. Penerapan / implementasi system (system implementation) 5. Perawatan sistem (system maintenance)

Tahapan tersebut dinamakan tahap air terjun (waterfall) karena pada setiap tahapan sistem akan dikerjakan secara berurut menurun dari perencanaan, analisis, desain, implementasi dan perawatan. Dimana pada setiap tahapan system bisa melakukan revisi atau perbaikan sistem sebelumnya. Hal ini dapat digambarkan sebagai berikut : Perencanaan Sistem Analisis Sistem Desain Sistem Penerapan Sistem Perawatan Sistem

Gambar 1.1 Siklus hidup pengembangan system

1.5

Spesifikasi Software dan Hardware Spesifikasi hardware dan software yang digunakan Penulis untuk membuat

aplikasi informasi deteksi dini gejala kerusakan mobil ini adalah sebagai berikut: 

Hardware : 1. Procesor Intel Pentium Dual Cort 2

RAM 1 GB

3

VGA 512MB 64bit

5

4 

Ruang Hardisk 250GB

Software : 1. Macromedia Dreamweaver 8 2. XAMPP

1.6

Sistematika Penulisan Sistematika penulisan memaparkan penjelasan materi penulisan. Di bawah

ini penjelasan setiap bagiannya : BAB I

: PENDAHULUAN Mengemukakan latar belakang masalah, rumusan masalah, batasan masalah, tujuan penulisan, metode penulisan dan sistematika penulisan.

BAB II

: LANDASAN TEORI Menjelaskan teori-teori yang berhubungan dengan penulisan ini,

yang

sangat

membantu

penyelesaian

masalah

dan

perancangan program.

BAB III

: PERANCANGAN DAN IMPLEMENTASI Menjelaskan

mengenai

perancangan-perancangan

yang

dilakukan dalam membuat program aplikasi beserta konfigurasi perangkat lunak yang digunakan dan Menjelaskan implementasi dari program aplikasi ini yang dibuat dengan menggunakan PHP dan MYSQL.

BAB IV

: PENUTUP Berisi kesimpulan-kesimpulan dari penulisan beserta saransarannya.

6

BAB II LANDASAN TEORI

2.1

Perancangan Perangkat Lunak Dalam penulisan ini penulis juga menggunakan suatu metode perancangan

aplikasi yang paling umum digunakan yaitu dengan siklus hidup pengembangan system (system development life cycle – SDLC) atau disebut juga siklus hidup system (system life cycle - SLC). Metode SDLC menggunakan beberapa tahapan dalam mengembangkan system, yaitu: 1.

Perencanaan sistem (system planning)

2.

Analisis sistem (system analysis)

3.

Desain / perencanaan sistem (system design)

4.

Penerapan / implementasi system (system implementation)

5.

Perawatan sistem (system maintenance)

Tahapan tersebut dinamakan tahap air terjun (waterfall) karena pada setiap tahapan sistem akan dikerjakan secara berurut menurun dari perencanaan, analisis, desain, implementasi dan perawatan. Diaman pada setiap tahapan system bisa melakukan revisi atau perbaikan sistem sebelumnya. Hal ini dapat digambarkan sebagai berikut : Perencanaan Sistem Analisis Sistem

Desain Sistem Penerapan Sistem Perawatan Sistem

Gambar 2.1 Siklus hidup pengembangan system

2.2

HTML Merupakan singkatan dari HyperText Markup Language. HTML

digunakan untuk membangun sebuah halaman web. HTML bukanlah sebuah bahasa pemrograman melainkan bahasa markup (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untuk menentukan format atau style dari teks yang ditandai. Ciri utama dari file HTML adalah memiliki ekstensi htm, html atau xhtml. Kode - kode yang dibuat menggunakan bahasa inggris, misal untuk membuat teks tebal, digunakan kode B atau bold (tebal), untuk mencetak huruf miring digunakan kode I atau italic (miring), dsb.

2.2.1 Struktur Dasar Html Sebuah file HTML merupakan file teks biasa yang mengandung tag HTML, yaitu tag tag yang berpasangan dan ditandai dengan symbol < dan > . Pasangan atau “penutup perintah“ dari sebuah tag ditandai dengan tanda ‘/ ’. Misalnya dari tag adalah . Secara lengkap, file HTML mempunyai bagian head dan bagian body, jadi struktur lengkapnya adalah sebagai berikut: …letak body disini…

Bagian head biasanya berisi informasi mengenai dokumen tersebut, misalnya judul dokumen, versi HTML yang digunakan dan lain - lain. Sedangkan bagian body berisi layout atau desain halaman web.

2.2.1.1 Tag Gambar Untuk memasukan gambar dalam website, ada dua cara yang dapat dilakukan. Hal ini didasarkan pada tempat source gambar itu berada, yaitu :



Gambar dalam lokasi yang sama



Gambar tidak dalam lokasi yang sama Tidak semua format gambar dapat dimasukan dalam website, misalnya

format TIF; tetapi yang dapat dimasukan adalah format gambar yang sesuai, misalnya GIF dan JPG. Untuk memasukan gambar dari lokasi yang sama dapat dilakukan dengan tag : Sedangkan untuk memasukan gambar dari file eksternal digunakan tag :

2.2.1.2 Tag Tabel Dokumen HTML sering digunakan untuk menampilkan data, terlebih lagi dokumen yang berhubungan dengan database. Untuk menampilkan data tersebut, HTML menyediakan tag yang dapat digunakan untuk membuat sebuah tabel. Contoh penulisannya adalah sebagai berikut:

baris1kolom1	baris1kolom2
baris2kolom1	baris2kolom2

2.2.1.3 Mengatur Baris dan Paragraf Tidak seperti penulisan dokumen pada word processor, walaupun teks sudah diatur menggunakan enter maupun paragrap dalam pengetikannya namun hasil yang akan tampil masih akan berupa teks ulang panjang tanpa adanya pengaturan baris.

Untuk mengatur baris dan paragraph HTML digunakan tag, yaitu: 

Tag
Digunakan untuk membuat baris baru. Tag ini merupakan tag tunggal. Oleh karena itu tidak memerlukan tag penutup




Tag

Tag ini digunakan untuk membuat paragraph dalam HTML. Jadi apabila menggunakan tag

sama saja menulis tag
sebanyak dua kali. Format penulisannya adalah sebagai berikut :

…



Tag <pre> 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 <select> Tag ini digunakan untuk membuat suatu pilihan pada sebuah daftar. Format penulisannya adalah sebagai berikut: <select atribut1=”…”atribut2=”…”>…

Tag <select> ini digunakan di dalam tag . Formatnya adalah : item 

Tag Tag ini digunakan untuk membuat kotak masukkan yang banyak baris. Format penulisannya adalah sebagai berikut: <textarea atribut1=”…”atribut2=”…”>…

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 <script>. Format penulisannya adalah sebagai berikut: <script atribut=”…”>…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



b. Non-embedded script, yaitu cara penulisan script PHP yang tidak dimasukkan ke dalam script HTML. Contoh non-embedded script: File Contoh2.php Selamat Datang ”); ?>

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 " "; echo ""; echo "

SELAMAT DATANG DI WEBSITE BENGKEL ONLINE

Web ini di buat untuk membantu para pemilik kendaraan mobil mengatasi kerusakan mobil

";

Gambar 3.45 Tampilan Halaman Home User

2.

Pembuatan Halaman Kategori Kerusakan Halaman akan menampilkan daftar kerusakan berdasarkan tabel kategori

yang telah dibuat. Untuk menampilkan halaman ini digunakan scipt untuk memanggil database kategori dan menampilkannya dengan perintah seperi di bawah ini :

elseif ($_GET[module]=='daf_rusak') {echo "kategori kerusakan mobil"; $kategori=mysql_query("select nama_kategori, kategori.id_kategori, keterangan, count(daf_rusak.id_kategori) as jml from kategori left join daf_rusak on daf_rusak.id_kategori=kategori.id_kategori group by nama_kategori"); while($k=mysql_fetch_array($kategori)){ echo "

• $k[nama_kategori] ($k[jml])

"; } }

Gambar 3.46 Tampilan Halaman Kategori Kerusakan

3.

Pembuatan Halaman Daftar Kerusakan Halaman ini dapat di tampilkan setelah user memilih salah satu kategori

kerusakan. Halaman ini menggunakan script yang digunakan untuk memanggil tabel daf_rusak yang di urutkan berdasarkan id_rusak dan script ini disimpan pada file kanan.php. Script yang digunakan seperti di bawah ini : elseif ($_GET[module]=='detailkategori'){echo "»Daftar Kerusakan"; $detail=mysql_query("SELECT * FROM daf_rusak WHERE id_kategori='$_GET[id]'"); while($d = mysql_fetch_array($detail)){echo""; } echo "

$d[judul]

[ Kembali ]

"; }

Gambar 3.47 Tampilan Halaman Daftar Kerusakan

4.

Pembuatan Halaman Solusi Halaman ini dapat di tampilkan setelah user memilih salah satu daftar

kerusakan. Halaman ini menggunakan script yang digunakan untuk memanggil tabel solusi dan menampilkan isi field gejala. Script ini disimpan pada file kanan.php. Script yang digunakan seperti di bawah ini :

elseif ($_GET[module]=='daftarsolusi'){$solusi=mysql_query("SELECT * from solusi WHERE id_rusak='$_GET[id]'");while ($s=mysql_fetch_array($solusi)){ echo" $s[Gejala]"; } echo"
[ Kembali ]"; echo ""; }

Gambar 3.48 Tampilan Halaman Daftar Solusi

5.

Pembuatan Halaman Detail Solusi Halaman ini dapat di tampilkan setelah user memilih salah satu daftar

solusi. Halaman ini menggunakan script yang digunakan untuk memanggil tabel solusi dan menampilkan field gejala, penyebab, dan tindakan sesuai dengan id_solusi yang telah dipilih pada daftar solusi. Script ini disimpan pada file kanan.php. Script yang digunakan seperti di bawah ini : elseif ($_GET[module]=='detailsolusi'){$solusi=mysql_query("SELECT * from solusi WHERE id_solusi='$_GET[id]'");$s=mysql_fetch_array($solusi); echo ""; echo ""; echo ""; echo ""; echo ""; echo "

$s[Gejala]

GEJALA : $s[Gejala]

PENYEBAB : $s[penyebab]

TINDAKAN : $s[tindakan]

[ Kembali ]

"; }

Gambar 3.49 Tampilan Halaman Detail Solusi

6.

Pembuatan Halaman Daftar Bengkel Halaman ini menampilkan daftar bengkel yang ada di database bengkel,

Script yang digunakan untuk menampilkan daftar bengkel ini adalah : if($_GET[module]=='bengkel') {echo "DAFTAR BENGKEL"; $bengkel= mysql_query("SELECT * FROM bengkel ORDER BY id_bengkel"); while ($b=mysql_fetch_array($bengkel)){ echo""; echo"";

echo"


class=isi>Telpon

:

$b[telpon]



color=white>"; echo"

$b[nama]

Aalamat : $b[alamat]

"; } }

Gambar 3.50 Tampilan Halaman Daftar Bengkel

7.

Pembuatan Halaman Video Halaman ini akan menampilkan beberapa video yang tersedia pada folder

video, untuk meampilkan video ini penulis melakukan pemanggilan file ”../video/index.php” yang dilakukan di script kanan.php, script nya adalah sebagai berikut : elseif($_GET[module]=='video'){ include "video/index.php";} Dengan menggunakan script di atas berarti untuk menampilkan videonya menggunakan script index.php yang ada pada folder video. Dan untuk file video itu sendiri di simpan bersama file index.php dalam folder video.

Gambar 3.51 Tampilan Halaman Video

8.

Pembuatan Halaman Register Halaman register adalah halaman yang akan muncul jika user ingin

mendaftar sebagai anggota pada web ini yang mempunyai hak akses untuk berdikusi di forum. Script yang digunakan untuk menampilkan halaman register adalah : elseif($_GET[module]=='daftar'){ ?>

Masukkan Biodata Anda

E-MAIL
NAMA LENGKAP	input type=text name=nama_lengkap size=30>
NO HANDPHONE
PASSWORD
JENIS KELAMIN	<select name=jen_kel> -------- PRIA WANITA
TANGGAL LAHIR
ALAMAT
Upload Foto

Gambar 3.21 Tampilan Halaman Home

Gambar 3.52 Tampilan Halaman Register

9.

Pembuatan Halaman Forum Halaman forum hanya dapat di akses oleh user yang telah terdaftar sebagai

anggota dalam website ini. Pada Halaman ini user dapat membuat tema baru atau memberikan komentar pada tema yang lain yang dapat diakses pada pilihan joinroom. Halaman forum dibuat dengan cara memanggil database forum dan join room yang ada pada databse dan menggunakan perintah select dan insert pada sql untuk menampilkan dan memasukan data dari database. Berikut ini adalah penggalan program untuk menampilkan halaman forum.

elseif($_GET[module]=='forum'){ $data=mysql_query("SELECT * FROM anggota where sesi='$_SESSION[nomor_sesi]'");$d=mysql_fetch_array($data); echo"

FORUM DISKUSI

CREATE TEMA

";

Gambar 3.65 Tampilan Halaman Daftar Kerusakan

13.

Pembuatan Halaman Tambah Daftar Kerusakan Halaman ini digunakan untuk menambah data daftar kerusakan. Berikut

script yang digunakan untuk membuat halaman daftar kerusakan. elseif ($_GET[act]=='tambahdafrusak'){ echo "

Tambah Daftar kerusakan

E-MAIL
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 : $komentar ..... Joinroom "; } 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 : $f[id_forum_tema]"; echo" Comment : $komentar "; $kini= mysql_query("SELECT * FROM forum WHERE id_forum_tema='$_GET[id]' ORDER BY id_forum ASC"); echo" "; Gambar 3.54 Tampilan Halaman Join Room 3.6.2 Halaman Admin Halaman admin akan menampilkan seluruh pengaturan content yang ada pada halaman user. Admin dapat mengahapus, menambah, dan mengedit suatu data. Untuk tampilan halaman admin menggunakan file css yang terpisah yang di beri nama adminstyle.css, dan seluruh coding utama untuk menampilkan halaman admin tersimpan dalam file content.php 1. Pembuatan Halaman Login Admin Halaman ini adalah tampilan awal untuk mengakses halaman admin, disini admin harus memasukan password dan username dengan benar. Halaman ini berisi form login untuk memasukan username dan password. Script yang digunakan adalah sebagai berikut : Username : Password : "; ?> Gambar 3.55 Tampilan Halaman Login Admin 2. Pembuatan Halaman Home Admin Halaman ini berisi ucapan selamt datang beserta tampilan daftar menu admin. Script yang digunakan adalah sebagai berikut : if ($_GET[module]=='home'){ echo " Selamat Datang Hai $_SESSION[namauser], silahkan klik menu pilihan yang berada di sebelah kiri untuk mengelola content website. Login Hari ini: "; echo tgl_indo(date("Y m d")); echo " | "; echo date("H:i:s"); echo " ";} Gambar 3.56 Tampilan Halaman Home Admin 3. Pembuatan Halaman Manajemen User Halaman ini digunakan untuk mengubah username dan password dari admin.Pembuatan halaman ini terdiri dari tiga bagian yaitu bagian untuk melihat user, menambah user dan mengahapus user. Berikut ini adalah penggalan program untuk menampilkan halaman manajemen user. if ($_GET[module]=='user'){ echo " User $tampil=mysql_query("SELECT * FROM user ORDER BY id_user"); $no=1; while ($r=mysql_fetch_array($tampil)){ echo "
$no	$r[id_user]	$r[nama_lengkap]	$r[email]	EDIT HAPUS”; Gambar 3.49 Tampilan Halaman Home Majemen User 4. Pembuatan Halamant Tambah User Pembuatan halaman mengunakan script sql untuk memasukan sebuah data kedama field-field yang telah ditentukan yaitu username, password, nama dan email. Script yang digunakan untuk membuat halaman tambah user adalah sebagai berikut : elseif ($_GET[act]=='tambah_user'){ echo " Tambah User Username : Password : Nama : E-mail : "; } Gambar 3.57 Tampilan Halaman Home Tambah User 5. Pembuatan Halamant Edit User Halaman ini digunakan untuk mengedit data admin yang terdiri dari username, password, nama,dan email. Pembuatan edit user ini menngunkan perintah sql update, yang berfungsi untuk mengubah data pada tabel user. Penggalan script yang digunakan untuk membuat edit user adalah sebagai berikut: Gambar 3.58 Tampilan Halaman Home Edit User 6. Pembuatan Halaman Manajemen Modul Halaman manjemen modul ini berfungsi untuk mengatur modul/fungsi- fungsi pada website ini seperti pengaturan urutan tampilan pada menu navigasi admin. Karena pada manajemen modul admin bisa melakukan penambahan, pengurangan dan bahkan menghapus suatu moduk maka script yang digunakan untuk pada manajemen modul ini dibagi menjadi tiga yaitu tabmbahmodul, editmodul, dan hapus modul. Berikut penggalan script yang digunakan untuk menampilkan tabel manajemen modul. elseif ($_GET[module]=='modul'){ echo " Modul $tampil=mysql_query("SELECT * FROM modul ORDER BY urutan"); while ($r=mysql_fetch_array($tampil)){ echo "
$r[urutan]	$r[nama_modul]	$r[link]	$r[publish]	$r[aktif]	$r[status]	EDIT HAPUS" Gambar 3.59 Tampilan Halaman Manajemen Modul 7. Pembuatan Halaman Tambah Modul Halaman ini dibuat untuk membuat sebuah modul baru. Halaman ini juga menggunakan perintah sql insert untuk memasukan data baru dan untuk tampilan inputannya menggunakan form. Berikut script yang digunakan untuk membuat halaman tambah modul. elseif ($_GET[act]=='tambahmodul'){ echo " Tambah Modul Nama Modul : Link : Publish : Y N Aktif : Y N Status : user admin "; Gambar 3.60 Tampilan Halaman Tambah Modul 8. Pembuatan Halaman Edit Modul Halaman ini digunakan untuk mengubah data modul yang telah tersimpan pada database modul. Berikut script yang digunakan untuk membuat halaman edit modul. elseif ($_GET[act]=='editmodul'){ $edit = mysql_query("SELECT * FROM modul WHERE d_modul='$_GET[id]'"); $r = mysql_fetch_array($edit); echo " Edit Modul "; if ($r[publish]=='Y'){echo "";} else{ echo "";} Gambar 3.61 Tampilan Halaman Edit Modul 9. Pembuatan Halaman Kategori Halaman ini berisi nama_kategori dan keterangan dari seluruh kategori yang telah disimpan pada tabel kategori. Pada manajemen kategori script yang dibuta digunakan untuk menambah, mengubah dan menghapus suaatu ketegori. Penggalan script untuk menampilkan halaman kategori adalah sebagai berikut : elseif ($_GET[module]=='kategori'){ echo " Kategori " $tampil=mysql_query("SELECT * FROM kategori ORDER BY id_kategori DESC");$no=1; while ($r=mysql_fetch_array($tampil)){ echoEditHapus ";$no++; } echo " Nama Modul : value='$r[nama_modul]'> Link : type=text name=link size=30 value='$r[link]'> Publish : Y N Publish : Y N no namakategori keterangan aksi $no $r[nama_kategori] $r[keterangan] "; Gambar 3.62 Tampilan Halaman Kategori 10. Pembuatan HalamanTambah Kategori Halaman ini digunakan untuk menambah data kategori. Berikut script yang digunakan untuk membuat halaman tambah kategori. elseif ($_GET[act]=='tambahkategori'){ echo " Tambah Kategori Nama Kategori : keterangan ";} Gambar 3.63 Tampilan Halaman Tambah Kategori 11. Pembuatan Halaman Edit Kategori Halaman ini digunakan untuk mengubah data kategori yang telah tersimpan pada database kategori. Berikut script yang digunakan untuk membuat halaman edit kategori. elseif ($_GET[act]=='editkategori'){ $edit=mysql_query("SELECT * FROM kategori WHERE id_kategori='$_GET[id]'");$r=mysql_fetch_array($edit); echo " Edit Kategori "; echo " Nama Kategori : keterangan : "; Gambar 3.64 Tampilan Halaman Edit Kategori 12. Pembuatan Halaman Daftar Kerusakan Halaman ini berisi judul dan kategori dari seluruh daftar kerusakan yang telah disimpan pada tabel daftar kerusakan. Pada manajemen daftar kerusakan script yang dibuat digunakan untuk menambah, mengubah dan menghapus suaatu ketegori. Penggalan script untuk menampilkan halaman daftar kerusakan adalah sebagai berikut : elseif ($_GET[module]=='daf_rusak'){ echo " Daftar kerusakan $tampil = mysql_query("SELECT * FROM daf_rusak,kategori WHERE daf_rusak.id_kategori= kategori.id_kategori ORDER BY daf_rusak.id_kategori DESC limit $posisi,$batas"); while($r=mysql_fetch_array($tampil)) { echo "
$no	$r[judul]	$r[nama_kategori]	Edit | Hapus

Judul

:

Kategori

:<select name='kategori'> - Pilih Kategori -"; $tampil=mysql_query("SELECT * FROM kategori ORDER BY nama_kategori"); while($r=mysql_fetch_array($tampil)){ echo "$r[nama_kategori]"; } Gambar 3.66 Tampilan Halaman Tambah Daftar Kerusakan 14. Pembuatan Halaman Edit Daftar Kerusakan Halaman ini digunakan untuk mengubah data daftar kerusakan yang telah tersimpan pada tabel daftar kerusakan. Berikut script yang digunakan untuk membuat halaman edit daftar kerusakan. elseif ($_GET[act]=='editdafrusak'){ echo " Edit Daftar kerusakan Judul : Kategori : <select name='kategori'>"; $tampil=mysql_query("SELECT * FROM kategori ORDER BY nama_kategori"); while($w=mysql_fetch_array($tampil)) { if ($r[id_kategori]==$w[id_kategori]){ echo "$w[nama_kategori] else{ echo "$w[nama_kategori]";} } Gambar 3.67 Tampilan Halaman Edit Daftar Kerusakan 15. Pembuatan Halaman Solusi Halaman berisi data-data dari solusi mengatasai kerusakan mobil, yang menampilkan gejala dan daftar kerusakan. Di halaman admin solusi ini admin dapat mengatur penambahan data, mengubah data dan menghapus data dari tabel solusi. Berikut penggalan script yang digunakan untuk membuat halaman solusi. elseif ($_GET[module]=='solusi'){ echo " Daftar Solusi kerusakan mobil "; $tampil = mysql_query("SELECT * FROM solusi , daf_rusak where daf_rusak.id_rusak=solusi.id_rusak ORDER BY daf_rusak.id_rusak"); while($r=mysql_fetch_array($tampil)){ echo " no Gejala Jenis daftar keruskaan aksi $no $r[Gejala] $r[judul] Edit Hapus"; echo " "; Gambar 3.68 Tampilan Halaman Solusi 16. Pembuatan Halaman Tambah Solusi Halaman ini digunakan untuk menambah data solusi dalam menangani kerusakn mobil. Berikut script yang digunakan untuk membuat halaman solusi. elseif ($_GET[act]=='tambahsolusi'){echo " Tambah Daftar Solusi " echo " "; Gambar 3.69 Tampilan Halaman Tambah Solusi 17. Pembuatan Halaman Edit Solusi Halaman ini digunakan untuk mengubah data solusi dalam menangani kerusakn mobil. Berikut script yang digunakan untuk membuat halaman edit solusi elseif ($_GET[act]=='editsolusi') { $edit = mysql_query("SELECT * FROM solusi WHERE id_solusi='$_GET[id]'"); $r = mysql_fetch_array($edit); echo " Edit Daftar Solusi Judul Solusi Jenis kerusakan :<select name='daf_rusak'> - Pilih Jenis kerusakan-"; $tampil=mysql_query("SELECT * FROM daf_rusak ORDER BY judul"); while($r=mysql_fetch_array($tampil)){ echo "$r[judul]"; } echo" Judul : Daftar keruskan : <select name='daf_rusak'>"; . Gambar 3.70 Tampilan Halaman Edit Solusi 18. Pembuatan Daftar Bengkel Halaman ini berisi nama bengkel, alamat dan telpon dari seluruh data yang telah disimpan pada tabel bengkel. Pada manajemen daftar bengkel script yang dibuat digunakan untuk menambah, mengubah dan menghapus. Penggalan script untuk menampilkan halaman daftar bengkel adalah sebagai berikut : elseif ($_GET[module]=='mod_bengkel'){ echo " Daftar Bengkel "; $tampil = mysql_query("SELECT * FROM bengkel ORDER BY id_bengkel") while($r=mysql_fetch_array($tampil)){ echo ""; Gambar 3.71 Tampilan Halaman Daftar Bengkel 19. Pembuatan Halaman Tambah Daftar Bengkel Halaman ini digunakan untuk menambah data daftar Bengkel Berikut penggalan script yang digunakan untuk membuat halaman daftar bengkel. elseif ($_GET[act]=='tambahbengkel') { echo " Tambah Daftar bengkel no nama bengkel alamat telpon aksi $no $r[nama] $r[alamat] $r[telpon] Edit Hapus nama bengkel : alamat : telpon : "; } Gambar 3.72 Tampilan Halaman Tambah Daftar Bengkel 20. Pembuatan Halaman Edit Daftar Bengkel Halaman ini digunakan untuk mengubah data daftar bengkel yang telah tersimpan pada tabel bengkel. Berikut script yang digunakan untuk membuat halaman edit daftar bengkel. elseif ($_GET[act]=='editbengkel') { $edit = mysql_query("SELECT * FROM bengkel WHERE id_bengkel='$_GET[id]'"); $r = mysql_fetch_array($edit); echo " Edit Daftar Bengkel nama bengkel : alamat : telpon : "; Gambar 3.73 Tampilan Halaman Edit Daftar Bengkel 21. Pembuatan Halaman Daftar Anggota Pada halaman ini admin dapat melihat user yang telah mendaftra ebagai anggota. Pada halaman ini script yang digunakan hanya untuk melihat isi profil anggota dan menghapus anggota. Halaman pertama dari admin anngota ditampilkan berupa tabel yang berisi nama anggota, tangal lahir dan alamat email. Berikut ini adalah penggalan script yang digunakan untuk menampilkan daftar anggota : elseif ($_GET[module]=='anggota'){ echo " DAFTAR ANGGOTA "; $tampil=mysql_query("SELECT * FROM anggota ORDER BY nama_lengkap DESC limit $posisi,$batas"); while ($r=mysql_fetch_array($tampil)){ $tgl = tgl_indo($r[tgl_lahir]); echo ""; Gambar 3.74 Tampilan Halaman Daftar Anggota 22. Pembuatan Halaman Lihat Anggota Pada Halaman ini user dapat melihat profil dari anggota. Halaman ini dapat ditampilkan dengan memanggil seluruh isi tabel anggota dengan nmenggunakan peintah sql select. Berikut ini adalah penggalan script untuk membuat halaman lihat anggota : echo" PROFIL ANGGOTA "; $data=mysql_fetch_array(mysql_query("SELECT * FROM anggota WHERE id_anggota='$_GET[id]'")); $tgl_lahir=sprintf("%02d%02d%02d",$_POST[thn_lahir],$_POST[bln_lahir],$_ POST[tgl_lahir]); Gambar 3.75 Tampilan Halaman Profil Anggota 23. Pembuatan Halaman Forum Pada halaman ini admin dapat melhat tema-tema yang telah dibuat oleh anggota pada website ini, di halaman ini admin hanya bisa melihat dan menghapus forum, oleh karena itu script yang buat hanya untuk melihat dan menghapus tema forum saja. Berikut penggalan script untuk menampilkan seleruh tema forum : elseif ($_GET[module]=='forum_tema'){echo " TEMA FORUM No NIS Nama Lengkap Tgl Lahir E-mail Aksi $no $r[id_anggota] $r[nama_lengkap] $r[temp_tgl_lhr]$tgl $r[email] HAPUS "; echo"| LIHAT"; echo" E-MAIL NAMA LENGKAP NO HANDPHONE JENIS KELAMIN TANGGAL LAHIR ALAMAT "; sql=mysql_query("SELECT * FROM forum_tema,anggota WHERE forum_tema.id_anggota=anggota.id_anggota ORDER BY tanggal DESC LIMIT $posisi,$batas"); while ($d=mysql_fetch_array($sql)){ $tgl=tgl_indo($d['tanggal']); echo""; Gambar 3.76 Tampilan Halaman Tema Forum 24. Pembuatan Halaman Join Room Halaman ini akan menampilkan komentar-komentar yang telah di isi oleh anggota untuk menanggapi dari suatu tema forum. Disini admin hanya dapat melihat dan menghapus saja. Berikut penggalan script program untuk melihat halaman joinroom : Gambar 3.77 Tampilan Halaman Join Room 3.7 Implementasi Uji coba dilakukan untuk melihat perkembangan situs yang telah dibuat. Uji coba merupakan evaluasi sehingga mengetahui kekurangan dan kesalahan yang mungkin terdapat di dalamnya. Untuk menguji situs ini, 1. Mengaktifkan aplikasi XAMPP 1.4.15 2. Kemudian aktifkan server Apache, dan phpMyadmin untuk koneksi ke database. 3. Simpan file php di dalam folder htdocs dan jalankan dengan menggunakan web browser 4. Ketik address localhost/autorepair (untuk user). 3.7.1 Hardware dan Software Karena aplikasi yang Penulis buat berbasis web, maka aplikasi bisa dijalankan tanpa perlu spesifikasi khusus dari komputer yang digunakan, hanya saja harus membutuhkan web browser yang mendukung program PHP. Berikut adalah spesifikasi komputer minimal yang bisa digunakan: 1. Windows 9x/NT/ME/2000/ME 2. Processor Pentium 200 3. Harddisk freespace 50 MB 4. Monitor VGA 640x480 (1024x768 lebih baik) 5. Memory 64 MB 6. Mouse 7. Keyboard 3.7.2 Proses Upload Web Aplikasi informasi deteksi dini gejala kerusakan mobil Setelah membuat seluruh halaman web dan melakukan pengetesan server local, Upload website sangat diperlukan agar website yang telah dibuat dapat dibuka di internet, sehingga dapat dikunjungi oleh semua orang yang terhubung ke internet. Untuk dapat mengupload aplikasi informasi deteksi kerusakan mobil ini, syarat pertama yang harus dimiliki adalah sebuah domain. Domain bisa kita dapatkan secara gratis ataupun dengan berlangganan. Penulis disini menggunakan domain yang gratis karena ukuran file yang di upload tidak terlalu besar maka cukup saja dengan yang gratis. Domain gratis itu bisa di daftarkan pada website http://www.co.cc, dan nama domain yang telah penulis daftarkan adalah autorepair.co.cc. Selain domain yang harus dimiliki adalah hosting. Penulis juga menggunakan hosting gratis karena ukuran file yang di upload todak terlalu besar sehingga masih cukup menggunakan yang gratis. Hosting yang penulis pakai didaftarkan pada website www.freehostia.com. Setelah memiliki domain dan hosting, langkah selanjutnya adalah mengupload file dan database yang telah kita buat ke alamat domain tersebut. Untuk mengupload file penulis menggunakan bantuan aplikasi filezilla yang bisa didapatkan secara gratis. Berikut langkah-langkah memuat file menggunakan filezilla : 1. Install dan jalankan filezilla. 2. Pilih menu File - Site manager, lalu akan muncul gambar seperti di bawah ini Gambar 3.78 Tampilan Filezila Site Manager 3. Masukan host yang berisikan alamat domain. 4. Masukan username dan password yang telah di dapat dari hosting, pilih connect jika sudah selesai mengisi username dan password 5. Setelah berhasil terhubung maka tampilan pada kolom remote site adalah isi dari file pada domain. Dan pada kolom local site adalah isi dari file komputer lokal. 6. Kemudian pindahkan folder yang berisikan file website. Pada penulisan ini folder tersebut bernama c:programfiles/xampp/htdoc/mobil. mobil Klick terdapat kanan pada pada folder directory tersebut kemudian pilih upload. 7. Setelah semua file yang mendukung website selesai di upload, langkah selanjutnya adalah menyimpan database pada hosting. Untuk membuat database kedalam hosting yang telah dimiliki, langkah pertama adalah database yang telah dibuat dalam php myadmin di export kedalam sebuah file, caranya adalah masuk kedalam halaman phpmyadmin dengan server local, pilih database yang telah kita buat (dalam penulisan ini nama databasenya adalah “mobil”), kemudian pilih tab export, simpan file yang telah diexport pada mydocument dengan nama “mobil.sq”. Selanjutnya masuk ke dalam cpanel phpmyadmin hosting yang telah di daftar. Buat sebuah database baru bernama “mobil” lalu pilih import, lalu browse file “mobil.sql” hasil export tadi dan tekan GO. BAB IV PENUTUP 4.1 Kesimpulan Aplikasi web ini berguna untuk memberikan layanan informasi untuk mengatasi gejala-gejala ringan kerusakan pada mobil khususnya yang berbahan bakar bensin sehingga dengan pemanfaatan aplikasi web ini para penggguna kendaraan mobil dapat mendeteksi atau menyelesaikan sendiri kerusakan mobil tersebut tanpa perlu di bawa kebengkel terlebih dahulu. Pada pembuatan web ini mengalami beberapa kendala diantaranya dalam memperoleh ide untuk mendesain aplikasi, kemudian dalam memperoleh beberapa informasi mengenai kerusakan mobil, serta beberapa script yang dibutuhkan untuk menampilkan daftar kerusakan mobil yang disesuaikan dengan kategori kerusakan nya. Dengan dukungan skrip PHP yang cepat dan tidak banyak memakan memori, membuat pengambilan data ke database akan lebih efektif dan juga dengan menggunakan 2 komponen utama ini yaitu PHP, dan MySQL pembentukan situs menjadi lebih variatif. Berdasarkan hasil evaluasi berupa kuesioner kepada 10 responden, dari segi Interface (Tampilan muka) 80% menyatakan tampilan ini sudah menarik, dari segi User Friendly (kemudahan akses), 75% menyatakan aplikasi ini mudah digunakan. Sedangkan dari segi informasi yang terkandung dalam web ini 80% mentayakan sudah cukup informatif mengenai penanganan kerusakan mobil. 4.2 Saran Aplikasi web ini masih dapat dikembangkan atau dimodifikasi lebih lanjut sesuai dengan penambahan pengalaman dalam bidang otomotif serta perkembangan teknologi informasi. Selain itu juga dapat dikembangkan lagi dengan menambah jenis-jenis kerusakan mobil yang bukan hanya berbahan bakar bensin saja. Untuk itu dibutuhkan domain pengetahuan yang lebih lengkap dan komplek dari yang telah dibuat oleh penulis. Database dan record yang saling terkait digunakan untuk menyimpan data-data yang diperlukan dalam program. Data yang digunakan sebaiknya tidak diubah secara sembarangan karena akan memberikan pengaruh terhadap program. Untuk pengembangan selanjutnya, disarankan agar jumlah gejala yang dimasukkan ke dalam database dengan jumlah yang lebih banyak dan bervariasi. Agar lebih menunjang kemudahan user dalam penggunaan aplikasi ini bisa dibuat versi wap nya agar pengaksesan situs ini bisa dilakukan dari ponsel. × Report "BAB I PENDAHULUAN 1.1 Latar Belakang Masalah" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close NO NAMA TEMA POSTING AKSI $no $d[nama_lengkap] $d[tema] $tgl, ($d[id_forum_tema]) HAPUS