Haikal PG - XI RPL 1 - PWPB Sesi 32

Assalamualaikum warahmatullahi wabarokatuh
Kembali lagi dengan saya, Haikal Putra Gustiansyah di Website Pemrograman Web dan Perangkat Bergerak. Pada sesi kali ini kita membahas tentang login,authorization dan upload file. Dengan melanjutkan topik pembahasan materi yang sebelumnya dan bagi yang belum mengikuti materi-materi sebelumnya diharapkan dibaca dulu ya...

Langsung saja ke materinya. Let's go!

Login
Login merupakan sebuah proses masuk ke dalam jaringan dengan identitas milik kita masing-masing. Dalam login kita memerlukan akun yang digunakan untuk memasuki website/aplikasi tertentu yang terdapat form login atau syarat loginnya. Langsung saja ke step by stepnya :

1.Buat tabel di mysql dengan nama t_login dengan struktur sebagai berikut:

2. Jika sudah, isi data tabel seperti berikut dan jangan lupa tambahkan encrypt sha1

3. Buat form login dengan nama file v_login.php dan simpan di folden views

Untuk form saya membuatnya seperti ini jika teman-teman ingin mencoba tampilan yang berbeda silahkan... tapi kalo ingin sama ini dia codenya:

<!DOCTYPE html>
<html>
<head>
 <title>Login Form</title>
 <style type="text/css">
  body{
   font-family: arial;
   background-color: lightgrey;
  }
  form{
   padding: 5px;
  }
  table{
   border: 1px solid black;
  }
  td{
   background-color: grey;
   padding: 5px;
  }
  button{
   background-color: #34a1eb;
   padding: 10px;
   border-radius: 5px;
   border: 0px;
   transition: 0.5s;
  }
  button a{
   text-decoration: none;
   color: white;
   font-family: cursive;
  }
  button:hover{
   background-color: black;
   color: white;
   cursor: pointer;
  }
  input{
   border-radius: 4px;
   border: 1px solid black;
   padding: 5px;
  }
 </style>
</head>
<body>
 <form action="login.php" method="post">
  <table align="center">
   <h1 align="center">
Login</h1>
<tr>
    <td><label for="usname">Username : </label></td>
    <td><input type="text" name="username" id="usname"></td>
   </tr>
<tr>
    <td><label for="pass">Password : </label></td>
    <td><input type="password" name="password" id="pass"></td>
   </tr>
<tr>
    <td></td>
    <td><button type="submit">Login</button></td>
   </tr>
</table>
</form>
</body>
</html>

untuk inputanya beri nama 'password ' dan untuk username 'username' pada input namenya agar bisa dikirm datanya untuk dicek apakah data tersebut sudah ada atau belum yang diarahkan ke login.php.

4.Buat file login.php

Untuk codenya seperti ini:

<?php 
 @session_start();

 include 'lib/library.php';

 sudahLogin();

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

  $sql = "SELECT * FROM t_login WHERE username = '$username' AND password = sha1('$password')";

  $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{
   echo "<script>alert('Username atau password salah!')</script>";
  }
 }

 include 'views/v_login.php';

 ?>

 ?>

disini dilakukan pengecekan data yang telah dikirim melalui form login tadi. jika method POST maka masukkan data ke variabel dan disini dilakukan query untuk pengecekan lalu di jalankan dan jika data tidak NOL maka buat session dan kembalikan ke index.php dan jika tidak/else muncul tampilan username atau password salah.

Jika salah tampilan akan seperti berikut:

5.Jika berhasil selanjutnya kita akan membuat logout.php

Codenya seperti berikut:

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

 ?>

Simpel saja karena logout hanya menghancurkan/menghapus session.

Authorization

Kita memiliki beberapa masalah diantaranya jika kita sudah login seharusnya normalnya kita tidak perlu melakukan login lagi bukan? tapi kalian coba masuk ke url login pas sudah login maka halaman login bisa diakses. Begitu pula dengan halaman utama atau index.php yang seharusnya login terlebih dahulu untuk mengakses tapi ini malah bisa dibuka_- ok langsung saja kita selsaikan masalahnya!!.

1.Buat sebuah function di library.php sebagai berikut

<?php 
 @session_start();

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

 $mysqli = mysqli_connect($host, $user, $pass, $db) or die ('Tidak dapat koneksi ke Database/Database tidak ada');


 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");
  }
 }


 ?>

disana terdapat 2 method/function diantaranya cekLogin dan sudahLogin. kedua function tersebut digunakan agar masalah yang kita temukan dapat diatasi misal di function cekLogin terdapat kondisi jika session usernamenya kosong dan level kosong maka arahkan ke halaman login. Begitu pula dengan method sudahLogin jika session usernamenya tidak kosong maka arahkan ke halaman utama atau index.php. Setelah dibuat lanjut ke step berikutnya:

2.Simpan 2 method tersebut pada masing-masing file yang dibutuhkan untuk pengecekan

cekLogin() simpan di index.php seperti berikut:

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

 cekLogin();

 $sql = "SELECT * FROM siswa";

 //Search
 $search = @$_GET['search'];
 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%'";

 //Order By
 $order_field = @$_GET['sort'];
 $order_mode = @$_GET['order'];

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

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

 include 'views/v_index.php';
 ?>

dan sudahLogin() letakan di login.php

<?php 
 @session_start();

 include 'lib/library.php';

 sudahLogin();

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

  $sql = "SELECT * FROM t_login WHERE username = '$username' AND password = sha1('$password')";

  $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{
   echo "<script>alert('Username atau password salah!')</script>";
  }
 }

 include 'views/v_login.php';

 ?>

 ?>

dan jika dijalankan masalah tersebut hilang dan terpecahkan...

Upload File

Jadi singkatnya kita akan menambahkan sebuah penambahan foto pada form tambah juga kita bisa mengeditnya kembali di form edit jika ingin mengganti foto tersebut. Langsung saja ke stepnya.

1.Buat sebuah kolom baru di mysql dengan nama dan tipe data seperti berikut:

teman-teman bisa membuat kolom baru tersebut dengan bantuan phpmyadmin atau dengan manual menggunakan query berikut: ALTER TABLE siswa ADD file varchar(100);

2.Selanjutnya, buat folder images didalam folder assets dan strukturnya seperti berikut:

3.Tambahkan sebuah attribut enctype='multipart/form-data' di tag form di file v_tambah.php

Attribut diatas digunakan jika form tersebut terdapat sebuah pengiriman file

4.Tambahkan sebuah kode untuk mengirimkan file seperti berikut:

<?php if ($action == 'edit.php') { ?>
					
				<img src="assets/images/<?php echo $siswa['file'] ?>" width="80">
				<input type="hidden" name="foto">
				<?php } ?>
				<input type="file" name="foto">

tambahkan kode diatas didalam form yang sama dengan nis, nama, dll. Dan jika dijalankan maka hasilnya akan seperti ini:

Form file muncul

5.Masuk kedalam file tambah.php dan salin code berikut:

$foto = $_FILES['foto'];

		if (!empty($foto) AND $foto['error'] == 0) {
			$path = "assets/images/";
			$upload = move_uploaded_file($foto['tmp_name'], $path.$foto['name']);
			if (!$upload) {
				echo "<script>alert('error')</script>";
			}
			$file = $foto['name'];
		}

Penjelasan: Pertama ia akan menangkap sebuah file dengan variable foto kemudian dilakukan pengecekan kondisi apabila foto tidak kosong dan foto error == 0 maka, buat sebuah path penyimpanan dan variable upload yang digunakan untuk memindahkan file tersebut ke path yang sudah ditentukan. Jika gagal upload maka akan ada alert error dan masukkan nama foto tersebuh ke variable file yang dimana variable ini akan dimasukkan ke query INSERT INTO bersama dengan data-data yang lain.

6.Memunculkan foto yang telah dimasukkan
Code:

<img src="assets/images/<?= $siswa['file'] ?>" width='80'>

Simpan kode diatas ditempat halaman utama. Jika dijalankan maka akan seperti berikut:

Foto yang telah dimasukkan akan tampil di halaman utama.

7.Melakukan edit

Code:

$file = $_POST['foto'];

		$foto = $_FILES['foto'];

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

			if (!$upload) {
				echo "<script>alert('error')</script>";
			}
			$file = $foto['name'];
		}

Penjelasan: $file = $_POST['foto']; diatas menangkap dari input yang disembunyikan di kode tambah.php sebelumnya digunakan jika user tidak mengubah fotonya. Lalu sisanya sama seperti proses tambah. Query ke database:

$sql = "UPDATE siswa SET nis = '$nis', nama_lengkap = '$nama_lengkap', jenis_kelamin = '$jenis_kelamin', kelas = '$kelas', jurusan = '$jurusan', alamat = '$alamat', golongan_darah = '$golongan_darah', nama_ibu_kandung = '$ibu', file = '$file' WHERE nis = '$nis' ";

Jika selesai di edit maka akan seperti berikut:

Proses edit

Gambar berubah

Mungkin cukup sekian saja pada sesi kali ini. Wassalamualaikum Wr. Wb.

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 32

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 19

Haikal PG - XI RPL 1 - PWPB Sesi 27

Haikal PG - XI RPL 1 - PWPB Sesi 12