Manual Book Iot3

$perintah = "INSERT INTO debit VALUES ('" .
$id . "','".
$nba . "','" .
$ha . "');";
$hasil = mysqli_query($dbc, $perintah);

if (! $hasil)
print("Gagal menyimpan data...");
else
print("Data berhasil disimpan...");
exit ();
?>
//--------------------------------------------------
c. File dengan nama “Login.html”
/*--------------------------------------------------------------*/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 50%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
@media screen and (max-width: 300px) {

span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form action="tampilmap.php" method="post">

<div class="imgcontainer">
<img src="" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="pemakai" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password"
required>
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
/*--------------------------------------------------------------*/
d. File dengan nama ”tampilmap.php”:
/*--------------------------------------------------------------*/
<html>
<head>
<style>
#div1 {
position: absolute;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border: none;
opacity: 0;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .3s ease;
background-color: clear;
}
/* Popup container */
.popup {
position: absolute;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 0px;
higth: 0px;
}
#csvg_umbul {
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 670px;
left: 680px;
border: none;
}
/* umbul----------------------------------- */
.popup .popuptext-umbul {
visibility: hidden;
width: 120px;
background-color: #ADD8E6;
color: black;
text-align: center;
border-radius: 90px;
padding: 15px 0;
position: absolute;
z-index: 1;
top: 520px;/*koordinat letak popup*/
left: 700px;/*koordinat letak popup*/
margin-left: -60px;
}
/* Popup arrow */
.popup .popuptext-umbul::after {
content: "";
position: absolute;
top: 84%;
left: 50%;
margin-left: -45px;
border-width: 45px;
border-style: solid;
border-color: #ADD8E6 transparent transparent transparent;
}
#csvg_kasbah {
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 670px;
left: 747px;
border: none;
}
/* kasbah--------------------------------- */
.popup .popuptext-kasbah {
visibility: hidden;
width: 120px;
color: black;
text-align: center;
padding: 15px 0;
position: absolute;
z-index: 2;
top: 520px;
left: 770px;
margin-left: -60px;
}
/* Popup arrow */
.popup .popuptext-kasbah::after {
content: "";
position: absolute;
top: 84%;
left: 50%;
margin-left: -45px;
border-width: 45px;
}
#csvg_merpati {
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 770px;
left: 1220px;
border: none;
}
/* merpati--------------------------------- */
.popup .popuptext-merpati {
visibility: hidden;
width: 120px;
color: black;
text-align: center;
padding: 15px 0;
position: absolute;
z-index: 1;
top: 620px;
left: 1245px;
margin-left: -60px;
}
/* Popup arrow */
.popup .popuptext-merpati::after {
content: "";
position: absolute;
top: 84%;
left: 50%;
margin-left: -45px;
border-width: 45px;
}
#csvg_kedunggaleng {
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 1765px;
left: 1040px;
border: none;
}
/* Kedunggaleng ----------------------------------- */
.popup .popuptext-kedunggaleng {
visibility: hidden;
width: 150px;
color: black;
text-align: center;
padding: 30px 0;
position: absolute;
z-index: 1;
top: 1580px;
left: 1060px;
margin-left: -75px;
}
/* Popup arrow */
.popup .popuptext-kedunggaleng::after {
content: "";
position: absolute;
top: 85%;
left: 50%;
margin-left: -55px;
border-width: 55px;
}
#csvg_legundi{
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 1275px;
left: 440px;
border: none;
}
/* legundi ----------------------------------- */
.popup .popuptext-legundi {
visibility: hidden;
width: 120px;
color: black;
text-align: center;
padding: 15px 0;
position: absolute;
z-index: 1;
top: 1130px;
left: 465px;
margin-left: -60px;
}
/* Popup arrow */
.popup .popuptext-legundi::after {
content: "";
position: absolute;
top: 84%;
left: 50%;
margin-left: -45px;
border-width: 45px;
}
a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
.popup:hover{
opacity: 0.8;
color: white;
}

Manual Book Iot3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Book Iot3

Uploaded by

Copyright:

Available Formats

$perintah = "INSERT INTO debit VALUES ('" .

$hasil = mysqli_query($dbc, $perintah);

@media screen and (max-width: 300px) {

<form action="tampilmap.php" method="post">

You might also like