ebook pasweb1

31
 PENGEMB AN GAN PAS B ER B A SI S W EB  DENGAN DREAMWEAVER DEPARTEMEN PENDIDIKAN NASIONAL DIREKTORAT JENDRAL MANAJEMEN PENDIDIKAN DASAR DAN MENENGAH DIREKTORAT PEMBINAAN SEKOLAH MENENGAH ATAS DISUSUN OLEH NANANG ARIEF S, ST – [email protected] TAHUN 2009 

Upload: faisalohm

Post on 10-Jul-2015

70 views

Category:

Documents


1 download

TRANSCRIPT

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

[email protected]