Anda di halaman 1dari 31

PENGEMBANGAN PAS BERBASIS WEB

DENGAN DREAMWEAVER

DEPARTEMEN PENDIDIKAN NASIONAL


DIREKTORAT JENDRAL MANAJEMEN PENDIDIKAN DASAR DAN MENENGAH DIREKTORAT PEMBINAAN SEKOLAH MENENGAH ATAS

TAHUN 2009

DISUSUN OLEH NANANG ARIEF S, ST NANANG_AS@YAHOO.COM

DAFTAR ISI

BAB I PENDAHULUAN

BAB II PENGANTAR PENGEMBANGAN PROGRAM APLIKASI BERBASIS WEB 2.1. Istilah-istilah dalam Program Aplikasi Berbasis Web 2.2. Sistem Komunikasi Jaringan Internet (Web)

4 4 5

BAB III STRUKTUR PENGEMBANGAN PAS BERBASIS WEB 3.1. Struktur PAS 3.2. Struktur PASWeb

6 6 7

BAB IV SOFTWARE PENDUKUNG PENGEMBANGAN PAS BERBASIS WEB 4.1. Paket Application Server Xampp 4.1.1. Komponen Xampp 4.1.2. Exstrak Xampp 4.1.3. Jalankan Xampp Control Panel 4.1.4. Start Apache Web Server 4.1.5. Testing Layanan Xampp 4.2. Manajemen database PAS MySQL dengan PHPMyAdmin 4.2.1. Konfigurasi PHPMyAdmin sebagai DataBase Manajemen PAS MySQL 4.2.2. Struktur Database PAS 4.3. Dreamweaver 8 sebagai Alat Bantu Pengembangan PAS Berbasis Web 4.3.1. User Interface Dreamweaver 4.3.2. Kapasitas Dan Kemampuan Dreamweaver 4.3.3. Site Definision

8 8 8 9 9 10 10 11 11 12 13 13 13 14

BAB V PENGEMBANGAN PAS BASIS WEB MODUL LAYANAN ABSENSI SISWA 5.1. Membuat koneksi database PAS dengan Dreamweaver 5.2. Membuat Halaman Web Untuk Menampilkan Daftar Absensi Siswa 5.3. Membuat Halaman Web Untuk Entry Data Absensi Siswa Pengembangan PAS Berbasis Web

17 17 18 24

Halaman 1

5.3.1. Buat Halaman Baru Untuk Entry Data Absensi Siswa 5.3.2. Buat Recordset Untuk Menampilkan Data Siswa 5.3.3. Buat Behavior Untuk Insert Data 5.3.4. Coba Entry Data Absensi

24 25 27 28

BAB VI. PENUTUP

30

Pengembangan PAS Berbasis Web

Halaman 2

BAB I PENDAHULUAN
Melihat tingginya minat sekolah untuk dapat memberikan layanan akses informasi sekolah melalui media 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.

Pengembangan PAS Berbasis Web

Halaman 3

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

Pengembangan PAS Berbasis Web

Halaman 4

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

Pengembangan PAS Berbasis Web

Halaman 5

BAB III STRUKTUR PENGEMBANGAN PASWEB

3.1

Struktur PAS PAS adalah merupakan program aplikasi desktop client server sehingga memungkinkan PAS diakses 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

Pengembangan PAS Berbasis Web

Halaman 6

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 ditambahkan beberapa program pendukung sehingga menjadi PASWeb yang memungkinkan untuk di akses melalui jaringan internet (web).

Gambar 03. Struktur Pengembangan PAS menjadi PASWeb

Pengembangan PAS Berbasis Web

Halaman 7

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) dan software 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 Pengembangan PAS Berbasis Web Halaman 8

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

Pengembangan PAS Berbasis Web

Halaman 9

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

Pengembangan PAS Berbasis Web

Halaman 10

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 PHPMYADMIN Untuk 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 Pengembangan PAS Berbasis Web Halaman 11

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

Pengembangan PAS Berbasis Web

Halaman 12

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 aplikasi berbasis 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. Pengembangan PAS Berbasis Web Halaman 13

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 7. Isikan Default images folder dengan D:\Xampp\htdocs\Images\ 8. Dan isikan HTTP address dengan http://localhost ini )

Gambar 12. Pendifinisian New Site Pengembangan PAS Berbasis Web Halaman 14

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 Pengembangan PAS Berbasis Web Halaman 15

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.

Pengembangan PAS Berbasis Web

Halaman 16

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 kolom Category, 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 Pengembangan PAS Berbasis Web Halaman 17

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.

Pengembangan PAS Berbasis Web

Halaman 18

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 tab Binding, 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

Pengembangan PAS Berbasis Web

Halaman 19

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 Pengembangan PAS Berbasis Web Halaman 20

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 Pengembangan PAS Berbasis Web Halaman 21

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. Pengembangan PAS Berbasis Web Halaman 22

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

Pengembangan PAS Berbasis Web

Halaman 23

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

Pengembangan PAS Berbasis Web

Halaman 24

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 Pengembangan PAS Berbasis Web Halaman 25

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 Pengembangan PAS Berbasis Web Halaman 26

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 Pengembangan PAS Berbasis Web Halaman 27

Simpan dokumen tersebut dengan nama file simpan.php, dan halaman entry data siswa absensi 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

Pengembangan PAS Berbasis Web

Halaman 28

Gambar 34. Running program dan entry data siswa absen

Gambar 35. Hasil Insert data dan ditampilkan pada absensi.php

Pengembangan PAS Berbasis Web

Halaman 29

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 lebih komplek 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 nanang_as@yahoo.com

Pengembangan PAS Berbasis Web

Halaman 30

Anda mungkin juga menyukai