Mei 2018

Oke Sobat Coding wkwkwk kita langsung aja ya

Pertama buat dulu database di Mysql, namanya bebas kalau saya nama database nya "belajar_template"

Jadi query nya seperti ini

CREATE DATABASE belajar_template

Selanjutnya, buat sebuah table sederhana yaitu table beranama "users" dengan 3 field saja yaitu id, email. dan password

CREATE TABLE `users` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`email` VARCHAR(50) NULL DEFAULT NULL,
`password` VARCHAR(512) NULL DEFAULT NULL,
PRIMARY KEY (`id`)
);

Setelah membuat database dan table, sekarang saatnya kita membuat form loginnya

( Note : Design Tampilan Form Login Saya Ambil dari Artikel Blog Orang Lain, tetapi saya belum nemu url blog nya untuk di cantumkan, apabila ada nemu url nya info biar saya cantumkan ya...)

buat sebuah file bernama login.html, yang isi nya seperti ini

<!DOCTYPE html>
<html>
<head>
<title>Login Coy</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div class="login">
<h2 class="login-header">Form Login</h2>
<form class="login-container" action="login.php" method="POST">
<p>
<input type="email" placeholder="Email" name="email" />
</p>
<p>
<input type="password" placeholder="Password" name="password" />
</p>
<p>
<input type="submit" placeholder="Login Bre" />
</p>
</form>
</div>
</body>
</html>

kemudian untuk css buat sebuah folder bernama "css" kemudian buat file dengan nama login.css didalam folder css yang isinya seperti ini

body{
background: #456;
font-family: 'Open Sans', sans-serif;
}

.login{
width: 400px;
margin: 16px auto;
font-size: 16px;
}

.login-header,
.login p{
margin-top: 0;
margin-bottom: 0;
}

.login-header{
background: #28d;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #fff;
}

.login-container{
background: #ebebeb;
padding: 12px;
}

.login p{
padding: 12px;
}

.login input{
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 16px;
outline: 0;
font-family: inherit;
font-size: 0.95em;
}

.login input[type="email"],
.login input[type="password"] {
background: #fff;
border-color: #bbb;
color: #555;
}

.login input[type="email"]:focus,
.login input[type="password"]:focus {
border-color: #888;
}

.login input[type="submit"] {
background: #28d;
border-color: transparent;
color: #fff;
cursor: pointer;
}

.login input[type="submit"]:hover {
background: #17c;
}

.login input[type="submit"]:focus {
border-color: #05a;
}

Terakhir kita buat logic dengan bahasa pemrograman PHP nya dengan nama login.php yang isinya seperti ini

<?php
// open koneksi ke database
define("db_host", "localhost");
define("db_user", "root");
define("db_pass", "");
define("db_name", "belajar_template");

$konek = mysqli_connect(db_host, db_user, db_pass, db_name);
if (!$konek){
die("Error!");
}

// ===

$email = $_POST['email'];
$password = $_POST['password'];

// perintah untuk mendapatkan user dari db berdasarkan nama yang di input di form login
$get_user = "SELECT * FROM users WHERE email = '$email'";
$result = mysqli_query($konek,$get_user);
$data = mysqli_fetch_array($result);
if($data){
// email yang dimasukan ada di db
// check password
if($password == $data['password']){
Header("Location: index.html");
}else{
Header("Location: login.html");
}
}else{
Header("Location: login.html");
}
?>

*** Untuk penjelasan dengan video bisa lihat di link ini : Membuat Login Form Sederhana Dengan Html + CSS + PHP + MYSQL***

Membuat Form Login dengan PHP

Onesinus Tamba Kamis, 24 Mei 2018