bab 2 paduan installasi php & mysql · paduan installasi php & mysql sebelum belajar...

BAB 2

PADUAN INSTALLASI PHP & MySQL

Sebelum belajar membuat program aplikasi,anda harus

mempersiapkan dulu PHP dan MySQL-nya,yaitu dengan cara

menginstal paket XAMPP,maka kebutuhan untuk belajar

membangun aplikasi berbasis web dapat dilakukan,karena didalam

satu paket XAMPP sudah tersedia dukungan PHP,MySQL,Apache

dan juga phpmyadmin.

1.1 Mendapatkan Software Xampp

Software XAMPP dapat diperoleh secara gratis dari

www.ApacheFriends.org,dari website tersebut anda bisa

mendownload paket server XAMPP dengan versi yang sesuai

system operasi yang anda pakai.

1.2 Menginstal Software Xampp

Pada buku ini,program aplikasi dibangun dengan menggunakan

PHP pada paket XAMPP 5.jadi,anda juga harus mendownload versi

tersebut,sehingga proses belajar akan lebih lancer,berikut

detailnya:

1. Buka folder XAMPP yang sudah didownload dengan cara klik

dua kali pada file tersebut

http://www.apachefriends.org,dari/

Gambar 2.1 software xampp yang sudah didwonload

2. Pilih bahasa tampilannya,yaitu;English,klik tombol ok dan klik

next untuk melanjutkannya.

3. Pada halaman berikut,silahkan pilih daftar komponen yang

akan diinstal,jika dibutuhkan bisa diaktifkan semuanya,lalu

klik tombol next.

Gambar 2.2 menginstal komponen XAMPP Server

4. Jendela XAMPP for Windows sebagai awal proses installasi

akan tampil.biarkan folder tujuannya tetap pada c:\xampp.

Gambar 2.3 Proses pertama kali menginstal XAMPP

5. Dari jendela diatas,klik tombol next,lalu klik next lagi

sampai proses penginstallan selesai.

6. Tunggu sampai prosesnya selesai.

7. Jika sudah selesai(completing),kemudian klik tombol finish.

Sekarang,XAMPP server sudah terinstal pada computer.anda

akan mendapatkan shortcut XAMPP Control Panel pada halaman

Dekstop.juga pada menu start.

XAMPP Control Panel ini nanti harus dijalankan,gunanya untuk

mempermudah dalam menjalankan modul servis MySQL server dan

Apache web server,caranya dengan mengklik tombol start.

1.3 Menjalankan Sever XAMPP

Dari fasilitas XAMPP Control Panel,anda dapat menjalankan

servis MySQL dan Apache,berikut caranya :

1. Klik menu start,lalu klik XAMPP Control Panel.

2. Jalankan modul Apache web server,dengan cara klik tombol

start sampai statusnya tertulis running.

Gambar 2.4 Menjalankan servis MySQL

3. Pada modul MySQL server,klik tombol start,sehingga

statusnya juga running.

4. Setelah keduanya dapat dijalankan,klik tombol exit.

Jika status pada Apache dan MySQL sudah running,berarti

web server Apache dan database MySQL server sudah aktif dan

sekarang PHP dan MySQL siap digunakan.anda dapat mencobanya

dengan mengakses mozila firefox,ketikan alamat

http://localhost/.

1.4 Memahami Folder Database MySQL

Pada saat menginstal paket XAMPP server pada drive C:/,maka

anda akan memiliki program database MySQL server yang

disimpan pada path;C:\xampp\mysql.didalamnya ada folder

seperti; bin,data & lib.lihat gambar dibawah ini:

http://localhost/

Gambar 2.5 Struktur folder MySQL Server

Di sana ada folder data yang berfungsi untuk menyimpan

semua database yang dibuat dari MySQL, termasuk file database

utama untuk pengaturan server MySQL,yaitu mysql.sedangkan

untuk database data yang dibuat dan dikelola didalam MySQL

sever,maka semua nama database tersebut akan terlihat seperti

folder(direktori) didalam data.contoh:

Gambar 2.6 Folder utama penyimpanan database yang dimiliki

MySQL

1.5 Memahami Folder Web Server

Apache memiliki folder utama penyimpanan data aplikasi web

pada htdocs,alamat lengkapnya adalah di C:\xampp\htdocs,dari

folder itulah semua file program yang dibangun harus

disimpan.biasanya,dalam satu proyek kerja membuat satu folder

didalam htdocs,yang juga bisa dinamakan dengan nama

proyek,misalkan; sekolah(untuk aplikasi system informasi sekolah).

Alamat C:\xampp\htdocs dapat dijalankan dari browser mozila

firefox dengan alamat http://localhost/, jika didalam htdocs

membuat program aplikasi dengan nama folder sekolah,maka dari

browser dapat menjalankannya dengan alamat

http://localhost/sekolah/.

Supaya setiap kali membuka alamat http://localhost/ dapat

langsung melihat daftar folder kerja atau folder program

aplikasi,maka anda perlu menghapus semua file gambar dan

index.html dan index.php bawaan XAMPP yang sudah ada disana.

1.6 Menjalankan phpmyadmin

Untuk memudahkan dalam mengakses database MySQL,anda

dapat menggunakan software phpmyadmin,yaitu MySQL Client

berbasis web yang sudah ada pada saat menginstal paket XAMPP

Server.cara mengaksesnya adalah:

1. Pastikan modul MySQL & Apache sudah dijalankan dari

XAMPP Control Center.

2. Buka browser mozila firefox,atau IE,atau bisa juga google

chrome. 3. Pada kotak alamat,ketikkan

http://localhost/phpmyadmin/,lalu tekan enter.

http://localhost/

http://localhost/sekolah/

http://localhost/

http://localhost/phpmyadmin/,lalu

Gambar 2.7 Tampilan Utama phpmyadmin

Lihat tampilan phpmyadmin,pada bagian kiri terlihat daftar

database bawaaan MySQL dan database yang sudah pernah anda

buat,sedangkan pada bagian kanan berisi menu dan tools untuk

melakukan operasional manajemen database dan data.

Lewat fasilitas yang disediakan phpmyadmin,anda bisa membuat

database baru dengan mudah,membuat tabel baru,serta

memodifikasi database dan data yang sudah dibuat.selain

itu,semua operasi manajemen data juga bisa dilakukan,yaitu

menyimpan data,menampilkan,memperbaiki data dan menghapus

data.disana juga tersedia fasilitas SQL Editor,lewat fasilitas ini

anda bisa mengetikkan perintah SQL secara manual tanpa harus

masuk pada halaman command prompt(DOS).

BAB 3

MERANCANG DAN MEMBUAT DATABASE

Pada BAB 3 ini anda akan kami ajarkan untuk mendesain

rancangan database dan membuat database yang dibutuhkan dalam

aplikasi E-learning sekolah.tools yang akan kita pakai untuk

memudahkan dalam implementasi pembuatan database MySQL

adalah phpmyadmin,dengan aplikasi ini semua pekerjaan membuat

database dan tabel menjadi lebih mudah dan cepat.

Untuk membuat system informasi pembelajaran e-

learning,setidaknya kita memerlukan 9 tabel.berikut adalah

detailnya:

Tabel pelajaran

Tabel user

Tabel guru

Tabel siswa

Tabel kelas

Tabel kelas_siswa

Tabel mengajar

Tabel tugas_belajar

Tabel materi_belajar

Semua tabel akan berelasi datanya,lewat kode kunci utama

yang menjadi kunci tamu pada tabel yang membutuhkan.

2.1 Membuat Database Baru

Untuk membangun database dan tabel,kita akan menggunakan

aplikasi phpmyadmin yang sudah terinstal saat menginstal

software XAMPP server.pekerjaan pertama yang harus anda

lakukan adalah membuat database baru,database dibuat dengan

nama yang sesuai dengan program aplikasi yang dibangun.sebagai

contoh,pada aplikasi E-learning,kita dapat membuat database

dengan nama elearning_db.berikut caranya:

1. Jalankan browser Mozilla firefox/google chrome.

2. Buka phpmyadmin dengan mengetikkan alamat

http://localhost/phpmyadmin/, lalu tekan enter.

Gambar 3.1 Menjalankan program phpmyadmin

3. Klik menu server:localhost atau server:127.0.0.1 yang ada

di bagian atas.

4. Masukan nama database elearning_db,lalu klik tombol

create.

Gambar 3.2 Membuat database elearning_db

5. Setelah database dibuat,anda harus mengaktifkan database

tersebut.caranya,klik nama database elearning_db yang ada

di jendela bagian kiri.

6. Setelah database aktif,anda bisa membuat tabel

didalamnya.

http://localhost/phpmyadmin/

3.2 Membuat Tabel Pelajaran

Pada bagian ini anda akan membuat tabel untuk menyimpan data

pelajaran,selain membuat tabel dan struktur datanya,anda akan

belajar menambah data baru ke dalam tabel.

3.2.1 Membuat Tabel Pelajaran

Data pelajaran disimpan didalam tabel bernama

pelajaran,didalam tabel ini hanya ada 2 kolom saja,yaitu untuk

menyimpan data kode dan nama.berikut adalah desain tabelnya:

Tabel 3.1 Desain rancangan Tabel pelajaran

Nama Tipe Data Keterangan

Kd_pelajaran Char(3) Primary key

Nm_pelajaran Varchar(100)

Pada tabel pelajaran,kolom kd_pelajaran dijadikan sebagai

kolom kunci primer(primary key).berikut cara membuatnya dari

phpmyadmin.

1. Buka atau aktifkan database yang sudah dibuat.caranya,klik

nama elearning_db yang ada dihalaman kiri.

2. Dari halaman create table,buat nama tabel;pelajaran,dan

jumlah kolomnya adalah;2,lalu klik tombol go.

3. Sekarang anda dapat menentukan desain struktur

tabelnya,masukan nama kolom pada name,tipe data pada

type serta panjang datanya pada length/values.contohnya:

Gambar 3.3 Desain struktur tabel pelajaran

4. Pada bagian index,kolom kd_pelajaran diberikan pilihan opsi

primary.

5. Pada bagian storage engine,pilih type databasenya adalah

MyISAM. 6. Jika sudah,klik tombol save.

Gambar 3.4 Tampilan struktur data tabel pelajaran

3.2.2 Menyimpan Data Pelajaran

Setelah tabel pelajaran selesai dibuat,sekarang anda belajar

menyimpan data pelajaran kedalam tabel pelajaran,yaitudengan

memanfaatkan fasilitas yang dimiliki phpmyadmin.caranya adalah:

1. Dari jendela kiri phpmyadmin,klik nama tabel pelajaran.

2. Jika tabel sudah aktif,klik menu insert yang ada pada menu

bagian atas.

3. Dari halaman masukan yang tampil,anda dapat memasukan 2

data pelajaran sekaligus,masukan kode dan nama pelajaran

pada kolom yang tersedia.contoh datanya adalah:

Tabel 3.2 contoh data pelajaran

Kode Nama Pelajaran

P01 Bahasa Indonesia

P02 Bahasa Inggris

P03 Ipa

P04 Matematika

Gambar 3.5 Contoh memasukan data pelajaran

4. Jika sudah,klik tombol go.

Kemudian anda dapat melihat hasilnya dengan cara klik menu

browse,maka semua data pelajaran yang telah disimpan dalam

tabel akan ditampilkan.seperti contohnya:

Gambar 3.6 Contoh data pelajaran yang berhasil disimpan

2.3 Membuat Tabel User

Pada bagian ini anda dapat membuat tabel untuk menyimpan

data user.perlu anda pahami,bahwa semua hak akses login untuk

megakses program akan disimpan sebagai data user,nama tabelnya

adalah user.

Didalam tabel user,akan dibuat kolom username dan password

yang berisi kata kunci untuk login masuk kedalam program,isi

datanya akan dienskripsi,sehingga lebih aman tidak mudah dibaca

orang lain.berikut desainnya:

Tabel 3.3 Desain rancangan tabel user

Nama Tipe data Keterangan

Kd_user Char(3) Primary key

Nm_user Varchar(100)

Username Char(20)

Password Varchar(100)

Tabel user ini memiliki primary key pada kolom kd_user.pada

kolom data password dibuat panjangnya 200,meskipun data

password yang biasa dinputkan hanya berkisar sampai 10 karakter

saja,namun panjang space tersebut menyediakan hasil enskripsi

yang dibuat program,anda akan belajar menggunakan enskripsi

MD5.berikut cara membuatnya dari phpmyadmin.

1. Pilih nama database elearning_db.

2. Dari halaman create table,masukan nama tabel user,dan

masukan jumlah kolomnya 7,lalu klik tombol go.

3. Sekarang anda dapat mendesain struktur tabelnya,masukan

nama kolom tabel pada name,tipe data pada type,dan panjang

datanya pada length/values.

4. Pada nama kolom kd_user,pilih opsi primary dari bagian

index.

5. Pada bagian storage engine,pilih tipe databasenya adalah

MyISAM.

6. Jika sudah klik tombol save.

2.4 Membuat Tabel Guru

Pada bagian ini anda akan membuat tabel untuk menyimpan

data guru.data ini akan disimpan didalam tabel bernama

guru,didalam tabel ini terdapat kolom untuk menyimpan akun

username dan password untuk hak login guru.berikut desainnya:

Tabel 3.4 Desain rancangan tabel guru


Kd_guru Char(4) Primary key

Nm_guru Varchar(100)

Nip Int(20)

Agama Varchar(20)

Tempat_lahir Varchar(100)

Tanggal_lahir Date

kelamin Char(1)

Alamat Varchar(200)

No_telepon int(20)

Foto Varchar(200)

Username_guru Varchar(20)

Password_guru Varchar(100)

Tabel guru ini memliki primary key pada kolong

kd_guru.berikut cara membuatnya dari phpmyadmin.


2. Dari halaman create table,masukan nama tabel guru,dan



nama kolom tabel pada name,tipe data pada type,dan

panjang datanya pada length/values.

4. Pada nama kolom kd_guru,pilih opsi primary dari bagian

index.


MyISAM.


2.5 Membuat Tabel Siswa

Pada bagian ini anda akan membuat tabel untuk menyimpan

data siswa.siswa adalah peserta dalam media pembelajaran ini.data

siswa disimpan dalam tabel siswa,didalam tabel ini juga dilengkapi

dengan kolom untuk menyimpan data foto,dan juga ada kolom untuk

menyimpan data foto,dan juga ada kolom untuk menyimpan data

tanggal lahir.selain itu,tabel ini dilengkapi dengan kolom untuk

menyimpan username dan password untuk hak login siswa berikut

desainnya:

Tabel 3.5 Desain rancangan Tabel siswa


Kd_siswa Char(5) Primary key

Nm_siswa Varchar(100)

Nis int(20)

Kelamin Char(1)

Agama Varchar(20)

Tempat_lahir Varchar(100)

Tanggal_lahir Date

Alamat Varchar(200)

No_telepon int(20)

Foto Varchar(200)

Username_siswa Varchar(20)

Password_siswa Varchar(100)

Didalam tabel siswa,kolom kd_siswa yang akan dijadikan

sebagai primary key.berikut cara membuatnya.


2. Dari halaman create table,masukan nama tabel siswa,dan





4. Pada nama kolom kd_siswa,pilih opsi primary dari bagian

index.


MyISAM.


2.6 Membuat Tabel Kelas

Didalam tabel ini,kolom kd_kelas yang akan dijadikan sebagai

kolom primary key,sedangkan kd_guru akan dijadikan sebagai

foreign key.berikut ini cara membuatnya:

Tabel 3.6 Desain rancangan tabel kelas


Kd_kelas Char(3) Primary key

Nm_kelas Varchar(30)

Kd_guru Char(4)


2. Dari halaman create table,masukan nama tabel kelas,dan





4. Pada nama kolom kd_kelas,pilih opsi primary dari bagian

index.


MyISAM.


2.7 Membuat Tabel Kelas Siswa

Tabel kelas siswa dipakai untuk menyimpan daftar siswa yang

masuk kedalam kelas tersebut,tabel ini dibuat dengan nama

kelas_siswa.

Didalam tabel kelas_siswa,kolom id yang akan dijadikan sebagai

kolom kunci primary key dan datanya dibuat berurutan secara

otomatis dengan tipe data auto increment.berikut cara

membuatnya:

Tabel 3.7 Desain rancangan tabel kelas_siswa


Id Int(6) Primary key

Auto increment

Kd_kelas Char(3)

Kd_siswa Char(5)


2. Dari halaman create table,masukan nama tabel

kelas_siswa,dan masukan jumlah kolomnya 3,lalu klik tombol

go. 3. Sekarang anda dapat mendesain struktur tabelnya,masukan



4. Pada nama kolom id,pilih opsi primary dari bagian index.

5. Pada nama kolom id,beri tanda centang pada cekbox A_I.


MyISAM.


Selain tabel kelas_siswa,untuk dapat membuat kelas siswa

dibutuhkan tabel bantu yaitu tmp_kelas.tabel bantu ini dpakai

untuk memudahkan program dalam menampung data siswa saat

memilih siswa pada form pembuatan kelas siswa.desain tabelnya

adalah:

Tabel 3.8 Desain rancangan tabel tmp_kelas

Nama Tipe Data Keterangan

Id Int(5) Primary key

Auto_increment

Kd_siswa Char(5)

Dari desain tabel diatas,kolom id dibuat sebagaikolom dengan

data urut otomatis menggunakan auto increment,sedangkan kolom

kd_siswa adalah data yang berasal dari tabel siswa.berikut cara

membuatnya:

1. buka database elearning_db.

2. Dari halaman create table,buat nama tabel;tnm_kelas,dan




panjang datanya pada length/values.contoh:

4. Pada nama kolom id,pilih opsi primary dari bagian index.

5. Pada nama kolom id,beri tanda centang pada cekbox A_I.


MyISAM.


2.8 Membuat Tabel Mengajar

Sekarang kita akan membuat tabel mengajar,tabel ini dipakai

untuk menyimpan daftar jadwal kegiatan belajar mengajar,didalam

tabel ini terhubung beberapa data,yaitu data kelas,pelajaran dan

guru.

Tabel 3.9 Desain rancangan tabel mengajar


Kd_mengajar Char(5) Primary key

Kd_kelas Char(3)

Kd_pelajaran Char(3)

Kd_guru Char(4)

Hari Varchar(100)

Jam Varchar(5)

Ruang Varchar(5)

Nama tabel yang akan dibuat adalah mengajar,didalam tabel ini

terdapat3 kolom kunci tamu, yaitu kd_kelas,kd_pelajaran,&

kd_guru.berikut cara membuatnya:



mengajar,dan masukan jumlah kolomnya 7,lalu klik tombol

go.




4. Pada nama kolom kd_mengajar,pilih opsi primary dari

bagian index.


MyISAM.


2.9 Membuat Tabel Materi

Sekarang kita akan tabel untuk menyimpan data materi

belajar,data ini dilengkapi dengan nama file data materi yang

dipaket dalam bentuk arsip(zip).nama tabelnya adalah

materi_belajar,dengan struktur data seperti berikut:

Tabel 3.10 Desain rancangan tabel materi_belajar


Kd_materi Char(5) Primary key

Nm_materi Varchar(100)

Keterangan Varchar(100)

File_materi Varchar(200)


Kd_guru Char(4)

Pada tabel ini ada kolom kd_materi yang menjadi primary

key.berikut cara membuatnya:



materi_belajar,dan masukan jumlah kolomnya 6,lalu klik

tombol go.




4. Pada nama kolom kd_materi,pilih opsi primary dari bagian

index.


MyISAM.


2.10 Membuat Tabel Tugas

Pada bagian ini anda akan membuat tabel untuk menyimpan data

tugas belajar yang diberikan guru untuk siswa.jadi,nanti guru yang

berhak mengirimkan tugas setiap mata pelajaran yang diampunya

untuk diberikan kepada siswa melalui kelas masing-masing.desain

tabelnya adalah:

Tabel 3.11 Desain rancangan tabel tugas _belajar


Kd_tugas Char(5) Primary key

Nm_tugas Varchar(100)

Keterangan Varchar(200)

File_tugas Varchar(200)


Kd_kelas Char(3)

Kd_guru Char(4)

Kd_siswa Char(5)

Dari desain tabel diaatas,kd_tugas dijadikan sebagai primary

key,sedangkan kolom kd_pelajaran,kd_kelas,kd_guru adalah kode

foreign key yang berasal dari tabel master data.berikut cara

membuatnya:



tugas_belajar,dan masukan jumlah kolomnya 7,lalu klik

tombol go.



datanya pada length/values

4. Pada nama kolom kd_tugas,pilih opsi primary dari bagian

index.


MyISAM.


BAB 4

MEMBUAT PROYEK UTAMA PROGRAM

Pada bab 3 ini kita akan mempersiapkan proyek kerja pada

dokumen XAMPP Server,yaitu pada folder htdocs,sebelum

melanjutkan pelajaran pada bab ini,sebaiknya anda pastikan dulu

bahwa XAMPP Server sudah berhasil diinstal dilaptop yang anda

pakai untuk praktek.melalui bab ini anda akan belajar

mempersiapkan file library yang dibutuhkan dalam seluruh halaman

program,termasuk file koneksi database yang dibuat dalam satu

file tersendiri.

Disini kita memakai aplikasi dreamweaver untuk lebih

memudahkan pembuatan program kita. Dreamweaver adalah

sebuah HTML editor profesional untuk mendesain web secara

visual dan mengelola situs atau halaman web. Dreamweaver

merupakan software utama yang digunakan oleh Web Designer

maupun Web Programmer dalam mengembangkan suatu situs web,

karena dreamweaver mempunyai ruang kerja, fasilitas dan

kemampuan yang mampu meningkatkan produktifitas dan

efektivitas dalam desain maupun membangun suatu situs web.

3.1 Membuat Folder Program

Program aplikasi e-learning dapat anda buat didalam folder

khusus sesuai nama aplikasinya,misalnya folder elearning.didalam

folder utama program aplikasi tersebut juga akan dibuat beberapa

folder khusus untuk menyimpan file program dan juga

gambar.berikut contohnya:

1. Buka Mozilla firefox

2. Buat folder elearning didalam alamat c:\xampp\htdocs

Gambar 4.1 Membuat folder elearning

3. Masuk kedalam folder elearning,kemudian buat 5 folder lagi

didalamnya,yaitu;admin,guru,images,library,plugins,dan

styles.

Gambar 4.2 Tampilan hasil membuat folder kerja

3.2 Mengaktifkan Folder Program Ke Dreamweaver

Untuk memudahkan dalam rangka mengelola folder dan file

program aplikasi yang sedang kita bangun,maka folder

kerja(c:\xampp\htdocs\elearning) dapat diaktifkan dalam aplikasi

dreamweaver,sehingga nanti semua folder dan file bisa diakses

langsung dari jendela dreamweaver seperti mengakses langsung

lewat Mozilla firefox.berikut adalah caranya:

1. Buka dreamweaver

2. Dari panel files yang ada dijendela bagian kanan atas,klik

desktop,lalu klik manage sites.

Gambar 4.3 Langkah mengakses panel files dreamweaver

3. Klik tombol new,lalu klik site.

4. pada jendela yang muncul,klik tab advance,lalu isi nama

proyeknya serta arahkan alamat folder kerjanya ke

c:\xampp\htdocs\elearning\.

Gambar 4.4 Tampilan panel files dreamweaver,mengaktifkan

folder kerja

5. Klik tombol ok.

6. Masuk lagi ke jendela manage sites,lalu klik done.

perhatikan hasilnya,pada panel files anda sudah mendapatkan

folder kerja dari proyek yang kita buat tadi.

Gambar 4.5 Folder kerja berhasil diaktifkan

3.3 Menyiapkan Master Ikon & Gambar

Supaya lebih menarik,dalam membuat program aplikasi

dapat anda tambahkan gambar ikon sebagai tombol pengganti

menu teks.file koleksi gambar dapat disimpan dalam folder

images,atau nama folder lain yang anda sukai.

1. Download gambar ikon yang sama atau beda gambar tapi

fungsinya sama di Mozilla firefox,ikon seperti dibawah

ini:

Gambar 4.6 Hasil download ikon di Mozilla firefox

2. Simpan ikon gambar dalam satu folder images yang

disimpan di folder elearning tadi.

3. Sekarang,folder c:\xampp\htdocs\elearning\images\

sudah terisi koleksi ikon gambar.

Gambar 4.7 Gambar ikon dipindahkan dalam satu folder di

folder images

3.4 Menyiapkan Plugin Kalender

Didalam aplikasi berbasis web,biasanya membutuhkan kalender

untuk melengkapi form input data,sehingga form masukan tanggal

bisa lebih mudah diciptakan dan mudah digunakan.untuk

memudahkan pengguna,anda bisa menggunakan plugin javascript

yang sudah ada.di internet ada banyak modelnya,anda dapat

mencarinya sendiri.

1. Anda bisa download dan beli tigra_calendar di

http://www.softcomplex.com/products/tigra_calendar/

atau bisa minta langsung foldernya kesaya via email.

2. Kopikan folder tigra_calendar tersebut ke dalam

c:\xampp\htdocs\elearning\plugins.

http://www.softcomplex.com/products/tigra_calendar/

Gambar 4.8 File tigra_calendar di folder plugins

3.5 Membuat Koneksi Database MySQL

Untuk memudahkan dalam mengelola semua file program,anda

bisa memusatkan semua koneksi database ke dalam satu file

koneksi database MySQL,sehingga tidak setiap file program

dibuat skrip koneksi.dengan membuat file khusus yang berisi skrip

koneksi database,maka file tersebut dapat dipanggil pada seluruh

file program.dengan cara ini,maka kapan jika ada perubahan

pengaturan database,maka anda hanya perlu melakukan perbaikan

pada satu file saja,caranya:

1. Buka dreamweaver.

2. Buat dokumen baru(ctrl+N),lalu buka tipe halaman php.

Gambar 4.9 Membuat dokumen PHP baru

3. Masuk pada halaman kerja PHP di dreamweaver,anda

harus masuk kehalaman view code,kemudian hapus semua

skrip program yang ada disana.

4. Sekarang,ketik programnya seperti berikut: <?php

# Konek ke Web Server Lokal

$myHost = "localhost";

$myUser = "root";

$myPass = "";

$myDbs = "elearning_db"; // nama database pada MySQL

# Konek ke Web Server Lokal

$koneksidb = mysql_connect($myHost, $myUser, $myPass);

if (! $koneksidb) {

echo "Koneksi MySQL gagal, periksa (Host/User/Password)-nya

!";

}

# Memilih database pd MySQL Server

mysql_select_db($myDbs) or die ("Database <b>$myDbs</b> tidak

ditemukan !");

?>

5. Simpan pada folder library dengan nama

inc.connection.php.

4.6 Membuat Koneksi Database MySQL

Sekarang anda akan membuat file inc.library.php,didalam satu

file program ini akan dibuat beberapa fungsi,diantaranya skrip

kode otomatis,pengaturan format tanggal,nilai mata uang,dan

lainnya.berikut ini caranya:



3. Masuklah ke halaman kode program(code),kemudian hapus

semua skrip HTML yang ada disana.

4. Buat skrip pembuka PHP(<?php) dan ditutup dengan (?>).

5. Buatlah perintah untuk pengaturan zona waktu yang ada

dikomputer. Perintahnya adalah: <?php

# Pengaturan tanggal komputer

date_default_timezone_set("Asia/Jakarta");

?>

6. Membuat fungsi kode otomatis,jadi,data kode yang dibuat

pada form program tambah data (simpan data baru) dapat

degenerate secara otomatis oleh skrip program,misalnya

untuk kode siswa dapat dibuat secara urut.sekarang,ketikan

skrip program berikut: function buatKode($tabel, $inisial){

$struktur = mysql_query("SELECT * FROM $tabel");

$field = mysql_field_name($struktur,0);

$panjang = mysql_field_len($struktur,0);

$qry = mysql_query("SELECT MAX(".$field.") FROM

".$tabel);

$row = mysql_fetch_array($qry);

if ($row[0]=="") {

$angka=0;

}

else {

$angka = substr($row[0], strlen($inisial));

}

$angka++;

$angka =strval($angka);

$tmp ="";

for($i=1; $i<=($panjang-strlen($inisial)-strlen($angka)); $i++) {

$tmp=$tmp."0";

}

return $inisial.$tmp.$angka;

}

Untuk menggunakan fungsi diatas,anda tinggal memanggil nama

fungsinya. Misalnya,membuat kode S0001,S0002,…… maka kode

yang dapat digunakan dalam program adalah : $kodebaru = buatkode(“siswa”, “S”);

Dengan perintah diatas,maka hasil kode siswa terbaru yang

dihasilkan akan disimpan dalam variable $KodeBaru,datanya dapat

ditampilkan keform atau juga dapat dipakai dalam query untuk

disimpan kedalam database.

7. Membuat skrip fungsi untuk membalik format tanggal,dari

format Indonesia(day-month-year) ke format English(year-

month-day).buat skrip berikut: function InggrisTgl($tanggal){

$tgl=substr($tanggal,0,2);

$bln=substr($tanggal,3,2);

$thn=substr($tanggal,6,4);

$tanggal="$thn-$bln-$tgl";

return $tanggal;

} 8. Membuat skrip fungsi untuk membalik format tanggal,dari

English(year-month-day) ke Indonesia(day-month-

year).ketikan skrip berikut: function IndonesiaTgl($tanggal){

$tgl=substr($tanggal,8,2);

$bln=substr($tanggal,5,2);

$thn=substr($tanggal,0,4);

$tanggal="$tgl-$bln-$thn";

return $tanggal;

}

9. Membuat fungsi untuk memformat tampilan angka dalam

nilai rupiah(ada titik pemisah ribuan),misalnya; 1000000

menjadi 1.000.000.skripnya adalah: function format_angka($angka) {

$hasil = number_format($angka,0, ",",".");

return $hasil;

}

10. Simpan pada folder library dengan nama inc.library.php.

3.7 Membuat File Pilihan

Jika didalam program nanti banyak form yang berisi

pilihan,supaya lebih mudah dalam membuat program maka daftar

pilihan tersebutdapat disimpan dalam satu file,sehingga dapat

dipanggil pada semua menu.sebagai contoh,daftar pilihan

bulan,agama,pekerjaan,dsb.



3. Masuklah ke halaman kode program(code),kemudian hapus

semua skrip HTML yang ada disana.

4. Buat skrip pembuka PHP(<?php) dan ditutup dengan (?>).

5. Buat skrip daftar pilihan dalam data array,misalnya pilihan

data nama bulan.contohnya:

<?php # Membuat daftar Nama Bulan

$listBulan = array("00" => "....", "01" => "01. Januari", "02" => "02.

Februari", "03" => "03. Maret",

"04" => "04. April", "05" => "05. Mei",

"06" => "06. Juni", "07" => "07. Juli",

"08" => "08. Agustus", "09" => "09.

September", "10" => "10. Oktober",

"11" => "11. November", "12" => "12.

Desember");

# Membuat daftar Pilihan Pekerjaan

$pekerjaan = array("TNI", "Polri", "Guru", "PNS", "Karyawan",

"Petani", "Nelayan");

?>

6. Simpan program ini pada folder library dengan nama

inc.pilihan.php.

BAB 5

MEMBUAT PROGRAM HALAMAN ADMIN

Pada bab 5 ini kita akan membuat program untuk halaman

admin,pada halaman ini dilengkapi dengan fasilitas lengkap untuk

mengelola data utama dan infromasi data yang akan disajikan

dalam aplikasi e-learning.data utama yang ada dalam aplikasi ini

adalah data user,pelajaran,kelas,guru,dan juga data siswa.selain

itu,ada data informasi dan materi yang akan disajikan dalam

aplikasi,yaitu data tugas belajar dan materi belajar.

Lewat bab ini,anda akan dipandu untuk membuat semua fasilitas

yang dibutuhkan untuk mengelola baik data utama dan data

informasi,mulai dari membuat program tampil data,tambah

data,ubah data sampai hapus data.

4.1 Program & Menu Utama

Program utama dalam halaman admin adalah file

index.php,didalam file ini terdapat beberapa file yang

terkait,yaitu menu utama disimpan dalam menu.php,dan masih ada

file buka_file.php yang berisi skrip control program dari menu

yang dibuat dan juga menu yang akan dibuat didalam halaman

program manajemen data.

5.1.1 Membuat File Index.php

File index.php adalah file program yang dipanggil pertama kali

saat aplikasi dijalankan,pada file ini terdapat kerangka tabel yang

menyusun antara header program,menu utamadan bagian tampilan

modul program.cara membuatnya adalah:


2. Buat dokumen baru (ctrl+n),lalu buka tipe halaman php.

3. Simpan data folder utama elearning/admin,dengan nama

index.php.

4. Dari halaman design,buat nama programnya dibagian

title.contohnya:

Gambar 5.1 Membuat nama program pada bagian title

5. Gunakan panel common,tambahkan table untuk kerangka

utama,dengan desain 2 baris dan 2 kolom,lebarnya

100%,pada header pilih none.contoh:

Gambar 5.2 Merancang tabel untuk tampilan menampilkan data

6. Pada baris pertama,lakukan merger cells untuk

menggabungkan 2 kolom data,pada bagian ini akan dijadikan

judul program.

7. Dari menu insert,klik image.lalu carilah file gambar yang

akan dijadikan logo sesuai kebutuhan kalian,sehingga

hasilnya adalah:


8. Selanjutnya,masuklah pada halaman kode program (code).

9. Pada baris pertama program,buatlah skrip untuk membaca

file koneksi database.skripnya: <?php

session_start();

include_once "../library/inc.connection.php";

include_once "../library/inc.library.php";

include_once "../library/inc.pilihan.php";

include_once "../library/inc.tanggal.php";

?>

10. Skrip diatas berfungsi memanggil file koneksi database,file

library fungsi otomatis program,dan file penanggalan,semua

file yang dibutuhkan disimpan dalam folder library.

11. Buat kode program untuk membaca zona waktu standart

computer,dengan perintah: // Baca Jam pada Komputer


12. Sebelum tag </title>, buatlah 3 skrip untuk mengaktifkan

javascript dan juga CSS.contoh: <link type="text/css" rel="stylesheet" href="../styles/style.css">

Gambar 5.4 Susunan menu yang ada didalam file menu.php

6. Simpan kembali programnya (ctrl+s).

5.1.3 Membuat file Buka_file.php

File buka_file.pbp berisi skrip program control untuk semua

menu,tombol dan target form yang ada didalam program.sebagai

contoh,pada menu data pelajaran dibuat alamat link menuju

?open=pelajaran-data,maka alamat link tersebut akan dikontrol

dari buka_file.php supaya dapat menjalankan file

pelajaran_data.php,ikuti langkah berikut untuk membuatnya:




buka_file.php.



5. Buat skrip program seperti contoh berikut: <?php

# KONTROL MENU PROGRAM

if(isset($_GET['open'])) {

// Jika mendapatkan variabel URL ?open

switch($_GET['open']){

case '' :

if(!file_exists ("info.php")) die ("File tidak ada

!");

include "info.php"; break;

case 'Halaman-Utama' :


!");


default:


!");

include "info.php";

break;

}

}

else {

// Jika tidak mendapatkan variabel URL : ?open

if(!file_exists ("info.php")) die ("File tidak ada !");

include "info.php";

}

?>

6. Setelah selesai,simpan programnya (ctrl+s).

5.1.4 Membuat file Info.php

File info.php akan dijalankan saat pertama kali halaman admin

diakses,pada saat menu login belum diklik,maka halaman ini yang

akan dijalankan.informasi yang ditampilkan yaitu apakah sudah

login atau belum.file program ini berisi informasi nama

program,juga dapat diisi dengan skrip informasi user yang saat ini

sedang login.berikut ini langkahnya:




info.php.



5. Buat skrip program seperti contoh berikut: <?php

if(isset($_SESSION['SES_LOGIN'])) {

echo "<h3>Selamat datang di Aplikasi E-Learning SMPN 5

Karawang Barat !</h3>";

echo "<b> Anda login sebagai Admin";

exit;

}

else {

echo "<h3>Selamat datang di Aplikasi E-Learning SMPN 5


echo "<b>Anda belum login, silahkan <a href='?open=Login'

alt='Login'>login </a> sebagai Administrator untuk mengakses sistem ini

";

}

?>

6. Setelah selesai,simpan programnya (ctrl+s).

4.2 Program Manajemen Pelajaran

Pada bagian ini anda akan membuat program manajemen data

pelajaran,fasilitas yang akan dibuat adalah program untuk

menampilkan data,menambah data,mengubah data dan program

menghapus data.berikut ini adalah file program yang akan dibuat:

Pelajaran_data.php:file program yang berfungsi sebagai

program utama manajemen data pelajaran,program ini akan

menampilkan semua data pelajaran yang ada didalam

database MySQL,yaitu dari tabel pelajaran.melalui halaman

program ini akan dibuat menu add data,edit,& delete.

Pelajaran_add.php:file program yang berisi form untuk

menambah data baru kedalam tabel pelajaran,dapat diakses

lewat menu add data.

Pelajaran_edit.php:file program yang berisi form untuk

mengubah data yang tersimpan dalam database,yaitu pada

tabel pelajaran,halaman ini diakses lewat menu edit yang

dibuat pada program tampil data.

Pelajaran_delete.php:berisi skrip program untuk

menghapus data yang dipilih dari halaman tampil

pelajaran_data.php,yaitu dari menu delete.

5.2.1 Membuat Menu & Kontrol Program

Sekarang kita akan membuat menu data pelajaran didalam file

menu.php,yaitu kemudian dilanjutkan membuat control menu

supaya dapat mengakses semua file program saat menu dklik,yaitu

menu add data,edit,& delete.skripnya dibuat didalam file

program buka_file.php.langkahnya:

1. Buka Mozilla firefox.

2. Buka file menu.php lewat dreamweaver.

3. Tambahkan menu data pelajaran,dan arahkan linknya

menuju ?open=pelajaran-data.seperti contoh:

Gambar 5.5 Membuat menu data pelajaran dari file menu.php

4. Sekarang buka file buka_file.php lewat dreamweaver.

5. Masuk kehalaman kode program(code),buat skrip program

untuk menjalankan link menu yang mengarah ke

?open=pelajaran-data,file program yang dijalankan adalah

pelajaran_data.php case 'Pelajaran-Data' :

if(!file_exists ("pelajaran_data.php")) die ("File

tidak ada !");

include "pelajaran_data.php"; break;

6. Buat skrip program untuk menunjukan file

pelajaran_data.php pada saat menu add data diklik,yaitu

arah link-nya adalah;?open=pelajaran-add: case 'Pelajaran-Add' :

if(!file_exists ("pelajaran_add.php")) die ("File

tidak ada !");

include "pelajaran_add.php"; break;

7. Buat skrip program untuk menjalankan file

pelajaran_edit.php pada saat menu edit diklik,yaitu arah

linknya adalah;?open=pelajaran-edit: case 'Pelajaran-Edit' :

if(!file_exists ("pelajaran_edit.php")) die ("File

tidak ada !");

include "pelajaran_edit.php"; break; 8. Buat skrip program untuk menjalankan file

pelajaran_delete.php pada saat menu delete diklik,yaitu

arah linknya adalah;?open=pelajaran-delete: case 'Pelajaran-Delete' :

if(!file_exists ("pelajaran_delete.php")) die

("File tidak ada !");

include "pelajaran_delete.php"; break;

9. Setelah selesai,simpan programnya(ctrl+s)

5.2.2 Membuat Program Tampil Data Pelajaran

File program pertama yang akan dibuat adalah

pelajaran_data.php,file ini sebagai program tampil data,yaitu

halaman program utama untuk memanajemen data pelajaran.dari

halaman utama ini,akan dibuat ikon menu add data untuk

mengakses halaman tambah data.

Program tampil data akan menampilkan seluruh data dari tabel

database kehalaman,nama tabel datanya adalah pelajaran,dari

setiap data yang tampil akan dilengkapi dengan menu edit &

delete.contoh tampilannya:

Untuk merapikan tampilan program diatas,anda dapat

menggunakan objek table,sehingga dapat membuat kerangka untuk

tata letak data.dari tampilan program diatas,anda dapat membuat

programnya dengan mengikuti langkah berikut ini:




pelajaran_data.php.



5. Dari panel common tambahkan table untuk tampilan

utama,sebanyak 4 baris dan 1 kolom,lebarnya 700

pixels,pada header pilih none.contoh:


6. Pada baris pertama,tambahkan judul dengan font header

1,yaitu : data pelajaran

7. Tambahkan gambar berlogo add data pada baris ke2,filenya

ada di folder images.caranya,klik menu insert,klik image,lalu

cari file/ikon add data tersebut dan buat rata kanan.

Gambar 5.7 Desain tabel utama untuk menampilkan data

8. Pilih atau klik pada gambar ikon add data,lalu buat target

link menunya kealamat berikut: ?open=Pelajaran-Add

9. Tambahkan tabel baru didalam baris ke3 dari tabel

utama,tabel baru disesuaikan data pelajaran yang akan

ditampilkan,yaitu dengan 2 baris dan 5 kolom data lebarnya

adalah 100 percent.

Gambar 5.8 Desain membuat tabel baru untuk menampilkan

data

10. Pada tabel tampil data,tambahkan judul sesuai data yang

akan ditampilkan,sedangkan 2 kolom kanan baris kedua

dibuat label menu edit & delete.

Gambar 5.9 Desain tabel tampil data & desain menunya

11. 2 kotak diatas label menu edit & delete digabung(merger)

menjadi 1,kemudian dibuat teks tools.

12. Masuklah pada code view,sisipkan kode pengaturan CSS

pada tabel yang barusaja dibuat,seperti contoh berikut yang

dicetak tabel. <td colspan="2"><table class="table-list" width="100%" border="0"

cellspacing="1" cellpadding="3">



// Koneksi ke database MySQL


?>

14. Buatlah skrip program untuk menampilkan data pelajaran

dari database.penulisan skrip diletakkan dibawah </tr>

dari judul data,dan sebelum <tr> dari baris tabel tampilan

data.skripnya adalah: <?php

// Skrip menampilkan data Pelajaran

$mySql = "SELECT * FROM pelajaran ORDER BY kd_pelajaran

ASC";

$myQry = mysql_query($mySql, $koneksidb) or die ("Query

salah : ".mysql_error());

$nomor = 0;

while ($myData = mysql_fetch_array($myQry)) {

$nomor++;

$Kode = $myData['kd_pelajaran'];

?>

lihat illustrasinya,kemudian tambahkan skrip penutup

dibawah </tr> baris data,skripmya adalah: <?php } ?>

Gambar 5.10 illustrasi meletakan skrip program query ke

database

15. Pada baris kedua dari tabel tampil data akan digunakan

untuk menampilkan informasi dari

database.sekarang,lengkapi skrip berikut: <tr>

<td> </td>

<td> </td>

<td> </td>

<td>delete</td>

<td>edit</td>

</tr>

16. Dengan menambah skrip penampil data kehalaman,seperti

contoh berikut: <tr>

<td> <?php echo $nomor; ?> </td>

<td> <?php echo $myData['kd_pelajaran']; ?> </td>

<td> <?php echo $myData['nm_pelajaran']; ?> </td>

<td width="9%" align="center"><a href="?open=Pelajaran-

Delete&Kode=<?php echo $Kode; ?>" target="_self" onclick="return

confirm('YAKIN INGIN MENGHAPUS DATA PELAJARAN INI ...

?')">Delete</a></td>

<td width="9%" align="center"><a href="?open=Pelajaran-

Edit&Kode=<?php echo $Kode; ?>" target="_self">Edit</a></td>

</tr>

<?php } ?>

</table></td>

</tr>

Gambar 5.11 Illustrasi meletakan kode untuk target link menu

edit

17. Masuk kehalaman tampilan design view,pilih pada teks menu

edit,lalu buat target link menunya ke alamat berikut: ?open=Pelajaran-Edit&Kode=<?php echo $Kode; ?>

18. Seperti cara sebelumnya,pilih pada teks menu delete,lalu

buat link menunya ke alamat berikut: ?open=Pelajaran-Delete&Kode=<?php echo $Kode; ?>

19. Untuk merapikan tampilan,anda dapat memberikan warna

pada baris judul datanya.kemudian.pada 2 kotak diatas edit

& delete digabung menjadi satu.

Gambar 5.12 Memperbaiki Tampilan


5.2.3 Membuat Program Tambah Data Pelajaran

sekarang anda dapat membuat program tambah data

pelajaran,program ini disimpan dalam file bernama

pelajaran_add.php,program ini akan dijalankan lewat menu ikon

add data yang sudah dibuat pada halaman tampil data

pelajaran.pada program ini formnya cukup sederhana,karena kotak

isiannya hanya 2 saja,yaitu kode dan nama pelajaran,dan pada data

kode sendiri akan dibuat kode data secara otomatis

berurutan,sehingga kotak isian yang hidup hanya nama.berikut cara

membuatnya:


2. Buat dokumen baru(ctrl+n).dari tab general,klik dynamic

page,lalu klik halaman PHP.

3. Simpan pada folder utama elearning/admin dengan nama

pelajaran_add.php.

4. Masuk pada halaman kode program(code),hapus semua kode

HTML.

5. Masuk pada halaman design,tambahkan area form dari panel

forms.

6. Pada area form yang sudah ditambahkan,atur alamat

pemrosesan programnya dari bagian action,panel

properties.

Action : <?php $_SERVER[„PHP_SELF‟];?>

Target : _self

Method : post

Pada bagian action,arti dari <?php

$_SERVER[‘PHP_SELF’];?> adalah halaman targetnya

menuju form itu sendiri.opsi lain,anda dapat mengisi alamat

actionnya dengan alamat ?open=pelajaran-add disesuaikan

dengan alamat yang dibaca pada file buka_file.php.

7. Simpan kembali dokumennya dengan menekan ctrl+s.

8. Klik didalam area form,sehingga kursor aktif dalam form.

9. Dari panel common,tambahkan objek table untuk kerangka

desai form,sebanyak 4 baris dan 3 kolom,lebarnya 350

pixels,lalu klik tombol go.seperti gambar berikut:

10. Merger baris paling atas menjadi satu,kemudian buat

judulnya,beri efek tebal(bold).

11. Pada baris kedua dan ketiga,buat judul kotak form dengan

teks;kode & nama pelajaran,buat juga teks titik dua(:)

pada kotak tengah,kemudian rapikan tata letak teks dan

kotak tabel.contoh:

Gambar 5.13 Desain kerangka untuk form tambah data

pelajaran

12. Pada baris kode bagian kanan,tambahkan form masukan

berupa text field dari panel form,lalu atur nilainya pada

panel properties.

Char width : 10

Max chars : 4

Init val : <?php echo $dataKode;?>

13. Pada baris nama pelajaran bagian kanan,tambahkan form

masukan berupa text field dari panel form,lalu atur nilainya

pada panel properties.

Text field : txtNama

Char width : 80

Max chars : 100

Init val : <?php echo $dataNama;?>

14. Kembali kehalaman design view.pada baris paling

bawah,tambahkan objek tombol berupa button,lalu atur nilai

propertinya.

Button name : btnsimpan

Value : simpan

Action : submit form

15. Simpan pada folder utama proyek dengan nama

pelajaran_add.php Sebelum melanjutkan proses ke pembuatan skrip untuk simpan

data ke database,masuklah pada halaman code view,pastikan pada

bagian action sudah memiliki alamat <?php

$_SERVER[‘PHP_SELF’];?> atau juga bisa dibuat alamat ke

?open=pelajaran-add,salah satunya saja.contoh:

Gambar 5.14 Memeriksa target action form

Setelah desain form selesai dibuat,maka pekerjaan anda

sekarang adalah membuat skrip program lewat halaman kode

program(code).dari halaman kode,kita akan membuat skrip mulai

dari baca data form,validasi form dan skrip simpan ke dalam

database dengan perintah SQLnya adalah INSERT.selain itu,kode

otomatis juga akan diterapkan pada data pelajaran.berikut

langkahnya:

1. Dari dreamweaver,buka lagi file pelajaran_add.php.

2. Sisipkan kode efek CSS pada tag table,seperti contoh

berikut yang dicetak tebal. <table class="table-list" width="650" border="0" cellspacing="1"

cellpadding="3">


file koneksi database dan membaca skrip library.skripnya: <?php



// Membaca file library


?>

4. Dibawah skrip koneksi database,buat skrip untuk mengisi

kotak form saat dijalankan.kodenya: // Membuat variabel isi ke form

$dataKode = buatKode("pelajaran", "P");

$dataNama = isset($_POST['txtNama']) ? $_POST['txtNama'] : '';

Illustrasi penempatan skrip:

Gambar 5.15 Membuat skrip program untuk mengisi kotak form

Kode $dataKode

$dataKode = buatKode("pelajaran", "P");

Skrip diatas dipakai untuk membuat kode pelajaran

secara otomatis dari tabel pelajaran.perintah buatkode()

adalah nama fungsi yang ada pada file program

inc.library.php.

Kode $dataNama


Variable $dataNama akan diisi dengan data kosong saat

pertama form dijalankan,dan akan diisi dengan data dari

kotak nama pelajaran jika sudah disubmit (tombol simpan

diklik).

Fungsi dari skrip ini adalah untuk mengisi data pada kotak

form jika saat penyimpanan ada kesalahan akibat validasi,form

akan dipanggil kembali dan isi data pada kotak tidak akan

hilang.

5. Dibawah skrip koneksi database.buat skrip untuk membaca

tombol simpan(btnsimpan) saat diklik,sehingga nanti skrip

lengkap untuk menyimpan data akan dibuat disini.skripnya: # SKRIP TOMBOL SIMPAN DIKLIK

if(isset($_POST['btnSimpan'])){

// Baca Data dari Form Input

$txtNama = $_POST['txtNama'];

6. Sekarang buat skrip untuk membaca data dari

form,skripnya dibuat didalam area skrip tombol

simpan(btnsimpan) yang sudah dibuat sebelumnya.skripnya: // Baca Data dari Form Input


7. Kemudian,buat deklarasi variable array,dengan nama

$pesanerror. // Validasi Form Input

$pesanError = array();

8. Buat skrip untuk validasi form,untuk form masukan

namapelajaran.jika datanya kosong,maka buat daftar pesan

error kedalam variable array $pesanerror.skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Pelajaran</b> tidak boleh

kosong !";

}

9. Buat skrip program untuk menampilkan pesan error jika

ditemukan dari validasi.skripnya: // Menampilkan Pesan Error dari Form

if (count($pesanError)>=1 ){

echo "<div class='mssgBox'>";

echo "<img src='../images/attention.png'> <br><hr>";

$noPesan=0;

foreach ($pesanError as

$indeks=>$pesan_tampil) {

$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

else {

10. Pada bagian //skrip simpan data ke database,buat skrip

program untuk menyimpan data ke database.jadi,jika sudah

tidak ada error atau kesalahan data form terisi semua,data

akan disimpan.skripnya: else {

// Skrip Simpan data ke Database

$kodeBaru = buatKode("pelajaran", "P");

$mySql = "INSERT INTO pelajaran (kd_pelajaran,

nm_pelajaran) VALUES('$kodeBaru', '$txtNama')";

$myQry= mysql_query($mySql, $koneksidb) or die

("Gagal query".mysql_error());

if($myQry){

echo"<meta ttp-equiv='refresh' content='0;

url=?open=Pelajaran-Add'>";

}

exit;

}

11. Simpan kembali programnya,ctrl+s.

Untuk mendapatkan halaman program tambah data pelajaran

diatas,anda dapat mengklik menu data pelajaran yang ada dimenu

utama program (http://localhost/elearning/admin/),lalu klik ikon

add data.

Gambar 5.16 Tampilan halaman program tambah data pelajaran.

Lihatlah pada form masukan data kode,disana form masukannya

tidak bisa diketik atau objeknya disable.untuk membuat seperti

itu,anda dapat menambahkan kode readonly=”readonly” pada tag

input kode.contoh:

<td width="438"><input name="textfield" type="text" value="<?php echo

$dataKode; ?>" size="10" maxlength="4" readonly="readonly"/></td>

5.2.4 Membuat Program Ubah Data Pelajaran

Program ubah data pelajaran disimpan dengan nama file

pelajaran_edit.php,program ini dapat diakses lewat menu edit

yang dibuat pada setiap baris data pelajaran dihalaman tampil

data pelajaran.lewat menu edit,maka data pelajaran dipilih untuk

http://localhost/elearning/admin/),lalu

selanjutnya dimunculkan kembali kedalam bentuk form yang

datanya bisa diperbaiki isinya,kemudian datanya dapat disimpan

lagi dengan perintah SQL;update.berikut ini illustrasinya:

Dari halaman program tampil data sudah disiapkan menu edit

pada setiap baris data yang ditampilkan,ketika menu edit diklik

maka target linknya diarahkan ke ?open=pelajaran-

edit&Kode=xxx,parameter xxx adalah kd_pelajaran yang dipilih

untuk diedit.data yang dipilih akan ditampilkan dalam form

program ubah data yang disimpan dalam file pelajaran_edit.php.

Sekarang,anda dapat membuat file pelajaran_edit.php dengan

cara memodifikasi file pelajaran_add.php,dengan cara ini maka

pekerjaan mendesain form sudah selesai,dan anda tinggal

melengkapinya saja.caranya:

1. Buka file pelajaran_add.php yang sudah dibuat

sebelumnya.

2. Save as dengan nama baru,yaitu ;pelajaran_edit.php.

3. masuk ke design view,lalu perbaharui informasi judul pada

baris header dengan teks;UBAH DATA PELAJARAN.

4. Pada baris kode,tambahkan objek form hiddenfield untuk

merekam data kode pelajaran supaya dapat dibaca dalam

perintah SQL saat ingin menyimpan,atur nilai propertinya.

Textfield : txtKode

Value : <?php echo $dataKode;>?

Gambar 5.17 Menambahkan objek hidden field untuk merekam

data kode pelajaran ke dalam form

5. Simpan kembali programnya(ctrl+s),lalu masukan kehalaman

codeview.

6. Sekarang modifikasi skrip program yang berfungsi

menampung data dari form ke variable temporary,sekarang

data kosongnya diganti data dari database,sehingga bisa

ditampilkan lagi pada form.skripnya: # MEMBACA DATA DARI DATABASE UNTUK DIEDIT

$Kode = $_GET['Kode'];

$mySql = "SELECT * FROM pelajaran WHERE kd_pelajaran='$Kode'";

$myQry= mysql_query($mySql, $koneksidb) or die ("Query salah :

".mysql_error());

$myData= mysql_fetch_array($myQry);

// Membuat variabel isi ke form

$dataKode = $myData['kd_pelajaran'];

$dataNama = isset($_POST['txtNama']) ?

$_POST['txtNama'] : $myData['nm_pelajaran'];

Dengan skrip diatas,maka saat pertama kali program ubah

data dijalankan,maka kotak isian form akan menampilkan

data yang berasal dari database,sesuai kode yang dipilih

dari menu edit.penjelasan kodenya:

Variable $dataKode

$dataKode = $myData['kd_pelajaran'];

Variable ini diisi dengan data kode pelajaran dari

database,data yang sedang diedit atau diperbaiki.

Variable $dataNama

$dataNama =isset($_POST['txtNama'] )? $_POST['txtNama'] :

$myData['nm_pelajaran'];

Variable ini diisi dengan data nama pelajaran dari kolom

nm_pelajaran,datanya berasal dari data yang sedang

diedit.jika form sudah pernah dipost,maka $dataNama

akan diisi nilai dari form itu sendiri.

7. Kemudian modifikasi query untuk menyimpan data dari yang

semula memakai perintah INSERT diubah menjadi

UPDATE,yaitu perintah menyimpan kembali data lama

kedalam database(tabel pelajaran).

Hilangkan skrip berikut ini: $kodeBaru = buatKode("pelajaran", "P");

$mySql = "INSERT INTO pelajaran (kd_pelajaran,

nm_pelajaran) VALUES('$kodeBaru', '$txtNama')";

Kemudian skrip diatas diganti dengan skrip berikut: $txtKode= $_POST['txtKode'];

$mySql = "UPDATE pelajaran SET nm_pelajaran='$txtNama' WHERE

kd_pelajaran ='$txtKode'";

8. Simpan kembali programnya(ctrl+s).

5.2.5 Membuat Program Hapus Data Pelajaran

Selanjutnya kita akan membuat skrip program yang fungsinya

untuk menghapus data dari database,data yang dihapus adalah

data yang dipilih lewat menu delete dari halaman tampil data.nama

file yang dibuat adalah pelajaran_delete.php. caranya:


2. Buat dokumen baru PHP,lalu masuklah kehalaman kode

program(code).

3. Hapus semua skrip yang ada didalamnya,lalu ketikan skrip

program berikut: <?php



// Membaca variabel Kode pada URL (alamat browser)

if(isset($_GET['Kode'])){


// Hapus data sesuai Kode yang terbaca

$mySql = "DELETE FROM pelajaran WHERE kd_pelajaran='$Kode'";

$myQry = mysql_query($mySql, $koneksidb) or die ("Error hapus

data".mysql_error());

if($myQry){

// Refresh halaman

echo "<meta http-equiv='refresh' content='0;

url=?open=Pelajaran-Data'>";

}

}

else {

// Jika tidak ada data Kode ditemukan di URL

echo "<b>Data yang dihapus tidak ada</b>";

}

?>

4. Simpan program diatas dengan nama file

pelajaran_delete.php.

Dengan skrip program hapus diatas,maka data pelajaran yang

dipilih lewat menu delete akan dihapus secara permanen dari

database.data yang sudah dihapus tidak dapat dikembalikan

kembali lagi,jadi berhati-berhatilah jika ingin menghapus data.

Untuk menghindari kesalahan,anda dapat menambahkan skrip

notifikasi pada menu delete.caranya:

1. Buka lagi file program pelajaran_data.php.

2. Masuklah kehalaman kode program,carilah baris skrip menu

delete.

3. Sisipkan skrip perintah onClick,seperti berikut:

<a href=”?open=Pelajaran-Delete&Kode=<?php echo $Kode; ?>”

target=”_self” onclick=”return confirm(‘YAKIN INGIN MENGHAPUS

DATA PELAJARAN INI…?’)”> delete </a>

4. simpan lagi programnya (ctrl+s).

4.3 Program Manajemen Kelas

Pada bagian ini anda akan membuat program manajemen

data,fasilitas yang akan dibuat hampir sama dengan

sebelumnya,yaitu membuat program menampilkan data,menambah

data,mengubah data dan menghapus data.

5.3.1 Membuat Menu & Kontrol Program Kelas

Sekarang kita akan membuat menu data kelas dari dalam file

menu.php,kemudian membuat control menu supaya dapat

mengakses menu utama sub menu yang akan dibuat dalam program

utama manajemen data kelas,yaitu add data,edit,&

delete.skripnya dibuat pada file buka_file.php.langkahnya:

1. Buka Mozilla firefox.


3. Tambahkan menu data kelas,dan arahkan linknya menuju

?>open=kelas-data. 4. Sekarang buka file buka_file.php lewat dreamweaver.

5. Masuk kehalaman kode program,buat skrip program untuk

menjalankan link menu yang mengarah ke ?open=kelas-

data,file program yang dijalankan adalah kelas_data.php case 'Kelas-Data' :

if(!file_exists ("kelas_data.php")) die ("File tidak ada

!");

include "kelas_data.php"; break;

6. Buat skrip program untuk menjalankan file kelas_add.php

pada saat menu add data diklik,yaitu arah linknya adalah;

?open=kelas_add: case 'Kelas-Add' :

if(!file_exists ("kelas_add.php")) die ("File tidak

ada !");

include "kelas_add.php"; break; 7. Buat skrip program untuk menjalankan file kelas_edit.php

pada saat menu edit diklik,yaitu arah lingknya adalah;

?open=kelas_edit: case 'Kelas-Edit' :

if(!file_exists ("kelas_edit.php")) die ("File tidak

ada !");

include "kelas_edit.php"; break;


kelas_delete.php pada saat menu delete diklik,yaitu arah

lingknya adalah; ?open=kelas_delete: case 'Kelas-Delete' :

if(!file_exists ("kelas_delete.php")) die ("File

tidak ada !");

include "kelas_delete.php"; break;

9. Setelah selesai,simpan programnya(ctrl+s).

5.3.2 Membuat Program Tampil Data Kelas

File pertama yang akan dibuat adalah kelas_data.php,file ini

sebagai program tampil data,yaitu halaman program utama untuk

memanajemen data kelas.pada file kelas_data.php ini akan dibuat

ikon menu add data untuk mengakses halaman tambah data.

Program tampil data akan memiliki kemampuan menampilkan

seluruh data dari tabel database MySQL kehalaman tampilan,nama

tabel datanya adalah kelas,dari setiap data yang tampil akan

dibuat menu edit & delete.

Untuk merapikan tampilan program diatas,anda dapat

menggunakan objek table dari editor dreamweaver,sehingga dapat

membuat kerangka untuk tata letak tampilan data.dari tampilan

program diatas,anda dapat membuat programnya dengan mengikuti

langkah berikut:


2. Buat dokumen baru (ctrl+n),lalu buka tipe halaman PHP.

3. Simpan pada folder utama elearning/admin,dengan nama

kelas_data.php 4. Masuk pada halaman kode program,hapus semua skrip

HTML yang ada.

5. Dari panel common,tambahkan tabel untuk tampilan

utama,sebanyak 4 baris dan 1 kolom,lebarnya 700

pixels,pake header pilih none.

Gambar 5.18 Merancang tabel untuk menampilkan data

6. pada baris pertama tabel,tambahkan judul dengan font

header 1,yaitu;DATA KELAS.

7. Untuk membuat tombol,tambahkan gambar berlogo add

data pada baris kedua,filenya ada di folder

images.caranya,klik menu insert,klik image,lalu cari file

btn_add_data.png dan buat rata kanan.

8. Klik pada gambar ikon add data,lalu buat target link

menunya kelamat ?open=kelas-add.

9. Tambahkan tabel baru(untuk tampil tampil data) didalam

baris ke3 dari tabel utama.tabel baru disesuaikan data

kelas yang akan ditampilkan dari database,yaitu dengan 2

baris dan 6 kolom data,lebarnya adalah 100percent.

Gambar 5.19 Desain membuat tabel baru untuk menampilkan

data

10. Pada tabel tampil data,tambahkan judul sesuai data yang

akan ditampilkan,sedangkan 2 kolom kanan baris kedua

dibuat tabel menu edit & delete.

11. 2 kotak dari baris pertama diatas label menu edit & delete

digabung menjadi satu,kemudian dibuat teks tools.

12. Sekarang masuklah pada halaman code view,sisipkan kode

pengaturan CSS pada tabel yang baru saja dibuat seperti

contoh berikut yang dicetak tebal. <table class="table-list" width="100%" border="0" cellspacing="1"

cellpadding="3">





?>

14. Buatlah skrip program untuk menampilkan data kelas dari

database. penulisan skrip diletakan dibawah </tr> dari

baris tabel untuk judul data,dan sebelum <tr> dari baris

tabel tampilan data.skripnya adalah: <?php

// Skrip menampilkan data Kelas

$mySql = "SELECT * FROM kelas ORDER BY kd_kelas ASC";



$nomor = 0;


$nomor++;

$Kode = $myData['kd_kelas'];

?>


untuk menampilkan informasi data dari

database.sekarang,lengkapi skrip berikut: <tr>

<td> </td>

<td> </td>

<td> </td>

<td>delete</td>

<td>edit</td>

</tr>

Dengan menambah skrip penampil data kehalaman,seperti



<td> <?php echo $myData['kd_kelas']; ?> </td>

<td> <?php echo $myData['nm_kelas']; ?> </td>

<td width="9%"><a href="?open=Kelas-Delete&Kode=<?php echo

$Kode; ?>" target="_self" onclick="return confirm('YAKIN INGIN

MENGHAPUS DATA KELAS INI ... ?')">Delete</a></td>

<td width="9%"><a href="?open=Kelas-Edit&Kode=<?php echo

$Kode; ?>" target="_self">Edit</a></td>

</tr>

16. Masuk kehalaman tampilan design view,pilih pada teks menu

edit,lalu buat target link menunya kealamat berikut: ?open=kelas_edit & <?php echo $kode; ?>

17. Seperti cara sebelumnya,pilih pada teks menu delete, lalu

buat target link menunya kealamat berikut: ?open=kelas_delete & <?php echo $kode; ?>

18. Untuk merapikan tampilan,anda dapat memberikan warna

pada baris judul datanya.kemudian,pada 2 kotak baris

pertama diatas kolom delete & edit digabung menjadi

Satu.

19. Pekerjaan sudah selesai,sekarang simpan kembali

programnya (ctrl+s).

5.3.3 Membuat Program Tambah Data Kelas

Sekarang anda dapat membuat program tambah data

kelas,program ini disimpan dalam file bernama

kelas_add.php,program ini akan dijalankan lewat menu ikon add

data yang sudah dibuat pada halaman tampil data kelas.pada

program ini formnya cukup sederhana, karena kotak masukannya

ada 2 kotak,yaitu kode dan nama kelas,sedangkan pada data kode

sendiri akan dibuat kode data secara otomatis berurutan,sehingga

kotak masukannya yang bisa dinput hanya kotak nama saja.berkut

cara membuatnya:

1. Buka dreameaver.

2. Buat dokumen baru (ctrl+n).dari tab general,klik dynamic

page,lalu klik tipe halaman php.

3. Simpan pada folder utama elearning/admin dengan nama

kelas_add.php.

4. Masuk pada halaman kode program,hapus semua kode HTML.

5. Masuk pada halaman design,tambahkan area form dari panel

forms.

6. Pada area form yang sudah ditambahkan,atur alamat

pemrosesan programnya dari bagian action,panel properties.

Action : <?php $-SERVER[„PHP_SELF‟]; ?>

Target : _self

Method : POST

7. Simpan kembali dokumennya,dengan menekan ctrl+s.

8. Klik didalam area form,sehingga kursor aktif dalam form.

9. Dari panel common,tambahkan objek untuk desain form

,sebanyak 4 baris dan 3 kolom,lebarnya 650 pixels,lalu klik

tombol go.seperti gambar berikut:

10. Merger baris paling atas menjadi satu.kemudian buat judul

(misal ; TAMBAH DATA KELAS),beri efek bold.

11. Pada baris kedua dan ketiga,buat judul kotak form dengan

teks;kode & nama kelas,buat juga teks titik dua (:) pada

kotak tengah,kemudian rapikan tata letak teks dan kotak

tabel.contoh:

Gambar 5.20 Desain tabel kerangka untuk form tambah data

kelas

12. Pada baris kode bagian kanan,tambahkan form masukan data

berupa teks field dari panel forms,lalu atur nilainya pada

panel properties.

Char width : 10

Max chars : 4

Init val : <?php echo $datakode; ?>

13. Pada baris nama kelas bagian kanan,tambahkan form

masukan data berupa teks field dari panel forms,lalu atur

nilainya pada panel properties.

Text field :txtnama

Char width :80

Max chars :100

Int val :<?php echo$datanama; ?>

14. Masih pada baris guru wali tambahkan lagi form masukan

berupa combobox atau list/menu dari panel forms,lalu atur


List/menu :cmbGuru

Type :Menu

Objek form tersebut akan dipakai untuk membuat masukan

pilihan data guru yang datanya ditampilkan dari tabel

database.skripnya:

<select name="cmbGuru">

<option value="Kosong">....</option>

<?php

// Skrip menampilkan data Guru ke dalam List/Menu

$bacaSql = "SELECT * FROM guru ORDER BY kd_guru";

$bacaQry = mysql_query($bacaSql, $koneksidb) or die ("Gagal

Query".mysql_error());

while ($bacaData = mysql_fetch_array($bacaQry)) {

if ($bacaData['kd_guru'] == $dataGuru) {

$cek = " selected";

} else { $cek=""; }

echo "<option value='$bacaData[kd_guru]' $cek>

$bacaData[nm_guru] </option>";

}

?>

15. Kembali kehalaman design view,pada baris paling

bawah,tambahkan objek tombol berupa button,lalu atur nilai

propertinya.

Button name :btnSimpan

Value :Simpan

Action :Submit form

16. Simpan pada folder utama proyek dengan nama kelas-

_add.php. Sebelum melanjutkan ke proses pembuatan skrip untuk simpan

data ke database,masuklah pada halaman code view,pastikan pada

bagian action sudah memiliki alamat <?php

$_SERVER[‘PHP_SELF’];?>.

Setelah selesai mendesain form input,sekarang pekerjaan anda

adalah membuat skrip program simpan data dari halaman kode

program.dari halaman kode,kita akan membuat skrip mulai dari

baca data form,validasi form,dan skrip simpan data ke dalam

database dengan perintah INSERT.selain itu,kode otomatis juga

akan diterapkan pada data kelas.berikut langkahnya:

1. Dari dreamweaver,buka lagi file kelas_add.php.

2. Sisipkan kode efek CSS pada tag table,seperti contoh

berikut:

<table width="650" border="0" class="table-list" cellspacing="1"

cellpadding="3">





// Membaca file library


?>

4. Dibawah skrip koneksi database,buat skrip untuk mengisi

kotak form saat dijalankan.kodenya: // Membuat variabel isi ke form

$dataKode = buatKode("kelas", "K");


$dataGuru = isset($_POST['cmbGuru']) ? $_POST['cmbGuru'] : '';

Kode $dataKode

$dataKode = buatKode("kelas", "K");

Skrip diatas dipakai untuk membuat kode kelas secara

otomatis dari tabel kelas.

Kode $dataNama

$dataNama = isset($_POST['txtNama']) ? $_POST['txtNama'] :

'';

Variable $dataNama akan diisi dengan data kosong saat

pertama form dijalankan,dan akan diisi dengan data dari

kotak nama Kelas jika sudah disubmit.

Fungsi dan skrip diatas adalah untuk mengisi data pada kotak

form jika saat penyimpanan ada kesalahan akibat validasi,form

akan dipanggil kembali isi data pada kotak tidak akan hilang.

5. Dibawah skrip koneksi database,buat skrip untuk membaca

tombol simpan(btnSimpan) saat diklik,sehingga nanti skrip

lengkap untuk menyimpan data akan dibuat disini.skripnya: # SKRIP TOMBOL SIMPAN DIKLIK




6. Sekarang buat skrip untuk membaca data dari

form,skripnya dibuat didalam area skrip tombol

simpan(btnSimpan) yang sudah dibuat sebelumnya.skripnya: # SKRIP TOMBOL SIMPAN DIKLIK




$cmbGuru = $_POST['cmbGuru'];

// Validasi Form Inputs


7. Kemudian,buat deklarasi variable array,dengan nama

$pesanerror. // Validasi Form Inputs


8. Buat skrip untuk validasi form,untuk form masukan nama

Kelas.jika datanya kosong,maka buat daftar pesan error

kedalam variable array $pesanerror.skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Kelas</b> tidak boleh

kosong !";

}

9. Pada form masukan guru wali.jika datanya belum

dipilih,maka buat pesan error ke dalam variable array

$pesanerror.skripnya: if (trim($cmbGuru)=="Kosong") {

$pesanError[] = "Data <b>Guru Wali</b> tidak boleh

kosong !";

}


ditemukan dari validasi.skripnya: // Menampilkan Pesan Error dari Form




$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

else {

11. Pada bagian //Skrip Simpan data ke Database,buat skrip

program untuk menyimpan data dari form ke

database.jadi,jika sudah tidak ada error,data akan disimpan

dalam database.skripnya: // Skrip Simpan data ke Database

$kodeBaru = buatKode("kelas", "K");

$mySql = "INSERT INTO kelas (kd_kelas, nm_kelas,

kd_guru) VALUES('$kodeBaru', '$txtNama', '$cmbGuru')";

$myQry = mysql_query($mySql, $koneksidb) or

die ("Gagal query".mysql_error());

if($myQry){


url=?open=Kelas-Add'>";

}

exit;

}

12. Simpan kembali programnya(ctrl+S).

Gambar 5.21 Tampilan Halaman Program Tambah Data Kelas

Lihatlah pada form masukan data kode,disana form masukannya

tidak bisa diketik objeknya atau disable.untuk membuat skrip

seperti itu,anda dapat menambahkan kode readonly=”readonly”

pada tag input kode.contoh:

<td><input name="textfield" type="text" value="<?php echo $dataKode; ?>"

size="10" maxlength="4" readonly="readonly"/></td>

5.3.4 Membuat Program Ubah Data Kelas

Program Ubah Data Kelas disimpan dengan nama file

kelas_edit.php,program ini dapat diakses lewat menu edit yang

dibuat pada setiap baris data kelas dihalaman Tampil Data

Kelas.data kelas dipilih lewat menu edit yang ada disetiap baris

datanya untuk selanjutnya ditampilkan lagi kedalam bentuk form,

kemudian datanya dapat disimpan lagi dengan

perintahSQL;UPDATE.

Halaman Program Tampil Data(kelas_data.php) akan

menampilkan semua data kelas dari database kelayar,masing-

masing data yang tampil akan memiliki menu edit,ketika menu edit

dklik maka target linknya diarahkan ke ?open=kelas-

edit&kode=xxx,parameter xxx adalah kode kelas yang dipilih

untuk diedit,data yang dipilih akan ditampilkan pada halaman

program ubah data(kelas_edit.php).

Sekarang,anda dapat membuat file kelas_edit.php dengan cara

memodifikasi dari file kelas_add.php.caranya:

1. Buka file kelas_add.php yang sudah dibuat sebelumnya.

2. Save as dengan nama baru,yaitu;kelas_edit.php.

3. Masuk kehalaman design view,lalu pebaharui informasi judul

pada baris header dengan teks; UBAH DATA KELAS.

4. Pada baris kode,tambahkan objek form hiddenfield untuk

merekan data kode kelas supaya dapat dibaca dalam

perintah SQL,atur nilai propertinya.

Text field :txtKode

Value :<?php echo$dataKode; ?>

Gambar 5.22 Menambahkan objek HiddenField

5. Simpan kembali programnya (ctrl+S),lalu masuk kehalaman

code view.


menampung data dariform ke variable temporary,sekarang

data kosongnya diganti data dari database.carilah skrip

berikut: // Membuat variabel isi ke form

$dataKode = $myData['kd_kelas'];


$_POST['txtNama'] : $myData['nm_kelas'];

Skrip diatas diganti menjadi: # MEMBACA DATA DARI DATABASE UNTUK DIEDIT


$mySql = "SELECT * FROM kelas WHERE kd_kelas='$Kode'";



$myData = mysql_fetch_array($myQry);




$_POST['txtNama'] : $myData['nm_kelas'];

$dataGuru = isset($_POST['cmbGuru']) ?

$_POST['cmbGuru'] : $myData['kd_guru'];

Dari skrip diatas,maka saat pertama kali program ubah data

dijalankan,maka kotak isian form akan menampilkan data yang

berasal dari database,sesuai kode yang dipilih dari menu

edit.penjelasan kodenya:

Variabel $dataKode


Variable $dataKode diisi dengan data kodekelas dari

database,yaitu dari data yang sedang diedit

Variable $dataNama

$dataNama =isset($_POST['txtNama'])?$_POST['txtNama'] :

$myData['nm_kelas'];

Variable $dataNama diisi dengan data nama kelas dari

kolom nm_kelas,datanya berasal dari data yang sedang

diedit,jika form sudah pernah dipost,maka $dataNama

akan diisi nilai dari form itu sendiri.

7. Selanjutnya perbaiki query untuk menyimpan data dari yang

semula memakai perintah INSERT dirubah menjadi

UPDATE.caranya adalah: Temukan dan hapus skrip berikut ini:

$kodeBaru = buatKode("kelas", "K");

$mySql = "INSERT INTO kelas (kd_kelas, nm_kelas, kd_guru)

VALUES('$kodeBaru', '$txtNama', '$cmbGuru')";

Kemudian diganti dengan skrip berikut: $txtKode= $_POST['txtKode'];

$mySql = "UPDATE kelas SET nm_kelas='$txtNama' WHERE kd_kelas

='$txtKode'";


5.3.5 Membuat Program Hapus Data Kelas


untuk menghapus data dari database,data yang dihapus adalah

data kelas yang dipilih dari menu delete yang ada pada halaman

tampil data.program ini disimpan dalam file bernama

kelas_delete.php.caranya:


2. Buat dokumen baru PHP,lalu masuk kehalaman kode program.

3. Hapus semua skrip yang ada didalamnya,lalu ketikan skrip








$mySql = "DELETE FROM kelas WHERE kd_kelas='$Kode'";

$myQry = mysql_query($mySql, $koneksidb) or die ("Error

hapus data".mysql_error());

if($myQry){

// Refresh halaman


url=?open=Kelas-Data'>";

}

}

else {



}

?>

4. Simpan program diatas dengan nama file kelas_delete.php

Supaya saat menu delete diklik tidak langsung menjalankan

program hapus data,maka anda perlu menambahkan skrip notifikasi

pada menu delete.caranya:

1. Buka lagi file program kelas_data.php

2. Masuklah pada halaman code view,carilah baris skrip dari

menu delete.

3. Sisipkan skrip perintah onClick,seperti berikut: <a href="?open=Kelas-Delete&Kode=<?php echo $Kode; ?>"

target="_self" onclick=

"return confirm('YAKIN INGIN MENGHAPUS DATA KELAS INI ...

?')">Delete</a>

4. Simpan lagi programnya,tekan ctrl+s.

4.4 Program Manajemen User

Pada bagian ini Anda akan membuat Program Manajemen Data

User,di dalam program ini terdapat 4 file program yang semuanya

saling terkait,yaitu user_data.php, user_add.php, user_edit.php

dan user_delet.php. Berikut ini adalah penjelasannya:

User_data.php : Adalah program Tampilan Data User,

program ini akan menampilakan semua data user dari

database. File ini sebagai program utsms manajemen data

User,dari halaman ini di buat menu Add Data,Edit dana

Delete.

User_add.php : Adalah program Tambahan Data User,file

program ini berisi form unutk menambah data baru ke dalam

database tabel user,program ini dapat diakses lewat menu

Add Data yang ada di halaman program Tampilan Data User.

User_edit.php : Adalah program Ubah data User,file

program ini berisi form untuk menampilkan kembali data

User dari database,kemhdia datanya dapat diperbarui dan

disimpan kembali ke dalam database.Program ini diakses

lewat menu edit yang ada di halaman program Tapil Data

User.

User_delete.php : Adalah program Hapus Data User , file

program ini berisi skrip program unutk menghapus data user

dari datebase program ini juga diakses lewat menu Delete

dari dalam tampilan Data User

5.4.1 Menbuat Menu dan Kontrol Porgram User

Sekarang, Anda dapat menyiapkan menu uma program dan skrip

untuk menjalankan menu yang di butuhkan dalam program

manjemen Data User:

1. Buka filr menu.php lewat dremweaver.

2. Tambahkan menu Data Use, dan arahkan link-nya menuju

?open=User-Data.

3. Simpan lagi programnya, tekan Ctrl + S.

Selanjutnya, Anda datap membuat file buka_file.php,

didalam file program ini Anda harus membuat skrip unutk

menjalankan menu yang terkait Manajemen Data User, Caranya:

1. Sekarang buka file buka_file.php, lali masukan ke halaman

kode.

2. Buka skrip program untuk menjalan link menu yang mengarah

ke ?open=User_Data, file program yang di jalankan adalah

user_data.php. case 'User-Data' :

if(!file_exists ("user_data.php")) die ("File tidak

ada !");

include "user_data.php"; break;

3. Buat skrip program unutk menjalankan file user_add.php

pada saat menu add Data diklik.yaitu arah Link-mya

adalah;?open=User-Add: case 'User-Add' :

if(!file_exists ("user_add.php")) die ("File tidak

ada !");

include "user_add.php"; break;

4. Buat Skrip program untuk menjalankan file user_edit.php

pada saat menu Edit diklik,yaitu arah Link-nya adalah;

?open=User-Edit: case 'User-Edit' :

if(!file_exists ("user_edit.php")) die ("File tidak

ada !");

include "user_edit.php"; break;

5. Buat skrip program unutk menjalankan file user_delete.php

pada saat menu Delete diklik, yaitu arah Link-nya adalah;

?open=User-Delete ; case 'User-Delete' :

if(!file_exists ("user_delete.php")) die ("File

tidak ada !");

include "user_delete.php"; break; 6. Simpan kembali programnya (Ctrl + S).

5.4.2 Membuat Program Tampil Data User

Sekarang Anda membuat prgroam Tampilan Data User, Program

ini disimoan dengan nama file user_data.php. Program ini berguna

unutk menampilkan semua data User yang sdag tersimpan dalam

database program utama, karen dalam program ini terdapat 3

menu untuk mengakses file program lain terkait manajemen data

User. Contoh tampilannya:

Gambar 5.23 Tampilan halaman Tampilan Data User,

menampilkan semua data yang tersimpan dalam database.

Seperti telihat pada gambar di atas, dala program tampil Data

akan di buat menu ikon Add Data untuk mengakses program

Tambah Data,menu Edit unutk mengakses program Ubah Data dan

menu Delete unutk mengakses program Hapus Data.Berikut ini

adalah panduannya:

1. Buka Dreamweaver.

2. Buat dokumen baru (tekanCtrl + N), lalu buka tipe halaman

PHP.

3. Simpan pada folder unutk elearning/admin,dengan nama

user_data.php.

4. Mesuk pada halaman kode program (Code view), hapus

semua skrip HTML yang ada.

5. Dari panel Common,tambahkan tabel unutk tampilan utama

sebagai 4 bari dan 1 kolom, lebar 650 pixels, pada header

pilih None. Contoh:

Gambar 5.24 Merancang tabel untuk tampil data

6. Pada barid pertama,tambahkan judul dengan font eader 1,

yaitu;DATA USER

7. Tambah kan ikon menu berbentuk gambar berlogo Add Data

pada baris ke-2,filenya ada di folder images. Caranya, klik

menu Insert klik Image,lalu cari file btn_add_data.png da

buat rata kanan.

Gambar 5.25 Desain tabel untuk menampilkan data

8. Pilih atau klik pada gambar ikon Add Data, lalu target link

menunya ke alamat berikut: ?open=User-Add

Ilustrasi gambar :

Gambar 5.26 Membuat target menu pada gambar ikon ADD

Data

9. Tambahkan tabel baru ( untuk tabel tampil data ) di dalam

baris ke-4 dari tabel utama. Jumlah kolom tabel baru di

sesuaikan data User yang akan di tampilkan, Contohnya

dengan 2 baris dan 6 kolom data, lebarnya adalah 100

percent.

10. Pada tabel tampilkan data, tambhkan juduk sesuai data yang

akan di tampilkan, misalkan; No, Kode, Nama User,

uUsername. Unutk 2 kolom kanan baris kedua dibuat label

menu Edit dan Delete.

Gambar 5.27 Desain tabel tampil data User dan desain

menunya

11. 2 kotak di atas label menu Edit dan Delete digabung

(merger cells) menjadi satu,kemudian dibuat teks Tools.

12. Masuklah pada halaman kode (Code view), sisipkan kode

pengaturan CSS pada tabel yang baru saja dibuat, seperti

contoh berikut yang di cetak tebal. <table class="table-list" width="100%" border="0" cellspacing="1"

cellpadding="3">

13. Pada bari pertama kode program, tambhkan skrip untuk

memanggil gilr koneksi database, filenya bernama

inc.connection.php pada folder library. Skripnya: <?php



?>

14. Buatlah skrip program unutk menampilka data User dari

database.Penulisan skrip diletakkan di bawah </tr> dan

sebelum <tr> dari tabel tampil data. <?php

// Skrip menampilkan data User

$mySql = "SELECT * FROM user ORDER BY kd_user ASC";


salah: ".mysql_error());

$nomor = 0;


$nomor++;

$Kode = $myData['kd_user'];

?>

Lihat ilustrasinya, skrip di atasan ada pada poin nomor (2). Dan diakhiri

dengan kode pada poin nomer (5) seperti gambar di bawah .

Gambar 5.28 Ilustrasi meletakan skrip program query ke

data base.

15. Pada baris kedua dari tabel tampil data akan di gunakan

untuk menampilkan informasi database. Sekarang,lengkapi

skrip berikut: <tr>

<td> </td>

<td> </td>

<td> </td>

<td>delete</td>

<td>edit</td>

</tr>

Dengan menambah skrip penampil data ke layar, seperti



<td> <?php echo $myData['kd_user']; ?> </td>

<td> <?php echo $myData['nm_user']; ?> </td>

<td> <?php echo $myData['username']; ?> </td>

<td width="9%" align="center"><a href="?open=User-

Delete&Kode=<?php echo $Kode; ?>" target="_self" onclick="return

confirm('YAKIN INGIN MENGHAPUS DATA USER INI ... ?')">

Delete</a></td>

<td width="9%" align="center"><a href="?open=User-

Edit&Kode=<?php echo $Kode; ?>" target="_self">Edit</a></td>

</tr> Ilustrasinya bisa dilihat pada gambar di bawah :

Gambar 5.29 Ilustrasi meletakan skrip program

menampilkan data

16. Masuk ke halaman tampilan ( Design view), pilih pada teks

menu Edit, lalu buat target link menunya ke alamat berikut: ?open=User-Edit&Kode=<?php echo $Kode; ?>

Ilustarsi gambarnya :

Gambar 5.30 Ilustrasi membuat kode untuk target

link untuk menu Edit

17. Seperti cara sebelumnya,pilih pada teks menu Delete, lalu

buat link menunya ke alamat berikut: ?open=User-Delete&Kode=<?php echo $Kode; ?>

18. Terakhir, untuk merapihkan teampil program, berikut warna

berbeda pada baris pertama judul yabel data, berikut font

tabel (bold) pada judul data, dan gabungkan 2 kotak di atas

kolom Edit dan Delete.

19. Simpan kembali programnya (Ctrl + S).

5.4.3 Membuat Program Tambah Data User

Sekarang Anda akan membuat program Tambah Data User,

atau juga disebut program Simpan Data User Baru. Nama file

program yang akan dibuat adalah user_add.php, di dalam program

ini berisi form masukan dengan jumlah input sesuai dengan tabel

user, yaitu 4 input.

Berikut cara membuatnya :


2. Buat dokumen baru (tekan Ctrl + N). Dari tab General, klik

Dynamic Page, lali klik tipe halaman PHP.

3. Simpan pada folder uatam elearning/admin dengan nama

user_add.php

4. Masuk pada halaman kode program (Code view), hapus

semua kode HTML yang ada di sana.

5. Masuk pada halaman desain (Desaign view), tambahkan area

form dari panel Forms.

6. Pada area form yang sudag ditambahkan,atur alamt

pemrosessan programnya dari bagian Action,panel

Properties.

Action : </php $_SERVER[„PHP_SELF‟};?>

Target : _self

Method : POST

7. Simpan kembali dokumen,yaitu tekan Ctrl + S.

8. Sebelumnya, pastikan kursor ada di dalam area garis merah

(form).

Dari panel Common, tambahkan objek tabel (Tabel: ) untuk

keranka desain form masukan, tabel di buat 6 baris dan 3

kolom,lebarnya 700 pixels, lali klik tombol Go untuk

,mengakhiri.

9. Gabungkan (merger) semua kotak dari baris pertama

menjadi satu.

Kemudian buat judul (misal: TAMBAH DATA USER), beri

efek huruf tebal (font bold).

10. Pada abri kedua dan seterusnya, buat judul kotak form

dengan teks; Kode, Nma User,Username dan Password,

buat juga teks titik dua (:) pada kotak tengah, kemudian

rapihkan tat letak teks dan kotak tabel,Contoh:

Gambar 5.31 Desain tabel kerangka untuk form Tambah

Data Siswa

11. Pada bari Kode bagian kotak kanan, tambahkan form

masukan barupa Text Field dari panel Forms, lalu atur

nilainya pada panel Properties.

Char width : 10

Max chars : 4

Init Val : <?php echo $dataKode;?>

12. Pada baris Nama User bagian kanan, tambahkan form

masukkan berupa Text Field dari panel Forms, lalu atur


TextField : txtNama

Char width : 70

Max chars : 100

Init Val : <?php echo $dataNama;?>

13. Pada baris Username bagian kanan, tambahkan form

masukan berupa Text Field dari panel Forms, lalu atur


TextField : txtUsername

Char width : 20

Max chars : 20

Int Val : <?php echo $dataUsername;?>

14. Pada baris Password bagian kanan, tambahkan form

masukan barupa Text Field dari panel Forms, lalu atur


TextField : txtPassword

Char width : 20

Max chars : 20

Type : Password

Catatan

Pada bagian kotak masukan (input) data Password harus

Anda pilih opsi Type:Password, dengan cara ini maka data

yang siisikan ke dalam kotak akan tersebunyi, yanf terlihat

hanya titik-titik atau bintang saja.

15. Kembali ke halaman desain (Design view). Pada baris paling

bawa, tambahkan objek tombol berupa Button, lalu atur nilai

propertinya.

Button Name : btnSimpan

Value : Simpan

Action : Submit form

16. Simpan pada forlder utama proyek dengan nama

user_add.php.

Setelah desain form tambah data baru selesai di buat,

selanjutnya Anda dapat masuk ke halaman kode (Code view)

unutk membuat skrip program yang di perlukan unutk

menyimpan data ke database. Skrip simpan data juga dilengkapi

dengan skrip validasi form, dam krip mengatifkan variable pada

kotak form saat program berjalan. Berikut langkahnya :

1. Dari Dreamweaver, buka ;agi file user_add.php.

2. Masukan pada halaman kode program (Code view), pastikan

pada bagia Action form sudah memiliki alamat <?php

$_SERVER[‘{H{_SELF’];?>.

3. Sisipkan kode efek CSS pada tag table,sepeti contoh

berikut yang di cetak tebal

<table class="table-list" width="650" border="0" cellspacing="1"

cellpadding="3">

4. Carilah skrip dari form masukan data Kode, supaya kotak

form tidak bisa di ketik atau objek nya mati (disable),Anda

dapat menambahkan kode readonly+”readonly” pada tagnya.

Contoh yang cetak tebal: <input name="textfield" type="text" value="<?php echo $dataKode; ?>"

size="10" maxlength="4" readonly="readonly"/>

5. Buat sktio dasar buka tutup PHP di lengkapi skrip unutk

memanggil file koneksi database,yaitu inc.connection.php.

6. Di bawah skrip koneksi database, buat skrip unutk mengisi

kotak form saat di jalankan,Skrip-nya : $dataKode = buatKode("user", "U");


$dataUsername= isset($_POST['txtUsername']) ?

$_POST['txtUsername'] : '';

Illustrasi penempatan Skrip :

Gambar 5.32 Membuat skrip program untuk mengisi kotak

form

Kode $dataKode $dataKode = buatKode("user", "U");

Perintah buatkode() adalah nama fungsi yang ada pada file

program inc.library.php. Gunanya untuk membuat kode

otomatis secara urut user,yaitu u01, u02, u03 da

seterusnya.

Kode $dataNama $dataNama = isset($_POST['txtNama']) ? $_POST['txtNama'] : ''; Variabel $dataNAma akan diisi dengan data kosong saat

pertama form di jalankan,dan akan diisi dengan data dari

kotak Nama User (txtNama) jika sudah di-submit (tombol

Simpan di klik) ketika ada ke salahan form lain.

Kode $dataUsername $dataUsername= isset($_POST['txtUsername']) ?


Variabel $dataUsername akan siisi dengan data kosong

saat pertama form di jalankan,dan akan diisi dengan data

dari kotak Username (txtUsername) jika sudah di-submit

(tombol Simpan diklik) ketika ada kesalahan form lain.

7. Kemudian buat skrip unutk membaca tombol Simpan

(btnSimpan) saat di Klik unutk menyimoan data, Skripnya : # SKRIP TOMBOL SIMPAN DIKLIK




8. Sekarang buat skrip untuk membaca data form, skripmya

dibuat di dalam area skrip tombol Simpan (btnSimpan) yang

sudah dibuat sebelumnya. Skripnya : // Baca Data dari Form Input


$txtUsername = $_POST['txtUsername'];

$txtPassword = $_POST['txtPassword'];

9. Kemudian, buat deklarasi variabel array, dengan nama

$pesanError. // Validasi Form Inputs


10. Buat skrip unutk validasi form, untuk masukan Nama

User.Jika kosong, maka buat daftar pesan error ke dalam

variabel array $pesanError. Skripnya : if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama User</b> tidak boleh

kosong !";

}

Lokasi penempatan skrip dapat di dalam sepeti gambar

berikut :

Gambar 5.33 Membuat skrip program saat tombol Simpan

diklik

11. Selanjutnya,buat skrip unutk validasi form, untuk form

masukan Username. Jika kosong, maka buat daftar pesan

error ke dalam variabel array $pesanError, Skrinya : if (trim($txtUsername)=="") {

$pesanError[] = "Data <b>Username</b> tidak boleh

kosong !";

}

12. Buat skrip untuk validasi form, untuk form masukan

Password jika kosong, maka buat daftar pesan error ke

dalam variabel arry $pesanError. Skripnya: if (trim($txtPassword)=="") {

$pesanError[] = "Data <b>Password</b> tidak boleh

kosong !";

}

13. Buat skrip program untuk menampilkan pesan error jika di

temukan dalam validasi,Skripnya: if (count($pesanError)>=1 ){



$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

14. Buat skrip program untuk menyimpan data ke database.

Jadi, jika sudah tidak ada error atau kesalahan data (form

terisi semua), data akan disimpan. Skripnya: else {


$kodeBaru = buatKode("user", "U");

$mySql = "INSERT INTO user (kd_user,

nm_user, username, password)

VALUES('$kodeBaru', '$txtNama', '$txtUsername',

MD5('$txtPassword'))";



if($myQry){


url=?open=User-Data'>";

}

exit;

}

15. Simpan kembali programnya, Ctrl + S.

Untuk menjadikan halaman program Tambah Data User di

atas, Anda dapat mengklik menu Data User yang ada di menu

utama Aplikasi E-learning, lalu klik ikon Add Data yang ada di

halaman program Tampil Data User. Selain itu,Anda juga dapat

langsung mengakses lewat alamat browser, ketika alamat ;

http://localhost/elearning/admin/?open=User-Add. Berikut

contoh tampilannya:

http://localhost/elearning/admin/?open=User-Add

Gambar 5.34 Tampilan halaman program Tambah Data User

5.4.4 Membuat Program Ubah Data User

Program ini berguna unutk memperbaiki data User yang salah,

data dapat di perbaiki dengan cara menampilkan kembali pada

form masukan seperti menambahkan data baru. Program Ubah

Data User dibuat dengan nama file user_edit.php, program ini

dapat di akses lewat menu Edit yang ada pada halaman program

Tampil Data.

Dari halaman Program Tampil Data, klik menu Edit pada baris

data User yang ingin di perbaiki isinya. Data User akan di

tampilkan kembali ke dalam form program bernama user_edit.php.

Untuk membuat form tersebut dapat di buat dengan memodifikasi

file user_add.php yang sudah di buat sebelumnya.Caranya :

Gambar 5.35 Ilustrasi langkah data,data User yang di pilih

akan ditampilkan kembali ke form

1. Buka file user_add.php yang sudah di buat sebelumnya.

2. Simpan ulang (Save As) dengan nama baru,

yaiitu;user_edit.php.

3. Masuk ke halaman desain (Design view), lalu perbarui

informasi judul pada baris header dengan teks; UBAH

DATA USER.

4. Pada baris Kode, tambahkan objek form HiddenField unutk

merekam data Kode User (kd_user) uang saat itu sedan di

perbaiki.

Pengaturannya dari panel properties,yaitu:

TextField : txtKode

Value : <?php echo $dataKode;?>

5. Pada bagian Password, tambahkan juga objek form

HoddenField unutk merekam data Password lama (Password)

dari dataBase.

Pengaturannya adalah :

TextFiled : txtPassLama

Value : <?php echo $myData[„password‟];?>

6. Simpan kembali programnya (tekan CTRL + S).

7. Sekarang masuklah ke halaman kode program (Code view).

Hapus skrip unutk validasi form data Password. Skrip yang

dihilangkan adalah : if (trim($txtPassword)=="") {


kosong !";

8. Selanjutnya buat skrip untuk menampilkan data User yang

sedang diedit, modifikasi skrip program variable form.

Perbaiki skrip berikut : // Membuat variabel isi ke form

$dataKode = $myData['kd_user'];


$myData['nm_user'];


$_POST['txtUsername'] : $myData['username'];

Skrip di atas di perbaiki dan di tambahkan menjadi : # MEMBACA DATA DARI DATABASE UNTUK DIEDIT


$mySql = "SELECT * FROM user WHERE kd_user='$Kode'";





$dataKode = $myData['kd_user'];


$_POST['txtNama'] : $myData['nm_user'];



Penjelasan :

Dengan skrip di atas, maka saat pertama kali program

user_edit.php di jalankan, maka kotak isian form akan

menampilkan data yang berasal dari database,sesuai Kode

yang di pilih dari menu Edit.

Penjelasan Kodenya:

Variabel $dataKode $dataKode = $myData['kd_user']; Variabel $dataKode diisi dengan data kode User dari

database, yaitu data yang sedang diedit.

Variabel $dataNama $dataNama = isset($_POST['txtNama']) ? $_POST['txtNama'] :

$myData['nm_user']; Variabel $dataNama diisi dengan data Nama User (kolom

nm_user), datanya berasal dari data yang sedang di edit.

Jika form sudah pernah di-post (tombol Simpan diklik),

maka $dataNma akan diisi nilai form itu sendiri.

9. Sekarang menuju skrip sebelu // Skrip Simpan data ke

Database,tambah skrip untuk memperbarui isi Password

jika ada perubahan.Skripnya : // Memperbarui Password Jika ada Perubahan

if (trim($txtPassword)=="") {

$txtPassLama= $_POST['txtPassLama'];

$passwordSQL = ", password='$txtPassLama'";

}

else {

$passwordSQL = ", password

=MD5('$txtPassword')";

}

10. Selanjunya perbaiki query(perintah SQL) unutk menyimpan

data dari yang semula memakai perintah INSERT di ubah

menjadi UPDATE. Caranya adalah:

Temukan dan hapus skrip berikut ini : // Skrip Simpan data ke Database

$kodeBaru = buatKode("user", "U");

$mySql = "INSERT INTO user (kd_user, nm_user,

username, password)

VALUES('$kodeBaru',

'$txtNama', '$txtUsername', MD5('$txtPassword'))";



if($myQry){

Kemudian di ganti dengan skrip berikut :

Gambar 5.36 Posisi skrip program menyimpan data kembali

hasil modifikasi // Skrip Simpan data ke Database

$Kode = $_POST['txtKode'];

$mySql = "UPDATE user SET nm_user='$txtNama',

username='$txtUsername'

$passwordSQL WHERE

kd_user='$Kode'";


die ("Gagal query ".mysql_error());

11. Simpan kembali programnya,tekan Ctrl + S.

5.4.5 Membuat Program Hapus Data User

Selanjutnya Kita akan membuat Skrip program berfungsi unutk

menghapus data User dari database, skripnya disimpan dalam file

bernama user_delete.php, file ini akan di jalanakan saat menu

Delete diklik, menu ini ada di halaman Tampil Data. Caranya :


2. Buat dokumen baru PHP,lalu masuklah ke halaman kode

program (Code view).

3. Hapus semua skrip yang ada di dalamnya, lalu ketikkan skrip


// Valdasi Login User

include_once "../library/inc.seslogin.php";






// Hapus data sesuai Kode yang terbaca, kecuali untuk

User=Admin tidak boleh dihapus

$mySql = "DELETE FROM user WHERE kd_user='$Kode' AND

username !='admin'";



if($myQry){

// Refresh halaman


url=?open=User-Data'>";

}

}

else {



}

?>

4. Simpan program di atas dengan nama file user_delete.php.

Supaya berhati-hati dalam menghapus data, maka pada menu

Delete harus ditambah dengan skrip notifikasi,Caranya:

1. Buka lagi file program user_data.php.

2. Masukalah pada halaman kode program (Code view), carilah

baris kode dari menu Delete.

3. Sisipkan skrip perintah onClick,seperti berikut: <a href="?open=User-Delete&Kode=<?php echo $Kode; ?>"

target="_self" onclick="return confirm('YAKIN INGIN MENGHAPUS

DATA USER INI ... ?')"> Delete</a>


4.5 Program Manajemen Guru

Guru adalah pihak pengajar dalam aplikasi E-learning, guru akan

diberikan halaman sendiri untuk login mengelola data seperti

Materin Belajar, dan juga Tugas Belajar.Selain itu, Guru nanti juga

memiliki fasilitas untuk memeriksa kiriman data tugas yang dikirim

oleh Siswa.

Pada bagin ini Anda akan membuat Program Manajemen Data

Guru,dimana pada halaman program ini memiliki fasilitas untuk

Tambah data guru baru, Tampilan data, Ubah atau memperbaiki

data dan Harus data.Setiap fasilitas memiliki file program yang

saling terkait lewat menu utama. Berikut ini adalah file program

yang akan di buat:

guru_data.php :File program ini sebagai program utama

manajemen data Guru,program ini akan menampilkan semua

data Guru database, yaitu tabel guru. Dari halaman program

ini disediakan menu Add Data, Edit dan Delete.

guru_add.php :File program yang berisi form unutk

menambah data Guru baru ke dalam tabel guru, halaman ini

diakses lewat menu Add Data.

guru_edit.php :File program yang berisi form unutk

mengubah atau memperbaiki data yang ada di database tabel

guru, diakses lewat menu Edit.

guru_delete.php :Berisi skrip program untuk menghapus

data yang dipilih dari halaman tampil guru_data.php,yaitu dari

menu Delete.

5.5.1 Membuat Menu data Kontrol Program Guru

Pertama Kita siapkan menu utama untuk mengakses halaman

utama program Tampil data, nama menunya adalah Data Guru,

dibuat pada filr menu.php. Selanjutnya, Anda dapat membuat

skrip kontrol menu dari file buka_file.php. Berikut adalah

langkahnya :

1. Buka Windows Explorer.

2. Buka file menu.php lewat Dreamweaver.

3. Tambahkan menu Data Guru, dan arahkan link-nya menuju

?open=Guru-Data. 4. Selanjutnya uka file buka_file.php lewat Dreamweaver.

5. Masuk ke halaman kode program (Code), buat skrip program

untuk menjalankan link menu Data Guru yang di buat tadi.

Untuk Alamat ?open=Guru-Data,File program yang

dijalankan adalah guru_data.php.

Case 'Guru-Data' :

if(!file_exists ("guru_data.php")) die


include "guru_data.php"; break;

6. Buat skrip program unutk menjalankan file guru_add.php

pada saat menu Add Data diklik, yaitu arah Link-nya adalah;

?open=Guru-Add : Case 'Guru-Add' :

if(!file_exists ("guru_add.php")) die ("File tidak

ada !");

include "guru_add.php"; break;

7. Buat skrip program untuk menjalankan file guru_edit.php

pada saat menu Edit diklik, yaitu arah Link-nya adalah;

?open=Guru-Edit. Case 'Guru-Edit' :

if(!file_exists ("guru_edit.php")) die ("File tidak

ada !");

include "guru_edit.php"; break;

8. Buat skrip program untuk menjalankan file guru_delete.php

pada saat menu Delete diklik,yaitu arah Link-nya adalah;

?open=Guru-Delete : Case 'Guru-Delete' :

if(!file_exists ("guru_delete.php")) die ("File

tidak ada !");

include "guru_delete.php"; break; 9. Setelah selesai, simpan programnya (Ctrl + S).

5.5.2 Membuat Program Tampil Data Guru

Program ini akan menjadi halaman utama dari program

Manajemen Data Guru,karena di dalam halaman prorgram ini akan

dilengkapi menu/ ikon Add Data yang dipakai untuk mengakses

halaman Tambah Data, dari halaman tampil data ini juga di lengkapi

fasilitas Edit untuk memperbaiki data yang salah, dan juga ada

fasilitas menu Delete untuk menghapus data. Berikut adalah

contoh tampilannya:

Gambar 5.37 Tampilan halaman Tampil Data Guru, menapilkan

semua data

Program Tampil Data Guru di buat di dalam file bernama

guru_data.php,pada program ini Kita bisa menampilkan data Guru

yang diperlukan karen informasi datanya banyak, maka tidak harus

semua kolom data ditampilkan, misalnya saja hanya data Kode,

Nama, Kelamin dan Alamat.

Berikut cara membuatnya :


2. Buat dokumen baru (tekan Ctrl + N ), lalu buka tipe halaman

PHP.

3. Simpan pada folder utama elearning/admin/,dengan nama

guru_data.php. 4. Masuk pada halaman kode program (Code), hapus semua

skrip HTML yang ada.

5. Dari fasilitas paned Common, tambahkan tabel untuk

tampilan kerangka utama, sebanyak 4 baris dan 1 kolom,

lebarnya 700 pixel, pada header pilih None.

6. Pada baris pertama, tambahkan judul dengan font header 1,

yaitu; DATA GURU.

7. Tambahkan gambar berlogo Add Data pada baris ke-2,

filenya ada di folder images. Caranya, klik Insert, klik

Image,lalu cari file btn_add_data.png.

8. Pilih atau klik pada gamabar ikon menu Add Data, lalu dari

dalam Properties buat target link menuju ke alamat berikut: ?open=Guru-Add

9. Tambahkan desain tabel baru ( untuk table tampil data) di

dalam baris ke-3 dari tabel utama. Tabel baru disesuaikan

data Guru yag akan ditampilakan, yaitu dengan 2 baris

(Rows) dan 7 kolom (Columns) data, lebarnya adalah 100

percent.

10. Pada tabel tampil data, tambahkan judul sesui data yang

akan ditampilkan, misalnya; NO, Kode, Nama Guru, L/P

dan Alamat.Kemudian bari kedua, 2 kolom bagian kanan di

buat label menu Edit dan Delete.

Gambar 5.38 Desain tabel tampil data dan desain menunya.

11. 2 kotak di atas label menu Edit dan Delete di gabung

(Merger cells) menjadi satu, supaya teks Tools melebar 2

kolom.

12. Masuklah pada halaman kode program (Code view), sisipkan

kode pengaturan CSS pada tabel yang baru saja di buat,

seperti cotoh berikut yang cetak terbal. <table class="table-list" width="100%" border="0" cellspacing="1"

cellpadding="3">

13. Pada baris pertama kode proggram, tambahkan skrip unutk

memanggil koneksi database, filenya bernama

inc.connection.php pada folder library, skripnya:. <?php


?>

14. Di bawah skrip koneksi database, buatlah skrip program

untuk pembbagian halaman data (Paging), letakkan skrip

setelah koneksi database. # UNTUK PAGING (PEMBAGIAN HALAMAN)

$baris = 50;

$hal = isset($_GET['hal']) ? $_GET['hal'] : 1;

$infoSql= "SELECT * FROM guru";

$infoQry= mysql_query($infoSql, $koneksidb) or die ("error paging:

".mysql_error());

$jumlah = mysql_num_rows($infoQry);

$maks = ceil($jumlah/$baris);

$mulai = $baris * ($hal-1);

15. Buatlah skrip program untuk menampilkan data Guru dari

database. Penulisan skrip diletakkan di bawah </tr> Dan

sebeluma <tr> dari tabel tampil data. <?php

// Skrip menampilkan data Guru

$mySql = "SELECT * FROM guru ORDER BY kd_guru ASC

LIMIT $mulai, $baris";



$nomor = 0;


$nomor++;

$Kode = $myData['kd_guru'];

?>

16. Buatlah skrip penutup dari skrip penampil data

database.Yaitu; <?php }?>


untuk menampilkan informasi data dari database.

Sekarang,lengkapi skrip berikut : <tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

Dengan menambah skrip PHP untuk menampilkan data ke

layar, seperti contoh berikut: <tr>


<td> <?php echo $myData['kd_guru']; ?> </td>

<td> <?php echo $myData['nm_guru']; ?> </td>

<td> <?php echo $myData['kelamin']; ?> </td>

<td> <?php echo $myData['alamat']; ?> </td>

<td width=”7%”>Delete</td>

<td width=”7%”>Edit</td>

</tr>

18. Sekarang aktifkan halaman tampilan desain (Design view),

pilih pada teks menu Delete, lalu buat target link menunya

ke alamat berikut: <a href="?open=Guru-Delete&Kode=<?php echo $Kode; ?>

19. Seperti cara sebelumnya, pilih pada teks menu Edit, lalu

buat link menunya ke alamat berikut: <a href="?open=Guru-Edit&Kode=<?php echo $Kode; ?>

20. Dari desain tabel utama, baris tabel paling bawah di pecah

menjadi 2 (Split) kolokm. Caranya, klik kanan pada baris

paling bawah, pilih menu Table, pilih Split Cell. Pilih opsi

Columns, tentukan angka 2 pada kotak isian, lalu klik Ok.

Gambar 5.39 Cara membagi kolom tabel menjadi 2

21. Pada bari tabel paling bawah yang sydah di pecah menjadi 2

kolom/kotak, tambah teks judul Jumlah Data: dan Halaman

Ke: dengan posisi rata kanan.

Gambar 5.45 Hasil membuat teks judul pada baris tabel

22. Masuk ke halaman kode program (Code View), di samping

kanan teks Jumlah Data:, buatlah skrip untuk menampilkan

jumlah data yang berhasil ditampilkan. Jumlah Data : <?php echo $jumlah; ?>

23. Di samping kanan teks Halaman ke:, buatlah skrip unutk

menampilkan angka nomor halaman (paging),Skrip: Halaman Ke :

<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Guru-Data&hal=$h'>$h</a> ";

}

?>

Ilustrasi gambarnya :

Gambar 5.40 Penempatan skrip jumlah data dan nomer

halaman


5.5.3 Membuat Program Tambah Data Guru

Setelah program Tampil Data dibuat, dan menu ikon Add Data

juga dibuat, maka sekarang Anda membuat program Tambah Data

Guru, program ini di simpan dalam file guru_add.php. dengan

program ini, Anda dapat menyimpan data Guru baru ke dalam

database. Berikut cara membuatnya:



Dynamic Page, lalu klik tipe halaman PHP.

3. Simpan pada folder utama elearning/admin/ dengan nama

guru_add.php. 4. Masuk pada halaman kode program (Code), hapus semua

kode HTML.

5. Masuk pada halaman desai (Design), tambahkan area form

dari panel Forms.

6. Pada area form yang sudah ditambahkan, atur alamat

pemrosesan programnya dari bagian Action, panel Porpeties.

Action : <?php $_SERVER{„PHP_SELF‟}/>

Target : _self

Method : POST

7. Simpan kembali dokumennya, yaitu tekan Ctrl + S.

8. Klik pada area form (garis merah), sela njutnya kita akan

membuat kerangka desain tabel dan objek masukan di dalam

area form tersebut.

9. Dari panel Common klik ikon Table unutk membuat tabel

kerangka desain form, detailnya 9 baris (Rown) dan 3 kolom

(Coloumns), lebarnya 650 pixels, lalu klik tombol Go.

Pastikan tabel berada di dalam area garis merah (form).

10. Gabungkan (merger) baris tabel paling atas menjadi satu

kotak.kemudian buat judul form (misal; TAMBAH DATA

GURU), lalu beri format hruu tebal (bold).

11. Pada baris kedua kolom kiri, buat judul kotk form dengan

teks si sesuaikan data Guru yan di buat, sesuaikam dengan

susunan kolom tabel guru.

12. Pada kotak/kolom tengah, buat juga teks titik dua (:) pada

kotak tengah, kemudian raihkan tata letak teks dan kotak

tabel, Contoh:


Data Guru

13. Pada baris kode bagian kanan, tambahkan form masukan

berupa Text Field dari panel Forms, lalu atur nilainya padaa

Pnel Properties.

Char Width : 10

Max chars : 4

Init Val : <?php echo $dataKode; ?>

14. Pada baris Nama Guru, tambahkan objek form masukan

Text Field dari panel Forms, lalu atur nilainya pada panel

Properties.

TextField : txtNama

Char width : 80

Max chars :100

Init Val : <?php echo $dataNama; ?>

15. Pada baris kelamin bagian kanan, tambah kan form masukan

barikut Combobox atau List/Menu dari panel Forms, lalu

atur nilainya dari panel Properties.

List.Menu : cmbKelamin

Type : Menu

Untuk melekapi, masuklah ke halaman kode program

(Code), carilah teks judul Kelamin. Kemudianm lengkapi

skrip dari List/menu yang baru saja di buat dengam skrip

membuat pilihan kemlamin. Skripnya: <select name="cmbKelamin">


<?php

$pilihan = array("L"=> "Laki-laki (L)", "P" => "Perempuan (P)");

foreach ($pilihan as $indeks => $nilai) {

if ($dataKelamin==$indeks) {

$cek=" selected";

} else { $cek = ""; }

echo "<option value='$indeks' $cek>$nilai</option>";

}

?>

</select>

16. Pada bari Alamat bagian kanan,tambahkan form masukan

berupa Text Field dari pane Forms, lalu atur nilainya pada

panel properties.

TextField : txtAlamat

Char width : 80

Max chars : 100

Init val : <?php echo $dataAlamat; ?>

17. Pada bari NO. Telepon bagian kanan, tambhkan form

masukan berupa Text Field dari pamel Forms, lalu atur

nilainya pada panel Propeties.

TextField : txtNoTelepon

Char width : 30

Max chars :30

Init Val : <?php echo $dataNoTelepon;?>

18. Pada baris Usename bagian kanan, tambahkan Text Field

dari panel Forms unutk masukan data Username, lalu atur


Textfield : txtUsername

Char width :20

Max chars : 20

Init Val : <?php echo $datUsername; ?>

19. Pada bari Password bagian kanan, tambakan Text Field dari

panel Forms unutk masukan data Password, lalu atur nilainya

pada panel Properties.


Char width : 20

Max chars : 20

Type : Password

20. Pada bari paling bawah, tambahkan objek tombol berikut

Button, lalu atur Propertinya


Value : Simpan


21. Simpan kembali programnya, tekan Ctrl + S.

Berikut adalah hasilnnya:

Gambar 5.42 Hasil akhir desain form masukan data Guru

Setelah desain form selesai dibuat, sekarang Anda dapa

melanjutkan untuk embuat skrip program simpan data ke database,

dimulai dari skrip unutk membaca variabel form, skrip validasi

dorm dan skrip berisi perintah SQL unutk menyimpan data ke

database tabel guru. Berikut langkahnya:

1. Dari Dreamweaver, buka lagi file guru_add.php.

2. Madukan pada halaman kode program (Code view).

3. Sisipkan kode efek CSS pad tag Table, seperti conotoh

berikut yang di cetak tebal. <table class="table-list" width="650" border="0" cellspacing="1"

cellpadding="3">

4. Pada baris pertama program, buatlah skrip unutk membaca

file koneksi database dan membaca skrip library, Skripnya: <?php

include_once "../library/inc.connection.php"


?>

5. Di bawah skrip koneksi database, buat skrip unutk mengisi

kotak form saat dijalankan. Kodenya : // Membuat variabel isi ke form

$dataKode = buatKode("guru", "G");


$_POST['txtNama'] : '';

$dataKelamin = isset($_POST['cmbKelamin']) ?

$_POST['cmbKelamin'] : '';

$dataAlamat = isset($_POST['txtAlamat']) ?

$_POST['txtAlamat'] : '';

$dataNoTelepon = isset($_POST['txtNoTelepon']) ?

$_POST['txtNoTelepon'] : '';

$dataUsername = isset($_POST['txtUsername']) ?


$dataPassword = isset($_POST['txtPassword']) ?

$_POST['txtPassword'] : '';

Ilistrasi penempatan skrip:

Gambar 5.43 Membuat skrip program temporary untuk

form

Kode $dataKode. $dataKode = buatKode("guru", "G"); Skrip di atas unutk membuat Kode Guru Otomatis dari

tabel guru, dengan inisial Kode adalah G,maka data kode

otomatis yang dihasilkan adalah G001, G002, G003

sampai dengan maksimal G999, panjangnya Kode

mengikuti panjang kolom utama (Primeri key) dari tabel

guru, yaitu Char(4) pada kolom kd_guru. Sedangkan

perintah buatkode() adalah nama fungsi yang ada pada

file program inc.library.php.

Kode $dataNama $dataNama = isset($_POST['txtNama']) Variabel $dataNama akan diisi dengan data kosong saat

pertama form di jalankan, dan akan diisi dengan data

dari kotak Nama Guru jika sudah di-Submit (tombol

Simpan di klik).

Fungsi utama dari skrip ini adalah untuk mengisi data

pada kotak form jika saat penyimapanan ada kesalahan

pada kotak isian lain akibat validasi, halaman SSsakan

hilang.

6. Di bawah skrip koneksi database. Buat skrip unutk membaca

tombol Simpan (btnSimpan) saat diklik,sehingga nanti skrip

lengkap unutk menyimpan data akan dibuat di sini, Skripnya : # SKRIP TOMBOL SIMPAN DIKLIK




// Menampilkan Pesan Error dari Form


}

7. Sekarang buat skrip untuk membaca data dari setiap kotak

form masukan, skripnya dibuat di dalam area skrip tombol

Simpan (btnSimpan).Skripnya : // Baca Data dari Form Input


$cmbKelamin = $_POST['cmbKelamin'];

$txtAlamat = $_POST['txtAlamat'];

$txtNoTelepon = $_POST['txtNoTelepon'];



Berikut adalah ilustrasinya :

Gambar 5.44 Penempatan skrip php,dan membuat skrip

pembaca tombol Simpan(btnSimpan) saat diklik

8. Buat deklarasi variable array, dengan nama $pesanError. // Validasi Form Inputs


9. Di bawah $pesanError = array(), buat skrip untuk validasi

masukan data Nama Guru. Jika kosong, maka buat daftar

pesan error ke dalam variable array $pesanError.Skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Kelas</b> tidak boleh

kosong !";

}

10. Buat skrip untuk validari masukkan data kelamin. Jika tidak

ada yang dipilih, maka buat daftar pesan error ke dalam

variable array $pesanError.Skripnya: if (trim($cmbKelamin)=="Kosong") {

$pesanError[] = "Data <b>Kelamin</b> belum ada yang

dipilih !";

}

11. Buat skrip unutk validasi masukan data Alamat. Jika

kosong, maka buat daftar pesan error ke dalam variable

array $pesanError. Skripnya: if (trim($txtAlamat)=="") {

$pesanError[] = "Data <b>Alamat</b> tidak boleh kosong

!";

}

12. Buat skrip untuk validasi masukan data No. Telepon. Jika

kosong, maka buat daftar pesan erro ke dalam variable

array $pesanError. Skripnya: if (trim($txtNoTelepon)=="") {

$pesanError[] = "Data <b>No. Telepon</b> tidak boleh

kosong !";

}

13. Buat skrip unutk validasi form, untuk form masukan

Username. Jika kosong, maka buat daftar pesan error ke

dalam variable array $pesanError. Skripnya: if (trim($txtUsername)=="") {


kosong !";

}

14. Buat skrip unutk validari form, unutk form masukan

Password. Jika kosong, maka buat daftar pesan erro ke

dalam variable array $pesanError. Skripnya: if (trim($txtPassword)=="") {


kosong !";

}

15. Buat skrip program untuk menapilkan pesan error jika

ditemukan dari validasi form. Skripnya: // Menampilkan Pesan Error dari Form




$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

else {


16. Pada bagian //Skrip Simpan data ke Database, buat skrip

program berisi perintah SQL untuk menyimpan data dari

data form ke database. Skripnya: else {


$kodeBaru = buatKode("guru", "G");

$mySql = "INSERT INTO guru (kd_guru, nm_guru,

kelamin, alamat, no_telepon, username, password)

VALUES('$kodeBaru',

'$txtNama', '$cmbKelamin', '$txtAlamat', '$txtNoTelepon',

'$txtUsername',

MD5('$txtPassword') )";



if($myQry){


url=?open=Guru-Add'>";

}

exit;

}

17. Sumpan kembali programnya, Ctrl + S.

Untuk menjalankan program Tambah Data Guru, Anda dapat

menjalankan dulu program utamanya, dan mengklik menu Data

Guru, setelah itu klik menu ikon Add Data. Selain itu juga

dapat diakses lewat alamat http://localhost/?open=Guru-Add.

Berikut contoh tampilannya:

Gambar 5.45 Tampilan halaman program Tambah Data Guru

5.5.4 Membuat Program Ubah Data Guru

Sekarang Kita akan membuat program Ubah Data Guru,

program ini dibuat dalam file guru_edit.php. cara kerja dari

program ini adalah Tampil Data, yaitu dengan memilih menu Edit

pada data Guru yang ingin diperbaiki. Data yang akan diperbaiki

ditampilkan kembali dalam bentuk form, dan selanjutnya datanya

dapat disimpan kembali. Berikut ini ilustrasinya:

http://localhost/?open=Guru-Add

Gambar 5.46 Dari halaman program Tampil Data, pilih dan klik

menu Edit pada data Guru yang akan di perbaiki (diubah) datanya

Sekarang Anda dapat membuat file guru_edit.php demgam

cara memodifikasi dari file guru_add.php. Caranya:

1. Buka file guru_add.php yang sudah dibuat sebelumnya.

2. Simpan ulang (Save As) dengan nama Bru, yaitu;

guru_edit.php.

3. Masuk ke halaman desain (design view), lalu ubah judul teks

yang ada menjadi; UBAH DATA GURU.

4. Pada baris Kode, tambahkan objek form HiddenField.

Fungsinya unutk merekan data Kode Guru yang di edit

(diubah) supaya dapat di baca dalam program.

TextField : txtKode

Value : <?php echo $dataKode;?>


HiddenField untuk merekam data password lama (password)

dari database.

Pengaturannya adalah:

TextField : txtPassLama

Value : <?php echo $myData{„password‟};?>


7. Sekarang masuklah ke halaman kode program (Code view),

hapus skrip untuk validasi form data password. Skrip yang

di hilangkan adalah : if (trim($txtPassword)=="") {


kosong !";

}

8. Selanjunya buat skrip untuk menampilkan data Guru yang


Perbaiki skrip berikut: // Membuat variabel isi ke form

$dataKode = buatKode("guru", "G");




$_POST['cmbKelamin'] : ''



Skrip di atas di perbaiki dan di tambah sehingga menjadi : # MEMBACA DATA DARI DATABASE UNTUK DIEDIT


$mySql = "SELECT * FROM guru WHERE kd_guru='$Kode'";





$dataKode = $myData['kd_guru'];


$_POST['txtNama'] : $myData['nm_guru'];


$_POST['cmbKelamin'] : $myData['kelamin'];

$dataAlamat = isset($_POST['txtAlamat']) ?

$_POST['txtAlamat'] : $myData['alamat'];


$_POST['txtNoTelepon'] : $myData['no_telepon'];



Penjelasan :

Dengan skrip di atas, maka saat pertama kali program

guru_edit.php di jalankan, maka kotak isian form akan

menampilkan data yang berasal dari database,sesuai Kode

yang dipilih dari menu Edit.

Penjelasan data yang sedang di edit:

Variable $data Kode $dataKode = $myData['kd_guru'];

Variable $dataKode diisi dengan data koe Guru dari

database, yaitu data yang sedang diedit.

Variable $dataNama $dataNama = isset($_POST['txtNama']) ?

$_POST['txtNama'] : $myData['nm_guru'];

Varibale $dataNama diisi dengan data Nama Guru

(kolom nm_guru), datanya berasal dari data yang

sedang diedit, jika form sudah pernah di-post

(tombol Simpan di klik), maka $dataNama akan diiisi

nilai dari form itu sendiri.

Ilustrasi adalah:

Gambar 5.47 posisi program menampilkan data ke dalam

variable supaya dapat dibaca di form

9. Sekarang menuju skrip sebelum // Skrip Simpan data ke

Database, tambahkan skrip unutk memperbaiki isi pasword

jika ada perubaha. Skripnya: // Memperbarui Password Jika ada Perubahan




}

else {



}

10. Selanjutnya perbaiki query(perintah SQL) unutk menyimpan

data dari yang semula memakai perintah INSERT diubah

menjadi UPDATE. Cara adalah:

Temukan dan hapus skrip berikut ini: $kodeBaru = buatKode("guru", "G");

$mySql = "INSERT INTO guru (kd_guru, nm_guru,

kelamin, alamat, no_telepon, username, password)

VALUES('$kodeBaru',

'$txtNama', '$cmbKelamin', '$txtAlamat', '$txtNoTelepon',

'$txtUsername',

MD5('$txtPassword') )";

Kemudian di ganti dengan skrip berikut: // Skrip Simpan data ke Database

$Kode = $_POST['txtKode'];

$mySql = "UPDATE guru SET nm_guru='$txtNama',

kelamin='$cmbKelamin', alamat='$txtAlamat',

no_telepon='$txtNoTelepon',

username='$txtUsername' $passwordSQL

WHERE kd_guru='$Kode'";

Ilustarasinya dapat di lihat pada gambar:

Gambar 5.48 Posisi skrip program menyimpan data hasil

modifikasi


5.5.5 Membuat Program Hapus Data Guru

Selanjutnya Anda dapat melengkapi program manajemen Data

Guru dengan fasilitas Hapus Data, yaiut dengan membuat skrip

guru_delete.php, Skrip ini nanti akan di jalankan saat Anda

menklik menu Delete yang ada di halaman program Tampil Data

Guru. Caramya:


2. Buat dokumen baru PHP, lalu masuklah ke halaman kode

program (Code).

3. Hapus semua skrip yaNg ada di dalamnya, lalu ketikkan skrip

program berikut : <?php







$mySql = "DELETE FROM guru WHERE kd_guru='$Kode'";



if($myQry){

// Refresh halaman


url=?open=Guru-Data'>";

}

}

else {



}

?>

4. Simpan program di atas dengan nama file guru_delete.php.

Supaya data Guru yang akan dihapus tidak langsung

terhapus dari atabase, maka pada menu Delete harus

dilengkapi dengan skrip notifikasi, sehingga akan muncul

jendela pertanyaan sebelum skrip hapus dijalankan. Caranya:

1. Buka lagi file program guru_data.php.

2. Masuklah pada halaman kode program (Code view), carilah


3. Sisipkan ksrip printah onClick, seperti berikut: <a href="?open=Guru-Delete&Kode=<?php echo $Kode; ?>"


DATA GURU INI ... ?')">Delete</a>


4.6 Program Manajemen Siswa

Pada bagian ini Anda akan belajar membuat Program

Manajemen Data Siswa, diman pada program ini memiliki fasilitas

unut Tmabah data Siwswa, Tampilkan data, Ubah data dan Hapus

Data. Setiap fasilita memiliki file program sendiri, yang masing-

masing akan saling terkait lewat menu utama (menu.php) dan lewat

program Tampil Data. Berikut ini adlah file program yang akan di

buat:

Siswa_data.php : File progra, yang berfungsi sebai

program utama manajemen data Siswa. Halaman ini

akan dijalankan lewat menu Data Siswa yang dibuat

pada halaman utama Aplikasi E-learning. Program ini

akan menampilkan semua dataSIswa dari database ke

layar, pada halaman program ini disediakan menu Add

Data,Edit dan Delete.

Siswa_edit.php : File program yang berisi form

unutk mengubah atau memperbaiki data yang ada di

tabel siswa, dapat diakses lewat menu Edit.

Siswa_delete.php : Berisi skrip program unutk

menghaspus data yang dipilih dari halaman tampil

siswa_data.php,yaitu dari menu Delete.

5.6.1 Membuat Menu dan Kontrol Program Siswa

Pertama Anda dapat menyiapkan menu utama untuk mengakses

halaman utama program Tampil Data, nama enunya adalah Data

Siswa, dibuat pada file menu.php. selanjunya. Anda dapat

membuat skrip kontrol menunya dari file buka_file.php.berikut

adalah panduannya:



3. Tambahkan menu Data Siswa, dan arahkan link-nya menuju

?open=Siswa-Data.Seperti berikut:

Gambar 5.49 Membuat menu Data Siswa dari file

menu.php

4. Sekarang buka file buka_file.php lewat Dreamweaver.

5. Masuk ke halaman kode program (Code), buat skrip program

untuk menjalankan link menu Data Siswa yang dibuat tadi.

Unutk alamat ?open=Siswa-Data, file program yang

dijalankan adalah siswa_data.php. case 'Siswa-Data' :

if(!file_exists ("siswa_data.php")) die ("File

tidak ada !");

include "siswa_data.php"; break;

6. Buka skrip program untuk menjalankan file siswa_data.php

pada saat menu/tombol Add Data di klik, yaitu arah Link-

nya adalah; ?open=Siswa-Add : case 'Siswa-Add' :

if(!file_exists ("siswa_add.php")) die ("File tidak

ada !");

include "siswa_add.php"; break;

7. Buat skrip program untuk menjalankan file siswa_edit.php


?open=Siswa-Edit: case 'Siswa-Edit' :

if(!file_exists ("siswa_edit.php")) die ("File

tidak ada !");

include "siswa_edit.php"; break;


siswa_delete.php pada saat menu Delete diklik,yaitu arah

Link-nya adalah; ?open=Siswa-Delete : case 'Siswa-Delete' :

if(!file_exists ("siswa_delete.php")) die ("File

tidak ada !");

include "siswa_delete.php"; break;

9. Setelah selesai_simpan programnya (Ctrl + S).

5.6.2 Membuat Folder Tempat Penyimpanan Foto

Sekarang buatlah folder foto, dimana folder ini nanti akan di

pakai untuk menyimpan foro siswa yang di-Upload lewat fasilitas

Tambah data (Simpan data).


2. Buat folder foto, seperti contoh berikut :

Gambar 5.50 Membuat folder siswa untuk menyimpan file

foto siswa

5.6.3 Membuat program tampil data siswa

sekarang Kita akan membuat program Tampil Data siswa,

fungsinya adalah menampilkan semua data siswa dari dalam

database. Pada halaman program ini terdapat 3 menu yang dipakai

untuk mengakses halaman program lain, yaitu program Tambah

data (diakses dari menu Add Data), Ubah data (diakses dari menu

Edit) dan Hapus data (diakses dari menu Delete). Berikut contoh

tampilannya:

Gambar 5.51 Tampilan halaman Tampil Data

Siswa,menampilkan semua data

Program Tampil Data Siswa dibuat di dalam file bernama

siswa_data.php. pada program ini Kita bisa menapilkan data Siswa

seperlunya saja, tidak harus semua kolom data ditampilkan,

misalnya saja hanya data Kode,Nis, Nam dan Kelamin. Berikut cara

membuatnya :


2. Buat dokumen baru ( tekang Ctrl + N), lalu nuka tipe

halaman PHP .

3. Simpan pada folder utama elearning/admin/, dengan nama

siswa_data.php.

4. Masuk pada halaman kode program (Code), hapus semua


5. Dari fasilitas panel Common, tambahkan desai kerangka

tabel (Tabel;) untuk menampilkan data, sebanyak 5 bari dan

1 kolom, lebar 700 pixel, pada header pilih None.

6. Pada baris pertam, tambahkan judul dengan font header 1,

yaitu; DATA SISWA.

7. Tambahkn gambar berlogo Add Data pada baris ke-2,

filenya ada di folder images. Caranya, klik menu Insert, klik

Image, lalu cari file btn_add_data.png.

8. Pilih atau klik pada gamabar ikon menu Add Data, lalu buat

target link menuju ke alamat berikut: ?open=Siswa-Add

9. Tambahkan tabel baru ( untuk tabel tampil data ) di dalam

tabel pertama, letaknya pada bari ke-3. Tabel baru

disesuaikan data Siswa yang akan ditampilkan, yaitu

misalnya dengan rancangan 2 abris (Rows) dan 8 kolom

(Columns) data, lebarnya adalah 100 percent.

10. Pada tabel tampil data, tambahkan judul sesuai data yang

akan di tampilkan, misalnya; No, kode, Nim Siswa, L/P,

Usernamer dan Tools. Kemudian pada baris kedua, 2kolom

bagian kanan di buat label menu Edit dan Delete.

Gambar 5.52 Desain tabel tampil data dan desain menunya

11. Dua (2) kotak di atas label menu Edit dan Delete digambung

(Merger cells) menjadi satu, kemudian menjadi satu judul

Tools.

12. Masukan pada halaman kode program (Code view), sisipkan

kode pengaturan CSS ppada tabel tampil data, seperti


cellpadding="3">

13. Pada baris pertama kode program, tambahkan skrip unutk

memanggil koneksi database,filenya bernama



?>

14. Di bahawa skrip koneksi database. Buatlah skrip progra

untuk pembagian halaman data (paging), letakkan skrip

setelah koneksi database. // Untuk pembagian halaman data (Paging)

$baris = 50;


$infoSql= "SELECT * FROM siswa";


".mysql_error());




Berikut ini gambar ilustrasi:

Gambar 5.53 Ilustrasi meletakkan skrip program

pembagian halaman data

15. Buatlah skrip program untuk menampilkan data Siswa dari

database. Penulisan skrip diletakkan dibawah tag </tr> milik

baris judul data, dan sebelum <tr> dari baris untuk

menampilkan data. <?php

// Skrip menampilkan data Siswa

$mySql = "SELECT * FROM siswa ORDER BY kd_siswa ASC




$nomor = $mulai;


$nomor++;

$Kode = $myData['kd_siswa'];

?>

16. Buatlah skrip penutup dari skrip penampil data

database,Yaitu; <?php } ?>

17. Pada baris kedua tabel tampil data akan digunakan unutk

menampilkan informasi data database. Sekarang,lengkapi

skrip berikut: <tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td>Delete</td>

<td>Edit</td>

</tr>

Dengan menambah skrip PHP untuk menampilkan data ke

layar seperti contoh berikut: <tr>


<td> <?php echo $myData['kd_siswa']; ?> </td>

<td> <?php echo $myData['nis']; ?> </td>

<td> <?php echo $myData['nm_siswa']; ?> </td>

<td> <?php echo $myData['kelamin']; ?> </td>

<td> <?php echo $myData['username']; ?> </td>

<td>Delete</td>

<td>Edit</td>

</tr>

Ilustrasnya bisa dilihat pada gambar berikut:

Gambar 5.54 Ilustrasi meletakkan skrip program menampikan

data

18. Masuk ke halaman tampil (Design view), pilih pada teks

menu Delete, lalu buat target link menunya ke alamat

berikut:

Ilustrasi gambarnya:

Gambar 5.55 Ilustrasi meletakan kode untuk target link link menu

Delete ?open=Siswa-Delete&Kode=<?php echo $Kode; ?>

19. Seperti cara sebelumnya pilih pad teks menu Edit, lalu buat

link menunya ke alamat berikut: ?open=Siswa-Edit&Kode=<?php echo $Kode; ?>

20. Dari tabel utama,abris tabel paling bawah dipecah menjadi 2

(split) kolom. Caranya, klik kanan pada area yang akan di

pecah, klik menu Table, klik Split Cell, plih opsi Colums,

tentukan angka 2 pada kotak isian, lalu klik Ok.

Gambar 5.56 Cara membagi kolom tabel menjadi 2 untuk

membuat nomer halaman

21. Pada baris tabel paling bawah yang sudah dipecah menjadi 2

kolom/kotak, tambahkan teks judul Jumlah data; dan

Halaman Ke; dengan posisi rata kanan.

Gambar 5.57 Hasil membuat teks judul pada tabel, untuk

menampilkan jumlah data yang berhasil ditampilkan dan nomor

halaman

22. Masuk kelaman kode program (Code view), di samping kanan

teks, Jumlah Data :,buatlah skrip untuk menampilkan

jumlah data yang berhasil ditampilkan. Jumlah Data: <?php echo $jumlah; ?>

23. Di samping kanan teks Halaman ke :, buatlah skrip untuk

menampilkan angka nomer halaman (paging). Skripnya; Halaman Ke:

<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Siswa-Data&hal=$h'>$h</a> ";

}

?>

Ilustrasi gambarnya :

Gambar 5.58 Penempatan skrip jumlah data dan nomer halaman


25.

5.6.4 Membuat Program Tambah Data Siswa

Sekarang Anda dapat membuat program Tambah Data Siswa,

program ini disimpan dalam file siswa_add.php. dengan program

ini, Anda dapat menyimpan data Siswa ke database dengan sangat

mudah, program ini juga akan dilengkapi fasilitas unutk Upload

foto. Berikut cara membuatnya:




3. Simpan pada folder utama elearning/admin/ dengan nama

siswa_add.php.


kode HTML.

5. Masuk pada halaman desain (Design), tambahkan area form

dari panel forms.


pemrpsessan programnya dari bagian Action, panel

Properties.

Action : <?php $_SERVER{„PHP_SELF‟}; ?>

Target : _self

Method : POST

Enctype : muktipart/form-data

Jangan lupa ya, pada bagian Enctye harus di pilih

multipart/form-data.

7. Simpan kembali dokumennya, yaitu tekan Ctrl + S.

8. Klk pada area form (garis merah), selanjutnya Kita akan

membuat kerangka dan objek masukan di dalam area form

tersebut.

9. Dari panel common klik form ikon Tabel untuk membuat

tabel kerangka desain form, detail 113 bari (Rows) dan 3

kolom (Culumns), lebarnya 650 pixels, lalu klik tombol Go.

Pastikan tabel berada di dalam area garis merah (form).

10. Gabungkan (merger) baris paling atas menjadi satu kotak.

Kemudia buat judul (misal; TAMBAH DATA SISWA), lalu

beri format huruf tebal (Bold).

11. Pada baris kedua kolom kiri, buat judul kotak form dengan

teks sisesuaikan data Siswa yang dibuat, sesuaikan dengan

susunan kolom tabel siswa.

12. Pada kotak.kolom tengah, buat juga teks titik dua (:) pada

kotak tengah, kemudian rapihkan tata letak teks dan kotak

tabel. Contoh:

Gambar 5.59 Desain tabel kerangka untuk form Tambah Data

Siswa

13. Pada baris Kode bagian kanan, tambahkan masukan berupa


Properties.

Char width : 10

Max chars :4

Init val : <?php echo $dataKode; ?>

14. Pada baris NIS, tambahkan form masukan berupa Text

Field dari panel Forms, lalu atur nilainya pada panel

Properties.

TextField : txtNis

Char width : 10

Max chars : 10

Init Val : <?php echo $dataNis; ?>

15. Pada baris Nama Siswa, tambahkan form masukan berupa


Properties.

TextField : txtNama

Char width : 60

Max chars : 100


16. Pada baris Kelamin tambahkan form masukan berupa

Combobox atau List/menu dari panel Forms, lalu atur

nialainya dari panel Properties.

List/Menu : cmbKelamin

Type : Menu

Selanjutnya, masuklah ke halaman kode program (Code),

carilah teks judul Kelamin. Kemudian,lengkap skrip dari

List/Menu yang barusaja dibuat dengan skrip membuat

pilihan Kelamin. Skripnya: <select name="cmbKelamin">


<?php

$pilihan = array("L"=> "Laki-laki(L)", "P" => "Perempuan(P)");

foreach ($pilihan as $indeks => $nilai) {

if ($dataKelamin==$indeks) {

$cek=" selected";

} else { $cek = ""; }

echo "<option value='$indeks' $cek>$nilai</option>";

}

?>

</select>

17. Kembali ke halaman desain (Design view), pada baris Agama,

tambahkan lagi form masukan berupa Combobox atau

List/menu dari panel Froms, lalu atur nilainya panel

Properties.

List/Menu : cmbAgama

Type : Menu

Selanjutnya, masuklah ke halaman kode program (Code),

carilah judul Agama. Lengkapi skrip dari List/Menu yang

berusaja di buat dengan skrip pilihan data Agama. Skripnya: <select name="cmbAgama">


<?php

$pilihan = array("Islam", "Kristen", "Katolik", "Hindu",

"Budha");

foreach ($pilihan as $nilai) {

if ($dataAgama==$nilai) {

$cek=" selected";

} else { $cek = ""; }

echo "<option value='$nilai' $cek> $nilai</option>";

}

?>

</select>

18. Pada baris Tempat & Tgl.Lahir, tambahkan form masukan

berupa Text Field dari panel Froms, lalu atur nilainya pada

panel Properties.

TextField : txtTempatLhr

Char width : 40

Max chars : 100

Init Val : <?php echo $dataTempatLhr; ?>

19. Masih pada baris Tempat & Tgl.Lahir,tambahkan lagi form

masukan berupa Combobox atau List/Menu dari panel

Forms, lalu atur nilai pada Panel Properties.

List/Menu : cmbTanggalLhr

Type : Menu

Objek form termasuk akan dipakai untuk membuat masukan

pilihan data Tanggal mulai dari angka 01 sampai 31.

Skripnya: <select name="cmbTanggalLhr">


<?php

for($tanggal = 1; $tanggal <= 31; $tanggal++) {

// Skrip membuat angka 2 digit (1-9)

if($tanggal < 10) { $tggl = "0".$tanggal;} else { $tggl =

$tanggal; }

// Skrip tanggal terpilih

if($tggl == $dataTanggalLhr) { $cek=" selected"; } else {

$cek = ""; }

echo "<option value='$tggl' $cek> $tggl </option>";

}

?>

</select>

20. Masih pada baris Tempat&Tgl.Lahir, tambahkan lagi form

masukan berupa List/Menu, lalu atur nilainya pada panel

Properties.

List/Menu : cmbBulanLhr

Type : Menu

Objek form tersebut akan di pakai untuk membuat masukan

pilihan data Bulan mulai dari angka 01 sampai 12, kemudian

informasinya di tambahkan nama bulan dengan

memanfaatkan data $listBulan yang di buat pada file

library/inc.pilihan.php. Skripnya: <select name="cmbBulanLhr">


<?php

for($bulan = 1; $bulan <= 12; $bulan++) {

// Skrip membuat angka 2 digit (1-9)

if($bulan < 10) { $bln = "0".$bulan; } else { $bln = $bulan;

}

if ($bln == $dataBulanLhr) { $cek=" selected"; } else {

$cek = ""; }

echo "<option value='$bln' $cek> $listBulan[$bln]

</option>";

}

?>

</select>

21. Masih pada baris Tempat & Tgl.Lahir, tambahkan lagi form

masukan berupa List/Menu ,lalu atur nilainya pada panel

Properties.

List/Menu : cmbTahunLhr

Type : Menu

Objek form tersebut akan dipaikai untuk membuag masukan

pilihan data Tahun mulai dari angka 25 tahu sebelum tahun

sekarang, sampai 10 tahun sebelum tahun sekarang.

Skripnya: <select name="cmbTahunLhr">


<?php

$thmuda = date('Y') - 25;

$thtua = date('Y') - 10;

for($tahun = $thmuda; $tahun <= $thtua; $tahun++) {

// Skrip tahun terpilih

if ($tahun == $dataTahunLhr) { $cek=" selected"; } else

{ $cek = ""; }

echo "<option value='$tahun' $cek> $tahun </option>";

}

?>

</select>

22. Pada baris Alamat, tambahkan form masukan berupa Text


Properties.

TextField : txtAlamat

Char width : 80

Max chars : 200

Init Val : <?php echo $dataAlamat; ?>

23. Pada bari No. Telepon, tambahkan form masukan berupa

Text Field dari panel Froms, lalu atur nilainya pada panel

Properties.

TextField : txtNoTelepon

Char width : 30

Max chars : 20

Init Val : <?php echo $dataNoTelepon; ?>

24. Pada baris Foto, tambahkan form masukan berupa File Field

untuk memasukan data foto, atur nilainya pada panel

Properties.

TextField : txt NamaFile

Char width : 40

Max chars : 200

25. Pada baris Username, tambahkan form masukan berupa


Properties. TextField : txtUsername

Char width : 20

Max chars : 20

Init Val : <?php echo $dataUsername; ?>

26. Pada baris Password, tambah Text Field dari panel Froms

untuk masukan data Passwod, lalu atur nilainya pada

Properties.


Char width : 20

Max chars : 20

Type : Password

27. Pada baris paling bawah, tambahkan objek tombol berikut

Button, lalu atur nilai Propertinya.


Value : Simpan



Berikut adalah hasilnya :

Gambar 5.60 Hasil akhir memdesain form masukan data Siswa

Setelah desain form selsai dibuat semua, sekarang

Anda dapat masuk ke halaman kode program (Code) untuk

menyelesaikan skrip program simpan data ke database,

dimuali dari skrip untuk membaca variable form, skrip

validasi form dan skrip untuk menyimpan data ke database

tabel siswa. Berikut langkahnya :

1. Dari Dreamweaver, buka lagi file siswa_add.php.

2. Masuklah pada halaman kode program (Code view).

3. Sisipkan kode efek CSS pada tag table, seperti contoh

berikut yang di cetak tebal. <table class="table-list" width="700" border="0" cellspacing="1"

cellpadding="3">

4. Pada baris pertama program, buatlah skrip untuk membaca

file koneksi database dan membaca skrip library. Skripnya : <?php



?>

5. Pada skrip pembentuk Formulir, pastikan pada bagian Action

sudah memiliki alamat <?php $_SEVER{‘PHP_SELF’}; ?>,

dan ada tag Enctype: seperti berikut: <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"

enctype="multipart/form-data" name="form1" target="_self"

id="form1">

6. Carilah skrip dari kotak masukan data Kode. Tambahkan

kode program readonly=”readonly” supaya kotak isiannya

tidak dapat diketik. Contoh: <td><input name="txtField" value="<?php echo $dataKode; ?>""

maxlength="4" readonly=”readonly”/>

Kotak masukan dimatikan karen data Kode data Siswa akan

dibuat dengan data Otomatis.

7. Di bawah skrip koneksi database, buat ksrip untuk mengisi

kotak form saat di jalankan. Kodenya: // Membuat variabel isi ke form

$dataKode = buatKode("siswa", "S");

$dataNis = isset($_POST['txtNis']) ? $_POST['txtNis']

: '';





$dataAgama = isset($_POST['cmbAgama']) ?

$_POST['cmbAgama'] : '';

$dataTempatLhr = isset($_POST['txtTempatLhr']) ?

$_POST['txtTempatLhr'] : '';

$dataTanggalLhr = isset($_POST['cmbTanggalLhr']) ?

$_POST['cmbTanggalLhr'] : '';

$dataBulanLhr = isset($_POST['cmbBulanLhr']) ?

$_POST['cmbBulanLhr'] : '';

$dataTahunLhr= isset($_POST['cmbTahunLhr']) ?

$_POST['cmbTahunLhr'] : '';

$dataAlamat = isset($_POST['txtAlamat']) ? $_POST['txtAlamat'] :

'';


$_POST['txtNoTelepon'] : '';



$dataPassword = isset($_POST['txtPassword']) ?

$_POST['txtPassword'] : '';

Ilustrasi penempatan skrip:

Gambar 5.61 Membuat skrip program temporary untuk

form

Kode $dataKode. $dataKode = buatKode("siswa", "S");

Skrip di atas dipakai untuk membuat Kode Siswa

Otomatis dari tabel siswa,dengan inisial kode adalah

S, maka data Kode otomatis yang dihasilkan adlah

S0001, S0002, S0003 dan seterusnya,panjangnya

Kode mengikuti panjang kolom utama (rimeri key) dari

tabel siswa, yaitu dengan tipe data Char (5) pada

kolom kd_siswa. Sedangkan perintah buatKode()

adalah nama funsi yang ada pada dile program

inc.library.php.

Kode $dataNama. $dataNama = isset($_POST['txtNama']) ?


Variable $dataNama akan diisi dengan data kosong

saat pertama form dijalankan, dan akan diisi dengan

data dari kotak Nama Siswa jika sudah di-Submit

(tombol Simpan diklik).

Fungsi utama dari skrip ini adalah untuk mengisi data

pada kotak form jika saat penyimpanan ada kesalahan

pada kotak isian lain akibat validasi, halaman program

akan dipanggil kembali dan isi data yang pernag diisi

pada kotak tidak akan hilang.

8. Di bawah skrip koneksi database. Buat skrip untuk membaca

tombol Simpan (btnSimpan) saat diklik, sehingga nanti skrip

lengkap untuk menyimpan data akan dibuat di sini. Skripnya : # SKRIP TOMBOL SIMPAN DIKLIK



// Validasi Form Input



9. Sekarang buat skrip untuk membaca data dari setiap kotak

form masukan, skripnya dibuat di dalam area skrip tombol

Simpan(btnSimpan). Skripnya : // Baca Data dari Form Input


$txtNis = $_POST['txtNis'];

$cmbKelamin = $_POST['cmbKelamin'];

$cmbAgama = $_POST['cmbAgama'];

$txtAlamat = $_POST['txtAlamat'];

$txtNoTelepon = $_POST['txtNoTelepon'];



$txtTempatLhr = $_POST['txtTempatLhr'];

$cmbTanggalLhr = $_POST['cmbTanggalLhr'];

$cmbBulanLhr = $_POST['cmbBulanLhr'];

$cmbTahunLhr = $_POST['cmbTahunLhr'];

Berikut adalah ilustarsinya:

Gambar 5.62 Penempatan skrip PHP,dan membuat skrip


10. Buat deklarasi variabel array, dengan nama $pesanError. // Validasi Form Input


11. Dibawah $pesanError = array(),buat skrip untuk validasi

masukan data Nis. Jika kosong, maka buat daftar error ke

dalam variable array $pesanError. Skripnya : if (trim($txtNis)=="") {

$pesanError[] = "Data <b>NIS</b> tidak boleh kosong !";

}

12. Buat skrip unutk validasi masukan data Nama Siswa. Jika

kosong maka buat daftar pesan eror ke dalam variable array

$pesanError. Skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Siswa</b> tidak boleh

kosong !";

}

13. Buat skrip untuk validasi masukan data Kelamin. Jika tidak

ada yang dipilih, maka daftar pesan error ke dalam variable

array $pesanError. Skripnya: if (trim($cmbKelamin)=="Kosong") {

$pesanError[] = "Data <b>Kelamin</b> belum ada yang

dipilih !";

}

14. Buat skrip untuk validasi masukan data Agama. Jika tidak

ada yang dipilih, maka buat daftar pesan error ke dalam

variable array $pesanError. Skripnya: if (trim($cmbAgama)=="Kosong") {

$pesanError[] = "Data <b>Agama</b> belum ada yang

dipilih !";

}

15. Buat skrip untuk validasi masukan data Tempat Lahir. Jika

kosong makan buat daftar pesan error ke dalam variable

array $pesanError. Skripnya: if (trim($txtTempatLhr)=="") {

$pesanError[] = "Data <b>Tempat Lahir</b> tidak boleh

kosong !";

}

16. Buat skrip untuk validasi masukan data Tanggal. Skripnya: if (trim($cmbTanggalLhr)=="Kosong") {

$pesanError[] = "Data <b>Tanggal. Lahir</b> belum ada

yang dipilih !";

}

17. Buat skrip untuk validasi masukan data Bulan. Skripnya : if (trim($cmbBulanLhr)=="Kosong") {

$pesanError[] = "Data <b>Bulan. Lahir</b> belum ada

yang dipilih !";

}

18. Buat skrip untuk validasi masukan data Tahun. Skripnya : if (trim($cmbTahunLhr)=="Kosong") {

$pesanError[] = "Data <b>Tahun. Lahir</b> belum ada

yang dipilih !";

}

19. Buat skrip untuk validasi masukan data Alamat. Skripnya : if (trim($txtAlamat)=="") {

$pesanError[] = "Data <b>Alamat</b> tidak boleh kosong

!";

}

20. Buat skrip untuk validasi masukan data No. Telepon.

Skripnya : if (trim($txtNoTelepon)=="") {

$pesanError[] = "Data <b>No. Telepon</b> tidak boleh

kosong!";

}

21. Buat skrip untuk validasi masukan data Username. Skripnya: if (trim($txtUsername)=="") {


kosong!";

}

22. Buat skrip untuk validasi masukan data Password. Skripnya : if (trim($txtPassword)=="") {


kosong!";

}


ditemukan dari validari form. Skripnya : // Menampilkan Pesan Error dari Form




$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

24. Pada bagian // Skrip Simpan data ke Database, buat skrip

untuk membuat Kode Siswa secara otomatis dari tabel

siswa, dengan inisal karakter S. Skripnya : $kodeBaru = buatKode("siswa", "S");

25. Selanjutnya, setelah skrip Kode Otomatis, buat skrip untuk

menyusun tanggal, bulan dan tahun lahir. Skripnya : // Menyusun Tanggal (Y-m-d)

$tanggalLahir = $cmbTahunLhr."-".$cmbBulanLhr."-

".$cmbTanggalLhr;

26. Selanjutnya, buat skrip Upload foto, untuk membaca file

foto/gambar yang di kirim lewat fasilitas form File Field,

membaca nama file, dan mengopi file ke folder foto yang

sudah di siapkan. Skripnya : # Skrip Upload file gambar

if (! empty($_FILES['txtNamaFile']['tmp_name'])) {

// Jika file foto tidak kosong (ada foto yang

dipilih)

$nama_file = $_FILES['txtNamaFile']['name'];

$nama_file = stripslashes($nama_file);

$nama_file = str_replace("'","",$nama_file);

// Proses kopi foto (menyimpan) ke folder

$nama_file = $kodeBaru.".".$nama_file;

copy($_FILES['txtNamaFile']['tmp_name'],"../foto/

".$nama_file);

}

else {

// Jika file foto tidak dipilih, maka simpan data

kosong

$nama_file = "";

}

27. Di bawah skrip Upload foto. Buat skrip program untuk

menyipan data ke database. Jadi, jika sudah tidak ada error

atau kesalahan data (form terisi semua), data akan

disimpan. Skripnya : // Skrip simpan data ke database

$mySql = "INSERT INTO siswa (kd_siswa, nm_siswa,

nis, kelamin, agama,

tempat_lahir, tanggal_lahir, alamat,

no_telepon,

foto, username, password )

VALUES ('$kodeBaru', '$txtNama', '$txtNis',

'$cmbKelamin', '$cmbAgama',

'$txtTempatLhr',

'$tanggalLahir', '$txtAlamat',

'$txtNoTelepon',

'$nama_file', '$txtUsername',




if($myQry){


url=?open=Siswa-Add'>";

}

exit;


Untuk menjalankan program Tambah Data Siswa,

Anda dapat menjalankan dulu program utamanya, dan

mengklik menu Data Diswa, setelah itu klik menu ikon Add

Data. Setelah itu, Anda juga dapat mengakses lewat alamat

browser langsung, yaitu;

http://localhost/elearning/admin/?open=Siswa-Add.

Berikut contoh tampilannya :

http://localhost/elearning/admin/?open=Siswa-Add

Gambar 5.63 Tampilan halaman porgram Tambah Data Siswa

5.6.5 Membuat Program Ubah Data Siswa

Selanjutnya Anda akan membuat program Ubah Data Siswa,

program ini disimpan dalam file bernama siswa_edit.php. Cara

kerja dari program ini adalah menampilkan kembali data Siswa

yang dipilih dari halaman program Tampil Data lewat menu Edit,

data Siswa yang dipilih akan ditampilkan kembali kedalam bentuk

form, dan selanjutnya datanya dapat disimpan kebali ke database.

Berikut ini ilustrasinya:

Gambar 5.64 Dari halaman program Tampil Data Siswa, pilih

dan klik menu Edit pada data Siswa yang akan diperbaiki (diubah)

datanya

Gambar 5.65 Halaman program Ubah Data Siswa,setelah salah

satu data Siswa dipilih meni Edit,mka datanya ditampilkan kembali

pada form

Dari halaman Program Tampil Data sudah dibuat, menu Edit

dapat dipaku untuk memilih data Siswa yang kemudian datanya

ditampilkan kembali pada form. Sekarang Anda dapat membuat

file siswa_edit.php dengan cara memodifikasi dari file

siswa_add.php. Caranya:

1. Buka file siswa_add.php yang sudah dibuat sebelumnya.

2. Simpan ulang (Save As) dengan nama baru, yaitu;

siswa_edit.php.

3. Masuk ke halaman desain (Design view), lalu ubah judul teks

yang ada menjadi ; UBAH DATA SISWA.

4. Pada baris Kode, tambahkan objek form HiddenField.

Fungsinya untuk merekan data kode Siswa (kd_siswa) dari

data yang sedang diedit (diperbaiki) supaya dapat dibaca

dalam program.

TextField : txtKode

Value : <?php echo $dataKode; ?>

5. Pada baris Gambar, tambahkan objek form HiddenField

untuk merekam data foto lama supaya dapat dibaca dalam

perintah SQL saat ingin mevalidasi dengan foto baru, atur

nilai propertinya.

TextField : txtFotoLama

Value : <?php echo $myData{„fot‟}; ?>


HiddenField untuk merekam data password lama (password)

dari database. Pengaturannya adalah :

TextField : txtPassLama

Value : <?php echo $myData{„password‟};?>

7. Simpan kembali programnya (tekan Ctrl + S).

8. Sekarang masuklah ke halaman kode program (Code view),

hapus skrip untuk validasi form data Password. Skrip yang

dihilangkan adalah: if (trim($txtPassword)=="") {


kosong!";

}

9. Selanjutnya buat skrip untuk menampilkan data Siswa yang


Perbaiki skrip berikut : // Membuat variabel isi ke form

$dataKode = buatKode("siswa", "S");


: '';





........................

Skrip di atas diperbaiki dan ditambahkan sehingga menjadi: # MEMBACA DATA DARI DATABASE UNTUK DIEDIT


$mySql = "SELECT * FROM siswa WHERE kd_siswa='$Kode'";





$dataKode = $myData['kd_siswa'];


: $myData['nis'];


$_POST['txtNama'] : $myData['nm_siswa'];


$_POST['cmbKelamin'] : $myData['kelamin'];

$dataAgama = isset($_POST['cmbAgama']) ?

$_POST['cmbAgama'] : $myData['agama'];

$dataTempatLhr = isset($_POST['txtTempatLhr']) ?

$_POST['txtTempatLhr'] : $myData['tempat_lahir'];

$tanggalLhr = substr($myData['tanggal_lahir'], 9, 2);

$dataTanggalLhr = isset($_POST['cmbTanggalLhr']) ?

$_POST['cmbTanggalLhr'] : $tanggalLhr;

$bulanLhr = substr($myData['tanggal_lahir'], 5, 2);

$dataBulanLhr = isset($_POST['cmbBulanLhr']) ?

$_POST['cmbBulanLhr'] : $bulanLhr;

$tahunLhr = substr($myData['tanggal_lahir'], 0, 4);

$dataTahunLhr = isset($_POST['cmbTahunLhr']) ?

$_POST['cmbTahunLhr'] : $tahunLhr;

$dataAlamat = isset($_POST['txtAlamat']) ? $_POST['txtAlamat'] :

$myData['alamat'];


$_POST['txtNoTelepon'] : $myData['no_telepon'];



?>

Penjelasan :

Dengan skrip di atas, maka saat pertama kali program ubah

data dijalankan, maka kotak isian form akan menampilkan

data ayng berasal dari database, sesuai Kode Siswa yang

dipilih dari menu Edit. Penjelasan Kodenya:

Variable $dataKode. $dataKode = $myData['kd_siswa'];

Variabel $dataKode siisi dengan data Kode Siswa

dari database, data yang sedang diedit (diperbaiki).

Variable $dataNama. $dataNama = isset($_POST['txtNama']) ?

$_POST['txtNama'] : $myData['nm_siswa'];

Variable $dataNama diisi dengan data nama Siswa

(kolom nm_siswa), datanya berasal dari data yang

sedang diedit. Jika dorm sudah pernah dipost

(tombol Simpan diklik), maka $dataNama akan diisi

nilai form itu sendiri (txtNama).

Variable $dataNis. $dataNis = isset($_POST['txtNis']) ?

$_POST['txtNis'] : $myData['nis'];

Varibale $dataNIs diisi dengan data NIS Siswa

(kolom nis), datanya berasal dari data yang sedang

diedit. Jika form sudah pernah di-post (tombol

Simpan diklik), maka $dataNis akan diisi nilai dari

form itu sendiri (txtNis).

10. Sekarang menuju skrip sebelum //Skrip Simpan data ke

Database, tambahkan skrip untuk membaca data Kode dari

form hidden

Contoh: $kodeSiswa = $_POST['txtKode'];

Menggantikan skrip lama, yaitu: $kodeBaru = buatKode("siswa", "S");

11. Buat skrip untuk memperbaiki isi Password jika ada

perubahan.

Skripnya: // Memperbarui Password Jika ada Perubahan




}

else {



}

12. Dibawah skrip baca data Kode (txtKode) diatas,lengkapi

skrip yang berfungsi untuk meng-Upload file foto Siswa

dengan skrip di bawah: # Skrip Upload file gambar

if (empty($_FILES['txtNamaFile']['tmp_name'])) {

// jika tidak ada file foto baru, maka baca foto

lama

$nama_file = $_POST['txtFotoLama'];

}

else {

// Jika file foto lama ada, akan dihapus

$txtFotoLama = $_POST['txtFotoLama'];

if(file_exists("../foto/$txtFotoLama")) {

unlink("../foto/$txtFotoLama");

}

// Membaca file foto baru




// Mengkopi file foto baru ke folder

$nama_file = $kodeSiswa.".".$nama_file;

copy($_FILES['txtNamaFile']['tmp_name'],"../foto/".$nama_fi

le);

}

13. Selanjutnya perbaiki query (perbaikiSQL) untuk menyimpan

data dari yang semula memaki perintah INSERT diubah

menjadi UPDATE. Caranya adalah :

Temukan dan hapus skrip berikut ini : // Skrip simpan data ke database

$mySql = "INSERT INTO siswa (kd_siswa, nm_siswa,

nis, kelamin, agama,

tempat_lahir, tanggal_lahir, alamat,

no_telepon,

foto, username, password )

VALUES ('$kodeBaru', '$txtNama', '$txtNis',

'$cmbKelamin', '$cmbAgama',

'$txtTempatLhr',

'$tanggalLahir', '$txtAlamat',

'$txtNoTelepon',

'$nama_file', '$txtUsername',


Kemudian di ganti dengan skrip berikut: // Skrip simpan data ke database

$mySql = "UPDATE siswa SET

nm_siswa='$txtNama', nis='$txtNis', kelamin='$cmbKelamin',

agama='$cmbAgama',

tempat_lahir=

'$txtTempatLhr', tanggal_lahir= '$tanggalLahir',

alamat='$txtAlamat',

no_telepon='$txtNoTelepon', foto = '$nama_file',

username='$txtUsername' $passwordSQL

WHERE

kd_siswa='$kodeSiswa'";



if($myQry){


url=?open=Siswa-Data'>";

}


5.6.6 Membuat Program Hapus Data Siswa

Selanjutnya Anda dapat melengkapi program Manajemen Data

Siswa dengan fasilitas Hapus Data, yaitu dengan membuat skrip

siswa_delete.php, skrip ini nanti akan dijalankan saat Anda

mengklik menu Delete yang ada di halaman program Tampil Data

Siswa. Caranya:



program (Code).

3. Hapus semua skrip yang ada di dalamnya, ketikkan skrip









// Membaca data Gambar/ Foto

$mySql = "SELECT foto FROM siswa WHERE

kd_siswa='$Kode'";

$myQry = mysql_query($mySql, $koneksidb) or die

("Query 1 salah : ".mysql_error());


// Jika file foto lama ada, akan dihapus

$fileFoto = $myData['foto'];

if(file_exists("../foto/".$fileFoto)) {

unlink("../foto/".$fileFoto);

}


$my2Sql = "DELETE FROM siswa WHERE kd_siswa='$Kode'";

$my2Qry = mysql_query($my2Sql, $koneksidb) or die ("Error


if($my2Qry){

// Refresh halaman


url=?open=Siswa-Data'>";

}

}

else {



}

?>

4. Simpan program di atas dengan nama file siswa_delete.php.

Supaya data siswa yang akan dihapus tidak langsung

terhapus dari database, maka pada menu Delete harus

dilengkapi dengan skrip notifikasi, sehingga akan selalu

muncul jendela pertanyaan sebelum skrip hapus dijalankan.

Caranya:

1. Buka lagi file program siswa_data.php.



3. Sisipkan skrip perintah onClick, seperti berikut : <a href="?open=Siswa-Delete&Kode=<?php echo $Kode; ?>"


DATA SISWA INI ... ?')">Delete</a>


4.7 Program Manajemen Materi Belajar

Materi belajar adalah data materi pembelajaran yang di kirim

oleh Guru kepada Siswa-nya, materi belajar dikirim berdasarkan

Kelas. Materi belajar dapat di-Upload ole Administrator

berdasarkan nama Guru yang membuatnya, atau masing-masing

Guru dapat mengirimkan file materi-nya sendiri dari halaman login.

Materi belajar yang dapat di simpan dalam aplikasi E-learning ini

adalah dokumen (.pdf atau.doc), atau juga dokumen yang dipaket

dalam arsip (.ara atau .zip).

Sekaranng Kiata akanmembuat program manajemen data

Materi Belajar, fasilitas yang akan dibuat adalah program untuk

Menampilkan data,Menambah Data, Mengubah data dan program

Menghapus data.

Berikut ini adalah file programnya :

Materi_data.php : File program ini akan berfungsi sebagai

program untuk manajemen data Materi Belajar, menampilkan

semua data Materi Belajar yang ada dalam database MySQL,

yaitu dari tabel materi_belajar. Melalu halamn program ini

akan dibuat menu Add data, Edit dan Delete.

materi_add.php : File rogram yang berisi form untuk

menambahkan data baru ke dalam tabel materi_belajar,

program ini dapat diakses lewat menu Add Data yang ada

dalam halaman program Tampil data.

Materi_edit..php : File program yang berisi form untuk

mengubah atau memperbaiki data yang tersimpan dalam

database,yaitu pada tabel materi_belajar, halaman ini diakses

lewat menu Edit yang dibuat pada Tampil Data.

Materi_delete.php : berisi skrip program untuk menghapus

data yang dipilih dari halaman tampil materi_data.php,yaitu

dari menu Delete.

5.7.1 membuat Menu dan Kontrol Program Materi Belajar

Sekarang Kita akan membuat menu Data Materi Belajar di

dalam file menu.php, yang kemudian di lanjutkan membuat skrip

untuk mengontrol menu Add Data, Edit dan Delete, sehingga

semua menu dapat menjalankan file program saat diklik. Skripnya

di buat di dalam file program buka_file.php. lengkapnya :



3. Tambahkan menu Data Materi, dan arahkan link-nya menuju

?open=Materi-Data.

4. sekarang buka file buka_file.php lewat Dreamweaver.

5. Masuk ke halaman kode program (Code),buat skrip program

untuk menjalankan link menu yang mengarah ke

/open=Materi-Data, file program yang di jalankan adalah

materi_data.php. case 'Materi-Data' :

if(!file_exists ("materi_data.php")) die ("File

tidak ada !");

include "materi_data.php"; break;

6. Buat skrip program untuk menjalankan file materi_add.php

pada saat menu Add Data diklik, yaitu arah Link-nya

adalah; ?open=Materi-Add : case 'Materi-Add' :

if(!file_exists ("materi_add.php")) die ("File

tidak ada !");

include "materi_add.php"; break;

7. Buat skrip program untuk menjalankan file materi_edit.php


?open=Materi-Edit : case 'Materi-Edit' :

if(!file_exists ("materi_edit.php")) die ("File

tidak ada !");

include "materi_edit.php"; break;


materi_delete.php pada saat menu Delete dikilik, yaitu

arah Link-nya adalah; ?open=Materi-Delete : case 'Materi-Delete' :

if(!file_exists ("materi_delete.php")) die ("File

tidak ada !");

include "materi_delete.php"; break;

9. Setelah selsai, simpan programnya (Ctrl + S).

5.7.2 Membuat Folder Tempat Penyimpanan Dokumen

Sekarang buatlah folder materi, dimana folder ini nanti akan

dipakai untuk menyimpan file materi belajar yang di-Upload lewat

fasilitas Tambah Data materi (Simpan Data).

1. Buka Windows Exproler.

2. Buat folder materi di dalam folder uatama elearning,

seperti contoh berikut :

Gambar 5.66 Membuat folder materi untuk menyimpan file

Materi Belajar

5.7.3 Membuat Program Tampil Data Materi Belajar

File program pertama yang akan di buat materi_data.php file

ini sebagai Program Tampil Data, yaitu halaman program utama

untuk memanajemen data Materi Belajar. Dari halaman utama ini,

akan di buat ikon menu Add Data untuk mengakses halaman

Tambah Data Materi.

Program Tampil Data akan menampilkan seluru data Materi dari

tabel database ke halaman, nama tabel datanya adalah

materi_belajar, dari setiap data yang tampil akan dilengkapi

dengan menu Edit data Delete. Contoh tampilannya :

Gambar 5.67 Tampilan halaman Tampil Data Materi,menampilkan

semua data

Dari tampil program di atas, Anda membuat programnya dengan

mengikuti langkah berikut :


2. Buka dokumen baru (tekan Ctrl + N). Lalu buka tipe halaman

PHP.

3. Simpan pada folder elearning/admin, dengan nama

materi_data.php.



5. Dari panel Common, tambahkan desain tabel (Tabel: ) untuk

tampilan utama, sebanyak 4 baris dan 1 kolom, lebarnya 700

pixels, pada header pilih None.

6. Pada baris pertama, tambahkan judul dengan font header 1,

yaitu; DATA MATERI.

7. Tambahkan gambar berloho Add Data pada baris ke-2,

filenya ada di folder images. Caranya,klik menu Insert, klik

Image, lalu cari file btn_add_data.png dan buat rata

kanan.

8. Pilih atau klik pada gambar ikon Add Data, lalu buat target

link menunya ke alamat berikut:

?open=Materi-Add

9. Tambahkan tabel baru ( untuk tabel tampil dat ) di dalam

baris ke-3 dari tabel utama. Tabel baru disesuaikan data

Materi Belajar yang akan ditampilkan, yaitu dengan 2 baris

dan 6 kolom data, lebarnya adalah 100 percent.


akan ditampilkan, sedangkan 2 kolom kanan baris kedua

dibuat label menu Edit dan Delete.


11. 2 kotak di atas label menu Edit dan Delete digabung

(Merger) menjadi satu,kemudian dibuat teks Tools.




cellpadding="3">

13. Pada baris pertama program,buatlah skirp untuk membaca

file koneksi database. Skripnya: <?php


?>


untuk pembagian halaman data (Paging), letakkan skrip


$baris = 50;


$infoSql= "SELECT * FROM materi_belajar";


".mysql_error());




Seperti contoh gambar di bawah :

Gambar 5.69 Desain tabel tampilan data dan desain menunya

15. Buatlah skrip program untuk menampilkan data Materi

Belajar dari database. Penulisan skrip diletakkan di bawah

</tr> dari baris judul tampilan data, dan sebelum <tr> dari

baris untuk tampil data. Jadi di antaranya. Skripnya adalah: <?php

// Skrip menampilkan data Materi

$mySql = "SELECT mb.*, pelajaran.nm_pelajaran FROM

materi_belajar AS mb

LEFT JOIN pelajaran ON mb.kd_pelajaran =

pelajaran.kd_pelajaran

ORDER BY mb.kd_materi ASC LIMIT $mulai,

$baris";



$nomor = $mulai;


$nomor++;

$Kode = $myData['kd_materi'];

?>

Lihat ilustrasinya seperti gambar di bawah, kode di atas ada

pada poin nomor (2). Kemudian tambah skrip penutup di

bawah </tr> baris untuk menampilkan data, skripnya adalah:

Gambar 5.70 Ilustrasi meletakan skrip program query ke

database

16. Pada baris kedua dari tabel tampil data akan dgunakan untuk

menampilkan informasi data dari database. Sekarang,

lengkapi skrip berikut : <tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td>Delete</td>

<td>Edit</td>

</tr>

Dengan menambahkan skrip penampil data ke halaman,

seperti contoh berikut yang Kami tandai dengan cetar tebal

(bold): <tr>


<td> <?php echo $myData['kd_materi']; ?> </td>

<td> <?php echo $myData['nm_materi']; ?> </td>


<td>Delete</td>

<td>Edit</td>

</tr>

17. Masuk ke halaman tampilan ( Design view), pilih pada teks

menu Edit, lalu buat target link menunya ke alamat berikut: ?open=Materi-Edit&Kode=<?php echo $Kode; ?>

18. Seperti cara sebelumnya, pilih pada teks menu Delete, lalu

buat link menunya ke alamat berikut: ?open=Materi-Delete&Kode=<?php echo $Kode; ?>


kolom/kotak,tambahkan teks judul Jumlah Data: dan

Halaman ke : dengan posisi rata kanan.

Gambar 5.71 Hasil membuat teks judul pada tabel,untuk

menampilkan judul data yang berhasil ditampilkan dan nomor

halaman

20. Masuk ke halaman kode program (Code view), di samping

kanan teks Jumlah Data :, buatlah skrip untuk menampilkan


21. Di samping kanan teks Halaman ke :, buatlah skrip untuk

menampilkan angka nomor halaman (paging). Skripnya: Halaman Ke :

<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Materi-Data&hal=$h'>$h</a> ";

}

?>


5.7.4 Membuat Program Tambah Data Materi Belajar

Sekarang Anda dapat membuat program Tambah Data

Materi,program ini akan dijalankan lewat manu ikon Add Data

yang sudah dibuat pada halaman Tampil Data Materi. Pada program

ini form-nya memiliki satu media Upload file untuk menyimpan file

data materi belajar, file data yang di kirim dapa berupa file

dokumen (.doc dan .pdf), atau data yang dipaket dalam (.rar dan

.zip). berikut cara membuatnya :


2. Buat dokumen baru (tekan Ctrl +N). Dari tab General,klik

Dynamic page, lalu klik tipe halaman PHP.

3. Simpan pada folder elearning/admin dengan nama

materi_add.php.


kode HTML.

5. Masuk pada halaman kode desain (Design), tambahkan area

form dari panel Forms.

6. Pada area form yang sudah di tambahkan, atur alamat

pemrosessan programnya dari bagian Action, panel

Properties.

Action : <?php $_SERVER[„PHP_SELF‟]; ?>

Target : _self

Method : POST

Enctype : multipart/form-data

Jangan lupa ya, pada bagian Entype harus dipilih


7. Simpan kembali dokumennya, yaitu dengan menekan Ctrl

+S. 8. Klik di dalam area form, sehingga kursor aktif dalam form.

9. Dari panel Common, tambahkan objek tabel (table: untuk

kerangka desain form, sebanyak 8 baris (rows) dan 3 kolom

(Coloumns)n lebarnya (table with) 700 pixels, lalu klik

tombol Go.

10. Buat judul form pada baris pertama, yaitu misal; TAMBAH

DATA MATERI, beri efek tebal (font bold).

11. Pada bari ke dua dan ketiga, buat judul kotak form dengan

teks sesuai dengan input (masukan data) yang akan dibuat,

disesauikan dengan tabel materi_belajar. Contoh hasilnya :

12. Pada baris Kode bagian kanan, tambahkan form masukan

berupa Text Field dari panel Froms, lalu atur nilainya pada

panel properties.

Char width : 10

Max chars : 4


13. Pada baris Nama Materi, tambahkan dorm masukan berupa

Proprerties. Field dari panel Froms, lalu atur nilainya pada

panel Properties.

TextField : txtNama

Char widht : 70

Max chars : 100

Init val : <?php echo $dataNama; ?>

14. Pada baris keterangan¸tambahkan gorm masukan berupa

Text Field dari panel Forms¸lalu atru nilainya pada panels

Properties.

TextField : txtKeterangan

Char width : 70

Max chars : 200

Init Val : <?php echo $dataKeterangan; ?>

15. Pada baris File Materi, tambahkan form masukan berupa

File Field untuk memasukan data foto, atur nilainya pada

panel properties.

TextField : txtNamaFile

Char width : 40

Max chars : 200

16. Masih pada baris Pelajaran tambahkan lagi form masukan

berupa Combobox atau List/Menu dari panel Froms, lalu

atur nilainya pada panel Properties.

List/Menu : cmbPelajaran

Type : Menu


pilihan data Pelajaran yang datanya dari tabel database.

Skripnya :

<select name="cmbPelajaran">


<?php

// Skrip menampilkan data Pelajaran ke dalam List/Menu

$bacaSql = "SELECT * FROM pelajaran ORDER BY kd_pelajaran";




if ($bacaData['kd_pelajaran'] == $dataPelajaran) {

$cek = " selected";

} else { $cek=""; }

echo "<option value='$bacaData[kd_pelajaran]' $cek>

$bacaData[nm_pelajaran] </option>";

}

?>

</select>

17. Masih pada bari Guru, tambahkan lagi form masukan berupa

combobox atau List/Menu dari panel forms, lalu atur


List/Menu : cmbGuru

Type : Menu

Objek form tersebut akan dipaki untuk membuat masukan

pilih data Guru yang datanya ditampilan dari tabel

database.Skripnya:

select name="cmbGuru" id="cmbGuru">


<?php







$cek = " selected";

} else { $cek=""; }



}

?>

</select>

18. Kembali ke halaman desai (Design view). Pada baris paling

bwah, tambahkan objek tombol berupa Button, lalu atur nilai

Properties.


Value : Simpan


19. Simpan programnya ( tekan Ctrl + S).

Setelah desain form selsai dibuat, maka pekerjaan Anda

sekarang adalah membuat skrip program lewat halaman kode

program (Code). Dari halaman kode, Kita akan membuat skrip

mulai dari membaca data dari form input, validasi data yang ada

pada form dan skrip menyimpan data ke dalam database dengan

perintah SQL-nya adalah INSERT. Selain itu, Kode Otomatis

juga akan diterapkan pada data Materu, Berikut langkahnya :

1. Dari dreamweaver,buka lagi file materi_add.php.

2. Sisipkan kode efek CSS pad tag table penyusun tabel,

seperti contoh berikut yang di cetak tebal. <table class="table-list" width="700" border="0" cellspacing="1"

cellpadding="3">





?>

4. Dibawah skrip koneksi database, buat skrip untuk mengisi

kotak form saat dijalankan.Kodenya: // Membuat variabel isi ke form

$dataKode = buatKode("materi_belajar", "M");


$dataKeterangan = isset($_POST['txtKeterangan']) ?

$_POST['txtKeterangan'] : '';

$dataPelajaran = isset($_POST['cmbPelajaran']) ?

$_POST['cmbPelajaran'] : '';


$_POST['cmbGuru'] : '';

Ilustrasi penempatan skrip:

Gambar 5.72 Membuat skrip program untuk mgisi kotak

form

Kode $dataKode. $dataKode = buatKode("materi_belajar", "M");

Skrip di atas dipakai untuk membuat Kode Materi

secara Otomatis dari tabel materi_belajar, dengan

kode inisial M, maka kode yang dihasilkan adalah

M0001, M0002, M0003 danseterusnya sapai

maksimal M0099, karena maksimal 4 digit karakter

yang mampu disimpan kolom kd_materi.

Perintah buatKode() adalah nama fungsi yang ada

pada file program inc.library.php.

Kode $dataNama. $dataNama = isset($_POST['txtNama']) ?


Varibale $dataNama akan diisi dengan data kosong

saat pertama form dijalankan,dan akan diisi dengan

data dari kotak Nama materi jika sudah di-Submit

(tombol Simpan diklik).

Fungsi dari skrip ini adalah untuk mengisi data pada

kotak form jika saat penyimpanan ada kesalahan

akibat validasi,form akan dipanggil kembali dan isi

data pada kotak tidak akan hilang.

5. Di bawah skrip database. Buat skrip untuk membaca tombol

Simpan (btnSimpan) saat diklik, shingga nanti skrip lengkap

untuk myimpan data akan di buat disini. Skripnya : # SKRIP TOMBOL SIMPAN DIKLIK






6. Sekarang buat skrip untuk membaca data dari form,

skripnya dibuat dalam area skrip tombol Simpan

(btnSimpan) yang sudah dibuat sebelumnya. Skripnya : // Baca Data dari Form Input


$txtKeterangan = $_POST['txtKeterangan'];

$cmbPelajaran = $_POST['cmbPelajaran'];


7. Kemudian ,buat deklarasi variable array,dengan nama



8. Buat skrip untuk validasi form masukan Nama Materi. Jika

datanya kosong, maka buat daftar pesan error ke dalam

variable array $pesanError. Skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Materi</b> tidak boleh

kosong !";

}

9. Buat krip untuk validasi form masukan Keterangan. Jika

datanya kosong, maka buat daftar pesan error ke dalam

varibale arrar $pesanError. Skripnya: if (trim($txtKeterangan)=="") {

$pesanError[] = "Data <b>Keterangan</b> tidak boleh

kosong !";

}

10. Buat skrip untuk validasi form masukan Pelajaran. Jika

datanya kosong, maka uat dafta pesan error ke dalam

variable array $pesanError. Skripnya: if (trim($cmbPelajaran)=="Kosong") {

$pesanError[] = "Data <b>Pelajaran</b> belum dipilih !";

}

11. Buat skrip untuk validari form masukkan Guru. Jika datanya

kosong maka buat daftar pesan error ke dalam variable

array $pesanError. Skripnya: if (trim($cmbGuru)=="Kosong") {

$pesanError[] = "Data <b>Guru</b> belum dipilih !";

}


ditemukan dari validasi. Skripnya: // Menampilkan Pesan Error dari Form




$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

13. Pada bagian // Skrip Simpan data ke Database. Buat

skrip untuk membuat Kode Materi secara otomatis dari

tabel materi_belajar,dengan inisial Kode M. Skripnya: $kodeBaru = buatKode("materi_belajar", "M");

14. Selanjutnya, buat skrip Upload File, untuk membaca file

materi belajar yang dikirim lewat fasilitas form File Field,

membaca nama file, dan mengkopi file ke folder materi yang

sudah disiapkan. Skripnya: # Skrip Upload file materi


// Jika file materi tidak kosong (ada materi yang

dipilih)




// Proses kopi materi (menyimpan) ke folder


copy($_FILES['txtNamaFile']['tmp_name'],"../materi/

".$nama_file);

}

else {

// Jika file materi tidak dipilih, maka simpan

data kosong

$nama_file = "";

}

15. Di bawah skrip Upload File. Buat skrip program untuk

menyimpan data ke database. Jadi,jika sudah tidak ada

error atau kesalahan data (form terisi semua), data akan

disimpan. Skripnya: // Skrip simpan data ke database

$mySql = "INSERT INTO materi_belajar (kd_materi,

nm_materi, keterangan, file_materi, kd_pelajaran, kd_guru)

VALUES ('$kodeBaru',

'$txtNama', '$txtKeterangan', '$nama_file', '$cmbPelajaran',

'$cmbGuru')";



if($myQry){


url=?open=Materi-Add'>";

}

exit;

16. Simpan kembali program, Ctrl + S.

Untuk menjalankan halaman program Tambah Data Materi di

atas, Anda dapat menklik menu Data Materi yang ada di menu

utama program ( http://localhost/elearning/admin/), lalu klik ikon

Add Data.

Selain dari menu utama progam, Anda juga dapat langsung

mengakses alamat file program lewat alamat brower

http://localhost/elearning/admin/?open=Materi-Add. Berikut

contoh tampilannya:

http://localhost/elearning/admin/

http://localhost/elearning/admin/?open=Materi-Add

Gambar 5.73 Tampilan halaman program Tambah Data Materi

5.7.5 Membuat Program Ubah Data Materi Belajar

Selanjutnya Kita akan membuat Program Ubah Data Materi,

program ini disimpan dengan nama file materi_edit.php, halaman

ini diakses lewat menu Edit yang dibuat pada setiap baris data

Materi yang tampil pada halaman Tampil Data Materi. Perhatikan

ilustrasi gambar berikut:

Gambar 5.74 Ilustrasi langkah mengubah data, klik menu Edit

Untuk memudahkan pekerja, Anda dapat membuat file

materi_edit.php dengan cara memodifikasi dari file

materi_add.php. caranya:

1. Buka file materi_add.php uyang sudah dibuat sebelumnya.

2. Simpan ulang (Save As) dengan namab baru,

yaitu;materi_edit.php

3. Masuk ke halaman desain (Design view), lalu perbarui

informasi judul pada bari header dengan teks; UBAH DATA

MATERI.

4. Pada bari Kode, tambahkan objek form Hiddenfield untuk

merekam data Kode Materi supaya dapat dibaca dalam

perintah SQL saat ingin menyimpan, ataur nilai propertinya.

TextField : txtKode

Value : <?phpecho $dataKode; ?>

5. Pada baris masukan File Materi, tambahkan objek form

HiddenField untuk merekam data file lama supaya dapat

dibaca dalam perintah SQL saat ingin mem-validasi dengan

file materi baru, atur nilai propertinya.

TextField : txtFileLama

Value : <?php echo $myData[„file_materi‟];?>


7. Sekarang modifikasi skrip program yang fungsi menampung

data dari form ke variale temporary, sekarang data kosong-

nya diganti data dari database. Skripnya:

# MEMBACA DATA DARI DATABASE UNTUK DIEDIT


$mySql = "SELECT * FROM materi_belajar WHERE

kd_materi='$Kode'";





$dataKode = $myData['kd_materi'];


$myData['nm_materi'];


$_POST['txtKeterangan'] : $myData['keterangan'];


$_POST['cmbPelajaran'] : $myData['kd_pelajaran'];



Dengan memakai skrip di atas, maka saat pertama kali

program dijalankan,maka kotak isian form akan menampilkan

data yang berasal dari database sesuai Kode yang dipilih

dari menu Edit penjelasan kodenya:

Variable $dataKode $dataKode = $myData['kd_materi'];

Varibale $dataKode diisi dengan data kode Materi

dari database, data yang sedang diedit.

Varibale $dataNama $dataNama = isset($_POST['txtNama']) ?

$_POST['txtNama'] : $myData['nm_materi'];

Variable $dataNama diisi dengan data Nama Materi

(dari kolom nm_materi),datanya berasal dari data

yang sedang diperbaiki. Jika form sudah pernah di-

Post (tombol Simpan diklik), maka $dataNama akan

diisi nilai dari form itu sendiri. Penjelasan lain sama

konsepnya pada bariable $dataKeterangan,

$dataPelajaran dan $dataGuru kesemuanya

berfungsi sebai isian pada kotak form,variale

tersebut diisi data Materi dari database yang saat ini

sedang dipilih untuk di perbaiki.

8. Sekarang menuju skrip sebelum //Skrip Simpan data ke

Database. Tambahkan skrip untuk membaca data Kode dari

form hidden. Skripnya: $kodeMateri = $_POST['txtKode'];

Skrip baca Kode di atas menggantikan skrip lama, yaitu: $kodeBaru = buatKode("materi_belajar", "M");

9. Di bawah skrip data kode (txtKode) diatas, lengkapi

skripnya berfungsi untuk meng-Upload file Materi dengan

skrip di bawah : # Skrip Upload file Materi


// jika tidak ada file Materi baru, maka baca

Materi lama

$nama_file = $_POST['txtFileLama'];

}

else {

// Jika file Materi lama ada, akan dihapus

$txtFileLama = $_POST['txtFileLama'];

if(file_exists("../materi/".$txtFileLama)) {

unlink("../materi/".$txtFileLama);

}

// Membaca file Materi baru




// Mengkopi file Materi baru ke folder

$nama_file = $kodeMateri.".".$nama_file;

copy($_FILES['txtNamaFile']['tmp_name'],"../materi/".$nama

_file);

}

10. Selanjutnya modifikasi query(perintah SQL) untuk

menyimpan data ke database, yaitu perintah penyimpanan

INSET diubah menjadi UPDATE

Hilangkan skrip berikut ini:

$mySql = "INSERT INTO materi_belajar (kd_materi, nm_materi,

keterangan, file_materi, kd_pelajaran, kd_guru)



'$cmbGuru')";

Kemudian di ganti dengan skrip berikut : $mySql = "UPDATE materi_belajar SET nm_materi='$txtNama',

keterangan='$txtKeterangan', file_materi='$nama_file',

kd_pelajaran='$cmbPelajaran',

kd_guru='$cmbGuru'

WHERE

kd_materi='$kodeMateri'";

11. Simpan kembali program, tekan Ctrl + S.

5.7.6 Membuat Program Hapus Data Materi Belajar

Selanjutnya Kita akan membuat skrip program yang fungsinya

untuk menghapus data dari database, data yang dihapus adalah

data yang dipilih lewat menu Delete dari halaman program Tampil

Data Materi. Nama file yang dibuat adalah materi_deleter.php.

Caranya:


2. Buat dokumen baru PHP, lalu masuklah ke halaman Kode

program (Code).

3. Hapus semua skrip yang ada di dalamnya , lalu ketikkan skrip









// Membaca data File Materi

$mySql = "SELECT file_materi FROM materi_belajar WHERE

kd_materi='$Kode'";





$fileMateri = $myData['file_materi'];

if(file_exists("../materi/".$fileMateri)) {

unlink("../materi/".$fileMateri);

}


$my2Sql = "DELETE FROM materi_belajar WHERE

kd_materi='$Kode'";



if($my2Qry){

// Refresh halaman


url=?open=Materi-Data'>";

}

}

else {



}

?>

4. Simpan program di atas dengan nama file

materi_delete.php.

Sekarang Anda dapat menambahkan krip notifikasi pada

menu Delete, sehingga sebelum skrip hapus dijalankan akan

ada kotak konfirmasi terlebih dahulu. Caranya:

1. Buka lagi file program materi_delete.php.


baris skrip dari menu Delete.

3. Sisipkan skrip perintah onClick, seperti berikut: <a href="?open=Materi-Delete&Kode=<?php echo $Kode; ?>

">Delete</a>

4. Simpan lagri programnya, tekan Ctrl + S.

4.8 Program Manajemen Tugas Belajar

Tugas Belajar adalah materi tugas yang diberikan oleh Guru

kepada Siswa, tugas tersebut dapa di-Upload oleh Administrator

aplikasi E-learning atau juga dapat di-Upload oleh Guru masing-

masing kelas yang bersangkutan. Dari halaman login Guru, seperti

guru diberikan fasilitas untuk mengirimkan tugas pada setiap kelas

yang diajarnya. File tugas yang dikirim dapat berupa dokumen

(.pdf adat .doc) atau file arsip (.rar atau .zip).

Sekarang Kita akan membuat program manajemen data Tugas

Belajar, fasilitas yang akan dibuat adalah program Menampilkan

data, menambahan Data, mengubah data dan program Mengahapus

Data. Berikut ini penjelasannya :

Tugas_data.php : File program ini berfungsi sebgai program

utama manajemen data Tugas Belajar, kemampuasnnnya

menampilkan semua data Tugas Belajar yang ada di dalam

database MySQL. Dari halaman ini akan dilengapi dengan menu

Add Data, Edit dan Delete.

Tugas_add.php : File program ini berisi form untuk

menambah data baru ke dalam database, tabel tugas_belajar.

Program ini dijalankan lewat menu Add Data yang ada di dalam

halaman program Tampil Data.

Tugas_edit.php : File program ini berisi form untuk

mengubah atau memperbaiki data yang tersimpan dalam

database. Program ini diakses lewat menu Edit yang dibuat

pada setiap baris data yang tampil pada program Tampil Data.

Tugas_delete.php : Berisi skrip program untuk menghapus

data yang dipilih di halaman tampil tugas_data.php, yaitu lewat

menu Delete.

5.8.1 Membuat Menu dan Kontrol Program Tugas Belajar

Sekarang Kita akan membuat menu Data Tugas Belajar dalam

menu utama, yaitu pada file menu.php, kemudian dijalankan

membuat skrip untuk mengontrol menu Add Data, Edit dan

Delete. Skripnya dibuat di dalam file program buka_file.php.

Lengkahnya:



3. Tambahkan menu Data Tugas, dan arahkan link-nya menuju

?open=Tugas-Data.


5. Masuk ke halaman kode program (Code), lalu buat skrip

untuk menjalankan link menu yang UTL-nya pada

?open=Tugas-Data, file program yang dijalankan adalah

tugas_data.php. case 'Tugas-Data' :

if(!file_exists ("tugas_data.php")) die ("File

tidak ada !");

include "tugas_data.php"; break;

6. Buat skrip progra, untuk menjalankan file tugas_add.php

pada saat menu Add Data diklik, yaitu alamat Link-nya

adalah;?open=Tugas-Add : case 'Tugas-Add' :

if(!file_exists ("tugas_add.php")) die ("File tidak

ada !");

include "tugas_add.php"; break;

7. Buat skrip program untuk menjalankan file tugas_edit.php

pada saat menu Edit diklik, yaitu alamat Link=nya

adalah;?open=Tugas-Edit : case 'Tugas-Edit' :

if(!file_exists ("tugas_edit.php")) die ("File

tidak ada !");

include "tugas_edit.php"; break;


tugas_delete.php pada saat menu Delete diklik, yaitu

alamat Link-nya adalah;?open=Tugas-Delete : case 'Tugas-Delete' :

if(!file_exists ("tugas_delete.php")) die ("File

tidak ada !");

include "tugas_delete.php"; break;

9. Seletelah selesai, simpan programnya (Ctrl + S).

5.8.2 Membuat Folder Tempat Penyimpanan Dokumen

Sekarang buatlah folder tugas, dimana folder ini nanti akan

dipakai untuk menyimpan file tugas belajar yang diUpload lewat

fasilitas Tambah Data Tugas (Simpan Data).


2. Buat folder tugas di dalam folder utama elearning, seperti

contoh berikut:

Gambar 5.75 Membuat folder tugas untuk menyimpan file Tugas

Belajar

5.8.3 Membuat Program Tampil Data Tugas Belajar

Program Tampil Data akan menampilkan seluruh data Tugas dari

tabel database ke halaman, nama tabel datanya adalah

tugas_belajar, dari setiap data yanag tampil akan dilengkapi

dengan menu Edit dan Delete. Selain itu, halaman ini juga

dilengkapi dengan menu Add Data untuk mengakses halaman

program Tambah Data. Contoh tampilannya :

Gambar 5.76 Tampilan halaman Tambah Data

Tugas,menampilkan semua data

Dengan tampilan program di atas, Anda dapat membuat

program dengan mengikuti langkah berikut:


2. Buat dokumen baru (tekan Ctrl + N), lalu buka tipe halaman

PHP.

3. Simpan pada folder utama elearning/admin, dengan nama

tugas_data.php.



5. Dari panel Common, tambahkan desai tabel (Table: ) untuk

tampilkan utama, sebanyak 4 baris dan 1 kolom, lebarnya

700 pixels, pada header pilih None.

6. Pada baris pertama tabel, tambahkan judul dengan font

header 1, yaitu; DATA TUGAS.


filenya ada di folder images. Caranya,klik menu Insert, klik

Image, lalu cari file btn_add_data.png dan buat rata kanan.

8. Pilih atau klik pada gambar ikon Add Data, lalu buat target

link menunya ke alamat berikut : ?open=Tugas-Add

9. Buat tabel baru (untuk tabel tampil data) di dalam baris

ke-3 dari tabel utama. Tabel baru disesuikan data Tugas

Belajar yang akan di tampilkan, misalnya dengan 7 kolom dan

2 baris data, lebarnya adalah 100 percent.


akan ditampilkan, yaitu; No, Kode, Nama Tugas,

Pelajaran, Kelas dan Tools. Keumudian 2 kolom kanan kedua

dibuat menu Edit dan Delete.

11. 2 kotak dii atas label menu Edit dan Delete digabung

(Merger) menjadi satu,kemudian dibuat teks Tools.



contoh berikut yang dicetak tabel. <table class="table-list" width="100%" border="0" cellspacing="1"

cellpadding="3">


file koneksi database. Skripnya: <?php


?>


untuk pembagia halaman data (paging), letakkan skrip


$baris = 50;


$infoSql= "SELECT * FROM tugas_belajar";


".mysql_error());




15. Buatlah skrip program untuk menampilkan data Tugas

Belajar dari database. Skrip dibuat telah tag </tr> dari

baris untuk judl tampilan data, dan sebelum <tr> dari baris

tabel untuk tampilan data. Jadi di antarnya. Skripnya

adalah:

<?php

// Skrip menampilkan data Tugas

$mySql = "SELECT tb.*, pelajaran.nm_pelajaran, kelas.nm_kelas

FROM tugas_belajar AS tb

LEFT JOIN pelajaran ON tb.kd_pelajaran =


LEFT JOIN kelas ON tb.kd_kelas =

kelas.kd_kelas ORDER BY tb.kd_tugas ASC LIMIT $mulai, $baris";



$nomor = $mulai;


$nomor++;

Kemudian tambahkan skrip penutup di bawah </tr> baris

untuk menampilkan data, skripnya adalah : <?php } ?>


untuk menapilkan informasi data dari database.

Sekarang,lengkapi skrip berikut: <tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td>Delete</td>

<td>Edit</td>

</tr>

Dengan menambah skrip penampil data ke halaman, seperti

contoh berikut yang Kami tandai dengan cetak tebal (bold): <tr>


<td> <?php echo $myData['kd_tugas']; ?> </td>

<td> <?php echo $myData['nm_tugas']; ?> </td>


<td> <?php echo $myData['nm_kelas']; ?> </td>

<td>Delete</td>

<td>Edit</td>

</tr>

17. Masuk ke halaman tampilan (Design view), pilih pada teks

menu Edit, lalu buat target link menunya ke alamat berikut: ?open=Tugas-Edit&Kode=<?php echo $Kode; ?>

18. Seperti cara sebelumnya, pilih pada teks menu Delete, lalu

buat link menunya ke alamat berikut: ?open=Tugas-Edit&Kode=<?php echo $Kode; ?>


kolom/kotak, tambahkan teks judul Jumlah Data: dan

Halaman ke:

20. Masuk ke halaman kode program (Code view), di samping

kanan teks Jumlah Data :, buatlah skrip untuk menampilkan


21. Di samping knan teks Halaman ke :, buatlah skrip untuk


<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Tugas-Data&hal=$h'>$h</a> ";

}

?> 22. Simpan kembali programnya (Ctrl + S).

5.8.4 Membuat Program Tambah Data Tugas Belajar

Berikut Kita akan membuat program Tambah data Tugas,

program ini disimpan dalam file tugas_add.php, program ini akan

dijalankan lewat menu ikon Add Data yang sudah di buat pada

halaman Tampil Data Tugas. Pada progra, ini form-nya memiliki

satu media Upload file untukmenyimpan file data tugas belajar,

file data yang dikirim dapat berupa file dokumen (.doc atau .dft),

atau data yang dipaket dalam (.rar maupun .zip). Berikut cara

membuanya :

1. Buka Dreamwearver.

2. Buat dokumen beru(tekan Ctrl +N). Dari tab General, klik


3. Simpan pada folder uatama elearning/admin dengan nama

tugas_add.php. 4. Masuk pada halam kode program (Code), hapus semua kode

HTML.

5. Masuk pada halaman desain (Design), tambahkan area form

dari panel Forms.

6. Pada area form yang sudah di tambahkan, atur alamat

pemrosessan programnya dari bagian Action, panel

Properties.


Target : _self

Method : POST


Jangan lupa ya, pada bagian Enctype harus dipilih


7. Simpan kembali dokumennya, yaitu dengan menekan Ctrl +

S.

8. Klik di dalam area form, sehingga kursor aktif dalam form.

9. Dari panel Common, tambahkan obje tabel (Tabel : ) untuk

kerangka desain form, sebanyak 9 baris (rows) dan 3 kolom

(Coloums), lebarnya (table with) 700 pixels, lalu klik tombol

Go.

10. Buat judul form pada baris pertama, yaitu misal; TAMBAH

DATA TUGAS, beri efek tebal (font bold).

11. Pada baris kedua dan ketiga, buat judul kotak form dengan


disesuaikan dengan tabel tugas_belajar. Contoh hasilnya :


berupa Text Field dari panel Forms, lalu atur nilai pada

panel Properties.

Char width : 10

Max chars : 4


13. Pada baris Nama Tugas, tambahkan form masukan berupa


Properties.

TextField : txtNama

Char width : 70

Max chars : 100


14. Pada baris Keterangan, tambahkan form masukan berupa


Properties.


Char width : 70

Max chars : 200


15. Pada baris File Tugas, tambahkan form masukan berupa File

Field untuk memasukan data foto, atur nilainya pada panel

Properties.

TextField : textNamaFile

Char width : 40

Ma chars : 200

16. Masih pada baris Pelajaran, tambahkan lagi form masukan

List/Menu dari panel Forms, lalu atur nilainya pada panel

Properties.


Type : Menu


pilihan data Pelajaran yang datanya di tampilkan dari tabel

database. Skripnya : <select name="cmbPelajaran">


<?php







$cek = " selected";

} else { $cek=""; }



}

?>

</select>

17. Masih pada baris Kelas, tambahkan lagi form masukan

List/menu dari panel Forms, lalu atur nilainya pada panel

Properties.

List/Menu : cmbkelas

Type : Menu


pilihan data Kelas yang datanya di tampilkan dari tabel

database. Skripnya : <select name="cmbKelas">


<?php

// Skrip menampilkan data Kelas ke dalam List/Menu

$bacaSql = "SELECT * FROM kelas ORDER BY kd_kelas";




if ($bacaData['kd_kelas'] == $dataKelas) {

$cek = " selected";

} else { $cek=""; }

echo "<option value='$bacaData[kd_kelas]' $cek> $bacaData[nm_kelas]

</option>";

}

?>

</select>

18. Masih pada baris Guru, tambahkan lagi form masukan

berupa Combobox atau List/Menu dari panel Forms, lalu


List/Menu : cmbGuru

Type : Menu


pilihan data Guru yang datanya ditampilkan dari tabel

database. Skripnya : select name="cmbGuru" id="cmbGuru">


<?php







$cek = " selected";

} else { $cek=""; }



}

?>

</select>

19. Kembali ke halaman desai (Design view), pada baris paling

bawah, tambahkan objek tombol berupa Button, lalu atur

nilai Propertinya.


Value : Simpan


20. Simpan pada folder utam proyek dengan nama

tugas_add.php.

Berikut ini adalah hasil tampilannya :

Gambar 5.77 Desain form masukan data Tugas Belajar

Setelah desain form selesai dibuat,maka pekerjaan Anda

sekarang adalah membuat srip program yang berisi perintah SQL

INSERT, gunanya untuk menyimpan data yang sudah dimasukan

lewat form ke database. Untuk membuatnya, Anda dapat

melanjutkan lewat halaman kode program (Code). Berikut

langkahnya :

1. Dari Dreamweaver, buka lagi file tugas_add.php.

2. Sisipkan kode efek CSS pada tag tabel penyusun tabel,

seperti contoh berikut yang di cetak tebal. <table class="table-list" width="700" border="0" cellspacing="1"

cellpadding="3">

3. Pada bari pertama program, buatlah skrip untuk membaca

file koneksi database dan membaca skrip library. Skripnya: <?php



?>

4. Di bawah skrip koneksi database, buat skrip untuk mengisi

kotak form saat dijalankan. Kodenya: // Membuat variabel isi ke form

$dataKode = buatKode("tugas_belajar", "T");






$dataKelas = isset($_POST['cmbKelas']) ?

$_POST['cmbKelas'] : '';


$_POST['cmbGuru'] : '';

Ilustrasi penempatan skrip :

Gambar 5.78 Membuat skrip program untuk mengisi kotak

form

Kode $dataKode. $dataKode = buatKode("tugas_belajar", "T");

Skrip diatas dipaki untuk membuat Kode Tugas secara

Otomatis dari tabel Tugas_belajar, dengan kode inisial T,

maka kode yang dihasilkan adalah T0001,T0002, T0003 dan

seterusnya sapai maksimal T0099, karena maksial 4 digit

karakter yang mampu disimpan kolom kd_tugas.

Perintah buatKode() adalah nama gungsi (kumpulan skrip

program) yang dibuat pada file program inc.library.php.

Kode $dataNama $dataNama = isset($_POST['txtNama']) ? $_POST['txtNama'] : '';

Varibale $dataNama akan diisi dengan data kosong saat

pertama form dijalankan, dan akan diisi dengan data dari

kotak Nama Tugas jika sudag di-Submit (tombol Simpan

diklik). Fungsi dari skrip ini adalah untuk mengisi data pada

kotak form jika daat penyimpanan ada kesalahan akibat

validasi, form akan dipanggil kembali dan isi data pada kotak

tidak akan hilang.

5. Di bahawah skrip koneksi database,buat skrip untuk membaca

tombol Simpan (btnSimpan) saat di klik, sehingga nanti skrip

lengkapnya untuk menyimpan data akn di buat di sini. Skripnya: # SKRIP TOMBOL SIMPAN DIKLIK





6. Sekarang buat skrip untuk membaca data dari form, skripnya

dibuat di dalam area skrip tombol Simpan (btnsimpan) yang

sudah dibuat sebelumnya. Skripnya: // Baca Data dari Form Input




$cmbKelas = $_POST['cmbKelas'];


7. Kemudian, buat deklarasi variabel array, dengan nama



Berikut adalah ilustrasinya:

Gambar 5.79 Blok skrip dasar PHP,dan membuat skrip


8. Buat skrip untuk validasi form Nama Tugas. Jika datanya

kosong, maka buat daftar pesan error ke dalam variabel array

$pesanError. Skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Tugas</b> tidak boleh

kosong !";

}

9. Buat skrip untuk validasi form Keterangan. Jika datanya

kosong, maka buat daftar pesan error ke dalam variabel array

$pesanError. Skripnya: if (trim($txtKeterangan)=="") {


kosong !";

}

10. Buat skrip untuk validasi form Pelajaran. Jika datanya kosong,

maka buat daftar pesan error ke dalam variabel array

$pesanError. Skripnya: if (trim($cmbPelajaran)=="Kosong") {

$pesanError[] = "Data <b>Pelajaran</b> belum dipilih !

}

11. Buat skrip untuk validasi form Kelas. Jika datanya kosong,


$pesanError. Skripnya: if (trim($cmbKelas)=="Kelas") {

$pesanError[] = "Data <b>Kelas</b> belum dipilih !";

} 12. Buat skrip untuk validasi form Guru. Jika datanya kosong,


$pesanError. Skripnya: if (trim($cmbGuru)=="Kosong") {

$pesanError[] = "Data <b>Guru</b> belum dipilih !";

}

13. Buat skip program untuk menampilkan pesan error jika





$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

else {


}

14. Pada bagian // Skrip Simpan data ke Database, buat skrip

untuk membuat Kode Materi secara otomatis dari tabel

tugas_belajar, dengan inisial karakter kode yang dibuat

adalah;T, hasilnya T0001, T0002, dst. Skripnya: $kodeBaru = buatKode("tugas_belajar", "T");

15. Selanjutnya, buat skrip Upload File, untuk membaca file tugas

belajar yang dikirim lewat fasilitas form File Field, membaca

nama file, dan mengkopi file ke folder tugas yang sudah

disiapkan. Skripnya: # Skrip Upload file tugas


// Jika file tugas tidak kosong (ada tugas yang dipilih)




// Proses kopi tugas (menyimpan) ke folder


copy($_FILES['txtNamaFile']['tmp_name'],"../tugas/

".$nama_file);

}

else {

// Jika file tugas tidak dipilih, maka simpan data kosong

$nama_file = "";

}

16. Dibawah skrip Upload File. Buat skrip program untuk

menyimpan data ke database. Jadi, jika sudah tidak ada error

atau kesalahan data (form terisi semua), data akan disimpan.

Skripnya: // Skrip simpan data ke database

$mySql = "INSERT INTO tugas_belajar (kd_tugas, nm_tugas,

keterangan, file_tugas, kd_pelajaran, kd_kelas, kd_guru)

VALUES ('$kodeBaru', '$txtNama',

'$txtKeterangan', '$nama_file', '$cmbPelajaran', '$cmbKelas',

'$cmbGuru')";


("Gagal query".mysql_error());

if($myQry){


url=?open=Tugas-Add'>";

}

exit;


Untuk menjalankan halaman program Tambah Data Tugas di

atas, anda dapat mengklik menu Data Tugas yang ada di menu

utama program ( http://localhost/elearning/admin/ ), lalu klik

ikon Add Data.

Selain dari menu utama program, anda juga dapat langsung

mengakses alamat file programnya lewat alamat browser;

http://localhost/elearning/admin/?open=Tugas-Add

http://localhost/elearning/admin/

http://localhost/elearning/admin/?open=Tugas-Add

Berikut contoh tampilannya:

Gambar 5.80 Tampilan halaman program Tambah Data Tugas

5.8.5 Membuat Ubah Data Tugas

Sekarang kita akan membuat program Ubah Data Tugas,

program ini disimpan dengan nama file tugas_edit.php, program

ini diakses lewat menu Edit yang dibuat pada setiao baris data

Tugas yang tampil pada halaman Tampil Data Tugas. Perhatikan


Gambar 5.81 Ilustrasi langkah mengubah data,klik menu Edit

Untuk memudahkan pekerjaan, anda dapat membuat file

tugas_edit.php dengan cara memodifikasi dari file

tugas_add.php. Caranya:

1. Buka file tugas_add.php yang sudah dibuat sebelumnya.

2. Simpan ulang (Save As) dengan nama baru, yaitu;

tugas_edit.php

3. Masuk ke halaman desain (Design View), lalu perbarui


DATA TUGAS.

4. Pada baris Kode, tambahkan objek form HiddenField

untuk merekam data Kode Tugas (kd_tugas) dari data

yang sedang diperbaiki (diedit). Pengaturannya:

TextField : txtKode


5. Pada baris File Tugas, tambahkan objek form

HiddenField untuk merekam data file tugas lama, yaitu

dari kolom data file_tugas. Sehingga dapat dibaca dalam

perintah SQL saat ingin mem-validasi dengan file baru,

atur nilai propertinya.


Value : <?php echo $myData[„file_tugas‟]; ?>



menampung data dari form ke variabel temporary,

sekarang data kosong-nya diganti data dari database.

Skripnya: # MEMBACA DATA DARI DATABASE UNTUK DIEDIT $Kode = $_GET['Kode'];

$mySql = "SELECT * FROM tugas_belajar WHERE

kd_tugas='$Kode'";





$dataKode = $myData['kd_tugas'];


$_POST['txtNama'] : $myData['nm_tugas'];






$_POST['cmbKelas'] : $myData['kd_kelas'];




program dijalankan, maka kotak isian form akan

menampilkan data yang berasal dari database, sesuai Kode

yang dipilih dari menu Edit. Penjelasan kodenya:

Variabel $dataKode $myData['kd_tugas'];

Variabel $dataKode diisi dengan data kode Tugas


Variabel $dataNama $dataNama = isset($_POST['txtNama']) ?


Variabel $dataNama diisi dengan data Nama Tugas

(dari kolom nm_tugas), datanya berasal dari data


Post (tombol Simpan diklik), maka $dataNama akan

diisi nilai dari form itu sendiri. Penjelasan lain sama

konsepnya pada variabel $dataKeterangan,

$dataPelajaran, $dataKelas, dan $dataGuru

kesemuanya berfungsi sebagai isian pada kotak

form, variabel tersebut diisi data Tugas dari

database yang saat ini sedang dipilih untuk

diperbaiki.


Database, tambahkan skrip untuk membaca data Kode

dari form hidden. Skripnya: $kodeTugas = $_POST['txtKode'];

Skrip baca kode di atas menggantikan skrip lama, yaitu:

$kodeBaru = buatKode(“tugas_belajar”,”T”);

9. Di bawah skrip baca data Kode (txtKode) diatas, lengkapi

skrip yang berfungsi untuk meng-Upload file Tugas dengan

skrip di bawah: # Skrip Upload file Tugas


// jika tidak ada file Tugas baru, maka baca

Tugas lama


}

else {

// Jika file Tugas lama ada, akan dihapus


if(file_exists("../tugas/".$txtFileLama)) {

unlink("../tugas/".$txtFileLama);

}

// Membaca file Tugas baru




// Mengkopi file Tugas baru ke folder

$nama_file = $kodeTugas.".".$nama_file;

copy($_FILES['txtNamaFile']['tmp_name'],"../tugas/".$nama_

file);

}



INSERT diubah menjadi UPDATE.

Hilangkan skrip berikut ini: $mySql = "INSERT INTO tugas_belajar (kd_tugas, nm_tugas,


VALUES ('$kodeBaru', '$txtNama',

'$txtKeterangan', '$nama_file', '$cmbPelajaran', '$cmbKelas',

'$cmbGuru')";

Kemudian diganti dengan skrip berikut:

$mySql = "UPDATE tugas_belajar SET nm_tugas='$txtNama',

keterangan='$txtKeterangan', file_tugas='$nama_file',


kd_kelas='$cmbKelas', kd_guru='$cmbGuru'

WHERE kd_tugas='$kodeTugas'";


5.8.6 Membuat Progran Hapus Data Tugas Belajar




Data Tugas. Nama file yang dibuat adalah tugas_delete.php.

Caranya:



program (Code).

3. Hapus semua skrip yang ada di dalamnya, lalu ketikkan

skrip program berikut: <?php








// Membaca data File Tugas

$mySql = "SELECT file_tugas FROM tugas_belajar WHERE

kd_tugas='$Kode'";





$fileTugas = $myData['file_tugas'];

if(file_exists("../tugas/".$fileTugas)) {

unlink("../tugas/".$fileTugas);

}


$my2Sql = "DELETE FROM tugas_belajar WHERE

kd_tugas='$Kode'";



if($my2Qry){

// Refresh halaman


url=?open=Tugas-Data'>";

}

}

else {



}

?>

4. Simpan program di atas dengan nama file

tugas_delete.php.

Sekarang anda dapat menambahkan skrip notifikasi pada menu

Delete, sehingga sebelum skrip hapus dijalankan aka nada kotak

konfirmasi dahulu. Caranya:

1. Buka lagi file program tugas_data.php.

2. Masuklah pada halaman kode program (Code View), carilah

baris skrip dari menu Delete.

3. Sisipkan skrip perintah onClick, seperti berikut :

<a href="?open=Tugas-Delete&Kode=<?php echo $Kode; ?>"

target="_self" onclick=”return confirm (‘YAKIN INGIN

MENGHAPUS DATA TUGAS INI...?’)”>Delete</a>

4. Simpan lagi programnya, tekan Ctrl + S

4.9 Program Login User

Program Login dipakai untuk login masuk pada program aplikasi

E-Learning, sehingga tidak setiap orang dapat menggunakan

program ini tanpa memiliki hak ases login. Fasilitas Login ini

memerlukan tabel database, yaitu tabel user. Dengan tabel

tersebut kita dapat menyimpan informasi akun login (user dan

password).

5.9.1 Membuat Akun Login di Database

Akun login disimpan di dalam Database, yaitu pada tabel user.

Tabel tersebut sudah dibuat, pembahasannya sudah diajarkan

pada Bab 2. Sekarang anda dapat belajar membuat akun login baru

yang dilengkapi dengan password ter-enkripsi. Caranya:

Jalankan browser anda, lalu buka aplikasi phpMyAdmin denga

alamat http://localhost/phpMyAdmin/.

1. Buka database elearning_db.

2. Dari jendela kiri, klik nama tabel user.

3. Jika tabel user sudah aktif, klik menu Insert.

4. Dari halaman form masukan, anda dapat memasukkan 2

data User sekaligus, atau satu-persatu juga bisa. Contoh

datanya adalah:

5. Pada bagian data Password, anda harus memilih fungsi

MD5 sebagai jenis enkripsi yang dipakai. Contoh:

http://localhost/phpMyAdmin/

Gambar 5.82 Contoh memasukkan data User untuk data

pertama

6. Jika sudah, klik tombol Go.

Dengan cara yang sama, anda dapat menyimpan data User

berikutnya dengan Kode User berbeda (misal; setelah U01

menjadi U02, U03, U04 dan seterusnya), yang terpenting

data Kode dari setiap data harus dibedakan karena

Primary Key, dan harus ada enkripsi MD5 pada data

password.

Gambar 5.83 Data User yang berhasil ditambahkan, dan

data Password hasil enkrips MD5

Lihatlah pada bagian password yang terlihat bukan kata kunci

yang tadi anda masukkan, melainkan karakter acak

(35ea58e4e4054c19064c4668a48f1bed) hasil enkripsi MD5, cara

ini untuk mengamankan sistem. Jadi, sekarang kita sudah punya 2

akun user login, yaitu:

Login 1

Username : adminkyf

Password : yanuar1901

5.9.2 Membuat Menu dan Kontrol Menu

Sekarang anda dapat menyiapkan menu utama untuk mengakses

halaman program Login dan Logout, berikut ini langkahnya:

1. Buka file menu.php dari aplikasi Dreamweaver.

2. Masuklah ke halaman kode program (Code View),

tambahkan skrip berikut pada baris pertama skrip

penyusun menu, berikut skripnya: if( isset($_SESSION['SES_LOGIN'])){

# JIKA SUDAH LOGIN, menu di bawah yang dijalankan

?>

3. Tambahkan skrip berikut pada baris terakhir (paling

bawah) skrip penyusun menu, berikut skripnya: <?php

}

else {

# JIKA BELUM LOGIN (Tidak ada Session yang ditemukan)

?>

<ul>

<li>Login </li>

</ul>

<?php

}

?>

Ilustrasinya adalah:

Gambar 5.84 Menambah skrip untuk validasi session login

4. Masuklah ke halaman desain (Design View). Pilih pada teks

menu Login, kemudian arahkan Link-nya menuju

?open=Login. Seperti contoh:

Gambar 5.85 membuat menu Login dari file menu.php

5. Pilih pada teks menu Logout, kemudian arahkan Link-nya

menuju ?open=Logout.


Setelah menu Login dan Logout, serta form program login

dibuat, anda dapat menambahkan kontrol menu pada file

buka_file.php, supaya program bisa menjalankan login.php saat

menu Login di klik. Caranya:

1. Sekarang buka file buka_file.php, lalu masuklah ke

halaman kode.

2. Buat skrip program untuk menjalankan link menu yang

mengarah ke ?open=Login, file program yang dijalankan

adalah login.php. case 'Login' :

if(!file_exists ("login.php")) die ("File tidak ada !");

include "login.php"; break;

3. Buat skrip program untuk menjalankan file logout.php

pada saar menu Logout diklik, yaitu arah Linknya adalah;

?open=Logout: case 'Logout' :

if(!file_exists ("logout.php")) die ("File tidak ada !");

include "logout.php"; break;

4. Buat skrip program untuk menjalankan action form login

yang mengarah ke alamat ?open=Login-Validasi, skripnya; case 'Login-Validasi' :

if(!file_exists ("login_validasi.php")) die ("File tidak ada !");

include "login_validasi.php"; break; 5. Simpan kembali programnya (Ctrl+S).

5.9.3 Membuat Login Program

Setelah data akun User dibuat, sekarang anda dapat membuat

form program Login terdiri dari form login yang disimpan dalam

file login.php dan program untuk validasi akun login ke dalam

database yang disimpan dalam file login_validasi.php. form login

ini dapat diakses dari menu Login halam utama, yaitu saat

mengakses halaman Administrator

(http://localhost/elearning/admin) pertama kali. Caranya:

1. Buka Dreamweaver

2. Buka dokumen baru (tekan Ctrl + N), lalu buka tipe halam

php.

3. Simpan dokumen baru ini dengan nama login.php,

tempatkan pada folder proyek utama; elearning/admin.

4. Masuklah ke halaman desain tampilan (Design View).

5. Aktifkan panel Forms, lalu tambahkan komponen area

Form ke dokumen. Caranya, klik ikon Form, kemudian atur

alamat Action dari panel Properties.

Action : ?open=Login-Validasi

Target : _self

Method : POST

6. Dari panel Common, lalu klik ikon Table untuk membuat

tabel desain kerangka form. Buat dengan 4 baris (Rows)

dan 3 kolom (Columns), lebarnya 500 pixels.

Gambar 5.86 Membuat tabel baru untuk form login

http://localhost/elearning/admin

7. Dari tabel yang terbentuk, gabungkan dua kotak pada

baris pertama, kemudia dibuat judul form,

misalnya;LOGIN.

8. Selanjutnya, buatlah judul kotak masukan data login di

bagian kiri yaitu; Username dan Password. Contoh

hasilnya:

Gambar 5.87 Mendesain tampilan tabel dengan judul



Properties.

TextField : txtUser

Char width : 30

Max chars : 20

10. Pada baris Password, tambahkan form masukan berupa

Text Fied dari panel Forms, lalu atur nilainya pada panel

Properties.


Char width : 30

Max chars : 20

Type : Password

Catatan:

Pada bagian kotak masukan (input) data Password

harus anda pilih opsi Type: Password, dengan cara itu

nanti pada saar program dijalankan, maka data yang

dimasukan ke dalam kotak akan tersembunyi, yang

terlihat hanya titik-titik saja.

11. Kembali ke halam desain (Design View). Pada baris paling

awah, tambahkan objek tombol berupa Button, lalu atur

nilai propertinya.

Button Name : btnLogin

Value : Simpan



Setelah form login (login.php) selesai dibuat, sekarang anda

dapat membuat program untuk memvalidasi user dan password

yang dimasukkan dari form dengan data yang ada di dalam tabel

user dari database. Skripnya akan disimpan pada file

login_validasi.php. cara membuatnya adalah:

1. Membuat dokumen baru lewat Dreamweaver, tipe PHP.

2. Masukkan ke halam kode program (Code), hapuslah semua

kode HTML yang sudah ada di sana.

3. Pada baris pertama kode program, buat skrip memanggil

koneksi database, file yang dipanggil adalah

inc.connection.php. Skripnya: <?php


?> 4. Setelah koneksi database, kemudia buat skrip untuk

membaca tombol Login (btnLogin) saat diklik. Skripnya: if(isset($_POST['btnLogin'])){

// Lokasi skrip lanjutan...

}

else {

// Refresh


url=?open=Login'>";

}

5. Di dalam area baca tombolLogin (btnLogin), lanjutkan

dengan membuat skrip untuk membaca data dari form.

Skripnya: // Baca Data dari Form Input



Ilustrasinya:

Gambar 5.88 Membuat skrip validasi Username dan

Password

6. Kemudian, buat deklarasi variable array, dengan nama

$pesanError. $pesanError = array();

7. Buat skrip untuk validasi form masukan Username. Jika


array $pesanError. Skripnya: if (trim($txtUsername)=="") {

$pesanError[] = "Data <b>Username</b> tidak boleh kosong !";

} 8. Buat skrip untuk validasi form masukan Password. Jika


array $pesanError. Skripnya: if (trim($txtPassword)=="") {

$pesanError[] = "Data <b>Password</b> tidak boleh kosong !";

}






$noPesan=0;

foreach ($pesanError as $indeks=>$pesan_tampil) {

$noPesan++;

echo " $noPesan. $pesan_tampil<br>";

}

echo "</div> <br>";

// Tampilkan lagi form login

include "login.php";

}

else {

# CEK LOGIN KE DATABASE

}


Jadi, jika sudah tidak ada error atau kesalahan data

(form terisi semua), data akan disimpan. Skripnya: else {

# LOGIN CEK KE TABEL USER LOGIN

$mySql = "SELECT * FROM user WHERE

username='$txtUsername' AND password='".md5($txtPassword)."' ";


("Query Salah : ".mysql_error());


# JIKA LOGIN SUKSES

if(mysql_num_rows($myQry) >=1) {

$_SESSION['SES_LOGIN'] =

$myData['kd_user'];

$_SESSION['SES_SKEY'] =

"43423232323"; // Untuk kode Unik, kode aplikasi

// Refresh


url=?open=Halaman-Utama'>";

}

else {

echo "Login Anda tidak diterima";

}

} 11. Simpan programya dengan nama file login_validasi.php.

Sekarang di dalam folder elearning/admin sudah ada file

login.php yang berisi form, dan login_validasi.php yang berisi

skrip program untuk memvalidasi user dan password dari database.

Supaya lebih faham, akan kami tambah penjelasan pada bagian

skrip paling penting, yaitu:

Di dalam database, semua akun login memiliki informasi

data Password yang di-enkripsi MD5, sehingga di dalam

skrip program harus dibuat query SQL dengan cara: $mySql = "SELECT * FROM user WHERE

username='$txtUsername' AND

password='".md5($txtPassword)."' ";




Jika menemukan kecocokan antara data yang

dimasukkan dari form dengan data yang ada dalam

database, maka data Kode User disimpan ke session (

$_SESSION[„SES_LOGIN‟]), contoh: # JIKA LOGIN SUKSES



$myData['kd_user'];



// Refresh



}

else {


} Ini berarti telah berhasil melakukan login, kemudian

halaman direfresh menuju alamat

URL;?open=Halaman-Utama.

5.9.4 Membuat Validasi Session Login

Supaya lebih aman, setiap halam program Administrator harus

diberikan validasi session, sehingga siapapun yang belum login

tidak bisa mengakses halaman program yang ada di dalam folder

admin. Caranya, anda dapat membuat file yang bertugas

memeriksa keberadaan session, apakah sudah login atau belum,

Karena jika sudah login maka program akan membentuk session

baru, dan jika logout maka session yang ada akan dihapus. Caranya:


2. Buat dokumen baru (tekan Ctrl + N), lalu buka tipe

halaman PHP.

3. Dari halaman kode (Code View), hapus semua kode HTML

yang ada.

4. Langsung saja, ketikkan skrip program seperti berikut: <?php

if(empty($_SESSION['SES_LOGIN'])) {

echo "<center>";

echo "<br> <br> <b>Maaf Akses Anda Ditolak!</b> <br>

Silahkan masukkan Data Login Anda dengan benar

untuk bisa mengakses halaman ini.";

echo "</center>";

// Refresh


url=../index.php'>";

exit;

}

?>

5. Simpan pada folder library dengan nama inc.seslogin.php.

5.9.5 Mengaktifkan Session Login ke Program

File inc.seslogin.php yang sudah dibuat tadi dapat dipakai ke

seluruh halam program yang ada di dalam folder admin. Caranya

adala dengan memanggil di awal baris program, dengan perintah

berikut: // Valdasi Login User


Berikut ini penerapan pada file kelas_data.php, ilustrasinya

bisa dilihat pada gambar:

Gambar 5.89 Membuat skrip periksa validasi login

Sekarang lakukan cara di atas pada semua file program di

folder elearning/admin, harus anda tambahkan baris skrip

tersebut, yaitu memanggil file inc.seslogin.php pada awal baris

kode program.

5.9.6 Membuat Logout

Terakhir, anda harus membuat file program login_out.php, di

dalam file ini terdapat dau baris perintah untuk menghapus session

yang sudah dibuat lewat login. Caranya:

1. Dari dreamweaver, buat dokumen PHP baru.

2. Hapus semua kode HTML yang ada, lalu buat skrip

program logout seperti berikut: <?php

session_unset();

session_destroy();

echo "<meta http-equiv='refresh' content='0; url=../?open'>";

exit;

?> 3. Simpan program diatas dengan nama logout.php.

4. Selesai.

BAB 6

MEMBUAT PROGRAM HALAMAN GURU

Pada bab ini akan membuat Halaman Program untuk Login

Guru, di dalam halaman program ini yang boleh mengakses hanya

guru yang sudah terdaftar di dalam database dan memiliki hak

login. Pada bagian ini, semua program akan di buat di dalam folder

guru, dari folder itu akan menyimpan semua file modul untuk

halaman login guru dalam mengelola materi belajar dan tugas

belajar, serta fasilitas lain yang terkait kelas yang guru ajar.

5.1 Program dan Menu Utama

Pada halaman program Login guru juga memiliki modul utama,

yaitu; index.php, menu.php dan file.php, ketiganya saling

terkait dalam menjalankan modul program yang diberikan

kepada Guru.

6.1.1 Membuat File Index.php

file index.php adalah file program yang dijalankan pertama kali

pada saat halaman Guru dijalankan, pada file ini terdapat kerangka

tabel yang menyusun antara header (kepala) program, menu utama

dan bagian tampilan modul program. Cara membuatnya adalah:

1. Buka dreamweaver


halaman PHP.

3. Simpan pada folder utama elearning/guru, dengan nama

index.php.

4. Dari halaman desain (Design), buat nama programnya dari

bagian Title, misalnya; Halaman Guru.

5. Gunakan panel Common, tambahkan table untuk kerangka

utama, dengan desain 2 baris dan 2 kolom, lebarnya 100%

pada header pilih None. Contoh:

6. Pada baris pertama, lakukan Merge Cells untuk

menggabungkan 2 kolom data, pada bagian ini akan

dijadikan judul program.

7. Dari menu Insert, klik Image. Lalu carilah file gambar

logo.jpg yang ada di dalam folder images. Gambar

diletakan pada baris pertama tabel kerangka, sehingga

hasilnya adalah:

Gambar 6.1 Merancang tabel untuk tampilan menampilkan

data

8. Selanjutnya, masuklah pada halaman kode program (Code).


file koneksi databasenya. Skripnya: <?php

session_start();



include_once "../library/inc.pilihan.php";

include_once "../library/inc.tanggal.php";

?>

Skrip diatas berfungsi memanggil file koneksi database,

file library fungsi otomatis program, dan file penanggalan.

10. Buat kode program untuk membaca time zone (zona

waktu) standard komputer, dengan perintah: // Baca Jam pada Komputer


11. Sebelum tag </title>, buatlah 3 skrip untuk mengaktifkan

library CSS dan juga JavaScript. Contoh: <link type="text/css" rel="stylesheet" href="../styles/style.css">

<link type="text/css" rel="stylesheet"

href="../plugins/tigra_calendar/tcal.css"/>

<script type="text/javascript"

src="../plugins/tigra_calendar/tcal.js"></script>

12. Pada tag <td>…</td> untuk kolom pertama (kiri) dari

tabel, dibuat skrip untuk memanggil file menu.php <?php include “menu.php”;?>

13. Pada tag <td>…</td> untuk kolom kedua (kanan) dari

tabel, dibuat skrip untuk memanggil file buka_file.php. <?php include “buka_file.php”;?>

14. Simpan kembali programnya.

6.1.2 Membuat File Menu.php

File menu.php berisi daftar menu utama program yang dimiliki

oleh Guru. Setiap menu dibuat dengan bentuk teks list (daftar),

dan lengkap dengan target linknya. Caranya:

1. Buka dreamweaver

2. Buat dokumen baru, lalu buka tipe halaman PHP.


menu.php. 4. Masuklah pada halaman kode program (Code), kemudian


5. Kembali ke halaman desain tampilan (Design), kemudian

buatlah daftar menu. Seperti contoh:

Gambar 6.2 Susunan menu yang ada di dalam file menu.php


6.1.3 Membuat file Buka_file.php

File buka_file.php berisi skrip program kontrol untuk semua

menu, tombol dan target form yang ada di dalam program. Ikuti

langkah berikut untuk membuatnya:




buka_file.php. 4. Masuklah pada halaman kode program (Code), kemudian


5. Buat skrip program seperti contoh berikut. <?php

# KONTROL MENU PROGRAM

if(isset($_GET['open'])) {

// Jika mendapatkan variabel URL ?open

switch($_GET['open']){

case '' :



case 'Halaman-Utama' :



default:


include "info.php";

break;

}

}

else {

// Jika tidak mendapatkan variabel URL : ?open


include "info.php";

}

?> 6. Setelah selesai, simpan programnya.

6.1.4 Membuat File Info.php

File info.php berfungsi memberikan informasi pada halaman

utama program Guru, informasinya sudah Login atau belum. Berikut

ini langkahnya:


2. Buka dokumen baru, lalu buka tipe halaman PHP.


info.php.

4. Dari halaman kode program (Code), hapuslah semua kode

yang ada.

5. Sekarang, ketik skripnya seperti contoh berikut: <?php

if(isset($_SESSION['SES_LOGIN'])) {

echo "<h3>Selamat datang di Aplikasi E-Learning SMP N 5


echo "<b> Anda login sebagai Admin";

exit;

}

else {

echo "<h3>Selamat datang di Aplikasi E-Learning SMP N 5


echo "<b>Anda belum login, silahkan <a href='?open=Login'

alt='Login'>login </a> sebagai Administrator untuk mengakses sitem

ini ";

}

?>

6. Setelah selesai, simpan programnya.

5.2 Program Login Guru

Pada bagian ini akan membuat login untuk mengakses halaman

Guru, dimulai dari mendesain Menu, membuat Form dan skrip

validasi login. Proses pembuatannya hamper sama dengan Login

Administrator.

6.2.1 Membuat Akun Login di Database

Akun login yang dimiliki Guru disimpan di dalam database, yaitu

pada tabel guru. Caranya:

1. Jalankan browser, lalu buka aplikasi phpMyAdmin dengan

alamat http://localhost/phpmyadmin/.

2. Buka database elearning_db.

3. Dari jendela kiri, klik nama tabel guru.

4. Jika tabel guru sudah aktif, klik menu Insert.

5. Dari halaman form masukan, dapat memasukkan 2 data

Guru sekaligus, atau satu-persatu juga bisa.

Catatan: perlu diperhatikan, untuk Kode Guru harus unik

karena Primary Key, jadi apabila di dalam database sudah

ada data Guru dengan Kode (G001 dan G002), maka dapat

membuat data baru dengan Kode selanjutnya.

6. Pada bagian data Password, harus memilih fungsi MD5

sebagai jenis enkripsi yang dipakai, sehingga login akan

lebih aman. Contoh:

http://localhost/phpmyadmin/

Gambar 6.3 Contoh memasukkan data Guru dilengkapi Password

enkripsi

7. Jika sudah, klik tombol GO.

6.2.2 Membuat Menu dan Kontrol Menu

Sekarang, anda dapat menyiapkan menu utama untuk mengakses

halaman program Login dan Logout, serta dilengkapi dengan skrip

untuk kontrol menunya. Berikut ini langkahnya:


2. Buka dokumen baru, lalu buka tipe halaman PHP.

3. Simpan dokumen baru ini dengan nama menu.php ke dalam

folder program guru, yaitu; elearning/guru.

4. Masuklah ke halaman kode program (Code View), buat

skrip berikut untuk menyusun menu utama, berikut

skripnya: <?php

if( isset($_SESSION['SES_LOGIN'])){

# JIKA SUDAH LOGIN, menu di bawah yang dijalankan ?>

<ul>

<li><a href="?open" target="_self">Home</a></li>

<li><a href="?open=Pelajaran-Data" target="_self">Data

Pelajaran</a></li>

<li><a href="?open=Kelas-Data" target="_self">Data Kelas</a>

</li>

<li><a href="?open=User-Data" target="_self">Data User</a></li>

<li><a href="?open=Guru-Data" target="_self">Data Guru</a></li>

<li><a href="?open=Siswa-Data" target="_self">Data

Siswa</a></li>

<li><a href="?open=Materi-Data" target="_self">Data Materi

Belajar</a></li>

<li><a href="?open=Tugas-Data" target="_self">Data Tugas

Belajar </a></li>

<li><a href="?open=Mengajar-Data" target="_self">Data

Mengajar</a></li>

<li><a href="?open=Laporan" target="_self">Laporan</a></li>

<li><a href="?open=Logout" target="_self">Logout</a></li>

</ul>

<?php

}

else {

# JIKA BELUM LOGIN (Tidak ada Session yang ditemukan)

?>

<ul>

<li><a href="?open=Login" target="_self">Login </a></li>

</ul>

<?php

}

?>

5. Masuk ke halaman desain (Design View). Pilih pada teks

menu Login, kemudian arahkan linknya menuju

?open=Login, seperti contoh:

Gambar 6.4 Membuat menu Login dari file menu.php

6. Pilih pada teks menu Logout, kemudian arahkan linknya

menuju ?open=Logout.

7. Simpan programnya.

Setelah menu Login dan Logout, serta form program login

dibuat, dapat menambahkan kontrol menu pada file buka_file.php,

supaya program bisa menjalankan login.php saat menu Login di klik.

Caranya:

1. Sekarang buka file buka_file.php, lalu masuklah ke

halaman kode.

2. Buat skrip program untuk menjalankan file login.php pada

saat menu mengarah ke alamat; ?open=Login. case 'Login' :

if(!file_exists ("login.php")) die ("File tidak ada !");

include "login.php"; break; 3. Buat skrip program untuk menjalankan file logoutphp

pada saat menu mengarah ke alamat; ?open=Logout. case 'Logout' :

if(!file_exists ("logout.php")) die ("File tidak ada !");

include "logout.php"; break;


login_validasi.php pada form Login diSubmit mengarah ke

alamat; ?open=Login-Validasi. case 'Login-Validasi' :

if(!file_exists ("login_validasi.php")) die ("File

tidak ada !");

include "login_validasi.php"; break;


6.2.3 Membuat Login Program

Setelah data dan akun login Guru dibuat, sekarang membuat

form program Login, terdiri dari form login yang disimpan dalam

file login.php dan program untuk validasi akun login dari dalam

database yang disimpan dalam file login_validasi.php. form login

ini dapat diakses dari menu Login halaman utama, yaitu saat

mengakses halaman guru ( http://localhost/elearning/guru )

pertama kali. Caranya:




tempatkan pada folder proyek utama; elearning/guru.

4. Masuklah ke halaman desain tampilan (Design View).

5. Aktifkan panel Forms, lalu tambahkan komponen area

Form ke dokumen. Caranya, klik ikon Form, kemudian atur

alamat Action dari panel Properties.

Action : ?open=Login-Validasi

Target : _self

Method : POST

6. Buat tabel kerangka untuk desain form Login. Caranya,

dari panel Common, lalu klik ikon Table untuk membuat

tabel desain kerangka form. Buat dengan 4 baris (Rows)

dan 3 kolom (Columns), lebarnya 500 pixels.

7. Dari tabel yang terbentuk, gabungkan dua kotak pada

baris pertama, kemudian dibuat judul form, misal; LOGIN

GURU.

8. Buatlah judul kotak masukan data login di bagian kiri,

yaitu; Username dan Password. Contoh hasilnya:

http://localhost/elearning/guru

Gambar 6.5 Memdesain tampilan tabel dengan judul



Properties.

TextField : txtUser

Char width : 30

Max Chars : 20

10. Pada baris Password, tambahkan form masukan berupa


Properties.


Char width : 30

Max Chars : 20

Type : Password

11. Kembali ke halam desain (Design View). Pada baris paling

awah, tambahkan objek tombol berupa Button, lalu atur

nilai propertinya.

Button Name : btnLogin

Value : Simpan



Setelah form login (login.php) selesai dibuat, sekarang anda

dapat membuat program untuk memvalidasi user dan password

yang dimasukkan dari form dengan data yang ada di dalam tabel

guru dari database. Skripnya akan disimpan pada file

login_validasi.php. cara membuatnya adalah:

1. Membuat dokumen baru lewat Dreamweaver, tipe PHP.


tempaylam pada folder proyek utama; elearning/guru.

3. Masukkan ke halam kode program (Code), hapuslah semua

kode HTML yang ada.

4. Buat skrip memanggil koneksi database, file yang dipanggil

adalah inc.connection.php. Skripnya: <?php



?>

5. Setelah koneksi database, kemudian buat skrip untuk

membaca tombol Login (btnLogin) saat diklik yang dikirim

dari file login.php. Skripnya: if(isset($_POST['btnLogin'])){




}

else {

// Refresh


url=?open=Login'>";

}

6. Didalam area baca tombol Login (btnLogin), lanjutkan

dengan membuat skrip untuk membaca data dari form.

Skripnya: // Baca Data dari Form Input


$txtPassword = $_POST['txtPassword']; 7. Buat deklarasi variable array, dengan nama $pesanError.

#pesanError=array();

8. Buat skrip untuk validasi form masukan Username. Jika


array $pesanError. Skripnya: if (trim($txtUsername)=="") {


kosong !";

9. Buat skrip untuk validasi form masukan Password. Jika


array $pesanError. Skripnya: if (trim($txtPassword)=="") {


kosong !";

}


ditemukan dari validasi. Skripnya: if (trim($txtPassword)=="") {


kosong !";

}





$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

// Tampilkan lagi form login

include "login.php";

}

else {

# CEK LOGIN KE DATABASE

}


Jadi, jika sudah tidak ada error atau kesalahan data

(form terisi semua), data akan disimpan. Skripnya: else {

# LOGIN CEK KE TABEL USER LOGIN

$mySql = "SELECT * FROM user WHERE

username='$txtUsername' AND password='".md5($txtPassword)."'

";




# JIKA LOGIN SUKSES



$myData['kd_user'];



// Refresh



}

else {


}

}

12. Simpan kembali programya.

6.2.4 Membuat Validasi Session Login

Untuk mengamankan setiap file modul program untuk Login

Guru, maka setiap file halaman program harus diberikan validasi

session, sehingga jika halaman diakses dan belum melakukan login

akan muncul konfirmasi penolakan. Caranya:



halaman PHP.

3. Dari halaman kode (Code View), hapus semua kode

HTML yang ada.

4. Langsung saja, ketikkan skrip program seperti berikut: <?php

if(empty($_SESSION['SES_GURU'])) {

echo "<center>";

echo "<br> <br> <b>Maaf Akses Guru Ditolak!</b> <br>

Silahkan Anda login sebagai Guru untuk bisa mengakses

halaman ini.";

echo "</center>";

// Refresh


url=../index.php'>";

exit;

}

?>

5. Simpan pada folder library dengan nama

inc.sesguru.php.

6.2.5 Mengaktifkan Session Login ke Program

File inc.sesguru.php yang sudah dibuat tadi dapat dipakai ke

seluruh halam program yang ada di dalam folder guru. Caranya

adala dengan memanggil di awal baris program, dengan perintah

berikut: // Valdasi Login User

include_once "../library/inc.sesguru.php";

Sekarang lakukan cara di atas pada semua file program di

folder elearning/admin, harus anda tambahkan baris skrip

tersebut, yaitu memanggil file inc.sesguru.php pada awal baris

kode program.

6.2.6 Membuat Logout

Terakhir, anda harus membuat file program login_out.php, di

dalam file ini terdapat dau baris perintah untuk menghapus session

yang sudah dibuat lewat login. Caranya:

1. Dari dreamweaver, buat dokumen PHP baru.

2. Hapus semua kode HTML yang ada, lalu buat skrip

program logout seperti berikut: <?php

session_unset();

session_destroy();

echo "<meta http-equiv='refresh' content='0; url=../?open'>";

exit;

?> 3. Simpan program diatas dengan nama logout.php.

4. Selesai.

5.3 Program Manajemen Materi Belajar

Selain dari Administrator, maka pihak Guru juga memiliki

fasilitas mengirim data Materi Belajar ke dalam web aplikasi, yaitu

melalui halaman login yang dimiliki oleh Guru. Hamper sama dengan

program Manajemen Materi yang sudah dibuat dalam halaman

program untuk Administrator, pada halaman login Guru juga akan

dibuat. Berikut ini adalah file programnya:

Materi_data.php : Program ini menjadi halaman

utama yang berisi menu untuk menambah data (mengirim

data materi baru), menu untuk Ubah dan juga Hapus

data.

Materi_add.php : Program ini dipakai untuk

menambahkan Materi baru, dilengkapi juga dengan

fasilitas file Upload.

Materi_edit.php : Program ini dipakai untuk

memperbaiki Materi yang memiliki kesalahan. Halaman

ini diakses lewat menu Edit yang dibuat dari halaman

utama, materi_data.php.

Materi_delete.php : Berisi skrip program untuk


materi_data.php, yaitu dari menu Delete.

6.3.1 Membuat Menu dan Kontrol Program

Sekarang kita dapat mempersiapkan menunya, menu dibuat di

dalam file menu.php yang ada pada folder guru. Setelah itu, menu

dilengkapi dengan skrip kontrol menu yang dibuat pada file

buka_file.php. Berikut caranya:

1. Buka Windows Explore.


3. Tambahkan menu Data Materi, dan arahkan linknya

menuju ?open=Materi-Data.

4. Buka file buka_file.php lewat Dreamweaver.

5. Masuk ke halaman kode program (Code), buat skrip

program untuk memanggil link menu yang mengarah ke

?open=Materi-Data, file program yang dijalankan adalah

materi_data.php. case 'Materi-Data' :

if(!file_exists ("materi_data.php")) die ("File tidak ada

!");

include "materi_data.php"; break;

6. Buat skrip program untuk memanggil file materi_add.php

pada saat menu Add Data dan memiliki alamat link;

?open=Materi-Add : case 'Materi-Add' :

if(!file_exists ("materi_add.php")) die ("File tidak ada

!");

include "materi_add.php"; break;

7. Buat skrip program untuk memanggil file materi_edit.php

pada saat menu Edit dan memiliki alamat link;

?open=Materi-Edit :

case 'Materi-Edit' :

if(!file_exists ("materi_edit.php")) die ("File tidak ada

!");

include "materi_edit.php"; break;

8. Buat skrip program untuk memanggil file

materi_delete.php pada saat menu Delete dan memiliki

alamat link; ?open=Materi-Delete : case 'Materi-Delete' :

if(!file_exists ("materi_delete.php")) die ("File tidak

ada !");

include "materi_delete.php"; break; 9. Simpan programnya.

6.3.2 Membuat Program Tampil Data

Sekarang kita akan membuat halaman utama program

Manajemen Data Materi, yaitu halaman program yang disimpan

dengan nama file materi_data.php. Program ini nanti fungsinya

adalah menampilkan semua data Materi yang sudah dibuat dalam

aplikasi e-learning, datanya ditampilkan dan dilengkapi dengan

menu Editdan Delete. Contoh tampilannya:

Gambar 6. 6 Tampilan halaman Tampil Data

Materi,menampilkan semua data

Dari tampilan program di atas, dapat membuat program dengan

mengikuti langkah berikut:




materi_data.php.



5. Dari panel Common, tambahkan desain table untuk

tampilan utama, sebanyak 4 baris dab 1 kolom, lebarnya

700 pixels, pada header pilih None.

6. Pada baris pertama, tambahkan judul dengan font header

1, yaitu: DATA MATERI.


filenya di folder images. Caranya, klik menu Insert, lalu

cari file btn_add_data.png dan buat rata kanan.

8. Pilih atau klik pada gambar ikon Add Data, lalu buat

target link menunya ke alamat berikut: ?open=Materi-Add

9. Buat tabel baru ( untuk tabel tampilan data ) dalam baris

ke-3 dari tabel utama. Tabel baru disesuaikan data Materi

Belajar yang akan ditampilkan ke layar, yaitu dengan 2

baris dan 6 kolom data, lebarnya adalah 100 percent.


akan ditampilkan, sedangkan 2 kolom kanan baris kedua

dibuat label menu Edit dan Delete.


11. 2 kotak di atas label untuk menu Edit dan Delete digabung

menjadi satu, kemudian dibuat teks Tools.

12. Masukan pada halam kode (Code View), siapkan kode


contoh berikut yang dicetak tebal. <table class="table-list" width="100%" border="0" cellspacing="1"

cellpadding="3">


memori session login, dan file koneksi database. Skripnya: // Valdasi Login User




14. Buat skrip untuk membaca Kode Guru yang sedang aktif

login. Skripnya: // Membaca Kode Guru yang login

$kodeGuru = $_SESSION['SES_GURU']; 15. Selanjutnya, buatlah skrip program untuk pembagian

halam data (Paging), letakkan skrip setelah koneksi

database. // Untuk pembagian halaman data (Paging)

$baris = 50;


$infoSql= "SELECT * FROM materi_belajar WHERE

kd_guru='$kodeGuru'";


".mysql_error());



$mulai = $baris * ($hal-1); 16. Buat skrip untuk menampilkan data Materi Belajar yang

dimili oleh Guru yang sedang aktif login. Penulisan skrip

diletakkan di bawah </tr> dari baris judul tampilan data,

dan sebelum <tr> dari baris untuk tampilan data. Jadi di

antaranya, skripnya adalah: <?php

// Skrip menampilkan data Materi

$mySql = "SELECT mb.*, pelajaran.nm_pelajaran FROM

materi_belajar AS mb



WHERE mb.kd_guru='$kodeGuru' ORDER BY

mb.kd_materi ASC LIMIT $mulai, $baris";

$myQry = mysql_query($mySql, $koneksidb) or die ("Query salah :

".mysql_error());

$nomor = $mulai;


$nomor++;

$Kode = $myData['kd_materi'];

?>



Sekarang, lengkapi skrip berikut: <tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> Delete </td>

<td> Edit </td>

</tr>

Dengan menambah skrip penampil data ke halaman, seperti

contoh berikut yang kami tandai dengan cetak tebal: <tr>


<td> <?php echo $myData['kd_materi']; ?> </td>

<td> <?php echo $myData['nm_materi']; ?> </td>


<td> Delete </td>

<td> Edit </td>

</tr>

18. Masuk ke halaman tampilan (Design View), pilih pada teks

menu Edit, lalu buat target link menunya ke alamat

berikut: ?open=Materi-Edit&Kode=<?php echo $Kode; ?>

19. Seperti cara sebelumnya, pilih pada teks menu Edit, lalu

buat link menunya ke alamat berikut: ?open=Materi-Delete&Kode=<?php echo $Kode; ?>

20. Pada baris tabel paling bawah yang suda dipecah menjadi 1

kolom/kotak, tambahkan teks judul Jumlah Data: dan

Halaman Ke: dengan posisi rata kanan.

Gambar 6.8 Hasil membuat teks judul pada baris tabel,untuk

menampilkan jumlah data yang berhasil ditampilkan dan

nomer halaman

21. Masuk ke halaman kode program (Code View), di samping

kanan teks Jumlah Data: buatlah skrip untuk

menampilkan jumlah data yang berhasil ditampilkan. Jumlah Data : <?php echo $jumlah; ?

22. Di samping kanan teks Halaman Ke : buatlah skrip untuk


<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Materi-Data&hal=$h'>$h</a> ";

}

?>


6.3.3 Membuat Program Tambah Data

Sekarang akan membuat program Tambah Data Materi, halaman

program ini disimpan dengan nama file materi_add.php. Pada

halaman program ini terdapat form untuk menyimpan data materi

berupa file. Berikut cara membuatnya:


2. Buat dokumen baru. Dari tab General, klik Dynamic Page,

lalu klik tipe halaman PHP.

3. Simpan pada folder elearning/guru dengan nama

materi_add.php.


kode HTML.

5. Masuk pada halaman desai (Design), tambahkan area form

dari panel Forms.


pemrosesan programnya dari bagian Action, panel

Properties.


Target : _self

Method : POST


7. Simpan kembali dokumennya.

8. Klik di dalam area form, sehingga kursor aktif dalam form.

9. Dari panel Common, tambahkan objel tabel untuk kerangka

desain form, sebanyak 7 baris (rows) dan 3 kolom

(columns), lebarnya (tabel width) 700 pixels, lalu klik

tombol Go.

10. Buat judul form pada baris pertama, yaitu misal: TAMBAH

DATA MATERI, beri efek tebal (font:BOLD).

11. Pada baris kedua dan ketiga, buat judul kotak form dengan


disesuaikan dengan tabel materi_belajar. Contoh hasilnya:


Data Materi

12. Pada baris Kode, tambahkan form masukkan berupa Text


Properties.

Char width : 10

Max chars : 4


13. Pada baris Nama Materi, tambahkan form masukkan

berupa Text Field dari panel Forms, lalu atur nilainya pada

panel Properties.

TextField : txtNama

Char width : 70

Max chars : 100


14. Pada baris Keterangan, tambahkan form masukkan berupa


Properties.


Char width : 70

Max chars : 200


15. Pada baris File Materi, tambahkan form masukkan berupa


Properties.


Char width : 40

Max chars : 200

16. Pada baris Pelajaran, tambahkan lagi form masukkan




Type : Menu


pilihan data Pelajaran yang datanya ditampilkan dari

database. Skripnya:

<select name="cmbPelajaran">


<?php







$cek = " selected";

} else { $cek=""; }



}

?>

</select> 17. Kembali ke halaman desain (Design View). Pada baris paling

bawah, tambahkan objek tombol berupa Button, lalu atur

nilai propertinya.


Value : Simpan

Action : Submit Form

18. Simpan lagi programnya.(CTRL+S)

Setelah desain form selesai dibuat dari halaman desain

(Design), dapat meneruskan prosesmua dari halaman kode program

(Code View) untuk membuat skrip validasi form dan skrip untuk

menyimpan data ke dalam database MYSQL. Berikut langkahnya:


2. Sisipkan kode efek CSS pada tag table penyusun tabel,

seperti contoh berikut yang dicetak tebal. <table class="table-list" width="700" border="0" cellspacing="1"

cellpadding="3">


file koneksi database dan membaca skrip library. Skripnya: <?php




4. Dibawah skrip koneksi database, buat skrip untuk mengisi

kotak form saat dijalankan. Skripnya: // Membuat variabel isi ke form

$dataKode = buatKode("materi_belajar", "M");





$_POST['cmbPelajaran'] : ''; 5. Di bawah skrip koneksi database. Buat skrip untuk

membaca tombol Simpan (btnSimpan) saat diklik, sehingga

nanti skrip lengkap untuk menyimpan data akan dibuat di

sini. Skripnya: # SKRIP TOMBOL SIMPAN DIKLIK



//Validasi Form Inputs



}


skripnya dibuat di dalam area skrip tombol Simpan

(btnSimpan) yang sudah dibuat sebelumnya. Skripnya: // Baca Data dari Form Input



$cmbPelajaran = $_POST['cmbPelajaran']; 7. Kemudian, buat deklarasi variable array untuk menampung

pesan kesalahan saat validasi form, yaitu dengan nama

$pesanError. //Validasi Form Inputs


Berikut adalah ilustrasinya:



8. Buat skrip untuk validasi dari form masukan Nama Materi.

Jika datanya kosong, maka buat daftar pesan error ke

dalam variable array $pesanError. Skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Materi</b> tidak boleh

kosong !";

}

9. Buat skrip untuk validasi dari form masukan Keterangan


dalam variable array $pesanError. Skripnya: if (trim($txtKeterangan)=="") {


kosong !";

}

10. Buat skrip untuk validasi dari form masukan Pelajaran.


dalam variable array $pesanError. Skripnya: if (trim($cmbPelajaran)=="Kosong") {


}

11. Buat skrip untuk menampilkan pesan error jika ditemukan

kesalahan dari hasil skrip validasi form. Skripnya: // Menampilkan Pesan Error dari Form




$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

else {


12. Pada bagian // Skrip Simpan data ke Database, buat

skrip untuk membuat Kode secara otomatis dari tabel

materi_belajar, dengan inisial kode M. skripnya: $kodeBaru = buatKode("materi_belajar", "M");

13. Buat skrip Upload File, yaitu untuk membaca file materi

belajar yang dikirim lewat fasilitas form File Field,

membaca nama file dan mengkopi file ke folder materi

yang sudah disiapkan. Skripnya: # Skrip Upload file materi


// Jika file materi tidak kosong (ada materi yang

dipilih)




// Proses kopi materi (menyimpan) ke folder


copy($_FILES['txtNamaFile']['tmp_name'],"../materi/

".$nama_file);

}

else {

// Jika file materi tidak dipilih, maka simpan

data kosong

$nama_file = "";

}


menyimpan data ke database. Jadi, jika sudah tidak ada

error atau kesalahan data (form terisi semua), data yang

diinput dari form akan disimpan ke dalam database.

Skripnya: // Skrip simpan data ke database

$kodeGuru = $_SESSION['SES_GURU'];

$mySql = "INSERT INTO materi_belajar

(kd_materi, nm_materi, keterangan, file_materi, kd_pelajaran,

kd_guru)



'$kodeGuru')";



if($myQry){


url=?open=Materi-Add'>";

}

exit;

15. Simpan kembali programnya.(CTRL+S)

Gambar 6.11 Tampilan Halaman Program Tambah Data Materi

6.3.4 Membuat Program Ubah Data

Selanjutnya akan membuat Program Ubah Data Materi,

program ini disimpan di dalam file materi_edit.php. Program ini

berisi form yang berfungsi menampilkan kembali data Materi y ang

ingin diperbaiki, halaman program ubah ini diakses lewat menu Edit

yang dibuat dari halaman program Tampil Data Materi. Perhatikan


Gambar 6.12 Ilustrasi langkah mengubah data,klik menu Edit


materi_edit.php dengan cara memodifikasi dari file

materi_add.php. Caranya:

1. Buka file materi_add.php yang sudah dibuat sebelumnya.

2. Simpan ulang dengan nama baru, yaitu: materi_edit.php.

3. Masuk ke halaman desain (Design View), lalu perbarui


DATA MATERI.


untuk merekam data Kode Materi supaya dapat dibaca

dalam perintah SQL saat ingin menyimpannya, atur nilai

propertinya.

TextField : txtKode

Value : <?php echo $myData[„kd_materi‟];?>

5. Pada baris masukan File Materi, tambahkan objek form

HiddenField untuk merekam data file lama supaya dapat

dibaca perintah SQL saat ingin memvalidasi dengan file

materi baru, atur nilai propertinya.


Value : <?php echo $myData[„file_materi‟];?>



menampung data dari form ke variable temporary,

sekarang data kosongnya diganti data dari database.

Skripnya: // Membaca Kode Guru yang login

$kodeGuru= $_SESSION['SES_GURU'];

# MEMBACA DATA DARI DATABASE UNTUK DIEDIT


$mySql = "SELECT * FROM materi_belajar WHERE

kd_materi='$Kode' AND kd_guru='$kodeGuru'";





$dataKode = $myData['kd_materi'];


$myData['nm_materi'];





?>



menampilkan data Materi yang berasal dari database,

sesuai Kode yang dipilih dari menu Edit. Penjelasan

kodenya:

Variabel $dataKode $dataKode = $myData['kd_materi'];

Variable $dataKode diisi dengan data Kode Materi


Variabel $dataNama $dataKode = $myData['kd_materi'];


$_POST['txtNama'] : $myData['nm_materi'];

Variable $dataNama diisi dengan data Nama

Materi (didapat dari kolom nm_materi), datanya

berasal dari data Materi yang sedang diperbaiki.

Jika form sudah pernah di-Post (tombol Simpan

diklik), maka $dataNama akan diisi nilai dari form

itu sendiri.


Database, tambahkan skrip untuk membaca data kode

dari form hidden. Skripnya: $kodeMateri = $_POST['txtKode'];

Skrip baca kode Materi di atas akan menggantikan skrip

lama, yaitu skrip:

$kodeBaru = buatKode[“materi_belajar”,”M”];

9. Di bawah skrip baca data Kode (txtKode) di atas, lengkapi

skrip yang berfungsi untuk meng-Upload file Materi

dengan skrip di bawah: # Skrip Upload file Materi


// jika tidak ada file Materi baru, maka baca

Materi lama


}

else {



if(file_exists("../materi/".$txtFileLama)) {

unlink("../materi/".$txtFileLama);

}

// Membaca file Materi baru




// Mengkopi file Materi baru ke folder

$nama_file = $kodeMateri.".".$nama_file;

copy($_FILES['txtNamaFile']['tmp_name'],"../materi/".$nama

_file);

}

10. Selanjutnya modifikasi query(perintahSQL) untuk


INSERT diubah menjadi perintah UPDATE. Hilangkan

skrip berikut ini: $kodeGuru = $_SESSION['SES_GURU'];

$mySql = "INSERT INTO materi_belajar

(kd_materi, nm_materi, keterangan, file_materi, kd_pelajaran,

kd_guru)



'$kodeGuru')";

Kemudian diganti dengan skrip berikut: $kodeGuru = $_SESSION['SES_GURU'];

$mySql = "UPDATE materi_belajar SET

nm_materi='$txtNama', keterangan='$txtKeterangan',

file_materi='$nama_file',

kd_pelajaran='$cmbPelajaran'

WHERE kd_materi='$kodeMateri' AND kd_guru='$kodeGuru'";


6.3.5 Membuat Program Hapus Data

Selanjutnya kita akan membuat program yang berfungsi

menghapus data Materi dari data yang dipilih melalui menu Delete

yang dibuat pada halaman Tampil Data. Caranya:


2. Buat dokumen baru PHP, lalu masuklah ke halam kode

Program.











// Membaca data File Materi

$mySql = "SELECT file_materi FROM materi_belajar WHERE







$fileMateri = $myData['file_materi'];

if(file_exists("../materi/".$fileMateri)) {

unlink("../materi/".$fileMateri);

}

}


$my2Sql = "DELETE FROM materi_belajar WHERE




if($my2Qry){

// Refresh halaman


url=?open=Materi-Data'>";

}

}

else {



}

?>

4. Simpan program diatas dengan nama file

materi_delete.php.

Sekarang anda dapat menambahkan skrip notifikasi pada menu

Delete, sehingga sebelum skrip ini dijalankan maka akan ada kotak

konfirmasi terlebih dahulu, jika dipilih Yes maka skrip hapus data

akan dijalankan. Caranya:

1. Buka lagi file program materi_data.php.

2. Masuklah pada halaman kode program, carilah baris skrip

dari menu Delete.

3. Sisipkan skrip perintah onClick, seperti berikut: <a href="?open=Materi-Delete&Kode=<?php echo $Kode; ?>"

target="_self" onclick="return confirm('YAKIN INGIN

MENGHAPUS DATA MATERI INI ... ?')">Delete</a>

4. Simpan lagi programnya.

5.4 Program Manajemen Tugas Belajar

Selanjutnya kita akan membuat program manajemen data

Tugas Belajar di dalam halaman Login Guru, program ini nanti

dapat diakses oleh guru untuk mengirimkan tugas ke dalam masing-

masing kelas yang diajar. Bagian program yang akan dibuat nanti

tersusun atas 4 file program, yaitu:

tugas_data.php : program utama yang

dipakai untuk menampilkan semua data Tugas yang

sudah disimpan dalam database, dari halaman ini

dilengkapi menu Edit untuk mengubah data, menu

Delete untuk menghapus dan menu Add Data untuk

mengirim tugas baru.

tugas_add.php : program yang berisi form

untuk menambah data Tugas baru yang dibuat oleh

guru.

Tugas_edit.php : program yang berisi form

untuk menampilkan kembali data guru ke dalam form,

datanya dapat diperbaiki dan disimpan kembali ke

database.

Tugas_delete.php : berisi skrip program untuk


tugas_data.php, yaitu lewat menu Delete.

6.4.1 Membuat Menu dan Kontrol Program

Sekarang kita akan membuat menu pada file menu.php,

kemudian dilengkapi dengan skrip kontrol menu di dalam file

program buka_file.php. langkahnya:

1. Buka WindowsExplorer.


3. Tambahkan menu Data Tugas, dan arahkan linknya menuju

?open=Tugas-data.


5. Masuk ke halaman kode, lalu buat skrip untuk menjalankan

link menu yang URL-nya pada ?open=Tugas-Data, file

program yang dijalankan adalah tugas_data.php. case 'Tugas-Data' :

if(!file_exists ("tugas_data.php")) die ("File

tidak ada !");

include "tugas_data.php"; break;

6. Buat skrip program untuk menjalankan file tugas_add.php

pada saat menu Add Data diklik, yaitu alamat linknya

adalah: ?open=Tugas-Add: case 'Tugas-Add' :

if(!file_exists ("tugas_add.php")) die ("File tidak

ada !");

include "tugas_add.php"; break;

7. Buat skrip program untuk menjalankan file tugas_edit.php

pada saat menu Edit diklik, yaitu alamat linknya adalah:

?open=Tugas-Edit: case 'Tugas-Edit' :

if(!file_exists ("tugas_edit.php")) die ("File

tidak ada !");

include "tugas_edit.php"; break;


tugas_delete.php pada saat menu Delete diklik, yaitu

alamat linknya adalah: ?open=Tugas-Delete: case 'Tugas-Delete' :

if(!file_exists ("tugas_delete.php")) die ("File

tidak ada !");

include "tugas_delete.php"; break;

9. Simpan programnya.

6.4.2 Membuat Program Tampil Data

Sekarang kita akan membuat Program Tampil Data yang

disimpan dalam file tugas_data.php, yang mana program ini

berfungsi menampilkan seluruh data Tugas dari database ke

layar. Contoh tampilannya:

Gambar 6.13 Tampilan halaman Tampil Data Tugas,menampilkan

semua data

Dari tampilan program di atas, anda dapat membuat

programnya dengan mengikuti langkah berikut:

1. Buka Dreamweaver dan buat dokumen baru dengan tipe

halaman PHP.


tugas_data.php.

3. Masuk pada halama kode program, hapus semua skrip

HTML yang ada.

4. Dari panel Common, tambahkan desain table untuk

tampilan utama, sebanyak 4 baris dan 1 kolom, lebarnya

700 pixels, pada header pilih none.

5. Pada baris pertama table, tambahkan judul dengan font

header 1 yaitu: DATA TUGAS.


filenya ada di folder images dan buat rata kanan.

7. Pilih atau klik pada gambar ikon Add Data, lalu buat

target link menunya ke alamat berikut: ?open=Tugas-Add

8. Buat tabel baru (untuk tabel tampil data) di dalam baris

ke-3 dari table utama. Tabel baru disesuaikan data Tugas

Belajar yang akan ditampilkan, misalnya dengan 7 kolom

dan 2 baris data, lebarnya adalah 100 percent.

9. Pada table tampil data, tambahkan judul sesuai data yang

akan ditampilkan, yaitu: No, Kode, Nama Tugas,

Pelajaran, Kelas, dan Tools. Kemudian 2 kolom kanan

baris kedua dibuat menu Edit dan Delete.


10. Gabungkan 2 kotak di atas label menu Edit dan Delete

menjadi satu, kemudian dibuat teks Tools.

11. Masuklah pada halaman kode, sisipkan kode pengaturan

CSS pada tabel yang baru saja dibuat, seperti contoh

berikut yang dicetak tebal. <table class="table-list" width="100%" border="0" cellspacing="1"

cellpadding="3">

12. Pada baris pertama program, buatlah skrip untuk

membaca library session, dan file koneksi database.

Skripnya: // Valdasi Login Guru




13. Buat skrip untuk membaca Kode Guru yang sedang aktif

login. Skripnya: // Membaca Kode Guru yang login


14. Di bawah skrip koneksi database, buatla skrip program

untuk pembagian baris data ke dalam halaman data

(Paging), letakkan skrip setelah koneksi database. // Untuk pembagian halaman data (Paging)

$baris = 50;


$infoSql= "SELECT * FROM tugas_belajar WHERE

kd_guru='$kodeGuru'";


".mysql_error());




15. Buatlah skrip program untuk menampilkan data Tugas

Belajr dari database. Skrip ini diletakkan setelah </tr>

milik baris tabel untuk judul tampilan data, dan sebelum

tag <tr> dari baris tabel untuk tampilan data. Skripnya:

Kemudian tambahkan skrip penutup di bawah </tr> baris

untuk menampilkan data, skripnya: // Skrip menampilkan data Tugas

$mySql = "SELECT tb.*, pelajaran.nm_pelajaran, kelas.nm_kelas





kelas.kd_kelas

WHERE tb.kd_guru='$kodeGuru' ORDER BY

tb.kd_tugas ASC LIMIT $mulai, $baris";



$nomor = $mulai;


$nomor++;




<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> Delete </td>

<td> Edit </td>

</tr>

Dengan menambah skrip penampil data ke halaman,

seperti contoh berikut yang kami tandai dengan cetak

tebal(bold): <tr>


<td> <?php echo $myData['kd_tugas']; ?> </td>

<td> <?php echo $myData['nm_tugas']; ?> </td>


<td> <?php echo $myData['nm_kelas']; ?> </td> <td> Delete </td>

<td> Edit </td>

</tr>

17. Masuk ke halaman tampilan, pilih pada teks menu Edit,

lalu buat target link menunya ke alamat berikut: ?open=Tugas-Edit&Kode=<?php echo $Kode; ?>

18. Seperti cara sebelumnya, pilih pada teks menu Delete,

lalu buat link menunya ke alamat berikut: <a href="?open=Tugas-Delete&Kode=<?php echo $Kode; ?>

19. Pada baris tabel paling bawah yang sudah dipecah menjadi

2 kolom/kotak, tambahkan teks judul Jumlah Data: dan

Halaman Ke:

20. Masuk ke halaman kode program, di samping kanan teks

Jumlah Data: buatlah skrip untuk menampilkan jumlah

data yang berhasil ditampilkan. Jumlah Data : <?php echo $jumlah; ?>

21. Disamping kanan teks Halaman Ke: buatlah skrip untuk


<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Tugas-Data&hal=$h'>$h</a> ";

}

?>


6.4.3 Membuat Program Tambah Data

Berikutnya kita akan membuat program Tambah Data Tugas,

halaman program ini akan dipakai oleh Guru untuk menambah data

Tugas yang diberikan guru kepada murid. Data tugas juga akan

dilengkapi dengan fasilitas Upload File. Sekarang membuatnya

dapat mengikuti langkah berikut:


2. Buat dokumen baru. Dari tab General, klik Dynamic Page,

lalu simpan dengan tipe halaman PHP.

3. Simpan pada folder utama elearning/guru dengan nama

tugas_add.php.

4. Masuk pada halam kode program, dan hapus semua kode

HTML.

5. Masuk pada halaman desain, tambahkan area form dari

panel Forms.


pemrosesan programnya dari bagian Action, panel

Properties.


Target : _self

Method : POST


7. Simpan kembali dokumennya, lalu klik di dalam area form

shingga kursor aktif dalam form.

8. Dari panel Common, tambahkan objek tabel untuk

kerangka desain form, sebanyak 9 baris dan 3 kolom, buat

lebar tabelnya 700 pixels, lalu klik tombol Go.

9. Buat judul form pada baris pertama, yaitu missal:

TAMBAH DATA TUGAS, beri efek tebal.

10. Pada baris kedua dan selanjutnya, buat judul kotak form

dengan teks sesuai dengan input (masukan data) yang akan

dibuat, yaitu disesuaikan dengan tabel tugas_belajar.

Contoh hasilnya:


Data Tugas


berupa Text Field dari panel Forms, lalu atur nilainya

pada panel Properties.

Char width : 10

Max chars : 4

Init val : <?php echo $dataKode;?>

12. Pada baris Nama Tugas, tambahkan form masukan berupa


Properties.

TextField : txtNama

Char width : 70

Max chars : 100

Init val : <?php echo $dataNama;?>

13. Pada baris Keterangan, tambahkan form masukan berupa


Properties.


Char width : 70

Max chars : 200

Init val : <?php echo $dataKeterangan;?>

14. Pada baris File Tugas, tambahkan form masukan berupa


Properties.


Char width : 40

Max chars :200

15. Pada baris Pelajaran, tambahkan form masukan berupa


Properties.


Type : Menu

Objek form tersebut akan dipakai untuk membuat

masukan pilihan data Pelajaran yang datanya ditampilkan

dari database, skripnya: <select name="cmbPelajaran">


<?php







$cek = " selected";

} else { $cek=""; }



}

?>

</select>

16. Pada baris Kelas, tambahkan form masukan berupa


Properties.

List/Menu : cmbKelas

Type : Menu

Objek form tersebut akan dipakai untuk membuat

masukan pilihan data Kelas yang datanya ditampilkan dari

database, skripnya: <select name="cmbKelas">


<?php






if ($bacaData['kd_kelas'] == $dataKelas) {

$cek = " selected";

} else { $cek=""; }

echo "<option value='$bacaData[kd_kelas]' $cek>

$bacaData[nm_kelas] </option>";

}

?>

</select>

17. Kembali ke halaman desain. Pada baris paling bawah,

tambahkan objek tombol berupa Button, lalu atur nilai

propertinya.


Value : Simpan


18. Simpan pada folder utama proyek dengan nama

tugas_add.php.

Setelah desain form dibuat, selanjutnya adalah

membuat skrip program yang berisi perintah SQL untuk

menyimpan data yang sudah dimasukan lewat form ke

database. Untuk membuatnya, anda dapat melanjutkan

lewat halaman kode program. Berikut langkahnya:


2. Simpan kode efek CSS pada tag table penyusun tabel,

seperti contoh berikut yang dicetak tebal. <table class="table-list" width="700" border="0" cellspacing="1"

cellpadding="3">

3. Pada baris pertama program, buatlah skrip untuk

membaca file keamanan login, koneksi database dan

membaca skrip library. Skripnya: <?php




4. Di bawah skrip koneksi database, buat skrip untuk

mengisi kotak form saat dijalankan. Skripnya: // Membuat variabel isi ke form

$dataKode = buatKode("tugas_belajar", "T");








$_POST['cmbKelas'] : '';

Kode $dataKode $dataKode = buatKode("tugas_belajar", "T");

Skrip di atas dipakai untuk membuat Kode Tugas

secara otomatis dari table tugas_belajar, dengan

kode inisial T, maka kode yang dihasilkan adalah

T0001, T0002, T0003 dan seterusnya sampai

maksimal T0099, karena maksimal 4 digit

karakter yang mampu disimpan ke dalam kolom

kd_tugas. Perintah buatKode() adalah nama fungsi

yang dibuat pada file program inc.library.php.

Kode $dataNama $dataNama = isset($_POST['txtNama']) ?

$_POST['txtNama'] : ''; Variable $dataNama akan diisi dengan data

kosong saat pertama form dijalankan, dan akan

diisi dengan data dari kotak Nama Tugas jika

sudah di-Submit (tombol Simpan diklik).

5. Di bawah skrip koneksi database. Buat skrip untuk

membaca tombol Simpan (btnSimpan) saat diklik,

sehingga nanti skrip lengkap untuk menyimpan data

akan dibuat di sini. Skripnya: # SKRIP TOMBOL SIMPAN DIKLIK







skripnya dibuat di dalam area skrip tombol Simpan

(btnSimpan) yang sudah dibuat sebelumnya. Skripnya: // Baca Data dari Form Input




$cmbKelas = $_POST['cmbKelas'];

7. Kemudian, buat deklarasi variable array, dengan nama

$pesanError. Berikut adalah ilustrasinya: // Validasi Form Inputs




8. Buat skrip untuk validasi form Nama Tugas. Jika

datanya kosong maka buat daftar pesan error ke dalam

variable array $pesanError. Skripnya: if (trim($txtNama)=="") {

$pesanError[] = "Data <b>Nama Tugas</b> tidak boleh

kosong !";

9. Buat skrip untuk validasi form Keterangan Jika

datanya kosong maka buat daftar pesan error ke dalam

variable array $pesanError. Skripnya: if (trim($txtKeterangan)=="") {


kosong !";

}

10. Buat skrip untuk validasi form Pelajaran. Jika datanya


array $pesanError. Skripnya: if (trim($cmbPelajaran)=="Kosong") {


}

11. Buat skrip untuk validasi form Kelas. Jika datanya


array $pesanError. Skripnya: if (trim($cmbKelas)=="Kelas") {

$pesanError[] = "Data <b>Kelas</b> belum dipilih !";

}






$noPesan=0;



$noPesan++;

echo " $noPesan.

$pesan_tampil<br>";

}

echo "</div> <br>";

}

else {


13. Pada bagian // Skrip Simpan data ke Database, buat

skrip untuk membuat kode secara otomatis dari table

tugas_belajar, dengan inisial karakter kode yang

dibuat adalah T, hasilnya T0001, T0002, dst. Skripnya: $kodeBaru = buatKode("tugas_belajar", "T");

14. Selanjutnya, buat skrip Upload File, untuk membaca

file tugas belajar yang dikirim lewat fasilitas form File

Field, membaca nama file, dan mengkopi file ke folder

tugas yang sudah disiapkan. Skripnya: # Skrip Upload file tugas


// Jika file tugas tidak kosong (ada tugas yang

dipilih)




// Proses kopi tugas (menyimpan) ke folder


copy($_FILES['txtNamaFile']['tmp_name'],"../tugas/

".$nama_file);

}

else {

// Jika file tugas tidak dipilih, maka simpan data

kosong

$nama_file = "";

}


menyimpan data ke dalam database. Jadi, jika sudah

tidak ada error atau kesalahan data (form terisi

semua), data akan disimpan. Skripnya: // Skrip simpan data ke database


$mySql = "INSERT INTO tugas_belajar (kd_tugas,

nm_tugas, keterangan, file_tugas, kd_pelajaran, kd_kelas,

kd_guru)



'$cmbKelas', '$kodeGuru')";



if($myQry){


url=?open=Tugas-Add'>";

}

exit;


Untuk menjalankan halaman program Tambah Data

Tugas di atas, anda dapat mengklik menu Data Tugas

yang ada di menu utama program (

http://localhost/elearning/guru ), lalu klik ikon Add

Data. Berikut contoh tampilanya:

http://localhost/elearning/guru

Gambar 6.17 Tampilan halaman program Tambah Data Tugas

6.4.4 Membuat Program Ubah Data

Sekarang kita akan membuat program Ubah Data Tugas,

program ini disimpan dengan nama file tugas_edit.php, program ini

diakses lewat menu Edit yang dibuat pada setiap baris data Tugas

yang tampil pada halaman Tampil Data Tugas.


tugas_edit.php dengan cara memodifikasi dari file

tugas_add.php. caranya:

1. Buka file tugas_add.php yang sudah dibuat sebelumnya.

2. Simpan ulang dengan nama baru, yaitu: tugas_edit.php.

3. Masuk ke halaman desain, lalu perbarui informasi judul

pada baris header dengan teks: UBAH DATA TUGAS.


untuk merekam data Kode Tugas (kd_tugas) dari data

yang sedang diperbaiki (Diedit). Pengaturannya:

TextField : txtKode


5. Pada baris File Tugas, tambahkan objek form

HiddenField untuk merekam data file tugas lama yaitu

dari kolom data file_tugas. Sehingga dapat dibaca dalam

perintah SQL saat ingin mem-validasi dengan file baru,



Value :<?php echo

$myData[„file_tugas‟]; ?>

6. Simpan kembali programnya.(ctrl+S)


menampung data dari form ke variable temporary,

sekarang data kosong-nya diganti data dari database.

Skripnya: # MEMBACA DATA DARI DATABASE UNTUK DIEDIT



$mySql = "SELECT * FROM tugas_belajar WHERE

kd_tugas='$Kode' AND kd_guru='$kodeGuru'";





$dataKode = $myData['kd_tugas'];








$_POST['cmbKelas'] : $myData['kd_kelas'];





menampilkan data yang berasal dari database, sesuai

Kode yang dipilih dari menu Edit. Penjelasan kodenya:

Variabel $dataKode $dataKode = $myData['kd_tugas'];

Variabel $dataKode diisi dengan data kode Tugas


Variabel $dataNama $dataNama = isset($_POST['txtNama']) ?


Variabel $dataNama diisi dengan data Nama Tugas

(dari kolom nm_tugas), datanya berasal dari data


post (tombol simpan di klik), maka $dataNama

akan diisi nilai dari form itu sendiri. Penjelasan lain

sama konsepnya pada variabel $dataKeterangan,

$dataPelajaran, dan $dataKelas. Semuanya

berfungsi sebagai isi pada kotak form, variabel

tersebut diisi data Tugas dari database yang saat

ini sedang dipilih untuk diperbaiki.

8. Sekarang menuju skrip sebelum // Skrip Simpan data

ke Database, tambahkan skrip untuk membaca data Kode

dari form Hidden. Skripnya: $kodeTugas = $_POST['txtKode'];

Skrip baca kode di atas menggantikan skrip lama, yaitu: $kodeBaru = buatKode[“tugas belajar”, “T”];

9. Di bawah skrip baca data Kode (txtKode) diatas, lengkapi

skrip yang berfungsi untuk meng-Upload file Tugas

dengan skrip di bawah: # Skrip Upload file Tugas


// jika tidak ada file Tugas baru, maka baca

Tugas lama


}

else {



if(file_exists("../tugas/".$txtFileLama)) {

unlink("../tugas/".$txtFileLama);

}

// Membaca file Tugas baru




// Mengkopi file Tugas baru ke folder

$nama_file = $kodeTugas.".".$nama_file;

copy($_FILES['txtNamaFile']['tmp_name'],"../tugas/".$nama_

file);

}



INSERT diubah menjadi UPDATE.

Hilangkan skrip berikut ini: $mySql = "INSERT INTO tugas_belajar (kd_tugas, nm_tugas,




'$cmbKelas', '$kodeGuru')";

Kemudian diganti dengan skrip berikut: $mySql = "UPDATE tugas_belajar SET nm_tugas='$txtNama',

keterangan='$txtKeterangan', file_tugas='$nama_file',


kd_kelas='$cmbKelas', kd_guru='$kodeGuru'

WHERE

kd_tugas='$kodeTugas'";




6.4.5 Membuat Program Hapus Data

Selanjutnya kita akan membuat skrip program yang berfungsi



Data Tugas, skrip untuk menghapus data dibuat dalam file

tugas_delete.php. Caranya:



program.











// Membaca data File Tugas

$mySql = "SELECT file_tugas FROM tugas_belajar WHERE






$fileTugas = $myData['file_tugas'];

if(file_exists("../tugas/".$fileTugas)) {

unlink("../tugas/".$fileTugas);

}


$my2Sql = "DELETE FROM tugas_belajar WHERE




if($my2Qry){

// Refresh halaman


url=?open=Tugas-Data'>";

}

}

else {



}

?>

4. Simpan program diatas dengan nama tugas_delete.php.

Sekarang menambahkan skrip notifikasi pada menu Delete,

sehingga sebelum skrip hapus dijalankan aka nada kotak konfirmasi

terlebih dahulu. Caranya:

1. Buka lagi file program tugas_data.php.

2. Masuklah pada halaman kode program, carilah baris

skrip dari menu Delete.

3. Sisipkan skrip perinta onClick, seperti berikut: <a href="?open=Tugas-DeleteKode=<?php echo $Kode; ?>"

target="_self" onClick=”return confirm <‟YAKIN INGIN

MENGHAPUS DATA TUGAS INI...?‟>”Delete</a>

4. Simpan lagi programnya.(ctrl+S)

BAB 7

Membuat Laporan Data

Pada Bab 7 ini anda akan belajar membuat Program Laporan,

dari mulai laporan menampilkan data secara biasa sampai dengan

laporan yang dilengkapi dengan filter data, misalnya laporan data

Tugas Belajar dengan filter kelas.

6.1 Membuat Menu Laporan

Sekarang kita akan membuat menu utama untuk halaman

laporan, menu disimpan dalam file bernama men_laporan.php, menu

tersebut dilengkapi dengan skrip kontrol program yang dibuat

pada file buka_file.php.

1. Buka Dreamweaver

2. Buat dokumen baru PHP.

3. Simpan pada folder utama elearning, dengan nama

menu_laporan.php.

4. Masuk pada halaman kode program, hapus semua skrip

HTML yang ada.

5. Selanjutnya, buatlah menu dengan menulis skrip berikut: <?php

if( isset($_SESSION['SES_LOGIN'])){

# JIKA SUDAH LOGIN, menu di bawah yang dijalankan

?>

<ul>

<li><a href="?open=Laporan-Pelajaran" target="_blank">Laporan

Data Pelajaran</a></li>

<li><a href="?open=Laporan-Kelas" target="_blank">Laporan Data

Kelas</a> </li>

<li><a href="?open=Laporan-User" target="_blank">Laporan Data

User</a></li>

<li><a href="?open=Laporan-Guru" target="_blank">Laporan Data

Guru</a></li>

<li><a href="?open=Laporan-Siswa" target="_blank">Laporan

Data Siswa</a></li>

<li><a href="?open=Laporan-Materi" target="_blank">Laporan

Data Materi Belajar</a></li>

<li><a href="?open=Laporan-Tugas" target="_blank">Laporan

Data Tugas Belajar </a></li>

<li><a href="?open=Laporan-Mengajar" target="_blank">Laporan

Data Mengajar</a></li>

</ul>

<?php

}

?>

6. Simpan lagi programnya.

Sekarang, file menu_laporan.php tersebut dapat dibuatkan

menu akses utama dari file menu.php dengan cara berikut:


2. Pilih menu Laporan, dan arahkan linknya menuju

?open=Laporan.


Selanjutnya buat kontrol menu Laporan tadi dari file

buka_file.php supaya dapat menjalankan file menu_laporan.php.

caranya:

1. Buka file buka_file.php, lalu masuklah ke halaman kode.


mengarah ke ?open=Laporan. case 'Laporan' :

if(!file_exists ("menu_laporan.php")) die


include "menu_laporan.php"; break;


6.2 Membuat Laporan Data Pelajaran

Sekarang kita akan membuat Laporan Data Pelajaran, yaitu

menampilkan semua data Pelajaran ke halaman tampilan, data yang

sudah tersimpan dalam database ditampilkan semuanya, kemudian

hasilnya dapat diPrint. Caranya:

1. Buka Dreamweaver dan buat dokumen baru PHP.

2. Simpan pada folder admin, dengan nama

laporan_pelajaran.php.


HTML yang ada.

4. Buatlah judul laporan, dengan font header 2. Misalnya;

Laporan Data Pelajaran.

5. Masuk ke halam desain. Lewat panel Common, tambahkan

tabel untuk kerangka desain dengan detil 2 baris dan 3

kolom, lebarnya 600 pixels, pada header pilih None.

Contoh:

Gambar 7.1 Merancang tabel untuk menampilkan data

6. Pada baris pertama, tambahkan judul sesuai data yang

akan ditampilkan, misalnya: No, Kode, dan Nama

Pelajaran. Selanjutnya rapikan lebar kotak kolomnya.

Gambar 7.2 Desain tabel untuk laporan data pelajaran


CSS pada tabel, seperti contoh berikut yang di cetak

tebal. <table class="table-list" width="600" border="0" cellspacing="1"

cellpadding="3">

8. Pada baris pertama kode program, tambahkan skrip untuk



// Valdasi Login




?>

9. Buatlah skrip program untuk menampilkan data Pelajran

dari database. Penulisan skrip diletakkan di bawah </tr>

dari baris tabel untuk judul, dan sebelum <tr> baris

berikutnya yang akan dipakai menampilkan data ke

halaman. <?php

// Skrip menampilkan data Pelajaran

$mySql = "SELECT * FROM pelajaran ORDER BY kd_pelajaran

ASC";



$nomor = 0;


$nomor++;

?>




<td> </td>

<td> </td>

<td> </td>

</tr>



<td><?php echo $nomor; ?> </td>

<td><?php echo $myData['kd_pelajaran']; ?> </td>

<td><?php echo $myData['nm_pelajaran']; ?> </td>

</tr>


Untuk mengakses halaman program Laporan Data Pelajaran,

maka sekarang anda dapat membuat menu dari file

menu_laporan.php. berikut caranya:

1. Buka file menu_laporan.php lewat Dreamweaver.

2. Masuk halaman desain tampilan, lalu pilih menu Laporan

Data Pelajaran.

Gambar 7.3 Membuat menu Laporan Data Pelajaran

3. Dari panel properties, arahkan linknya menuju

?open=Laporan-Pelajaran.


Selanjutnya buat control menu Laporan Pelajaran tadi dari file

buka_file.php supaya dapat menjalankan file

laporan_pelajaran.php. caranya:



mengarah ke ?open=Laporan-Pelajaran. case 'Laporan-Pelajaran' :

if(!file_exists ("laporan_[elajaran.php"))

die ("File tidak ada !");

include "laporan_pelajaran.php"; break;


Untuk menjalankan halaman Laporan Data Pelajaran, anda

dapat masuk ke halaman utaman E-Learning, kemudian klik menu

Laporan, selanjutnya klik menu Laporan Data Pelajaran. Atau

anda dapat menjalankan alamat dari browser dengan alamat:

http://localhost/elearning/admin/?open=Laporan-Pelajaran

Contoh hasilnya:

Gambar 7.4 Tampilan halaman Laporan Pelajaran,menampilkan

semua data

http://localhost/elearning/admin/?open=Laporan-Pelajaran

6.3 Membuat Laporan Data Kelas

Selanjutnya kita akan membuat halaman Laporan Data Kelas,

yaitu menampilkan data Kelas dari table database. Cara dan

langkahnya sama seperti membuat laporan sebelumnya.



laporan_kelas.php.


HTML yang ada.


Laporan Data Kelas.




Contoh:


akan ditampilkan, misalnya: No, Kode, Nama Kelas dan

Guru Wali. Selanjutnya rapikan lebar kotak kolomnya.




cellpadding="3">



inc.connection.php dan inc.seslogin.php pada folder

library. Skripnya: <?php

// Valdasi Login




?>

9. Buatlah skrip program untuk menampilkan data Pelajaran

dari database. Penulisan skrip diletakkan di bawah </tr>

dari baris tabel untuk judul, dan sebelum <tr> baris

berikutnya. <?php

// Skrip menampilkan data Kelas

$mySql = "SELECT kelas.*, guru.nm_guru FROM kelas

LEFT JOIN guru ON kelas.kd_guru =

guru.kd_guru ORDER BY kelas.kd_kelas ASC";



$nomor = 0;


$nomor++;

?>




<td> </td>

<td> </td>

<td> </td>

</tr>




<td><?php echo $myData['kd_kelas']; ?> </td>

<td><?php echo $myData['nm_kelas']; ?> </td>

<td><?php echo $myData['nm_guru']; ?></td>

</tr>


Untuk mengakses halaman program Laporan Data Kelas, maka

sekarang anda dapat membuat menu dari file menu_laporan.php.

berikut caranya:



Data Kelas.


?open=Laporan-Kelas.


Selanjutnya buat kontrol menu Laporan Kelas tadi dari file

buka_file.php supaya dapat menjalankan file laporan_kelas.php.

caranya:



mengarah ke ?open=Laporan-Kelas. case 'Laporan-Kelas' :

if(!file_exists ("laporan_kelas.php")) die


include "laporan_kelas.php"; break;


Untuk menjalankan halaman Laporan Data Kelas, anda

dapat masuk ke halaman utaman E-Learning, kemudian klik

menu Laporan, selanjutnya klik menu Laporan Data Kelas.

Contoh hasilnya:

Gambar 7.5 Tampilan halaman laporan kelas,menampilkan semua

data

6.4 Membuat Laporan Data User

Selanjutnya kita akan membuat halaman Laporan Data User,

dimana program ini akan menampilkan data User yang ada di dalam

table user. Dari data yang ada, informasi Password tidak akan di

tampilkan, karena bersifat rahasia dan juga datanya sudah di

enkripsi MD5, sehingga karakternya tidak dapat terbaca. Berikut

langkahnya:



laporan_user.php.


HTML yang ada.


Laporan Data User. 5. Masuk ke halaman desain. Lewat panel Common,

tambahkan tabel untuk kerangka desain dengan detil 2

baris dan 4 kolom, lebarnya 600 pixels, pada header pilih

None. Contoh:


akan ditampilkan, misalnya: No, Kode, Nama User dan

Username. Selanjutnya rapikan lebar kotak kolomnya.

Gambar 7.6 Desain tabel untuk laporan data User




cellpadding="3">


memanggil file validasi login dan file koneksi database,

filenya bernama inc.connection.php dan inc.seslogin.php

pada folder library. Skripnya: <?php

// Valdasi Login




?>

9. Buatlah skrip program untuk menampilkan data User dari

database. Penulisan skrip dibuat di bawah </tr> milik

baris judul data, dan sebelum tag <tr> baris berikutnya. // Skrip menampilkan data User

$mySql = "SELECT * FROM user ORDER BY kd_user ASC";



$nomor = 0;


$nomor++;




<td> </td>

<td> </td>

<td> </td>

</tr>




<td><?php echo $myData['kd_user']; ?> </td>

<td><?php echo $myData['nm_user']; ?> </td>

<td><?php echo $myData['username']; ?></td>

</tr>


Untuk mengakses halaman program Laporan Data User, maka


berikut caranya:



Data User.


?open=Laporan-User.


Selanjutnya buat kontrol menu Laporan Data User tadi dari

file buka_file.php supaya dapat menjalankan file

laporan_user.php. caranya:



mengarah ke ?open=Laporan. case 'Laporan-User' :

if(!file_exists ("laporan_user.php")) die


include "laporan_user.php"; break;


Untuk menjalankan halaman Laporan Data User, anda dapat

masuk ke halaman utaman E-Learning, kemudian klik menu Laporan,

selanjutnya klik menu Laporan Data User.

Contoh hasilnya:

Gambar 7.7 Tampilan halaman Laporan User,menampilkan semua

data

6.5 Membuat Laporan data Guru

Selanjutnya kita akan membuat halaman Laporan Data Guru,

dimana program ini akan menampilkan data Guru yang ada di dalam

table guru. Berikut langkahnya:



laporan_guru.php.


HTML yang ada.


Laporan Data Guru.




Contoh:


akan ditampilkan, misalnya: No, Kode, Nama Guru, L/P,

Alamat dan No.Telepon. Selanjutnya rapikan lebar kotak

kolomnya.

Gambar 7.8 Desain tabel untuk laporan data guru




cellpadding="3">





// Valdasi Login




?>

9. Buatlah skrip program untuk menampilkan data Guru dari

database. Penulisan skrip dibuat di bawah </tr> milik

baris judul data, dan sebelum tag <tr> baris berikutnya. <?php

// Skrip menampilkan data Guru

$mySql = "SELECT * FROM guru ORDER BY kd_guru ASC";



$nomor = 0;


$nomor++;




<td> </td>

<td> </td>

<td> </td>

</tr>




<td><?php echo $myData['kd_guru']; ?> </td>

<td><?php echo $myData['nm_guru']; ?> </td>

<td><?php echo $myData['kelamin']; ?> </td>

<td><?php echo $myData['alamat']; ?> </td>

<td><?php echo $myData['no_telepon']; ?></td>

</tr>


Untuk mengakses halaman program Laporan Data Guru, maka


berikut caranya:



Data Guru.


?open=Laporan-Guru.


Selanjutnya buat kontrol menu Laporan Data Guru tadi dari


laporan_guru.php. caranya:



mengarah ke ?open=Laporan-Guru. case 'Laporan-Guru' :

if(!file_exists ("laporan_guru.php")) die


include "laporan_guru.php"; break;


Untuk menjalankan halaman Laporan Data Guru, anda dapat


selanjutnya klik menu Laporan Data Guru.

Contoh hasilnya:

Gambar 7.9 Tampilan halaman Laporan Guru,menampilkan semua

data

6.6 Membuat Laporan Data Siswa

Selanjutnya kita akan membuat halaman Laporan Data Siswa,

di dalam laporan ini nanti akan ditambahkan fasilitas paging, yaitu

pembagian nomor halman. Berikut langkahnya:


2. Simpan pada folder utama elearning, dengan nama

laporan_siswa.php.


HTML yang ada.


Laporan Data Siswa. 5. Masuk ke halam desain. Lewat panel Common, tambahkan



Contoh:

6. Pada baris pertama tabel, tambahkan judul sesuai data

yang akan ditampilkan, misalnya: No, Kode, Nama Siswa,

L/P, Alamat dan No.Telepon. Selanjutnya rapikan lebar

kotak kolomnya.

Gambar 7.10 Desain tabel untuk laporan data Siswa

7. Pada baris ketiga, tambahkan judul Jumlah Data: dan

Halaman Ke: untuk membuat nomor halaman.




cellpadding="3">





// Valdasi Login




?>

10. Dibawah koneksi database, buat skrip untuk membaca

semua data di dalam table siswa, kemudan skrip untuk

membagi halaman data. $baris = 50;


$infoSql= "SELECT * FROM siswa";


".mysql_error());




11. Buatlah skrip program untuk menampilkan data di dalam

Siswa dari database. Penulisan skrip dibuat di bawah

</tr> dari baris judul data, dan sebelum tag <tr> baris

kedua yang akan dipakai untuk menampilkan data. <?php

// Skrip menampilkan data Siswa

$mySql = "SELECT * FROM siswa ORDER BY kd_siswa ASC




$nomor = 0;


$nomor++;

?>

12. Pada baris kedua dari tabel tampil data (poin 3) akan

digunakan untuk menampilkan informasi data dari

database. Sekarang, lengkapi skrip berikut: <tr>

<td> </td>

<td> </td>

<td> </td>

</tr>




<td><?php echo $myData['kd_siswa']; ?> </td>

<td><?php echo $myData['nm_siswa']; ?> </td>

<td><?php echo $myData['kelamin']; ?> </td>

<td><?php echo $myData['alamat']; ?> </td>

<td><?php echo $myData['no_telepon']; ?></td>

</tr>

13. Selanjutnya, di samping kanan teks Jumlah Data: buatlah

skrip untuk menampilkan jumlah data yang berhasil

digunakan. Jumlah Data<?php echo jumlah;?>

14. Kemudian membuat menu nomor halaman. Di samping kanan

teks Halaman Ke: buatlah skrip untuk menampilkan angka

nomor halam (Paging). Skripnya: Halaman Ke: <?php

For ($h = 1; $h<=$maks; $h++){

Echo “<a href=‟?open=Laporan-Siswa&hal=$h‟>$h<a>”;

}

?>




berikut caranya:


2. Pilih menu Laporan Data Siswa dan arahkan linknya

menuju ?open=Laporan-Siswa. Seperti contoh:


Selanjutnya buat kontrol menu Laporan Data Siswa tadi dari


laporan_siswa.php. caranya:



mengarah ke ?open=Laporan-Siswa. case 'Laporan-Siswa' :

if(!file_exists ("laporan_siswa.php")) die


include "laporan_siswa.php"; break;


Untuk menjalankan halaman Laporan Data Siswa, anda dapat


selanjutnya klik menu Laporan Data Siswa.

Contoh hasilnya:

Gambar 7.11 Tampilan halaman Laporan Siswa,menampilkan

semua data

6.7 Membuat Laporan Data Materi Belajar

Selanjutnya kita akan membuat halaman Laporan Data Materi

Belajar. Pada laporan ini nanti akan dilengkapi dengan filter data

Pelajaran, sehingga data Materi yang akan ditampilkan dapat

memilih berdasarkan Pelajaran yang ditentukan.

Pertama kita harus membuat form filter data Pelajaran,

komponen form yang dipakai adalah List/Menu atau Combobox,

dengan fasilitas ini data Pelajran dapat ditampilkan semua yang

fungsinya untuk memilih data untuk membuat SQL filter, sehingga

data Materi dapat tampil berdasarkan data Pelajaran yang dipilih.

Berikut langkahnya:



laporan_materi.php.


HTML yang ada.


Laporan Materi Belajar.

5. Masuk ke halam desain. Tambahkan area form dari panel

Forms, kemudian lakukan pengaturan pada panel

Properties.

Action :<?php $_SERVER[„PHP_SELF‟];?>

Target : _self

Method : POST:

6. Di dalam area form (garis merah), tambahkan table

kerangka dengan detail 3 baris dan 2 kolom, lebarnya 400

pixels, pada header pilih None. Contoh:

Gambar 7.12 Tabel unutk form filter Pelajaran

7. Pada table yang sudah dibuat, gabungkan baris pertama

menjadi satu kotak, kemudia buat judulnya: FILTER

DATA.

8. Pada baris kedua kolom kiri, tambahkan judul Pelajaran::

9. Pada baris Pelajaran bagian kanan, tambahkan form

masukan berupa Combobox atau List/Menu dari panel

Forms, lalu atur nilainya dari panel Properties.


Type : Menu

Selanjutnya, masuklah ke halaman kode program, carilah judul

Pelajaran. Lengkapi skrip dari List/Menu yang baru saja

dibuat dengan skrip menampilkan data Pelajaran dari

database. Skripnya: <select name="cmbPelajaran">

<option value="Semua">....</option>

<?php


$bacaSql = "SELECT * FROM pelajaran ORDER BY

kd_pelajaran";




if ($bacaData['kd_pelajaran'] == $kodePelajaran) {

$cek = " selected";

} else { $cek=""; }



}

?>

</select>

10. Kembali ke halaman desain. Disamping kanan form

List/Menu, tambahkan objek tombol berupa Button, lalu


Button Name : btnPilih

Value : Pilih


Selanjutnya kita akan membuat halaman tampil data Materi.

Caranya hamper sama dengan membuat laporan data Siswa dan

lainnya, hanya saja nanti skrip SQLnya dilengkapi per Penerbit.

Caranya:

1. Buka lagi file laporan_materi.





akan ditampilkan, misalnya: No, Kode, Judul Materi,

Pelajaran dan Guru. Selanjutnya rapikan lebar kotak

kolomnya.

Gambar 7.13 Desain tabel untuk laporan data Materi




cellpadding="3">





// Valdasi Login




6. Dibawah koneksi database, buat skrip untuk membuat

filter data Materi per Pelajaran. Skripnya: // Baca variabel URL browser

$kodePelajaran = isset($_GET['kodePelajaran']) ?

$_GET['kodePelajaran'] : 'Semua';

// Baca variabel dari Form setelah di Post

$kodePelajaran = isset($_POST['cmbPelajaran']) ?

$_POST['cmbPelajaran'] : $kodePelajaran;

// Membuat filter SQL

if ($kodePelajaran=="Semua") {

//Query #1 (semua data)

$filterSQL = "";

}

else {

//Query #2 (filter)

$filterSQL = " WHERE mb.kd_pelajaran ='$kodePelajaran'";

}

7. Buat skrip untuk membaca data di dalam table

materi_pelajaran, kemudian skrip untuk membagi halaman

data. Skripnya:. $baris = 50;


$infoSql= "SELECT * FROM materi_belajar As mb $filterSQL";


".mysql_error());




8. Pada table tampil data.Buatlah skrip program untuk

menampilkan data Materi dari database. Penulisan skrip

dibuat di bawah </tr> baris judul dan sebelum <tr> baris

kedua. // Skrip menampilkan data Materi

$mySql = "SELECT mb.*, pelajaran.nm_pelajaran, guru.nm_guru

FROM materi_belajar AS mb



LEFT JOIN guru ON mb.kd_guru = guru.kd_guru

$filterSQL ORDER BY mb.kd_materi ASC




$nomor = 0;


$nomor++;

?>




<td> </td>

<td> </td>

<td> </td>

</tr>




<td><?php echo $myData['kd_materi']; ?> </td>

<td><?php echo $myData['nm_materi']; ?> </td>



</tr>

10. Selanjutnya, disamping kanan teks Jumlah Data: buatlah

skrip untuk menampilkan umlah data yang berhasil

ditampilkan. Jumlah Data : <?php echo $jumlah; ?>



nomor halaman (Paging), skripnya: Halaman Ke :

<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Laporan-Materi&hal=$h'>$h</a>

";

}

?>




berikut caranya:


2. pilih menu Laporan Data Materi Belajar dan arahkan

linknya menuju ?open=Laporan-Materi.


Selanjutnya buat kontrol menu Laporan Data Materi tadi dari


laporan_materi.php. caranya:



mengarah ke ?open=Laporan-Materi case 'Laporan-Materi' :

if(!file_exists ("laporan_materi.php"))

die ("File tidak ada !");

include "laporan_materi.php"; break;


Setelah selesai, anda dapat mencoba menjalankan programnya.

Dari menu utama laporan, klik menu Laporan Materi Belajar. Dari

halaman laporan yang tampil, pertama dijalankan maka semua data

Materi akan ditampilan. Contoh hasilnya:

Gambar 7.14 Tampilan halaman laporan Data Materi Belajar

6.8 Membuat Laporan Tugas Belajar

Selanjutnya kita akan membuat halaman Laporan Tugas

Belajar, caranya sama dengan Laporan Materi Belajar, yang

membedakan hanya form filter datanya saja, sedangkan cara

membuat bagian tampilan data sama. Jadi, untuk latihan silahkan

anda membuat sendiri tanpa melihat panduan, jika masih tetap

belum mampu bisa mengikuti langkah berikut:



laporan_materi.php.


HTML yang ada.


Laporan Tugas Belajar.

5. Masuk ke halam desain. Tambahkan area form dari panel

Forms, kemudian lakukan pengaturan pada panel

Properties.

Action :<?php $_SERVER[„PHP_SELF‟];?>

Target : _self

Method : POST:

6. Di dalam area form (garis merah), tambahkan table

kerangka dengan detail 2 baris dan 2 kolom, lebarnya 400

pixels, pada header pilih None.

7. Pada table yang sudah dibuat, gabungkan baris pertama

menjadi satu kotak, kemudia buat judulnya: FILTER

DATA.

8. Pada baris kedua kolom kiri, tambahkan judul Kelas:.

9. Pada baris Kelas bagian kanan, tambahkan form masukan


atur nilainya dari panel Properties.

List/Menu : cmbKelas

Type : Menu

Selanjutnya, masuklah ke halaman kode program, carilah

judul Kelas. Lengkapi skrip dari List/Menu yang baru saja

dibuat dengan skrip menampilkan data Pelajaran dari

database. Skripnya: <select name="cmbKelas">

<option value="Semua">....</option>

<?php






if ($bacaData['kd_kelas'] == $kodeKelas) {

$cek = " selected";

} else { $cek=""; }

echo "<option value='$bacaData[kd_kelas]' $cek>

$bacaData[nm_kelas] </option>";

}

?>

</select>

10. Kembali ke halaman desain. Disamping kanan form

List/Menu, tambahkan objek tombol berupa Button, lalu


Button Name : btnTampil

Value : Tampilkan


11. Lewat panel Common, tambahkan tabel dengan detil 3

baris dan 5 kolom, lebarnya 700 pixels, pada header pilih

None. Tabel ini dipakai untuk menampilkan data Materi.

12. judul sesuai data yang akan ditampilkan, misalnya: No,

Kode, Judul Materi, dan Guru. Selanjutnya rapikan lebar

kotak kolomnya.

Gambar 7.15 Desain tabel untuk laporan data Tugas



tebal.

<table class="table-list" width="700" border="0" cellspacing="1"

cellpadding="3">





// Valdasi Login




15. Dibawah koneksi database, buat skrip untuk membuat

filter data Tugas Belajar per Kelas. Skripnya: // Baca variabel URL browser

$kodeKelas = isset($_GET['kodeKelas']) ? $_GET['kodeKelas'] :

'Semua';

// Baca variabel dari Form setelah di Post

$kodeKelas = isset($_POST['cmbKelas']) ? $_POST['cmbKelas'] :

$kodeKelas;

// Membuat filter SQL

if ($kodeKelas=="Semua") {

//Query #1 (semua data)

$filterSQL = "";

}

else {

//Query #2 (filter)

$filterSQL = " WHERE tb.kd_kelas ='$kodeKelas'";

}

16. Buat skrip untuk membaca data di dalam table

tugas_belajar, kemudian skrip untuk membagi halaman

data. Skripnya:. $baris = 50;


$infoSql= "SELECT * FROM tugas_belajar As tb $filterSQL";


".mysql_error());




17. Pada table tampil data.Buatlah skrip program untuk

menampilkan data Materi dari database. Penulisan skrip

dibuat di bawah </tr> baris judul dan sebelum <tr> baris

kedua. // Skrip menampilkan data Tugas Belajar

$mySql = "SELECT tb.*, pelajaran.nm_pelajaran, guru.nm_guru,

kelas.nm_kelas




LEFT JOIN guru ON tb.kd_guru = guru.kd_guru


kelas.kd_kelas

$filterSQL ORDER BY tb.kd_tugas ASC LIMIT

$mulai, $baris";



$nomor = 0;


$nomor++;

?>




<td> </td>

<td> </td>

<td> </td>

</tr>




<td><?php echo $myData['kd_tugas']; ?> </td>

<td><?php echo $myData['nm_tugas']; ?> </td>


<td><?php echo $myData['nm_kelas']; ?></td>


</tr>

19. Selanjutnya, disamping kanan teks Jumlah Data: buatlah

skrip untuk menampilkan umlah data yang berhasil

ditampilkan. Jumlah Data : <?php echo $jumlah; ?>



nomor halaman (Paging), skripnya: Halaman Ke :

<?php

for ($h = 1; $h <= $maks; $h++) {

echo " <a href='?open=Laporan-

Tugas&hal=$h&kodeKelas=$kodeKelas'>$h</a> ";

}

?>


Untuk mengakses halaman program Laporan Data Tugas

Belajar maka sekarang anda dapat membuat menu dari file

menu_laporan.php. berikut caranya:


2. pilih menu Laporan Data Tugas Belajar dan arahkan

linknya menuju ?open=Laporan-Tugas.


Selanjutnya buat kontrol menu Laporan Tugas Belajar

tadi dari file buka_file.php supaya dapat menjalankan file

laporan_tugas.php. caranya:



mengarah ke ?open=Laporan-Tugas case 'Laporan-Tugas' :

if(!file_exists ("laporan_tugas.php")) die


include "laporan_tugas.php"; break;


Setelah selesai, anda dapat mencoba menjalankan programnya.

Dari menu utama laporan, klik menu Laporan Tugas Belajar. Dari

halaman laporan yang tampil, pertama dijalankan maka semua data

Tugas akan ditampilan tanpa adanya filter data berdasarkan Kelas,

kecuali jika ada pilihan dari List/Menu Kelas.. Contoh hasilnya:

Gambar 7.16 Tampilan halaman Laporan Data Tugas Belajar

bab 2 paduan installasi php & mysql · paduan installasi php & mysql sebelum belajar...

Documents