Sahabat harus paham terlebih dahulu php itu sebenarnya hanya semacam logic di sebuah aplikasi web. pada dasarnya hampir semua aplikasi berbasis web untuk tampilan atau view menggunakan html. tentunya termasuk halaman login yang akan kita buat untuk viewnya menggunakan html.
Langkah - Langkah Membuat Login Dengan PHP
Berikut saya akan jelaskan langkah demi langkah cara membuat login menggunakan php.
1. Hal Yang dibutuhkan Untuk Membuat Login
a. Pastikan sahabat telah menginstal web server seperti Apache dan php.
bisa juga menginstal XAMPP untuk mendapatkan service dengan lengkap.
b. Memiliki text editor untuk penulisan code php.
c. Download boostrap atau template admin untu mempercantik tampilan login yang dibuat.
saya sendiri menggunakan Admin Lte. Bisa di download disini.
atau bisa juga mendownloadnya di Github.
2. Membuat Folder / Directory Dengan Nama Login
Berhubung saya sendiri menggunakan Lampp, Lampp merupakan Xampp untuk Linux Operating System.
a. Lampp di linux
Buat folder di dalam folder htdocs. folder htdocs berada di system > opt > Lampp > htdocs.
nah buat folder di dalam folder htdocs tersebut.
b. Xampp di Windows
Untuk di xampp di windows sama yaitu membuat folder di htdocs. untuk di xampp directorynya berada di system > Xampp > htdocs.
buat folder di dalam folder htdocs.
c. Menyimpan file Admin Lte di Folder Login
Simpan file admin Lte yang telah di download di folder yang dibuat untuk aplikasi login (saya memberinama folder dengan nama login). supaya tidak berantakan lebih baik membuat folder style didalam folder login. kemudian paste disana admin lte nya.
Bisa di perhatikan di directory yang milik saya
 |
| Directory Login |
Bisa sahabat perhatikan saya membuat folder login di dalam htdocs kemudian membuat folder style di dalam folder login.
di dalam folder style terdapat admin lte yang telah di download sebelumnya. gunanya admin lte ini sebagai template.
3. Membuat Script Login php
Buat file didalam folder login dengan nama index.php.
Sahabat "copy paste" source code dibawah ini.
<?php
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="style/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="style/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="style/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="style/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="style/plugins/iCheck/square/blue.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<img src="img/logosan.png" height="" align="center"/> <!-- /.silahkan ganti logo-->
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Log In Aplikasi Penyimpanan</p>
<form action="login.php" method="post" autocomplete="off">
<div class="form-group has-feedback">
</div>
<div class="form-group has-feedback">
<input name="username" type="text" class="form-control" placeholder="Username">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input name="password" type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-info btn-block btn-flat fa fa-sign-in" name="btn-login" > Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 3 -->
<script src="style/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="style/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="style/plugins/iCheck/icheck.min.js"></script>
<script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
Tampilan dari code login diatas seperti dabawah ini
 |
| form login |
Untuk menambahkan logo diatas "form". sahabat bisa membuat folder kembali didalam folder login dengan nama image. kemudian tambahkan gambar yang akan di jadikan logo dalam form login tersebut.
"Login.php" merupakan file yang akan autentikasi dari form login yang dibuat di index.php
4. Script Fungsi Login
Pada bagian ke empat ini, kita akan menambahkan fungsi loginnya, source codenya seperti dibawah :
<?php include "config.php"; $username = $_POST['username']; $password = $_POST['password']; if (empty($username)){ echo "<script>alert('Username belum diisi')</script>"; echo "<meta http-equiv='refresh' content='1 url=index.php'>"; }else if (empty($password)){ echo "<script>alert('Password belum diisi')</script>"; echo "<meta http-equiv='refresh' content='1 url=index.php'>"; }else{ session_start(); if($username=="admin" AND $password=="admin") { $_SESSION["username"]=$username; header("location:home.php?modul=beranda"); }else{ $login = mysql_query("select * from pegawai where NamaPegawai='$username' and Password='$password'"); if (mysql_num_rows($login) > 0){ $_SESSION['username'] = $username; header("location:home.php?modul=beranda"); }else{ echo "<script>alert('Username atau Password salah')</script>"; echo "<meta http-equiv='refresh' content='1 url=index.php'>"; } } } ?>
Header location merupakan proses dimana setelah melewati tahap autentication maka akan dirahkan ke sesi selanjutnya.
maka header location bisa di sesuaikan sesuai aplikasi yang dibuat.
config.php merupakan file koneksi ke database apabila anda ingin mengambil data login dari database.
berhubung dalam proses pembuatan login ini saya tidak menggunakan database. artinya username dan password disimpan dalam file login.php.
nah itu pemaparan membuat login dengan php, pada postingan selanjutnya saya akan membuat login php dengan mengintegrasikannya dengan database. selamat mencoba. semoga berhasil.
No comments