Laporan Project Final

LAPORAN PROJECT
WEBSlTE lNFORMASl ROTI
Disusun oleh:
Anggota:
Nurhalim Habibie (170212086)
Taufik Hidayat (170212131)
Adfani (170212097)
Dosen pembimbing:
Mira maisura M.Sc
PENDlDlKAN TEKNOLOGl lNFORMASl

FAKULTAS TARBlYAH DAN KEGURUAN
UNlVERSlTAS lSLAM NEGERl AR-RANlRY
BANDA ACEH
2021
A. LATAR BELAKANG PENDIRIAN WEBSITE INFORMASI ROTI
Salah satu cara yang baik dalam memasarkan sebuah produk untuk
memperkenalkan tentang produk yang ia pasarkan adalah dengan menggunakan
media internet. Menggunakan media internet merupakan salah satu langkah yang
tepat dalam melakukan pemasaran atau promosi karena hal ini dirasa sangat simple
karena dalam menggunakan media internet konsumen tidak perlu melakukan proses
transaksi secara tatap muka untuk proses pembelian produk, konsumen dapat
melakukan komunikasi secara langsung melalui whatsapp dan dapat secara langsung
mengetahui semua informasi tentang produk yang akan dibelinya. Selain dapat
meningkatkan proses pemasaran dan penjualan, internet diharapkan dapat membantu
kinerja perusahaan dan juga diharapkan dapat menambah pendapatan dan mengurangi
terjadinya human error.
B. TUJUAN DAN MANFAAT PEMBUATAN WEBSITE INFORMASI ROTI

Tujuan dari website informasi roti ini adalah :
1. Untuk memudahkan owner dalam proses pemasaran produk dan update
produk secara online.
2. Menyajikan informasi produk secara rinci dan up todate.
3. Mempermudah pengguna untuk mencari produk yang di inginkan.
Manfaat website informasi ini adalah :
1. Memudahkan pelanggan dalam melihat informasi produk secara online,
dimana saja dan kapan saja.
2. Membantu Owner untuk mengupdate informasi produk, seperti nama produk,
dan penjelasan produk.
3. Meningkatkan kemudahan terhadap pengguna website.
C. PERALATAN YANG DIBUTUHKAN DALAM PEMBUATAN

1. 1 unit Laptop
2. Software Mockup
3. Software XAMPP
4. Software Sublime text
D. BAHASA PEMOGRAMAN YANG DIPAKAI
1. HTML
2. PHP
3. CSS
E. FLOWCHART
1. Admin
2. User
F. Rancangan Entitas Relationship Diagram (ERD)
G. PEMBAHASAN DAN PEMBUATAN CODING DATABASE
Berikut adalah langkah langkah dalam pembuatan website.
1. Langkah pertama yang harus kita lakukan adalah membuat/menyiapkan database

seperti pada gambar dibawah.
Gambar 1. Berikut database untuk login admin
Gambar 2. Berikut database untuk data roti

2. Coding yang digunakan dalam menjalankan website.
a. Coding koneksi.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$name = "db_roti";
$conn = mysqli_connect($servername, $username, $password, $name);
if (!$conn){
die("Connection failed: ". mysqli_connect_error());
}
echo "";
?>
b. coding index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Informasi Roti</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bar">
<a href="index.php" class="home">Website Roti</a>
<a href="login.php" class="login">Login Admin</a>
</div>
<div class="container">
<div class="header">
<h1 class="judul">Selamat Datang</h1>
</div>
<div class="hero"></div>
<form class="cari" method="get" action="index.php" style="text-align:

center;">
<label>Kata Pencarian : </label>
<input type="text" name="kata_cari" value="<?php
if(isset($_GET['kata_cari'])) { echo $_GET['kata_cari']; } ?>" />
<button type="submit" class="search">Cari</button>
</form>
<table class="table1">
<tr>
<th>No.</th>
<th>Nama</th>
<th>Harga</th>
<th>Stock</th>
<th>Gambar</th>
<th>Detail</th>
</tr>
<?php
error_reporting(0);
include('koneksi.php');
if(isset($_GET['kata_cari'])) {
$kata_cari = $_GET['kata_cari'];
$query = "SELECT * FROM tb_roti WHERE nama like '%".

$kata_cari."%' OR alamat like '%".$kata_cari."%' ORDER BY id_roti ASC";
} else {
$query = "SELECT * FROM tb_roti ORDER BY

id_roti ASC" ;
}
$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0){

$no = 1;
while($data = mysqli_fetch_assoc($result)){
echo '<tr>';
echo '<td>'.$no.'</td>';
echo '<td>'.$data['nama'].'</td>';
echo '<td>'.$data['harga'].'</td>';
echo '<td>'.$data['stock'].'</td>';
echo '<td><img src="upload/'.
$data['gambar'].'" width="100px" height="100px"></td>';
echo '<td>'.$data['alamat'].' <a href="ket.php?
id='.$data['id_roti'].'">Selengkapnya</a></td>';
echo '</tr>';
$no++;
}
}else{
echo '<tr><td colspan="6">Tidak ada
data!</td></tr>';
}
mysqli_close($conn);
?>
</table>
<hr />
<footer class="fot">
<div>© 2021 Website Roti by Nurhalim Habibie, Taufik Hidayat,
Adfani</div>
</footer>
</div>
</body>
</html>
c. Coding login.php
<?php
require_once("koneksi.php");
if(isset($_POST['login'])) {
$userid = trim($_POST ['username']);
$password = trim($_POST ['password']);
if ($userid == "" || $password == "") {

header("Location: logineror.php?e=1");
exit();
}
$sql = "SELECT * FROM tb_admin WHERE username='$userid' AND

password ='$password'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows ($result) != 0) {
header("Location: data.php");
} else {
header("Location: logineror.php?e=2");
exit();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="bar">
<a href="index.php" class="home">Website Roti</a>
<a href="index.php" class="login">Back</a>
</div>
<h1 class="judul">Silahkan Login</h1>
</div>
<center>
<form action="" method="post">
<table border="0" bgcolor="" height="100" width="300"
cellpadding="10">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username"
placeholder="Username"/></td>
</tr>
<br><br>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="password"
placeholder="Password"/></td>
</tr>
<tr>
<td> </td>
<td></td>
<td><input type="submit" name="login"
value="Login" /></td>
</tr>
</table>
</form>
</center>
<br><br><br><br><br><br><br><br><br>
<hr />
Adfani</div>
</footer>
</div>
</body>
</html>
d. coding loginerror.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Error 404 (Not Found)!!!</title>
</head>
<body>
<?php
if(isset($_GET ['e'])) {
$error = $_GET ['e'] ;
if($error == 1){
echo "<p>Login error! Username dan
Password harus di isi!</p>";
}elseif ($error == 2) {
echo "<p>Login error! Silahkan masukkan
Username dan Password dengan benar!</p>";
}
}
?>
</body>
</html>
e. coding data.php
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="bar">
<a href="index.php" class="home">Website
Roti</a>
<a href="login.php" class="login">Log
Out</a>
</div>
<h1 class="judul">Laman
Admin</h1>
</div>
<table class="table1">
<tr>
<th>No.</th>
<th>Nama</th>
<th>Harga</th>
<th>Stock</th>
<th>Gambar</th>
<th>Alamat</th>
<th>Opsi</th>
</tr>
<?php
$query = "SELECT * FROM tb_roti

ORDER BY id_roti ASC" ;
$result = mysqli_query($conn,
$query);
if(mysqli_num_rows($result) > 0){

$no = 1;
while($data =
mysqli_fetch_assoc($result)){
echo '<tr>';
echo '<td>'.
$no.'</td>';
echo '<td>'.
$data['nama'].'</td>';
echo '<td>Rp.'.
$data['harga'].'</td>';
echo '<td>'.
$data['stock'].'</td>';
echo '<td>
<img src="upload/'.$data['gambar'].'"
width="100px" height="100px">
</td>';
echo '<td>'.
$data['alamat'].'</td>';
echo '<td>
<a href="edit.php?id='.$data['id_roti'].'">Edit</a>
|
<a href="hapus.php?id='.$data['id_roti'].'"
onclick="return confirm(\'Apakah Anda Yakin?\')">Hapus</a></td>';
echo '</tr>';
$no++;
}
}else{
echo '<tr><td
colspan="6">Tidak ada data!</td></tr>';
}
mysqli_close($conn);
?>
</table>
<div class="parent">
<button class="tombol">
<a class="tekan"
href="tambah.php">Tambah Data</a>
</button>
</div>
<hr />
Adfani</div>
</footer>
</div>
</body>
</html>
f. coding tambah.php
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="bar">
Roti</a>
<a href="data.php" class="login">Back</a>
</div>
<h1 class="judul">Input Data</h1>
</div>
<center>
<form action="tambahproses.php"
method="post" enctype="multipart/form-data">
<table border="3" bgcolor="" align="center"
height="100" width="300" cellpadding="10">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text"
name="nama" size="30" placeholder="nama" required></td>
</tr>
<tr>
<td>Harga</td>
<td>:</td>
name="harga" size="30" placeholder="harga" required></td>
</tr>
<tr>
<td>Stock</td>
<td>:</td>
name="stock" size="30" placeholder="stock" required></td>
</tr>
<tr>
<td>Gambar</td>
<td>:</td>
<td><input type="file"
name="gambar" required></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
name="alamat" size="30" placeholder="alamat" required></td>
</tr>
<tr>
<td> </td>
<td></td>
<td><input type="submit"
name="tambah" value="Tambah">
</tr>
</table>
</form>
</center>
<br><br><br><br><br><br><br>
<hr />
Adfani</div>
</footer>
</div>
</body>
</html>
g. coding tambahproses.php
<?php
if(isset($_POST['tambah'])){
$nama = $_POST['nama'];
$harga = $_POST['harga'];
$stock = $_POST['stock'];
$nama_file = $_FILES['gambar']['name'];
$source = $_FILES['gambar']
['tmp_name'];
$folder = './upload/';
$alamat = $_POST['alamat'];
move_uploaded_file($source, $folder.
$nama_file);
$input = mysqli_query($conn, "INSERT INTO
tb_roti VALUES(
NULL,
'$nama',
'$harga',
'$stock',
'$nama_file',
'$alamat')");
if($input){
echo"<script> document.location.href
='data.php';</script>";
}else{
echo 'Gagal menambahkan data! ';

echo '<a href="tambah.php">Kembali</a>';
}else{
echo '<script>window.history.back()</script>';
}
?>
h. coding edit.php
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="bar">
Roti</a>
<a href="data.php" class="login">Back</a>
</div>
<?php
$id = $_GET['id'];
$show = "SELECT * FROM tb_roti WHERE

id_roti ='$id'";
$result = mysqli_query($conn, $show);
if(mysqli_num_rows($result) == 0){
echo
'<script>window.history.back()</script>';
}else{
$data = mysqli_fetch_assoc($result);
}
?>
<h1 class="judul">Edit Data</h1>
</div>
<center>
<form action="editproses.php" method="post"
enctype="multipart/form-data">
<input type="hidden" name="id" value="<?
php echo $id; ?>">
<table border="3" bgcolor="" align="center"
height="100" width="300" cellpadding="10">
<tr>
<td>Nama</td>
<td>:</td>
name="nama" size="30" value="<?php echo $data['nama']; ?>" required>
</td>
</tr>
<tr>
<td>Harga</td>
<td>:</td>
name="harga" size="30" value="<?php echo $data['harga']; ?>" required>
</td>
</tr>
<tr>
<td>Stock</td>
<td>:</td>
name="stock" size="30" value="<?php echo $data['stock']; ?>" required>
</td>
</tr>
<tr>
<td>Gambar</td>
<td>:</td>
<td>
<img src="upload/<?
php echo $data['gambar']; ?>" style="width: 120px;float: left;margin-bottom: 5px;">
<input type="file" name="gambar" />
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
name="alamat" size="30" value="<?php echo $data['alamat']; ?>" required></td>
</tr>
<tr>
<td> </td>
<td></td>
<td><input type="submit"
name="simpan" value="Simpan">
</tr>
</table>
</form>
</center>
<br><br>
<hr />
Adfani</div>
</footer>
</div>
</body>
</html>
i. coding editproses.php
<?php
if(isset($_POST['simpan'])){
$id = $_POST['id'];
$nama = $_POST['nama'];
$harga = $_POST['harga'];
$stock = $_POST['stock'];
$nama_file = $_FILES['gambar']['name'];
$source = $_FILES['gambar']
['tmp_name'];
$folder = './upload/';
$alamat = $_POST['alamat'];
move_uploaded_file($source, $folder.
$nama_file);
$update = "UPDATE tb_roti SET nama='$nama',
harga='$harga', stock='$stock', gambar='$nama_file', alamat='$alamat' WHERE
id_roti='$id'";
if(mysqli_query($conn, $update)){
echo '<script> document.location.href

="data.php";</script>';
}else{
echo 'Gagal menyimpan data! ';

echo '<a href="edit.php?id='.
$id.'">Kembali</a>';
}
}
?>
j. coding hapus.php
<?php
if(isset($_GET['id'])){
$id = $_GET['id'];
$del = "DELETE FROM tb_roti WHERE

id_roti ='$id'";
if(mysqli_query($conn, $del)){
echo '<script> document.location.href

="data.php";</script>';
}else{
echo 'Gagal menghapus data! ';

echo '<a
href="index.php">Kembali</a>';
}
}
?>
k. coding ket.php
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="bar">
Roti</a>
<a href="index.php" class="login">Back</a>
</div>
<?php
$id = $_GET['id'];
$show = "SELECT * FROM tb_roti WHERE

id_roti ='$id'";
$result = mysqli_query($conn, $show);
if(mysqli_num_rows($result) == 0){
echo
'<script>window.history.back()</script>';
}else{
$data = mysqli_fetch_assoc($result);
}
?>
<h1 class="judul"><?php echo
$data['nama']; ?></h1>
</div>
<center><img src="upload/<?php echo

$data['gambar']; ?>" style="width: 300px; margin-bottom: 10px;"></center>
<p class="par"><b class="bold"><?php echo
$data['nama']; ?></b> Lorem ipsum dolor sit amet consectetur adipisicing, elit. Dengan
harga kisaran Rp.<b class="kal"><?php echo $data['harga']; ?></b>. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Doloremque autem, quos perspiciatis aut deserunt adipisci
praesentium, dolorum maiores ab eos, eaque, magni nihil nobis! Dolor quas, beralamatkan
<b class="kal"><?php echo $data['alamat']; ?></b></p>
<hr />
Adfani</div>
</footer>
</div>
</body>
</html>
l. coding style.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Style*/
body {
font: 16px/28px arial, sans-serif;
background-color: #eaeaea;
color: #333;
}
.container {
width: 1100px;
margin: auto;
background-color: white;
}
.bar {
padding: 5px 20px;
background-color: lightblue;
}
.bar a {
display: inline-block;
text-decoration: none;
color: #333;
padding: 3px;
}
.bar a:hover {
background-color: lightskyblue;
color: white;
}
.bar .login {
float: right;
}
.header {
padding: 20px;
}
.header .judul {
font-size: 40px;
font-weight: bold;
text-align: center;
}
.hero {
height: 300px;
background-image: url(img/hero.jpg);
background-size: cover;
}
.table1 {
font-family: sans-serif;
color: #444;
width: 80%;
border: 1px solid #f2f5f7;
margin: 30px auto;
}
.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.table1, th, td {
padding: 8px 20px;
text-align: center;
}
.table1 tr:hover {
background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}
.parent {
display: grid;
place-items: center;
}
.tombol {
display: inline-block;
background: #4285F4;
color: #fff;
width: 150px;
height: 50px;
border-radius: 5px;
border: thin solid #888;
font-size: 16px;
font-weight: normal;
font-family: Roboto, sans-serif;
margin: 2rem 0;
}
.bold {
font-size: 20px;
font-weight: bold;
}
.kal {
font-size: 15px;
font-weight: bold;
}
.tombol .tekan {
text-decoration: none;
color: #333;
}
.cari {
margin: 20px auto;
}
.par {
text-indent: 45px;
margin: 20px;
}
.fot {
margin: 0px 20px;
}
.search {
border-radius: 5px;
border: thin solid;
background: #e0e0e0;
box-shadow: 3px 3px 3px #bcbcbc,
-3px -3px 3px #ffffff;
}
B. Hasil
Berikut adalah hasil dari tampilan website yang telah dibuat.
a. Tampilan utama user
b. Tampilan keterangan
c. Tampilan login admin

d. Tampilan laman admin
e. Tampilan edit data

f. Tampilan input data
g. Tampilan jika ingin menghapus

h. Tampilan searching

Laporan Project Final

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Project Final

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PROJECT

WEBSlTE lNFORMASl ROTI

PENDlDlKAN TEKNOLOGl lNFORMASl

B. TUJUAN DAN MANFAAT PEMBUATAN WEBSITE INFORMASI ROTI

C. PERALATAN YANG DIBUTUHKAN DALAM PEMBUATAN

Berikut adalah langkah langkah dalam pembuatan website.

1. Langkah pertama yang harus kita lakukan adalah membuat/menyiapkan database

Gambar 2. Berikut database untuk data roti

$conn = mysqli_connect($servername, $username, $password, $name);

<form class="cari" method="get" action="index.php" style="text-align:

$query = "SELECT * FROM tb_roti WHERE nama like '%".

$query = "SELECT * FROM tb_roti ORDER BY

$result = mysqli_query($conn, $query);

if(mysqli_num_rows($result) > 0){

if ($userid == "" || $password == "") {

$sql = "SELECT * FROM tb_admin WHERE username='$userid' AND

$query = "SELECT * FROM tb_roti

if(mysqli_num_rows($result) > 0){

echo 'Gagal menambahkan data! ';

$show = "SELECT * FROM tb_roti WHERE

echo '<script> document.location.href

echo 'Gagal menyimpan data! ';

$del = "DELETE FROM tb_roti WHERE

echo '<script> document.location.href

echo 'Gagal menghapus data! ';

$show = "SELECT * FROM tb_roti WHERE

<center><img src="upload/<?php echo

html, body, div, span, applet, object, iframe,

c. Tampilan login admin

e. Tampilan edit data

g. Tampilan jika ingin menghapus

Anda mungkin juga menyukai