Tugas Pemrograman Web Dinamis 2 – Membuat Website Jual-Beli

Pada Tugas Pemrograman Web Dinamis kali ini saya ditugaskan untuk membuat website sederhana untuk jual-beli, langusung saja ke source code nya. Source Code nya sebagai berikut :

Dalam pembuatan web jual beli ini ada beberapa hal yang harus teman-teman lakukan, pertama buat terlebih dahulu databasenya, kalo nama database yang saya buat yaitu “jual_beli“, berikut selengkapnya :

Nama database : jual_beli

Nama table/entitas :

admin [username, admin]
konsumen [no_id, nama, alamat, no_tlp]
barang [kode, nama, harga, photo]

setelah membuat database, maka langkah selanjutnya saya membuat koneksi. Biar lebih jelas kita langsung coding ya, perhatikan code berikut :

<?php

$dbserver = “localhost”; //server yang digunakan

$dbusername = “root”; //user yang dipakai

$dbpassword = “”; //password yang digunakan

$dbname = “jual_beli”; //nama database yang digunakan

mysql_connect($dbserver, $dbusername, $dbpassword) or die (mysql_error());

mysql_select_db($dbname) or die (mysql_error());

?>

Langkah selanjutnya save source code diatas ke folder yang digunakan untuk menampung semua data-data untuk pembuatan web ini.

Selanjutnya kita akan membuat tampilan beserta isinya,, oke yang pertama kita buat dahulu halaman untuk adminnya ya. Berikut code nya:

<!DOCTYPE html>

<html lang=”en”>

<head>

<title>Admin</title>

<link id=”bs-css” href=”css/bootstrap-cerulean.css” rel=”stylesheet”>

<style type=”text/css”>

body {

padding-bottom: 40px;

}

</style>

<link href=”css/bootstrap-responsive.css” rel=”stylesheet”>

<link href=”css/charisma-app.css” rel=”stylesheet”>

</head>

<body>

<div>

<div>

<div>

<a data-toggle=”collapse” data-target=”.top-nav.nav-collapse,.sidebar-nav.nav-collapse”>

<span></span>

<span></span>

<span></span>

</a>

<a href=”#”> My Site Web</a>

<!– user dropdown starts –>

<div >

<a data-toggle=”dropdown” href=”#”>

<i></i><span class=”hidden-phone”> admin</span>

<span></span>

</a>

<ul>

<li><a href=”#”>Profile</a></li>

<li></li>

<li><a href=”login.html”>Logout</a></li>

</ul>

</div>

<!– user dropdown ends –>

</div>

</div>

</div>

<!– topbar ends –>

<div >

<div>

<div id=”content” align=”center”>

<!– content starts –>

<div>

<ul>

<li>

<a href=”index.php”>

<i></i>

<span> HOME</span>

</a>

</li>

<li>&nbsp;&nbsp;</li>

<li>

<a href=”index.php?page=barang”>

<i></i>

span> DAFTAR PRUDUK</span>

</a>

</li>

<li>&nbsp;&nbsp;</li>

<li>

<a href=”index.php?page=upload”>

<i></i>

<span> UPLOAD PRODUK</span>

</a>

</li>

</ul>

</div>

<div align=”center”>

<?php //DISINI UNTUK SET HALAMAN PHP

$page = (isset($_GET['page']))? $_GET['page'] : “main”;

switch ($page) {

case ‘edit’ : include “edit.php”; break;

case ‘hapus’ : include “hapus.php”; break;

case ‘upload’ : include “upload_barang.php”; break;

case ‘barang’ : include “daftar_barang.php”; break;

case ‘main’ :

default : include ‘utama.php’;

}

?>

</div>

<!– content ends –>

</div><!–/#content.span10–>

div><!–/fluid-row–>

<hr>

<footer>

<p>&copy; <a href=”#”>Ruly Kurniawan</a> 2012</p>

<p>Powered by: <a href=”#”>CV.Mitra Union</a></p>

</footer>

</div><!–/.fluid-container–>

<!– external javascript

================================================== –>

<!– Placed at the end of the document so the pages load faster –>

<!– jQuery –>

<script src=”js/jquery-1.7.2.min.js”></script>

<!– jQuery UI –>

<script src=”js/bootstrap-dropdown.js”></script>

<!– scrolspy library –>

</body>

</html>

Dari code diatas jika ditampilkan akan menghasilkan tampilan seperti berikut :
Untitled

Sekarang teman-teman membuat halaman daftar produk, berikut source codenya :

<?php

include “koneksi.php”;

$myquery = “select * from barang”;

$databarang = mysql_query($myquery) or die (mysql_error());

$jumlah = mysql_num_rows($databarang);

?>

<div align=”center”>

<div align=”center”><h3>Daftar Barang</h3> Jumlah : <?=$jumlah?><br><br></div>

<table width=”90%”border=”1″ cellpadding=”0″ cellspacing=”0″>

<tr height=”30″ align=”center” bgcolor=”#CCFFCC”>

<td width=”10%”>Kode Barang</td>

<td width=”25%”>Nama Barang</td>

<td width=”15%”>Harga</td>

<td width=”10%”>Gambar</td>

<td width=”8%”>&nbsp;</td>

</tr>

<?

while($data = mysql_fetch_object($databarang))

{

?>

<tr>

<td height=”27″>&nbsp; <? echo $data->kode; ?></td>

<td>&nbsp; <? echo $data->nama; ?></td>

<td>&nbsp;Rp. <? echo $data->harga; ?></td>

<td align=”center”><img vspace=”5″ src=”<?php echo  $data->photo?>” width=”80″ /><br></td>

<td>&nbsp;

<a href=”edit.php?kode=<? echo $data->kode; ?>”>Update</a>&nbsp;

<a href=”hapus.php?data_hapus=<? echo $data->kode;?>” onClick=”return confirm(‘Apakah anda yakin?’)”>Delete</a>

</td>

</tr>

<?  }  ?>

</table>

</div>

halaman-produk
Selanjutnya teman-teman buat file untuk meng-upload barang, seperti biasa buka file baru pada editor teman-teman kemudian simpan dengan nama yang teman-teman kehendaki, disini saya simpan dengan nama upload_barang.php, dan berikut source code nya :


<!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>

<link id=”bs-css” href=”css/bootstrap-cerulean.css” rel=”stylesheet”>

</head>

<body>

<div align=”left”>

<form action=”input.php” method=”post” enctype=”multipart/form-data” name=”form_data”>

<table id=”table” width=”500″ border=”0″ align=”center” cellpadding=”5″ cellspacing=”0″>

<tr>

<td height=”40″ align=”center” bgcolor=”#0099FF” colspan=”3″>

<strong><font color=”#fff”>UPLOAD BARANG BARU</font></strong>

</td>

</tr>

<tr>

<td width=”113″ colspan=”3″>&nbsp;</td>

</tr>

<tr>

<td width=”113″>Kode Barang</td>

<td width=”11″>:</td>

<td width=”237″><input name=”kode” type=”text” id=”kode” ></td>

</tr>

<tr>

<td>Nama Barang</td>

<td>:</td>

<td><input name=”nama” type=”text” id=”nama” ></td>

</tr>

<tr>

<td>Harga</td>

<td>:</td>

<td><input name=”harga” type=”text” id=”harga” ></td>

</tr>

<tr>

<td>Unggah Gaambar</td>

<td>:</td>

<td><input name=”photo” type=”file” id=”photo” ></td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td align=”left”>

<input name=”simpan” type=”submit” id=”simpan” value=”Upload”>

<input name=”ulang” type=”reset” id=”ulang” value=”Ulangi”>

<input name=”batal” type=”button” id=”batal” value=”Batal” onClick=”javascript:history.back()”>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</form>

</div>

</body>

</html

untuk code di ataas akan menghasilkan tampilan seperti ini :
halaman-upload

Agar data-data yang teman-teman inputkan bisa masuk kedalam database, selanjutnya teman-teman harus membuat file yang berfungsi untuk menhantarkan data-data inputan tersebut ke dalam database. Buat file baru dan simpan dengan nama yang teman-teman kehendaki, kalo saya simpan denan nama input.php dan berikut source code nya :

<?php

include “koneksi.php”;

$Kode = $_POST['kode'];

$Nama = $_POST['nama'];

$Harga = $_POST['harga'];

if(trim($Kode) == “”)

{

echo “<script>alert(‘Kode Barang Belum Di Isi’);location.href=’index.php?page=barang’;</script>\n”;

}

else if(trim($Nama) == “”){

echo “<script>alert(‘Nama Barang Belum Di Isi’);location.href=’index.php?page=barang’;</script>\n”;

}

else{

if (!empty($_FILES["photo"]["tmp_name"]))

{

$namafolder=”photo/”; //tempat menyimpan file

$jenis_gambar=$_FILES['photo']['type'];

if($jenis_gambar==”image/jpeg” || $jenis_gambar==”image/jpg” || $jenis_gambar==”image/gif” || $jenis_gambar==”image/png”)

{

$photo = $namafolder . basename($_FILES['photo']['name']);

if (!move_uploaded_file($_FILES['photo']['tmp_name'], $photo))

{

die(“Gambar gagal dikirim”);

}

}

else { die(“Jenis gambar yang anda kirim salah. Harus .jpg .gif .png”); }

mysql_query(“insert into barang(kode, nama, harga, photo) values(‘$Kode’,'$Nama’,'$Harga’,'$photo’)”) or die(mysql_error());

echo “<script>;location.href=’index.php?page=barang’;</script>\n”;

}

}

?>

Selesai deh kita membuat file upload barang. Untuk melihat hasilnya teman-teman bisa langsung praktik. Misalnya :

coba-input

oke, itu dulu, untuk tampilan selanjutnya saya akan lanjutkan pada part 2, silahkan di tunggu saja😀

One Response to Tugas Pemrograman Web Dinamis 2 – Membuat Website Jual-Beli

  1. sip, bermanfaat sekali… cara buat database nya apa sama pake ms.sql? atau pakai apa? trimakasih

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: