Membuat halaman login sederhana menggunakan PHP

Untuk membuat halaman Login sederhana siapkan Software :
- Xampp
   Silakan Download DISINI
- Notepad atau Adobe Dreamweaver
   Silakan Download DISINI (Notepad ++)

Setealah di install aplikasi2 di atas kita perlu membuat Data Base baru.
Untuk membuat Database ikuti langkah-langkah berikut :

1. buka browser Chrome, Mozilla dll, Kemudian Ketikan pada kotak URL
    localhost//phpmyadmin kemudian Enter.
2. Muncul tampilan seperti ini, Kemudian klik New

3. Isilah nama database dengan nama "akses" (tanpa tanda petik) kemudian klik Create
4. Kemudian Double klik pada Database Akses, maka akan muncul tampilan seperti ini

5. Disini kita akan membuat tabel dari Database akses, Masukan nama tabel akseslogin
Untuk jumlah kolom 4. Kemudian klik Go

6. Setelah Klik Go, Akan muncul tampilan seperti ini. Isi tabel sesuai gambar di bawah

7. Kemudian klik Save. muncul tampilan seperti ini berati anda sudah berhasil membuat
Database. Sekarang kita akan mengisi tabel akseslogin dengan cara klik Insert

8. Muncul tampilan Insert kita akan mengisi tabel akses login. Lihat gambar dibawah

   Catatan : isikan nama anda pada Columm nama
                   isikan password anda pada kotak password
                   Columm level biarkan kosong. Kemudian Klik Go!!

9. Muncul tampilan seperti ini anda sudah berhasil membuat Database dan mengisi tabel.

10. Setelah Selesai Membuat Database akses dan Table akseslogin, Sekarang
      kita akan membuat script PHP dan HTML.
      Langkah awal buka Notepad dan Coppy Script dibawah ini pastekan
      di Notepad. (saran saya menggunakan Notepad++)
Anda Bisa Download Scriptnya DISINI

<?php
session_start();
mysql_connect("localhost","root","") or die("Tidak bisa konek db");
mysql_select_db("akses");

$userid = $_POST['userid'];
$password = $_POST['pswd'];
$op = $_GET['op'];

if($op=="in"){
    $cek = mysql_query("SELECT * FROM akseslogin WHERE nama='$userid' AND password='$password'");
    if(mysql_num_rows($cek)==1){
        $c = mysql_fetch_array ($cek);
        $_SESSION['userid'] = $c['userid'];
        header("location:Masukan_halaman_tujuan")
        or die("password salah");
}
}else if($op=="out"){
        unset($_SESSION['userid']);


}
?>

catatan : Pada text berwana merah masukan halaman tujuan berikutnya setelah

Halaman login. Contohnya home.html

11. Setelah di Paste di Notepad, Sekarang kita Save As Script tadi di :

Local disk (C:) > Xampp > htdocs > "buat folder baru" kemudian

Save di dalam Folder yang baru anda buat dengan nama log.php

dan Save as type ganti menjadi All Files. Lihat gambar dibawah

12. Klik Save. Kemudian Buka Notepad Baru kemduian Copy Script dibawah ini

Pastekan di Notepad.
Anda bisa Download Scriptnya DISINI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Site</title>
<style type="text/css">
.header {
    font-family: "Comic Sans MS", cursive;
    color: #009AB6;
    font-weight: bold;
    text-align: center;
}
body,td,th {
    font-weight: bold;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    color: #3BAC00;
    text-align: center;
}
</style>
</head>
<body>
<style type="text/css"> body{cursor: url("http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png"), auto;} </style>
<center>
<table width="1000" border="0" cellspacing="5" cellpadding="5"hspace="50">
<tr>
    <td height="166" colspan="3"><center> <h1 class="header">Please Login Your Name</h1></center></td>
    </tr>
<tr>
    <td height="186" colspan="3"><center><img src="Pictures/press.gif" width="100" height="137" /></center></td>
    </tr>
<tr>
    <td height="82"> </td>
    <td><form action="log.php?op=in" method="post">
<input type="text" name="userid" value="ISI USERNAME DISINI" />
<input type="password" name="pswd" value="passwordhere" />
<input type="image" value="Go" width="100" src="Pictures/bottom login.png" height="50" hspace=100 /></form></td>
    <td></td>
</tr>
<tr>
    <td width="317" height="31"> </td>
    <td width="332">http://berbageilmu.blogspot.com/</td>
    <td width="301"></td>
</tr>
</table>

</center>
</body>
</html>

13. Save As Script ini Dengan nama index.html di :
Local disk (C:) > Xampp > htdocs > "Save di folder yang sama dengan log.php"

dan Save as type ganti menjadi All Files. Lihat gambar dibawah

14. Klik Save. Sekarang kita sudah membuat Dua Script yaitu :
      log.php & index.html.
      langkah terakhir anda perlu mendownload Images yang sudah saya insert
di dalam script index.html silakan anda download gambarnya :
DOWNLOAD GAMBAR 1
DOWNLOAD GAMBAR 2

15. Simpan Gambar di atas di dalam folder dengan log.php & index.html
      kemudian buat folder baru dengan nama Pictures kemudian
      Save gambar di dalam folder Pictures.

Selelsai sudah tutorial tentang Membuat halaman login sederhana menggunakan PHP
untuk mencobanya silakan buka browser Chrome atau Mozilla.
keikan pada URL Browser ketik :
http://localhost/nama folder yang menyimpan semua file/
Contohnya : http://localhost/tugasweb/
masukan username dan password sesuai nama dan password yang sudah
anda input ke dalam Data Base akses.
tampilanya akan seperti ini

Selesai Sudah tutorial ini, Selamat Mencoba Sahabat Semoga Sukses.!!!

3 komentar

Balas

Unknown

26 June 2015 at 23:04

bagi-bagi tutorial gratis gan :
CARA MEMBUAT WEBSITE

CARA MEMBUAT WEBSITE PEMULA

BELAJAR PHP

KUMPULAN TUTORIAL PHP LENGKAP

>> www.onphpid.com

Bagusyz

14 December 2015 at 09:25

ijin sedot buat tugas yaa gan, thank youu :)

Rdk

16 December 2015 at 09:28

terima kasih sudah berbagi ilmu, di tunggu bagi bagi ilmu dan source code pada blog kumpulan aplikasi php, silahkan disimak aplikasi dari lokomedia yang keren keren gan

Share this

3 komentar