Okee,,bertemu kembali dengan admin Zracoder,,Kemarin kita telah belajar tentang HTML,CSS dan javascript.
Sedikit penjelasan tentang php..
PHP adalah singkatan dari "Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. src wikibooks
Nah,, Kali ini kita akan belajar PHP..disini kita akan membuat Sistem Login dengan mengecheck kecocokan dari database dengan form yang kita inputkan
tentu jika ingin membuat sesuatu web seperti online shop / web yang membutuhkan sebuah account untuk mengaksesnya,,kalian harus membuat sistem loginnya.
Disini admin telah membuat Database bernama apotek_db dan tabel user, berikut Struktur tabelnya
Dengan membuat id menjadi PRIMARY KEY tepatnya AUTO_INCREMENT dan admin juga memberi level untuk membedakan penggunanya untuk mau dibawa kemana..
Oke langsung saja menuju tutorialnya
1. MEMBUAT SCRIPT KONEKSI
Ini bertujuan untuk membuat koneksi dari form inputan kita dengan Tabel User dan database tentunya
Buka Text Editor agan,disini saya menggunakan Sublime Text Editor copas di text editor mu
<?php //deklarasi host,user,password,database $host = "localhost"; $user = "root"; $password = ""; $db_nama ="apotek_db"; //membuat variabel string berisi notifikasi error $koneksi_error = "Ada kesalahan dalam mengkoneksikan ke database!"; //membuat koneksi $koneksi = mysql_connect($host,$user,$password); mysql_select_db($db_nama) or die (mysql_error($koneksi_error)); ?>
Simpan dengan nama koneksi.php
2. MEMBUAT SCRIPT LOGIN
kita membuat ini bertujuan untuk mencocokan Form inputan dari kita dengan data yang sudah ada di Database
Buka Text Editor agan,disini saya menggunakan Sublime Text Editor copas di text editor mu
<?php
//mengambil koneksi.php
include "koneksi.php";
//mengambil data yang diinput pada form login index.php
$username = $_POST['username'];
$password = $_POST['password'];
//memilih data di username berdasarkan form inputan index.php
$query = mysql_query("SELECT * FROM users WHERE username='$username'");
//menjadikanya sebagai array
$fetch = mysql_fetch_array($query);
//pencocokan dimulai
if ($password==$fetch['password']) {
//membuat sesi baru
session_start();
$_SESSION['username']=$fetch['username'];
$_SESSION['level']=$fetch['level'];
//melanjutakan untuk diseleski levelnya
header("location:seleksi_level.php");
} else {
//memberi notifikasi
echo "<script>alert('Username dan Password tidak cocok')</script>";
echo "<meta http-equiv='refresh' content='1 url=index.php'>";
}
Simpan dengan nama login.php
3. MEMBUAT SCRIPT SELEKSI LEVEL
script ini bertujuan ketika agan telah login, agan akan diseleksi apakah user atau admin
disini jika agan diseleksi sebagai admin,maka akan dilanjutkan ke admin.php,begitu juga sebaliknya,jika agan diseleksi sebagai user,maka akan dilanjutkan ke user.php
<?php
//session dimulai
session_start();
//mengambil koneksi.php
include "koneksi.php";
if (isset($_SESSION['level']) && isset($_SESSION['username'])) {
if ($_SESSION['level'] == 'admin') {
//jika levelnya admin maka akan dilanjutkan ke admin.php
echo "<script>alert('Login Berhasil!, Anda login sebagai admin')</script>";
echo "<meta http-equiv='refresh' content='1 url=admin.php'>";
} else if ($_SESSION['level'] == 'user') {
//jika levelnya admin maka akan dilanjutkan ke user.php
echo "<script>alert('Login Berhasil!, Anda login sebagai user')</script>";
echo "<meta http-equiv='refresh' content='1 url=user.php'>";
}
}
?>
Simpan dengan nama seleksi_level.php
LIHAT JUGA Belajar HTML5 Bagi Pemula
4. MEMBUAT SCRIPT INDEX FORM LOGIN
script ini membuat tampilan form login agan
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat FORM LOGIN | ZRACODER13 </title>
<meta charset="UTF-8">
<meta name="viewports" content="width=device-width intial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body class="body">
<div class="content">
<div class="header">
<p>FORM LOGIN</p>
<a href="#">ZRACODER13</a>
</div>
<div class="body-form">
<form action="login.php" method="post">
<table>
<tr>
<td width="200">Username</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" name="password"></td>
</tr>
</table>
<div class="footer-table">
<table>
<input type="submit" name="daftar_process" value="LOGIN"/>
</table>
</div>
</form>
</div>
</div>
</body>
</html>
Simpan dengan nama index.php
Jangan lupa untuk menghias index.php diperlukan stylingnya juga..berikut script cssnya
body {
background-color: #f5f5f5;
font-family: sans-serif;
}
.body {
width: 70%;
margin: 0 auto;
padding: 0px;
}
.content {
margin: 222px auto ;
width:50%;
height: 25%;
background-color: #666;
border-radius: 10px;
}
.header {
padding: 0px;
width: 100%;
border-radius: 10px 10px 0px 0px;
background-color:#E98758;
}
.header p {
padding: 0px 20px;
font-weight: bold;
display: inline-block;
color:#272822;
}
.header a {
margin-left: 200px;
text-decoration: none;
font-size: 12px;
color: #666;
}
.header a:hover {
color: #000;
transition: 1s;
font-weight: bold;
}
table {
padding: 5px 10px;
color: #f5f5f5;
}
input {
border-radius: 5px;
height: 25px;
width: 200px;
}
input:focus {
height: 30px
width:210px;
}
.pesan-confirm {
}
.footer-table {
background-color: silver;
border-radius: 0px 0px 5px 5px;
display: inline-block;
width: 100%;
height: 40px;
}
.footer-table input {
margin: 0 auto;
height: 40px;
width: 100%;
border-radius: 0 0 5px 5px;
border:none;
font-family: Arial;
background-color: #E98758;
color: #272822;
font-weight: bold;
}
.footer-table input:hover {
background-color: #666;
color: #E98758;
transition: 1s;
border:none;
}
Simpan dengan nama style.css
SELESAIII
LIHAT JUGA Cara Membuat Website Responsive dengan CSS
maka akan menghasilnkan sebagai berikut
Gimana?? Sangat Mudah Bukan?
Oke..segitu saja mungkin dari Zracoder..Jika admin ada yang salah ,admin siap dikasih kritik di kolom komentar..dan jika masih ada yang bingung,,agan-agan bisa bertanya juga
Sekian,dan Terimakasih
Semoga Bermanfaat :)
EmoticonEmoticon