- Jalankan apache dan mysql di xampp, jika belum tau coba liat di artikel sebelumnya Klik Disini.
- Download bootstrap di sini
- Buat folder latihan di folder htdocs, seperti contoh dibawah ini :Buat folder latihan di folder htdocs, seperti contoh dibawah ini :
C:\xampp\htdocs\latihan
- extract file bootstrap, dan copy di C:\xampp\htdocs\latihan\bootstrap\
- Lalu buat file dengan nama login.php di C:\xampp\htdocs\latihan\, isikan file dengan coding dibawah ini :
<html>
<head>
<!-- fungsi head untuk mendeskripsikan web, membuat title, meload data css atau js -->
<title>Latihan</title>
<!-- membuat judul web -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<!-- load file css yang ada di folder css -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- load file css yang ada di folder css -->
</head>
<body><!-- memuat isi dari web -->
<div class="container">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
<img id="profile-img" class="profile-img-card" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" />
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST" action="function/doLogin.php">
<span id="reauth-email" class="reauth-email"></span>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button>
</form><!-- /form -->
</div><!-- /card-container -->
</div>
</body>
<script src="js/custom.js"></script>
</html>
- Lalu buat file dengan nama register.php di C:\xampp\htdocs\latihan\, isikan file dengan coding dibawah ini :
<html>
<head>
<!-- fungsi head untuk mendeskripsikan web, membuat title, meload data css atau js -->
<title>Latihan</title>
<!-- membuat judul web -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<!-- load file css yang ada di folder css -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- load file css yang ada di folder css -->
</head>
<body><!-- memuat isi dari web -->
<div class="container">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST" action="function/doRegister.php">
<span id="reauth-email" class="reauth-email"></span>
<input type="text" id="nama" name="nama" class="form-control" placeholder="Nama Lengkap" required autofocus>
<input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
<input type="password" id="password" name="password" class="form-control" placeholder="Password" required autofocus>
<input type="email" id="email" name="email" class="form-control" placeholder="Email address" required autofocus>
<input type="text" id="telpon" name="telpon" class="form-control" placeholder="No Handphone" required>
<button class="btn btn-danger btn-block btn-signin" href="register.php">Register</button>
<p>Already Have an Account?</p>
<a class="btn btn-success btn-block" href="login.php">Login Here</a>
</form><!-- /form -->
</div><!-- /card-container -->
</div>
</body>
<script src="js/custom.js"></script>
</html>
- buat folder css dan js di folder latihan
- buat file didalam folder css tadi dengan nama style.css, dan isikan code berikut :
/*
* Specific styles of signin component
*/
/*
* General styles
*/
body, html {
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));
}
.card-container.card {
max-width: 350px;
padding: 40px 40px;
}
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
/*
* Card component
*/
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*
* Form styles
*/
.profile-name-card {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px 0 0;
min-height: 1em;
}
.reauth-email {
display: block;
color: #404040;
line-height: 2;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
direction: ltr;
height: 44px;
font-size: 16px;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
border-color: rgb(104, 145, 162);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}
.btn.btn-signin {
/*background-color: #4d90fe; */
background-color: rgb(104, 145, 162);
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
}
.forgot-password {
color: rgb(104, 145, 162);
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
color: rgb(12, 97, 33);
}
- buat file didalam folder js dengan nama custom.js, dan isikan dengan code berikut :
$( document ).ready(function() {
// DOM ready
// Test data
/*
* To test the script you should discomment the function
* testLocalStorageData and refresh the page. The function
* will load some test data and the loadProfile
* will do the changes in the UI
*/
// testLocalStorageData();
// Load profile if it exits
loadProfile();
});
/**
* Function that gets the data of the profile in case
* thar it has already saved in localstorage. Only the
* UI will be update in case that all data is available
*
* A not existing key in localstorage return null
*
*/
function getLocalProfile(callback){
var profileImgSrc = localStorage.getItem("PROFILE_IMG_SRC");
var profileName = localStorage.getItem("PROFILE_NAME");
var profileReAuthEmail = localStorage.getItem("PROFILE_REAUTH_EMAIL");
if(profileName !== null
&& profileReAuthEmail !== null
&& profileImgSrc !== null) {
callback(profileImgSrc, profileName, profileReAuthEmail);
}
}
/**
* Main function that load the profile if exists
* in localstorage
*/
function loadProfile() {
if(!supportsHTML5Storage()) { return false; }
// we have to provide to the callback the basic
// information to set the profile
getLocalProfile(function(profileImgSrc, profileName, profileReAuthEmail) {
//changes in the UI
$("#profile-img").attr("src",profileImgSrc);
$("#profile-name").html(profileName);
$("#reauth-email").html(profileReAuthEmail);
$("#inputEmail").hide();
$("#remember").hide();
});
}
/**
* function that checks if the browser supports HTML5
* local storage
*
* @returns {boolean}
*/
function supportsHTML5Storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
/**
* Test data. This data will be safe by the web app
* in the first successful login of a auth user.
* To Test the scripts, delete the localstorage data
* and comment this call.
*
* @returns {boolean}
*/
function testLocalStorageData() {
if(!supportsHTML5Storage()) { return false; }
localStorage.setItem("PROFILE_IMG_SRC", "//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" );
localStorage.setItem("PROFILE_NAME", "César Izquierdo Tello");
localStorage.setItem("PROFILE_REAUTH_EMAIL", "oneaccount@gmail.com");
}
- Coba jalankan web nya di browser dengan mengetik localhost/latihan/login.php atau 127.0.0.1/latihan/login.php, maka akan seperti dibawah ini.