Website Pendaftaran Siswa Baru Online

Action! Studi kasus kali ini mengambil tema “Website Pendaftaran Siswa Baru
Online”. Tanpa panjang kata, mari kita praktekkan!

1. Membuat Database

Sebelum membuat database, kita perlu merancang tabel/field/entitas beserta atributatributnya
dan juga relasi antar tabel (biasa disebut dengan ERD).
Asumsi untuk mulai membuat database adalah komputer / laptop kita sudah terinstall
apache dan mysql. Bisa menggunakan appserv, xampp, wampp atau yang lain.
Langkah-langkahnya sebagai berikut :
a. Buka web browser ( misal : mozilla firefox ) kemudian ketikan alamat
http://localhost/phpmyadmin
b. Buat database dengan mengisi kolom Create new database (misal : psbo), klik
Create

siswa
no_pendaftaran*
nama
alamat
jns_kelamin
agama
email
sekolah_asal
kd_jurusan**


jurusan
kd_jurusan*
nama_jurusan


admin
id_admin*
username
password
nama_admin

c. Buat tabel-tabel yang telah kita rancang diatas. Sebagai contoh, disini membuat
tabel admin. Name isi dengan nama table (admin) dan Number of fields isi
dengan jumlah attributnya (id_admin, username, password dan nama_admin=4)
kemudian klik Go.
d. Isi Field dengan nama-nama attribut, Type dan Length menyesuaikan, id_admin
tambahkan Extra menggunakan auto_increment dan jadikan sebagai primary key.
Klik save.
e. Hasilnya seperti gambar dibawah. Kode yang berada dalam lingkaran merupakan
perintah / query yang sebenarnya. Jika kita membuat tabel secara manual pada
SQL, maka kode tersebut yang ditulis.
f. Buatlah tabel siswa dan tabel jurusan dengan langkah seperti diatas. Untuk mulai
menambahkan tabel baru, klik database psbo.

2. Input data lewat phpMyAdmin

a. Tabel admin

Klik tabel admin kemudian pilih menu Insert.
Isikan data pada kolom value, untuk id_admin dikosongkan saja karena type
datanya menggunakan integer (int) dan Extra memakai auto_increment. Klik Go.
Perintah / query SQL yang sebenarnya terjadi
Untuk melihat data yang telah diinputkan silakan klik Browse

b. Tabel Jurusan

Seperti langkah diatas, klik tabel jurusan kemudian pilih Insert.
Isikan data pada kolom value. Kita bisa mengisikan beberapa sekaligus, sebagai
contoh ada dua jurusan yang diisi. Sebelumnya hilangkan tanca centang pada
checkbox Ignore.Klik Go bagian bawah agar kedua data bisa diinputkan.
Query SQL yang sebenarnya terjadi :
Lihat hasil, klik Browse

3. Menulis Kode Program

Setelah membuat database langkah selanjutnya adalah menulis kode-kode program.
Sebelumnya kita buat dulu folder baru (misal:spo) untuk tempat menyimpan kodekode
yang akan dibuat. Jika memakai appserv maka buat folder baru didalam folder
www, tetapi jika memakai xampp buat dalam folder htdocs Berikut contoh minimal
yang harus ada : (kalimat dibelakang tanda “//” artinya komentar)

a. Koneksi (konek.php)

Fungsi file koneksi.php adalah untuk mengkoneksikan form-form ke server dan
database. Sebenarnya kode ini bisa ditulis dalam satu file dengan file lain, tetapi
jika filenya banyak tentu kita juga harus nulis banyak. Oleh karena itu koneksi kita
jadikan file tersendiri, nantinya kita panggil dengan perintah include. Berikut
kode file koneksi :

<?php
$server="localhost"; //definisi server lokal.
$user="root"; //definisi user.
$pass=""; //definisi password (menyesuaikan).
$db="spo"; //definisi database yang telah dibuat
tadi.
//mengkoneksikan server lokal.
mysql_connect($server,$user,$pass) or die ("Maaf,
koneksi gagal");
//memilih database.
mysql_select_db($db) or die ("Maaf, database tidak
ditemukan");
?>

Buka web browser kemudian ketikan alamat http://localhost/spo/konek.php , jika
tampilannya kosong, maka program yang kita buat sudah benar tetapi jika ada
komentar “Maaf, koneksi gagal” atau "Maaf, database tidak ditemukan" maka
masih ada yang salah.

b. Form (form_spo.php)

Form berfungsi sebagai antarmuka antara manusia dengan database. Kode
programnya sebagai berikut :

<?php
include"konek.php"; // mengkoneksikan ke server dan
database
echo"
<form method=POST action=input_spo.php>
<table>
<tr>
<td>No.Pendaftaran</td> <td>:</td>
<td><input type=text
name=no_pendaftaran</td>
</tr>
<tr>
<td>Nama Lengkap</td> <td>:</td>
<td><input type=text name=nama></td>
</tr>
<tr>
<td>Alamat</td> <td>:</td>
<td><input type=text name=alamat></td>
</tr>
<tr>
<td>Jenis Kelamin</td> <td>:</td>
<td><select name=jns_kelamin>
<option value=Laki-laki>Laki-laki
<option value=Perempuan>Perempuan
</select>
</td>
</tr>
<tr>
<td>Agama</td> <td>:</td>
<td><select name=agama>
<option value=Islam>Islam
<option value=Katolik>Katolik
<option value=Protestan>Protestan
<option value=Hindu>Hindu
<option value=Budha>Budha
<option value=Konghucu>Konghucu
</select>
</td>
</tr>
<tr>
<td>Email</td> <td>:</td>
<td><input type=text name=email></td>
</tr>
<tr>
<td>Sekolah Asal</td> <td>:</td>
<td><input type=text
name=sekolah_asal></td>
</tr>
<tr>
<td>Jurusan</td> <td>:</td>
<td><select name=kd_jurusan>";
//memanggil data-data yang ada pada tabel jurusan
$q=mysql_query("SELECT*FROM jurusan ORDER BY
kd_jurusan");
while($r=mysql_fetch_array($q)){
echo" <option
value='$r[kd_jurusan]'>$r[nama_jurusan]
</option> "; }
echo"</select>
</td>
</tr>
</table>
<input type=submit value=SIMPAN>
</form>";
?>

Lihat hasilnya, ketikan alamat http://localhost/spo/form_spo.php. Jangan dulu
klik SIMPAN, buat dulu file input_spo.php dan lihat_spo.php

c. Input (input_spo.php)

<?php
include"konek.php";
$sukses=mysql_query ( "INSERT INTO siswa
(no_pendaftaran, nama, alamat, jns_kelamin, agama,
email, sekolah_asal, kd_jurusan) VALUE
('$_POST[no_pendaftaran]', '$_POST[nama]',
'$_POST[alamat]', '$_POST[jns_kelamin]',
'$_POST[agama]', '$_POST[email]',
'$_POST[sekolah_asal]', '$_POST[kd_jurusan]') ");
if($sukses){
header('location:lihat_spo.php');
} else {
echo"Gagal";
}
?>

d. Lihat (lihat_spo.php)

File lihat_spo.php dibawah ini merupakan contoh sederhana untuk menampilkan
data yang telah diinputkan. Hanya beberapa data saja yang akan kita tampilkan.
Meskipun demikian, dirasa cukup mewakili jika ingin dikembangkan lagi karena
ada ERD atau relasi yang menghubungkan dua tabel (siswa dan jurusan)
menggunakan attribut kd_jurusan.

<?php
include"konek.php";
echo"
<form method=POST action=form_spo.php>
<input type=submit value=DAFTAR>
</form>
<table border=1>
<tr>
<td>No</td>
<td>No.Pendaftaran</td>
<td>Nama Lengkap</td>
<td>Jurusan</td>
<td>Aksi</td>
</tr>";
//mendefinisikan no urut
$no=1;
//memilih (memanggil) data menggunakan relasi tabel
siswa dan jurusan
$data=mysql_query ("SELECT*FROM siswa,jurusan WHERE
siswa.kd_jurusan=jurusan.kd_jurusan ORDER BY
no_pendaftaran DESC");
//pengulangan data yang ada pada tabel keduanya
while($r=mysql_fetch_array($data)){
echo"
<tr>
<td>$no.</td>
<td>$r[no_pendaftaran]</td>
<td>$r[nama]</td>
<td>$r[nama_jurusan]</td>
<td>
<a
href=edit_spo.php?id=$r[no_pendaftaran]>Edit</a> |
<a
href=\"hapus_spo.php?id=$r[no_pendaftaran]\"
onClick=\"return confirm('Yakin Hapus
$r[nama]?')\">Hapus</a>
</td>
</tr>";
//penambahan 1 angka secara otomatis
$no++;
}
echo"</table>";
?>

Silakan isi data pada form_spo.php kemudian klik SIMPAN yang muncul adalah
file lihat_spo.php, karena pada file input_spo.php untuk header lokasinya kita tulis
lihat_spo.php. Jangan dulu klik edit atau hapus karena kita belum buat
programnya.

e. Edit (edit_spo.php)

Data yang diedit menyesuaikan kebutuhan. Disini, kita akan menyesuaikan dengan
file lihat_spo.php diatas.

<?php
include"konek.php";
//memilih tabel siswa untuk ditampilkan datanya
$d=mysql_query ( "SELECT*FROM siswa WHERE
no_pendaftaran='$_GET[id]' ");
$r=mysql_fetch_array($d);
echo"
<form method=POST action=update_spo.php>
<input type=hidden name=id value=$r[no_pendaftaran]>
<table>
<tr>
<td>No.Pendaftaran</td><td>:</td>
<td><input type=text name=no_pendaftaran
value=$r[no_pendaftaran]></td>
</tr>
<tr>
<td>Nama Lengkap</td><td>:</td>
<td><input type=text name=nama
value=’$r[nama]’></td>
</tr>
<tr>
<td>Jurusan</td><td>:</td>
<td><select name=kd_jurusan>";
//ERD tabel siswa dengan tabel jurusan
$ds=mysql_query (" SELECT * FROM siswa WHERE
no_pendaftaran='$_GET[id]' "); //memilih tabel siswa
$rs=mysql_fetch_array($ds);
//memilih tabel jurusan
$dj=mysql_query("SELECT*FROM jurusan");
while($rj=mysql_fetch_array($dj)){
if($rj[kd_jurusan]==$rs[kd_jurusan]){
echo"<option value=$rj[kd_jurusan]
selected>$rj[nama_jurusan]";
}
else{
echo"<option
value=$rj[kd_jurusan]>$rj[nama_jurusan]";
}
}
echo" </select>
</td>
</tr>
</table>
<input type=submit value=UPDATE>
</form>";
?>

Silakan klik edit dan coba ubah datanya, tapi jangan dulu klik UPDATE karena
programnya belum kita buat.

f. Update (update_spo.php)

<?php
include"konek.php";
$a=mysql_query( "UPDATE siswa SET
no_pendaftaran='$_POST[no_pendaftaran]',
nama='$_POST[nama]', kd_jurusan='$_POST[kd_jurusan]'
WHERE no_pendaftaran='$_POST[id]'");
if($a){
header('location:lihat_spo.php'); }
else{
echo"gagal"; }
?>
Sekarang klik UPDATE, data sebelumnya telah berubah (Miftakhul Munip menjadi
Kang Moen Ad-Dima’i).

g. Hapus (hapus_spo.php)

<?php
include"konek.php";
mysql_query("DELETE FROM siswa WHERE
no_pendaftaran='$_GET[id]'");
header('location:lihat_spo.php');
?>

Klik hapus salah satu data, maka ada peringatan “Yakin Hapus Fajar Aminudin?”.
Klik Ok, data telah terhapus

h. Login (login.php)

Login merupakan salah satu cara untuk membatasi akses program. Hanya orang
tertentu telah yang terdaftar yang bisa mengakses. Berikut form login :

<?php
echo"
<form method=POST action=cek_login.php>
<table>
<tr>
<td>Username</td><td>:</td>
<td><input type=text name=username></td>
</tr>
<tr>
<td>Password</td><td>:</td>
<td><input type=password
name=password></td>
</tr>
</table>
<input type=submit value=LOGIN>
</form>";
?>

i. Cek login (cek_login.php)

<?php
include"konek.php";
$login=mysql_query("SELECT*FROM admin WHERE
username='$_POST[username]' AND
password='$_POST[password]'");
$r=mysql_fetch_array($login);
$ketemu=mysql_num_rows($login);
//Apabila username dan password benar
if($ketemu>0){
session_start(); //mulai sesi
//Daftarkan sesi ke Server
session_register("user");
session_register("pass");
//Isi dari sesi
$_SESSION[user]=$r[username];
$_SESSION[pass]=$r[password];
header('location:form_spo.php'); //masuk ke form
pendaftaran
} else{
echo"Maaf, username dan password tidak benar!
Silakan <a href=login.php>ulangi lagi</a>";
}
?>

j. Logout (logout.php)

Untuk keluar sesi kita harus logout dahulu. Berikut kode programnya :

<?php
session_start(); //mulai sesi
include"konek.php"; //koneksi ke database
session_destroy(); //memutus sesi
header('location:lihat_spo.php');
?>

k. Contoh Penggunaan Session Login

Untuk membatasi akses, kita perlu login menggunakan teknik session. Ada
beberapa file yang harus dibatasi agar tidak semua orang bisa merubah data yang
ada. Sebagai contoh untuk menu form_spo.php, hanya admin/telah terdaftar saja
yang dapat menginputkan data. Ada sedikit tambahan pada kode programnya,
dibawah saya buat warna merah untuk tambahan kode programnya.

<?php
session_start(); //mulai sesi
include"konek.php";
//Apabila belum login
if(empty($_SESSION[user]) AND empty($_SESSION[pass])) {
echo"Untuk mengisi form, anda harus<a
href=login.php><b> LOGIN </b></a> terlebih dahulu!";
}
//Apabila sudah login
else {
echo"
<form method=POST action=input_spo.php>
<table>
<tr>
<td>No.Pendaftaran</td> <td>:</td>
<td><input type=text
name=no_pendaftaran</td>
</tr>
<tr>
<td>Nama Lengkap</td> <td>:</td>
<td><input type=text name=nama></td>
</tr>
<tr>
<td>Alamat</td> <td>:</td>
<td><input type=text name=alamat></td>
</tr>
<tr>
<td>Jenis Kelamin</td> <td>:</td>
<td><select name=jns_kelamin>
<option value=Laki-laki>Laki-laki
<option value=Perempuan>Perempuan
</select>
</td>
</tr>
<tr>
<td>Agama</td> <td>:</td>
<td><select name=agama>
<option value=Islam>Islam
<option value=Katolik>Katolik
<option value=Protestan>Protestan
<option value=Hindu>Hindu
<option value=Budha>Budha
<option value=Konghucu>Konghucu
</select>
</td>
</tr>
<tr>
<td>Email</td> <td>:</td>
<td><input type=text name=email></td>
</tr>
<tr>
<td>Sekolah Asal</td> <td>:</td>
<td><input type=text
name=sekolah_asal></td>
</tr>
<tr>
<td>Jurusan</td> <td>:</td>
<td><select name=kd_jurusan>";
//memanggil data-data yang ada pada tabel jurusan
$q=mysql_query("SELECT*FROM jurusan ORDER BY
kd_jurusan");
while($r=mysql_fetch_array($q)){
echo" <option
value='$r[kd_jurusan]'>$r[nama_jurusan]
</option> "; }
echo"</select>
</td>
</tr>
</table>
<input type=submit value=SIMPAN>
</form>";
}
?>

Selesai menambah kode, silakan buka alamat http://localhost/spo/form_spo.php . Apa
hasilnya?

Tambahkan kode diatas pada menu-menu yang sekiranya butuh batasan akses.
Sekian Modul Bagian I Kode Program. Semoga bermanfaat! Amin.

Tweet