Hallo Guys,
Disini saya akan memberikan tutorial cara membuat login dasar dengan menggunakan html. Disini saya memberikan tutorial dasar dan saya harapkan dapat membantu teman-teman sekalian.
Langsung saja ya guys disini untuk langkah awal silahkan siapkan beberapa app :
-XAMPP Link download
-MySQL (SQLYog) Link download
-Sublime Text/Notepad/Notepad++/Netbeans/Lain-lain
Pertama, Silahkan aktifkan XAMPP kalian seperti ini:
Kedua, Silahkan Buka MySql kalian guys,
Nanti akan muncul tampilan seperti ini:
-Database = programingweb
-table = users
-buat nama kolom bedasarkan contoh dibawah ini:
Silahkan buat beberapa nama pada Sublime kalian :
Folder = latihan
berikut ini nama-nama yang ada pada folder latihan
- daftar.php
- home.php
- koneksi,php
- login.php
- logout.php
- proses_daftar.php
- style.css
Sekarang, kita akan langsung memulai masuk ke Syntax ya guys,kalau ada kesalahan harap dimaklumin ya guys karena manusia tidak ada yang sempurna...hahahaha😂😂😂
Ketika kalian ingin mengecek apakah program kalian jadi atau tidak,kawan" bisa cek ke google chrome/ Mozila Firefox dengan memasukkan link seperti ini:
Koneksi.php
<?phpmysql_connect("localhost","root","") or die ("Gagal Mengkoneksikan");mysql_select_db("programingweb") or die ("Database tidak bisa ditemukan");?>
login.php
<?php
include "koneksi.php";
session_start();
if (isset($_session['username'])){
header("location");
}?>
<html>
<head>
<title>Login</title>
</head>
<body>
<form method="post" name="login" action="home.php">
<table border=0 align="center" cellpadding=5 cellspacing=0>
<tr>
<td colspan=3><center><font size=5>LOGIN</font></center>
</td>
</tr>
<tr>
<td>
Username
</td>
<td>:</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>:</td>
<td>
<input type="text" name="password">
</td>
</tr>
<tr>
<td colspan=2></td>
<td><input type="submit" name="submit" value="LOGIN"></td>
</tr>
<tr>
<td colspan=3><a href="daftar.php">DAFTAR</a></td>
</tr>
</table>
</form>
</body>
</html>
logout.php
<?php
session_start();
session_destroy();
echo "<script>alert('Anda Berhasil Logout')</script>";
echo "<meta http-equiv='refresh' content='1 url=login.php'>";
?>daftar.php
proses_daftar.php<html><head><title>Pendaftaran</title></head><body><form method="post" name="pendaftaran" action="proses_daftar.php"><table border=0 align="center" cellpadding=5 cellspacing=0><tr><td colspan=3><center><font size=5>PENDAFTARAN</font></center></td></tr><tr><td>Nama</td><td>:</td><td><input type="text" name="nama"></td><td>Username</td><td>:</td><td><input type="text" name="username"></td><td>Password</td><td>:</td><td><input type="text" name="password"></td></tr><tr><td colspan=2> </td><td><input type="submit" name="submit" value="DAFTAR"></td></tr><tr><td colspan=3><a href="login.php">LOGIN</a></td></tr></table></form></body></html>
<?php
include "koneksi.php";
$nama = $_POST['nama'];
$username = $_POST['username'];
$password = $_POST['password'];
$daftar = mysql_query("INSERT INTO users (nama,username,password) values ('$nama','$username','$password')");
if ($daftar){
echo "<script>alert('Berhasil')</script>";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}else{
echo "<script>alert('Gagal')</script";
echo "<meta http-equiv='refresh' content='1 url=daftar.php'>";
}
?>home.php
<!DOCTYPE html>
<html>
<head>
<title>MENU</title>
<style type="text/css">
*{margin: 0; padding: 0}
body {background-image: url(cara-membuat-menu-fixed-menggunakan-html-css-1.jpg);}
.container {width: 100%; background-color: red; height: 40px; position: fixed; margin-top: -45px;}
nav {width: 900px; margin:auto; background-color: red; height: 40px;}
nav ul {list-style: none; }
nav ul li {float: left; width: 20%}
nav ul li a { display: block; color:#fff; text-align: center; line-height: 40px; text-decoration: none;}
nav ul li a:hover {background-color:blue;}
article {width: 900px; margin:auto;}
article p {color: #52ff12; margin-top: 40px;}
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Galery</a></li>
<li><a href="#">Service</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</nav>
</div>
<article>
<p>
Silahkan isi Content atau Text .. !
</p>
</article>
</body>
</html>style.css
body {background: #456;font-family: 'Open Sans', sans-serif;}.login {width: 400px;margin: 16px auto;font-size: 16px;}/* Reset top and bottom margins from certain elements */.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;}/* Every row inside .login-container is defined with p tags */.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="username"],.login input[type="password"] {background: #fff;border-color: #bbb;color: #555;}/* Text fields' focus effect */.login input[type="username"]: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;}/* Buttons' focus effect */.login input[type="submit"]:focus {border-color: #05a;}
Nah, Sekarang sudah bisa kalian cek apakah buatkan sudah berhasil atau belum ya guys. Sekian tutorial ini, semoga bermanfaat bagi kalian ya guys. Jika kalian ingin bertanya silahkan berikan komentar yang mendukung ya guys.
Terimakasih banyak guys🙏🙏🙏🙏🙏
Facebook
