Membuat system login dan upload file dalam web berbasis php

Januari 15, 2020

Membuat system login dan upload file dalam web berbasis php

PRAKTIKUM SESI 1

(Semester Genap)

LOGIN & UPLOAD FILE

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

SMKN 4 BANDUNG

Assalamualaikum, balik lagi nih sama Tutor Gesitt. selamat datang di semester genap buat kalian-kalian semua kaum pelajar yang baru saja selesai liburan😁. Setelah lama liburan semoga kalian ga lupa yaa sama apa yang sudah kalian pelajari sebelumnya, buat kalian yang lupa mengenai pembahasan koding-koding sebelumnya bisa kalian buka halaman tutorgesit dan lihat postingan sebelum-sebelumnya agar kalian dapat mengingat kembali apa yang sudah kita pelajari bersama sebelumnya dan apabila kalian sama sekali belum pernah baca postingan TutorGesit sebelumnya sebaiknya kalian baca mulai dari https://tutorgesit.blogspot.com/2019/10/read-data-data-base.html karna projek pada postingan kaliini akan mengguanakan template form yang sudah kita buat sebelumnya yang bernama pwpb19, baik kita mulai. kita lihat tampilan sebelumnya table dan from yang kita buat seperti ini :

Karna kita akan membuat system login dan system upload foto kedalam database yang nantinya ditamilkan kedalam tabel tersebut, maka kita akan rubah terlebih dahulu tampilannya agar terlihat lebih rapih. Ohh iya jangan lupa tambahkan :

untuk tambahan kolom foto pada tabel. okey langsung saja kita rapikan menjadi seperti ini :

Oke setelah membuat tampilannya lebih rapih kita mulai masuk ke materi. Pertama kita biarkan kolom foto kosong terlebih dahulu karena yang kita akan buat lebih dulu yaitu system login.

Ikuti Langkahnya yaa....

1. Buka PHP My Admin dan buat tabel "login"

buka dan buatlah tabel berisi type data dan kolom seperti dibawah ini

2. Insert data kedalam tabel login

Masukan data seperti dibawah yaa, jangan lupa beri enkripsi pada password dengan enkripsi SHA1

3. Buat v_login.php

Kita buat form atau tampilan untuk loginnya, buat dalam folder views dan berikut ini adalah tampilan login yang saya buat :

<!DOCTYPE html>
<html>
<head>
 <title>Login</title>
 <script type="text/javascript" src="assets/bootstrap/js/jquery-3.4.1.min.js"></script>
 <script type="text/javascript" src="assets/bootstrap/js/popper.min.js"></script>
 <script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
 <link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.css">
 <style type="text/css">
  .cs{
   margin-top: 120px;
   background:rgba(50, 47, 47, 0.8);
   height: 350px;
   border-radius: 12px;
   width: 400px;
   margin: auto;
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   

  }
  body{
   background: url(assets/login/bglg.jpg);
   background-size: 100%;
  }
  input{
   border-radius: 5px;
   height: 40px;
   width: 220px;
   
  }
  input:hover{
   color: #ffa502;
   height: 40px;
   width: 250px;
   box-shadow: 0 0 15px #d35400;
   text-shadow: 0 0 15px #d35400;
   transition: 0.3s;
  }
  .btn{
   background: #585858;
   color: white;
  }
  .btn:hover{
   box-shadow: 0 0 15px #d35400;
   text-shadow: 0 0 15px #d35400;
   transition: 0.3s;
   color: #d35400;
  }
 </style>
</head>
<body>
 <form class="form-horizontal" action="login.php" method="POST">
 <form>
  <div class="form-group cs" align="center">
<font size="20px" color="white">Login</font>
   <div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10" style="margin-top: 20px;">
     <input type="text" name="username" class="from-control" placeholder="Username">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
     <input type="Password" name="password" class="from-control" placeholder="Password">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-6">
     <button type="submit" class="btn" style="margin-top: 10px;">Login</button>
    </div>
</div>
</div>
</form>
</html>

Hasilnya akan seperti ini :

4. Buat login.php dan logout.php nya
Buat login.php sebagai system loginnya dan logout.php sebagai system logoutnya nanti. ikuti dan analis kodingan dibawah ini :

Login.php

<?php 
 include 'lib/library.php';

 if($_SERVER['REQUEST_METHOD'] == "POST"){
  $username = $_POST['username'];
  $pass = $_POST['password'];

  $sql = "SELECT * FROM login WHERE username = '$username'
    AND password = SHA1 ('$pass')";

  $data = $mysqli->query($sql) or die($mysqli->error);

 if($data->num_rows != 0){
  $row = mysqli_fetch_object($data);
  $_SESSION['username'] = $row->username;
  $_SESSION['level'] = $row->level;
  header('location:index.php');
 }
 else{
  $error = "Username Atau Password Salah";
  }
 }

 include 'views/v_login.php';
 ?>

Logout.php

<?php 
 session_start();
 session_destroy();
 header('location:index.php');
 ?>

Sekarang coba buka folder projek kalian dan coba untuk login:v
Apakah bisa? 😁
Yang terbuka pasti langsung masuk ke index/halaman utama dan tidak disuruh untuk login terlebih dahulu kan? itu karna kita belum membuat batasan hak akses pada halaman utama/index. Dan apabila kalian coba megakses halaman login lewat url dan sudah bisa login, lalu kalian keluar dan masuk lagi kalian akan diminta untuk login kembali (Seharusnya sudah login tidak perlu login kembali sebelum user melakukan Logout).

Oke untuk mengatasi masalah diatas, ikuti step selanjutnya dibawah ini :

5. Buat lib/lib.php

<?php
session_start();

 function base_url(){
  return "http://localhost/pwpb19";
 }
 function flash($tipe, $pesan = ''){
  if(empty($pesan)){
   $pesan = @$_SESSION[$tipe];
   unset($_SESSION[$tipe]);
   return $pesan;  
 }
 else{
  $_SESSION[$tipe] = $pesan;
  }
 }

 function cekLogin() {
  $username = @$_SESSION['username'];
  $level = @$_SESSION['level'];

  if (empty($username) AND empty($level)) {
   header('location:login.php');
  }
 }

 function sudahLogin() {
  $username = @$_SESSION['username'];
  $level = @$_SESSION['level'];

  if(!empty($username) AND !empty($level)){
   header('location:index.php');
  }
 }
?>

Tulisan "http://localhost/pwpb19"; dalam function base_url() sesuaikan dengan url index awal masing-masing apabila kalian membuatnya berbeda dengan contoh.
Lalu pada function cekLogin()

$username = @$_SESSION['username'];
$level = @$_SESSION['level'];

ini berfungsi untuk mengambil data dari session

if (empty($username) AND empty($level)) {
header('location:login.php');

if diatas digunakan untuk cek, apakah data username & level
tidak kosong? (Username & Level adalah
Session yang di set saat login)

dan function sudahLogin() fungsinya kebalikan dari cekLogin()

6. Tambahkan Function cekLogin() pada index.php dan sudahLogin() pada login.php
Fungsi untuk memberikan batasan hak akses pada halaman index/halaman utama tadi.

index.php

<?php
 include 'lib/library.php';

 $succes = flash('succes');
 $error = flash('error');
 
 cekLogin();

 $sql = 'SELECT * FROM siswa2';
 
 //searching
 $search = @$_GET['search'];
 $kategori = @$_GET['kategori'];
 if(!empty($search)) $sql .= " WHERE nis LIKE '%$search%' OR nama_lengkap LIKE '%$search%' OR jenis_kelamin LIKE '%$search%' OR kelas LIKE '%$search%' OR jurusan LIKE '%$search%' OR alamat LIKE '%$search%' OR golongan_darah LIKE '%$search%' OR nama_ibu_kandung LIKE '%$search%'"; 

 //ordering
 $order_field = @$_GET['sort']; //Mengambil field yang akan diorder
 $order_mode = @$_GET['order']; //Mengambil mode nya, Ascending atau Descending

 if(!empty($order_field) && !empty($order_mode)) $sql .= " ORDER BY $order_field $order_mode";

 $listSiswa = $mysqli -> query($sql);

 include 'views/v_index.php';
?>

login.php

<?php 
 include 'lib/library.php';

 sudahLogin();

 if($_SERVER['REQUEST_METHOD'] == "POST"){
  $username = $_POST['username'];
  $pass = $_POST['password'];

  $sql = "SELECT * FROM login WHERE username = '$username'
    AND password = SHA1 ('$pass')";

  $data = $mysqli->query($sql) or die($mysqli->error);

 if($data->num_rows != 0){
  $row = mysqli_fetch_object($data);
  $_SESSION['username'] = $row->username;
  $_SESSION['level'] = $row->level;
  header('location:index.php');
 }
 else{
  $error = "Username Atau Password Salah";
  }
 }

 include 'views/v_login.php';
 ?>

7. Terakhir tambahkan include'lib/lib.php'; pada library.php

<?php

 include'lib/lib.php';

 $host = 'localhost';
 $user = 'hafiizh';
 $pass = '';
 $db = 'db_pwpb19';

 $mysqli = mysqli_connect($host, $user, $pass, $db)or die('Tidak dapat terhubung ke DataBase');

?>

Dan hasil dari system login akan menjadi seperti dibawah ini :

Nahhh, beres kan sistem loginnya😁. gimana nihh? masih pusing atau udah paham? kalau masih pusing komentar dibawah yaa nanti mimin jelasin lagi deh sampe kalian bner-bner paham. okeyy lanjut lagi ke sistem upload. Tadi kan kita udah bikin kolom foto tuh dan field-nya masih kosong. nah gimana supaya kita bisa upload foto yang nanti bisa masuk kedalam database dan dipanggil kedalam tabel dalam index tersebut? simak dan cermati langkahnya dibawah ya gaesss

UPLOAD

1. Tambah kolom file

Buka kembali database db_pwpb19 dan pilih tabel siswa2, tambahkan kolom file dengan tipe data varchar(100)

NOTE : Sesuaikan dengan nama database & tabel anda jika berbeda

2. Buat folder baru bernama media/images

3. Buka file v_tambah

Buka file views/v_tambah.php dan tambahkan seperti dibawah ini :

ini digunakan ketika form yang kita buat ingin memiliki fungsi form yang bisa upload(input type file)

Dan tambahkan juga kodingan seperti dibawah ini. Ini berfungsi sebagai input file dan sekaligus juga pemberian kondisi. Karna kita membuat fungsi edit data di halaman tambah data (Form tambah data dipakai 2 fungsi sekaligus, yaitu fungsi tambah data dan edit data) maka kita gunakan kodingan IF seperti dibawah ini. Gunanya yaitu apabila kita gunakan kondisi edit maka akan menampilkan image yang sebelumnya sudah di upload. Lalu ada input type="hidden" itu berfungsi agar pada saat di kondisi edit dan user tidak merubah image yang sebelumnya sudah di upload, image yang sebelumnya itu tidak hilang.

Dan ini total kodingan beserta hasilnya :

File untuk input berupa file dan peng-kondisian kondisi tambah ataupun edit sudah diatur, namun file yang diinput belum dapat masuk dan disimpan kedalam database, oleh karena ikuti langkah selanjutnya

4. Buka tambah.php
Kita akan membuat file yang diinput masuk kedalam database lihatlah kodingan berikut yang didalamnya sudah ada komentar berupa petunjuk penjelasan dan fungsi dari kodingan itu sendiri

<?php
include 'lib/library.php';

if($_SERVER['REQUEST_METHOD'] == 'POST'){
 $nis = $_POST['nis'];
 $nama_lengkap = $_POST['nama_lengkap'];
 $jenis_kelamin = $_POST['jenis_kelamin'];
 $kelas = $_POST['kelas'];
 $jurusan = $_POST['jurusan'];
 $alamat = $_POST['alamat'];
 $golongan_darah = $_POST['goldar'];
 $nama_ibu = $_POST['namaibu'];

 $foto = $_FILES['foto']; //untuk input file digunakan $_FILES

 if(!empty($foto) AND $foto['error'] == 0){ //Ini untuk mengecek apakah user mengapload file?
  $path = './media/images/'; //ini direktori file akan di upload
  $upload = move_uploaded_file($foto['tmp_name'], $path . $foto['name']); //upload file

  if (!$upload) {
   flash('error', "Upload File Gagal");
   header('Location: index.php'); //jika upload gagal akan dikembalikan ke index/halaman utama
  }
  $file = $foto['name'];
 }

 $sql = "INSERT INTO siswa2 (nis, nama_lengkap, jenis_kelamin, kelas, jurusan, alamat, golongan_darah, nama_ibu_kandung, file) VALUES
   ('$nis', '$nama_lengkap', '$jenis_kelamin', '$kelas', '$jurusan', '$alamat', '$golongan_darah', '$nama_ibu', '$file')";

 $mysqli->query($sql)or die($mysqli->error);

 header('Location: index.php');
 }

include 'views/v_tambah.php';
?>

5. Buka v_index.php
File yang diinput sudah masuk kedalam database pada tahap ke-4, namun pada index/halaman utama gambar belum dimunculkan pada kolom foto. Oleh karena itu berikut caranya :
tambahkan kodingan :

<img src="<?php echo base_url()?>/media/images/<?php echo $siswa['file']?>" width="80px" alt="">

kodingan yang digaris bawahi bisa diganti dengan direktori upload file yang kalian buat.

6. Buka edit.php
Pada tahap ke-5 foto yang di upload sudah ditampilkan dan terlihat normal namun pada saat dalam kondisi edit akan error. tambahkan kodingan dibawah ini untuk menyelesaikan fungsi edit.

<?php 
 include 'lib/library.php';

 if($_SERVER['REQUEST_METHOD'] == 'POST'){
 $nis = $_POST['nis'];
 $nama_lengkap = $_POST['nama_lengkap'];
 $jenis_kelamin = $_POST['jenis_kelamin'];
 $kelas = $_POST['kelas'];
 $jurusan = $_POST['jurusan'];
 $alamat = $_POST['alamat'];
 $golongan_darah = $_POST['goldar'];
 $nama_ibu = $_POST['namaibu'];
 $file = $_POST['foto']; //Ambil nama file dari type hidden, jika user tidak mengubah fotonya


 $foto = $_FILES['foto']; //Script ini copy dari script tambah.php tadi karena masih dibutuhkan fungsi yang sama

 if(!empty($foto) AND $foto['error'] == 0){
  $path = './media/images/';
  $upload = move_uploaded_file($foto['tmp_name'], $path . $foto['name']);

  if (!$upload) {
   flash('error', "Upload File Gagal");
   header('Location: index.php');
  }
  $file = $foto['name'];
 }

 $sql = "UPDATE siswa2 SET nis = '$nis', 
     nama_lengkap = '$nama_lengkap',
     jenis_kelamin = '$jenis_kelamin',
     kelas = '$kelas',
     jurusan = '$jurusan',
     alamat = '$alamat',
     golongan_darah = '$golongan_darah',
     nama_ibu_kandung = '$nama_ibu',
     file = '$file'
     WHERE nis = '$nis' ";
           //jangan lupa tambahkan query nya
 $mysqli->query($sql)or die($mysqli->error);

 header('Location: index.php');
 }

 $nis = $_GET['nis'];

 if(empty($nis)) header('Location: index.php');

 $sql = "SELECT * FROM siswa2 WHERE nis = '$nis' ";
 $query = $mysqli->query($sql);
 $siswa = $query->fetch_array();

 if (empty($siswa)) header('Location: index.php');

 include 'views/v_tambah.php';
 ?>

Done. fungsi upload file dan login sudah selesai dan berikut hasil akhirnya :

Baik kawan kawan mungkin sekian materi yang dapat TutorGesit paparkan dalam blog kaliini semoga bermanfaat...

Cari Blog Ini

Tutor Gesit

Membuat system login dan upload file dalam web berbasis php

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel

If, If/Else, Else, Switch/Case On java script