Tutorial Cara Membuat Form Login Dengan Php Dan MySql

Cara membuat form login dengan php dan mysql - ketika baru mengenal bahasa pemrograman php, hal yang mendasar untuk diketahui adalah bagamana cara membuat form login dengan php yang data login berdasarkan data yang tersimpan di database.

Bagaimana tidak, login adalah ibarat pintu masuk untuk masuk kedalam rumah tersebut yang  jika data tidak dikenali maka pintu tersebut tidak akan terbuka.

Ketika akan membuat aplikasi terkadang atau bahkan setiap aplikasi memiliki form login, terlebih jika membuat program aplikasi yang berbasis web. 

Gambaran kasarnya, jika sobat tidak terdaftar kedalam sistem maka sampai kapan pun anda tidak akan berhasil melawati form login.

jika demikian maka form login sangat bermamfaatkan untuk melindungi data yang ada di dalam aplikasi.

Oke mari kita mulai untuk membuat form login dengan php dan mysql, pertama jangan lupa sobat start dulu xampp nya yaa.

Disini saya asumsikan sobat sudah membuat databasenya.

Database yang saya buat terdiri dari dari….

ID – Nama – User – Password – Email – Akses

Dan coba langsung sobat masukan satu data untuk login kita nanti…atau ini saya berikan script Sql nya nanti tinggal di copas

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 07 Mar 2017 pada 07.12
-- Versi Server: 10.1.9-MariaDB
-- PHP Version: 5.6.15

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `login`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `admin`
--

CREATE TABLE `admin` (
  `ID` int(3) NOT NULL,
  `nama` varchar(30) NOT NULL,
  `user` varchar(20) NOT NULL,
  `password` varchar(20) NOT NULL,
  `email` varchar(30) NOT NULL,
  `akses` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `admin`
--

INSERT INTO `admin` (`ID`, `nama`, `user`, `password`, `email`, `akses`) VALUES
(1, 'ardy', 'admin', 'admin', 'email@gmail.com', 'administrator');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `admin`
--
ALTER TABLE `admin`
  ADD PRIMARY KEY (`ID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `admin`
--
ALTER TABLE `admin`
  MODIFY `ID` int(3) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Jangan lupa buat folder baru di dalam htdocs dan beri nama tutorlogin, silahkah sobat simpan semua file .php di dalamnya..

Pertama sobat buka kode editor, bisa menggunakan notepad++ atau Codelobster…

Jangan lupa untuk membuat koneksi ke database sobat, jika masih bingung membuat koneksinya bisa kembali ke postingan saya sebelumnya…

Jika sobat rasa koneksi ke database berhasil, maka yang selanjutnya untuk dibuat adalah form login untuk menampung inputan user, copy saja script di bawah ini dan simpan dengan nama form login. Simpan dan berinama formlogin.php

<div id="login">
<form method="post" action="ceklog.php">
<table>
 <tr>
  <th colspan="3">Login</th>
 <tr>
  <td>User</td>
  <td>
  <input type="text" name="user" placeholder="User" autofocus required/>
  </td>
 </tr>
 <tr>
  <td>Password</td>
  <td>
  <input type="password" name="pass" placeholder="Password" autofocus required/>
  </td>
 </tr>
 <tr>
    
  <td colspan="3" align="center">
  <button name="login" class="btn btn-small btn-primary" type="submit" ><i class="icon-ok icon-white"></i><strong>Login</strong></button> 
  <button type="reset" class="btn btn-small btn-danger"><i class="icon-remove icon-white"></i><strong>Reset</strong></button>
    
  </td>
 </tr>
 </tr>
</table>
</form>
</div>

Jangan lupa copy juga script CSS di bawah ini dan paste didalam formlogin.php di atas code <div id="login"> untuk mempercantik tammpilannya..

Baca : Check dan Uncheck box di php dan mysql

<style>
#login{
 margin-top:50px;
 margin-left:500px;
 margin-bottom:10px;
 float:left;
 width:600px;
 height: 150px;
 border:1px solid #cccccc;
}

#login table{
 width:600px;
 height: 150px;
 box-shadow:   5px 10px 5px #ccc;
 -webkit-box-shadow: 5px 10px 5px #ccc;
 -moz-box-shadow:  5px 10px 5px #ccc;

}

#login table th{
 background:#353535;
 color:#ffffff;
}

#login table td{
 padding-left:20px;
}
</style>

Silahkan run formlogin tersebut, jika berhasil maka form tampilannya akan sperti ini

Setelah berhasil membuat form nya, maka langkah selanjutnya kita akan membuat pengecekan login….

Silahkan membuat lembar kerja baru lagi dan copy script di bawah ini…

<?php 
session_start();
mysql_connect("localhost","root","");
mysql_select_db("login");//koneksi DB
 function anti_injection($data){ //membuat pencegahan Sql injection
  $filter = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
  return $filter;
}
$user = anti_injection($_POST['user']);//ambil data inputan didalam form login ...anti_injecton adalah fungsi pencegahan Sql injection
$pass = anti_injection($_POST['pass']);
if(isset($_POST['login'])){ //jika tombol login form login diklik maka script dibawah akan berjalan

 if (!ctype_alnum($user) OR !ctype_alnum($pass)){//percabangan jika terjadi Sql injection
 //pesan error
 echo"<script>alert('SQL Injection Terdeteksi');window.location.href='formlogin.php';</script>";
}else{//script dibawah ini akan berjalan jika tidak terjadi error Sql injectio
  //cek database
 $query=mysql_query("select * from admin WHERE user='$user' and password='$pass'")or die(mysql_error());
 $ambil=mysql_fetch_array($query);
 $cek=mysql_num_rows($query);
 extract($ambil);
 if($cek > 0){
  //$_SESSION['ID'] = ID di isi terserah,,,$ID = harus sama dengan nama field database
  $_SESSION['IDuser'] = $ID;
  $_SESSION['Nama'] = $nama;
  $_SESSION['User']=$user;
  $_SESSION['Password']=$password;
  $_SESSION['Email']=$email;
  $_SESSION['Akses']=$akses;
  //mengalihkan halaman jika login berhasil
  echo "<meta http-equiv='refresh' content='0; url=home.php'>";  
 }else{//jika user dan password tidak terdaftar di database
 echo"<script>alert('Anda tidak terdaftar ke dalam sistem');window.location.href='formlogin.php';</script>";
 } 
} 
}
?>

Simpanlah script tersebut dengan nama ceklog.php

Oke setelah melakukan beberapa tahapan, mari kita buat tampilan halamn yang akan di tampilkan jika seorang user berhasil login.. halaman ini tampilan home aplikasi. Tampila dimana halaman pertama yang akan mencul ketika user berhasil login..

Baca : Membuat jam digital sesuai waktu server di web

Silahkan sobat copy kode dibawah ini dan beri nama home.php...

<style>
#loginsukses{
 margin-top:50px;
 margin-left:600px;
 margin-bottom:50px;
 float:left;
 width:500px;
 height: 200px;
 border:1px solid #cccccc;
}

#loginsukses table{
 width:500px;
 height: 200px;
 box-shadow:   5px 10px 5px #ccc;
 -webkit-box-shadow: 5px 10px 5px #ccc;
 -moz-box-shadow:  5px 10px 5px #ccc;
 
}

#loginsukses table th{
 background:#353535;
 color:#ffffff;
}

#loginsukses table tr td{
 padding-left:10px;
 width: 1px;
}
</style>
<?php
session_start();
?>
<div id="loginsukses">
 <table align="center">
  <tr>
   <th colspan="3">
    Informasi Login
   </th>
  </tr>
   <tr>
   <td>
    ID
   </td>
   <td>
    :
   </td>
   <td>
    <?php echo $_SESSION['IDuser']; ?>
   </td>
  </tr>
  <tr>
   <td>
    Nama
   </td>
   <td>
    :
   </td>
   <td>
    <?php echo $_SESSION['Nama']; ?>
   </td>
  </tr>
  <tr>
   <td>
    User
   </td>
   <td>
    :
   </td>
   <td>
    <?php echo $_SESSION['User']; ?>
   </td>
  </tr>
  <tr>
   <td>
    Password
   </td>
   <td>
    :
   </td>
   <td>
    <?php echo $_SESSION['Password']; ?>
   </td>
  </tr>
  <tr>
   <td>
    Email
   </td>
   <td>
    :
   </td>
   <td>
    <?php echo $_SESSION['Email']; ?>
   </td>
  </tr>
  <tr>
   <td>
    Akses
   </td>
   <td>
    :
   </td>
   <td>
    <?php echo $_SESSION['Akses']; ?>
   </td>
  </tr>
 </table>
</div>

Jika sudah selesai, keselurah yang kita buat td sudah tinggal di run saja..untuk menjalankannya, sobat panggil saja file formlogin.php dengan mengetikan alamat di browser localhost/tutorlogin/formlogin.php

Berikut adalah tampilan awal ketika berhasil login/halaman home aplikasi..

Oke berhasil, sebenarnya untuk login itu ada yang multiuser juga. Dan yang kita bikin hari ini untuk single login. Untuk multiuser mungkin nanti saya akan share juga caranya supaya sobat yang baru belajar dengan php dan database bisa lebih memahami…