Upload
faisalohm
View
69
Download
1
Embed Size (px)
Citation preview
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 1/31
P ENGEM BANGAN PAS
BER BASI S W EB DENGAN DREAMWEAVER
DEPARTEMEN PENDIDIKAN NASIONAL
DIREKTORAT JENDRAL MANAJEMEN PENDIDIKAN DASAR DAN MENENG
DIREKTORAT PEMBINAAN SEKOLAH MENENGAH ATAS
DISUSUN OLEH NANANG ARIEF S, ST – [email protected] 2009
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 2/31
Pengembangan PAS Berbasis Web Halaman 1
DAFTAR ISI 1
BAB I PENDAHULUAN 3
BAB II PENGANTAR PENGEMBANGAN PROGRAM APLIKASI BERBASIS WEB 4
2.1. Istilah-istilah dalam Program Aplikasi Berbasis Web 4
2.2. Sistem Komunikasi Jaringan Internet (Web) 5
BAB III STRUKTUR PENGEMBANGAN PAS BERBASIS WEB 6
3.1. Struktur PAS 6
3.2. Struktur PASWeb 7
BAB IV SOFTWARE PENDUKUNG PENGEMBANGAN PAS BERBASIS WEB 8
4.1. Paket Application Server Xampp 8
4.1.1. Komponen Xampp 8
4.1.2. Exstrak Xampp 9
4.1.3. Jalankan Xampp Control Panel 9
4.1.4. Start Apache Web Server 104.1.5. Testing Layanan Xampp 10
4.2. Manajemen database PAS MySQL dengan PHPMyAdmin 11
4.2.1. Konfigurasi PHPMyAdmin sebagai DataBase Manajemen PAS MySQL 11
4.2.2. Struktur Database PAS 12
4.3. Dreamweaver 8 sebagai Alat Bantu Pengembangan PAS Berbasis Web 13
4.3.1. User Interface Dreamweaver 13
4.3.2. Kapasitas Dan Kemampuan Dreamweaver 13
4.3.3. Site Definision 14
BAB V PENGEMBANGAN PAS BASIS WEB MODUL LAYANAN ABSENSI SISWA 17
5.1. Membuat koneksi database PAS dengan Dreamweaver 17
5.2. Membuat Halaman Web Untuk Menampilkan Daftar Absensi Siswa 18
5.3. Membuat Halaman Web Untuk Entry Data Absensi Siswa 24
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 3/31
Pengembangan PAS Berbasis Web Halaman 2
5.3.1. Buat Halaman Baru Untuk Entry Data Absensi Siswa 24
5.3.2. Buat Recordset Untuk Menampilkan Data Siswa 25
5.3.3. Buat Behavior Untuk Insert Data 27
5.3.4. Coba Entry Data Absensi 28
BAB VI. PENUTUP 30
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 4/31
Pengembangan PAS Berbasis Web Halaman 3
BAB I
PENDAHULUAN
Melihat tingginya minat sekolah untuk dapat memberikan layanan akses informasi sekolah melaluimedia web site, khususnya data administrasi sekolah yang telah diolah dalam sebuah paket aplikasi
sekolah (PAS), maka saya mencoba untuk memberikan alternative solusinya melalui pengembangan
PAS dengan tambahan beberapa program sehingga memungkinkan aksesnya melalui media web.
Materi dalam panduan ini meliputi konsep komunikasi layanan web dalam jaringan internet, struktur
pengembangan PASWeb, panduan penggunaan beberapa software bantu hingga contoh pembuatan
beberapa script pengembangan PASWeb dengan bantuan software Dreamweaver yang memungkinkan
melakukan pengembangan PASWeb tanpa harus menguasai code pemrograman.
Harapan kami, dengan mengikuti panduan ini maka dapat memberikan gambaran yang lebih mendalam
tentang Paket Aplikasi Sekolah (PAS) dan dapat mengembangkannya sesuai dengan kondisi dan
kebutuhan di sekolah masing-masing.
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 5/31
Pengembangan PAS Berbasis Web Halaman 4
BAB II
PENGANTAR PENGEMBANGAN PROGRAM APLIKASI BERBASIS WEB
2.1. ISTILAH-ISTILAH DALAM PROGRAM APLIKASI BERBASIS WEB
Agar lebih mudah dalam memahami materi pengembangan PASWeb berikutnya, maka sangat
direkomendasikan untuk memahami tentang beberapa istilah yang akan sering digunakan dalam
buku panduan ini.
Internet merupakan jaringan komputer global yang terhubung dari suatu jaringan dengan
jaringan komputer lainya di seluruh dunia.
TCP/IP merupakan protocol koneksi jaringan internet sebagai penghubung untuk dapatsaling berkomunikasi antara jaringan-jaringan yang beragam di seluruh dunia.
World Wide Web (WWW) merupakan bagian layanan (service) yang terdapat di jaringan
internet yang berfungsi untuk melayani permintaan akses dokumen web (HTML).
WWW atau di singkat menjadi web bekerja merdasarkan pada tiga mekanisme berikut:
Protocol (HTTP), Hypertext Transfer Protocol merupakan protocol salah satu layanan
dalam web yang di gunakan untuk transformasi dokumen web (HTML) antara komputer
client (Browser) dengan Web Server.
Address (URL), Uniform Resource Locator merupakan standart aturan penamaan alamat
untuk mengakses layanan web dalam jaringan internet.
Document (HTML), Hypertext Text Markup Language merupakan standart aturan (bahasa)
penulisan dokumen web yang dapat di terjemahkan oleh web browser untuk di tampilkan
dalam layar monitor user.
PHP merupakan bahasa pemrograman web server-side yang bersifat open source. PHP dapat
digunakan untuk membuat halaman web yang dinamis yang dapat berinteraksi sesuai dengan
permintaan (request) dari user, misal permintaan pencarian (query) database seperti yang
akan kita bahas dalam bab berikutnya.
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 6/31
Pengembangan PAS Berbasis Web Halaman 5
2.2. SISTEM KOMUNIKASI DALAM JARINGAN INTERNET (WEB)
Setelah memahami beberapa istilah yang sering digunakan dalam jaringan internet, berikutnya
adalah pemahaman proses komunikasi yang terjadi dalam jaringan internet (Web), Berikut ini
menggambarkan bagaimana komunikasi terjadi dalam jaringan internet. 1. Pertama komputer client mengirimkan permintaan akses dokumen (data) web kepada
komputer yang menyediakan layanan web (web server)
2. Permintaan (Request) ini dikirim melalui koneksi TCP/IP dengan menggunakan protocol
layanan HTTP pada port 80
3. Komputer Server menterjemahkan permintaan Client, termasuk permintaan pencarian (query)
data, insert data, pemrosesan data dll.
4. Jawaban dari Web Server dikirim balik sebagai (Response) melalui koneksi TCP/IP dalam
bentuk dokumen HTML
5. Browser pada komputer Client menterjemahkan isi dokumen HTML kemudian ditampilkan
pada layar monitor komputer Client.
Gambar 01. Prinsip Kerja Jaringan Web
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 7/31
Pengembangan PAS Berbasis Web Halaman 6
BAB III
STRUKTUR PENGEMBANGAN PASWEB
3.1 Struktur PAS
PAS adalah merupakan program aplikasi desktop client server sehingga memungkinkan PASdiakses oleh client komputer dalam jaringan local area network (LAN). Secara default PAS
tidak memungkinkan untuk di akses dari jaringan internet karena belum memiliki layanan
(service) web. Gambar 02 merupakan struktur default komunikasi PAS Server dengan PAS
Client melalui Open Database Connectifity (ODBC) dalam lingkup jaringan LAN :
Gambar 02. Struktur Awal PAS
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 8/31
Pengembangan PAS Berbasis Web Halaman 7
3.2 Struktur PASWeb
Dan untuk memenuhi kebutuhan aksesnya via jaringan internet melalui media web dengan
protocol http, maka perlu ditambahkan Service Web Server yang berfungsi untuk melayani
akses melalui media web dan juga program aplikasi web yang dapat melakukan akses data
kedalam database PAS. Gambar 03 merupakan struktur program PAS yang telah ditambahkanbeberapa program pendukung sehingga menjadi PASWeb yang memungkinkan untuk di akses
melalui jaringan internet (web).
Gambar 03. Struktur Pengembangan PAS menjadi PASWeb
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 9/31
Pengembangan PAS Berbasis Web Halaman 8
BAB IV
SOFTWARE PENDUKUNG PENGEMBANGAN PAS BERBASIS WEB
Untuk dapat memberikan layanan akses data (PAS) basis web, maka perangkat minimal yang harus di
penuhi adalah sebuah server yang telah dilengkapi software aplikasi layanan web (apache) dansoftware aplikasi pengelola database (MySQL). Salah satu dari beberapa paket aplikasi software yang
menyediakan paket layanan web dan database yang cukup terkenal adalah Xampp. Dalam paket
Xampp telah tersedia apache sebagai web servernya, MySQL sebagai database engine, Phpmyadmin
sebagai pengelola databasenya.
4.1. PAKET APLIKASI SERVER XAMPP
4.1.1 Komponen Xampp
Paket aplikasi Xampp terdiri dari beberapa komponen utama lain Apache sebagai web server,
MySQL sebagai database engine, PHPMyAdmin sebagai software manajemen database
MySQL dan engine interpreter PHP. Download paket application server xampp versi 1.7.1,
versi terbaru saat materi ini kami susun, download langsung di
http://www.apachefriends.org/en/xampp-windows.html (Freeware), pilih paketan yang dalam
betuk selfextracting menggunakan 7-zip karena dapat langsung dijalankan tanpa harus install
(portable)
Gambar 04. Situs Penyedia Aplikasi Xampp
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 10/31
Pengembangan PAS Berbasis Web Halaman 9
4.1.2 Exstract Xampp
Jalankan self exstract dari file xampp-win32-1.7.1 hasil download dan pilih target folder
extraknya di root folder dari harddisk anda, dalam contoh kali ini akan kita gunakan D:\
Gambar 05. Instalasi Xampp pada drive D
4.1.3 Jalankan Xampp Control Panel
Jalankan file xampp-control hasil auto extrak sebagai control panel pengendali layanan-layanan
yang ada dalam Xampp.
Gambar 06. Hasil autoekstract Paket Aplikasi Server Xampp
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 11/31
Pengembangan PAS Berbasis Web Halaman 10
4.1.4 Start Apache Web Server
Start Apache dengan jalan menekan tombol start dan pastikan status Apache telah running
dengan baik. Dengan aktifnya service Apache maka komputer telah memungkinkan untuk di
akses dari jaringan intranet melalui protocol http (web).
Gambar 07. Control Panel Xampp
4.1.5 Testing Layanan Xampp
Lakukan testing terhadap layanan Xampp (Web Server), buka web browser, akses alamat ini
http://localhost
Gambar 08. Tampilan layanan Web Server (Xampp) telah berjalan dengan baik
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 12/31
Pengembangan PAS Berbasis Web Halaman 11
Jika berhasil tampil seperti gambar 08, itu berarti infrastruktur untuk program aplikasi web
yang akan kita kembangkan telah berjalan dengan baik dan siap untuk melayani akses terhadap
program aplikasi web yang segera kita kembangkan.
4.2. MANAJEMEN DATABASE PAS MYSQL DENGAN PHPMYADMINUntuk dapat menggunakan PHPMyAdmin sebagai alat bantu dalam melakukan manajemen
database dari PAS, diperlukan sedikit perubahan pada file configurasinya (config.inc.php) agar
dapat menyesuaikan dengan kondisi database MySQL bawaan PAS.
4.2.1 Konfigurasi PHPMyAdmin sebagai DataBase Manajemen PAS MySQL
Tambahkan dan merubah beberapa baris berikut dalam file config.inc.php dalam folder
Xampp\PhpMyAdmin\
$cfg['Servers'][$i]['port'] = '33066'; tambahkan baris ini untuk keneksi ke PAS MySQL
$cfg['Servers'][$i]['auth_type'] = 'http'; isikan http pada auth type untuk keamanan data
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = 'sma'; isikan password default PAS yaitu sma
Simpan perubahannya dan lakukan akses database PAS melalui PhpMyAdmin dengan
menggunakan Browser dengan alamat http://localhost/phpmyadmin
Gambar 09. User interface dari PhpMyAdmin
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 13/31
Pengembangan PAS Berbasis Web Halaman 12
4.2.2 Struktur database PAS
Melalui PHPMyAdmin maka kita dapat melihat isi sebenarnya yang ada di dalam PAS, bahkan
memungkinkan untuk langsung melakukan entry data, koreksi data bahkan menghapus data
dari PHPMyAdmin. Namun demikian tidak di sarankan melakukan hal tersebut jika belum
menguasinya dengan baik.
Berikut tampilan struktur database PAS berikut table-tabelnya saat di buka dengan
menggunakan PHPMyAdmin.
Gambar 10. Database berikut tabel-tabel PAS yang di akses melalui PHPMyAdmin
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 14/31
Pengembangan PAS Berbasis Web Halaman 13
4.3. DREAMWEAVER 8 SEBAGAI ALAT BANTU PENGEMBANGAN PAS BERBASIS WEB
4.3.1 User Interface Dreamweaver
Sebelum kita masuk pada materi cara pengembangan PAS versi web, kita akan sampaikan
sekilas tentang software Dreamweaver sebagai alat bantu dalam desain pemrograman aplikasiberbasis Web.
Gambar 11. User Interface Dreamweaver 8
4.3.2 Kapasitas Dan Kemampuan Dreamweaver
Dreamweaver sebagai Alat bantu (editor) pemrograman web memiliki beberapa kelebihan
dalam mempermudah dan mempercepat pengembangan halaman web dinamis dibanding web
editor lainnya. Melalui fitur Behavior dan Interactive Dynamic Database Driven yang di
miliki Dreamweaver maka memungkinkan seseorang dapat membuat sebuah program aplikasi
database berbasis web dengan cepat tanpa harus menguasai bahasa pemrograman web.
Materi seanjutnya akan menunjukan bagaimana hal tersebut dapat di lakukan, jadi ikuti saja
tahapannya, maka anda akan segera menjadi seorang Web Application Developer baru.
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 15/31
Pengembangan PAS Berbasis Web Halaman 14
Berikutnya merupakan contoh cara pengembangan PAS versi web sederhana, yaitu proses baca
data, display data dan insert data dengan Dreamweaver, tanpa menuliskan code pemrogramman
web seperti PHP, ASP dll. Yang diperlukan adalah melakukan konfigurasi Dreamweaver agar
dapat digunakan secara optimal dalam membantu menyelesaikan pengembangan PAS dengan
lebih mudah dan cepat.
4.3.3 Site Definition
Pertama yang harus dilakukan adalah mendefinisikan Site, yaitu untuk menentukan letak dari
folder aplikasi web yang akan kita bangun, selain itu juga untuk menentukan jenis server
model (jenis bahasa pemrograman dan type database) yang akan kita gunakan.
Berikut langkah-langkah untuk mendefinisikan Site untuk Local Info :
1. Pilih Menu Site
2. Pilih New Site
3. Pada kotak dialog yang muncul pilih Tab Advanced
4. Klik Local Info pada kolom Category
5. Isikan Site Name dengan PAS Web (boleh dengan nama lain)
6. Isikan Local root folder dengan D:\Xampp\htdocs\ (bisa dipilih melalui icon ini )
7. Isikan Default images folder dengan D:\Xampp\htdocs\Images\
8. Dan isikan HTTP address dengan http://localhost
Gambar 12. Pendifinisian New Site
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 16/31
Pengembangan PAS Berbasis Web Halaman 15
Gambar 13. Site Definition untuk Local Info
Langkah berikutnya adalah melakukan definisi Site untuk Testing Server :
1. Pilih Testing Server pada kolom Category
2. Pilih Server model dengan PHP MySQL
3. Pilih Access dengan Local/Network
4.
Isikan Testing Server folder dengan D:\Xampp\htdocs\ (sesuaikan dengan yang ada) 5. Dan isikan URL prefix dengan http://localhost/ dan akhiri dengan klik tombol OK
Gambar 14. Konfigurasi Site Definition untuk testing Server
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 17/31
Pengembangan PAS Berbasis Web Halaman 16
Jika semua berjalan dengan benar maka akan di tampilkan semua isi web folder (htdocs) pada
Panel Files seperti gambar 15.
Gambar 15. Tampilan editor Dreamweaver setelah di konfigurasi dengan benar
Sampai tahapan ini Dreamweaver telah siap digunakan untuk melakukan desain User Interface
dari program aplikasi web yang akan kita buat berikut halaman-halaman web pendukung
lainnya.
Namun untuk dapat melakukan akses database didalamnya maka diperlukan tahapan
berikutnya, membuat koneksi Dreamweaver dengan database (PAS) yang akan di contohkan
pengembangannya dalam versi web pada bab berikutnya.
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 18/31
Pengembangan PAS Berbasis Web Halaman 17
BAB V
PENGEMBANGAN PAS BASIS WEB MODUL LAYANAN ABSENSI SISWA
5.1. Membuat Koneksi database PAS (PAS MySQL port 33066) dengan Dreamweaver
1.
Buat dokumen / halaman web baru dengan jalan pilih Menu File, New, pada kolomCategory, pilih Dynamic Page dan pada kolom Dynamic Page pilih PHP dan akhiri
dengan tombol Create
2. Pada kolom sebelah kanan klik panel Application hingga tampil tab Databases, Binding dll
3. Pilih tab Databases
4. Klik tanda [+] dan pilih MySQL Connection
Gambar 16 Koneksi Database dalam Dreamweaver
Gambar 17 Setting pembuatan koneksi ke database PAS MySQL
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 19/31
Pengembangan PAS Berbasis Web Halaman 18
5. Pada kotak dialog MySQL Connection
6. Pada Connection Name isi dengan cn_dbpas (bisa juga dengan nama lain)
7. Pada MySQL server isi dengan localhost:33066
8. Pada User name isi dengan root
9.
Pada Password isi dengan sma 10. Pada Database, klik select dan pilih pas_sma dan akhiri dengan klik tombol Ok
Gambar 18. Hasil setting koneksi ke database PAS MySQL
Dengan mengkonfigurasinya dengan benar maka pada Panel Application akan tampil koneksi
yang telah kita definisikan sebelumnya (cn_dbpas), dan jika masuk kedalamnya maka akan
tampil tabel-tabel yang ada dalam database yang telah kita pilih koneksinya (pas_sma).
Sampai tahapan ini Dreamweaver sudah siap untuk digunakan untuk melakukan
pengembangan PASWeb selanjutnya. Melalui database Binding, Server Behavior, CSS
(Cascade Style Sheet) dan lainnya akan membantu mempermudah dan mempercepat terciptanya
sebuah program aplikasi database secara otomatis seperti yang akan di uraikan dalam materi
berikutnya.
5.2. Membuat Halaman Web Untuk Menampilkan Daftar Absensi Siswa
Setelah memahami beberapa hal tentang seputar pengembngan aplikasi berbasis web, maka tiba
saatnya masuk dalam materi inti untuk mencoba membuat modul-modul layanan akses data
melalui web yang tentunya lebih mengasyikkan.
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 20/31
Pengembangan PAS Berbasis Web Halaman 19
Buat dokumen / halaman web baru dengan jalan pilih Menu File, New, pada kolom
Category, pilih Dynamic Page dan pada kolom Dynamic Page pilih PHP dan akhiri dengan
tombol Create
Buat Recordset untuk data absensi siswa dengan jalan pada Panel Application, klik tabBinding, klik tanda [+] , pilih Recordser (Query)
Gambar 19. Cara Membuat Binding Recordset
Pada kotak dialog Recordset yang muncul isikan beberapa criteria (parameter) berikut
Pada Name isikan dengan rs_absensi (nama recordset, bisa bebas, namun agar
memudahkan berikan nama sesuai dengan isinya)
Pada Connection pilih cn_dbpas (nama koneksi ke database PAS yang sebelumnya telah
kita buat)
Pada Table pilih t_siswa_absensi (nama table yang hendak kita akses)
Pada Sort pilih TANGGAL_AKSES, pilih Descending dan akhiri dengan klik tombol Ok
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 21/31
Pengembangan PAS Berbasis Web Halaman 20
Gambar 20. Cara buat recordset rs_absensi
Jika proses pembuatan recordset data siswa absensi dilakukan dengan benar, maka pada Panel
Application akan tampil seperti gambar 21.
Gambar 21. Hasil pembuatan recordset siswa absensi
Langkah berikutnya adalah menampilkan isi data siswa absensi dengan jalan sebagai berikut :
Buat tabel 2 baris dan 4 kolom pada dokumen baru (kosong) yang telah kita buat pada
langkah sebelumnya dengan jalan klik menu Insert, Table dan pada kotak dialog Table yang
muncul, pada rows isi dengan 2 dan columns isi dengan 4, pada Table Width isi 100, pilih
Percent dan akhiri dengan Ok
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 22/31
Pengembangan PAS Berbasis Web Halaman 21
Gambar 22. Cara membuat tabel siswa absensi
Berikan judul pada setiap kolom pada baris pertama, seperti gambar 23.
Isikan kolom-kolom pada baris kedua dengan data yang sesuai (data yang akan ditampilkan)
Drag (geret) NIS dan drop (lepas) ke dalam kolom NIS, drag KD_TINGKAT_KELAS dan
drop kedalam kolom tingkat kelas demikian juga dengan TANGGAL_ABSEN dan
STATUS_ABSES sesuaikan feild pada recordset dengan kolom yang ada.
Gambar 23. Cara melakukan Interactive Dynamic Database Driven
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 23/31
Pengembangan PAS Berbasis Web Halaman 22
Tambahkan Behavior untuk melakukan proses pengulangan pembacaan data sesuai dengan
ketentuan yang telah kita tetapkan
Select (pilih) baris ke dua
Pada Panel Application, tab Server Behavior, klik tanda [+], kemudian pilih Repeat Region
Gambar 24. Select untuk di tambahkan behavior repeat region
Pada kotak dialog Repeat region yang muncul, pada Recordset pilih rs_absensi
Pada radio Button Show, pilih All record dan akhiri dengan Ok
Gambar 25. Setting Repeat Region
Simpan dokumen web yang telah kita buat tadi dengan nama absensi.php.
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 24/31
Pengembangan PAS Berbasis Web Halaman 23
Sampai disini modul aplikasi untuk baca data & menampilkan database absensi siswa (table
t_siswa_absensi) sudah siap untuk di akses dengan menggunakan Web Browser.
Buka internet browser, dan lihat hasilnya melalui alamat berikut http://localhost/absensi.php
Gambar 26. Hasil pembacaan data absensi pada database PAS
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 25/31
Pengembangan PAS Berbasis Web Halaman 24
5.3. Membuat Halaman Web Entry Data Absensi Siswa
Halaman entry absensi siswa terdiri dari 2 buah form, dimana form1 berfungsi sebagai query
(pencarian) data siswa atas dasar masukan NIS. Sedangkan form2 berfungsi untuk
menampilkan data siswa dari hasil query dengan inputan NIS pada form1, sekaligus sebagai
masukan data absensi bagi siswa yang bersangkutan. Sub bab berikutnya akan diuraikancaranya tahap demi tahap.
5.3.1 Buat Halaman Baru Untuk Entry Data Absensi Siswa
Buat dokumen / halaman web baru dengan jalan pilih Menu File, New, pada kolom
Category, pilih Dynamic Page dan pada kolom Dynamic Page pilih PHP dan akhiri dengan
tombol Create
Ketikkan Judul FORMULIR ENTRY DATA ABSENSI SISWA
Insert form dengan jalan klik menu Insert, pilih Form dan pilih Form lagi
Copy form1 dan paste sebagai form2
Gambar 27. Insert Form
Select form yang atas dan isi Form Name pada Properties dengan form1
Select form yang bawah dan isikan Form Name pada Properties dengan form2
Dalam form1, insert tabel 1 baris, 2 kolom dan form2, insert tabel 11 baris, 2 kolom
Ketik label pada tiap-tiap field seperti Gambar 28.
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 26/31
Pengembangan PAS Berbasis Web Halaman 25
Gambar 28. Desain Halaman Entry Data
Pada Form1 :
MASUKKAN NIS, isikan properties textfield dengan NIS, seperti Gambar 28
Pada Form2 :
Pada baris NIS, properties textfield, isikan NIS
Pada baris NAMA SISWA, properties textfield, isikan NM_SISWA
Pada baris KODE TAHUN AJARAN, properties textfield, isikan KD_TAHUN_AJARAN
Pada baris KODE TINGKAT KELAS, properties textfield, isikan KD_TINGKAT_KELAS
Pada baris KODE PROGRAM PENGAJARAN, properties textfield, isikan
KD_PROGRAM_PENGAJARAN
Pada baris KODE ROMBEL, properties textfield, isikan KD_ROMBEL
Pada baris TANGGAL, properties textfield, isikan TANGGAL
Pada baris KODE PERIODE BELAJAR, properties textfield, isikan
KD_PERIODE_BELAJAR
Pada baris STATUS ABSEN, properties textfield, isikan STATUS_ABSEN
Pada baris PETUGAS ENTRY DATA, properties textfield, isikan USERNAME
5.3.2 Buat Recordset Siswa Untuk Menampilkan Data Siswa
Pada panel Application, pilih tab Binding, tambahkan [+] recordset baru dengan nama
rs_siswa
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 27/31
Pengembangan PAS Berbasis Web Halaman 26
Pada Connection isikan dengan cn_dbpas
Pada Table isikan dengan v_siswa_no_induk
Pada Filter isikan dengan NIS, Form Variable = NIS seperti Gambar 29.
Gambar 29. Setting Recordset Siswa
Drag dan drop field-field dari recordset siswa kedalam masing-masing textfield yang sesuai
pada form2, seperti gambar 30 di bawah
Gambar 30. Drag and drop dari recordset siswa ke dalam textfield pada form2
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 28/31
Pengembangan PAS Berbasis Web Halaman 27
5.3.3 Buat Behavior Untuk Insert Data
Pada panel Application, pilih tab Behavior, tambahkan [+] insert record
Pada Submit Value Form pilih form2
Pada Connection pilih cd_dbpas
Pada Insert Table pilih t_siswa_absensi (hasil entry disimpan pada table t_siswa_absensi)
Pada After Insert, goto, isikan absensi.php dan akhiri dengan Ok, seperti gambar 31.
Gambar 31. Setting Behavior Insert Record ke t_siswa_absensi
Gambar 32. Hasil Akhir Pembuatan Server Behaviors Insert Record
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 29/31
Pengembangan PAS Berbasis Web Halaman 28
Simpan dokumen tersebut dengan nama file simpan.php, dan halaman entry data siswaabsensi siap untuk digunakan.
5.3.4 Coba Entry Data Absensi
Jalankan melalui icon Preview/Debug in Browser
Pada textfield MASUKKAN NIS, masukkan nis dari salah satu siswa yang akan di insert(tidak masuk) kemudian klik tombol Tampilkan
Jika tahapannya telah dilalui dengan benar, maka akan ditampilkan data siswa sesuai dengan
nis yang dimasukkan seperti gambar 33.
Gambar 33. Running Program Simpan.php
Masukkan data tanggal siswa absen
Masukkan kode periode belajar 1 untuk semester 1 dan 2 untuk semester 2
Masukkan status absen (1 : Ijin, 2 : Sakit, 3 : Alpha)
Masukkan Nama Petugas Entry dengan pas dan klik tombol Simpan
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 30/31
Pengembangan PAS Berbasis Web Halaman 29
Gambar 34. Running program dan entry data siswa absen
Gambar 35. Hasil Insert data dan ditampilkan pada absensi.php
5/10/2018 eBook Pasweb1 - slidepdf.com
http://slidepdf.com/reader/full/ebook-pasweb1 31/31
Pengembangan PAS Berbasis Web Halaman 30
BAB VI. PENUTUP
Panduan ini merupakan alternative cara melakukan pengembangan PAS tanpa harus menguasai bahasa
pemrograman, diharapkan setelah mengikuti panduan ini pembaca akan dapat membuat sebuah aplikasi
web database sederhana. Namun demikian untuk dapat membuat suatu aplikasi database yang lebihkomplek tetap dibutuhkan pengetahuan tentang pemrograman database seperti php dan lainnya.
Seperti kata pepatah, tidak ada gading yang tak retak, saya pun meyakini kalau panduan ini masih jauh
dari kata sempurna, mudah-mudahan kedepan saya masih diberikan kesempatan untuk dapat
menyempurnakan sehingga menjadi lebih baik dan lebih bermanfaat, Amieiin….
SELAMAT ANDA TELAH BERHASIL MELAKUKAN DISPLAY DAN ENTRY DATA
PAS BERBASIS WEB
Pertanyaan, Kritik dan Saran yang Membangun
Silahkan di tujukan
ke