JAVA WEB UAS

Hallo selamat malam semua,, sudah lama ya tidak posting blog ini. Woiya kali ini admin mau ngepost tentang tugas java web menggunakan framework Netbeans.

Saya akan membuat sebuah web Penjualan & Rental Mobil yang dimana database menggunakan Mysql. Kita harus membuat beberapa page terlebih dahulu.

WEB JAVA PENJUALAN JASA SERVICE

Kita akan membuat web penjualan.

1. Pertama buat dulu database nya

2. Buat table jasaservice, konsumen, pegawai, penjualan, dan pembelian

3. Buat halaman login page nya

<html>

<head>

<title>Login</title>

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<style>

#card {

background: #fbfbfb;

border-radius: 8px;

box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);

height: 410px;

margin: 6rem auto 8.1rem auto;

width: 329px;

}

body {

background: -webkit-linear-gradient(bottom, #2dbd6e, #a6f77b);

background-repeat: no-repeat;

}

#card-content {

padding: 12px 44px;

}

#card-title {

font-family: "Raleway Thin", sans-serif;

letter-spacing: 4px;

padding-bottom: 23px;

padding-top: 13px;

text-align: center;

}

.underline-title {

background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);

height: 2px;

margin: -1.1rem auto 0 auto;

width: 89px;

}

a {

text-decoration: none;

}

label {

font-family: "Raleway", sans-serif;

font-size: 11pt;

}

#forgot-pass {

color: #2dbd6e;

font-family: "Raleway", sans-serif;

font-size: 10pt;

margin-top: 3px;

text-align: right;

}

.form {

align-items: left;

display: flex;

flex-direction: column;

}

.form-border {

background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);

height: 1px;

width: 100%;

}

.form-content {

background: #fbfbfb;

border: none;

outline: none;

padding-top: 14px;

}

#signup {

color: #2dbd6e;

font-family: "Raleway", sans-serif;

font-size: 10pt;

margin-top: 16px;

text-align: center;

}

#submit-btn {

background: -webkit-linear-gradient(right, #a6f77b, #2dbd6e);

border: none;

border-radius: 21px;

box-shadow: 0px 1px 8px #24c64f;

cursor: pointer;

color: white;

font-family: "Raleway SemiBold", sans-serif;

height: 42.3px;

margin: 0 auto;

margin-top: 50px;

transition: 0.25s;

width: 153px;

}

#submit-btn:hover {

box-shadow: 0px 1px 18px #24c64f;

}

</style>

</head>

<body>

<div id="card">

<div id="card-content">

<div id="card-title">

<h2>LOGIN</h2>

<div class="underline-title"></div>

</div>

<form action="Process.php" method="post" class="form">

<label for="user-email" style="padding-top:13px"> Email</label>

<input

id="user-email"

class="form-content"

type="email"

name="email"

autocomplete="on"

required />

<div class="form-border"></div>

<label for="user-password" style="padding-top:22px"> Password</label>

<input

id="user-password"

class="form-content"

type="password"

name="password"

required />

<div class="form-border"></div>

<a href="#"><legend id="forgot-pass">Forgot password?</legend></a>

<input type="hidden" name="process" value="user_login">

<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a>

</form>

</div>

</body>

</html>

4. Buat tampilan dashboard home atau index nya

<?php

require 'config.php';

session_start();

$user_check = $_SESSION['login_user'];

$ses_sql = "SELECT username FROM user_login WHERE username = '$user_check' ";

$getdata = $conn->query($ses_sql);

$result = $getdata->fetch_assoc();

$login_session = $result['username'];

if(!isset($_SESSION['login_user'])){

header("location: login.html");

die();

}

$conn->close();

<html>

<head>

<title>Danu Jasa</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<style type="text/css">

html,body{

padding: 0;

margin:0;

font-family: sans-serif;

}

.menu-malasngoding{

background-color: #3141ff;

}

.menu-malasngoding ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

}

.menu-malasngoding > ul > li {

float: left;

}

.menu-malasngoding li a {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

.menu-malasngoding li a:hover{

background-color: #2525ff;

}

li.dropdown {

display: inline-block;

}

.dropdown:hover .isi-dropdown {

display: block;

}

.isi-dropdown a:hover {

color: #fff !important;

}

.isi-dropdown {

position: absolute;

display: none;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

background-color: #f9f9f9;

}

.isi-dropdown a {

color: #3c3c3c !important;

}

.isi-dropdown a:hover {

color: #232323 !important;

background: #f3f3f3 !important;

}

</style>

<header class="header">

<div class="menu-malasngoding">

<ul>

<li class="dropdown"><a href="#">Data Master</a>

<ul class="isi-dropdown">

<li><a href="datajasaservice.php">Data Jasa/Service</a></li>

<li><a href="datakonsumen.php">Data Konsumen</a></li>

<li><a href="datapegawai.php">Data Pegawai</a></li>

<li><a href="datalainnya.php">Data Lainnya</a></li>

</ul>

</li>

<li class="dropdown"><a href="#">Data Transaksi</a>

<ul class="isi-dropdown">

<li><a href="datapenjualan.php">Data Penjualan Jasa Service</a></li>

<li><a href="datapengeluaran.php">Data Pengeluaran Jasa Service</a></li>

</ul>

</li>

<li class="dropdown"><a href="">Laporan</a>

<ul class="isi-dropdown">

<li><a href="">Laporan Penjualan Jasa Per Bulan</a></li>

<li><a href="">Laporan Penjualan Jasa Per Service</a></li>

<li><a href="">Laporan Penjualan Jasa Per Nama Konsumen</a></li>

</ul>

</li>

<li><a href='logout.php'>Logout</a></li>

</ul>

</div>

</header>

<br/>

<center>

<h1>Welcome to Danu Computer Service </h1>

</center>

</body>

</html>

5. Buat form data master jasa service

<html>

<head>

<title>Data Jasa Service</title>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<?php

require 'config.php';

$query = "SELECT nama,jasa,deskripsi,type,os FROM jasaservice ";

$getdata = $conn->query($query);

$result = $getdata->fetch_all();

if (!$result) {

$result = "";

} else {

$result = json_encode($result);

// var_dump($result);

}

<script>

var dataSet = <?php echo $result; ?> ;

$(document).ready(function() {

$('#data').DataTable( {

data: dataSet,

columns: [

{ title: "Nama" },

{ title: "Jasa/Service" },

{ title: "Deskripsi" },

{ title: "Type" },

{ title: "OS" }

]

} );

</script>

</head>

<body>

<form action="Process.php" method="post" enctype="multipart/form-data">

<table border="0" cellspacing="10" width="800" align="center">

<tbody>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type="text" name="nama" placeholder="" size="50" maxlength="30" autocomplete="off" autofocus/>

</td>

</tr>

<tr>

<td>Jasa/Service</td>

<td>:</td>

<td>

<select name="kategori">

<option value="">Pilih Kategori</option>

<option value="1">Service Laptop</option>

<option value="2">Installasi</option>

<option value="3">Design</option>

</select>

</td>

</tr>

<tr>

<td>Deskripsi</td>

<td>:</td>

<td><textarea name="deskripsi" placeholder="Deskrippsi Keluhan" rows="3" cols="50"/></textarea></td>

</tr>

<tr>

<td>Type</td>

<td>:</td>

<td><input type="text" name="type" placeholder="" size="20" maxlength="10"/></td>

</tr>

<tr>

<td>OS</td>

<td>:</td>

<td><input type="text" name="os" placeholder="" size="30" maxlength="30"/></td>

</tr>

<tr>

<td colspan="3"><input type="hidden" name="process" value="datajasaservice"><button type="submit" name="simpan">Proses Data</button></td>

</tr>

</tbody>

</table>

</form>

<br /><br />

<table id="data" name="dataTable" class="display" width="100%"></table>

</body>

</html>

6. Buat form data master data konsumen

<html>

<head>

<title>Data Konsumen</title>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<?php

require 'config.php';

$query = "SELECT nama,jk,alamat,no_hp FROM konsumen ";

$getdata = $conn->query($query);

$result = $getdata->fetch_all();

if (!$result) {

$result = "";

} else {

$result = json_encode($result);

// var_dump($result);

}

<script>

var dataSet = <?php echo $result; ?> ;

$(document).ready(function() {

$('#data').DataTable( {

data: dataSet,

columns: [

{ title: "Nama" },

{ title: "Jenis Kelamin" },

{ title: "Alamat" },

{ title: "Nomer Hp" }

]

} );

</script>

</head>

<body>

<form action="Process.php" method="post" enctype="multipart/form-data">

<table border="0" cellspacing="10" width="800" align="center">

<tbody>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type="text" name="nama" placeholder="" size="50" maxlength="30" autocomplete="off" autofocus/>

</td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>:</td>

<td>

<select name="jk">

<option value="">Pilih Jenis Kelamin</option>

<option value="Laki-laki">Laki-laki</option>

<option value="Perempuan">Perempuann</option>

</select>

</td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><textarea name="alamat" rows="3" cols="50"/></textarea></td>

</tr>

<tr>

<td>Nomer HP</td>

<td>:</td>

<td><input type="text" name="hp" placeholder="" size="20" maxlength="20"/></td>

</tr>

<tr>

<td colspan="3"><input type="hidden" name="process" value="datakonsumen"><button type="submit" name="simpan">Proses Data</button></td>

</tr>

</tbody>

</table>

</form>

<br /><br />

<table id="data" class="display" width="100%"></table>

</body>

</html>

7. Buat form data master pegawai

<html>

<head>

<title>Data Pegawai</title>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<?php

require 'config.php';

$query = "SELECT nama,jabatan,alamat,no_hp FROM pegawai ";

$getdata = $conn->query($query);

$result = $getdata->fetch_all();

if (!$result) {

$result = "";

} else {

$result = json_encode($result);

// var_dump($result);

}

<script>

var dataSet = <?php echo $result; ?> ;

$(document).ready(function() {

$('#data').DataTable( {

data: dataSet,

columns: [

{ title: "Nama" },

{ title: "Jabatan" },

{ title: "Alamat" },

{ title: "Nomer Hp" }

]

} );

</script>

</head>

<body>

<form action="Process.php" method="post" enctype="multipart/form-data">

<table border="0" cellspacing="10" width="800" align="center">

<tbody>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type="text" name="nama" placeholder="" size="50" maxlength="30" autocomplete="off" autofocus/>

</td>

</tr>

<tr>

<td>Jabatan</td>

<td>:</td>

<td>

<select name="jabatan">

<option value="">Pilih Jabatan</option>

<option value="Engineer">Engineer</option>

<option value="Designer">Designer</option>

<option value="Admin">Admin</option>

</select>

</td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type="text" name="alamat" placeholder="" size="20" maxlength="10"/></td>

</tr>

<tr>

<td>No HP</td>

<td>:</td>

<td><input type="text" name="hp" placeholder="" size="30" maxlength="30"/></td>

</tr>

<tr>

<td colspan="3"><input type="hidden" name="process" value="datapegawai"><button type="submit" name="simpan">Proses Data</button></td>

</tr>

</tbody>

</table>

</form>

<br /><br />

<table id="data" class="display" width="100%"></table>

</body>

</html>

8. Buat form data transaksi penjualan

<!doctype html>

<html>

<head>

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

<title>Data Penjualan</title>

<style type="text/css">

.putih {

color: #FFF;

}

</style>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<?php

require 'config.php';

$query = "SELECT nama_konsumen,jenis,harga,tgl_jual,status FROM penjualan ";

$getdata = $conn->query($query);

$result = $getdata->fetch_all();

if (!$result) {

$result = "";

} else {

$result = json_encode($result);

// var_dump($result);

}

<script>

var dataSet =

<?php echo $result; ?>;

$(document).ready(function() {

$('#data').DataTable( {

data: dataSet,

columns: [

{ title: "Nama Konsumen" },

{ title: "Jenis" },

{ title: "Harga" },

{ title: "Tgl Penjualan" },

{ title: "Status" }

]

} );

</script>

</head>

<body>

<div align="center">

<form id="form1" name="form1" method="post" action="Process.php">

<table width="383" height="201" border="0">

<tr>

<td colspan="2" bgcolor="#00CC00">

<div align="center" class="putih">

<strong>FORM INPUT DATA PENJUALAN</strong>

</div>

</td>

</tr>

<tr>

<td width="124" bgcolor="#FFFFFF">Nama Konsumen </td>

<td width="243" bgcolor="#FFFFFF"><em></em>

<input name="nama_konsumen" type="text" id="nama_brg" /></td>

</tr>

<tr>

<td bgcolor="#FFFFFF">Jenis Service</td>

<td bgcolor="#FFFFFF"><select name="jenis" id="tujuan">

<option value="Service Laptop" selected>Service Laptop</option>

<option value="Installasi">Installasi</option>

<option value="Design">Design</option>

</select></td>

</tr>

<tr>

<td bgcolor="#FFFFFF">Harga</td>

<td bgcolor="#FFFFFF">

<input name="harga" type="text" /></td>

</tr>

<tr>

<td bgcolor="#FFFFFF">Tanggal Penjualan</td>

<td bgcolor="#FFFFFF">

<input name="tgl_jual" type="date">

</tr>

<tr>

<td bgcolor="#FFFFFF">Status</td>

<td bgcolor="#FFFFFF">

<label>

<input type="radio" name="status" value="Lunas" id="status_0" checked="checked" />

Lunas

</label>

<label>

<input type="radio" name="status" value="Cicilan" id="status_1" />

Cicilan</label>

<br />

</td>

</tr>

<tr>

<td height="28" bgcolor="#FFFFFF"></td>

<td bgcolor="#FFFFFF">

<input type="hidden" name="process" value="datapenjualan">

<input name="" type="submit" value="Proses" />

<input name="" type="reset" value="Batal" /></td>

</tr>

</table>

</form>

<br /><br />

<table id="data" class="display" width="100%"></table>

</div>

</body>

</html>

9. Buat form data transaksi pengeluaran

<head>

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

<title>PEMBELIAN STOCK BARANG</title>

<style type="text/css">

.putih {

color: #FFF;

}

</style>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<?php

require 'config.php';

$query = "SELECT nama_brg,jenis,harga,tgl_beli FROM pembelian ";

$getdata = $conn->query($query);

$result = $getdata->fetch_all();

if (!$result) {

$result = "";

} else {

$result = json_encode($result);

// var_dump($result);

}

<script>

var dataSet = <?php echo $result; ?> ;

$(document).ready(function() {

$('#data').DataTable( {

data: dataSet,

columns: [

{ title: "Nama Barang" },

{ title: "Jenis" },

{ title: "Harga" },

{ title: "Tgl Pembelian" }

]

} );

</script>

</head>

<body>

<div align="center">

<form id="form1" name="form1" method="post" action="Process.php">

<table width="383" height="201" border="0">

<tr>

<td colspan="2" bgcolor="#00CC00">

<div align="center" class="putih">

<strong>FORM INPUT DATA PEMBELIAN STOCK</strong>

</div>

</td>

</tr>

<tr>

<td width="124" bgcolor="#FFFFFF">Nama Barang </td>

<td width="243" bgcolor="#FFFFFF"><em></em>

<input name="nama_brg" type="text" id="nama_brg" /></td>

</tr>

<tr>

<td bgcolor="#FFFFFF">Jenis Barang</td>

<td bgcolor="#FFFFFF"><select name="jenis" id="tujuan">

<option value="Sparepart" selected>Sparepart</option>

<option value="Lisensi">Lisensi</option>

<option value="Hardware">Hardware</option>

<option value="Software">Software</option>

</select></td>

</tr>

<tr>

<td bgcolor="#FFFFFF">Harga</td>

<td bgcolor="#FFFFFF">

<input name="harga" type="text" /></td>

</tr>

<tr>

<td bgcolor="#FFFFFF">Tanggal Pembelian</td>

<td bgcolor="#FFFFFF">

<input name="tgl_beli" type="date">

</tr>

<tr>

<td height="28" bgcolor="#FFFFFF"></td>

<td bgcolor="#FFFFFF">

<input type="hidden" name="process" value="datapembelian">

<input name="" type="submit" value="Proses" />

<input name="" type="reset" value="Batal" /></td>

</tr>

</table>

</form>

<table id="data" class="display" width="100%"></table>

</div>

</body>

</html>

10. Buat page logout untuk keluar dari web penjualan

<?php

session_start();

if(session_destroy()) {

header("Location: login.html");

}

11. Buat script config.php untuk mengkoneksikan data ke database yang sudah dibuat

<?php

$db_host = "localhost";

$db_name = "JasaDanu";

$db_user = "root";

$db_pass = "";

$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

12. Buat scipt success.php untuk menampilkan pesan ketika sudah berhasil menginput data layanan

<?php

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

require 'config.php';

$sql = "INSERT INTO formsewamobil (nama, no_id, mulai_pinjam, selesai_pinjam, type_mobil, alamat, email, no_hp) VALUES ('".$_POST['nama_lengkap']."', ".$_POST['no_id'].", ".$_POST['start_peminjaman'].", ".$_POST['end_peminjaman'].", '".$_POST['type_mobil']."', '".$_POST['alamat']."', '".$_POST['email']."', ".$_POST['no_hp'].")";

if ($conn->query($sql) === TRUE) {

// echo "New record created successfully";

<!DOCTYPE html>

<html>

<head>

<title>Pendaftaran Berhasil!</title>

<style type="text/css">

body {

margin: 0;

padding: 0;

}

* {

box-sizing: border-box;

}

form {

padding: 1em;

background: #f9f9f9;

border: 1px solid #c1c1c1;

margin-top: 2rem;

max-width: 600px;

margin-left: auto;

margin-right: auto;

padding: 1em;

}

form input {

margin-bottom: 1rem;

background: #fff;

border: 1px solid #9c9c9c;

}

form button {

background: lightgrey;

padding: 0.7em;

border: 0;

}

form button:hover {

background: green;

color: white;

}

form span a{

background: lightblue;

padding: 0.7em;

border: 0;

text-decoration: none;

color: black;

text-align: center;

}

form span a:hover {

background: blue;

color: white;

}

label {

text-align: right;

display: block;

padding: 0.5em 1.5em 0.5em 0;

}

input {

width: 100%;

padding: 0.7em;

margin-bottom: 0.5rem;

}

input:focus {

outline: 3px solid green;

}

select {

width: 100%;

padding: 0.7em;

margin-bottom: 0.5rem;

}

select:focus {

outline: 3px solid green;

}

@media (min-width: 400px) {

form {

overflow: hidden;

}

label {

float: left;

width: 200px;

}

input {

float: left;

width: calc(100% - 200px);

}

select {

float: left;

width: calc(100% - 200px);

}

button {

float: right;

width: calc(100% - 200px);

}

</style>

</head>

<body>

<form>

<h1>Pendaftaran Kamu Berhasil!</h1>

<p>

Nama Lengkap: <?php echo $_POST["nama_lengkap"]; ?><br>

NO KTP: <?php echo $_POST["no_id"]; ?><br>

Mulai Peminjaman: <?php echo $_POST["start_peminjaman"]; ?><br>

Selesai Peminjaman: <?php echo $_POST["end_peminjaman"]; ?><br>

Type Mobil: <?php echo $_POST["type_mobil"]; ?><br>

Alamat Lengkap: <?php echo $_POST["alamat"]; ?><br>

E-mail: <?php echo $_POST["email"]; ?><br>

No.HP: <?php echo $_POST["no_hp"]; ?>

</p>

</form>

</body>

</html>

<?php

} else {

// echo "<script>alert('Pengisian form terjadi kendala!, cobalah beberapa saat lagi!.'); window.location = './form.php'</script>";

echo "Error: " . $sql . "<br>" . $conn->error;

}

$conn->close();

13. Buat script process.php berfungsi ketima mengisi form maka data akan tersimpan ke database

<?php

require 'config.php';

if ($_POST["process"] == "user_login") {

$query = "SELECT * FROM user_login WHERE email='".$_POST['email']."' AND password='".$_POST['password']."'";

$getdata = $conn->query($query);

$result = $getdata->fetch_assoc();

$count = $getdata->num_rows;

if ($count == 1) {

session_start();

$_SESSION['login_user'] = $result['username'];

echo "<script> alert('Login Berhasil, ".$_SESSION['login_user']."');</script>";

header("location: index.php");

} else {

echo "<script> alert('Username atau password salah!'); window.history.back();</script>";

}

} elseif ($_POST["process"] == "datajasaservice") {

$query = "INSERT INTO jasaservice (nama, jasa, deskripsi, type, os) VALUES ('".$_POST['nama']."', '".$_POST['kategori']."', '".$_POST['deskripsi']."', '".$_POST['type']."', '".$_POST['os']."')";

if ($conn->query($query) === TRUE) {

echo "<script> alert('Input Data Jasa Service telah berhasil!'); window.location = './datajasaservice.php' </script>";

} else {

echo "<script> alert('Gagal Melakukan input Data, hubungi developer program!'); window.location = './datajasaservice.php' </script>";

// echo "Error: " . $query . "<br>" . $conn->error;

}

} elseif ($_POST["process"] == "datakonsumen") {

$query = "INSERT INTO konsumen (nama, jk, alamat, no_hp) VALUES ('".$_POST['nama']."', '".$_POST['jk']."', '".$_POST['alamat']."', '".$_POST['hp']."')";

if ($conn->query($query) === TRUE) {

echo "<script> alert('Input Data Konsumen telah berhasil!'); window.location = './datakonsumen.php' </script>";

} else {

echo "<script> alert('Gagal Melakukan input Data, hubungi developer program!'); window.location = './datakonsumen.php' </script>";

// echo "Error: " . $query . "<br>" . $conn->error;

}

} elseif ($_POST["process"] == "datapegawai") {

$query = "INSERT INTO pegawai (nama, jabatan, alamat, no_hp) VALUES ('".$_POST['nama']."', '".$_POST['jabatan']."', '".$_POST['alamat']."', '".$_POST['hp']."')";

if ($conn->query($query) === TRUE) {

echo "<script> alert('Input Data Pegawai telah berhasil!'); window.location = './datapegawai.php' </script>";

} else {

// echo "<script> alert('Gagal Melakukan input Data, hubungi developer program!'); window.location = './datapegawai.php' </script>";

echo "Error: " . $query . "<br>" . $conn->error;

}

} elseif ($_POST["process"] == "datapenjualan") {

$query = "INSERT INTO penjualan (nama_konsumen, jenis, harga, tgl_jual, status) VALUES ('".$_POST['nama_konsumen']."', '".$_POST['jenis']."', ".$_POST['harga'].", '".$_POST['tgl_jual']."', '".$_POST['status']."')";

if ($conn->query($query) === TRUE) {

echo "<script> alert('Input Data Penjualan telah berhasil!'); window.location = './datapenjualan.php' </script>";

} else {

// echo "<script> alert('Gagal Melakukan input Data, hubungi developer program!'); window.location = './datapenjualan.php' </script>";

echo "Error: " . $query . "<br>" . $conn->error;

}

} elseif ($_POST["process"] == "datapembelian") {

$query = "INSERT INTO pembelian (nama_brg, jenis, harga, tgl_beli) VALUES ('".$_POST['nama_brg']."', '".$_POST['jenis']."', ".$_POST['harga'].", '".$_POST['tgl_beli']."')";

if ($conn->query($query) === TRUE) {

echo "<script> alert('Input Data Pembelian telah berhasil!'); window.location = './datapengeluaran.php' </script>";

} else {

echo "<script> alert('Gagal Melakukan input Data, hubungi developer program!'); window.location = './datapengeluaran.php' </script>";

// echo "Error: " . $query . "<br>" . $conn->error;

}

} elseif (!$_POST['process']) {

echo "<script> alert('Data Input tidak dapat di process'); window.history.back(); </script>";

die();

}

$conn->close();

14. Buat tampilan data jasa service yang sudah masuk pada database

15. Buat tampilan data konsumen yang sudah masuk pada database

16. Buat tampilan data pegawai yang sudah masuk pada database

17. Buat tampilan data transaksi penjualan yang sudah masuk pada database

18. Buat tampilan data transaksi pengeluaran yang sudah masuk pada database

19. Lihat data yang sudah masuk pada mysql

WEB JAVA STUDY CASE RENTAL MOBIL

1. Yang pertama kita harus buat dulu database untuk web rental mobil

create database rentalmobil;

2. Buat table untuk form data pemesanan sewa mobil

create table formsewamobil (
no int null auto_incerement key,
nama varchar (50) not null,
no_id int (20) not null,
alamat varchar (100),
email varchar (100),
no

3. Buat source code untuk tampilan web utama nya / index.php. Disini saya mengguanakan PHP dan CSS.

PHP

<!DOCTYPE html>

<html>

<head>

<title>Layout Web Responsive Dengan HTML dan CSS</title>

</head>

<body>

<h1>DANU RENTAL CARS</h1>

</div>

SILEBAR

</div>

<ul>

<li><a href="typecar.html">Jenis Mobil Danu Rental Cars</a></li>

<li><a href="form.php">Form Sewa Mobil</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="about.html">About</a></li>

</ul>

</div>

<h2>Danu Rental Cars</h2>

<p>Danu Rental Cars lepas kunci murah bisa juga dengan supir. Danu Rental Cars adalah penyedia jasa rental mobil terbaik dan terpercaya di Jakarta Selatan dengan pelayanan hingga 24 jam, syarat mudah dan proses mudah.</p>

<p>Syarat dan Ketentuan Rental Mobil Dengan Supir di Jakarta Selatan

Sebelum booking dianjurkan untuk bertanya kepeda customer service kami untuk cek ketersedian dan kebutuhan unit apakah plat ganjil atau genap

Lokasi penjemputan dalam kota dan bandara

Supir kami akan menghubungi anda sebelum waktu jemput

Jasa Rental

Termasuk

Penggunaan dalam area DKI Jakarta (permintaan khusus untuk mobil berplat ganjil atau genap tergantung dari ketersediaan penyedia rental)

Penggunaan sampai dengan 12 jam atau hingga 23:59 di setiap hari rental

Tidak Termasuk

Bensin, parkir, tol, uang makan sopir dan tips

Biaya akomodasi sopir selama bepergian keluar kota

Penggunaan di luar area kota Jakarta (biaya tambahan berlaku)</p>

<h3 style="text-align: center" class="vc_custom_heading">Tertarik dengan layanan rental kami? Hubungi kami sekarang juga!</h3>

</div>

Bagian Footer

</div>

</body>

</html>

CSS

{

box-sizing: border-box;

}

.row::after {

content: "";

clear: both;

display: block;

}

[class*="col-"] {

float: left;

padding: 15px;

}

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 600px) {

/* For tablets: */

.col-m-1 {width: 8.33%;}

.col-m-2 {width: 16.66%;}

.col-m-3 {width: 25%;}

.col-m-4 {width: 33.33%;}

.col-m-5 {width: 41.66%;}

.col-m-6 {width: 50%;}

.col-m-7 {width: 58.33%;}

.col-m-8 {width: 66.66%;}

.col-m-9 {width: 75%;}

.col-m-10 {width: 83.33%;}

.col-m-11 {width: 91.66%;}

.col-m-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

img {

width: 100%;

height: auto;

}

body {

background-image:url('bg.png');

font-family: Tahoma,Geneva,sans-serif;

}

#wrap {

width:90%;

margin:auto;

background-color:white;

border-radius: 10px;

padding: 5px;

-moz-box-shadow: 0px 0px 10px #000;

-webkit-box-shadow: 0px 0px 10px #000;

box-shadow: 0px 0px 10px #000;

}

#header{

/*background-image:url('header.jpg');*/

background-color: blue;

height:150px;

}

#header h1{

color:#00125b;

padding:40px 0px 0px 20px;

text-shadow:#fff 1px 1px 3px;

float: left;

color: #fff;

font-family: 'Exo', sans-serif;

font-size: 35px;

font-weight: 200;

}

#header img {

padding:40px 0px 0px 20px;

float: left;

}

#silebar {

width:100%;

float:left;

border-right:1px solid #bababa;

border-bottom:1px solid #bababa;

border-left:1px solid #bababa;

border-radius: 10px;

}

#judul_silebar{

padding:3px;

text-align:center;

font-weight:bold;

border-bottom:1px solid #bababa;

/*background-image:url('header.jpg');*/

background-color: blue;

color:white;

border-radius:5px;

}

#isi_silebar ul{

list-style-type:none;

padding:0px;

margin:0px;

}

#silebar a{

display:block;

padding:5px;

border-bottom:0px solid #bababa;

text-decoration:none;

font-size: medium;

color:black;

}

#silebar a:hover{

color: #0786AB;

}

#konten{

padding:0px;

width:100%;

float:left;

font-size:11pt;

margin:5px;

border-right:1px solid #bababa;

border-bottom:1px solid #bababa;

border-top:1px solid #bababa;

border-left:1px solid #bababa;

border-radius: 10px;

}

#footer{

/*background-image:url('footer.jpg');*/

background-color: grey;

height:90px;

}

#footer #text{

color:#fff;

padding:10px;

text-align:center;

font-size:11pt;

text-shadow:#000 1px 1px 2px;

}

Berikut hasil nya

4. Buat source code typecar. Ini adalah page untuk melihat type mobil sewaan dan harga

HTML & CSS

<!DOCTYPE html>

<html>

<head>

<title>Harga Rental Car</title>

<style>

{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Arial, Helvetica, sans-serif;

}

body

{

background-color: black;

}

.badan

{

width: 1000px;

margin: auto;

margin-top: 35px;

background-color: white;

padding: 20px;

overflow: hidden;

}

.badan h2

{

color: dodgerblue;

border-bottom: 1px solid gainsboro;

margin-bottom: 20px;

}

.tabel-harga

{

float: left;

margin: 10px;

border: 1px solid gainsboro;

width: 300px;

}

.header

{

padding: 17px;

}

.header span

{

display: block;

text-align: center;

}

.paket

{

font-size: 20px;

font-weight: bold;

margin-bottom: 5px;

}

.header-gratis

{

background-color: dodgerblue;

color: white;

}

.header-premium

{

background-color:darkorange;

color: white;

}

.header-profesional

{

background-color: green;

color: white;

}

.tabel-harga ul

{

list-style-type: none;

}

.tabel-harga ul li

{

padding: 15px;

border-bottom: 1px solid gainsboro;

margin: 0 10px 0 10px;

}

.ruang-tombol

{

padding: 10px;

}

.selengkapnya

{

padding: 15px;

width: 100%;

text-decoration: none;

display: block;

font-weight: bold;

text-align: center;

letter-spacing: 1.5px;

}

.selengkapnya:hover

{

transition-duration: 0.8s;

background-color: black;

}

</style>

</head>

<body>

<h2>Paket Mobil Pilihan</h2>

<span class="paket">Paket 1 / day</span>

</div>

<ul>

<li>Avanza</li>

<li>Mobilio</li>

<li>Sigra</li>

</ul>

<a href="form.php" class="selengkapnya header-gratis">Pesan Sekarang</a>

</div>

<span class="paket">Paket 2 / day</span>

</div>

<ul>

<li>Xpander</li>

<li>Honda CRV</li>

</ul>

<a href="form.php" class="selengkapnya header-premium">Pesan Sekarang</a>

</div>

<span class="paket">Paket 3 / day</span>

</div>

<ul>

<li>Mercy</li>

<li>Innova</li>

<li>Alphard</li>

</ul>

<a href="form.php" class="selengkapnya header-profesional">Pesan Sekarang</a>

</div>

</body>

</html>

Berikut hasil nya

5. Buat source code form sewa mobil form.php. Ini adalah page form untuk pengisian data pelanggan yang akan menyewa mobil

PHP & CSS

<?php

<!DOCTYPE html>

<html>

<head>

<title>Form Pendaftaran - Ansori Web</title>

body {

margin: 0;

padding: 0;

}

* {

box-sizing: border-box;

}

form {

padding: 1em;

background: #f9f9f9;

border: 1px solid #c1c1c1;

margin-top: 2rem;

max-width: 600px;

margin-left: auto;

margin-right: auto;

padding: 1em;

}

form input {

margin-bottom: 1rem;

background: #fff;

border: 1px solid #9c9c9c;

}

form button {

background: lightgrey;

padding: 0.7em;

border: 0;

}

form button:hover {

background: green;

color: white;

}

form span a{

background: lightblue;

padding: 0.7em;

border: 0;

text-decoration: none;

color: black;

text-align: center;

}

form span a:hover {

background: blue;

color: white;

}

label {

text-align: right;

display: block;

padding: 0.5em 1.5em 0.5em 0;

}

input {

width: 100%;

padding: 0.7em;

margin-bottom: 0.5rem;

}

input:focus {

outline: 3px solid green;

}

select {

width: 100%;

padding: 0.7em;

margin-bottom: 0.5rem;

}

select:focus {

outline: 3px solid green;

}

@media (min-width: 400px) {

form {

overflow: hidden;

}

label {

float: left;

width: 200px;

}

input {

float: left;

width: calc(100% - 200px);

}

select {

float: left;

width: calc(100% - 200px);

}

button {

float: right;

width: calc(100% - 200px);

}

</style>

</head>

<body>

<h1 align="center">Formulir Sewa Mobil</h1>

<label>Nama Lengkap</label>

<label>No Identitas KTP/SIM</label>

<label>Mulai Peminjaman</label>

<label>Selesai Peminjaman</label>

<label>Type Mobil</label>

<option value="mercy">Mercy</option>

<option value="innova">Kijang Innova</option>

<option value="alphard">Alphard</option>

<option value="crv">Honda CRV</option>

<option value="xpander">Xpander</option>

<option value="avanza">Avanza</option>

<option value="sigra">Daihatsu Sigra</option>

<option value="mobilio">Honda Mobilio</option>

</select>

<label>Alamat Lengkap</label>

<button>Daftar</button>

</form>

</body>

</html>

Berikut hasil nya

6. Buat source code contact.html. Ini adalah page untuk menghubungi admin sewa mobil

CSS & HTML

<!DOCTYPE html>

<head>

<title>Contact Form - Renovasi Otak</title>

.bg{

background: radial-gradient(#0075b0 40%, #e1eec3 20%, #0075b0);

}

.contact-form{

width: 85%;

max-width: 600px;

background: #fafafa;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

padding: 30px 40px;

box-sizing: border-box;

border-radius: 8px;

text-align: center;

box-shadow: 0 0 20px #000000b3;

font-family: "Montserrat",sans-serif;

}

.contact-form h1{

margin-top: 0;

font-weight: 200;

}

.txtb{

border:1px solid gray;

margin: 8px 0;

padding: 12px 18px;

border-radius: 8px;

}

.txtb label{

display: block;

text-align: left;

color: #333;

text-transform: uppercase;

font-size: 14px;

}

.txtb input,.txtb textarea{

width: 100%;

border: none;

background: none;

outline: none;

font-size: 18px;

margin-top: 6px;

}

.btn{

display: inline-block;

background: #008cba;

padding: 14px 0;

color: white;

text-transform: uppercase;

cursor: pointer;

margin-top: 8px;

width: 100%;

}

</style>

</head>

<h1>Hubungi Kami</h1>

<label>Nama Lengkap :</label>

</div>

<label>Email :</label>

</div>

<label>Nomor HP :</label>

</div>

<label>Pesan :</label>

</div>

<a class="btn">Kirim</a>

</div>

</body>

</html>

Berikut hasil nya

7. Buat source code home.html. Ini adalah page untuk kembali ke tampilan index awal

HTML & CSS

<!DOCTYPE html>

<html>

<head>

<title>Layout Web Responsive Dengan HTML dan CSS</title>

</head>

<body>

<h1>DANU RENTAL CARS</h1>

</div>

SILEBAR

</div>

<ul>

<li><a href="mobil.html">Jenis Mobil Danu Rental Cars</a></li>

<li><a href="form.htmk">Form Sewa Mobil</a></li>

<li><a href="contact.htmk">Contact</a></li>

<li><a href="about.html">About</a></li>

</ul>

</div>

<h2>Danu Rental Cars</h2>

<p>Syarat dan Ketentuan Rental Mobil Dengan Supir di Jakarta Selatan

Sebelum booking dianjurkan untuk bertanya kepeda customer service kami untuk cek ketersedian dan kebutuhan unit apakah plat ganjil atau genap

Lokasi penjemputan dalam kota dan bandara

Supir kami akan menghubungi anda sebelum waktu jemput

Jasa Rental

Termasuk

Penggunaan dalam area DKI Jakarta (permintaan khusus untuk mobil berplat ganjil atau genap tergantung dari ketersediaan penyedia rental)

Penggunaan sampai dengan 12 jam atau hingga 23:59 di setiap hari rental

Tidak Termasuk

Bensin, parkir, tol, uang makan sopir dan tips

Biaya akomodasi sopir selama bepergian keluar kota

Penggunaan di luar area kota Jakarta (biaya tambahan berlaku)</p>

</div>

Bagian Footer

</div>

</body>

</html>

Berikut hasil nya

8. Buat source code config.php . Ini adalah page untuk membuat koneksi ke database mysql

PHP

<?php

$db_host = "localhost";

$db_name = "rentalmobil";

$db_user = "root";

$db_pass = "";

$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

9. Buat source code success.php . Ini adalah page untuk menampilkan hasil setelah mengisi form sewa mobil

PHP

<?php

require 'config.php';

if ($conn->query($sql) === TRUE) {

// echo "New record created successfully";

<!DOCTYPE html>

<html>

<head>

<title>Pendaftaran Berhasil!</title>

body {

margin: 0;

padding: 0;

}

* {

box-sizing: border-box;

}

form {

padding: 1em;

background: #f9f9f9;

border: 1px solid #c1c1c1;

margin-top: 2rem;

max-width: 600px;

margin-left: auto;

margin-right: auto;

padding: 1em;

}

form input {

margin-bottom: 1rem;

background: #fff;

border: 1px solid #9c9c9c;

}

form button {

background: lightgrey;

padding: 0.7em;

border: 0;

}

form button:hover {

background: green;

color: white;

}

form span a{

background: lightblue;

padding: 0.7em;

border: 0;

text-decoration: none;

color: black;

text-align: center;

}

form span a:hover {

background: blue;

color: white;

}

label {

text-align: right;

display: block;

padding: 0.5em 1.5em 0.5em 0;

}

input {

width: 100%;

padding: 0.7em;

margin-bottom: 0.5rem;

}

input:focus {

outline: 3px solid green;

}

select {

width: 100%;

padding: 0.7em;

margin-bottom: 0.5rem;

}

select:focus {

outline: 3px solid green;

}

@media (min-width: 400px) {

form {

overflow: hidden;

}

label {

float: left;

width: 200px;

}

input {

float: left;

width: calc(100% - 200px);

}

select {

float: left;

width: calc(100% - 200px);

}

button {

float: right;

width: calc(100% - 200px);

}

</style>

</head>

<body>

<form>

<h1>Pendaftaran Kamu Berhasil!</h1>

<p>

Nama Lengkap: <?php echo $_POST["nama_lengkap"]; ?><br>

NO KTP: <?php echo $_POST["no_id"]; ?><br>

Mulai Peminjaman: <?php echo $_POST["start_peminjaman"]; ?><br>

Selesai Peminjaman: <?php echo $_POST["end_peminjaman"]; ?><br>

Type Mobil: <?php echo $_POST["type_mobil"]; ?><br>

Alamat Lengkap: <?php echo $_POST["alamat"]; ?><br>

E-mail: <?php echo $_POST["email"]; ?><br>

No.HP: <?php echo $_POST["no_hp"]; ?>

</p>

</form>

</body>

</html>

<?php

} else {

// echo "<script>alert('Pengisian form terjadi kendala!, cobalah beberapa saat lagi!.'); window.location = './form.php'</script>";

echo "Error: " . $sql . "<br>" . $conn->error;

}

$conn->close();

Berikut hasil nya

THANKS

Jaringan & OS

JAVA WEB UAS

0 Response to "JAVA WEB UAS "

Post a Comment