Membuat login untuk pemula

Login dalam sebuah web bisa di katakan sudah tidak bisa di pisahkan lagi , dimana ada web pasti akan ada sebuah from yang menyediakan sebuah login misalnya login adiminstrasi , login siswa dan masih banyak contoh yang lain. Kali ini kita akan mencoba membahas dan membuat sebuah login di sertai dengan style CSS utuk mempercantik tampilan dengan menggunakan php untuk seorang pemula kita akan membuat login tanpa menggunakan database terlebih dahulu sebelum kita mencoba membuat login dengan databse

 

Buat Style CSS terlebih dahulu simpan di (xampp/htdoc/login/css/style.css) Semua gambar simpan di folder image (xampp/htdoc/login/image) tulis script code sebagai berikut :

// Untuk file image bisa anda persiapkan sendiri
html,body{
   font:normal 12px Tahoma,Verdana;
   margin:0 0 0 0;
   padding:0 0 0 0;
   background-image:url(../image/Black-background-set-wood-on-chanconsultants-jpg.jpg);
 }
#header{
   width:100td_persen;
   height:100px;
   border-bottom:silver 5px double;
   background-color:#0033FF;
   background-image:url(../image/Blue-Pattern-Background.jpg);
  background-repeat:repeat-x;
}

#content{
	margin-left:auto;
	margin-right:auto;
}

#slogan{
   font:bold 20px Tahoma,Verdana;
   color:#ffffff;
   padding:30px 0 0 30px;
}
#site{
   font:italic 14px Tahoma,Verdana;
   color:#ff9900;
   padding:0 0 0 30px;
}

#footer {
   width:100td_persen;
   height:50px;
   border-bottom:silver 5px double;
   background-color:#0033FF;
   background-image:url(../image/Blue-Pattern-Background.jpg);
   background-repeat:repeat-x;
}   

 

Buat File bernama login.php simpan di (xampp/htdoc/login/login.php) tulis script code sebagai berikut :

<html>
<head>
<title>TRAINING</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body,td,th {
 	font-size: 16px;
	 font-weight: bold;
}
.style1 {color: #FFFFFF}
-->
</style></head>
<body>
  <div id="header">
     <div id="slogan">MEDIA KREATIF INDONESIA</div>
     <div id="site">Uji coba login tanpa database </div>
  </div>  
<div id="content"></div>
<p> </p>
<p> </p>
//script code form login di letakkan di sini
<p> </p>
</body>
</html>

maka akan muncul tampilan sebagai berikut

sekarang kita membuat form login masih di file login.php Tulis script code sebagai berikut di bawah <p>&nbsp;</p> seperti keterangan di atas login.php

<form method="post" name="frm" action="index.php">
  <table width="398" height="198" border="2" align="center">
    <tr>
      <td colspan="3"><img src="image/Copy of LOCK.ICO" alt="" width="32" height="36">
          <table width="350" height="118" align="center">
            <tr>
              <td width="112" class="style1">USERNAME</td>
              <td class="style1">: </td>
              <td class="style1"><label>
                <input type="text" name="username" height="30td_persen" width="200" placeholder="Username" required>
              </label></td>
              <td class="style1"> </td>
            </tr>
            <tr>
              <td class="style1"> </td>
              <td class="style1"> </td>
              <td class="style1"> </td>
              <td class="style1"> </td>
            </tr>
            <tr>
              <td class="style1">PASSWORD</td>
              <td class="style1">:</td>
              <td class="style1"><label>
                <input type="password" name="password" height="30td_persen" width="200" placeholder="Password" required>
              </label></td>
              <td class="style1"> </td>
            </tr>
            <tr>
              <td class="style1"> </td>
              <td class="style1"> </td>
              <td class="style1"><input type="Submit" name="login" value="LOGIN"></td>
              <td class="style1"> </td>
            </tr>
        </table></td>
    </tr>
  </table>
</form>

maka di tengah tengah content akan muncul form login seperti di bawah ini

kata password di atas di peroleh dari fungsi code placeholder sedangkan message"Please fill out this firld." itu di peroleh dari fungsi code required

file login.php sudah selesai kita buat, kali ini kita edit file index.php yang sebelumnya sudah kita buat sebagai tujuan $_POST dari login.php index.php (ketik script code seperti berikut)


<?php
   session_start();
   if(!isset($_SESSION['username'])) {
  	header('location:login.php');
}
/** untuk fungsi session di atas di dalam script code kita, kita harus menuliskan code  session_start(); terlebih dahulu
    kenapa ? , ini salah satu syarat agar session bisa di jalankan 
    ($_SESSION['username']) itu sendiri di peroleh dari session yang akan kita buat berdasarkan script code di bawah
    dan fungsi dari header yaitu untuk mengarahkan jika index.php ini di jalankan tanpa login terlebih dahulu maka -
    akan di arahkan ke halaman login.php, untuk lebih jelasnya bisa anda coba ketika program ini selesai kita buat
**/
?>
<html>
<head>

    <title>LOGIN</title>

    <style type="text/css">

        <!--

        .style1 {color: #FFFFFF}

         -->

    </style>
<body background="image/Blue-Pattern-Background.jpg">
//untuk background bisa anda persiapkan sendiri
  <?php

    $user='rudi' ;

    $pass='rudi123';

      if(isset($_POST['login'])) {

         $ussername=$_POST['username'];

         $password=$_POST['password'];

      if($ussername==$user && $password==$pass){

         $_SESSION['username'] = $ussername;

         $_SESSION['password'] = $password;

      }else{

         header('location:login.php')
       }

  }

?>
  <h1 align="center" class="style1">SELAMAT DATANG</h1>

  <p>&nbsp;</p>

</body>
</html>

 

seperti yang sudah kami jelaskan di atas file index.php tidak akan bisa di jalankan secara langsung tanpa login terlebih dahulu misal ketika anda mengetik ini di browser :localhost/login/index.php maka akan otomatis terarahkan di file login.php , barulah ketika anda - login dan login itu benar maka file index.php akan bisa di akses itu salah satu fungsi dari session. Mudah - mudahan tutorial singkat ini dapat bermanfaat bagi pembaca sekalian. Support kami dengan cara Click LIKE atau SHARE jika anda merasa tutorial ini bermanfaat bagi pembaca

sekalian. Salam Kreatif


 


Komentar pembaca

muhamad syarif email password solusi kota solusi kita kirimin dongposting pada :2016-05-17 08:51:06
muhamad syarifbos masih bellum bisa ke buka aplikasi TR solution nya Yang diminta email. password nya kirimin yang lengkap bosposting pada :2016-05-17 11:08:12
rahmatcara mendaftar formget ???posting pada :2017-05-28 19:28:30
         
     
         
 
         
   
         
   
 

Tulis komentar