PROYEK MATA KULIAH PENGEMBANGAN APLIKASI WEB
PROYEK MATA KULIAH
PENGEMBANGAN APLIKASI WEB
KELAS SI3904
KELOMPOK : 9
Wiradhika Dwi Putra 1202151228
Dhuwi Ambar Wati 1202154348
Galuh Wisnu Pembayun 1202150076
Dahlia Raitana 1202150260
Muhammad Tsany Malik 1202154124
PRODI SISTEM INFORMASI
FAKULTAS REKAYASA INDUSTRI
UNIVERSITAS TELKOM
TAHUN AKADEMIK 2016/2017
KATA PENGANTAR
Puji dan Syukur Kehadirat Tuhan Yang Maha Esa, karena berkat limpahan Rahmat dan Karunia-Nya sehingga laporan ini sanggup tersusun hingga selesai tepat pada waktunya, walaupun banyak hambatan dan kesulitan yang dihadapi. Dalam makalah ini saya akan membahas mengenai ”PENGEMBANGAN APLIKASI WEB”.
Laporan ini telah dibuat dari berbagai sumber dan beberapa bantuan oleh berbagai pihak untuk membantu menyelesaikan hambatan selama mengerjakan makalah ini. Oleh karena itu, saya mengucapkan terimakasih yang sebesar-besarnya kepada semua pihak yang telah membantu dalam penyusunan makalah ini.
Saya menyadari, sudah tentu makalah ini masih banyak kekurangan dan belum dikatakan sempurna karena keterbatasan kemampuan penulis. Oleh karena itu, saran dan kritik yang bersifat membangun dari semua pihak, membantu penulis agar dalam pembuatan makalah di waktu yang akan datang bisa lebih baik lagi. Harapan penulis semoga makalah ini berguna bagi siapa saja yang membacanya.
Bandung, 15 November 2017
Penyusun
(Kelompok 9 )
Daftar Isi
2.2.4 index. 10
2.2.6 login. 15
2.2.7 logout 15
2.2.9 tampil 18
–3–
Bab I Pendahuluan
1.1 Latar Belakang
Pada era globalisasi ini, pemesanan online ataupun jarak jauh sangat berpengaruh kedalam proses bisnis. Maka dari itu dibuatnya aplikasi ini untuk memudahkan para pemesan untuk melakukan pemesanan secara online tanpa harus mendatangi tempat pemesanan itu sendiri.
Untuk langkah-langkah yang dilakukan oleh para calon pemesan produk adalah:
- Pemesan dapat masuk ke situs web kami
- Pemesan memasukkan nama dan informasi mereka
- Pemesan memasukan jenis produk yang diinginkan
- Pemesan menunggu verifikasi dari pihak perusahaan melalui email ataupun sms
Aplikasi ini merupakan aplikasi terbuka sehingga untuk memasukinya tidak diperlukan login. Pemesan dapat melakukan pemesanan Produk dengan mengisi form yang telah disediakan.
1.2 Keunggulan
Keunggulan dari website kami adalah
- Memiliki design yang enak dipandang
- Simpel
- Mobile Friendly
BAB II ISI
2.1 MockUp Gambar
1.Bagian Pemesanan
- Bagian Login Admin Only
- Tampilan Daftar pemesanan
2.2 Cara Kerja
2.2.1 Login Admin Only
Bagian Login admin only adalah dimana fungsi login yang dikhususkan untuk admin dalam melakukan proses login, berikut adalah proses cara kerja Login Admin Only
- Admin melakukan input username dan password
- System akan memproses dengan melakukan permintaan pada bagian file conn2
- Conn2 akan melakukan pengecekan sesuai database
- Apabila data terdapat valid maka session akan melakukan rekaman terhadap kegiatan login
- Pengguna (Admin) akan masuk kedalam Daftar Pemesanan
2.2.2 Daftar Pemesanan
Bagian Daftar Pemesanan adalah dimana semua record terhadap pemesanan ditampilkan, berikut adalah proses cara kerja terhadap Daftar Pemesanan :
- Sebelum bisa akses ke dalam form ini, pengguna harus login terlebih dahulu
- Saat sudah login maka form akan melakukan request ke database melalui file conn
- File conn akan melakukan validasi dan file daftar pemesanan dapat menampilkan isi dari database
- Daftar pemesanan juga dapat melakukan pencarian pemesanan berdasarkan nama dari pemesanan
2.2.3 Pemesanan
Bagian Pemesanan adalah dimana program ini mempunyai tanggung jawab sebagai wadah penginputan pemesanan yang diinginkan oleh sang pengguna. Berikut adalah cara kerja bagian pemesanan:
- Pelanggan/Users masuk ke dalam bagian pemesanan
- User menginputkan data data yang diperlukan
- Program akan melakukan input dengan memproses data melalui action_input
- action_input akan melakukan koneksi melalui koneksi.php
- Database akan menyimpan hasil inputan
2.3 Kodingan
2.3.1 action_input
<?php
<?php
$servername = “localhost”;
$username = “root”;
$password = “”;
$dbname = “pesanan”;
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
?>
2.3.2 conn
<?php
$servername = “localhost”;
$username = “root”;
$password = “”;
$dbname = “pesanan”;
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
?>
2.3.3 conn2
<?php
$servername = “localhost”;
$username = “root”;
$password = “”;
$dbname = “users”;
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
?>
2.3.4 index (pemesanan)
<html>
<style type=”text/css”>
body
{
background-image:url(‘Baja.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
* {
margin:0;
padding:0;
}
.container {
width:100%;
min-height:500px;
border:0 px solid;
margin:0% auto;
}
.header{
width:100%;
height:100px;
border:0px solid;
}
.menu{
width:100%;
height:50px;
border:0 px solid;
}
.content{
width:100%;
height:500 px;
border:0 px solid;
}
.content img{
width:100%;
height:500 px;
border:0 px solid;
}
.content11{
width:40%;
height:500 px;
border:0 px solid;
float:left;
text-align: center;
background-color:white;
border-style: solid;
}
.content12{
width:30%;
height:500 px;
border:0 px solid;
float:left;
margin-left:20%;
background-color:white;
border-style: solid;
}
.footer{
position:relative;
width:100%;
height:200 px;
border:0 px solid;
}
.footer img{
width:100%;
height:25%;
float: bottom;
}
</style>
<body>
<head>
<title>Pemesanan Bahan PT Istana Baja</title>
<text-align = left
</head>
<body>
<div class=”container”>
<div class=”header”>
<img src=”Capture.png”>
</div>
<div class=”menu”>
</div>
<div class=”content”>
<div class=”content11″>
<h1> PT ISTANA BAJA </h1>
Selamat datang di website pemesanan Bahan baku pt istana baja Menjadi penyedia layanan pemesanan online air mineral terbaik yang berfokus pada pelayanan dan kemudahan pelanggan
</div>
<div class=”content12″>
<table border=”0″ width=”60px” ><tr><td rowspan=”8″>
</td>
<form action=”action_input.php” method=”POST” enctype=”multipart/form-data”>
<table width=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ style=”background-color:white; “>
<tr>
<td height=”40″> </td>
<td> </td>
<td><font size=”4″ color=”black”><b>FORM PEMESANAN</b></font></td>
</tr>
<tr>
<td height=”40″> </td>
<td>Nama</td>
<td><input type=”text” name=”Nama” size=”20″></td>
</tr>
<tr>
<td height=”40″> </td>
<td>No.Hp</td>
<td><input type=”text” name=”No.Hp” size=”20″></td>
</tr>
<tr>
<td height=”40″> </td>
<td>Alamat</td>
<td><input type=”text” name=”Alamat” size=”20″></td>
</tr>
<tr>
<td height=”40″> </td>
<td>Email</td>
<td><input type=”text” name=”Email” size=”20″></td>
</tr>
<tr>
<td height=”36″> </td>
<td>Produk</td>
<td><input type=”text” name=”Produk” size=”20″></td>
</tr>
<tr>
<td height=”36″> </td>
<td>Tanggal</td>
<td><input type=”text” name=”Tanggal” size=”8″></td>
</tr>
<tr>
<td height=”60″> </td>
<td> </td>
<td><input type=”submit” name=”submit” value=”Submit”>
<input type=”reset” name=”reset” value=”Reset”></td>
</tr>
</table>
</form>
</div>
</div>
<div class=”footer”>
<img src=”contoh-banner-iklan.jpg” align=”bottom”>
</div>
</div>
</div>
</body>
</html>
2.3.5 koneksi
<?php
$servername = “localhost”;
$username = “root”;
$password = “”;
$dbname = “pesanan”;
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
?>
2.3.6 login
<!DOCTYPE html>
<html>
<head>
<title>Login Page – Admin Only</title>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>
<link rel=”shortcut icon” href=”img/php.jpg” />
<body style=”background: white”>
<div class=”header” style=”background: red”>
<h1 style=”color:white;”>LOGIN</h1>
</div>
<form method=”POST” action=”login.php” style=”background: red”>
<div class=”input-group”>
<label style=”color: white”>Username:</label>
<input type=”text” name=”user” required />
</div>
<div class=”input-group” style=”color: white”>
<label>Password:</label>
<input type=”password” name=”password” required/>
</div>
<div class=”input-group”>
<button type=”submit” class=”btn” name=”login” style=”width: 100%” />Login</button>
</div>
</form>
</body>
</html>
<?php
include(‘conn2.php’);
// == fungsi login ==
if(isset($_POST[‘login’])){
$username = $_POST[‘user’];
$password = $_POST[‘password’];
$query = mysqli_query($conn,”SELECT * FROM user WHERE username=’$username’ AND password=’$password'”);
$row = mysqli_fetch_array($query);
session_start();
$_SESSION[‘username’] = $username;
$_SESSION[‘password’] = $password;
if ($username == $row[‘username’] && $password == $row[‘password’]){
echo ‘
<script language=”javascript”>
document.location =”tampil.php”;
</script>
‘;
}else{
session_destroy();
echo ‘
<script language=”javascript”>
alert(“Failed to login!”);
document.location =”login.php”;
</script>
‘;
}
}
?>
2.3.7 logout
<?php
include(‘conn.php’);
// == fungsi logout ==
session_start();
session_destroy();
echo ‘
<script language=”javascript”>
alert(“Logout!! Goodbye”);
document.location =”login.php”;
</script>
‘;
?>
2.3.8 session
<?php
session_start();
if(!isset($_SESSION[‘username’]) && !isset($_SESSION[‘password’])) { //melakukan pengecekkan SESSION username & password
echo ‘
<script language=”javascript”>
alert(“Login First”);
document.location =”login.php”;
</script>
‘;
}
?>
2.3.9 tampil
<?php
include(‘conn.php’);
include(‘session.php’);
?>
<!DOCTYPE html>
<html>
<head>
<title>Daftar Pesanan</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
body{
font-size: 120%;
background: white;
}
form {
width: 20%;
margin: 0px auto;
padding: 20px;
border: 1px solid #fff;
background: white;
border-radius: 0px 0px 10px 10px;
}
.header {
width:20%;
margin: 50px auto 0px;
color: white;
background: blue;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding : 20px;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr{
border-bottom: 1px solid #cbcbcb;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover{
background: #F5F5F5;
}
.input-group label{
display: block;
text-align: left;
margin: 3px;
}
.input-group input{
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid grey;
}
.btn{
padding: 10px;
font-size: 15px;
color: white;
background: #5f9EA0;
border: none;
border-radius: 5px;
text-decoration: none;
}
.msg{
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #fff;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}
.edit_btn{
text-decoration: none;
padding: 2px 5px;
background: #2E8857;
color: white;
border-radius: 3px;
}
.del_btn{
text-decoration: none;
padding: 2px 5px;
color: white;
border-radius: 3px;
background: #800000;
}
</style>
<body>
<div class=”header”>
<h1>Daftar Pesanan</h1>
</div>
<div align=”center” style=”margin-top: 10px;”>
<form action=”tampil.php” method=”get” style=”width: 50%; border:0px;”>
<input type=”text” name=”cari” id=”cari” placeholder=”Cari Berdasarkan Nama” style=”height: 30px; width: 40%”>
<input type=”submit” value=”Cari” style=”width: 10%; height: 35px”>
<a href=”logout.php” class=”btn”>Logout</a>
</form></div>
<?php
if (isset($_GET[‘cari’])) {
# code…
$cari = $_GET[‘cari’];
echo “<center><b>Hasil Pencarian : “.$cari.”</b></center>”;
}
?>
<table>
<thead>
<tr>
<th>Nama</th>
<th>No.Hp</th>
<th>Alamat</th>
<th>Email</th>
<th>Produk</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
<?php
if (isset($_GET[‘cari’])) {
# code…
$cari = $_GET[‘cari’];
$results = mysqli_query( $conn, “SELECT * FROM pesanan WHERE Nama like ‘%”.$cari.”%'”);
} else {
// == fungsi menampilkan data ==
$results = mysqli_query( $conn, “SELECT * FROM pesanan”);
}
while ($row = mysqli_fetch_array($results)) {
?>
<tr>
<td><?php echo $row[‘Nama’];?></td>
<td><?php echo $row[‘No.Hp’];?></td>
<td><?php echo $row[‘Alamat’];?></td>
<td><?php echo $row[‘Produk’];?></td>
<td><?php echo $row[‘Tanggal’];?></td>
</tr>
<?php } ?>
</tbody>
</table>
<form>
</form>
</body>
</html>
2.3.10 Style (Css)
body{
font-size: 19px;
background: #eee;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr{
border-bottom: 1px solid #cbcbcb;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover{
background: #F5F5F5;
}
form{
width: 45%;
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid #bbbbbb;
border-radius: 5px;
}
.input-group{
margin: 10px 0px 10px 0px;
}
.input-group label{
display: block;
text-align: left;
margin: 3px;
}
.input-group input{
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid grey;
}
.btn{
padding: 10px;
font-size: 15px;
color: white;
background: #5f9EA0;
border: none;
border-radius: 5px;
}
.msg{
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}
.edit_btn{
text-decoration: none;
padding: 2px 5px;
background: #2E8857;
color: white;
border-radius: 3px;
}
.del_btn{
text-decoration: none;
padding: 2px 5px;
color: white;
border-radius: 3px;
background: #800000;
}
2.3.11 Styles (Css)
* {
margin: 0px;
padding: 0px;
}
body{
font-size: 120%;
background: #F8F8FF;
}
form {
width: 20%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;
}
.header {
width:20%;
margin: 50px auto 0px;
color: blue;
background: #5F9EA0;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding : 20px;
}
.input-group{
margin: 10px 0px 10px 0px;
}
.input-group label{
display: block;
text-align: left;
margin: 3px;
}
.input-group input{
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid grey;
}
.btn{
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
Yang suka ngomen