Aplikasi Web Pendaftaran Dan Pembayaran Dengan Teknologi
Ajax Pada SD Muhammadiyah 15 Surabaya
SKRIPSI
Diajukan Oleh :
ABDUL AZIZ 0634010278
JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWA TIMUR
ii
Alhamdulillah, Penulis bersyukur kepada Allah SWT atas semua Rahmat, Taufik, dan Hidayah-Nya yang telah diberikan kepada penulis sehingga dapat menyelesaikan Skripsi ini dengan baik.
Dalam menyelesaikan Skripsi ini, penulis berpegang pada teori serta bimbingan dari para dosen pembimbing Skripsi. Dan berbagai pihak yang banyak membantu hingga terselesaikannya Skripsi ini. Skripsi merupakan salah satu syarat bagi mahasiswa untuk menyelesaikan program studi Sarjana Strata Satu (S-1) di Jurusan Teknik Informatika Fakultas Teknologi Industri Universitas Pembangunan Nasional “Veteran” Jawa Timur.
Terwujudnya Skripsi ini adalah berkat usaha, kerja keras serta dukungan dari berbagai pihak. Dan tanpa menghilangkan rasa hormat, penulis mengucapkan banyak terima kasih kepada pihak-pihak yang telah membantu penulis antara lain:
1. M. Irwan Afandi,ST, M.Sc Selaku Wakil Jurusan Sistem Informasi UPN “Veteran” Jawa Timur dan dosen pembimbing I yang telah giat meluangkan banyak waktu untuk memberikan arahan, ilmu.
iii
3. Bapak dan Ibu dosen Teknik Informatika yang telah memberikan ilmunya kepada penulis selama kuliah.
4. Ayahanda tercinta, yang merupakan lelaki terhebat yang pernah aku temui dan ibunda tersayang yang juga merupakan perempuan yang kesabarannya tiada bandingnya didunia ini. Adik dan kakak yang sangat menyayangi aku, terima kasih atas semuanya, aku tidak akan bisa seperti ini tanpa keluargaku. Aku beruntung terlahir dikeluarga ini,,,
5. Teman-teman kuliah khususnya,,,,,Mas andi makasih banyak waktunya buatku, toni, taufik, adam dan dapit makasih semua bantuannya, partner PKLku donny dan hanif, genk genkku selama kuliah asrofi, doni, bowo, dapit, wahyu, jempoll, broto, mamik, dan teman-teman lain yang tak bisa disebutkan satu persatu makasih semua atas persahabatan yang begitu indah selama kuliah……anak-anak IK angkatan 07 deddy, faris, ipam DKK, kuliah……anak-anak-kuliah……anak-anak TF lainnya angkatan 07 mbah ,menotz, tony, rizal, ibet, wahyu, aping, DKK makasih semua atas bantuan semangat dan doanya, sukses bwt semuanya,,,,,
6. Teman- teman mahasiswa dan teman-teman diluar kampus yang tak bisa saya sebutkan satu persatu,,,,,terimakasih atas semua dukungan selama ini dan terimakasi atas pertemanannya……
iv
Surabaya, Nov 2010
Muhammadiyah 15 Surabaya Pembimbing I : M. Irwan Afandi,ST, M.Sc Pembimbing II : Rizky Parlika, S.Kom Penyusun : Abdul Aziz
ABSTRAK
Dalam kegiatan belajar mengajar di SD Muhammadiyah 15 Surabaya proses sistem administasi sekolah disana masih mengunakan sistem manual terutama pada pelayanan pendaftaran. Kenapa aplikasi yang dibuat adalah pendaftaran dan pembayaran, fokusnya pendaftaran ini menjadi pintu masuk siswa untuk memulai awal dari berjalanya proses administrasi siswa.
Dengan aplikasi ini sekolah dapat membantu untuk melakukan proses – peoses sekolah yang dapat dilakukan dengan komputerisasi. Di dalam sistem ini terdapat beberapa menu aplikasi yaitu pendaftaran siswa secara online dan management pembayaran siswa. Sehingga untuk pendaftaran murid baru orang tua dapat mendaftarkan anaknya dengan mengakses sistem ini. Sistem ini dibuat dengan berbasis aplikasi web desktop dengan mengunakan beberapa beberapa komponen. Php adalah merupakan salah satu bahasa pemrograman berbasis web yang banyak digunakan saat ini yang berguna untuk membuat web dinamis. My
sql merupakan software yang tergolong sebagai DBMS (Database Management
System) yang bersifat Open Source dan mengunakan teknologi ajax agar tampilan
system ini bersifat user friendly dan efisien.
Aplikasi ini merupakan sarana untuk memproses administrasi pada SD Muhammadiyah 15 Surabaya yang bertujuan menunjang efisiensi dalam menangani proses pendaftaran siswa baru dan pembayaran siswa.
Kata kunci : ajax, php dan Sistem Informasi.
1.1 Latar Belakang Masalah
Perkembangan informasi teknologi saat ini berkembang dengan pesat. Penggunaan website dalam menyampaikan informasi sangatlah membantu dan bermanfaat bagi lembaga-lembaga atau perusahaan-perusahaan. Penyampaian informasi dengan website tidak membutuhkan waktu yang lama dan dapat dilakukan darimana saja. Tidak dibatasi oleh tempat,waktu dan biaya. Proses mendapatkan informasi dari website juge lebih up to date. Informasi yang ditampilkan dan disajikan dapat berubah seiring jalannya waktu sehingga informasi yang disajikan tidak ketinggalan zaman atau terlambat. Kemudahan ini yang membuat website sebagai sarana informasi yang digemari user saat ini.
Salah satu contoh dalam kegiatan di SD Muhammadiyah Surabaya. Di sini banyak proses yang berkaitan dengan siswa. Seperti proses penilaian siswa, keuangan siswa, administrasi pepustakaan, administrasi keuangan, absensi siswa, absensi guru, absensi karyawan, aplikasi bk dan lain – lain. Dengan memanfaatkan teknologi sekarang diharapkan dapat membantu proses – proses yang ada SD Muhammadiyah Surabaya secara komputerisasi. Dengan adannya pembuatan system ini diharapkan semua proses – proses yang ada di SD Muhammadiyah Surabaya dapat diatasi dengan tepat dan cepat. Bagi pengelola sekolah guru serta karyawan sistem ini dapat memberikan contoh langsung salah satu penerapan dan manfaat Teknologi Informasi di kehidupan sehari-hari,
menyederhanakan dan mempermudah administrasi sekolah dan mempercepat pelayanan terhadap siswa maupun pihak – pihak yang terkait.
Dengan demikian proses – proses tersebut perlu di tata dan dikelompokan sesuai dengan menunya masing – masing. Aplikasi ini dibuat dengan mengunakan pemograman web dinamis mengunakan php, database My Sql dan Ajax. Untuk membangun website yang bersifat dinamis, diperlukan penggunaan script yang bersifat server-side, seperti PHP. Script PHP ini dapat diakses multi platform. Pada pemrograman yang menggunakan server-side script, terdapat fungsi-fungsi yang berbeda, sehingga dapat membentuk sebuah website yang bersifat dinamis. My sql merupakan software yang tergolong sebagai DBMS (Database
Management System) yang bersifat Open Source. Open Source menyatakan
bahwa software ini dilengkapi dengan source code dan bersifat gratis.dengan my sql ini bertujuan agar perpindahan data tersebut efisien dan aman. Asynchronous
JavaScript and XMLHTTP, atau disingkat Ajax, adalah suatu teknik pemrograman
1.2 Perumusan Masalah
Berdasarkan latar belakang yang dipaparkan di atas, maka dapat dirumuskan permasalahan dari Tugas Akhir adalah sebagai berikut :
1. Bagaimana mambangun aplikasi pendaftaran siswa baru dan pembayaran siswa.
2. Bagaimana membuat sebuah aplikasi sehingga semua proses dapat di integrasikan di dalam satu aplikasi yang utuh yang dapat dilakukan secara komputerisasi dan juga dapat diakses secara online.
3. Bagaimana cara menampilkan interface yang mudah dimengerti oleh
user (user friendly)?
1.3 Batasan Masalah
Agar tidak terlalu menyimpang dari rumusan masalah yang telah penulis buat, maka dalam pembuatan Tugas Akhir ini, ruang lingkup permasalahan hanya akan dibatasi pada:
1. Aplikasi ini hanya terdapat dua proses. Yaitu proses pendaftaran siswa baru dan proses pembayaran pada siswa.
2. Bagaimana membuat aplikasi pendaftaran yang dapat di akses secara online melalui media internet.
3. Sistem yang dibuat untuk aplikasi sistem ini mengunakan bahasa pemrograman PHP, AJAX dan MySQL 5.1 sebagai databasenya.
1.4 Tujuan
Mengacu pada perumusan masalah, tujuan yang hendak dicapai dalam penyusunan Tugas Akhir ini adalah :
1. Untuk meningkatkan dan memperbaiki mutu standar pelayanan administrasi di Muhammadiyah 15 Surabaya
2. Untuk membangun suatu sistem pendaftaran dan pembayaran siswa, sehingga menghasilkan data yang reliability juga aman, sehingga proses data sekolah dapat dikelola dengan baik oleh SD Muhammadiyah 15 Surabaya.
1.5 Manfaat
Manfaat dari Tugas Akhir “Aplikasi Web Pendaftaran dan Pembayaran Dengan Teknologi Ajax Pada SD Muhammadiyah 15 Surabaya” ini terbagi menjadi 3 yaitu bagi siswa, bagi sekolah dan bagi penulis adalah sebagai berikut:
a. Bagi Siswa
Mempermudah memperoleh dalam pendaftaran dan pembayaran keuangan siswa secara cepat dan efisisen. Pengenalan aplikasi sistem komputer lebih dini
b. Bagi Sekolah
c. Bagi Penulis
Dapat dijadikan suatu perbandingan antara penggunaan framework dengan CMS, sehingga dapat menambah wawasan yang sangat penting bagi penulis di masa yang akan datang.
1.6 Sistematika Penulisan
Sistematika yang digunakan dalam penulisan skripsi ini dibagi dalam beberapa bab dan sub bab. Adapun pembagian babnya adalah sebagai berikut:
Bab I Pendahuluan
Berisi latar belakang yaitu uraian tentang landasan pemikiran timbulnya suatu masalah yang mendorong untuk melakukan penelitian,perumusan masalah, pembatasan masalah, tujuan, manfaat, metodologi penulisan dan sistematika penulisan yang digunakan dalam laporan skripsi ini.
Bab II Tinjauan Pustaka
Pada bab kedua akan dijelaskan mengenai landasan teori yang terkait dengan skripsi ini. Semua penjelasan meliputi pembahasan bahasa pemrograman PHP,Ajax , dan MySQL.
Bab III Analisa Dan Perancangan Sistem
yang akan dibuat. Dari sini akan terlihat bagaimana alur dari sistem nantinya yang akan dibuat.
Bab IV Uji Coba
Bab ini menjelaskan mengenai lingkungan uji coba, skenario uji coba dan pelaksanaan uji coba.
BAB V Penutup
Pada bab kelima berisi kesimpulan dari program yang telah diimplementasikan dan dievaluasi sehingga pada akhirnya diberikan beberapa kemungkinan untuk pengembangan dari aplikasi yang dibuat serta saran.
2.1 Bahasa Pemrograman PHP
PHP merupakan bahasa interpreter yang hampir mirip dengan bahasa C dan perl yang memiliki kesederhanaan dalam perintah. PHP dapat digunakan bersamaan dengan WML sehingga pembangunan situs web site dapat dilakukan dengan cepat dan mudah. PHP dapat digunakan untuk memperbarui
(meng-update) database, menciptakan database, dan mengerjakan perhitungan
matematika. Menurut dokumen resmi PHP, PHP adalah singkatan dari Hypertext Preprocessor.
PHP merupakan bahasa scripting (berbentuk script) yang menyatu dengan HTML dan dijalankan pada server side. Artinya semua sintaks yang penulis berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser (client side) hanya hasilnya saja. Secara khusus, PHP
dirancang untuk membangun sebuah web dinamis. Artinya, ia dapat membentuk suatu tampilan berdasarkan permintaan yang up to date. Misalnya penulis bisa menampilkan isi database ke dalam halaman web. Pada prinsipnya , PHP
mempunyai fungsi yang sama dengan scipt-script seperti ASP (Active Server Page), Cold Fusion dan lain-lain. Untuk menjalankan PHP dibutuhkan web server. Yang sering digunakan adalah Apacheweb server.
( Sumber : http://komunitaskita.net/apa-itu-php/ ,diakses pada tanggal 01 Oktober 2010, Pukul 06.05 WIB )
2.1.1 Dasar – Dasar PHP
PHP dijalankan dalam file berekstensi .PHP, .PHP3 atau .phtml, tetapi secara umum ekstensi file PHP adalah (.PHP). Kode PHP menyatu dengan tag – tag HTML dalam satu file. Kode PHP diawali dengan tag <? atau <?PHP dan ditutup dengan ?>.
PHP diawali sebagai berikut :
Gambar hasil dari eksekusi dari file contoh1.php, seperti yang terlihat pada gambar dibawah ini (Gambar 2.1) :
Gambar 2.1. Hasil dari file contoh 1.PHP
Gambar 2.1 adalah hasil ketika di running di web browser pada localhost. (Sumber : http://fernandositindaon.info/komputer/mengenal-dasar-dasar-php
2.1.2 Kelebihan PHP
PHP terkenal dengan mempunyai 4 kelebihannya yaitu 4P (Four Pee) :z 1. Practical / Praktis
PHP adalah bahasa pemrograman yang sangat longgar dalam penulisan, dan ini meningkatkan kepraktisan buat para penggunanya. Misalnya saja programmer tidak diharuskan untuk menuliskan atau menghapus variabel. Walaupun kadang mereka juga tidak bisa mengatakan dengan mudah yang kemudian dipanggil dalam sebuah skrip, menebak formula terbaik dalam penetapan variabel secara otomatis kemudian menghapus variabel dan dan mengembalikan resource ke sistem setelah skrip berhasil di eksekusi. Pada akhirnya, PHP mampu membuat programmer lebih berpikir pada tujuan akhir dari project yang akan dibuat.
2. Power
Sudah menjadi rahasia umum kalau PHP mampu membuat halaman dinamis, memanipulasi form, dan dapat dihubungkan dengan database. Selain yang disebutkan tadi, ternyata PHP juga dapat melakukan hal – hal di bawah ini : a. Membuat dan memanipulasi file Macromedia Flash, gambar, dan Portable
Document Format PDF. b. Berkomunikasi dengan LDAP.
c. Berkomunikasi dengan banyak protocol, termasuk IMAP, POP3 dan NNTP. d. Berkomunikasi dengan Credit-Card Processing Solution.
2.1.3 Definisi MySql
Berikut ini akan dijelaskan mengenai beberapa definisi MYSQL untuk memperjelas pengertian tentang software ini :
a. MYSQL adalah sistem pengaturan relational database.
Suatu relational database, menyimpan data dalam bentuk tabel-tabel yang kemudian akan diletakkannya semua data dalam satu ruang penyimpanan yang besar.
b. MYSQL adalah Open Source Software (perangkat lunak).
Open Source artinya bahwa software tersebut memungkinkan untuk
digunakan dan dimodifikasi oleh siapa saja.
c. MYSQL menggunakan GPL (GNU General Public License)
Untuk menentukan apakah seseorang memenuhi persyaratan untuk menggunakan software tersebut dalam situasi yang berbeda. Jika seseorang merasa tidak nyaman dengan GPL atau ingin menggunakan MYSQL untuk aplikasi bisnis, maka orang tersebut dapat membeli lisensi yang bersifat komersial.
(Sumber:http://www.edisetiawan.co.cc/index.php?pilih=news&mod=yes&aksi=li hat&id=50 ,diakses pada tanggal 01 Oktober 2010 pukul 19.30 WIB)
2.1.4 Koneksi Database MySql dengan PHP
Berikut penulisan fungsi script untuk koneksi ke dalam database MySql :
1. MySql_connect()
2. MySql_select_db()
Perintah ini digunakan untuk memilih database yang ada di server MySql, fungsi ini memiliki format penulisan sebagai berikut.
mysql_select_db (nama_database, pengenal_koneksi) ; 3. MySql_query()
Perintah ini digunakan untuk melakukan query atau menjalankan permintaan terhadap sebuah tabel atau sejumlah tabel database, fungsi ini memiliki format penulisan sebagai berikut.
mysql_query (permintaan, pengenal koneksi) ;
( Sumber : http://supono.wordpress.com/2007/08/12/koneksi-php-ke-mysql/ , diakses pada tanggal 01 Oktober 2010 pukul 20.00 WIB )
2.1.5 Kelebihan MySQL
MySQL merupakan Relational Database Management System (RDBMS) yang didistribusikan secara gratis di bawah lisensi GPL (General Public License). Dimana setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat closed source atau komersial.
MySQL sebenarnya merupakan turunan salah satu konsep utama dalam database sejak lama, yaitu SQL (Structured Query Language).
SQL (Structured Query Language) adalah sebuah konsep operasi
Sebagai database server, MySQL dikatakan lebih unggul dibandingkan
database server lainnya dalam query data. Hal ini terbukti untuk query yang dilakukan oleh single user, kecepatan queryMySQL bisa sepuluh kali lebih cepat dari PostgreSQL dan lima kali lebih cepat dibandingkan Interbase. Selain itu
MySQL memiliki keistimewaan, antara lain :
a. Open Source. MySQL didistribusikan secara open source (gratis), di bawah lisensi GPL (General Public License).
b. Multi user. MySQL dapat digunakan oleh beberapa user dalam waktu yang bersamaan tanpa mengalami masalah atau konflik.
c. Column types. MySQL memiliki tipe kolom, seperti signed/unsigned integer, float, double, char, text, date, timestamp, dan lain-lain.
d. Command dan functions. MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah Select dan Where dalam query.
e. Clients dan tools. MySQL dilengkapi dengan tools yang dapat digunakan untuk administrasi database.
f. Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani alter table.
(Sumber :http://f4bregaz.blogspot.com/2009/02/tentan-mysql.html, diaskes pada tanggal 01 Oktober 2010 pukul 20.05 WIB )
2.2 Mengenal DBMS
DBMS (Database Management System) merupakan perangkat lunak atau program komputer yang dirancang secara khusus untuk memudahkan pengelolaan
database. Sedangkan, RDBMS (Relational Database Management System)
Secara sederhana, database (basis data) dapat di ungkapkan sebagai suatu pengorganisasian data dengan bantuan komputer, yang memungkinkan data dapat di akses dengan mudah dan cepat. Dalam hal ini, pengertian akses dapat mencakup pemerolehan data maupun pemanipulasian data, seperti menambah dan menghapus data.
Manajemen modern mengikutsertakan informasi sebagai sumber daya penting yang setara dengan sumber daya manusia, uang, mesin, dan material. Bagi pihak manajemen, informasi merupakan bahan untuk pengambilan keputusan. Dengan adanya komputer, data dapat disimpan dalam media pengingat yang disebut hard disk. Dengan media ini, kehadiran kertas yang digunakan untuk menyimpan data dapat dikurangi. Selain itu, data menjadi lebih cepat untuk di akses, terutama apabila di kemas dalam bentuk database.
Gambar 2.2. Mekanisme pengaksesan MySQL melalui Web browser
Gambar 2.2 ini menjelaskan tentang alur dari web server di proses ke middle ware yaitu asp, jsp atau php dan di proses dengan database MySQL.
(Sumber :
http://desi-asrianty.blogspot.com/2010/02/mengenal-dbms-database-management.html , diakses pada tanggal 01 Oktober 2010 pukul 20.10 WIB )
2.3 Mengenal Web Server
Web server adalah sebuah perangkat lunak server yang berfungsi
web browser, dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman
web yang umumnya berbentuk dokumen HTML. Web server yang terkenal di antaranya adalah Apache dan Microsoft Internet Information Service (IIS).
Apache (server HTTP Apache atau server web/www Apache) adalah web server yang dapat di jalankan di banyak sistem operasi (Unix, BSD, Linux,
Microsoft Windows, dan Novell Netware) yang berguna untuk melayani dan
memfungsikan web. Protokol yang di gunakan untuk melayani fasilitas web/www ini menggunakan HTTP Hypertext Transfer Protocol merupakan protokol yang berguna untuk mengirim data dari web server ke web browser Protokol ini mengirim dokumen web yang ditulis atau berformat HTM. Contoh tampilan atau tulisan http pada saat sedang menjelajahi internet, yaitu sebagai berikut. http://www.Coolfree.com.
Sedangkan, definisi dari IIS atau Internet Information Server adalah sebuah HTTP web server yang di gunakan dalam sistem operasi server Windows, mulai dari Windows NT 4.0 Server, Windows 2000 Server atau Windows Server 2003. Layanan ini merupakan layanan terintegrasi dalam Windows 2000 Server, Windows Server 2003 atau sebagai add-on dalam Windows NT 4.0. Layanan tersebut berfungsi sebagai pendukung protokol TCP/IP yang berjalan dalam lapisan aplikasi (application layer). IIS juga menjadi fondasi dari platform
Internet dan Intranet Microsoft, yang mencakup Microsoft Site Server, Microsoft
CommercialInternet System dan produk-produk Microsoft BackOffice lainnya. 2.3.1 World Wide Web (WWW)
sekumpulan komputer yang terintegrasi satu sama lainnya dengan menggunakan jaringan telekomunikasi yang rumit sehingga mereka dapat berkomunikasi dengan cepat. Dalam World Wide Web dikenal istilah client-server, yaitu merupakan hubungan komunikasi yang dibangun antara web site sebagai sumber informasi dan client sebagai pengguna komputer.
World Wide Web (WWW) merupakan layanan yang terdapat didalam internet, dalam WWW ini dimungkinkan untuk membuat halaman web yang terdiri dari teks, suara, gambar, animasi ataupun gambar video sekalipun.
2.3.2 Hypertext Transfer Protocol (HTTP)
Hypertext Transfer Protocol (HTTP) merupakan protokol yang berguna untuk mengirim data dari web server ke web browser. Protokol ini mengirim dokumen web yang ditulis atau berformat HTM. Contoh tampilan atau tulisan http pada saat sedang menjelajahi internet, yaitu sebagai berikut. http://www.Coolfree.com.
Dengan tulisan tersebut http akan langsung mengirim alamat web kedalam web browser guna menampilkan skrip-skrip yang ada dalam web tersebut. Sehingga surfer yang menulis alamat tersebut dengan sendirinya akan melihat informasi-informasi yang ditampilkan oleh web yang ditulis alamatnya yaitu Microsoft.
2.3.3 Web Server
web server jika komputer tersebut memiliki suatu program server yang disebut Personal Web Server (PWS). PWS ini difungsikan agar halaman web yang ada di dalam sebuah komputer server dapt dipanggil oleh komputer client Macam-macam web server :
1. Apache (Open Source) 2. Xitami
3. IIS 4. PWS
2.4 CSS
Dengan menggunakan CSS, kita dapat menambahkan style kedalam halaman HTML. Secara umum, CSS (Cascading Style Sheet) berfungsi untuk menjembatani kelemahan HTML saat harus menciptakan desain web yang kaya unsur, seperti desain link yang tanpa garis, tidak selalu berwarna biru, posisi teks yang bisa diatur sedemikian rupa tanpa harus menggunakan tabel, dan lain sebagainya.
2.4.1 Tentang CSS
CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
2.4.2 Keuntungan menggunakan CSS
2. Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
3. Mempercepat proses rendering/pembacaan HTML. 2.4.3 Cara penulisan CSS
1. Inline style sheet: penulisan didalam elemen HTML
2. Embedded Style Sheet: penulisan CSS didalam dokumen HTML dan menggunakan tag <style></style>
3. Linked Style Sheet: penulisan skrip CSS dihalaman berbeda atau terpisah dari html.
2.4.4 CSS Background
Property background. Background-color Contoh:
Body {
Background-color : green; }
2.4.5 CSS Font
Property Font. Font-family P {
Font-family : Arial,Helvetica; }
2.4.6 CSS Teks Property teks color
color :red; }
2.4.7 CSS List Property list
List-style-type(nilai:disc,circle,square,lower-roman,upper-roman,none, lower- alpha,upper-alpha)
Ul {
List-style-type : disc ;} 2.4.8 CSS Border
Property Border
border-style(nilai:none,dotted,dashed,solid,double,groove,ridge,inset, outset)
.b1 {
Border-style-type : groove ;} 2.4.9 Margin dan Padding
Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web Body {
Margin-top : 4cm; Margin-right : 3cm; Margin-bottom :3cm; Margin-left : 4cm;}
2.5 Ajax
AJAX memiliki kepanjangan Asynchronous Javascript And XML
merupakan suatu teknik baru dalam dunia web. Sejak telah dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan web programmer.
Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll.
Proses ajax berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web.
Pada mekanisme biasa, respon yang dihasilkan oleh server berupa HTML yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini akan membutuhkan lebih banyak waktu dan byte data untuk melakukan load daripada XML.
Gambar 2.3 menjelaskan php request pada server dan diresponse mengunakan html
Gambar 2.4. proses php request beserta xml dan ajax
Dengan demikian AJAX ini merupakan teknologi baru yang merupakan hasil perkawinan sempurna antara client side programming (Javascript) dan server side programming.
AJAX tidak hanya dapat diimplementasikan menggunakan PHP, namun juga server side programming yang lain, seperti ASP, JSP dsb.Sedangkan kekurangan AJAX dibandingkan mekanisme biasa adalah memiliki tingkat kesukaran pemrograman yang lebih tinggi, karena programmer harus menguasai 4 hal yaitu HTML-(XHTML), Javascript, XML dan juga server side programming. (Sumber : http://nahwan-erlingga.blogspot.com/2009/04/apa-itu-ajax.html
,diakses pada tanggal 01 Oktober 2010 pukul 20.40 WIB )
2.6 XML
dinyatakan dalam tag pembuka issal <form name=”isidata”>). Hanya bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai didalamnya, serta nama tagnya harus sesuai standard yang ada. Sedangkan pada XML kita bisa menggunakan tag dan menamainya sesuai kehendak kita. XML sering digunakan untuk mendeskripsikan suatu obyek beserta propertinya.
(Sumber : http://satiman.blogspot.com/2007/05/apa-itu-xml.html , diakses pada tanggal 01 Oktober 2010 pukul 20.55 WIB)
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
Aplikasi yang akan dibuat pada skripsi ini merupakan sebuah aplikasi web pendaftaran online dan pembayaran. Data data yang di olah berupa data siswa. Data tersebut akan di olah oleh bagian kurikulum di SD Muhammadiyah 15 Surabaya.
Dari analisa permasalahan yang telah dilakukan maka akan dirancang suatu aplikasi dengan melakukan perancangan dan pembuatan diagram. Hal tersebut dilakukan untuk menggambarkan arus data dalam aplikasi secara terstruktur dan jelas, serta menggambarkan proses yang terjadi pada aplikasi, sehingga dapat menjadi sarana dokumentasi sistem yang baik
Cara kerja dari “Aplikasi Web Pendaftaran Online dan Pembayaran di SD Muhammadiyah Surabaya berbasis Teknologi Ajax” berbasis php, ajax dan mengunakan mysql sebagai databasenya. Wali murid harus terdaftar terlebih dahulu sebagai anggota, perbedaannya pada hak akses yang akan dijelaskan kemudian. Setelah terdaftar maka akan dapat melakukan sesuai wewenang sesuai peran masing – masing.
3.2 Analisis Kebutuhan
3.2.1 Spesifikasi Kebutuhan Sistem
Spesfikasi kebutuhan sistem aplikasi menjelaskan mengenai level pengguna aplikasi dan hak aksesnya serta masukan dan keluaran sistem aplikasi.
A. Level Pengguna Dan Hak Akses
Dalam pengguna aplikasi ini di bagi menjadi 4 level, yaitu : user ( anggota), admin menu pendaftaran, super admin dan admin menu keuangan.
1. User disini dapat mengunakan sejumlah layanan yang tersedia melalui
web browser. Namun user ini dibatasi hanaya dapat mengedit data
anggota, memasukan data siswa, upload foto siswa dan cetak pendaftaran siswa. Layanan ini bisa di akses jika wali murid telah melalui proses registrasi dan login.
2. Admin pendaftaran dapat mengunakan sejumlah layanan tersedia melalui web browser, admin dapat melakukan penambahan data siswa, melihat data siswa, pengubahan data siswa,cetak data siswa dan hapus data siswa. Layanan ini bisa di akses jika admin telah melalui proses registrasi dan login.
3. Admin keuangan dapat mengunakan sejumlah layanan tersedia melalui
web browser, admin dapat melakukan penambahan pembayaran siswa,
melihat pembayaran siswa, pembayaran data siswa,cetak pembayaran siswa dan hapus pembayaran siswa. Layanan ini bisa di akses jika admin telah melalui proses registrasi dan login.
4. Admin dapat mengunakan sejumlah layanan tersedia melalui web
browser, admin dapat melakukan penambahan user, melihat user,
B. Masukan Dan Keluaran Sistem
Masukan sistem aplikasi terdiri atas sejumlah data yang di perlukan untuk memenuhi kebutuhan sistem aplikasi yang ada. Sedangkan keluaran sistem aplikasi terdiri atas sejumlah data yang dihasilkan oleh proses yang terjadi di dalam sistem.
Dalam sistem aplikasi ini masukkan data meliputi form aplikasi serta link-link yang telah di beri parameter sebelumnnya. Masukan dikirimkan oleh user atau admin untuk meminta layanan kepada sistem aplikasi. Proses pengolahan data akan dilakukan sesuai dengan isi form tersebut. Sedangkan keluaran aplikasi terdiri atas sejumlah tampilan web. Tampilan web yang dikakses user akan menghsilkan data hasil proses masukkan yang kemudian dapat dilihat pada web
browser dan internet.
3.3 Perancangan Sistem
Pada bab ini akan menjelaskan mengenai proses desain dari system yang akan dibuat. Proses desain bab ini di bagi menjadi 5 tahapan yaitu : deskripsi umum sistem, spesifikasi kebutuhan sistem, perancangan proses, perancangan basis data dan perancangan antar muka.
3.3.1 Deskripsi Umum sistem
Tabel 3.1 Flowchart Alur Administrtor Pada Sistem
Keterangan :
Tabel 3.2 Flowchart Alur Pendaftaran Pada Sistem
Keterangan :
Tabel 3.3 Flowchart Alur Keuangan Pada Sistem
Keterangan :
Tabel 3.4 Flowchart Alur Pendaftaran user Pada Sistem
Keterangan :
Tabel 3.5 Flowchart Alur Anggota Pada Sistem
Keterangan :
3.3.2 Perancangan Proses
Data Flow Diagram (DFD) dapat digunakan sebagai alat perancangan
sistem yang berorientasi pada alur data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran analisa maupun rancangan sistem.
3.3.2.A Context Diagram
Context Diagram menjelaskan gambaran umum mengenai sistem dan
entitas eksternal yang berinteraksi dengan sistem serta arah informasi yang masuk dan keluar antara entitas luar dengan sistem. Jadi pada contect diagram ini dapat di lihat entitas – entitas dan proses yang terjadi seperti pada gambar berikut :
tgl lahiralamat
Gambar 3.1. Context Diagram
Pada diagram contex terdapat 2 entitas yang terlibat dalam sistem, yaitu : user ( wali murid) dan admin (guru, bagian kurikulum ).
Admin berinteraksi dengan sistem antara lain : memasukan data login, memasukan data siswa, dan memasukan data pembayaran siswa.
Tabel 3.6 Entitas sistem
No Entitas Definisi
1 Admin Terdiri dari karyawan TU ( bertugas mengentri data siswa dan pembayaran siswa ) kedalam sistem aplikasi
2 User (wali murid)
Pengunjung dapat registrasi.lalu dapat mengisi siswa baru dan mendapat data dari sistem aplikasi
Dari tabel tesebut dapat dilihat bahwa ketiga entitas tersebut memiliki peranan masing – masing dalam sistem aplikasi ini, antara lain :
1. Admin : mengentri data – data sekolah terdiri dari data siswa dan data pembayaran siswa.
B. DFD Level 0
data pembayaran data pembayaran data pendaftaran
data pembayaran dari dfd level o
tgl lahir
C. DFD Level 1 Pendaftaran
data muriddata murid data murid data muriddata murid
data muridFlow_529 data muriddata murid
tgl lahir
upload data data murid223 pendaftaran : 1
pendaftaran : 2
pendaftaran : 3
Keterangan :
dari level 0 pada proses pendaftaran diturunkan ke level 1. Pada Setelah
D. DFD Level 1 Pembayaran
Keterangan :
dari level 0 pada proses pembayaran diturunkan ke level 1. Pada
.3.3 Perancangan Basis Data
meliputi model data konseptual dan model data
A. Model Data Konseptual
egrasi dengan database MySql. Pembuatan
entitas.
Setelah
DFD level 1 ini guru dapat menyimpan data pembayaran. Data ini akan dimasukan pada tabel pembayaran pada database. Setelah itu proses kedua adalah mencetak kwitansi. Mencetak kwitansi ini data dapat diambil dari tabel – tabel pembayaran yang mana telah di isi melalui proses penyimpanan data pembayaran. Dan setelah itu dapat ke proses membuat laporan untuk mencetak laporan pembayaran.
3
Perancangan basis data ini
fisik. Model data konseptual memodelkan struktur logis dari keseluruhan aplikasi data, tidak tergantung pada perangkat lunak atau pertimbangan model struktur data. Sedangkan model data fisik memodelkan struktur fisik dari database, dengan mempertimbangkan perangkat lunak sistem manajemen basis data serta model struktur yang akan di gunakan. Hasil dari data model fisik merupakan hasil generate dari data model kpnseptual.
Model data fisik yang terint
memiliki o catatan Variable characters (250)
login
B. Model Data Fisik
Model data Ko enerate pada model
ambar 3.5.
nseptual pada aplikasi ini adalah hasil g data konseptual pada G
kegemaran_siswa
3.3.4 Perancangan Antar Muka
Perancangan man aplikasi yang
una sistem aplikasi. Pada aplikasi ini terdapat antarm
at
ser name, password, alamat, tempat, tanggal lahir dan nomor
terdapat proses registrasi dengan memas
antar muka merupakan perancangan hala berinteraksi langsung dengan pengg
uka yang digunakan user dan admin mengunakan aplikasi berbasis web. User ( wali murid ) saat pertama kali mengskses sistem ini pada browser, antar muka yang disediakan adalah halaman index. Pada halaman index terdap halaman daftar melalui tulisan daftar dan juga terdapat halaman login melalui tulisan daftar. Sedangkan admin saat pertama kali mengaskse sistem aplikasi webnya pada web browser , pertama halaman yang di sediakan adalah halaman index,fungsinya sama dengan halaman index user yaitu keduanya mencantumkan link yang berupa tulisan login bila di klik akan muncul form untuk login dan langsung ke halaman login.
Pada halaman daftar user seorang wali murid dapat melakukan proses registrasi dan mengisi data u
telepon. Setelah mendaftar anggota dapat memasukan username dan password untuk proses otentifikasi login user maka user akan berpindah ( ber link) kelahalaman menu anggota yang berisikan data anggota, data siswa baru, upload foto ,upload ijazah dan cetak pendaftaran siswa.
Sedangkan admin akan login harus sudah teradaftar juga. Dengan mendaftar pada menu admin user. Di menu ini
siswa. Di dalam menu keuangan terdapat menu – menu yang akan dipilih seperti lihat data – data pembayaran, tambah data pembayaran, edit data, hapus data pembayaran, rekap pembayaran dan lihat grafik pembayaran.
A. Perancangan Antarmuka User
Setelah melalui index user di hadapkan dengan halaman daftar. Di masukan berupa username, password, nama, jenis ke
halaman daftar wali murid harus me
lamin, tempat dan tanggal lahir, alamat dan no telepon.setelah daftar maka akan pindah ke halaman login dengan memasukan username dan password, kemudian aplikasi akan mencocokan dengan data siswa yang terdapat pada basis data yang apabila login valid maka akn muncul menu pilihan yang dapat digunakan untuk mendaftarakan siswa baru.
Tabel 3.7 Menu Untuk User Anggota
No Menu Kegunaan
1 Daftar Untuk mendaftarkan anggota baru 2 Login Form aplikasi login
3 Tambah data siswa baru
Untuk mendaftarkan siswa baru
4 Ubah data Untuk mengubah data record 5 Upload foto siswa Untuk memasukan foto siswa baru 6 Upload foto ijazah Untuk memasukan foto ijazah siswa baru 7 lihat Untuk melihat data siswa
8 cetak Untuk mencetak pendaftaran
B erancang armuka B kut adalah erancan
ftaran . P an Ant Admin Pendaftaran
eri tabel p gan antar muka admin pendaftaran : Tabel 3.8 Menu Admin Penda
No Menu Kegunaan
1 Login Form aplikasi login 3 Tambah data siswa
baru
Untuk mendaftarkan siswa baru
4 Ubah data Untuk mengubah data record
5 Upload foto siswa Untuk memasukan foto siswa baru 6 Upload foto ijazah Untuk memasukan foto ijazah siswa baru 7 lihat Untuk melihat data siswa
8 cetak Untuk mencetak pendaftaran 9 Hapus data Untuk menghapus record siswa
10 Logout Untuk membebaskan / menonaktifkan data session
C rancang rmuka
Berikut adalah tabel perancangan antar m ka admin pendaftaran : yaran . Pe an Anta Admin Pendaftaran
u
Tabel 3.9 Menu Admin Pemba
No Menu Kegunaan
1 Login Form aplikasi login 3 Tambah data
pembayaran
Untuk menambah pembayaran siswa
4 Cetak pembayaran Untuk mencetak kwitansi
siswa
6 Hapus data Untuk menghapus pembayaran siswa 7 Rekap perbulan Untuk rekapan pada bulan tertentu 8 Rekap pertahun Untuk rekapan pada tahun tertentu
9 Grafik Untuk melihat grafik pembayaran pada tahun 10 Tambah tahun Untuk menambahkan tahun pembayaran
11 Tambah
pembayaran
Untuk menambahkan jenis pembayaran
12 Logout Untuk membebaskan / menonaktifkan data session
D erancan armuk
erikut adalah tabel perancangan antar muka admin pendaftaran : kses User . P gan Ant a Admin Hak Akses
B
Tabel 3.10 Menu Admin Hak A
No Menu Kegunaan
1 Login Form aplikasi login
3 Tambah data admin baru
Untuk mendaftarkan admin baru
4 Ubah data Untuk mengubah data record 5 Hapus data Untuk menghapus record
6 Logout Untuk membebaskan / menonaktifkan data session
3.3.5 Implementasi Sistem
bab ini di bagi menjadi 4 bagian, yaitu : lingkungan implementasi basis data,implemetasi antarmuka dan implementasi proses.
3.3.6 Lingkungan Implementasi
Pada bagian lingkungan implementasi ini akan dijelaskan perangkat keras dalam perancangan dan pembuatan aplikasi
b of RAM
oft Windows XP Profesional SP2 (PHP 5, MySql, Apache)
ambar
3.3
Rancangan model data fisik pada bagian perancangan aplikasi di ata MySQL. Keterangan lebih detail dapat di lihat pada tabel – tabel berikut :
dan perangkat lunak yang digunakan
web pendaftaran dan pembayaran berbasis web ini. Perangkat Keras
- Processor Intel Pentium Dual core 2.0 - Memori 512 M
Perangakat Lunak
o Sistem Operasi Micros o XAMPP 1.7
o Mozila firefox (versi 3.6) sebagai web browser o Adobe photosop Cs2 untuk mengolah g
o Macromedia Dreamweaver CS4 o Power Designer versi 15
o Heidi Sql sebagai database editor
.7 Implementasi Basis Data
Tabel 3.11 Basis Data Murid
7 Tanggal_kelahiran Date
8 Agama Varchar (15)
9 kewarganegaraan Varchar (15)
10 Jumlah_saudara_kandung Integer
11 Jumlah_saudara_tiri Integer
12 Jumlah_saudara_angkat Integer
13 Status_anak Varchar (10)
14 Bahasa_dikeluarga Varchar (15)
15 Berat_badan Integer
16 Tinggi_badan Integer
17 Golongan_darah Varchar (3)
18 Penyakit_yang pernah_diderita Varchar (50)
19 Alamat Varchar (50)
20 Nomor_telepon Varchar (15)
21 Bertempat_tinggal_dengan Varchar (20) 22 Jarak_tempat_tinggal_ke_sekolah Integer
23 Fotomurid1 Varchar (30)
Tabel 3.12 Basis Data keterangan Ibu Kandung
No Tabel Kolom Tipe Data Keterangan
7 Tanggal_kelahiran Date
8 Agama_ibu Varchar (15)
9 Kewarganegaraan_ibu Varchar (5)
10 Pendidikan_terakhir_ibu Varchar (7)
11 Alamat_rumah_ibu Varchar (40)
12 Pekerjaan_ibu Varchar (30)
13 Penghasilan_perbulan_ibu Integer 14 Alamat_pekerjaan_ibu Varchar (40)
15 Telp_kantor_ibu Varchar (15)
Tabel 3.13 Basis Data keterangan Ayah Kandung
7 Tanggal_kelahiran Date
8 Agama_ayah Varchar (15)
9 Kewarganegaraan_ayah Varchar (5)
10 Pendidikan_terakhir_ayah Varchar (7)
11 Alamat_rumah_ayah Varchar (40)
12 Pekerjaan_ayah Varchar (30)
13 Penghasilan_perbulan_ayah Integer 14 Alamat_pekerjaan_ayah Varchar (40)
15 Telp_kantor_ayah Varchar (15)
16 Masih_hidup_ayah Varchar (20)
Tabel 3.14 Basis Data keterangan Wali
No Tabel Kolom Tipe Data Keterangan
7 Tanggal_kelahiran Date
8 Agama_wali Varchar (15)
9 Kewarganegaraan_wali Varchar (5)
10 Pendidikan_terakhir_wali Varchar (7)
11 Alamat_rumah_wali Varchar (40)
12 Pekerjaan_wali Varchar (30)
13 Penghasilan_perbulan_wali Integer 14 Alamat_pekerjaan_wali Varchar (40)
Tabel 3.15 Basis Data Kegemaran Siswa
Tabel 3.16 Basis Data Tanda Bukti Pendaftaran
No Tabel Kolom Tipe Data Keterangan
ab ata Pindahan Dar
T el 3.17 Basis D i Sekolah
Tabel 3.18 Basis Data Meninggalkan Sekolah
No Tabel Kolom Tipe Data Keterangan
4 Lanjut_ke_sekolah Varchar (50)
Dari_tingkat1 Varchar (20)
Ke_sekolah Varchar (30)
Ke_tingkat Varchar (30)
Tanggal_keluar_sekolah Varchar (20)
Alasan Varchar (50)
Tabel 3.19 Basis Data Lain_lain
No Tabel Kolom Tipe Data Keterangan
1 Lain_lain Nomor_ induk Char (5) foreign key
2 Lain_lain Varchar (100)
Tabel 3.20 Basis Data login
No Tabel Kolom Tipe Data Keterangan
1 login Id_admin Char (5) Primary_key
2 Username Varchar (20)
3 Password Varchar (20)
4 Letak Varchar (20)
Tabel 3.21 Basis Data Anggota
No Tabel Kolom Tipe Data Keterangan
Tabel 3.22 Basis Data Detail Transaksi
No Tabel Kolom Tipe Data Keterangan
1 Detail_transaksi Id Char (5) foreign key
2 No_transaksi Integer foreign key
Tabel 3.23 Basis Data Pembayaran
No Tabel Kolom Tipe Data Keterangan
1 Pembayaran Id Char (5) Primary_key
2 Nama_pembayaran Varchar(15)
Tabel 3.24 Basis Data Transaksi
Tabel 3.25 Basis Data Keterangan pendidikan
No Tabel Kolom Tipe Data Keterangan
Tabel 3.26 Basis Data Tahun Ajaran
No Tabel Kolom Tipe Data Keterangan
1 Tahun_ajaran Id_ajaran Char (5) Primary_key
2 Tahun Varchar (20)
Tabel – tabel di ata enerate data model
e adi model data fisik yang dalam keterangan tersebut disebutkan juga mary key dan foreign key-nya.
Antar muka admin dan user berbasiskan web. Saat pertama kali mengakses sistem aplikasi, halaman yang tampil adalah halaman index hal ini berlaku untuk halaman index admin yang berbasiskan web dan halaman index user. Pertama – tama yang saya bahas adalah halaman admin tujuan penggunaan sistem aplikasi berbasis web untuk admin ialah agar admin lebih mudah mengisi,mengubah dan menghapus data karena mengunakan media komputer. Untuk menggunakan sistem ini admin harus online yang terkoneksi dengan
s merupakan keterangan tabel hasil g kons p menj
pri
jaringan computer. Setelah halaman index admin harus mengklik tulisan klik untuk lanjut ke halaman login. Pada login admin diminta untuk login sebagai admin dengan memasukan username dan password admin. Setelah itu halaman login memproses otentifikasinya bila berhasil melalui proses otentifikasi maka akan tampil halaman admin yang berisikan menu – menu untuk mengolah dan memaintenance data – data pada sistem. Admin mempunyai hak akses penuh pada system aplikasi yang dimana dapat merubah data yang ada pada basis data sistem aplikasi.
Sedangkan user ( wali murid ) layanan yang di sediakan adalah berbasiskan web, jadi untuk mengaksesnya para user menggunakan media computer,dengan web browsernya baru bisa mengakses. Pertama – tama user
inta
ah mengklik tulisan daftar makan user akan menuju halaman daftar. i halaman daftar user dapat memasukan username, password, nama, alamat, jenis kelamin, tempat kelahiran, tanggal kelahiran dan nomot telepon.
dim untuk mendaftar dengan mengisi data anggota. Data anggota terdiri dari username,password,nama anggota, alamat anggota setelah mengisi data – data dengan benar maka user akan mendapatkan account baru. Setelah itu user dapat login dengan memasukan username dan passwordnya. Setelah itu halaman login user akan memproses otentifikasi bila telah berhasil maka akan muncul halaman yang berisikan menu – menu untuk melihat data user dan dapat mendaftarkan siswa baru.
A. Implementasi Antarmuka Halaman Daftar user Setel
Gambar 3.7. Antarmuka Halaman Daftar
B. Implementasi A
Setelah mengklik tulisan login ma an user akan menuju halaman login. Di halaman login user memasukan username dan password,setelah itu halaman
ntarmuka Halaman Login user k
login user akan memproses otentifikasinya.
Gambar 3.8. Antarmuka Halaman Login C. Implementasi Antarmuka Halaman Menu User
Setelah mel maka user akan
emilih menu antara lain : alui proses login pada halaman login
edit data anda, data murid anda, lihat murid anda, cetak murid anda,logout dan upload foto murid anda. Pada menu ini berisi data pendaftaran user dan user dapat mendaftarkan murid baru.
Gambar 3.9. Antarmuka Halaman Menu User
D. Implementasi
Setelah mengklik tulisan login m kan user akan menuju halaman login. ord,setelah itu halaman Antarmuka Halaman Login Admin
a
Di halaman login user memasukan username dan passw login user akan memproses otentifikasinya.
home
Pendaftaran
Lihat dan cetak p daftaranen
Tambah siswa
Lihat dan cetak m ridu
logout
E. Implementasi An Pendaftaran
Setelah melalui proses login pada halaman login maka admin akan
Gambar 3.11. Antarmuka Halam
F. Implementasi Antarmuka Halaman Pendaftaran
i terdapa tarmuka Halaman Login Admin Menu
menjumpai menu pendaftaran jika login sebagai admin pendaftaran.
an Awal Menu Pendaftaran
Halaman ini berisi menu untuk mendaftar siswa baru. Di menu in t form – form untuk mengisi data siswa baru.
N o form ulir N am a sisw a Jenis kelam in Lihat dan cetak edit M enu lihat dan C etak
C ari… .
1 2
G. Implementasi Antarmuka Halaman Lihat dan Cetak
Halaman ini berisi data siswa baru yang baru terdaftar . Pada halaman ini data siswa yang baru di terdaftar akan di list dalam table.
nu ini Gambar 3.13. Antarmuka Halaman Lihat dan Cetak
H. Implementasi Antarmuka Halaman Tambah Siswa
Halaman ini berisi menu untuk menambah siswa baru. Di me terdapat form – form untuk mengisi data siswa baru tanpa melakukan pendaftaran.
Gambar 3.14. Antarmuka Halaman Tambah Siswa I. Implementasi Antarmuka Halaman Lihat Siswa
No formulir Nama siswa Kelas Lihat dan cetak edit Menu lihat dan Cetak Murid
Cari….
1 2
Jenis kelamin
Gambar 3.15. Antarmuka Halaman Lihat Siswa J. Implementasi Antarmuka Halaman Tambah Pembayaran
Pada halaman ini berisi form – form untuk memasukan data pembayaran siswa dan diproses untuk mengolah data pembayaran.
K. Implementasi Antarmuka Halaman Cetak dan Hapus Pembayaran
Pada halaman ini berisi form – form untuk memasukan data pembayaran siswa dan diproses untuk mencetak dan hapus data pembayaran.
Gambar 3.17. Antarmuka Halaman Cetak dan Hapus Pembayaran
embay
L. Implementasi Antarmuka Halaman Rekap Perhari
Pada halaman ini berisi form – form untuk memasukan tanggal p aran.
Gambar 3.18. Antarmuka Halaman Rekap Tanggal Tertentu
M. Implementasi Antarmuka Halaman Rekap Perbulan
an bulan pembayaran dan tahun.
Gambar 3.19. Antarmuka Halaman Rekap Perbulan
N. Implementasi Antarmuka Halaman Rekap Pertahun
Pada halaman ini berisi form – form untuk memasukan tahun pembayaran.
Gambar 3.20. Antarmuka Halaman Rekap Pertahun
Pada bab ini akan membahas tentang implementasi program dari hasil analisa dan perancangan sistem pada bab III, serta bagaimana cara sistem tersebut dijalankan.
4.1 Lingkungan Pemrograman
Perancangan aplikasi web dikembangkan dalam lingkungan pemrograman dengan spesifikasi teknis sebagai berikut ini :
1. Windows XP Profesional Edition SP.2 sebagai sistem operasi. 2. Rational Rose 2000 untuk pembuatan desain.
3. XAMPP sebagai web development tool. 4. MYSQL sebagai database.
5. PHP5 dan Ajax JQuery versi 1.4
6. SQLyong sebagai frontend software bagi admin untuk mengolah database. 7. Adobe Dreamweaver CS4 sebagai editor program.
4.2 Lingkungan uji coba
Uji coba akan dilakukan pada beberapa browser mengingat perangkat lunak atau aplikasi yang dikembangkan adalah aplikasi berbasis web. Dalam proses ini diharapkan akan diketahui bagaimana tingkat kompatibilitas dari aplikasi ini terhadap browser yang berlainan. Browser yang akan digunakan adalah Internet Explorer . Browser tersebut telah banyak digunakan oleh masyarakat luas.
4.3 Implementasi Aplikasi Desain Antar Muka
Pada sub bab implementasi desain antarmuka menjelaskan form apa saja yang terlihat dalam aplikasi tersebut yang menampilkan beberapa aplikasi form yaitu:
4.3.1 Form Halaman Daftar user
Setelah mengklik tulisan daftar makan user akan menuju halaman daftar. Di halaman daftar user dapat memasukan username, password, nama, alamat, jenis kelamin, tempat kelahiran, tanggal kelahiran dan nomot telepon.
4.3.2 Form Halaman Login user
Setelah mengklik tulisan login makan user akan menuju halaman login. Di halaman login user memasukan username dan password,setelah itu halaman login user akan memproses otentifikasinya.
Gambar 4.2. Form Halaman Login 4.3.3 Form Halaman Menu User
Setelah melalui proses login pada halaman login maka user akan menjumpai menu user. Pada halaman ini user dapat memilih menu antara lain : edit data anda, data murid anda, lihat murid anda, cetak murid anda,logout dan upload foto murid anda. Pada menu ini berisi data pendaftaran user dan user dapat mendaftarkan murid baru.
4.3.4 Form Halaman Login Admin
Setelah mengklik tulisan login makan user akan menuju halaman login. Di halaman login user memasukan username dan password,setelah itu halaman login user akan memproses otentifikasinya.
Gambar 4.4. Form Login Admin
4.3.5 Form Halaman Login Admin Menu Pendaftaran
Setelah melalui proses login pada halaman login maka admin akan menjumpai menu pendaftaran jika login sebagai admin pendaftaran.
Gambar 4.5. Form Awal Menu Pendaftaran
4.3.6 Implementasi Antarmuka Halaman Pendaftaran
Gambar 4.6. Form Pendaftaran Siswa
4.3.7 Form Halaman Lihat dan Cetak
Halaman ini berisi data siswa baru yang baru terdaftar . Pada halaman ini data siswa yang baru di terdaftar akan di list dalam table.
4.3.8 Form Halaman Tambah Siswa
Halaman ini berisi menu untuk menambah siswa baru. Di menu ini terdapat form – form untuk mengisi data siswa baru tanpa melakukan pendaftaran.
Gambar 4.8. Form Halaman Tambah Siswa
4.3.9 Form Halaman Lihat Siswa
Halaman ini berisi data siswa yang sudah resmi. Pada halaman ini data siswa lama di terdaftar akan di list dalam table.
4.3.10 Form Halaman logout
Halaman ini berisi tombol logut untuk keluar dari menu pendaftaran.
Gambar 4.10. Form Halaman Logout
4.3.11 Form Halaman Admin Menu Pembayaran
Setelah melalui proses login pada halaman login maka admin akan menjumpai menu pembayaran jika login sebagai admin pembayaran.
Gambar 4.11. Form Halaman Awal Menu Pembayaran
4.3.12 Form Halaman Tambah Pembayaran
Pada halaman ini berisi form – form untuk memasukan data pembayaran siswa dan diproses untuk mengolah data pembayaran.
4.3.13 Form Halaman Cetak dan Hapus Pembayaran
Pada halaman ini berisi form – form untuk memasukan data pembayaran siswa dan diproses untuk mencetak dan hapus data pembayaran.
Gambar 4.13. Form Halaman Cetak dan Hapus Pembayaran 4.3.14 Form Halaman Rekap Perhari
Pada halaman ini berisi form – form untuk memasukan tanggal pembayaran.
Gambar 4.14. Form Halaman Rekap Tertentu
4.3.15 Form Halaman Rekap Perbulan
Pada halaman ini berisi form – form untuk memasukan bulan pembayaran dan tahun.
4.3.16 Form Halaman Rekap Pertahun
Pada halaman ini berisi form – form untuk memasukan tahun pembayaran.
Gambar 4.16. Form Halaman Rekap Pertahun
4.3.17 Form Halaman Tambah Tahun
Pada halaman ini berisi menu untuk tambah tahun ajaran.
Gambar 4.17. Form Halaman Tambah Tahun
4.3.18 Form Halaman Tambah Macam Pembayaran
Pada halaman ini berisi menu untuk tambah macam pembayaran.
4.3.19 Form Halaman Grafik
Pada halaman ini berisi menu untuk melihat grafik pembayaran pada tahun tertentu.
Gambar 4.19. Form Halaman Grafik
4.3.20 Form Halaman Menu Super Admin
Pada halaman ini berisi menu menambah user baru untuk menjadi admin.
4.3.21 Form List User
Pada halaman ini berisi untuk mengedit user yang telah terdaftar menjadi anggota.
UJI COBA
Uji coba sendiri berfungsi untuk mengetahui keberhasilan dan kekurangan dari aplikasi yang telah dibuat. Uji coba dilakukan untuk memastikan apakah yang dirancang sudah sesuai dengan yang direncanakan. Uji coba dalam aplikasi web
pendaftaran dan pembayaran ini terdiri dari beberapa langkah yang akan
dijelaskan di bawah ini.
5.1 Lingkungan Uji coba
Lingkungan Uji coba aplikasi ini dilakukan dengan:
Pemrograman menggunakan PHP 5 dan AJAX J.Query versi 1.4.
Web Editor menggunakan Adobe dreamweaver Cs 4 dengan Web Server
menggunakan Apache Web Server versi 2.2.8 . Dengan halaman situsnya http://localhost/site/ Web Browser menggunakan Mozilla Firefox.
Untuk database menggunakan MySQL dengan SQLyong,
Operating System menggunakan Microsoft Windows XP Professional
Version 2002 Service Pack2, Bios Version 1.70, Processor AMD Turion (tm) 64 X2 Mobile Technology TL-60, MMX, 3DNow (2 CPUs), ~2.2GHz, Memory 2 Giga Byte of RAM.
5.2 Pelaksanaan Uji Coba Halaman Utama Sistem
Di halaman utama ini terdapat bebrapa menu link yaitu login, daftar, help, dan admin.
Gambar 5.1. Halaman Indeks Sistem
5.3 Uji Coba Halaman Anggota
5.3.1 Uji Coba Halaman Pendaftaran Anggota
Pertama sebelum anggota login ,maka anggota harus mendaftar terlebih dahulu.
Setelah memasukan username maka script ajax akan memproses ke database dan mengecek apakah username tersebut sudah digunakan apa belum. Jika belum maka akan muncul pop up menu teks dengan pesan nama tersedia. Untuk validasi text yang lain akan muncul pesan ok pada samping text boxt tersebut. Validasi dapat dilihat pada gambar 5.2.
5.3.2 Uji Coba Halaman Login Anggota
Form login anggota di gunakan sebelum pengunjung mengakses ini aplikasi ini. Tujuannya adalah untuk keamanan sebuah aplikasi agar tidak digunakan oleh pihak lain yang tidak berkepentingan. Di form ini setiap anggota memiliki hak akses untuk masuk ke halaman anggota. Untuk uji coba login anggota maka harus memasukan username dan password dan di ikuti dengan tombol submit.
Submit
Gambar 5.3. Halaman Login Anggota
Halaman ini terdiri dari menu, edit data anggota, data murid anda, upload foto murid anda, lihat murid anda, cetak murid anda dan upload ijazah anda.
Gambar 5.4. Halaman Anggota
Untuk mengedit data anggota, dapat di edit dengan mengklik menu edit data anda. Maka script ajax akan merequest data tanpa merefresh halaman anggota dengan memunculkan pop up menu.
Untuk memasukan data murid, dapat dimasukan dengan mengklik menu data murid anda. Maka script ajax akan merequest data tanpa merefresh halaman anggota dengan memunculkan pop up menu. Dan user dapat memasukan data murid baru untuk mendaftar sebagai siswa.
Gambar 5.6. Pop up Menu Data Murid Anda
Untuk mengupload foto murid, dapat dimasukan dengan mengklik menu foto murid anda. Maka script ajax akan merequest data tanpa merefresh halaman anggota dengan memunculkan pop up menu. Dan user dapat menupload dengan menekan browse dan pilih file fotonya.
Untuk melihat data murid anda, dapat di lihat dengan mengklik menu lihat murid anda. Maka script ajax akan merequest data tanpa merefresh halaman anggota dengan memunculkan pop up menu. Dan user dapat melihat data murid yang sudah dimasukan.
Gambar 5.8. Pop up Menu Lihat Murid Anda
Untuk mencetak data pendaftaran murid anda, dapat di lihat dengan mengklik menu cetak murid anda. Maka script ajax akan merequest data tanpa merefresh halaman anggota dengan memunculkan pop up menu. Dan user dapat mencetak data murid yang sudah dimasukan dalam format pdf.
Untuk mengupload gambar ijazah, dapat dimasukan dengan mengklik menu ijazah murid anda. Maka script ajax akan merequest data tanpa merefresh halaman anggota dengan memunculkan pop up menu. Dan user dapat menupload dengan menekan browse dan pilih file gambarnya.
Gambar 5.10. Pop up Menu upload Ijazah Murid Anda Jika user ingin keluar dari halaman anggota dapat mengklik menu logout.
5.4 Uji Coba Halaman Admin Pendaftaran 5.4.1 Uji Coba Halaman login Admin
Pada halaman ini administraton pendaftaran dapat memasukan username dan password pendaftaran kemudian menekan tombol submit untuk login.
Gambar 5.12. Admin
Ketika di klik link admin tersebut pada gambar 5.11. Maka akan muncul menu login dengan efek ajax tanpa merefresh halaman tersebut.
Gambar 5.13. Pop Menu Login Admin
beberapa menu yaitu, pendaftaran siswa baru, lihat dan cetak pendaftaran, tambah murid, lihat dan cetak murid dan logout.
Gambar 5.14. Halaman Admin Pendaftaran 5.4.2 Uji Coba Halaman Tambah Pendaftaran
Ketika di klik menu pendaftaran maka akan tampil form pendaftaran. Di dalam form ini terdapat beberapa text harus di isi oleh admin jika ingin mendaftarkan siswa baru.
Untuk validasi terjadi jika ada data yang kosong. Dan ada pesan langsung pada setiap text yang ada. Pesan akan muncul pada bagian kanan text.
Gambar 5.16. Validasi form Pendaftaran
Jika ada data yang kosong maka script ajax akan mengecek apakah data pada text tersebut kosong atau tidak. Jika data tersebut kosong maka akan muncul pesan (nama harus di isi) pada kanan text dan jika data terisi maka akan muncul pesan OK !.
5.4.3 Uji Coba Halaman Lihat dan Cetak
Gambar 5.17. lihat data Pendaftaran
Pada text kanan diatas adalah text untuk menu search data pendaftaran. Text ini mengunakan auto complete yang langsung mengambil dari database mengunakan script ajax. Ketika dapat data yang di cari lalu ditekan enter maka data yang di cari tesebut dapat di edit.
Jika data yang sudah di cari dapat. Lalu di tekan enter maka kemenu edit.
edit Hapus
Edit ijazah Di terima Edit foto
Gambar 5.19 lihat Edit Pendaftaran
Jika link di terima di klik maka akan menu pop menu yang berisikan text. Dan admin dapat memasukan no induk baru kelas dan angkatan. Dan siswa ini telah resmi menjadi murid baru
Gambar 5.20. Pop up Menu di terima
Jika link edit foto di klik maka akan menu pop menu table yang akan menampilkan foto siswa. Dan admin dapat menguplad foto baru.
Jika link edit di klik maka akan menu pop menu form data siswa untuk mengedit data pendaftaran.
Gambar 5.22. Pop up Edit pendaftaran
Jika link edit ijazah klik maka akan menu pop menu table yang akan menampilkan ijazah siswa. Dan admin dapat mengupolad ijazah baru.
Gambar 5.23. Pop up Edit Ijazah Jika di klik link hapus maka akan muncul pop up menu hapus.
5.4.4 Uji Coba Halaman Tambah Siswa
Ketika di klik menu Tambah Siswa maka akan tampil form tambah siswa. Di dalam form ini terdapat beberapa text harus di isi oleh admin jika ingin menambah Murid baru.
Gambar 5.25. Halaman Tambah Siswa
Gambar 5.26. Validasi form Tambah Siswa
Jika ada data yang kosong maka script ajax akan mengecek apakah data pada text tersebut kosong atau tidak. Jika data tersebut kosong maka akan muncul pesan (nama harus di isi) pada kanan text dan jika data terisi maka akan muncul pesan OK !.
5.4.5 Uji Coba halaman Lihat Siswa
Cetak Lihat
cari
Pagging
Gambar 5.27. Halaman Lihat Siswa
Pada text kanan diatas adalah text untuk menu search data Murid. Text ini mengunakan auto complete yang langsung mengambil dari database mengunakan script ajax. Ketika dapat data yang di cari lalu ditekan enter maka data yang di cari tesebut dapat di edit.
Jika data yang sudah di cari dapat. Lalu di tekan enter maka kemenu edit Murid.
Gambar 5.29 Lihat Edit Murid
Untuk fungsi pada gambar 5.27 sama pada gambar 5.18 . Terdapat link edit foto, edit data murid, edit ijazah dan hapus murid.
Dan link yang terakhir adalah link logout. Yang berfungsi untuk keluar dari sistem pendaftaran.
Gambar 5.30. Link Log Out 5.5 Uji Coba Halaman Admin Pembayaran
5.5.1 Uji Coba halaman login Admin
Pada halaman ini administraton Pembayaran dapat memasukan username dan password pembayaran kemudian menekan tombol submit untuk login.
Ketika di klik link admin tersebut pada gambar 5.11. Maka akan muncul menu login dengan efek ajax tanpa merefresh halaman tersebut.
Gambar 5.32. Pop Menu Login Admin
Setelah proses login admin pembayaran berhasil maka akan masuk ke halaman admin pembayaran. Admin pembayaran ini berfiungsi untuk mengolah data pembayaran siswa yang telah ada. Di dalam halaman ini terdapat beberapa menu yaitu, pembayaran siswa,cetak pembayaran murid, rekap perhari, rekap perbulan, rekap pertahun, tambah tahun, tambah pembayaran, grafik dan logout.
5.5.2 Uji Coba Halaman Tambah Pembayaran
Ketika di klik menu tambah pembayaran maka akan tampil form pembayaran. Di dalam form ini terdapat beberapa text harus di isi oleh admin jika ingin melakukan proses pembayaran siswa.
Gambar 5.34. Halaman Tambah Pembayaran
Untuk memasukan nomor induk admin dapat memasukan nomor induk atau nama murid maka akan tampil keterangan drop down nama, nomor induk dan kelas data yang di cari.
Jika textbox nomor induk di isi dengan r maka akan tampil data yang ingin di cari yaitu reni dengan nomor induk 55 dan kelas 2. Tapi yang di pilih adakah nomor induk reni agar bisa di proses.
Gambar 5.36. Proses pembayaran
Gambar 5.37. Proses Cetak pembayaran
5.5.3 Uji Coba Halaman Cetak dan Hapus Pembayaran
Pada halaman ini berfungsi untuk memproses cetak pembayaran siswa dan menghapus pembayaran siswa.
Gambar 5.38. Proses Cetak dan hapus pembayaran
Gambar 5.39. Proses Loading Cetak dan hapus pembayaran
Ketika dip roses, maka teknologi ajax akan bekerja dan memproses menampilkan dengan efek loading. Admin dapat langsung mencetak atau menghapus data tersebut. Ketika menekan tombol cetak hasilnya seperti pada gambar 5.35. jika menekan tombol hapus maka data pembayaran di atas akan terhapus.
5.5.4 Uji Coba Halaman Rekap Pembayaran Pada Tanggal Tertentu
Gambar 5.40. Halaman Rekap Pembayaran Pada tanggal Tertentu
Ketika di submit akan muncul tab baru dengan perincian pembayaran pada tanngal tersebut
Gambar 5.41. Cetak Rekap Pembayaran Pada tanggal Tertentu 5.5.5 Uji Coba Halaman Rekap Pembayaran Pada Bulan Tertentu
