29
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

Program Aplikasi Nilai Siswa

Embed Size (px)

Citation preview

Page 1: Program Aplikasi Nilai Siswa

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.

FK_MEMILIKI

FK_TERDIRI_DARI

FK_MEMPUNYAI

FK_NILAI

FK_NILAI2

FK_NILAI3

FK_RELATIONSHIP_4

FK_MELIPUTI

siswa

Siswa_NISNKompetensi_kodeSiswa_namaSiswa_alamatSiswa_tgl_lahirSiswa_foto

char(10)char(10)varchar(30)varchar(50)datelongblob

<pk><fk>

wali_murid

Wali_idSiswa_NISNWali_nama_ayahWali_pekerjaan_ayahWali_nama_ibuWali_pekerjaan_ibuWali_alamatWali_telpon

char(10)char(10)varchar(25)varchar(15)varchar(25)varchar(15)varchar(50)int

<pk><fk>

guru

Guru_kodeKompetensi_kodeGuru_NIPGuru_NamaGuru_alamatGuru_telpon

char(10)char(10)char(16)varchar(25)varchar(50)int

<pk><fk>

kompetensi_keakhlian

Kompetensi_kodebidang_kodeKompetensi_nama

char(10)char(10)varchar(25)

<pk><fk>

standar_kompetensi

SK_kodeKompetensi_kodeSK_namaSK_kelas

char(10)char(10)varchar(60)text

<pk><fk>

nilai

Siswa_NISNGuru_kodeSK_kodeNilai_angkaNilai_huruf

char(10)char(10)char(10)float(4)text

<pk,fk1><pk,fk2><pk,fk3>

bidang_studi

bidang_kodebidang_nama

char(10)varchar(30)

<pk>

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

Page 2: Program Aplikasi Nilai Siswa

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)

Page 3: Program Aplikasi Nilai Siswa

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

Page 4: Program Aplikasi Nilai Siswa

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

Page 5: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

5) Atur tabel sesuai ketentuan berikut ini :

SMK ARTANITA 5

Page 6: Program Aplikasi Nilai Siswa

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

Page 7: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

11) Ubah Form menjadi Common

ubah menjadi Common

12) Buatlah tabel dengan ketentuan sebagai berikut

SMK ARTANITA 7

Page 8: Program Aplikasi Nilai Siswa

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

Page 9: Program Aplikasi Nilai Siswa

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

Page 10: Program Aplikasi Nilai Siswa

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

Page 11: Program Aplikasi Nilai Siswa

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

Page 12: Program Aplikasi Nilai Siswa

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

Page 13: Program Aplikasi Nilai Siswa

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...

12) Isi sesuai dengan ketentuan sebagai berikut :

Item Label Value

-->Pilih Bagian yang dikelola<-- bkn_pilihan

------------------------------------------- bkn_pilihan

Siswa siswa

Guru guru

Nilai nilai

Bidang Studi bidang_studi

Kompetensi Keahlian kompetensi_keahlian

Standar Kompetensi standar_kompetensi

Wali Murid wali_murid

13) Buatlah 4 buah Button di baris ketiga dengan ketentuan sebagai berikut :

Button Name Value

btnInput Input Data

btnEdit Edit Data

btnLaporan Laporan

btnLogout Logout

14) Hingga tampilan akhirnya bisa dilihat seperti contoh di bawah ini

15) Kemudian simpan di folder admin dengan nama menu.html

Langkah selanjutnya adalah membuat halaman Input Data yang merupakan interface atau antarmuka

untuk melakukan input data. Ada 7 halaman Input Data yaitu :

in_siswa.html

in_guru.php

in_wali_murid.html

in_nilai.html

in_standar_kom.html

in_kom_keahlian.html

in_bidang_studi.htmlSMK ARTANITA 13

Page 14: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

Membuat halaman in_siswa.html

Langkah-langkah pembuatanya adalah sebagai berikut :

1) Buatlah sebuah halaman baru bertipe HTML

2) Buatlah tabel dengan pengaturan sebagai berikut :

SMK ARTANITA 14

Page 15: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

3) Atur posisi tabel menjadi Center, kemudian pada baris pertama ketikkan teks INPUT DATA SISWA,

sekaligus atur warna latar belakangnya

4) Simpan posisi pointer di baris kedua, kemudian sisipkan komponen Form

5) Atur bagian properties seperti berikut ini :

6) Kemudian buatlah tabel di dalam area form yang telah dibuat sebelumnya dengan ketentuan

sebagai berikut :

7) Atur lebar kolom sesuai kebutuhan dan ketikkan teks yang diperlukan, khusus untuk kolom kedua,

ketiklah : pada setiap sel-nya

SMK ARTANITA 15

Page 16: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

8) Tambahkan Textfield di bagian NISN, kemudian atur bagian properties seperti berikut ini :

9) Tambahkan Lst/Menu di bagian Kompetensi Keahlian dengan nama lstKK, kemudian atur bagian

properties seperti berikut ini :

10) Tambahkan Textfield di bagian Nama Siswa, kemudian atur bagian properties seperti berikut ini :

11) Tambahkan Textarea di bagian Alamat, kemudian atur bagian properties seperti berikut ini:

SMK ARTANITA 16

Page 17: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

12) Tambahkan Textfield di bagian Tanggal Lahir kemudian atur bagian properties seperti berikut ini :

13) Tambahkan FileField di bagian Foto Siswa kemudian atur bagian properties seperti berikut ini :

14) Tambahkan Button di bagian bawah, kemudian atur bagian properties seperti berikut ini :

15) Sehingga hasil tampilan akhirnya seperti contoh berikut ini :

16) Tambahkan kode program di bagian lstKKuntuk mengambil data Kompetensi Keahlian dari table

kompetensi_keahlian, dengan cara klik lstKK, kemudian ubah mode tampilan menjadi Code

17) Kemudian sisipkan kode program berikut ini diantara tag <select> :

SMK ARTANITA 17

Page 18: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

18) Kemudian simpan di folder admin dengan nama in_siswa.html

Selanjutnya adalah membuat halaman antarmuka untuk menentukan data mana yang ingin

diperbaharui maupun dihapus. Berikut ini adalah halaman-halaman yang akan kita buat:

olah_siswa.php

olah_guru.php

olah_nilai.php

olah_bidang_studi.php

olah_kom_keahlian.php

olah_standar_kom.php

olah_wali_murid.php

Membuat halaman olah_siswa.php

Langkah-langkah pembuatanya adalah sebagai berikut :

1) Buatlah sebuah halaman baru bertipe PHP

2) Buatlah tabel dengan pengaturan sebagai berikut :

SMK ARTANITA 18

Page 19: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

3) Atur posisi tabel menjadi Center, kemudian pada baris pertama ketikkan teks OLAH DATA SISWA,

sekaligus atur warna latar belakangnya

4) Simpan posisi pointer di baris kedua, kemudian sisipkan komponen Form

5) Atur bagian properties Form name : frmOlahSiswa dan Action : exe_siswa.php seperti berikut ini :

6) Kemudian buatlah tabel di dalam area form yang telah dibuat sebelumnya dengan ketentuan

sebagai berikut :

7) Gabungkan 2 (dua) kolom pada baris pertama sehingga tampilannya menjadi seperti berikut ini :

8) Kemudian tambahkan List/Menu, lalu atur bagian properti name menjadi lstSiswa, pada bagian

List Values... isi sesuai dengan ketentuan sebagai berikut :

Item Label Value

-->Tentukan Nama Siswa<-- bkn_pilihan

--------------------------------------- bkn_pilihan

9) Tambahkan Button di bagian kiri, kemudian atur bagian properties seperti berikut ini :

SMK ARTANITA 19

Page 20: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

10) Tambahkan Button di bagian kanan, kemudian atur bagian properties seperti berikut ini :

11) Sehingga tampilan akhirnya menjadi seperti berikut ini :

12) Tambahkan kode program di bagian lstSiswa untuk mengambil data siswa dari table siswa, dengan

cara klik lstSiswa, kemudian ubah mode tampilan menjadi Code

13) Kemudian sisipkan kode program berikut ini diantara tag <select> :

Catatan :Hilangkan tanda kutip (“) diantara bkn_pilihan dan selected

14) Kemudian simpan di folder admin dengan nama olah_siswa.php

Selanjutnya adalah membuat halaman antarmuka atau form untuk proses update data. Namun

secara prinsip dan tampilan, hampir sama dengan antarmuka form input data. Yang membedakan

hanyalah jika form input data semua komponen form semuanya kosong, sedangkan form update data

SMK ARTANITA 20

Page 21: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

semua komponen sudah terisi dengan data yang telah diinput sebelumnya untuk selanjutnya akan kita

update atau perbaharui jika memang diperlukan. Berikut ini adalah halaman-halaman yang akan kita

buat:

ed_pasien.php

ed_guru.php

ed_nilai.php

ed_bidang_studi.php

ed_kom_keahlian.php

ed_standar_kom.php

ed_wali_murid.php

Membuat halaman ed_siswa.php

Langkah-langkah pembuatanya adalah sebagai berikut :

1) Aktifkan kembali file/halaman in_siswa.html

2) Lakukan proses Save As dengan cara klik menu File – Save As

3) Ubah nama file menjadi ed_siswa dan Save as type menjadi PHP Files (Pastikan folder yang dituju

adalah folder admin)

4) Ubah tampilan menjadi mode Design

5) Ubah teks INPUT DATA SISWA menjadi UPDATE DATA SISWA

6) Klik btnSimpan untuk melakukan proses perubahan. Ubah properti Button name menjadi btnUpdate

dan Value menjadi Update

7) Ubah tampilan menjadi mode Code, kemudian sisipkan kode php setelah <body> seperti contoh

berikut ini:

SMK ARTANITA 21

Page 22: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

8) Tambahkan kode value=”<?php echo “$NISN”; ?>” pada objek txtNISN sehingga menjadi seperti

berikut ini :

9) Tambahkan value=”<?php echo “$nama”; ?>” pada objek txt_Nama sehinggamenjadi seperti

berikut ini

10) Sisipkan kode <?php echo “$alamat”; ?> pada objek textarea txt_Alamat sehingga menjadi seperi

berikut ini :

11) Tambahkan value=”<?php echo “$ttl”; ?>” pada objek txt_tgl sehingga menjadi seperti berikut ini :

12) Terakhir lakukan penyimpanan setelah melakukan seluruh proses modifikasi sebelumnya.

Membuat File Eksekusi Program

Beberapa form yang telah kita buat sebelumnya seperti form input data, olah data dan edit data belum

mempunyai file untuk mengeksekusi setiap perintah dari tombol masing-masing form. Namun dari semua

form yang telah kita buat, semuanya mengacu ke satu file yang sama. Maka dari itu file eksekusi harus

menyeleksi tombol dari form mana yang nantinya akan dieksekusi oleh file eksekusi.

Berikut ini daftar file yang akan dibuat :

exe_siswa.php

exe_guru.php

exe_nilai.php

exe_bidang_studi.php

exe_kom_keahlian.php

exe_standar_kom.php

exe_wali_murid.php

Membuat File exe_siswa.php

Langkah-langkah pembuatannya adalah sebagai berikut :

1) Tambahkan sebuah halaman baru bertipe PHP

2) Ubah mode tampilan menjadi Code, kemudian ketik kode berikut ini :

<?php

include("../include/koneksi.php");

require("../include/session.php");

require "menu_utama.php";

$NISN=$_POST['txtNISN'];

$kodekomp=$_POST['lstKK'];

$nama=$_POST['txt_Nama'];

$alamat=$_POST['txt_Alamat'];

$ttl=$_POST[‘txt_tgl’];

$foto = $_FILES['foto']['name'];

if (strlen($foto)>0) { //upload

if (is_uploaded_file($_FILES['foto']['tmp_name'])) {

move_uploaded_file ($_FILES['foto']['tmp_name'], "../image_foto/".$foto);

}

}

SMK ARTANITA 22

Page 23: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

$btnSimpan=$_POST['btnSimpan'];

$btnEdit=$_POST['btnEdit'];

$btnUpdate=$_POST['btnUpdate'];

$btnHapus=$_POST['btnHapus'];

if(isset($btnSimpan)) //Jika tombol Simpan pada form Input Data diklik

{

$sql="INSERT INTO

siswa(Siswa_NISN,Kompetensi_kode,Siswa_nama,Siswa_alamat,Siswa_tgl_lahir,Siswa_foto)

VALUES

('$NISN','$kodekomp','$nama','$alamat','$ttl','$foto')";

$simpan=mysql_query($sql);

echo "<center>Data Siswa $nama telah tersimpan</center>";

include "in_siswa.html";

}

else if(isset($btnUpdate)) //Jika tombol Update pada Form Update Data diklik

{

$tanggal = $_POST['tanggal'];

$sql="UPDATE siswa SET

Kompetensi_kode='$kodekomp',Siswa_nama='$nama',Siswa_alamat='$alamat',Siswa_tgl_lahir='$tan

ggal' where Siswa_NISN='$NISN'";

$update=mysql_query($sql);

echo "<center>$sql Data Siswa $nama telah diupdate</center>";

include "ed_siswa.php";

}

else if($btnHapus) //Jika tombol Hapus pada form Olah Data diklik

{

$nisn = $_POST['lstSiswa'];

$sql="DELETE FROM siswa WHERE Siswa_NISN='$nisn'";

$hapus=mysql_query($sql);

echo "<center>Data siswa $KodePsn telah dihapus</center>";

include "olah_siswa.php";

}

else if($btnEdit) //Jika tombol Edit pada form Olah Data diklik

{

include "ed_siswa.php";

}

<?

3) Kemudian simpan di folder admin dengan nama exe_siswa.php

SMK ARTANITA 23

Page 24: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

Membuat File Laporan

Selanjutnya adalah membuat halaman untuk menampilkan data yang telah diinput sebelumnya atau

biasa disebut halaman report. Berikut ini adalah halaman yang akan dibuat :

lap_siswa.php

lap_guru.php

lap_nilai.php

lap_bidang_studi.php

lap_kom_keahlian.php

lap_standar_kom.php

lap_wali_murid.php

Membuat halaman lap_siswa.php

Berikut ini langkah-langkah pembuatannya :

1) Tambahkan sebuah halaman baru bertipe PHP

2) Atur mode tampilan menjadi Design, kemudian buatlah tabel dengan ketentuan seperti berikut ini

3) Atur align menjadi center untuk mengatur posisi tabel di tengah.

4) Ketik teks LAPORAN SISWA di baris pertama tabel sehingga tampilannya menjadi sepertiini:

5) Sisipkan kembali tabel baru di baris kedua pada tabel pertama dengan ketentuan seperti berikut ini :

SMK ARTANITA 24

Page 25: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

6) Ketik teks di masing-masing kolom tabel dan atur lebar kolom sesuai dengan kebutuhan sehingga

hasilnya seperti contoh berikut ini :

7) Ubah mode tampilan menjadi Code, kemudian sisipkan kode php setelah tag <body> seperti berikut

ini :

8) Kemudian sisipkan kembali kode php diantara tag penutup </tr> pertama dan tag pembuka<tr> yang

kedua seperti contoh berikut ini :

9) Selanjutnya simpan file tersebut di folder admin dengan nama lap_siswa.php

Membuat file logout.php

Terakhir adalah membuat halaman/file logout yang berfungsi untuk menghapus data yang tersimpan di

variabel session setiap kali berhasil melakukan proses login. File ini berfungsi untuk keamanan

data/halaman yang telah kita buat sebelumnya agar setiap kali telah melakukan proses logout, beberapa

halaman yang penting tidak dapat diakses sebelum melakukan proses login ulang.

Berikut ini adalah langkah-langkah pembuatan file logout.php :

1) Tambahkan sebuah halaman baru bertipe PHP

2) Ubah mode tampilan menjadi Code, kemudian ketik kode berikut ini :

SMK ARTANITA 25

Page 26: Program Aplikasi Nilai Siswa

Modul PHP Ujikom SMK Paket 1

<?php

echo “<center><b>Anda telah Logout dari Sistem!</b></center>”;

session_unset();

session_destroy():

include “login.html”;

?>

3) Kemudian simpan di folder admin dengan nama logout.php

SMK ARTANITA 26