Scribd
Upload
24 views

Manual Book Iot3

The document contains PHP code for inserting data into a database table, displaying a login form, and code for displaying a map with pop-up information windows on various locations.

Uploaded by

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

Manual Book Iot3

The document contains PHP code for inserting data into a database table, displaying a login form, and code for displaying a map with pop-up information windows on various locations.

Uploaded by

sdakotapro2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

$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;
background-color: #ADD8E6;
color: black;
text-align: center;
border-radius: 90px;
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;
border-style: solid;
border-color: #ADD8E6 transparent transparent transparent;
}

#csvg_merpati {
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 770px;
left: 1220px;
border: none;
}

/* merpati--------------------------------- */
.popup .popuptext-merpati {
visibility: hidden;
width: 120px;
background-color: #ADD8E6;
color: black;
text-align: center;
border-radius: 90px;
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;
border-style: solid;
border-color: #ADD8E6 transparent transparent transparent;
}

#csvg_kedunggaleng {
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 1765px;
left: 1040px;
border: none;
}

/* Kedunggaleng ----------------------------------- */
.popup .popuptext-kedunggaleng {
visibility: hidden;
width: 150px;
background-color: #ADD8E6;
color: black;
text-align: center;
border-radius: 90px;
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;
border-style: solid;
border-color: #ADD8E6 transparent transparent transparent;
}

#csvg_legundi{
position:absolute;
height: 40px;
width: 40px;
padding: 2px;
top: 1275px;
left: 440px;
border: none;
}
/* legundi ----------------------------------- */
.popup .popuptext-legundi {
visibility: hidden;
width: 120px;
background-color: #ADD8E6;
color: black;
text-align: center;
border-radius: 90px;
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;
border-style: solid;
border-color: #ADD8E6 transparent transparent transparent;
}

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;
}

You might also like