Ebook Pasweb1
Ebook Pasweb1
DENGAN DREAMWEAVER
TAHUN 2009
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
30
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.
Halaman 3
BAB II
PENGANTAR PENGEMBANGAN 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.
Halaman 4
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.
Halaman 5
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 :
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).
Halaman 7
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:\
4.1.3 Jalankan Xampp Control Panel Jalankan file xampp-control hasil auto extrak sebagai control panel pengendali layanan-layanan yang ada dalam Xampp.
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).
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
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
Halaman 12
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.
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
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.
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.
tahapan
berikutnya, membuat koneksi Dreamweaver dengan database (PAS) yang akan di contohkan pengembangannya dalam versi web pada bab berikutnya.
Halaman 16
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 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
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.
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)
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
Halaman 19
Jika proses pembuatan recordset data siswa absensi dilakukan dengan benar, maka pada Panel Application akan tampil seperti gambar 21.
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
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.
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 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
Halaman 28
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
Halaman 30