Assalamualaikum wr.wb
oke bertemu lagi dengan saya kali inii saya akan sharing tentang cara buat frontend kasir.
B. Latar belakang
kasir itu penting buat cara pembelian penarikan apalagi saat di restoran-restoran dan ini saya mau sharing tentang cara buat kasir frontend yang backend kapan2 ya...
C. Maksud dan tujuan
bagaiman cara buat layout kasir digital denga html dan css
D. pelaksanaan
1. buat folder kasir
2. buat file index.html dan style.css
berikut ini codingan index.html nya.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<meta charset="UTF-8">
<title>KASIR</title>
</head>
<body>
<div class="header">
<h1 class="nama-judul">KASIR</h1>
<div class="container">
<table border="2" width="100%" style="text-align: center; background-color: #780308; color: white;">
<tr>
<td>NAMA MAKANAN</td>
<td>JUMLAH MAKANAN</td>
<td>NOMER MEJA</td>
<td>HARGA</td>
<td>TOTAL HARGA</td>
<td style="background-color: green;" width="120px"><a href="#"><img src="delete.png" width="20px" height="20px;"></a>
<td style="background-color: blue;" width="120px;"><a href="#"><img src="teks.png" width="20px;" height="20px;"></a>
</td>
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<meta charset="UTF-8">
<title>KASIR</title>
</head>
<body>
<div class="header">
<h1 class="nama-judul">KASIR</h1>
<div class="container">
<table border="2" width="100%" style="text-align: center; background-color: #780308; color: white;">
<tr>
<td>NAMA MAKANAN</td>
<td>JUMLAH MAKANAN</td>
<td>NOMER MEJA</td>
<td>HARGA</td>
<td>TOTAL HARGA</td>
<td style="background-color: green;" width="120px"><a href="#"><img src="delete.png" width="20px" height="20px;"></a>
<td style="background-color: blue;" width="120px;"><a href="#"><img src="teks.png" width="20px;" height="20px;"></a>
</td>
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
ini gambarnya
ini style.css nya :
.header {
width: 100%;
height: 55px;
background-color: #780308;
box-shadow: 2px 3px 4px grey;
padding-top: 10px;
padding-bottom: 10px;
}
body {
margin: 0px;
padding: 0px;
}
h1.nama-judul{
color: #e9cc9d;
font-weight: bold;
line-height: 12px;
padding-left: 10px;
}
.container {
background-color: #e9cc9d;
width: 1350px;
height: 449px;
box-shadow: 2px 3px 4px grey;
margin: 47px auto;
}
a {
text-decoration:none;
color: orange;
}
width: 100%;
height: 55px;
background-color: #780308;
box-shadow: 2px 3px 4px grey;
padding-top: 10px;
padding-bottom: 10px;
}
body {
margin: 0px;
padding: 0px;
}
h1.nama-judul{
color: #e9cc9d;
font-weight: bold;
line-height: 12px;
padding-left: 10px;
}
.container {
background-color: #e9cc9d;
width: 1350px;
height: 449px;
box-shadow: 2px 3px 4px grey;
margin: 47px auto;
}
a {
text-decoration:none;
color: orange;
}
lihat hasilnya
G. Waktu pelaksanaan
1,5 jam
H. kesimpulan
itu adalah tampilan frontend kasir yang sederhana
G. masalah
1. saat mau buat tataletak delete dan complete gak pass dengan tablenya
2. belum responsive masih awur2 ran.
H. Penutup
oke sekian dari saya bila ada kesalahan saya minta maaf dan semoga bermanfaat
Wassalamualaikum wr.wb
 kasir di restoran){kind=link}
0 Comments
silahkan berkomentar tentang template ini