pertama-tama buat index html dengan nama
"index.php"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Forest</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div class="container">
<header>
<img src="images/logo.jpg">
</header>
<menu>
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="upload.php">Portofolio</a></li>
<li><a href="bootstrap.php">Gallery</a></li>
<li><a href="">Service</a></li>
<li><a href="maps.php">Maps</a></li>
</ul>
</menu>
<article>
<div class="left">
<h1>about us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed feugiat orci, eu luctus orci. Morbi tristique lorem non bibendum lobortis. Etiam nec condimentum ante. Vivamus non tempor diam. Etiam orci nunc, luctus eget tortor eu, fermentum tempus elit. Aenean euismod, tortor at tempus malesuada, erat neque venenatis nunc, eu dapibus magna libero ac tortor. Mauris vitae risus libero. Proin sit amet mauris sem.</p>
<h1>Chat With Us</h1>
<a href="ymsgr:sendIM?kaslim.pane@yahoo.com"><img src= "http://opi.yahoo.com/online?u=kaslim.pane@yahoo.com&m=9&t=14&l=us" /></a>
<a href="ymsgr:sendIM?kaslim.pane@yahoo.com"><img src="http://opi.yahoo.com/online?u=kaslim.pane@yahoo.com&m=9&t=14&l=us" /></a>
<a href="dorisfebrianda93@gmail.com"><img src=""
<html>
<body>
<iframe width="310" height="235" src="https://www.youtube.com/watch?v=nzf2pSnsuZs">
</iframe>
</html>
</body>
</div>
<div class="right">
<div class="top">
<h1>Our Product</h1>
<img src="images/game.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed feugiat orci, eu luctus orci. Morbi tristique lorem non bibendum lobortis. Etiam nec condimentum ante. Vivamus non tempor diam. Etiam orci nunc, luctus eget tortor eu, fermentum tempus elit. Aenean euismod, tortor at tempus malesuada, erat neque venenatis nunc, eu dapibus magna libero ac tortor. Mauris vitae risus libero. Proin sit amet mauris sem.</p>
</div>
<div class="bottom">
<div class="bottomleft">
<h1>Contact US</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed feugiat orci, eu luctus orci. Morbi tristique lorem non bibendum lobortis. Etiam nec condimentum ante. Vivamus non tempor diam. Etiam orci nunc, luctus eget tortor eu, fermentum tempus elit.</p>
</div>
<div class="bottomright">
<h1>social Media</h1>
<img src="images/icon.jpg"
</div>
</div>
</article>
<footer>
Copyright © 2017 | <a href="https://dorisfebrianda93.blogspot.com/">Doris Febrianda</a>
</footer>
</div>
</body>
</html>
home.php
<form action="register.php" method="post">
<div class="container">
<h1>Register</h1>
<link href="style/coba.css" rel="stylesheet" type="text/css">
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>username</b></label>
<input type="text" placeholder="username" name="username" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
login.php
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Register</h2>
</div>
<form method="post" action="register.php">
<?php include('errors.php'); ?>
<div class="input-group">
<label>Username</label>
<input type="text" name="username" value="<?php echo $username; ?>">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="<?php echo $email; ?>">
</div>
<div class="input-group">
<button type="submit" class="btn" name="reg_user">Register</button>
</div>
</form>
</body>
</html>
maps.php
<html>
<head>
<title>Google Map - Harviacode.com</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 300px;"></div>
<script type="text/javascript">
// menentukan koordinat titik tengah peta
var myLatlng = new google.maps.LatLng(-6.2196368,106.8315402,17);
// pengaturan zoom dan titik tengah peta
var myOptions = {
zoom: 13,
center: myLatlng
};
// menampilkan output pada element
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// menambahkan marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Monas"
});
</script>
</body>
</html>
register.php untuk request regitrasi dan data masuk kedatabase ,
<?php
include "server.php";
$username = $_REQUEST['username'];
$email = $_REQUEST['email'];
$psw = $_REQUEST['psw'];
$pswrepeat = $_REQUEST['psw-repeat'];
// $conn = mysqli_connect($host, $user, $pass, $db) or die ("Koneksi gagal");
$mysqli = "INSERT INTO register (username, email, password, confrim_password) VALUES ('$username', '$email', '$psw', '$pswrepeat')";
$result = mysqli_query($conn, $mysqli);
header('Location: sukses.php');
mysqli_close($conn);
?>
server.php ini untuk connection ke database
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db ="game";
// Create connection
$conn = mysqli_connect($servername, $username, $password ,$db);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>
setelah registrasi sukses akan ada notifikasi sukses
beri nama "sukses.php"
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="text-align:center">Sukses Bayarin Kali 5 jt aja</div>
setelah berhasil buat folder di tempat coding berada , dan penamaan nya style
dan setelah itu buat file css dan save di dalam stlye
berinama css dengan style.css
* {padding: o; margin:0;}
body {background: #95a5a6; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
.container {width: 900px; margin:auto;}
/*HEADER*/
header {height: 100px; }
header img {margin-top: 20px;}
/*Menu*/
menu {height:50px; margin-bottom:25px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,d8113f+0,fc0730+100 */
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #d8113f 0%, #fc0730 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #87e0fd 0%,#d8113f 0%,#fc0730 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #87e0fd 0%,#d8113f 0%,#fc0730 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#fc0730',GradientType=0 ); /* IE6-9 */
}
menu li {list-style:none; }
menu li a {text-decoration: none; color:#FFF; padding: 0 25px; border-right: 1px solid #AF0A0D; float:left; line-height: 50px;}
menu li a:hover {background-color:#000000;}
/*ARTICLE*/
article {overflow:hidden;}
article h1 {color:#333; margin-bottom:10px; font-size:20px;}
article p {line-height:20px; font-size:12px; margin-bottom:10px; }
article .left {width: 300px; float:left;}
article .right {width: 580px; float:right;}
article .right .top {margin-bottom:20px;}
article .right .bottom {overflow:hidden;}
article .right .bottom .bottomleft {width: 280px; float:left;}
article .right .bottom .bottomright {width: 280px; float:right;}
article .right .bottom .bottomright img {width: 150px;}
/*FOOTER*/
footer {height:40px; background-color:#D8002B; color:#FFF; line-height:40px;text-align:center; font-size:12px;}
footer a {color:#FFF; text-decoration: none;}
buatstructure database seperti ini , buat dbname dengan game dan field register
buat field dengan nama : username , email , password , dan confirm_password seperti gambar dibawah ini :
ini adalah tampilan website nya:
seteleh klik menu home pada website
setelah klik menu maps pada website , sorry gelap soalnya trial :D
untuk image wesite silahkan download di link ini :
https://dorisfebrianda93.blogspot.com/2018/11/image-website-game.html
