Assalamualaikum Wr. Wb.
Hari ini saya mencoba memodifikasi tampilan login CMS lokomedia.
Tutorial :
1. Download dulu tema login nya kemudian di ekstrak dan hasil extrakan nya di copy di letakan di folder lokomet di dalam folder adminweb saya sudah download dengan nama lumino .
2. Buka folder adminweb kemudian klik file index.php buka dengan text editor atau sublime text editor.
3. Buka folder lumino yang di dalam folder adminweb kemudian klik file login.html buka dengan text editor atau sublime text editor.
4. Isi file index.php di hapus di ganti dengan isi file login.html kemudian di sisipkan script di bawah ini.
a. Script ini di letakan di atas sendiri.
<?php
session_start();
// Apabila user belum login
if (empty($_SESSION['username']) AND empty($_SESSION['passuser']))
?>
b. Setelah itu sesuaikan bagian formnya seperti gambar di bawah ini.
Script awal :
Script akhir :
5. Bila anda bingung ini script awal sampai akhirnya yang ada di index.php.
<?php
session_start();
// Apabila user belum login
if (empty($_SESSION['username']) AND empty($_SESSION['passuser']))
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forms</title>
<link href="css2/bootstrap.min.css" rel="stylesheet">
<link href="css2/datepicker3.css" rel="stylesheet">
<link href="css2/styles.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link href="css/style_login.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-validation.js"></script>
</head>
<body Onload="document.login.username.focus();">
<body>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">Log in</div>
<div class="panel-body">
<form role="form" method="POST" action="cek_login.php">
<fieldset>
<div class="form-group" >
<input class="form-control" placeholder="username" name="username" type="username" autofocus="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<div class="submit"><button type="submit">Login</button></div>
</fieldset>
</form>
</div>
</div>
</div><!-- /.col-->
</div><!-- /.row -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chart.min.js"></script>
<script src="js/chart-data.js"></script>
<script src="js/easypiechart.js"></script>
<script src="js/easypiechart-data.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script>
!function ($) {
$(document).on("click","ul.nav li.parent > a > span.icon", function(){
$(this).find('em:first').toggleClass("glyphicon-minus");
});
$(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}(window.jQuery);
$(window).on('resize', function () {
if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
})
$(window).on('resize', function () {
if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
})
</script>
</body>
</html>
Hasilnya seperti ini :
Sekian dari saya selamat mencoba semoga berhasil.
Wassalamualaikum Wr. Wb.
0 komentar:
Posting Komentar