Assalammu'alaikum Warahmatullahi Wabarakatuh..
Pada kesempatan kali ini saya akan coba membagikan ilmu sedikit yang saya punya untuk membuat halaman back-end atau sering disebut halaman admin dengan menggunakan PHP dan database mysql serta di kombinasikan dengan css dan bootstrap.. Oke biar lebih semangat berikut adalah tampilannya :
Bagaimana caranya? Mudah banget kok,, ikutin secara saksama dan dalam tempo secepat-cepatnya yaa hehe..
Pertama : Buat file dengan nama Index.php dan berikut adalah scriptnya :
<html>
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<br>
<img src="Jakmania.jpg" alt="foto-profil" width="500" height="100">
<h1>Selamat Datang Admin</h1>
</center>
<div class="login">
<h2 class="judul">Login Admin</h2>
<br>
<form class="form-horizontal" action="proses_login.php">
<div class="form-group">
<label for="Username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="h4_login">
Belum Punya Akun???
<a href="proses_regis.php">Registrasi</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</div>
</form>
</body>
</html>
Oke lanjut ke buat file css nya nih untuk mempercantik tampilannya beri nama style.css dan simpan dalam folder yang sama dengan file index.php dan berikut scriptnya :
body{
background: #FEB600;
font-family: sans-serif;
}
.login{
width: 500px;
background: #FE7600;
margin: 80px auto;
padding: 5px 10px 10px 10px;
border-radius: 5px;
box-shadow: 0px 10px 20px 0px #D1D1D1;
}
.judul{
text-align: center;
color: #eee;
font-weight: normal;
}
.h4_login{
color: white;
}
.control-label{
color: white;
font-family: arial;
font-size: 12pt;
}
a{
color: white;
}
Oke bagaimana sudah?? Berhasil kan? Mudah kan?? Oia saya kan memiliki gambar tuh ya, apabila kalian ingin memasukan gambar, untuk mempermudah letakan file gambarnya dalam folder yang sama..
Selanjutnya saya akan membahas maksud dari script diatas yaa..
Perhatikan script index.php dan fokus pada bagian ini :
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Nah script diatas berfungsi untuk menampilkan class-class bootstrap dan juga menampilkan css yang kita buat untuk mempercantik tampilan..
Lanjut fokus pada script ini :
<form class="form-horizontal" action="proses_login.php">
script diatas ini untuk membuat proses apabila kita ingin melakukan login yaa. Tapi kita belum membuatnya dan tutorial selanjutnya akan membuat proses login tersebut.
Dan juga ini
Belum Punya Akun???
<a href="regis.php">Registrasi</a>
Nah untuk script diatas akan berfungsi untuk pergi ke halaman registrasi apabila adminnya belum memiliki akun untuk login. Oke bagaimana???
Untuk script lainnya itu kalian bisa pelajari karena lainnya adalah script untuk membentuk tampilan login..
Oke terimakasih atas perhatian anda, tutorial setelah ini adalah untuk registrasi yaaaa...
Pertama : Buat file dengan nama Index.php dan berikut adalah scriptnya :
<html>
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<br>
<img src="Jakmania.jpg" alt="foto-profil" width="500" height="100">
<h1>Selamat Datang Admin</h1>
</center>
<div class="login">
<h2 class="judul">Login Admin</h2>
<br>
<form class="form-horizontal" action="proses_login.php">
<div class="form-group">
<label for="Username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="h4_login">
Belum Punya Akun???
<a href="proses_regis.php">Registrasi</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</div>
</form>
</body>
</html>
Oke lanjut ke buat file css nya nih untuk mempercantik tampilannya beri nama style.css dan simpan dalam folder yang sama dengan file index.php dan berikut scriptnya :
body{
background: #FEB600;
font-family: sans-serif;
}
.login{
width: 500px;
background: #FE7600;
margin: 80px auto;
padding: 5px 10px 10px 10px;
border-radius: 5px;
box-shadow: 0px 10px 20px 0px #D1D1D1;
}
.judul{
text-align: center;
color: #eee;
font-weight: normal;
}
.h4_login{
color: white;
}
.control-label{
color: white;
font-family: arial;
font-size: 12pt;
}
a{
color: white;
}
Oke bagaimana sudah?? Berhasil kan? Mudah kan?? Oia saya kan memiliki gambar tuh ya, apabila kalian ingin memasukan gambar, untuk mempermudah letakan file gambarnya dalam folder yang sama..
Selanjutnya saya akan membahas maksud dari script diatas yaa..
Perhatikan script index.php dan fokus pada bagian ini :
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Nah script diatas berfungsi untuk menampilkan class-class bootstrap dan juga menampilkan css yang kita buat untuk mempercantik tampilan..
Lanjut fokus pada script ini :
<form class="form-horizontal" action="proses_login.php">
script diatas ini untuk membuat proses apabila kita ingin melakukan login yaa. Tapi kita belum membuatnya dan tutorial selanjutnya akan membuat proses login tersebut.
Dan juga ini
Belum Punya Akun???
<a href="regis.php">Registrasi</a>
Nah untuk script diatas akan berfungsi untuk pergi ke halaman registrasi apabila adminnya belum memiliki akun untuk login. Oke bagaimana???
Untuk script lainnya itu kalian bisa pelajari karena lainnya adalah script untuk membentuk tampilan login..
Oke terimakasih atas perhatian anda, tutorial setelah ini adalah untuk registrasi yaaaa...
0 komentar:
Posting Komentar