Thursday, September 15, 2016

Cara membuat web sederhana ( Sistem Login dan LogOut )

Oke mari kita belajar bersama 

1. Buka XAMPP lalu aktifkan Apache dan Mysql, lalu ketikkan di URL Browser : localhost/phpmyadmin Setelah muncul laman phpmyadmin, pertama kita buat database dengan nama db_web, lalu buat table untuk admin ketikkan kode di bawah ini di tab SQL :
create table admin ( 
username varchar(15) not null primary key,
password varchar(15) not null,
level varchar(15) not null 
)


lalu insert data dengan :



username : admin


password  : admin


level          : admin


setelah berhasil membuat tabel admin, lalu kita akan membuat koneksi menuju databasenya



2.   buat folder di dalam htdocs dan beri nama web lalu buka notepad (disarankan notepad ++) lalu ketikkan kode di bawah ini dan Simpan di folder htdocs/web dengan nama koneksi.php:

<?php   $server= "localhost";   $username = "root";    $password = "";    $database = "db_web";  
  
mysql_connect($server,$username,$password) or die ("Koneksi Gagal");  
  
mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );  
  
?> 






3. selanjutnya kita membuat form untuk login, ketikkan kode dibawah ini dan Simpan di folder htdocs/web dengan nama index.php:


<?php session_start(); if (isset($_SESSION['username'])){ echo"Anda Telah Login, Silahkan masuk ke <a href='admin.php'>Admin</a><br>Jika Anda Ingin Logout <a href='logout.php'>Klik Di Sini</a>" ?>
<?php }else{ ?> <html> <title>Login Admin</title> <style type="text/css"> <!-- .judul { background-color: #00FF00; } --> </style> <body bgcolor="black"> <style type="text/css"> <!-- .style2 {color: #166D12} --> </style> <div align="center">
  <p>&nbsp;</p>
  <h1 class="judul"><strong>--->LOGIN ADMIN<---</strong></h1>
<br /><br />
  <form method="post" action="login.php">
    <table width="329" height="198" border="0" align="center" bgcolor="#00FF00">
    <tr>
      <th width="24" rowspan="3" scope="row">&nbsp;</th>
      <th height="35%" colspan="3" scope="row">&nbsp;</th>
      <td width="22" rowspan="3">&nbsp;</td>
    </tr>
    <tr>
      <th width="85" height="45" scope="row"> <div align="left">Username</div></th>
      <td width="15">:</td>
      <td width="161">
        <input type="text" name="username" /></td>
      </tr>
    <tr>
      <th height="47" scope="row"><div align="left">Password</div></th>
      <td>:</td>
      <td><input type="password" name="password" /></td>
      </tr>
    <tr>
      <th height="45" colspan="5" scope="row">
         <input type="submit" name="Submit" value="Login" />
        <input name="reset" type="reset" value="Reset" /></th>
      </tr>
    <tr>
      <th height="27" colspan="5" scope="row">&nbsp;</th>
    </tr>
  </table>
  </form>
</div> </body> </html> <?php } ?>


4.  Selanjutnya kita akan membuat kode untuk mengecek data admin (username dan password) , ketikkan kode di bawah ini dan Simpan di folder htdocs/web dengan nama login.php

<?php session_start(); ob_start(); include "koneksi.php"; $username = $_POST['username']; $pass     = $_POST['password'];
$login=mysql_query("SELECT * FROM admin WHERE username='$username' AND password='$pass'"); $ketemu = mysql_num_rows($login); $r=mysql_fetch_array($login);
if ($ketemu > 0) {
    $_SESSION[username] = $r[username];

    $_SESSION[password] = $r[password];

    $_SESSION[level]= $r[level];
header('location:admin.php'); }else{ ?><script>alert("Login gagal!");document.location.href="index.php"</script> <?php echo mysql_error(); } ?>
5.  Selanjutnya kita membuat halaman admin jika berhasil login akan muncul halaman ini, ketikkan kode dibawah ini dan Simpan di folder htdocs/web dengan nama admin.php:
<h1> Anda Berhasil Login </h1>
<br>Jika Anda Ingin Logout <a href='logout.php'>Klik Di Sini</a> 
6. Selanjutnya kita akan membuat logout ketikkan kode dibawah ini dan Simpan di folder htdocs/web dengan nama logout.php:



<?php session_start(); ob_start(); session_destroy(); header('location:index.php'); ?>
Jika berhasil logout kita akan langsung menuju halaman form login..

7. yang terakhir kita akan membuat proteksi untuk hal. admin, jika user tidak login dan mengakses langsung dari url address maka akan langsung di alihkan ke halaman login..



ketikkan kode dibawah ini dan Simpan di folder htdocs/web dengan nama proteksi.php:


<?php
if (!isset($_SESSION)) {
session_start();
}
if(isset($_SESSION['username'])){
}
else{
         
            header("location:index.php");
}
?>
lalu tinggal panggil file proteksi.php di halaman admin.php :

<?php include "proteksi.php"; ?>

<h1> Anda Berhasil Login </h1>
<br>Jika Anda Ingin Logout <a href='logout.php'>Klik Di Sini</a>

 

Langkah berikutnya adalah membuat INPUT , EDIT dan DELETE


1.  Pertama-tama seperti biasa Buka XAMPP lalu aktifkan Apache dan Mysql, lalu ketikkan di URL Browser : localhost/phpmyadmin maka muncul laman phpmyadmin, jika anda mengikuti tutorial sebelumnya buka database dengan nama db_web, jika belum ada anda bisa membuat databasenya, lalu buat table data untuk menyimpan data yang akan kita kelola, ketikkan kode SQL di bawah ini:

create table barang ( kode char(10) not null primary key, namabarang varchar(50) not null, harga bigint )
2.   Selanjutnya kita akan membuat koneksi ke databasenya,
buat folder di dalam htdocs dan beri nama barang lalu buka notepad (disarankan notepad ++) lalu ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama koneksi.php:

<?php  
$server= "localhost";  
$username = "root";   
$password = "";   
$database = "db_web";  
  
mysql_connect($server,$username,$password) or die ("Koneksi Gagal");  
  
mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );  
  
?> 





3.   Selanjutnya kita akan membuat form input barang, ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama formbarang.php:

<html><head> <title>Input Data Barang</title> </head><body> <h2>Data Barang</h2> <form action="savebarang.php" method="POST"> <table><tr> <td>Kode Barang</td> <td>: <input type="text" name="kode" size="10"></td> </tr> <tr> <td>Nama Barang</td> <td>: <input type="text" name="namabarang" size="30"></td> </tr> <tr> <td>Harga Satuan</td> <td>: <input type="text" name="harga" size="20"></td> </tr> <tr> <td colspan=2><input type="submit" value="Kirim"></td> </tr></table></form> </body></html>
Kode diatas adalah jika kita klik tombol Kirim maka akan langsung memproses file savebarang.php maka dari itu selanjutnya kita akan membuat file savebarang.php

4.  Kemudian kita akan membuat kode untuk menyimpan data kedalam mysql, ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama savebarang.php::

<?php ob_start(); include "koneksi.php";
$kode   = $_POST['kode'];
$nama   = $_POST['namabarang']; $harga  = $_POST['harga'];
mysql_query("INSERT INTO barang(kode,namabarang,harga)
VALUE('$kode','$nama','$harga')")or die(mysql_error()); header('location:tampilbarang.php'); ?>
 5.  Selanjutnya kita akan membuat tabel untuk menampilkan data yang telah kita input. Ketikkan kode di bawah ini daSimpan di folder htdocs/barang dengan nama tampilbarang.php:

<?php include "koneksi.php"; include "formbarang.php"; echo "<center><table border=1><tr bgcolor=orange> <td><b><center>No</td> <td><b><center>Kode Barang</td> <td><b><center>Nama Barang</td> <td><b><center>Harga Satuan</td> <td><b><center>Delete</td> <td><b><center>Edit</td> </tr>"; $query=mysql_query("SELECT * FROM barang ORDER BY kode"); $no=1; while($var=mysql_fetch_array($query)){ echo "<tr> <td>$no</td> <td>$var[kode]</td> <td>$var[namabarang]</td> <td>$var[harga]</td> <td><center><a href='deletebarang.php?kode=$var[kode]'>Delete</a></td> <td><center><a href='formeditbarang.php?kode=$var[kode]'>Edit</a></center></td> </tr>"; $no++; } echo "</table><br><b>Data Barang by banuaril10.blogspot.com</b>"; ?>
6.  Selanjutnya kita akan membuat perintah delete, ketikkan kode di bawah ini Ketikkan kode di bawah ini daSimpan di folder htdocs/barang dengan nama deletebarang.php:

<?php ob_start(); include "koneksi.php"; mysql_query("delete from barang where kode='$_GET[kode]'"); header('location:tampilbarang.php');
?>
7.  Selanjutnya kita akan membuat perintah edit barang, ketikkan kode di bawah ini Ketikkan kode di bawah ini daSimpan di folder htdocs/barang dengan nama formeditbarang.php :

<?php  include "koneksi.php"; $kode=$_GET['kode']; $query=mysql_query("select * from barang where kode='$kode'"); ?> <html><head><title>Halaman Edit Data Barang</title><head><body> <form action="editbarang.php" method="post"> <table border="0"> <?php while($row=mysql_fetch_array($query)){ ?> <input type="Hidden" name="no" value="<?php echo $no;?>" /> <h2>Data Barang</h2> <form action="savebarang.php" method="POST"> <table><tr> <td>Kode Barang</td> <td>: <input type="text" name="kode" value="<?php echo $row['kode'];?>" size="10"></td> </tr> <tr> <td>Nama Barang</td> <td>: <input type="text" name="namabarang" value="<?php echo $row['namabarang'];?>"size="30"></td> </tr> <tr> <td>Harga Satuan</td> <td>: <input type="text" name="harga" value="<?php echo $row['harga'];?>"size="20"></td> </tr> <tr> <td colspan=2><input type="submit" value="Update"></td> </tr> <?php } ?> </table></form>
</body></html>
Fungsi kode ini adalah untuk menampilkan data yang kita klik ke dalam form yang akan kita edit nanti



value="<?php echo $row['kode'];?>
 8.  Selanjutnya kita akan membuat file yang akan memproses form edit barang dan akan menggantikan dengan data yang baru, ketikkan kode di bawah ini daSimpan di folder htdocs/barang dengan nama editbarang.php :

<?php ob_start(); include "koneksi.php"; $kode    = $_POST['kode']; $nama          = $_POST['namabarang']; $harga         = $_POST['harga'];

$query=mysql_query("update barang set kode='$kode', namabarang='$nama', harga='$harga' where kode='$kode'"); header('location:tampilbarang.php'); ?>
Terakhir jalankan program melalui URL browser kita, ketikkan localhost/barang/tampilbarang.php silahkan coba satu-persatu apakah ada error? :v script sudah di coba jika ada yang erorr bisa tinggalkan pesan di sini


Terima kasih Buat yang buat artikel ini 

http://banuaril10.blogspot.co.id/2015/07/cara-membuat-web-dinamis-sederhana-input-edit-delete.html

 




No comments:

Post a Comment