Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
20 views8 pages

Manual Book Iot3

Uploaded by

sdakotapro2024

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.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

Manual Book Iot3

Uploaded by

sdakotapro2024
20 views8 pages
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.

Original Title

MANUAL BOOK IOT3

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

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.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
20 views8 pages

Manual Book Iot3

Uploaded by

sdakotapro2024
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.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
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