Scribd
Upload
34 views6 pages

JavaScript Login and Order Form

The document contains code for a login script, CSS stylesheet, HTML form, and JavaScript functions for an online food ordering system. The login script checks for a hardcoded username and password. The CSS styles various page elements. The HTML form allows selecting food items and quantities. JavaScript functions calculate total price, apply discounts, and reset the form.

Uploaded by

Dede Nita
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views6 pages

JavaScript Login and Order Form

The document contains code for a login script, CSS stylesheet, HTML form, and JavaScript functions for an online food ordering system. The login script checks for a hardcoded username and password. The CSS styles various page elements. The HTML form allows selecting food items and quantities. JavaScript functions calculate total price, apply discounts, and reset the form.

Uploaded by

Dede Nita
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

SCRIPT LOGIN

<html>
<script language="JavaScript">
function Login(){
var user = [Link]("username).value;
var pass = [Link]("password).value;

if (user=="admin" && passw=="123"){


alert("Selamat anda berhasil login");
}else{
alert("Username dan password anda salah!");
}
}
</script>

<body>
<form>
<table width="225" cellpadding="4">
<tr>
<td>Username</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" id="password"></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="button" value="Login"
onClick="Login()"></td>
</tr>
</table>
</form>
</body>
</html>
CSS PEMESANAN
body {
margin: 50px auto;
width: 700px;
height: 500px;
background-image: url([Link]);
}

header,section,footer,logo {
display: block;
}

header {
height: 100px;
background-color: #6d6c6c;
text-align: center;
}

logo{
float: left;
height: 80px;
width: 80px;
margin: 10px 10px 10px 50px;
border: 1px solid black;
}

judul {
font-family: crackman;
font-size: 20px;
color: white;
font-weight: bold;
float: left;
margin: 50px 10px 10px 10px;
}

section {
height: 350px;
background-color: #d6d3d3;
padding: 10px;
}

footer {
clear: both;
height: 20px;
background-color: #6d6c6c;
text-align: center;
color: white;
}
HTML PEMESANAN
<!DOCTYPE html>
<html lang="en">

<head>
<title>Form Pemesanan Makanan</title>
<link rel="stylesheet" href="[Link]" type="text/css" />
<link rel="shortcut icon" href="[Link]" />
<script type="text/javascript" src="[Link]"></script>
</head>

<body>

<header>
<logo><img src="[Link]" height=80px width=80px></logo>
<judul>Form Pemesanan Berbasis JavaScript</judul>
</header>

<section>
<form name="pemesanan" action="#">
<table cellpadding=3 border=1>
<tr>
<th width=30>No.</th>
<th width=280>Makanan/Minuman</th>
<th width=120>Harga</th>
<th width=200>Jumlah Pesan</th>
</tr>

<tr>
<td> 1.</td>
<td>Bakso Istimewa</td>
<td>@ Rp. <input type="text" name="harga1" value="12000"
size=5 readonly></td>
<td><center><input type="text" name="jumlah1"
onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>

<tr>
<td> 2.</td>
<td>Soto Spesial</td>
<td>@ Rp. <input type="text" name="harga2" value="10000"
size=5 readonly></td>
<td><center><input type="text" name="jumlah2"
onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>

<tr>
<td> 3.</td>
<td>Mie Ayam Super</td>
<td>@ Rp. <input type="text" name="harga3" value="15000"
size=5 readonly></td>
<td><center><input type="text" name="jumlah3"
onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>

<tr>
<td> 4.</td>
<td>Es Degan</td>
<td>@ Rp. <input type="text" name="harga4" value="5000"
size=5 readonly></td>
<td><center><input type="text" name="jumlah4"
onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>

<tr>
<td> 5.</td>
<td>Es Campur</td>
<td>@ Rp. <input type="text" name="harga5" value="7000"
size=5 readonly></td>
<td><center><input type="text" name="jumlah5"
onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>

<tr>
<td colspan=3 align="right">JUMLAH TOTAL</td>
<td><center>Rp. <input type="text" name="total" size=8
style="text-align:center" readonly></center></td>
</td>

<tr>
<td colspan=3 align="right">DISKON</td>
<td><center>Rp. <input type="text" name="potongan" size=8
style="text-align:center" readonly></center></td>
</td>

<tr>
<td colspan=3 align="right">JUMLAH BAYAR</td>
<td><center>Rp. <input type="text" name="bayar" size=8
style="text-align:center" readonly></center></td>
</td>

</table>
<br />
<center><input type="button" value="BATAL" onclick="batal()"
/></center>
</form>
</section>

<footer>&copy; Alivi Nur Rosida</footer>


</body>
</html>
JAVASCRIPT

function HargaTotal() {
var myForm = [Link];
var total1;
var total2;
var total3;
var total4;
var total5;
var jumlah1 = parseInt([Link]);
var jumlah2 = parseInt([Link]);
var jumlah3 = parseInt([Link]);
var jumlah4 = parseInt([Link]);
var jumlah5 = parseInt([Link]);

if([Link] == "") jumlah1=0;


if([Link] == "") jumlah2=0;
if([Link] == "") jumlah3=0;
if([Link] == "") jumlah4=0;
if([Link] == "") jumlah5=0;

total1 = parseInt([Link])*jumlah1;
total2 = parseInt([Link])*jumlah2;
total3 = parseInt([Link])*jumlah3;
total4 = parseInt([Link])*jumlah4;
total5 = parseInt([Link])*jumlah5;

[Link] = total1 + total2 + total3 + total4 + total5;


}

function diskon() {
var myForm = [Link];

if([Link] < 50000) {


[Link] = 0;
}
else {
[Link] = 10000;
}
}

function TotalBayar() {
var myForm = [Link];

[Link] = parseInt([Link]) -
parseInt([Link]);
}

function proses() {
HargaTotal();
diskon();
TotalBayar();
}
function batal() {
var element = [Link];

[Link] = "";
[Link] = "";
[Link] = "";
[Link] = "";
[Link] = "";
[Link] = "";
[Link] = "";
[Link] = "";
}

You might also like