Bagian 01: Pembahasan Soal UKK SPP

Pembahasan Soal UKK SPP – Halo teman teman calon programmers, disini saya akan
membahas tentang UJI KOMPETENSI KEAHLIAN REKAYASA PERANGKAT LUNAK PAKET
1 SEKOLAH MENENGAH KEJURUAN Tentang Aplikasi Pembayaran SPP. Saya harap teman
teman mengikuti semua bagian dari seri ini, karena nantinya kemungkinan akan ada ±10 Bagian
dan semoga teman teman bisa memahaminya, jika tidak paham silahkan tanyakan di kolom
Komentar. Silahkan bagi yang memiliki hard file dari Paket 1 ini dibuka dan dibaca terlebih
dahulu yaa. Dan jika tidak ada hard file nya, teman teman bisa dapatkan soft file nya disini.

Silahkan dibuka hard file nya, kita akan bahas secara detail tugas ini ya.

Pada Bagian II à Komponen à Bahasa Pemrograman, Disana ada berbagain Bahasa

Pemrograman yang boleh dipakai dalam Aplikasi Pembayaran SPP ini. Dan Khusus di seri ini
kita akan menggunakan PHP saja, karena kita akan membuatnya secara sederhana untuk
mempercantik tampilan nya itu tugas teman teman yaa.

Tools tools lainnya seperti Text Editor atau Web Server kalian bebas menggunakan apa saja.
Saya sarankan teman teman menggunakan Text Editor Notepad++ dan untuk Web
Server teman teman bisa pakai XAMPP. Jadi silahkan kalian sediakan terlebih dahulu.

Kita lanjut ke Bagian III SOAL/TUGAS

Mari kita lihat terlebih dahulu fitur fitur apa saja yang harus ada di Aplikasi Pembayaran SPP ini.

Fitur administrator petugas siswa

Login √ √ √

Logout √ √ √

CRUD data siswa √

CRUD data petugas √

CRUD data kelas √

CRUD data spp √

Entri transaksi pembayaran √ √

Lihat history pembayaran √ √ √

Generate Laporan √

Keterangan:
Seperti yang kita lihat fitur fitur yang ada pada table tersebut menggunakan
pembagian privilege / Tingkatan User atau kita sebet Level. Level yang akan kita buat adalah
Level Administrator dan Petugas yang akan kita berikan username dan password untuk login ke
aplikasi.

CRUD: Create(Membuat/menambahkan data), Read(Membaca/menampilkan data),

Update(Memperbarui data), Delete(Menghapus Data)
Untuk Generate laporan kita gunakan fitur bawaan dari Browser saja.

Lanjutkan ke Bagian IV. Disana ada struktur database berikut relasi yang akan teman teman
buat.

Relasi tabel 

Silahkan teman teman boleh buat database nya sekarang. Buat database dengan
nama latihan_ukk Setiap relasi beri Primary Key(Kunci Utama) karena nanti kita akan
membuat relasi One To Many(Satu ke Banyak).

Bagian 02: Membuat Sistem Login

Membuat Sistem Login Sederhana – Selamat datang kembali di blog saya, terima kasih sudah
berkunjung. Sekarang ini saya akan lanjutkan pembahasan kita di seri Pembuatan Aplikasi SPP
berbasis Web sederhana. Kita lanjutkan ke tahap selanjutnya yaitu Membuat Sistem Login
Sederhana. Langsung disimak aja ya.

Pertamatama, teman teman Jalankan terlebih dahulu XAMPPnya atau Web Server yang kalian
gunakan setelah itu buka Editor kalian, entah itu Notepad++, Visual Studio Code, Atom, Sublime
Text  dkk. Tampilan yang akan kita buat ini sederhana saja ya tanpa ada CSS atau JS, untuk itu
teman teman coba hias sesuka kalian. Nanti tampilannya seperti ini :

Tampilan login

1. Jika Sudah dibuka Editornya, kita akan buat koneksi ke database nya terlebih dahulu yaa.
2. Selanjutnya kita akan buat halaman login nya.
 Coding login

Jika sudah diketikkan Save dengan nama login.php !

Perhatikan di coding nya, disana terdapat sebuah tag <form>

dengan action=”proseslogin.php” dan method=”POST” . Itu artinya form yang disubmit nanti
akan diproses pada file yang bernama proseslogin.php dan datanya akan dikirimkan
kehalaman tersebut menggunakan metode POST. Di baris selanjutnya kita membuat input untuk
petugas dalam sebuah table supaya nanti keliatan rapi yaa. Perhatikan, ada tag <input> dengan
attribute type=”text” dan name=”username”. Input yang akan petugas masukkan akan
dikirimkan ke halaman proseslogin.php yang nanti akan kita buatkan logic disana untuk proses
data.

3. Selanjutnya kita buat Proses Login nya

Coding proses login

Jika sudah save dengan nama proseslogin.php !

Perhatikan kembali ya di codingnya, pada baris pertama kita buat sesi

dengan session_start(); dan kita akan panggil database kita yang ada pada file koneksi
dengan require_once(“koneksi.php”);.  Lihat logic yang kita buat, jika nanti tombol submit
yang ada pada login.php itu ditekan dan sudah kita kasih name dengan login logika nya seperti
ini if(isset($_POST[‘login’]){ jika kondisinya ini true maka dia akan menjalankan perintah yang
ada dibawahnya, perintahnya akan saya jelaskan. Kondisi true, dia akan membuat variable
dengan nama $username yang didalamnya adalah $_POST[‘username’], jadi variable tersebut
mengambil data dari form yang sebelumnya kita inputkan yang mana didalam tag <input> kita
sudah menambahkan attribute name=”username” begitupun sama
dengan $password. Setelah itu kita akan memilih data yang ada pada database kita dengan
cara membuat variable terlebih dahulu dengan nama $cari diisi dengan mysqli_query($db,
“SELECT * FROM petugas WHERE username=’$username’); jadi mysql ini nanti akan
memilih sebuah data yang ada pada table petugas dengan username sama
dengan username yang kita inputkan. Lalu kita akan menangkap semua data yang username
nya sama dengan username yang diinput dengan menambahkan sebuah variable yang diisi
dengan mysqli_fetch_assoc($cari); yang nantinya akan menghasilkan data berupa array
associative. Lanjut ke kondisi selanjut nya, Jika data yang kita cari itu kosong maka nanti akan
tampil “username belum terdaftar” dengan perintah mysqli_num_rows($cari) == 0 dan jika
password yang kita panggil di database dengan $hasil[‘password’] <> $password itu tidak
sama dengan yang diinput maka nanti akan tampil  “Password salah” selain dari itu kita akan
membuat sebuah sesi dengan username dan akan redirect ke halaman index.php .

4. Kita buat halaman index

Coding index

Teman teman save dengan nama index.php !

Baris pertama coding yang kita buat adalah session_start(); karena kita menggunakan system
sesi yaa. Lalu baris kedua kita memanggil database, karena nanti halaman utama ini akan
berinteraksi dengan database. Setelah itu kita menyisipkan sebuah baris kondisi, jika sesi belum
dibuat if(!isset($_SESSION[‘username’])) maka nanti akan dikembalikan kehalaman login
dengan perintah header(“location: login.php”);. Dan jika selain dari itu kita buat variable
dengan nilai sesi login username, karena kita akan mengambil data dari username.

Sudah bisa login ya teman teman, coba perharikan url nya sedang berada pada halaman
index.php .
Index/Halaman utama ini kita buat sederhana saja sebagai percobaan apakah login nya sudah
berjalan dengan benar atau tidak. Selanjutnya nanti akan kita perbaiki halaman utama ini
Sudah dulu ya. Post selanjutnya kita akan membuat menu yang ada pada halaman index tadi,
dan akan kita sisipkan sebuah statement kondisi jika level admin > maka menu yang dapat
diakses apa saja dan jika level petugas > yang dapat diakses apa saja dan jika siswa maka akan
seperti apa.

Bagian 03: Membuat Menu Navigasi

Membuat Menu Navigasi – Halo teman teman semuanya, selamat datang di blog saya. Blog
yang selalu berhubungan dengan Teknologi Informasi Komunikasi. Di seri ini saya membahas
tentang Aplikasi Pembayaran SPP, disini kita akan belajar bagaimana cara membuat aplikasi
tersebut dari awal. Aplikasi yang kita buat ini menggunakan bahasa pemrograman PHP yang
akan dijalankan di server local kita. Yo kita lanjutkan ke Menu Navigasi yang akan kita buat.

Tambahkan sedikit script pada halaman utama

Sekarang kita akan menambahkan sedikit script pada halaman index kita yaa. Gimana script
nya? Lihat di bawah.

Kita menempatkan sebuah struktur html biasa, seperti title dan body. Dibagian body kita memiliki
script PHP yaitu <?php require_once(“header.php”); ?> Fungsinya sebagai pemanggilan
file header.php yang nantinya kita akan isi berupa Site Title / Judul Aplikasi Kita dan Menu
Navigasi. Selanjutnya kita menambahkan Kata Selamat datang kepada seorang petugas dan
pesan “Silahkan dikelola dengan baik”. Bagian selanjut nya juga kita memannggil sebuah
file footer.php, untuk bagian terbawah dari aplikasi kita.

Buat file header.php

Sekarang teman teman ketikkan Script header.php dibawah ini.
 Coding header

Jika sudah Save dengan nama header.php !

Seperti yang saya terangkan sebelumnya, kita akan membuat sebuah logika. Jika Levelnya
Admin maka menu apa saja yang dapat di akses dan jika levelnya petugas level apa saja yang
dapat diakses. Caranya kita pakai statement if($hasil[‘level’] == “Administrator”){ Ini artinya,
jika data yang kita panggil dari username levelnya adalah Administrator maka nanti menu yang
akan tampil diantaranya seperti Data Siswa, Data Petugas, Data Kelas, Data SPP, Transaksi,
History Pembayaran dan LogOut. Begitupun jika levelnya petugas maka yang tampil hanya
menu Transaksi History, Pembayaran dan LogOut. Seluruh menu tersebut berdasarkan
Soal/Tugas yang sudah dibahas ya teman teman. Untuk Level siswa, nanti kita akan buat secara
terpisah.

Buat file footer.php

Ketikkan kembali script footer dibawah ini. Jika teman teman tidak memerlukannya silahkan
teman teman boleh lewati.

Coding footer

Hasil Halaman Utama yang kita buat

Nantinya jika Levelnya adalah Administrator maka akan tampil seperti ini
 Menu navigasi dengan level Administrator

Dan Apabila nanti Levelnya adalah Petugas maka akan tampil seperti ini

Menu navigasi dengan level Petugas

Bagaimana teman teman? apakah terjadi error pada coding kalian? Jika ada pertanyaan
silahkan teman teman boleh comment dibawah 

Bagian 04: Membuat CRUD Data Siswa dan Join Table

Membuat CRUD Data Siswa – Setelah sebelumnya teman teman membuat sebuah menu
navigasi yang berisikan statement kondisi jika level admin dan jika level petugas. Nah sekarang
kita akan mulai mengisi konten kita atau menu menu kita yaa. Apa itu CRUD? CRUD ini adalah
singkatan dari Create, Read, Update, and Delete, intinya adalah kita bisa memanipulasi
database melalui satu tampilan ini. Contohnya seperti ini
 Tampilan CRUD data Siswa

Seluruh table yang kita tampilkan ini merupakan data yang ada pada table. Karena kita akan
membuat CRUD dari Data Siswa, Maka kita akan mengambil data dari table siswa. Sebelum
mengisi konten konten kita, saya minta teman teman tambahkan 2 data ke seluruh table kita
yang ada di databasenya karena kita akan melakukan testing apa data terpanggil atau tidak.

Sekarang kita mulai ngodingnya, teman teman jalankan terlebih dahulu Web Server nya dan
teman teman buka code editornya

Tambahkan File require.php

Coding Require

Silahkan teman teman save dengan nama require.php

File require.php ini menyimpan sebuah sesi yang akan dijalankan pada setiap tampilan kita. Jadi
nantinya jika pengguna aplikasi ini belum login, nanti akan di arahkan ke halaman login. Di
dalam file ini juga kita memanggil sebuah koneksi ke database
dengan require_once(“koneksi.php”);

Buat CRUD Siswa

Save dengan nama siswa.php!
Script yang teman teman ketikkan itu adalah sebuah tampilan yang berisi data data kita yang
ada pada table Siswa. Jadi dibaris pertama kita memanggil require.php, melalui file ini kita
membuat sebuah sesi dan kita juga memanggil database kita.

require_once(“require.php”);
?>

Lalu di bagian body, kita memanggil file header.php kita yang berisi menu navigasi dan juga
pada bagian terbawah kita memanggil footer.php. Nantinya ini akan kita pakai disetiap konten
kita ya

Kemudian kita membuat sebuah table yang nantinya ini akan kita isikan data menurut seluruh
data yang ada pada table Siswa

Table yang kita buat berisikan 8 Kolom. Dan nantinya juga kita akan melakukan join table yahh.
Apa sih join itu? Join itu merupakan query MySQLi yang berfungsi untuk menggabungkan table
yang telah kita relasi ke table siswa ini. Table apa yang kita relasikan? Jelas Table kelas dengan
nama Field nya adalah id_kelas. Karena kita tidak mungkin menampilkan sebuah ID kedalam
table kita, jadi nanti kita akan menampilkan Nama Kelas dan Kompetensi Kejuruan yang
terhubung dengan ID.
Di dalam tampilan tersebut kita membuat 3 aksi yaitu Tambah data yang ada pada atas table,
Hapus dan Edit yang berada pada kolom table kita. Nanti kita akan fungsikan seluruh aksi
tersebut. Pertama kita buat aksi hapus data, yang kita simpan scriptnya di paling bawah

Perhatikan link hapus yang kita buat

Link hapus

Link yang kita buat ini mengirimkan NISN dari data yang akan kita hapus
Kemudian kita menangkap data yang dikirimkan tersebut kedalam variable. Lalu kita langsung
hapus data tersebut dari table

Proses hapus

Jika data berhasil dihapus maka akan diarahkan ke halaman siswa.php. Tetapi jika gagal kita
buatkan sebuah javascript sederhana yang menampilkan ‘Maaf, data tersebut masih terhubung
dengan data yang lain.

Buat Form Tambah Data Siswa

Ketikkan script berikut:
Teman teman save dengan nama tambah_siswa.php !

Kita membuat form input sederhana untuk menambah data siswa. Perhatikan pada bagian
kelasnya, Karena id_kelas yang ada pada table siswa itu terhubung dengan id_kelas pada table
kelas, jadi yang akan kita lakukan memilih data dari table kelas. Tapi disetiap option kita beri nilai
id_kelas.

Option Kelas

Setelah itu kita lakukan pemrosesannya di bawah

Proses Tambah Siswa

 Tampilan Tambah data Siswa

Buat Form Edit data Siswa

Teman teman save dengan nama edit_siswa.php!

Perhatikan dibaris awal. Kita menangkap data NISN dari url yang dikirimkan oleh halaman
siswa.php. Lalu kita ambil data dari database berdasarkan NISN yang kita tangkap

Menangkap data NISN

NISN yang telah kita tangkap akan dimasukkan kedalam form input dan akan kita 
sembunyikan. Karena NISN ini sebagai acuan untuk data yang akan kita ubah. Ini sama saja yaa
dengan kita menghapus data.

Kemudian tombol simpan kita fungsikan

Proses Update Data

Tampilan Edit data Siswa

Bagian 05: Membuat Entry Transaksi Pembayaran

Membuat Entry Transaksi Pembayaran – Baiklah teman teman, kita akan melanjutkan
pembahasan kita mengenai soal Membuat Aplikasi Pembayaran SPP. Sebelumnya kita sudah
membuat sebuah CRUD data petugas yang mana kita bisa Menambah data, Menampilkan data,
Memperbarui data, dan Menghapus data. Yang belum adalah membuat CRUD data siswa,
CRUD data spp dan CRUD data kelas. Sekarang saya minta teman teman buat ke tiga CRUD
tadi menggunakan cara yang sama dengan yang sebelumnya kita buat disini. Oke teman teman
mari kita lanjutkan membuat Entry Transaksi Pembayaran.

Silahkan teman teman jalankan Web Server kalian dan Buka Code Editornya. Jika sudah
dijalankan semua, saya minta teman teman ketikkan script dibawah ini. Tampilan yang akan kita
buat kurang lebih akan seperti ini ya teman teman.
 Tampilan Entry Transaksi

Jadi tampilannya ini berisi seluruh data yang ada pada table pembayaran kita
Kenapa kita tidak menampilkan id_petugas, nisn, dan id_spp ? Karena menurut saya ketiga field
ini seharusnya tidak kita tampilkan tapi nanti kita akan mengambil data dari table lain dengan
memanfaatkan relasi yang kita buat pada database. Jadi intinya id_petugas ini yang akan tampil
adalah nama dari si petugas nya bukan id nya, nisn juga nanti yang akan kita tampilkan adalah
nama dari nisn yang digunakan, begitupun sama dengan id_spp yang akan kita tampilkan nanti
Tahun SPP berikut dengan Nominal yang harus dibayar.

Table Pembayaran

Buat File transaksi.php

Silahkan teman teman save dengan nama transaksi.php !

Tampilan Entry Transaksi

Tampilan ini mengikuti data data yang ada pada table Pembayaran, dan seperti yang kita
ketahui di dalam table tersebut terdapat relasi ke table lain seperti table petugas, siswa, dan spp
jadi nanti yang akan kita lakukan adalah Join ketiga table tersebut ke table pembayaran.
Kemudian kita menampilkannya menggunakan sebuah perulangan while dengan kondisi
menangkap seluruh data yang ada pada table Pembayaran. Kita juga menempatkan statement
pengkondisian yang berfungsi jika Nominal yang Harus dibayar itu sama dengan Jumlah yang
dibayarkan, script nya seperti ini ($r['jumlah_bayar'] == $r['nominal']){ Jika kondisi nya
bernilai true maka Status yang akan tampil adalah LUNAS selain itu pastinya akan
tampil BELUM LUNAS. Terus juga ada kondisi dimana jika Jumlah yang dibayarkan ini belum
lunas maka akan terdapat sebuah tombol untuk mengupdate jumlah bayar tersebut bilamana
siswa sudah membayar kekurangannya, update data tersebut kita lakukan dengan request
method GET seperti pada dan proses nya seperti ini.
 Proses pelunasan sisa pembayaran
Pertama, kita ambil data id_pembayaran melalui request method GET yang dikirimkan. Kurang
lebih ada pada bagian ini 

Perhatikan lebih detail, link tersebut mengandung 2 request GET

diantaranya $_GET[‘lunas’] dan $_GET[‘id’]

Selanjutnya kita proses data yang dikirimkan tersebut. Kita ambil data pembayaran berdasarkan
id yang kita kirimkan tadi. Selanjutnya kita cari tau dulu Sisa yang harus dibayarkan dengan cara

Proses Sisa Pembayaran

Pertama kita buat variable sisa yang nilainya adalah nominal yang harus dibayar dikurangi
dengan jumlah bayar. Lalu setelah itu kita jumlahkan jumlah bayar dengan sisa, baru kemudian
kita update datanya.

Buat File tambah_transaksi.php

Kita buat tampilannya seperti ini

Tampilan Tambah Transaksi

Sekarang teman teman ketikkan script dibawah
Perhatikan lebih detail pada penggunaan tag form dan tag input. Dalam tag form terdapat
attribute action yang artinya pemrosesan yang akan dilakukan ini nantinya dimana, jika
pemrosesan itu disatukan maka kosongkan saja. Selanjutnya kita tambahkan attribute method,
jadi kita menggunakan method POST untuk memproses data

Sekarang perhatikan bagian pemrosesannya. $_POST[‘petugas’]; perintah tersebut berisi

sebuah data yang diinputkan pada name yang kita berikan pada tag
select name=”petugas” nanti nilainya terdapat pada tag option value=”" tetapi yang kita
tampilkan adalah Nama Petugasnya. Kemudian seluruh data yang kita input itu disimpan pada
database dengan query INSERT INTO pembayaran VALUES(NULL, '$petugas', '$nama',
'$tgl', '$bulan', '$tahun', '$spp', '$jumlah'). Penginputan data tersebut mengikuti urutan
field yang ada pada table pembayaran. Kenapa ada NULL? Karena pada table pembayaran
bagian id_pembayaran saya tambahkan AUTO INCREMENT, jadi nanti akan diisi otomatis.
 Entry Transaksi Pembayaran

Bagian 06: Membuat Pencarian Data History Pembayaran

Membuat Pencarian Data History Pembayaran - Sekarang kita akan melanjutkan
pembuatan Aplikasi Pembayaran SPP kita. Fitur yang akan kita buat sekarang
adalah Fitur History Pembayaran Menggunakan Kolom Pencarian Data. Yu
langsung aja kita buat.

Nanti tampilannya akan seperti ini ya teman teman

Masih dengan menu navigasi yang sama dan juga footer yang sama. 

Sekarang teman teman jalankan terlebih dahulu Web Server dan Code Editor kalian.

Buat Script History Pembayaran

Teman Teman Ketikkan Script dibawah :
Teman teman save dengan nama history.php !

Seperti biasa di setiap konten kita terdapat file require.php untuk menyimpan sesi.

require_once("require.php");
?>

Lalu dibagian body kita membuat form input untuk pencarian data menggunakan NISN Siswa

Form Cari
Kita gunakan attribut autocomplete="off" supaya bekas kita mencari data itu akan hilang. Kita
tambahkan juga attribut autofocus kedalam input, jadi nanti pas petugas masuk ke menu ini
langsung difokuskan ke input pencarian data. Silahkan teman teman boleh tambahkan attribut
tersebut atau tidak, itu bersifat opsional.

Sekarang kita proses pencarian datanya

 Proses Cari
Didalam script tersebut kita memanggil dua table dari database yaitu table siswa yang nantinya
akan kita ambil biodatanya dan table pembayaran yang nanti akan kita tampilkan history
pembayaran dari siswa tersebut.

Sekarang perhatikan script yang menampilkan Biodata Siswa dibawah:

Script Biodata
Didalam table tersebut kita menampilkan isi dari table siswa. Yang kita tampilkan hanya NIS,
NIS, Nama dan Kelas nya saja yaa, Dan kelasnya juga ini sudah kita JOIN dengan table kelas. 

History Transaksi ini kita buat Hampir Sama dengan Entry Transaksi Pembayaran yang
sebelumnya kita buat. Hanya ada yang dihilangkan saja pada table tersebut.

Sekarang coba teman teman Test. Tampilan nya nanti akan jadi seperti ini
 Tampilan setelah mencari data

Bagian 07: Membuat Pagging Data

Membuat Pagging Data - INFO : Blog krikilltech.blogspot.com Sekarang sudah berganti
menjadi jaringscript.blogspot.com .

Sekarang kita akan membuat sebuah pagging data. Pagging ini bertujuan untuk membagi data
menjadi beberapa halaman. Bayangkan saja ketika data kita itu sudah ratusan atau ribuan akan
sangat merepotkan jika kita harus scrool ke bawah kan. Maka dari itu, kita akan buat pagging ini.
Bagaimana Cara Membuat Pagging itu? 
 Sebelum Pagging data
Nah, lihat data kelas punya saya ini sudah lumayan banyak yaa. Yang akan saya lakukan ini
adalah membagi data tersebut menjadi beberapa halaman, setiap halamannya itu hanya
menampilkan 5 buah data saja. Jadinya nanti akan seperti ini.

Sesudah Pagging data

Jika diperhatikan dengan baik, pada menu kelas ini . Di bagian bawah table terdapat angka yang
berfungsi untuk berpindah halaman. Sekarang kita akan coba membuatnya.

Silahkan teman teman seperti biasa dijalankan terlebih dahulu Web Server dan Code Editornya.
Dan buka coding bagian CRUD Data Kelas !

Tambahkan Script dibawah kedalam kelas.php !

Konfigurasi Pagging
Hal pertama yang kita lakukan adalah menentukan jumlah data yang akan ditampilkan disetiap
halamannya dan masukkan kedalam variable $totalDataHalaman. Kemudian kita hitung jumlah
data yang ada pada table kelasnya untuk kita bagi dengan Jumlah Data yang akan kita
tampilkan per halamannya. Query yang kita gunakan untuk membaginya adalah ceil fungsinya
untuk pembulatan bilangan ke atas, jika kita ambil contoh yaa, misalkan data yang kita punya
itu 10 terus kita bagi 3 maka hasilnya akan 3.3 yaa, Jika kita gunakan ceil maka nanti hasilnya
akan menjadi 4. Lalu kita tentukan terlebih dahulu data yang akan kita tampilkan itu mulai dari
mana, jika petugas itu berada pada halaman awal pastinya akan menampilkan data mulai dari
awal yaitu index ke [0] - [4] karena data yang akan kita tampilkan itu 5 data saja. Terus jika
petugas itu berada pada halaman ke 2 data keberapa kita tampilkan terlebih dahulu? Pasti data
dari index ke [5]. Sekarang kita buat jadi otomatis, kita buat variable $dataAwal lalu kita
kalikan Total data PerHalaman kita dengan Halaman yang sedang aktif terus kita kurangi
dengan Total data PerHalaman. Jika petugas berada pada halaman pertama, Maka Total data
PerHalaman kita kali dengan angka 1 hasilnya 5 lalu kita kurangi lagi dengan Total data
PerHalaman, jadi hasilnya adalah 0. Coba jika petugas berada pada halaman kedua, Maka 5
kalikan dengan angka 2 hasilnya 10 terus kita kurangi 5 hasilnya 5.

Tambahkan query LIMIT pada $sql !

Tambahkan query LIMIT

Query LIMIT ini berfungsi untuk membatasi data yang akan kita tampilkan. Querynya LIMIT
[Data awal yang kita tampilkan], [Jumlah data yang akan kita tampilkan]. Kita gunakan
variable yang telah kita konfigurasikan sebelumnya. Jadi jika berada pada halaman kedua,
berarti data awal kita adalah index ke 5 dan jumlah datanya itu adalah 5. Maka sudah benar ya
konfigurasi yang kita buat ini. 
 Tambahkan dibagian bawah Table !

Silahkan teman teman save dan coba jalankan webnya. Sudah selesai? Atau ada yang error? 

Bagian 08: Membuat Login Siswa

Membuat Login Siswa - Sekarang kita akan menambahkan Sistem LogIn dan LogOut Pada
Siswa, Yang akan kita lakukan sama saja dengan yang kita buat untuk Login Petugas. Hanya
bedanya, Siswa hanya bisa login menggunakan NISN miliknya. Yuk kita langsung coba aja.

Tampilannya sama saja yaa dengan yang kita buat sebelumnya pada login petugas.

Setelah Siswa Login maka nanti akan masuk ke dalam halaman utama siswa
 Halaman Utama Siswa
Halaman utama ini hanya menampilkan Biodata Dari Siswa dan History Pembayaran Siswa saja,
Kita buat dalam satu halaman 

Sekarang teman teman seperti biasa jalankan Web Server dan Code Editornya. Kita akan mulai
membuat script untuk tampilan tersebut.

Buat Script Login Siswa

Teman teman save dengan nama login_siswa.php !

Seperti yang saya jelaskan tadi, Siswa hanya bisa Login menggunakan NISN miliknya saja. Jadi
yang kita lakukan adalah membuat sesi NISN Siswa kedalam Proses Login Kita. Proses nya kita
satu file kan saja dengan login ini. 

Buat Halaman Utama Siswa

Teman teman save dengan nama index_siswa.php !

Yang akan kita tampilkan dalam halaman utama ini adalah Biodata Siswa dan History
Pembayaran Siswa. Jadi Hal pertama yang akan kita lakukan adalah memanggil table siswa dan
join table kelas kedalam table siswa untuk kita tampilkan Nama kelas dan Kompetensi Keahlian.
Lalu kita juga akan memanggil table Pembayaran berikut dengan table table lain yang terhubung
dengan table Pembayaran. 

Panggil Table Siswa & Pembayaran

Setelah kita panggil, kita tampilkan dalam table, buat menjadi 2 bagian. Bagian pertama untuk
menampilkan Biodata Siswa, dan Bagian kedua untuk menampilkan seluruh history pembayaran
Siswa.
 Table Biodata Siswa
Table yang kita buat sama saja dengan Pencarian History Pembayaran yang dimiliki oleh
petugas. Hanya saja kita tambahkan Alamat di dalamnya, teman teman juga tambahkan Alamat
Siswa di History Pembayaran kita sebelumnya.

Terus kita buat table Untuk menampilkan Seluruh History Pembayaran dari Siswa.

Table History Pembayaran Siswa

Buat File LogOut

Script Logout
Teman teman save dengan nama logout.php !

File Logout ini berfungsi jika petugas atau siswa menekan tombol logout, fungsinya juga untuk
keluar dari aplikasi. Kita gunakan session_destroy(); untuk keluar dari sesi dan kita arahkan
ke Halaman Login. 

Sekarang teman teman coba test dan login menggunakan NISN siswa.

https://jaringscript.blogspot.com/2020/03/bagian-01-pembahasan-soal-ukk-spp.html