Assalamualaikum Wr-Wb.
"Hai semua, kembali lagi di blog saya, kali ini saya akan berbagi ilmu sedikit tentang membangun halaman login CMS lokomedia.
CMS LOKOMEDIA adalah salah satu CMS (Contebt Management System) buatan anak negeri yang tak kalah menarik seperti CMS yang lainnya. Kalian dapat menggunakan untuk web Instansi sekolah maupun web pribadi, Karena CMS ini cocok digunakan untuk beberapa keperluan yang mana tersedia beberapa modul yang siap pakai.
1. buat sebuah file. di sini saya membuat sebuah file dengan nama index.php
index.php
~> Setelah itu kita buat skripnya.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Halaman Login</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<head>
</head>
<body>
<style>
body{
background-image: url(assets/fonts/12.jpeg);
}
</style>
<div class="col-md-4 col-md-offset-4 form-login">
<?php
/* handle error */
if (isset($_GET['error'])) : ?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> <?=base64_decode($_GET['error']);?>
</div>
<?php endif;?>
<div class="outter-form-login">
<center><img src="assets/fonts/2.jpeg" width="360px;"></center>
</div>
<form action="cek_login.php" class="inner-login" method="post">
<h3 class="text-center title-login">Login Member</h3>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<input type="submit" class="btn btn-block btn-custom-green" value="LOGIN" />
<div class="text-center forget">
<p>Forgot Password ?</p>
</div>
</form>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
2.dan buat lagi sebuah file css nya. buat dengan nama style.css
style.css
body{
color: #606468;
font: 87.5%/1.5em 'Open Sans', sans-serif;
margin: 0;
}
.form-login{
margin-top: 3%;
padding: 22px 22px 22px 22px;
border-radius: 5px;
background: #00ffff;
border-top: 3px solid #434a52;
border-bottom: 3px solid #434a52;
}
.outter-form-login {
padding: 20px;
background: #f0ff00;
position: relative;
border-radius: 5px;
}
.logo-login {
position: absolute;
font-size: 35px;
background: #21A957;
color: #FFFFFF;
padding: 10px 18px;
top: -40px;
border-radius: 50%;
left: 40%;
}
.inner-login .form-control {
background: #D3D3D3;
}
h3.title-login {
font-size: 20px;
margin-bottom: 20px;
}
.forget {
margin-top: 20px;
color: #ADADAD;
}
.btn-custom-green {
background: #40ff00;
}
.btn-custom-green:hover {
background: #ff1a1a;
color: #fff;
}
Hasilnya akan seperti di bawah ini.
"Semoga Bermanfaat.
Wassalamualaikum Wr-Wb.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon