Assalamualaikum Wr. Wb.
Hari ini saya mencoba memodifikasi template login administrator pada CMS ppdb online yang sudah saya install berikut tutorialnya.
Tutorial :
1. Download dulu template login nya contoh saya download di link ini https://colorlib.com/wp/html5-and-css3-login-forms/
2. Kemudian extrak folder hasil anda download tadi lalu copykan ke file direktory /var/www/html/ppdb_online/user
3. setelah itu buka script index.html dengan text editor atau sublime text editor dari folder download tadi.
4. Buka file index.php dengan text editor atau sublime text editor di folder user
5. Kemudian isi file index.php di hapus dan di ganti isi file index.html.
6. Setelah itu sisipkan script di bawah ini di file index.php yang sudah di isi dengan isi file index.html.
a. Saya mengambil script ini dari index.php yang pertama atau yang belum di ganti dengan isi index.html
b. Edit di bagian form nya seperti ini.
7. Jangan lupa pada folder yang sudah anda download tadi di dalamnya ada folder bernama css dan js itu gantilah namanya menjadi css2 dan js2 kemudian copykan ke folder user
8. Berikut ini script dari awal hingga akhir pada index.php.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Login form using HTML5 and CSS3</title>
<link rel="stylesheet" href="css2/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>...:::Imago Media | Blog Serba Ada::......</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#login').submit(function(){
var u = jQuery('#username').val();
var p = jQuery('#password').val();
if(u == '' && p == '') {
jQuery('.login-alert').fadeIn();
return false;
}
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="container">
<section id="content">
<div class="logo animate0 bounceIn"><img src="images/logo.png" width="200" alt="" /></div>
<form id="login" action="cek_login.php" method="post" />
<h1>Login Form</h1>
<div>
<input type="text" name="username" id="username" placeholder="Enter any username" />
</div>
<div>
<input type="password" name="password" id="password" placeholder="Enter any password" />
</div>
<div>
<button name="submit">Sign In</button>
</div>
</form><!-- form -->
<!-- button -->
</section><!-- content -->
</div><!-- container -->
<div class="loginfooter">
<p>© 2014. Imago Media 08174136638</p>
</div>
</body>
<script src="js2/index.js"></script
</body>
</html>
9. Kemudian kita coba hasilnya di web browser.
a. Bila hasilnya seperti ini.
b. Tambahkan script ini di bawah <body> pada file index.php
10. Kemudian hasilnya akan seperti ini.
Sekian dulu dari saya semoga bermanfaat bagi anda semua.
Wassalamualaikum Wr. Wb.
Hari ini saya mencoba memodifikasi template login administrator pada CMS ppdb online yang sudah saya install berikut tutorialnya.
Tutorial :
1. Download dulu template login nya contoh saya download di link ini https://colorlib.com/wp/html5-and-css3-login-forms/
2. Kemudian extrak folder hasil anda download tadi lalu copykan ke file direktory /var/www/html/ppdb_online/user
3. setelah itu buka script index.html dengan text editor atau sublime text editor dari folder download tadi.
4. Buka file index.php dengan text editor atau sublime text editor di folder user
5. Kemudian isi file index.php di hapus dan di ganti isi file index.html.
6. Setelah itu sisipkan script di bawah ini di file index.php yang sudah di isi dengan isi file index.html.
a. Saya mengambil script ini dari index.php yang pertama atau yang belum di ganti dengan isi index.html
7. Jangan lupa pada folder yang sudah anda download tadi di dalamnya ada folder bernama css dan js itu gantilah namanya menjadi css2 dan js2 kemudian copykan ke folder user
8. Berikut ini script dari awal hingga akhir pada index.php.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Login form using HTML5 and CSS3</title>
<link rel="stylesheet" href="css2/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>...:::Imago Media | Blog Serba Ada::......</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#login').submit(function(){
var u = jQuery('#username').val();
var p = jQuery('#password').val();
if(u == '' && p == '') {
jQuery('.login-alert').fadeIn();
return false;
}
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="container">
<section id="content">
<div class="logo animate0 bounceIn"><img src="images/logo.png" width="200" alt="" /></div>
<form id="login" action="cek_login.php" method="post" />
<h1>Login Form</h1>
<div>
<input type="text" name="username" id="username" placeholder="Enter any username" />
</div>
<div>
<input type="password" name="password" id="password" placeholder="Enter any password" />
</div>
<div>
<button name="submit">Sign In</button>
</div>
</form><!-- form -->
<!-- button -->
</section><!-- content -->
</div><!-- container -->
<div class="loginfooter">
<p>© 2014. Imago Media 08174136638</p>
</div>
</body>
<script src="js2/index.js"></script
</body>
</html>
9. Kemudian kita coba hasilnya di web browser.
a. Bila hasilnya seperti ini.
10. Kemudian hasilnya akan seperti ini.
Sekian dulu dari saya semoga bermanfaat bagi anda semua.
Wassalamualaikum Wr. Wb.
