Modul PHP Ujikom SMK Paket 1 PROGRAM APLIKASI NILAI SISWA Modul ini merupakan modul praktikum yang membahas dasar pembuatan aplikasi web dinamis berbasis client-server yang mengacu pada Paket Soal Uji Kompetensi SMK program keahlian Rekayasa Perangkat Lunak (RPL). Untuk memulai pengerjaan pembuatan aplikasi ini, diasumsikan bahwa program aplikasi yang dibutuhkan sudah tersedia dan siap digunakan, meliputi Apache web server, PHP engine, MySQL dan Macromedia Dreamweaver. Pada modul ini paket web server yang digunakan adalah WAMPServer2.0c. Sebelumnya, ada baiknya jika kita bahas dulu garis besar dari aplikasi yang akan dibuat ini. Pada aplikasi ini terdapat 2 kategori hak akses, diantaranya adalah Administrator yang memegang kendali penuh pada aplikasi ini, terutama pada bagian pengolahan data yang berhubungan dengan data rawat jalan. Disamping itu ada kategori akses sebagai user atau pengunjung biasa, dalam hal ini pengunjung hanya bisa melihat atau mencari daftar pasien yang menjalani proses rawat jalan. Pada proses pengerjaannya, terdapat beberapa bagian proses diantaranya : a. Pembuatan database meliputi table, relasi dan pengisian masing-masing tabel. b. Membuat struktur hierarki folder dan nama-nama subfolder aplikasi. c. Membuat design/layout dan menuliskan kode-kode program berbasis bahasa pemrogramanan PHP. Selanjutnya pada bagian inilah akan diuraikan langkah-langkah pengerjaan aplikasi web dinamis Nilai Siswa berbasis client-server (intranet). 1. Pembuatan Database pada program MySQL Langkah awal yang harus dilakukan sebelum membangun sistem ini adalah membuat perancangan database yang akan digunakan. Database ini nantinya akan terbagi kedalam beberapa tabel yang dijadikan sebagai tempat penyimpanan berbagai informasi mengenai siswa,bidang studi, Komptensi Keahlian, Standar Komptensi, Nilai dan yang berhubungan dengannya. Berikut ini adalah struktur tabel dan relasinya. SMK ARTANITA 1
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Modul PHP Ujikom SMK Paket 1
PROGRAM APLIKASI NILAI SISWA
Modul ini merupakan modul praktikum yang membahas dasar pembuatan aplikasi web dinamis
berbasis client-server yang mengacu pada Paket Soal Uji Kompetensi SMK program keahlian Rekayasa
Perangkat Lunak (RPL). Untuk memulai pengerjaan pembuatan aplikasi ini, diasumsikan bahwa program
aplikasi yang dibutuhkan sudah tersedia dan siap digunakan, meliputi Apache web server, PHP engine,
MySQL dan Macromedia Dreamweaver. Pada modul ini paket web server yang digunakan adalah
WAMPServer2.0c. Sebelumnya, ada baiknya jika kita bahas dulu garis besar dari aplikasi yang akan
dibuat ini. Pada aplikasi ini terdapat 2 kategori hak akses, diantaranya adalah Administrator yang
memegang kendali penuh pada aplikasi ini, terutama pada bagian pengolahan data yang berhubungan
dengan data rawat jalan. Disamping itu ada kategori akses sebagai user atau pengunjung biasa, dalam
hal ini pengunjung hanya bisa melihat atau mencari daftar pasien yang menjalani proses rawat jalan.
Pada proses pengerjaannya, terdapat beberapa bagian proses diantaranya :
a. Pembuatan database meliputi table, relasi dan pengisian masing-masing tabel.
b. Membuat struktur hierarki folder dan nama-nama subfolder aplikasi.
c. Membuat design/layout dan menuliskan kode-kode program berbasis bahasa pemrogramanan PHP.
Selanjutnya pada bagian inilah akan diuraikan langkah-langkah pengerjaan aplikasi web dinamis
Nilai Siswa berbasis client-server (intranet).
1. Pembuatan Database pada program MySQL
Langkah awal yang harus dilakukan sebelum membangun sistem ini adalah membuat
perancangan database yang akan digunakan. Database ini nantinya akan terbagi kedalam beberapa
tabel yang dijadikan sebagai tempat penyimpanan berbagai informasi mengenai siswa,bidang studi,
Komptensi Keahlian, Standar Komptensi, Nilai dan yang berhubungan dengannya. Berikut ini adalah
Dalam pembuatan database dan struktur tabel terdapat dua cara, yang pertama dengan
menggunakan MySQL Command Line/Console atau yang kedua dengan aplikasi bantuan yaitu
phpMyAdmin. Pada modul ini, cara yang dibahas adalah menggunakan aplikasi phpMyAdmin. Berikut ini
adalah langkah-langkahnya :
SMK ARTANITA 1
Modul PHP Ujikom SMK Paket 1
a. Aktifkan terlebih dahulu paket WAMPServer, sehingga terlihat ikon pada System Tray di pojok kanan bawah layar monitor.
b. Aktifkan web browser seperti Internet Explorer, Mozilla Firefox atau lainnya.c. Pada bagian address, ketik localhost/phpmyadmin
d. Pada bagian Create new database ketik nama database misalnya S_Nilai, kemudian klik tombol Create.
e. Pada bagian Create new table, ketik nama tabel penulis di bagian Name.
f. Pada bagian Number of fields, isi dengan nilai 6, kemudian klik tombol Go.g. Atur bagian Field dan Length/Values seperti contoh berikut ini :
h. Atur Siswa_NISN sebagai Primary key dengan meng-klik ikon di sebelah kanan layar seperticontoh di atas
i. Kemudian klik tombol Save.
Dan akhirnya pembuatan tabel pertama bernama Siswa berhasil dibuat. Untuk selanjutnya,lakukan hal yang sama untuk pembuatan 6 buah tabel yang lainnya sesuai dengan contoh gambar struktur tabel dan relasi yang telah dijelaskan pada bagian sebelumnya.
Sebelumnya klik terlebih dahulu Database: S_Nilai di bagian atas layar, kemudian buatlah 1 buah tabel sesuai dengan ketentuan berikut ini
.* Khusus untuk tabel admin, isi data admin dengan admin dan passadmin dengan admin.
2. Membuat Struktur Hierarki Folder
Berikut ini adalah daftar folder yang harus dipersiapkan :
SMK ARTANITA 2
Nama Tabel : adminNo Field Type dan Length/Values1 Admin Varchar (20)2 Passadmin Varchar (20)
Modul PHP Ujikom SMK Paket 1
a. NilaiSiswa: Merupakan folder utama yang mengorganisis semua file dan folder yang akan kita
bangun, Anda juga dapat mengganti nama folder tersebut dengan nama Anda sendiri. Pada folder
inilah halaman utama atau halaman index bagi pengunjung disimpan. Folder ini disimpan di alamat
C:\wamp\www.
b. admin: Adalah folder yang dibuat di dalam folder NilaiSiswa yang telah dibuat pada langkah
pertama. Folder ini berisi semua file yang berhubungan dengan hak akses Administrator.
c. gambar: Adalah folder yang dibuat di dalam folder NilaiSiswa, berguna untuk menyimpan gambar-
gambar yang dibutuhkan dalam tahap desain interface program aplikasi.
d. image_foto: Adalah folder yang dibuat di dalam folder NilaiSiswa, berguna untuk menyimpan
gambar foto
e. include: Merupakan folder yang dibuat di dalam folder NilaiSiswa, berguna untuk menyimpan file-file
include, file ini akan digunakan pada semua halaman program, misalnya file untuk koneksi ke
database MySQL atau sistem session untuk keamana.
f. tpl: Adalah folder yang dibuat dalam folder NilaiSiswa. Tpl atau Template digunakan untuk
meletakkan file CSS (Cascading Style Sheet).
3. Pembuatan Desain Halaman dan Pengkodean
a. Membuat Halaman Administrator
Halaman ini digunakan untuk pengelolaan data pada sistem informasi nilai. Sebagai
halaman yang memiliki fungsi untuk mengelola semua halaman, maka halaman ini juga dapat dikatakan
sebagai halaman Administrator. Pada halaman ini terdapat batasan-batasan penggunaan, yaitu tidak
semua orang dapat masuk dan mengakses halaman ini, untuk dapat mengakses halaman ini Anda login
menggunakan username dan password yang hanya diketahui oleh seorang admin, sehingga pada sistem
yang ada dapat dijaga keamanannya semaksimal mungkin. Apabila Anda dapat mengakses halaman ini,
maka Anda dapat melakukan banyak hal, diantaranya memasukan data pasien, memperbaharui, bahkan
menghapus data siswa.
Membuat Halaman index.php
Untuk memulai pembuatan halaman utama Administrator, lakukan langkah-langkah berikut ini :
1) Aktifkan terlebih dahulu program aplikasi Macromedia Dreamweaver 8
Klik PHP
2) Pada pilihan Create New, klik pada pilihan PHP
3) Buatlah tampilan seperti berikut ini
4) Ubah mode tampilan menjadi Code, dengan meng-klik Code di bagian kiri
SMK ARTANITA 3
Modul PHP Ujikom SMK Paket 1
5) Kemudian tambahkan baris kode seperti contoh berikut ini:
6) Selanjutnya simpan dengan nama file index.php di folder admin. (C:\wamp\www\NilaiSiswa\admin)
Membuat halaman login.htmlUntuk pembuatan halaman login.html, berikut ini langkah-langkahnya :
1) Buat halaman baru dengan cara: klik File – New2) Pada bagian Category: pilih Basic page, pada bagian Basic page: pilih HTML, kemudian klik tombol
Create1.Pilih Basic Page 2.Pilih HTML
3.Klik Tombol Create
3) Ubah mode tampilan menjadi Design
4) Klik ikon untuk pembuatan Table
SMK ARTANITA 4
Modul PHP Ujikom SMK Paket 1
5) Atur tabel sesuai ketentuan berikut ini :
SMK ARTANITA 5
Modul PHP Ujikom SMK Paket 1
6) Pada bagian Properties, atur Align menjadi Center
7) Pada baris pertama, atur terlebih dahulu tampilan menjadi seperti berikut ini
8) Simpan pointer pada baris kedua, kemudian ubah Common menjadi Form1.Ubah menjadi Forms
2.Simpan pointer disini
9) Buatlah sebuah form dengan meng-klik icon Form
10) Aturlah properties sesuai ketentuan berikut
SMK ARTANITA 6
Modul PHP Ujikom SMK Paket 1
11) Ubah Form menjadi Common
ubah menjadi Common
12) Buatlah tabel dengan ketentuan sebagai berikut
SMK ARTANITA 7
Modul PHP Ujikom SMK Paket 1
13) Atur tampilan menjadi seperti ini
14) Ubah Common menjadi Form kembali15) Pastikan pointer berada di kolom kanan atas sejajar dengan Admin Id16) Buatlah satu buah Textfield dengan meng-klik ikon berikut ini
17) Jika muncul kotak dialog, klik Cancel18) Pada bagian Properties, atur sesuai contoh berikut
19) Ulangi langkah no. 16 sampai 18 untuk pembuatan Textfield yang kedua dengan pengaturan sebagai berikut
20) Simpan pointer di kolom pojok kanan bawah21) Buatlah tombol dengan meng-klik ikon Button
22) Jika muncul kotak dialog, klik Cancel23) Atur properties sesuai contoh berikut
24) Sehingga tampilan akhir menjadi seperti berikut ini
25) Kemudian simpan di folder admin, dengan nama login.html
Membuat halaman cek_admin.php
Pada saat tombol Login di-klik, proses akan ditujukan dan dikerjakan di halaman cek_admin.php. Untuk
itu kita harus membuat halaman cek_admin.php dengan langkah-langkah sebagai berikut :
1) Buat halaman baru dengan cara klik File – New
SMK ARTANITA 8
Modul PHP Ujikom SMK Paket 1
2) Pada bagian Category: pilih Dynamic page, pada bagian Dynamic page: pilih PHP, kemudian klik
tombol Create
3) Ubah mode tampilan menjadi Code
4) Sisipkan kode program seperti berikut ini diantara tag Body
<?php
session_start();
require(“../include/koneksi.php”);
$admin=$_POST[‘txtAdmin’];
$pass=$_POST[‘txtPass’];
$sql=”SELECT * FROM admin WHERE (admin=’$admin’ AND passadmin=’$pass’)”;
if(!$hasil=mysql_query($sql))
{
echo mysql_error();
return 0;
}
$ada_baris=mysql_num_rows($hasil);
if($ada_baris>=1)
{
$master=$admin;
session_register(“master”);
echo “<div align=center><strong>Anda berhak mengakses seluruh
halaman ini</strong></div>”;
include “menu_utama.php”;
exit;
}
else{echo “<div align=center><strong>Admin Id atau Passwordsalah!</strong></div>”;include “login.html”;exit;}?>
5) Kemudian simpan di folder admin, dengan nama cek_admin.php
Pada baris kode diatas, terdapat perintah include yang berfungsi untuk menyertakan file lain
bernama koneksi.php, untuk itu kita buatkan kode program dengan langkah-langkah sebagai
berikut :
1) Buatlah halaman baru dengan tipe PHP2) Kemudian sisipkan kode program diantara tag Body seperti contoh berikut ini :
3) Selanjutnya simpan di folder include dengan nama koneksi.php
SMK ARTANITA 9
Modul PHP Ujikom SMK Paket 1
Selain itu kita juga perlu mendeklarasikan fungsi session yang berfungsi untuk menampung Admin
Id selama mengakses semua halaman Administrator dan melakukan pengecekan apabila pengguna
belum Login sebagai Administrator, maka halaman yang dituju tidak dapat diakses. Berikut ini langkah-
langkah pembuatannya :]
1) Buat file baru dengan tipe PHP
2) Kemudian sisipkan kode berikut ini diantara tag Body
3) Kemudian simpan di folder include dengan nama session.php
Berikutnya adalah membuat halaman menu_utama.php yang berisi perintah untuk menampilkan menu
yang dimiliki oleh Administrator. Berikut ini adalah langkah-langkah pembuatannya :
1) Buatlah file baru dengan tipe PHP
2) Kemudian sisipkan kode berikut ini diantara tag Body
<?php
require("../include/session.php");
require("../include/koneksi.php");
$menu=$_POST[‘lstMenu’];
$Input=$_POST[‘btnInput’];
$Edit=$_POST[‘btnEdit’];
$Laporan=$_POST[‘btnLaporan’];
$Logout=$_POST[‘btnLogout’];
require_once "menu.html";
echo “<hr>”;
// Dikerjakan apabila tombol Input di-klik
if ($Input)
{
// memeriksa Form (droplist ) menu
if(!isset($menu)) $menu='';
if($menu==’siswa’) include "in_siswa.html";
}
// di kerjakan apabila tombol Edit di-klik
else if ($Edit)
{
// memeriksa Form (droplist ) menu
if(!isset($menu)) $menu='';
if($menu==’siswa’) include “olah_siswa.php”;
}
//dikerjakan apabila tombol Laporan di-klik
SMK ARTANITA 10
Modul PHP Ujikom SMK Paket 1
else if ($Laporan)
{
// memeriksa Form (droplist ) menu
if(!isset($menu)) $menu='';
if($menu==’siswa’) include “lap_siswa.php”;
}
// dikerjakan apabila tombol Logout di-klik
else if ($Logout)
{
require_once "logout.php";
}
?>
3) Simpan di folder admin dengan nama menu_utama.php
Selanjutnya adalah membuat tampilan menu untuk Administrator. Berikut ini adalah langkah-langkah
pembuatannya :
1) Buatlah file baru dengan kategori Basic page bertipe HTML
2) Ubah mode tampilan menjadi Design
3) Buatlah tabel dengan ketentuan sebagai berikut :
SMK ARTANITA 11
Modul PHP Ujikom SMK Paket 1
4) Ubah properti Align menjadi Center untuk mengatur posisi tabel menjadi di tengah
5) Pastikan pointer berada di dalam tabel, kemudian sisipkan komponen Form dan atur bagian
Properties seperti berikut ini :
6) Kemudian buatlah tabel di dalam area form tadi dengan ketentuan sebagai berikut :
7) Kemudian gabungkan kolom pada baris pertama dengan cara blok 4 kolom tersebut, kemudian di
bagian properties klik ikon Merge selected cells using spans
Blok 4 kolom
SMK ARTANITA 12
Modul PHP Ujikom SMK Paket 1
klik ikon Merge selected using spans
8) Lakukan hal yang sama untuk menggabungkan kolom pada baris kedua.
9) Pada baris pertama, ketik teks Pengelolaan Halaman Administrator, dan atur warna background
nya
10) Pada baris kedua, tambahkan List/Menu
11) Atur bagian properti name menjadi lstMenu, kemudian klik tombol List Values...