Source Code Aplikasi Pembayaran SPP Berbasis Web dengan PHP dan MySQL #1

Aplikasi Pembayaran SPP Part 1

Hai, berjumpa lagi, kali ini kita akan membuat Aplikasi Pembayaran SPP Berbasis Web dengan PHP dan MySQL.

Dalam tutorial ini, desain aplikasi yang akan kita buat tampilannya jauh dari kata cantik. Jadi silahkan percantik desainnya sesuai dengan yang kalian inginkan.

Pada artikel ini yang akan kita buat adalah sebagai berikut:
  1. Database beserta tabelnya
  2. Login Form
  3. Kode koneksi dan proses login

Database

Buka PhpMyAdmin, kemudian buat database baru dengan nama spp.


Table

Kemudian, didalam database spp buat tabel dengan nama tb_petugas, pada artikel ini kita buat tb_petugasnya saja, sisanya diartikel berikutnya.

Membuat tb_petugas, berikut kode sql untuk membuat tabel beserta kolom didalamnya:

CREATE TABLE tb_petugas (
  id_petugas int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  username varchar(25) NOT NULL,
  password varchar(60) NOT NULL,
  nama_petugas varchar(100) NOT NULL,
  level enum('Admin', 'Petugas') NOT NULL
);

Kemudian klik 'Go' dan hasilnya akan seperti berikut:

PlajariKode - tb_petugas database spp

File yang akan dibuat dalam artikel ini:


Koneksi

Buat folder dengan nama config seperti gambar diatas, lalu buat file baru didalamnya, namakan Koneksi.php, file ini berfungsi untuk menghubungkan ke database.

Berikut kode untuk file Koneksi.php:
<?php

class Koneksi {
  var $host = 'localhost';
  var $user = 'root';
  var $pass = '';
  var $db_name = 'spp'; // nama database

  public function __construct() {
    $this->konek = mysqli_connect($this->host, $this->user, $this->pass, $this->db_name);
  }
}


Login Form

Kita buat Login Form sederhana, buat file dengan nama index.php dan masukan kode berikut:
<?php
if(!session_id()) session_start();
require_once 'Proses.php';

$proses = new Proses;

if(isset($_SESSION['id'])) {
 if($_SESSION['level'] == "Admin") {
  header('Location: includes/admin/');
 } else {
  // kita belum buat
  header('Location: includes/petugas/');
 }
}

if (isset($_POST['masuk'])) {
 $username = $proses->konek->real_escape_string($_POST['username']);
 $password = $proses->konek->real_escape_string(sha1($_POST['password']));
 
 $masuk = $proses->loginPetugas($username, $password);

 if($masuk->num_rows > 0) {
  $data = mysqli_fetch_assoc($masuk);

  if($data['level'] == "Admin") {
   header('Location: includes/admin');
   $_SESSION['id'] = $data['id_petugas'];
   $_SESSION['level'] = $data['level'];
  } else {
   // kita belum buat
   echo "Pergi ke halaman Petugas";
  }
 } else {
  $_SESSION['error'] = "Username atau password tidak valid";
 }
}
?>

<!DOCTYPE html>
<html>
<head>
 <title>Aplikasi Pembayaran SPP</title>
</head>
<body>
 <center>
  <h4>Silahkan Masuk</h4>

  <?php
  if (isset($_SESSION['error'])) {
   echo '<span style="color:red;">' . $_SESSION['error'] . '</span>';
  }
  ?>

  <form method="post" action="" autocomplete="off">
   <label for="username">Username</label>
   <input type="text" name="username" id="username"><br>
   <label for="password">Password</label>
   <input type="password" name="password" id="password"><br>
   <input type="submit" name="masuk" value="Masuk">
  </form>
 </center>
</body>
</html>

Penjelasan:
if(!session_id()) session_start();
Mengecek apakah sudah ada session, jika belum maka mulai session dengan fungsi session_start().

if(isset($_SESSION['id'])) {
  if($_SESSION['level'] == "Admin") {
    header('Location: includes/admin/');
  } else {
    // kita belum buat
    header('Location: includes/petugas/');
  }
}
Jika session 'id' sudah ada maka ketika akan mengakses halaman login ini akan langsung diarahkan kembali ke halaman beranda.

Kode didalamnya bertujuan untuk mengecek level apakah dia seorang Admin ataukah Petugas, jika dia seorang Admin maka akan diarahkan kembali ke halaman admin dan jika dia seorang Petugas maka diarahkan kembali ke halaman petugas.

$username = $proses->konek->real_escape_string($_POST['username']);
$password = $proses->konek->real_escape_string(sha1($_POST['password'])); 
Untuk mencegah sql injection, pada PHP versi 5.x.x kalian masih bisa menggunakan mysqli_real_escape_string(). 

Tapi untuk versi 7.x.x keatas kalian sebaiknya merubah penulisannya menjadi $koneksiKalian->real_escape_string(). Seperti halnya kode diatas karna saya menggunakan PHP versi 7.2.26.


Proses.php

File terakhir yang akan kita buat pada artikel ini yaitu Proses.php yang berisi class dan method login petugas dan siswa. Tapi yang akan kita buat hanya method login untuk petugasnya dulu.

Berikut baris kodenya:
<?php

require_once 'config/Koneksi.php';

class Proses extends Koneksi {
 public function loginPetugas($username, $password) {
  $stmt = mysqli_query($this->konek, "SELECT * FROM tb_petugas WHERE username = '" . $username . "' AND password = '" . $password . "'");

  return $stmt;
 }
}

Itu saja untuk part 1 ini, jika ada kendala dalam pengerjaanya kalian bisa langsung tulis pada kolom komentar dibawah atau bisa langsung menonton video tutorialnya disini.

Sampai jumpa pada part berikutnya dan terimakasih.


Posting Komentar

13 Komentar

  1. sehat bang,
    ohy mohon pencerahaannya, saya sudah buat semuannya bang sesuai dengan petunjuk di sini, ada kendala disini bang.
    saya sudah buat data petugasnya level admin, tp ko ga bisa masuk" ya.

    "Username atau password tidak valid" terus.

    terimakasih...

    BalasHapus
    Balasan
    1. Alhamdulillah sehat dan slalu ganteng bang.

      Yg udah-udah sih itu karena pas nambahin data petugasnya passwordnya belum format SHA1. Ikuti langkah berikut bang:

      1. Masuk ke tb_petugas
      2. Pilih menu "Tambahkan/Insert"
      3. Pada baris password ubah "Function/Fungsi"-nya jadi SHA1
      4. Lengkapi dan simpan

      Hapus
    2. Atau tonton video tutorialnya disini https://www.youtube.com/watch?v=Gs45THbMg3w

      Hapus
    3. asslammualaikum bang mo nanya knp file koneksi yang udah dibikin gagal mulu ya
      😭😭 padahal udah dibikin tabel2nya

      Hapus
  2. maaf bang mau tanya yg dividio dan disini agak beda y syntaxnya?

    BalasHapus
  3. Iya bang ada perbedaan, tapi hasilnya sama ko bang.

    BalasHapus
  4. Alhamduliilah, ini ilmu yang sangat bermanfaat sekali semoga bermanfaat bagi kita semua.

    BalasHapus
  5. cara jalankannya bagaiman kak 🙏😁

    BalasHapus
  6. bang kok saya di proses.php kok false2 trs ya padahal dah sama

    BalasHapus
  7. Maaf bg, setelah pembuatan kodingan index.php terus saya buka di browser ko gak bis ya?

    BalasHapus