Pembuatan Website Informasi Mengenai Masalah Seputar Mobil.

(1)

i

Universitas Kristen Maranatha

ABSTRAK

Dunia otomotif saat ini berkembang dengan pesat, khususnya otomotif

kendaraan roda empat. Setiap tahun bahkan beberapa bulan sekali, selalu

bermunculan produk-produk kendaraan terbaru dari berbagai produsen mobil.

Persaingan antar produsen mobil untuk menciptakan suatu inovasi pada kendaraan

semakin ketat. Tentu hal ini membuat konsumen, tertarik membeli kendaraan baru.

Selain itu seiring dengan kemajuan teknologi, orang-orang cenderung lebih suka

mengakses informasi tentang seputar mobil melalui internet. Oleh karena itu, penting

pengusaha otomotif, memiliki website interaktif dengan tujuan memberi pengetahuan

informasi seputar mobil kepada konsumen. Usaha dalam bidang otomotif tersebut

dapat mudah dikenal oleh pengguna internet.


(2)

ii

Universitas Kristen Maranatha

ABSTRACT

Automotive the world now growing very rapidly, especially automotive

four-wheeled vehicle. Every year even once every few months, just keep on coming

products latest vehicle of various automobile manufacturer. The competitions among

car manufacturers to create an innovation in vehicles is getting tight. Certainly this

make consumers, interested in acquiring new vehicles. Besides along with

technological progress, people tend to prefer accessing information about through

the internet. Hence, important automotive, businessmen having interactive website

for the purpose of giving knowledge information about a car to consumers.

Businesses in the automotive sector can be easily known by users of the internet.


(3)

v

Universitas Kristen Maranatha

DAFTAR ISI

ABSTRAK.……….

i

ABSTRACT ………..

ii

KATA PENGANTAR………

iii

DAFTAR ISI………..

v

DAFTAR GAMBAR……….

x

DAFTAR TABEL………..

xiii

BAB I. PENDAHULUAN………

1

1.1 Latar Belakang Masalah……….

1

1.2 Identifikasi Masalah………...

2

1.3 Tujuan……….…

2

1.4 Batasan Masalah………...

2

1.5 Sistematika ………

3

BAB II. LANDASAN TEORI……….

4

2.1 Pengertian PHP……….

4

2.1.1 Dasar Penggunaan PHP………..

4

2.1.2 Penulisan PHP………...

4


(4)

vi

Universitas Kristen Maranatha

2.1.4 Fungsi If ….………..

8

2.1.5 Fungsi Array……….……….

8

2.1.6 Fungsi While ………..

9

2.2 Fungsi HTML……….……….

9

2.3 Basis Data………...

10

Istilah-Istilah Basis Data ………..

10

2.4 CSS…...………..

12

2.4.1 Dasar CSS…………..………

12

2.4.2 Jenis CSS………..……….

13

2.5 XAMPP……….………

13

2.6 Adobe Dreamweaver…….………

14

Halaman Kerja Dreamweaver………..……….

15

BAB III. PERANCANGAN DAN PEMODELAN………...

16

3.1 Peta Situs……….………..

16

3.2.1 Peta Situs Website User………..

16

3.2.1 Peta Situs Website Administrator………...

17

3.2 Diagram Alir………...

18

3.2.1 Diagram Alir Website User………

18


(5)

vii

Universitas Kristen Maranatha

3.2.1.2 Diagram Alir Sub Menu Tips….……….……..

20

3.2.1.3 Diagram Alir Sub Menu Forum………...…….

21

3.2.1.4 Diagram Alir Sub Menu Aksesoris…….………..

23

3.2.1.5 Diagram Alir Sub Menu Menu Login/Register …………

24

3.2.2 Diagram Alir Website Administrator……….

26

3.3 Perancangan Database………...…………

28

Membuat Database menggunakan phpmyadmin dengan XAMPP…

28

3.4 Perancangan Website………

32

3.4.1 Perancangan Index….………..

33

3.4.2 Perancangan Login….………..

37

3.4.3 Perancangan Register….………..

38

3.4.4 Perancangan Topik Forum….………..

40

3.4.5 Perancangan Tampil Forum….………..

44

3.5 Perancangan Tabel Relasi………...…………

47

BAB IV. PENGAMATAN DATA DAN ANALISA………..

50

4.1 Tampilan Website User………. 50

4.1.1 Home….………..

50

4.1.2 Tips……….………..

51

4.1.3 Forum……….………..

52


(6)

viii

Universitas Kristen Maranatha

4.1.3.2 Tampilan Forum……..……...….……….……..

53

4.1.3.3 Create Forum……..……...….……….…….. 54

4.1.4 Aksesoris……….……….. 55

4.1.5 Form Register……….………..

56

4.2 Tampilan Website Admin……….

57

4.2.1 Admin Login..……….……….. 57

4.2.2 Home Admin..……….………..

58

4.2.3 Edit "Tips Masalah Seputar Mobil"..…………..……….. 59

4.2.4 Edit "Input Aksesoris Mobil"..…………..………..

60

4.2.5 Edit "Aksesoris Mobil"..…………..………..…….. 61

4.2.6 Edit "Komentar"..…………..……….……..……..

63

4.2.7 Edit "Forum"………….…………..………..….…..

64

4.2.8 Edit "User"………….…………..………..………..

65

4.2.9 Edit "Master Barang"………….…………..………..………..

66

4.3 Uji coba Website User……….……….

67

4.3.1 Uji coba Login..……….………..

67

4.3.2 Uji coba Register..……….….………..

68

4.3.3 Uji Komentar Forum……….……..……….. 69


(7)

ix

Universitas Kristen Maranatha

BAB V. KESIMPULAN DAN SARAN……….……..

73

5.1 Kesimpulan………..….

73

5.2 Saran……..………..….

73

DAFTAR PUSTAKA………

LAMPIRAN A LISTING PROGRAM………

74

A-1


(8)

x

Universitas Kristen Maranatha

DAFTAR GAMBAR

Gambar 2.1 Tampilan pertama saat buka Dreamweaver………...

14

Gambar 2.2 Halaman Kerja Dreamweaver………...……….…..

15

Gambar 3.1 Peta Situs Website User……….

Gambar 3.2 Peta Situs Website Administrator………...

16

17

Gambar 3.3 Diagram Alir Website User………

18

Gambar 3.4 Diagram Alir Sub Menu Home………….………..

19

Gambar 3.5 Diagram Alir Sub Menu Tips…..………

20

Gambar 3.6 Diagram Alir Sub Menu Forum…………...………...

21

Gambar 3.7 Diagram Alir Sub Menu Aksesoris……….

23

Gambar 3.8 Diagram Alir Sub Menu Menu Login/Register ………... 24

Gambar 3.9 Diagram Alir Menu Administrator ….……… 26

Gambar 3.10 Control Panel XAMPP ………...

29

Gambar 3.11 Tampilan phpmyadmin ………...……….

30

Gambar 3.12 Menu Databases ………..

31

Gambar 3.13 Menu Create Databases ………..………

32

Gambar 3.14 Halaman Database Informasi Mengenai Masalah Seputar Mobil

dan Penjualan Aksesoris Mobil

33

Gambar 3.15 Website Header………..……… 33


(9)

xi

Universitas Kristen Maranatha

Gambar 3.16 Website Body ………...

35

Gambar 3.17 Website Footer ……….……….…..

36

Gambar 3.18 Website Login ………..……….….…….

37

Gambar 3.19 Website Register…… ……….….

38

Gambar 3.20 Website Topik Forum ………..

40

Gambar 3.21 Website Tampil Forum ………

44

Gambar 3.22 Tampilan Tabel Relasi………..

49

Gambar 4.1 Halaman Home Website ……….

50

Gambar 4.2 Halaman Tips.………..………..

51

Gambar 4.3 Halaman Topik Forum ………... 52

Gambar 4.4 Halaman Tampilan Forum ………...

53

Gambar 4.5 Create Forum………... 54

Gambar 4.6 Halaman Aksesoris………...………... 55

Gambar 4.7 Form Register…………...………. 56

Gambar 4.8 Halaman Login Admin ……….………..

57

Gambar 4.9 Halaman Home Admin ………….………..

58

Gambar 4.10 Halaman Edit "Tips Masalah Seputar Mobil"……...……… 59

Gambar 4.11 Halaman Edit "Input Aksesoris Mobil"………..………

60

Gambar 4.12 Halaman Edit "Aksesoris Mobil"………….………. 61

Gambar 4.13 Halaman Form Edit "Aksesoris Mobil"………..….. 62


(10)

xii

Universitas Kristen Maranatha

Gambar 4.15 Halaman Edit "Forum"……….. 64

Gambar 4.16 Halaman Edit "User"………. 65

Gambar 4.17 Form Master Barang ………. 66

Gambar 4.18 Tampilan Master Barang ……….………. 66

Gambar 4.19 Uji Coba Login ……….………...

67

Gambar 4.20 Konfirmasi Login ………

67

Gambar 4.21 Uji Coba Register ……….………...

68

Gambar 4.22 Konfirmasi Register ……….….………...

68

Gambar 4.23 Uji Coba Komentar Forum ………..

69

Gambar 4.24 Tampilan Komentar Forum ……….……….…...

70

Gambar 4.25 Uji Coba Create Forum ……….……….

70

Gambar 4.26 Hasil Tampilan Uji Coba Create Forum ……….. 71


(11)

xiii

Universitas Kristen Maranatha

DAFTAR TABEL

Tabel 2.1 Operator Matematika……….. 5

Tabel 2.2 Operator Perbandingan ……….…. 6


(12)

A-1

LAMPIRAN A

LISTING PROGRAM

1.

Koneksidatabase.php

<?php

//$server ="localhost"; //$username = "root"; //$password = ""; //$database = "autozone";

$conn = mysql_connect("localhost","root",""); if ($conn) {

mysql_select_db("autozone",$conn)

or die ("Database tidak ada!".mysql_error()); }

else { echo "Gagal"; }

?>

2.

Index.php

<?

include("konek.php");

session_start();

$sesi=$_SESSION["userku"]; //bukan menciptakan session, cuma cek session aja (session dibuat pada script login_proses.php)

if(!empty($sesi)) //disini dilakukan pengecekan terlebih dahulu apakah session sblmnya sudah ada atau belum

{

echo"Anda sudah login $sesi"; }

else { ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AutoZone</title>

<style type="text/css"> <!--


(13)

A-2

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px;

background-image:url(../Photograph-Background-2.jpg);

} #Menu{

position:absolute; width:514px; height:47px; z-index:2; left: 457px; top: 233px; color: # F00; }

#Footer {

position:absolute; width:986px; height:38px; z-index:2; left: 1px; top: 858px; text-align: center; color: # F00; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> <style type="text/css">

<!-- #Header {

position:absolute; width:983px; height:192px; z-index:3; left: 1px; top: 25px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px;


(14)

A-3

z-index:2; left: 8px; top: 2px; }

#apDiv1 {

position:absolute; width:245px; height:192px; z-index:4; left: 720px; top: 12px; border:double; }

a:link {

color: #FFF; }

a:visited {

color: #FFF; }

a {

font-weight: bold; }

a:hover {

color: #F00; }

#apDiv2 {

position:absolute; width:708px; height:249px; z-index:1; left: 7px; top: -556px; }

#apDiv3 {

position:absolute; width:241px; height:115px; z-index:2; left: 198px; top: -125px; }

#apDiv4 {

position:absolute; width:699px; height:174px; z-index:5; left: 5px; top: 284px; border:double; }

#apDiv5 {

position:absolute; width:988px; height:520px; z-index:2;


(15)

A-4

left: 1px; top: -569px; }

--> </style> </head>

<body bgcolor="#CCCCCC">

<form name="form1" action="login_proses.php" method="post"/> <div id="form" >

<div id="Footer"><font color="#FFFFFF">&copy; Copyright 2013 All rights reserved </font></h3></p>

<div id="apDiv2"><img src="anigif.gif" width="706" height="259" /></div> <div id="apDiv5">

<div id="apDiv1">

<form name="login" action="login_proses.php" method="post">

<p><font color="#FFFF00"><font size="+1">Silahkan login terlebih dahulu untuk mengakses forum</font></font></p>

<font color="#FFFFFF" ><font size="+1"> User Name</font></font> <input type="text" name="username"/><br />

<font color="#FFFFFF" ><font size="+1"> Password &nbsp; </font></font><input type="password" name="password"/><br /><br />

<input type="submit" name="submit" value="login"/> <a href="register1.php">register

</a></p> </form> </p> </div>

<div id="apDiv4"><h1><font color="#FFFFFF">Selamat datang di Auto Zone....</font></h1>

<h3><font color="#FFFFFF"> Sebuah website informasi mengenai masalah seputar mobil, tips-tips seputar mobil, penjualan aksesoris untuk mobil dan terdapat forum diskusi dengan topik-topik terkini masalah seputar mobil disertai dengan fasilitas pembuatan forum yang dapat dibutat oleh user website autozone </font></h3></p>

</div> </div> </div>

<div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="Index.php">HOME</a> </li>

<li><a href="#" class="MenuBarItemSubmenu">TIPS</a> <ul>

<li><a href="TIps.php">MASALAH SEPUTAR MOBIL</a></li>

</ul> </li>

<li><a href="#" class="MenuBarItemSubmenu">FORUM</a> <ul>

<li><a href="list_forum.php">FORUM DISKUSI</a></li>

<li><a href="tambah_forum.php">CREATE FORUM</a></li> </ul>


(16)

A-5

</li>

<li><a href="#" class="MenuBarItemSubmenu">AKSESORIS</a> <ul>

<li><a href="aksesoris.php">AKSESORIS MOBIL</a></li> </ul>

</li> </ul> </center> <p>&nbsp;</p>

</div>

<div id="Banner atas">

<marquee> <font color="#FFFFFF">Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk mobil.</font></marquee></div>

<div id="Header"><img src="Head.jpg" width="983" height="192" /></div> </div>

<script type="text/javascript"> <!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </form> </body> </html>

3.

Login_proses.php

<style type="text/css"> <!--

#apDiv1 {

position:absolute; width:926px; height:1010px; z-index:1;

background-image: url(29-09-2012%206-46-12.jpg); left: 272px;

top: 159px; }

--> </style>


(17)

A-6

<?php

include("konek.php");

session_start();

$username=$_REQUEST['username']; $password=$_REQUEST['password'];

$seleksi=mysql_query("select * from registercustomer where username='$username' and password='$password'"); //seleksi dari tabel anggota

$jumlah=mysql_num_rows($seleksi); if($username=="" or $password=="") {

echo "mohon isi username dan password anda dengan benar. <a href='index.php' OnClick='history.go(-1)'>Back</a>";

}

else if($jumlah==1) // proses login sukses karena username dan password yg sesuai ada 1 yg cocok.

{ ob_start();

$r = mysql_fetch_array($seleksi); $_SESSION['id'] = $r['id'];

$_SESSION["userku"]=$username; // membuat session dgn nama userku header("location:halaman_user.php"); // langsung diredirect ke halaman user ob_end_flush();

} else {

echo "username atau password tidak sesuai. <a href='index.php' OnClick='history.go(-1)'>Back</a>";

} ?>


(18)

A-7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title>

<style type="text/css"> <!--

#form{

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px; color: #FFF; }

#Menu{

position:absolute; width:516px; height:41px; z-index:2; left: 242px; top: 235px; color: # F00; }

#Footer {

position:absolute; width:986px; height:38px; z-index:2; left: 1px; top: 858px; text-align: center; color: # F00; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css"> <!--

#Header {

position:absolute; width:983px; height:192px; z-index:3; left: 4px;


(19)

A-8

top: 25px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px; z-index:2; left: 8px; top: 2px; }

body {

background-color: #C90; }

#apDiv1 {

position:absolute; width:316px; height:43px; z-index:2; left: 249px; top: 341px; }

#sourcecode {

position:absolute; width:200px; height:115px; z-index:4; left: 405px; top: 335px; }

--> </style> </head>

<body bgcolor="#000000"> <div id="form">

<div id="Footer">Home About Us Contact Us</div> <div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="Index.php">HOME</a> </li>

<li><a href="#" class="MenuBarItemSubmenu">TIPS</a> <ul>

<li><a href="tips.html">MASALAH SEPUTAR MOBIL</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">FORUM</a> <ul>

<li><a href="tips.html">Untitled Item</a></li> </ul>


(20)

A-9

<li><a href="#" class="MenuBarItemSubmenu">AKSESORIS</a> <ul>

<li><a href="#">AKSESORIS MOBIL</a></li> </ul>

</li> </ul> </center> </div>

<div id="Banner atas">

<marquee>Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk

mobil.</marquee></div> <div id="sourcecode"><?php include("konek.php");

$nama = $_POST['nama']; $alamat = $_POST['alamat'];

$tempatlahir = $_POST['tempatlahir']; $tanggallahir = $_POST['tanggallahir'];

$tahunlahir = $_POST['tahunlahir']; $telepon = $_POST['telepon'];

$jeniskelamin = $_POST['jeniskelamin']; $username = $_POST['username']; $password = ($_POST['password']);

if((!empty($nama)) && (!empty($alamat)) && (!empty($tempatlahir)) && (!empty($tanggallahir)) && (!empty($tahunlahir)) && (!empty($telepon)) && (!empty($jeniskelamin)) && (!empty($username)) && (!empty($password))) {

$query = mysql_query("INSERT INTO registercustomer (nama, alamat, tempatlahir, tanggallahir, tahunlahir, telepon, jeniskelamin, username, password) VALUES('$nama', '$alamat', '$tempatlahir', '$tanggallahir', '$tahunlahir', '$telepon', '$jeniskelamin', '$username', '$password')");

echo 'Selamat, Anda telah berhasil registrasi'; }

else {

echo "<script>alert('Tidak boleh ada data yang kosong !'); javascript:history.go(-1);</script>";

} ?> </div>

<div id="Header"><img src="Head.jpg" width="983" height="192" /></div> </div>

<script type="text/javascript"> <!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </body> </html>

5.

TIps.php


(21)

A-10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AutoZone</title>

<style type="text/css"> <!--

#form{

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:1106px; z-index:1; top: 17px; left: 11px; color: #FFF; }

#Menu{

position:absolute; width:516px; height:41px; z-index:2; left: 242px; top: 235px; color: # F00; }

#Footer {

position:absolute; width:986px; height:38px; z-index:2; left: 6px; top: 1498px; text-align: center; color: # F00; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css"> <!--

#Header {

position:absolute; width:983px; height:192px; z-index:3; left: 4px;


(22)

A-11

top: 25px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px; z-index:2; left: 8px; top: 2px; }

body {

background-color: #C90; }

#apDiv1 {

position:absolute; width:374px; height:66px; z-index:2; left: 313px; top: 379px; }

#apDiv1 {

font-size: 24px; }

#apDiv1 {

color: #FFF; }

#apDiv1 {

color: #F30; }

#apDiv2 {

position:absolute; width:73px; height:23px; z-index:2; left: 949px; top: 352px; color: #0FF; }

#apDiv3 {

position:absolute; width:200px; height:115px; z-index:4; left: 134px; top: 344px; }

#apDiv4 {

position:absolute; width:200px; height:115px; z-index:4;


(23)

A-12

left: 198px; top: 388px; }

#apDiv5 {

position:absolute; width:452px; height:251px; z-index:4; left: 100px; top: 326px; }

--> </style> </head>

<body bgcolor="#000000">

<div id="form">

<div id="Footer">Home About Us </div> <div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="Index.php"><strong>HOME</strong></a>

</li>

<li><a href="#" class="MenuBarItemSubmenu">TIPS</a> <ul>

<li><a href="TIps.php">MASALAH SEPUTAR MOBIL</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu"><strong>FORUM</strong></a> <ul>

<li><a href="list_forum.php">FORUM DISKUSI</a></li> <li><a href="tambah_forum.php">CREATE FORUM</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">AKSESORIS</a> <ul>

<li><a href="aksesoris.php">AKSESORIS MOBIL</a></li> </ul>

</li> </ul> </center> </div>

<div id="Banner atas">

<marquee>Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk

mobil.</marquee></div> <div id="apDiv5"><?php

$server = "localhost"; $pemakai = "root"; $password = "";


(24)

A-13

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);

// Bagian untuk membaca data

$sql = "SELECT ID_tips, artikel,foto,judul FROM tips"; $hasil = mysql_query($sql, $id_mysql);

while ($baris = mysql_fetch_row($hasil)) {

$ID_tips = $baris[0]; $artikel = $baris[1]; $foto = $baris[2];

$judul = $baris[3];

echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />";

echo '<div style = "margin-right: 100px">';

echo '<img src= "/TA/foto_tips/'.$foto.'" width="150" height="150" align="left" />';

echo '</div>';

echo '<div style = "margin-left: 20px">'; echo " $judul";

echo "<br />"; echo "<br />"; echo "<br />";

echo("<a href=\"TIps_detail.php?ID_tips=$ID_tips\">Baca Selengkapnya</a></td>\n");

echo '</div>'; // echo "<hr/>";

}

echo '<br />'; echo '<br />'; echo '<br />';

// Akhir pembacaan data

mysql_close($id_mysql); ?></div>

<div id="Header"><img src="Head.jpg" width="983" height="192" /></div> </div>


(25)

A-14

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </body> </html>

6.

Tips_detail.php

<?php

$server = "localhost"; $pemakai = "root"; $password = "";

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);

// Bagian untuk membaca data

$sql = "SELECT ID_tips, artikel, foto, judul FROM tips WHERE ID_tips = $_GET[ID_tips]";

$hasil = mysql_query($sql, $id_mysql);

while ($baris = mysql_fetch_row($hasil)) {

$ID_tips = $baris[0]; $artikel = $baris[1]; $foto = $baris[2];

$judul = $baris[3];

echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />";

echo '<div style = "margin-left: 20px">';

echo "<br />"; echo "<br />"; echo "judul : $judul"; echo "<br />"; echo "<br />";


(26)

A-15

echo "artikel : $artikel"; echo "<br />"; echo "<br />"; echo "<br />";

echo '<div style = "margin-right: 100px">';

echo '<img src= "/TA/foto_tips/'.$foto.'" width="150" height="150" align="left" />';

echo '</div>'; echo("<a

href=\"TIps.php\"><br><br><br><br><br><br><br><br>Back</a></td>\n"); echo '</div>';

// echo "<hr/>"; }

echo '<br />'; echo '<br />'; echo '<br />';

// Akhir pembacaan data

mysql_close($id_mysql); ?>

7.

Halaman_user.php

<?php

include("konek.php"); session_start();

$username=$_SESSION["userku"];

if($_SESSION["userku"]=="") //untuk mencegah apabila halaman diakses tanpa login (session kosong), maka otomatis di redirect ke form login (index.php)

{

ob_start();

header("location:index.php"); ob_end_flush();

} ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AutoZone</title>

<style type="text/css"> <!--

#form{

position:absolute; left:0;


(27)

A-16

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px; color: #FFF; }

#Menu{

position:absolute; width:516px; height:41px; z-index:2; left: 242px; top: 235px; color: # F00; }

#Footer {

position:absolute; width:986px; height:38px; z-index:2; left: 1px; top: 858px; text-align: center; color: # F00; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css"> <!--

#Header {

position:absolute; width:983px; height:192px; z-index:3; left: 4px; top: 25px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px; z-index:2; left: 8px; top: 2px;


(28)

A-17

} body {

background-color: #C90; }

#apDiv1 {

position:absolute; width:374px; height:66px; z-index:2; left: 479px; top: 421px; }

#apDiv1 {

font-size: 24px; }

#apDiv1 {

color: #FFF; }

#apDiv1 {

color: #F30; }

#apDiv1 {

color: #FFF; }

--> </style> </head>

<body bgcolor="#000000"> <div id="form">

<div id="Footer">Home About Us </div> <div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal">

<li><a href="Index.php"><strong>HOME</strong></a> </li>

<li><a href="#" class="MenuBarItemSubmenu"><strong>TIPS</strong></a> <ul>

<li><a href="TIps.php">MASALAH SEPUTAR MOBIL</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu"><strong>FORUM</strong></a> <ul>

<li><a href="list_forum.php">FORUM DISKUSI</a></li> <li><a href="tambah_forum.php">CREATE FORUM</a></li> </ul>

</li>

<li><a href="#"

class="MenuBarItemSubmenu"><strong>AKSESORIS</strong></a> <ul>

<li><a href="aksesoris.php">AKSESORIS MOBIL</a></li> </ul>

</li> </ul>


(29)

A-18

</center> </div>

<div id="Banner atas">

<marquee>Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk

mobil.</marquee></div>

<div id="Header"><img src="Head.jpg" width="983" height="192" /></div> </div>

<div id="apDiv1">

Selamat Datang di website AutoZone, Anda telah berhasil login<b><? echo"$username";?></b> | <a href="logout.php">Logout</a>

</div>

<script type="text/javascript"> <!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </body> </html>

8.

Logout.php

<?php

include("konek.php");

session_start();

unset($_SESSION["userku"]); header("location:Index.php"); ?>

9.

List_forum.php

<?php

include("konek.php");

session_start();

$username=$_SESSION["userku"];

if($_SESSION["userku"]=="") //untuk mencegah apabila halaman diakses tanpa login (session kosong), maka otomatis di redirect ke form login (index.php)

{


(30)

A-19

header("location:index.php"); ob_end_flush();

} ?>

<style type="text/css"> <!--

#apDiv1 {

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px; color: #FFF; }

a:link {

color: #F00; }

a:visited {

color: #F00; font-weight: bold; }

#apDiv2 {

position:absolute; width:160px; height:34px; z-index:2; left: 793px; top: 46px; font-weight: bold; }

--> </style>

<body background="../images (6).jpg"> <div id="apDiv1">

<font size="+2"> <?php

$server = "localhost"; $pemakai = "root"; $password = "";

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);

// Bagian untuk membaca data


(31)

A-20

$hasil = mysql_query($sql, $id_mysql);

while ($baris = mysql_fetch_row($hasil)) {

$ID_topik = $baris[0]; $nama = $baris[1]; $topik = $baris[2];

echo "<br />"; echo "<br />";

echo '<div style = "margin-left: 20px">';

echo "<br />"; echo "<br />"; echo "$nama"; echo "<br />"; echo "<br />";

echo "Pembahasan Topik : $topik"; echo "<br />";

echo("<a href=\"tampil_forum.php?ID_topik=$ID_topik\">Lihat</a></td>\n"); echo '</div>';

// echo "<hr/>"; }

echo '<br />'; echo '<br />'; echo '<br />';

// Akhir pembacaan data

mysql_close($id_mysql); ?>

</font>

<div id="apDiv2"><b><? echo"$username";?></b> <a href="logout.php">Logout</a></div>

<font size="+2"></font> </div>


(32)

A-21

10.

Tampil_forum.php

<?php

include("konek.php"); session_start();

$username=$_SESSION["userku"];

if($_SESSION["userku"]=="") //untuk mencegah apabila halaman diakses tanpa login (session kosong), maka otomatis di redirect ke form login (index.php)

{

ob_start();

header("location:index.php"); ob_end_flush();

} ?> <?php

$server = "localhost"; $pemakai = "root"; $password = "";

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);

// Bagian untuk membaca data

$sql = "SELECT ID_topik, nama, topik, isi, foto FROM forum WHERE ID_topik=$_GET[ID_topik]";

$hasil = mysql_query($sql, $id_mysql);

while ($baris = mysql_fetch_row($hasil)) {

$ID_topik = $baris[0]; $nama = $baris[1]; $topik = $baris[2];

$isi = $baris[3]; $foto = $baris[4];

echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />";

echo '<div style = "margin-left: 20px">';

echo "<br />"; echo "<br />";


(33)

A-22

echo "$nama"; echo "<br />"; echo "<br />";

$nilaicounter=("counter.txt"); $pengunjung=file($nilaicounter); $pengunjung[0]++;

$bukafile=fopen($nilaicounter,"w"); fputs($bukafile,"$pengunjung[0]"); fclose($bukafile);

echo "Viewed : $pengunjung[0]"; echo "<br />"; echo "<br />"; echo "topik : $topik";

echo "<br />"; echo "<br />"; echo "isi : $isi"; echo "<br />"; echo "<br />";

echo '<div style = "margin-right: 100px">';

echo '<img src= "/TA/foto_forum/'.$foto.'" width="150" height="150" align="left" />';

echo '</div>'; echo("<a

href=\"list_forum.php\"><br><br><br><br><br><br><br><br>Back</a></td>\n"); echo '</div>';

// echo "<hr/>"; }

echo '<br />'; echo '<br />'; echo '<br />';

// Akhir pembacaan data

?>

<head><title></title> <style type="text/css"> <!--

#apDiv1 {

position:absolute; width:200px; height:48px; z-index:1; left: 803px; top: 78px; border:double; }

--> </style> </head>

<body bgcolor="#CCCCCC"> <?php


(34)

A-23

if(isset($_GET['pesan'])){ echo $_GET['pesan']; }

?>

<form action="proses_comment.php" method="POST"> <label><br><br>

Nama: </label> <?php

$id = $_SESSION['id'];

$q = mysql_query("SELECT * FROM `registercustomer` WHERE `id`='$id'"); $r = mysql_fetch_array($q);

echo $r['nama']; ?>

<br />

<input type="hidden" name="nama" value="<?php echo "$r[nama]";?>" />

<?php //echo $rid['username']; ?> <input type="hidden" name="id" value="<?php //echo $rid['username']; ?>" /><br /><br />

<label>Komentar: </label><br />

<textarea name="comment" cols="25" rows="7"></textarea>

<input type="hidden" name="id_topik" value="<?php echo $_GET['ID_topik']; ?>" /> <br /><br /><br />

<input type="submit" name="submit" value="Kirim" /><br /> </form>

</body>

<?php

require('komentardatabase_konek.php'); $id_topik = $_GET['ID_topik'];

$query=mysql_query("SELECT * FROM `comment` WHERE `ID_TOPIK`='$id_topik' ORDER BY id DESC");

while($rows=mysql_fetch_assoc($query)) {

$id=$rows['id']; $dname=$rows['name']; $dcomment=$rows['comment'];

echo '<font color="red">Name:</font> ' . $dname . '<br />' . '<br />' . '<font color="red">Comments:</font> ' . '<br />' . $dcomment . '&nbsp' . '&nbsp' . '<hr size="5px" width="500px" color="blue" />' ;

}

mysql_close($id_mysql); ?>


(35)

A-24

11.

Tambah_forum.php

<?php

include("konek.php"); session_start();

$username=$_SESSION["userku"];

if($_SESSION["userku"]=="") //untuk mencegah apabila halaman diakses tanpa login (session kosong), maka otomatis di redirect ke form login (index.php)

{

ob_start();

header("location:index.php"); ob_end_flush();

} ?>

<style type="text/css"> <!--

#apDiv1 {

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px;

background: url(../DSC_3539-1.jpg); }

body,td,th {

color: #FFF; }

--> </style>

<div id="apDiv1">

<form method="post" action="proses_input_forum.php"

name="form_mhs"onSubmit="return cek_data()" enctype="multipart/form-data"> <h1>Create Forum</h1>

<table width=100% height="389" border="" bordercolor="" bgcolor="" > <tr>

<td bgcolor="">Nama User</td> <td bgcolor="">:<?php

$id = $_SESSION['id'];

$q = mysql_query("SELECT * FROM `registercustomer` WHERE `id`='$id'"); $r = mysql_fetch_array($q);

echo $r['nama']; ?>

<input type="hidden" name="nama_user" value= "<?php echo $r['nama']; ?>" > </td>

<tr>


(36)

A-25

<td bgcolor="">:

<input type="file" name="namafile" ></td> <tr>

<td height="92" bgcolor="">Topik</td> <td bgcolor=""> :

<input type="text" name="topik" size="35" maxlength="35"> </td>

</tr> <tr>

<td height="48" bgcolor="">Isi Forum</td> <td bgcolor="">:

<textarea name="isi" rows="3" size="35" maxlength="200"></textarea></td></tr> <tr>

<tr>

<td height="28"colspan="2" bgcolor=""><input type="reset" name="reset" value="Reset"> </input>

<input type = "submit" name="submit" value="Simpan" /></td> </tr>

</table>

</form></div></div></center>

12.

Proses_comment.php

<?php

//require('komentar.php'); require('koneksidatabase.php'); $id_topik = $_POST['id_topik']; $id = $_POST['id'];

$name = $_POST['nama']; $comment = $_POST['comment']; $submit = $_POST['submit']; echo $submit;

if($submit) {

echo $name; echo $comment; if($name&&$comment) {

$q = mysql_query("SELECT MAX(`id`) AS `id` FROM `comment` WHERE `ID_TOPIK`='$id_topik'");

$r = mysql_fetch_array($q); $max = $r['id'];

$max_id = (int)$max += 1; echo $max_id;

$query=mysql_query("INSERT INTO `comment` VALUES ('$id_topik', '$max_id','$name','$comment')");

header("location:tampil_forum.php?ID_topik=".$id_topik); //header("Location: success.php");


(37)

A-26

} else {

header("location:tampil_forum.php?ID_topik=".$id_topik."&pesan="."Silahkan isi nama / komentar terlebih dahulu");

//echo "Silahkan Isi Nama/Komentar terlebih dahulu"; }

} ?

13.

koneksidatabase.php

<?php

$connect=mysql_connect("localhost","root","") or die('mysql_error()'); $database=mysql_select_db("autozone") or die('mysql_error()'); ?>

14.

Aksesoris.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AutoZone</title>

<style type="text/css"> <!--

#form{

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:1106px; z-index:1; top: 17px; left: 11px; color: #FFF; margin-bottom:auto; margin:auto; }

#Menu{

position:absolute; width:516px; height:41px; z-index:2; left: 242px; top: 235px; color: # F00;


(38)

A-27

} #Footer {

position:absolute; width:986px; height:26px; z-index:2; left: -1px; top: 1105px; text-align: center; color: # F00; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css"> <!--

#Header {

position:absolute; width:983px; height:192px; z-index:3; left: 4px; top: 25px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px; z-index:2; left: 8px; top: 2px; }

body {

background-color: #C90; }

#apDiv1 {

position:absolute; width:374px; height:66px; z-index:2; left: 313px; top: 379px; }

#apDiv1 {

font-size: 24px; }

#apDiv1 {

color: #FFF; }


(39)

A-28

#apDiv1 {

color: #F30; }

#apDiv2 {

position:absolute; width:452px; height:251px; z-index:4; left: 100px; top: 326px; }

#apDiv3 {

position:absolute; width:73px; height:23px; z-index:5; left: 904px; top: 304px; }

--> </style> </head>

<body bgcolor="#000000"> <div id="form">

<div id="Footer">Home About Us</div> <div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal">

<li><a href="Index.php"><strong>HOME</strong></a> </li> <li><a href="#" class="MenuBarItemSubmenu">TIPS</a> <ul>

<li><a href="TIps.php">MASALAH SEPUTAR MOBIL</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">FORUM</a> <ul>

<li><a href="list_forum.php">FORUM DISKUSI</a></li>

<li><a href="tambah_forum.php">CREATE FORUM</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">AKSESORIS</a> <ul>

<li><a href="aksesoris.php">AKSESORIS MOBIL</a></li> </ul>

</li> </ul> </center> </div>

<div id="Banner atas">

<marquee>Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk mobil.</marquee></div>


(40)

A-29

<div id="apDiv2"><?php

$server = "localhost"; $pemakai = "root"; $password = "";

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);

// Bagian untuk membaca data

$sql = "SELECT namabarang,deskripsi,foto,harga FROM penjualan"; $hasil = mysql_query($sql, $id_mysql);

while ($baris = mysql_fetch_row($hasil)) {

$namabarang = $baris[0]; $deskripsi = $baris[1];

$foto = $baris[2]; $harga = $baris[3];

echo "<br />"; echo "<br />";

echo "<br />"; echo "<br />"; echo "<br />";

echo '<div style = "margin-right: 100px">';

echo '<img src= "/TA/foto_barang/'.$foto.'" width="150" height="150" align="left" />';

echo '</div>';

echo '<div style = "margin-left: 20px">'; echo "Nama barang : $namabarang"; echo "<br />";

echo "<br />";

echo "Deskripsi : $deskripsi"; echo "<br />";

echo "<br />";

echo "Harga : $harga"; echo '</div>';

echo "<hr/>"; }

echo '<br />'; echo '<br />'; echo '<br />';

// Akhir pembacaan data

mysql_close($id_mysql); ?></div>


(41)

A-30

</div>

<script type="text/javascript"> <!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif",

imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </body> </html>

14.

Tampil_barang.php

<?php

$server = "localhost"; $pemakai = "root"; $password = "";

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);

// Bagian untuk membaca data

$sql = "SELECT idpenjualan,namabarang,deskripsi,foto,harga FROM penjualan";

$hasil = mysql_query($sql, $id_mysql);

while ($baris = mysql_fetch_row($hasil)) {

$idpenjualan = $baris[0]; $namabarang = $baris[1]; $deskripsi = $baris[2];

$foto = $baris[3]; $harga = $baris[4];

echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />";

echo '<div style = "margin-right: 100px">';

echo '<img src= "/TA/foto_barang/'.$foto.'" width="150" height="150" align="left" />';

echo '</div>';


(42)

A-31

echo "Nama barang : $namabarang"; echo "<br />";

echo "<br />";

echo "deskripsi : $deskripsi"; echo "<br />";

echo "<br />"; echo "harga : $harga"; echo("<a

href=\"edit_tampil_barang.php?idpenjualan=$idpenjualan\">Edit</a></td>\n"); echo '</div>';

// echo "<hr/>"; }

echo '<br />'; echo '<br />'; echo '<br />';

// Akhir pembacaan data mysql_close($id_mysql); ?>

15.

Register1.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AutoZone</title>

<style type="text/css"> <!--

#form{

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px; color: #FFF; }

#Menu{

position:absolute; width:516px; height:41px; z-index:2; left: 242px; top: 235px; color: # F00; }


(43)

A-32

#Footer {

position:absolute; width:986px; height:38px; z-index:2; left: 1px; top: 858px; text-align: center; color: # F00; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css"> <!--

#Header {

position:absolute; width:983px; height:192px; z-index:3; left: 4px; top: 25px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px; z-index:2; left: 8px; top: 2px; }

body {

background-color: #C90; }

#apDiv1 {

position:absolute; width:581px; height:484px; z-index:4; left: 243px; top: 296px; f

}

#form center #apDiv1 form h1 { color: #000;

}

#form center #apDiv1 form table tr td { color: #000;


(44)

A-33

--> </style> </head>

<body bgcolor="#000000"> <div id="form">

<div id="Footer">Home About Us </div> <div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal">

<li><a href="Index.php"><strong>HOME</strong></a> </li>

<li><a href="#" class="MenuBarItemSubmenu"><strong>TIPS</strong></a> <ul>

<li><a href="tips.php">MASALAH SEPUTAR MOBIL</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu"><strong>FORUM</strong></a> <ul>

<li><a href="tips.html">Untitled Item</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu"><strong>PENJUALAN</strong></a>

<ul>

<li><a href="aksesoris.php">AKSESORIS MOBIL</a></li> </ul>

</li> </ul> </center> </div>

<div id="Banner atas">

<marquee>Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk mobil.</marquee></div>

<center> <div id="apDiv1">

<form method="post" action="register_konek.php" name="form_mhs"onSubmit="return cek_data()">

<h1>Data Pribadi</h1>

<table width=100% height="391" border="1" bordercolor="#666666" bgcolor="#CCFF66" >

<tr>

<td>Nama</td> <td>:

<input type="text" name="nama" rows="2" size="40" maxlength="40"> </tr>

<tr>

<td height="48">Alamat</td> <td>:

<textarea name="alamat" rows="3" size="35" maxlength="35"></textarea></td></tr> <tr>


(45)

A-34

<td>:

<input type="text" name="tempatlahir" size="35" maxlength="35"></td> </tr>

<tr>

<td>Tanggal Lahir</td> <td>:

<input name="tanggallahir" value="" maxlength=2 width=25></input> <select name="bln_lahir">

<option value=1>Januari</option> <option value=2>Februari</option> <option value=3>Maret</option> <option value=4>April</option> <option value=5>Mei</option> <option value=6>Juni</option> <option value=7>Juli</option> <option value=8>Agustus</option> <option value=9>September</option> <option value=10>Oktober</option> <option value=11>November</option> <option value=12>Desember</option> </select>

<input type="text" name="tahunlahir" maxlength=4></input>

</td> </tr> <tr>

<td>Telepon</td> <td> :

<input type="text" name="telepon" size="35" maxlength="35"> </td>

</tr> <tr>

<td>Username</td> <td> :

<input type="text" name="username" size="35" maxlength="35"> </td>

</tr> <tr>

<td>Password</td> <td> :

<input type="password" name="password" size="35" maxlength="35"> </td>

</tr> <tr>

<td>Jenis Kelamin</td> <td> :

<input type="text" name="jeniskelamin" size="35" maxlength="35"> </td>

</tr> <tr>

<td align="center">

<td height="28"colspan="2"><input type = "submit" name="submit" value="Daftar"> <input type="reset" name="reset" value="Reset"> </input>


(46)

A-35

</tr> </table>

</form></div></center>

<div id="Header"><img src="Head.jpg" width="983" height="192" /></div> </div>

<script type="text/javascript"> <!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif",

imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </body> </html>

16.

Admin.php

<?

include("konek.php"); session_start();

$sesi=$_SESSION["userku"]; //bukan menciptakan session, cuma cek session aja (session dibuat pada script login_proses.php)

if(!empty($sesi)) //disini dilakukan pengecekan terlebih dahulu apakah session sblmnya sudah ada atau belum

{

echo"Anda sudah login $sesi"; }

else { ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AutoZone</title>

<style type="text/css"> <!--

#form{

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px;


(47)

A-36

color: #FFF; }

#Menu{

position:absolute; width:516px; height:41px; z-index:2; left: 242px; top: 235px; color: # F00; }

#Footer {

position:absolute; width:986px; height:38px; z-index:2; left: 1px; top: 858px; text-align: center; color: # F00; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css"> <!--

#Header {

position:absolute; width:983px; height:192px; z-index:3; left: 4px; top: 25px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px; z-index:2; left: 8px; top: 2px; }

body {

background-color: #C90; }

#apDiv1 {

position:absolute; width:317px; height:180px;


(48)

A-37

z-index:2; left: 297px; top: 381px; }

--> </style> </head>

<body bgcolor="#000000"> <div id="form">

<div id="Footer">Home About Us </div> <div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="Index.php">HOME</a> </li>

<li><a href="#" class="MenuBarItemSubmenu">TIPS</a> <ul>

<li><a href="tips.html">MASALAH SEPUTAR MOBIL</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">FORUM</a> <ul>

<li><a href="tips.html">Untitled Item</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">AKSESORIS</a> <ul>

<li><a href="#">AKSESORIS MOBIL</a></li> </ul>

</li> </ul> </center> </div>

<div id="Banner atas">

<marquee>Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk mobil.</marquee></div>

<div id="apDiv1">

<form name="login" action="adminlogin_proses.php" method="post"> <p>User Name Admin:

<input type="text" name="username"/> </p>

<p>

Password Admin:&nbsp;&nbsp;&nbsp; <input type="password" name="password"/> <br />

<p> <center>

<input type="submit" name="submit" value="login"/></center>

</p> </form> </p>


(49)

A-38

</div>

<div id="Header"><img src="Head.jpg" width="983" height="192" /></div> </div>

<script type="text/javascript"> <!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif",

imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </body> </html>

17.

Admindatabase.php

<?php

include("konek.php");

session_start();

$username=$_SESSION["userku"];

if($_SESSION["userku"]=="") //untuk mencegah apabila halaman diakses tanpa login (session kosong), maka otomatis di redirect ke form login (index.php)

{

ob_start();

header("location:index.php"); ob_end_flush();

} ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Admin</title>

<style type="text/css"> <!--

#form{

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px;


(50)

A-39

color: #FFF; }

#Menu{

position:absolute; width:516px; height:41px; z-index:2; left: 242px; top: 235px; color: # F00; }

#Footer {

position:absolute; width:986px; height:38px; z-index:2; left: 1px; top: 858px; text-align: center; color: # F00; }

#apDiv1 {

font-size: 18px; }

#form #apDiv3 a { font-size: 24px; font-weight: bold; }

--> </style>

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css"> <!--

#Header {

position:absolute; width:983px; height:192px; z-index:3; left: 1px; top: 37px; }

#form #Footer { color: #F00; }

#banner atas {

position:absolute; width:976px; height:33px; z-index:2; left: 8px; top: 2px; }


(51)

A-40

body {

background-color: #C90; }

#apDiv1 {

position:absolute; width:441px; height:43px; z-index:2; left: 320px; top: 415px; }

#apDiv2 {

position:absolute; width:406px; height:47px; z-index:4; left: 337px; top: 472px; font-size: 14px; color: #FFF; }

#form #apDiv2 a { font-weight: bold; font-size: 24px; color: #FFF; }

#apDiv1 {

font-weight: bold; color: #FFF; }

#apDiv3 {

position:absolute; width:406px; height:47px; z-index:5; left: -4px; top: 456px; }

#apDiv4 {

position:absolute; width:406px; height:47px; z-index:6; left: 317px; top: 582px; }

#form #apDiv4 a { font-size: 24px; font-weight: bold; }

div {

color: #D6D6D6; }

#apDiv5 {


(52)

A-41

width:406px; height:47px; z-index:7; left: 323px; top: 635px; }

#form #apDiv5 a { font-size: 24px; font-weight: bold; }

#form #apDiv2 p b { color: #FFF; }

--> </style> </head>

<body bgcolor="#000000"> <div id="form">

<div id="Footer">Home About Us </div> <div id="Menu"> <center>

<ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="Index.php">HOME</a> </li>

<li><a href="#" class="MenuBarItemSubmenu">TIPS</a> <ul>

<li><a href="tips.html">MASALAH SEPUTAR MOBIL</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">FORUM</a> <ul>

<li><a href="list_forum.php">FORUM DISKUSI</a></li> <li><a href="tambah_forum.php">CREATE FORUM</a></li> </ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">AKSESORIS</a> <ul>

<li><a href="#">AKSESORIS MOBIL</a></li> </ul>

</li> </ul> </center> </div>

<div id="Banner atas">

<marquee>Selamat datang di Auto Zone. Sebuah website informasi mengenai masalah seputar mobil dan tips-tips seputar mobil, disertai penjualan aksesoris untuk mobil.</marquee></div>

<div id="apDiv6"><b><? echo"$username";?></b></div> <div id="apDiv2">

<p><b><? echo"$username";?></b> <a href="form_input_TIps.php"><font color="#FFFFFF">Edit "Tips Masalah Seputar Mobil"</font></a></p>

<p><b><? echo"$username";?></b> <a href="tampil_barang.php">Edit &quot;Aksesoris Mobil&quot;</a></p>


(53)

A-42

<p><b><? echo"$username";?></b> <a href="adminkomentar_hapus.php">Edit &quot;Komentar&quot;</a></p>

<p><b><? echo"$username";?></b> <a href="adminforum_hapus.php">Edit &quot;Forum&quot;</a></p>

<p><b><? echo"$username";?></b> <a href="adminregistercustomer_hapus.php">Edit &quot;User&quot;</a></p>

</div>

<div id="Header"><img src="Head.jpg" width="983" height="192" /></div> </div>

<div id="apDiv1">

Selamat Datang Admin di website AutoZone <b><? echo"$username";?></b> | <a href="logout.php">Logout</a></div>

<script type="text/javascript"> <!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif",

imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //-->

</script> </body> </html>

18.

Adminlogin_proses.php

<?php

include("konek.php");

session_start();

$username=$_REQUEST['username']; $password=$_REQUEST['password'];

$seleksi=mysql_query("select * from admin where username='$username' and password='$password'"); //seleksi dari tabel anggota

$jumlah=mysql_num_rows($seleksi); if($username=="" or $password=="") {

echo "mohon isi username dan password anda. <a href='index.php' OnClick='history.go(-1)'>Back</a>";

}

else if($jumlah==1) // proses login sukses karena username dan password yg sesuai ada 1 yg cocok.

{ ob_start();

$_SESSION["userku"]=$username; // membuat session dgn nama userku header("location:admindatabase.php"); // langsung diredirect ke halaman user ob_end_flush();

} else


(54)

A-43

{

echo "username dan password tidak sesuai. <a href='admin.php' OnClick='history.go(-1)'>Back</a>";

} ?>

19.

Logoutadmin.php

<?php

include("konek.php");

session_start();

unset($_SESSION["userku"]); header("location:admin.php"); ?>

20.

Form_input_TIps.php

<style type="text/css"> <!--

#apDiv1 {

position:absolute; left:0;

right:0;

margin-left:auto; margin-right:auto; width:987px; height:900px; z-index:1; top: 17px; left: 11px;

background:url(../2012-Ferrari-458-Spider-front-three-quarters.jpg); }

#apDiv1 form h1 { color: #FFF; }

#apDiv1 form table tr td { color: #FFF; font-weight: bold; }

--> </style>


(55)

A-44

<form method="post" action="input_TIps.php" name="form_mhs"onSubmit="return cek_data()" enctype="multipart/form-data">

<h1>Input Tips </h1>

<table width=100% height="203" border="1" bordercolor="" bgcolor="" > <tr>

<td bgcolor="">Judul</td>

<td bgcolor=""><input type="text" name="judul" rows="2" size="40" maxlength="100"> </tr>

<tr>

<td width="30%" height="70" bgcolor="">Artikel Tips</td>

<td width="70%" bgcolor=""><textarea name="artikel" rows="3" size="35" maxlength="5000"></textarea></td></tr>

<tr>

<td height="91" bgcolor="">Foto Tips</td>

<td bgcolor=""><input type="file" name="namafile" ></td>

<tr> <tr>

<td height="28"colspan="2" bgcolor=""><input type="reset" name="reset" value="Reset"> </input>

<input type = "submit" name="submit" value="Simpan" /></td> </tr>

</table>

</form></div></div></center>

21.

Input_TIps.php

<?php

if ($_POST["submit"] == "Simpan") {

// Berarti tombol Simpan diklik

// Ambil data yang dilewatkan skrip $judul = $_POST['judul'];

$artikel = $_POST['artikel'];

// Proses MySQL $server = "localhost"; $pemakai = "root"; $password = "";

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);

if (empty($_FILES["namafile"]["name"])) die ("Tidak bisa meng-upload");


(56)

A-45

$namafile = $datafile["name"];

$file_sementara = $_FILES["namafile"]["tmp_name"];

// Cek File

if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/TA/foto_tips/$namafile"))

die("file $namafile sudah terdaftar dalam databse. " . "Upload dibatalkan!");

// Copy

if (copy($file_sementara, $_SERVER['DOCUMENT_ROOT'] . "/TA/foto_tips/$namafile"))

{

print("File $namafile telah tersimpan dalama database"); echo "<br />";

unlink($file_sementara); $sql = "INSERT INTO tips " . "(artikel, foto, judul) " .

"VALUES('$artikel','$namafile','$judul')"; $hasil = mysql_query($sql, $id_mysql);

if (empty($hasil))

print("Gagal menyimpan data artikel='$judul'"); else

print("Data artikel='$judul' berhasil disimpan");

mysql_close($id_mysql); }

}

?>

22.

Tampil_barang.php

<?php

$server = "localhost"; $pemakai = "root"; $password = "";

$id_mysql = mysql_connect($server, $pemakai, $password); $db_autozone = mysql_select_db("autozone", $id_mysql);


(57)

A-46

$sql = "SELECT idpenjualan,namabarang,deskripsi,foto,harga FROM penjualan";

$hasil = mysql_query($sql, $id_mysql);

while ($baris = mysql_fetch_row($hasil)) {

$idpenjualan = $baris[0]; $namabarang = $baris[1]; $deskripsi = $baris[2];

$foto = $baris[3]; $harga = $baris[4];

echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />"; echo "<br />";

echo '<div style = "margin-right: 100px">';

echo '<img src= "/TA/foto_barang/'.$foto.'" width="150" height="150" align="left" />';

echo '</div>';

echo '<div style = "margin-left: 20px">'; echo "Nama barang : $namabarang"; echo "<br />";

echo "<br />";

echo "deskripsi : $deskripsi"; echo "<br />";

echo "<br />"; echo "harga : $harga"; echo("<a

href=\"edit_tampil_barang.php?idpenjualan=$idpenjualan\">Edit</a></td>\n"); echo '</div>';

// echo "<hr/>"; }

echo '<br />'; echo '<br />'; echo '<br />';

// Akhir pembacaan data mysql_close($id_mysql); ?>


(1)

A-56 // Bagian untuk membaca data

$sql = "SELECT kodebarang, namabarang, hargasatuan, jumlahbarang, hargajual FROM masterbarang";

$hasil = mysql_query($sql, $id_mysql); if (! $hasil)

die("Salah SQL");

$nomor = 0;

print("<table width = \"80%\" border=\"1\">\n"); print("<tr>\n"); print("<td width=\"10%\">No</td>\n"); print("<td width=\"15%\">Kodebarang</td>\n"); print("<td width=\"40%\">Namabarang</td>\n"); print("<td width=\"35%\">Hargasatuan</td>\n"); print("<td width=\"35%\">Jumlahbarang</td>\n"); print("<td width=\"35%\">Hargajual</td>\n"); print("</tr>\n");

while ($baris = mysql_fetch_row($hasil)) {

$nomor++;

$kodebarang = $baris[0]; $namabarang = $baris[1]; $hargasatuan = $baris[2];

$jumlahbarang = $baris[3]; $hargajual = $baris[4]; print("<tr>\n"); print("<td>$nomor</td>\n"); print("<td>$kodebarang</td>\n"); print("<td>$namabarang</td>\n"); print("<td>$hargasatuan</td>\n"); print("<td>$jumlahbarang</td>\n"); print("<td>$hargajual</td>\n");

echo "<br />"; echo "<br />";

}

// Akhir pembacaan data

?> <tr>

<td colspan="8">

<form name="input barang" method="POST" action="form_masterbarang.php"/> <input name="input barang" type="submit" value="input barang"/>

</form> </td> </tr> </table> </div>


(2)

1 Universitas Kristen Maranatha

BAB I

PENDAHULUAN

1.1

Latar Belakang

Perkembangan teknologi yang cepat dari seluruh dunia ternyata saat ini sangat digemari oleh masyarakat atau pelaku bisnis. Dampak dari perkembangan teknologi tersebut adalah meningkatnya penggunaan Tablet PC untuk bermain game ataupun untuk melakukan kegiatan browsing internet dengan tujuan mengakses sebuah website informasi ataupun hal yang lainnya. Informasi yang didapat selain cepat, akurat juga dapat digunakan dan diperoleh dimana saja. Teknologi berbasis komputer telah banyak digunakan di berbagai negara dan bisa digunakan juga untuk memberi informasi kepada masyarakat luas yang berbasis web informasi.

Pembuatan sebuah proyek berbasis web informasi merupakan sebuah pemberian informasi yang dapat diakses dimana saja dengan menggunakan teknologi internet. Dengan adanya informasi berbasis web mengenai masalah seputar mobil, diharapkan dapat membantu orang-orang yang sedang mengalami masalah pada kendaraannya khususnya mobil, dengan tingkat kerusakan ringan agar dapat memperbaiki sendiri kendaraannya tanpa harus pergi ke bengkel. Menjadi lebih efisien dalam waktu pengerjaan dan mengurangi beban secara finansial yang ditanggung oleh pemilik kendaraan.

Dalam Tugas Akhir ini akan dibuat sebuah website mengenai masalah seputar mobil, beserta informasi-informasi mengenai cara perawatan mobil dan informasi-informasi seputar aksesoris mobil disertai dengan forum tanya


(3)

2

Universitas Kristen Maranatha

jawab, dengan tujuan menambah wawasan mengenai masalah seputar mobil dan informasi terbaru mengenai mobil.

1.2

Identifikasi Masalah

Bagaimana membuat website masalah seputar mobil disertai forum diskusi dan penjualan aksesoris mobil ?

1.3

Tujuan

Membuat website masalah seputar mobil disertai forum diskusi dan penjualan aksesoris mobil.

1.4

Batasan Masalah

Pembuatan website hanya mencakup:

1. Masalah seputar mobil dengan tingkat kerusakan ringan.

2. Pembuatan website menggunakan PHP,MySQL, dan Adobe Dreamweaver.

3. Bagian aksesoris mobil tidak melayani penjualan secara online dan hanya sebagai tambahan dalam pembuatan website ini.

1.5

Sistematika

BAB I : Pendahuluan

Berisi latar belakang, identifikasi masalah, tujuan, pembatasan masalah, dan sistematika penulisan.


(4)

3

Universitas Kristen Maranatha

BAB II : Landasan Teori

Berisi tentang semua teori-teori pendukung topik Tugas Akhir. BAB III : Perancangan dan Pemodelan

Berisi tentang perancangan dan pemodelan website untuk mengelola masalah seputar mobil.

BAB IV : Hasil dan Data Pengamatan

Berisi hasil dari perancangan website dan memuat data pengamatan.

BAB V : Kesimpulan dan Saran

Bab yang terakhir berisi tentang kesimpulan dari Tugas Akhir ini dan berisi saran-saran.


(5)

73 Universitas Kristen Maranatha

BAB V

KESIMPULAN DAN SARAN

5.1

Kesimpulan

Berdasarkan data pengamatan dan analisa data dapat diambil kesimpulan sebagai berikut :

1. Website Informasi Mengenai Masalah Seputar Mobil telah selesai dibuat.

2. Forum dapat diakses setelah user melakukan registrasi terlebih dahulu dan

setelah itu melakukan login, kemudian dapat membuat forum.

5.2

Saran

Saran yang diberikan agar dapat dikembangkan lebih lanjut pada website Informasi Mengenai Masalah Seputar Mobil adalah sebagai berikut :

1. Bagian aksesoris mobil dapat melayani penjualan secara online. 2. Dapat membuat fasilitas Chatting untuk sesama anggota user.


(6)

74 Universitas Kristen Maranatha

DAFTAR PUSTAKA

Oktavian, Diar Puji. 2013. Membuat website powerfull menggunakan PHP. Yogyakarta : MediaKom.

Madiun, Madcoms.2009. Menguasai XHTML, CSS, PHP dan MySQL melalui

Dreamweaver. Yogyakarta : Andi.

Bunafit, Nugroho. 2008. Latihan Membuat Aplikasi Web PHP dan MySQL

dengan Dreamweaver MX(6, 7, 2004) dan 8. Yogyakarta : Gaya Media.

Raharjo, Budi. 2012. Pemograman Web (HTML, PHP, & MySQL). Bandung : Modula.

Madiun, Madcons. 2009. Aplikasi Program PHP + MySQL untuk Membuat

Website interaktif. Yogyakarta : Andi.

http://blog.rosihanari.net http://mous-design.com