Aplikasi Web Pendaftaran Dan Pembayaran Dengan Teknologi Ajax Pada SD Muhammadiyah 15 Surabaya.

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.

2. Rizky Parlika S.Kom Selaku dosen wali serta dosen pembimbing II yang dengan sabar telah meluangkan banyak waktu, pikiran dan tenaga di antara kesibukan beban-beban kegiatan akademik untuk memberikan bimbingan dan kesempatan penyusun untuk berkreasi dalam proses pembuatan Skripsi ini.

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……

Penulis menyadari bahwa penulisan ini masih jauh dari kesempurnaan, karena tiada gading yang tak retak. Oleh sebab itu, penulis mengharapkan kritik dan saran yang bersifat membangun guna terciptanya kesempurnaan penulisan ini

iv

Surabaya, Nov 2010

Judul : Aplikasi Web Pendaftaran Dan Pembayaran Dengan Teknologi Ajax Pada SD 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,

2

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

berbasis web untuk menciptakan aplikasi web interaktif. jQuery adalah javascript library yaitu kumpulan kode/fungsi javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode javascript, jQuery menyederhanakan kode java script. Hal ini sesuai dengan slogannya ‘write less do more’ cukup tulis sedikit, tapi bisa melakukan banyak hal.

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.

4

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

Dapat memberikan contoh langsung salah satu penerapan dan manfaat eknologi Informasi di kehidupan sehari-hari. Menyederhanakan dan mempermudah administrasi sekolah. Mempercepat pelayanan terhadap siswa maupun pihak – pihak yang terkait.

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

Pada bab ketiga diuraikan mengenai desain sistem yang akan dibuat, analisis sistem, kebutuhan sistem, perancangan sistem, perancangan proses, dan perancangan antar muka dari aplikasi

6

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.

DAFTAR PUSTAKA LAMPIRAN

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 )

8

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.

( Sumber : http://1sttutorial.atmonadi.com/?p=80 ,diakses pada tanggal 01 Oktober 2010 pukul 19.15 WIB )

10

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()

Perintah ini digunakan untuk melakukan koneksi ke server databaseMySql,

fungsi ini memiliki format penulisan sebagai berikut. mysql_connect (host, username, password) ;

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

database, terutama untuk pemilihan atau seleksi dan pemasukan data, yang

memungkinkan operasi data dikerjakan dengan mudah secara otomatis. Kehandalan suatu sistem database (DBMS) diketahui dari cara kerja optimizer

-nya dalam melakukan proses perintah SQL (Structured Query Language), yang

12

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)

merupakan DBMS yang menggunakan model basis data relasional atau dalam bentuk tabel-tabel yang saling berhubungan.

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

14

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)

Secara sederhana World Wide Web adalah sekumpulan komputer yang menyediakan berbagai layanan informasi (disebut server) dan didalamnya terdapat

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 adalah sebuah bentuk server yang khusus digunakan untuk menyimpan halaman website atau home page. Komputer dapat dikatakan sebuah

16

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

1. Memisahkan presentastion sebuah dokumen dari content document itu sendiri.

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

18

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;}

(Sumber : http://bloggingly.com/apa-itu-css-konsep-dasar-css/ ,diakses pada tanggal 01 Oktober 2010 pukul 20.28 WIB )

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.

20

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

XML kependekan dari eXtensible Markup Language, dikembangkan

mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998.Seperti halnya HTML, XML juga menggunakan elemen yang ditandai

dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup(diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen (parameter yang

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)

BAB III

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,

pembayaran user,dan hapus user. Layanan ini bisa di akses jika admin telah melalui proses registrasi dan login.

24

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

Secara umum, alur yang terjadi dalam aplikasi in dapat dijelaskan melalui tabel berikut :

Tabel 3.1 Flowchart Alur Administrtor Pada Sistem

Keterangan :

Admin atau administrator login terlebih dahulu ke sistem aplikasi kemudian admin meningputkan data user lain antara lain : user pendaftaran, user keuangan, dan super admin. Kemudian sistem akan memproses dan menampilkan hasil proses data. Untuk keluar maka admin harus logout dari sistem aplikasi.

26

Tabel 3.2 Flowchart Alur Pendaftaran Pada Sistem

Keterangan :

User admin pendaftaarn login terlebih dahulu ke seietem aplikasi kemudian admin meningputkan data siswa baru, update data siswa dan delete data siswa. Kemudian sistem akan memproses dan menampilkan hasil proses data siswa. Untuk keluar maka admin harus logout dari sistem aplikasi.

Tabel 3.3 Flowchart Alur Keuangan Pada Sistem

Keterangan :

User admin keuangan login terlebih dahulu ke seietem aplikasi kemudian admin meningputkan data pembayaran baru, update data pembayaran siswa, delete data pembayaran siswa dan cetak pembayaran siswa. Kemudian sistem akan memproses dan menampilkan hasil proses pembayaran data siswa. Untuk keluar maka admin harus logout dari sistem aplikasi.

28

Tabel 3.4 Flowchart Alur Pendaftaran user Pada Sistem

Keterangan :

Pengunjung melakukan regsitrasi dengan mengisi formulir pendaftaran. Dengan mengisi data keterangan anggota terlebih dahulu. Kemudian sistem akan memproses pendaftaran anggotabaru. Dan pengunjung akan mendapatkan account untuk login ke sistem anggota.

Tabel 3.5 Flowchart Alur Anggota Pada Sistem

Keterangan :

Anggota login terlebih dahulu ke sistem aplikasi kemudian user meningputkan data siswa baru, update data user,upload foto siswa dan cetak pendaftaran siswa. Kemudian sistem akan memproses dan menampilkan hasil proses data user. Untuk keluar maka anggota harus logout dari sistem aplikasi.

30

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 nama

password id

password nama

id

guru wali_murid

0 pendaftaran pembayaran

+

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.

2. Pengunjung : pengunjung yang merupakan penguna sistem dapat mendaftar sebagai anggota dan dapat mendaftar sebagai siswa baru.

32

B. DFD Level 0

data pembayaran data pembayaran data pendaftaran

data pembayaran dari dfd level o

tgl lahir alamat password nama id password nama password nama id id guru wali_murid 1 pendaftaran + guru 2 pembayaran + pendaftaran store pembayaran

Gambar 3.2. DFD Level 0 Keterangan :

Untuk proses awal yaitu admin dan wali murid menginputkan data login ke dalam sistem untuk diproses oleh sistem. Kemudian setelah selesai login,admin mengelola administrasi data siswa, administrasi data user dan administrasi data pembayaran. Setelah login wali murid bisa mengelola data wali murid dan data pendaftaran siswa baru. Kemudian dari data – data tersebut akan menghasilkan tabel siswa, tabel anggota dan tabel pembayaran yang kemudian data tersebut akan ditampilkan menurut hak akses masing - masing.

C. DFD Level 1 Pendaftaran data pendaftaran data Flow_855 Flow_854 data data pembayaran data pendaftaran data murid data murid tgl lahir alamat nama password id password nama id

data muriddata murid data murid data murid data murid data murid data murid data murid data murid Flow_529 data murid data murid data murid data murid data murid data murid data murid data murid

tgl lahiralamat nama password id password nama id data murid data murid data murid data murid data murid data murid data muriddata murid

data muridFlow_529 data murid data murid data murid data murid data murid data murid data murid_{data murid}

tgl lahir alamat nama password id password nama id guru wali_murid 1 menyimpan data data murid22

ket ibu kandung22

ket ayah kandung22 ket wali22 ket pendidikan22 kegemaran siswa22 tanda bukti pendaftaran22 pindahan dari sekolah22 meninggalkan sekolah22 guru wali_murid 2 mencetak formulir data murid222

ket ibu kandung222

ket ayah kandung222 ket wali222 ket pendidikan222 kegemaran siswa222 tanda bukti pendaftaran222 pindahan dari sekolah222 meninggalkan sekolah222 guru wali_murid 3

upload data data murid223 pendaftaran : 1

pendaftaran : 2

pendaftaran : 3

34

Keterangan :

dari level 0 pada proses pendaftaran diturunkan ke level 1. Pada Setelah

DFD level 1 ini guru dan wali murid dapat menyimpan data sesuai dengan data siswa. Data siswa akan di masukan ke dalam tabel masing – masing pada database. Pada DFD level 1 in terdapat 3 proses. Yang pertama proses menyimpan data. Guru dan wali murid dapat memasukan data siswa baru, data siswa terdiri dari beberapa tabel. Setelah di isi melalui proses menyimpan maka data murid akan masuk ke dalam tabel – tabel yang telah di tentukan. Proses kedua upload data, upload data ini untuk mengupload foto murid dan foto ijazah murid. Proses ketiga untuk mencetak data pendaftaran yg telah di lalui pada proses simpan data murid dan upload data murid.

D. DFD Level 1 Pembayaran

Flow_973 Flow_972

Flow_971 data pembayaran

Flow_852_{data pembayaran}

data pembayaran data pembayaran data pembayaran data pembayaran data pembayaran data pembayaran id nama password data pembayaran data pembayaran data pembayaran data pembayaran data pembayaran data pembayaran id nama password data pembayaran data pembayaran data pembayaran data pembayaran data pembayaran data pembayaran id nama password guru 1 menyimpan pembayaran transaksi3 detail transaksi3 pembayaran3 guru 2 mencetak kwitansi transaksi32 detail transaksi32 pembayaran32 guru 3 membuat laporan transaksi33 detail transaksi33 pembayaran33 store pembayaran : 1 store pembayaran : 2

36

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

model data fisik ini dengan cara meng-generate diagram data konseptual. Data konseptual di buat dengan cara membuat entitas – entitas dan mengisi atribut – atribut pada masing – masing entitas, sesuai dengan atribut yang dimiliki pada

memiliki (D) memiliki1 (D) memiliki2 (D) memiliki3 (D) memiliki5 (D) memiliki4 (D) mempunyai2 mempunyai1 mempunyai3 mempunyai memiliki8 (D) memiliki7 (D) memiliki6 (D) kegemaran_siswa o o o o o KESENIAN OLAHRAGA ORGANISASI HOBI LAIN_LAIN

Variable characters (50) Variable characters (50) Variable characters (50) Variable characters (50) Variable characters (50)

keterangan_ayah_kandung o o o o o o o o o o o o NAMA_AYAH TEMPAT_LHR_AYAH TGL_LHR_AYAH AGAMA_AYAH KEWARGANEGARAAN_AYAH PENDIDIKAN_TERAKHIR_AYAH ALAMAT_RUMAH_AYAH PEKERJAAN_AYAH PENGHASILAN_PERBULAN_AYAH ALAMAT_PEKERJAAN_AYAH TELP_KANTOR_AYAH MASIH_HIDUP_AYAH

Variable characters (20) Variable characters (15) Variable characters (15) Variable characters (15) Variable characters (5) Variable characters (7) Variable characters (40) Variable characters (30) Integer Variable characters (40) Variable characters (15) Variable characters (20) keterangan_ibu_kandung o o o o o o o o o o o o NAMA_IBU TEMPAT_LHR_IBU TGL_LHR_IBU AGAMA_IBU KEWARGANEGARAAN_IBU PENDIDIKAN_TERAKHIR_IBU ALAMAT_RUMAH_IBU PEKERJAAN_IBU PENGHASILAN_PERBULAN_IBU ALAMAT_PEKERJAAN_IBU TELP_KANTOR_IBU MASIH_HIDUP_IBU

Variable characters (20) Variable characters (15) Date Variable characters (15) Variable characters (5) Variable characters (7) Variable characters (40) Variable characters (30) Integer Variable characters (40) Variable characters (15) Variable characters (20) keterangan_pendidikan

o o

NAMA_TK ALAMAT_TK

Variable characters (20) Variable characters (40)

keterangan_wali o o o o o o o o o o o NAMA_WALI TEMPAT_LHR_WALI TGL_LHR_WALI AGAMA_WALI KEWARGANEGARAAN_WALI PENDIDIKAN_TERAKHIR_WALI ALAMAT_RUMAH_WALI PEKERJAAN_WALI PENGHASILAN_PERBULAN_WALI ALAMAT_PEKERJAAN_WALI TELP_KANTOR_WALI

Variable characters (20) Variable characters (15) Date Variable characters (15) Variable characters (5) Variable characters (7) Variable characters (40) Variable characters (30) Integer Variable characters (40) Variable characters (15) data_murid # o o o o o o o o o o o o o o o o o o o o o o NOMOR_INDUK KELAS NAMA_LENGKAP NAMA_PANGGILAN JENIS_KELAMIN TEMPAT_KELAHIRAN TANGGAL_KELAHIRAN AGAMA KEWARGANEGARAAN JUMLAH_SAUDARA_KANDUNG JUMLAH_SAUDARA_TIRI JUMLAH_SAUDARA_ANGKAT STATUS_ANAK BAHASA_DIKELUARGA BERAT_BADAN TINGGI_BADAN GOLONGAN_DARAH PENYAKIT_YANG_PERNAH_DIDERITA ALAMAT NOMOR_TELPON BERTEMPAT_TINGGAL_DENGAN JARAK_TEMPAT_TINGGAL_KE_SEKOLAH FOTOMURID1 Characters (5) Variable characters (3) Variable characters (30) Variable characters (30) Variable characters (15) Variable characters (15) Date Variable characters (15) Variable characters (15) Integer Integer Integer Variable characters (10) Variable characters (15) Integer Integer Variable characters (3) Variable characters (50) Variable characters (50) Variable characters (15) Variable characters (20) Integer Variable characters (30)

tanda_bukti_pendaftaran o o o NAMA_SISWA2 ALAMAT_SISWA2 KOTA2

Variable characters (50) Variable characters (50) Variable characters (50)

transaksi # o o NO_TRANSAKSI BULAN TANGGAL_TKP Integer Variable characters (15) Variable characters (15) pembayaran # o o ID NAMA_PEMBYARAN HARGA Characters (5) Variable characters (15) Integer tahun_ajaran # o ID_AJARAN TAHUN Characters (3) Variable characters (20)

detail_transaksi pindahan_dari_sekolah o o o o NAMA_SEKOLAH DARI_TINGKAT DITERIMA_TANGGAL DITERIMA_DI_TINGKAT

Variable characters (40) Variable characters (20) Variable characters (10) Variable characters (20)

meninggalkan_sekolah HUN_TAMAT OMOR_STTB NJUT_KE_SEKOLAH RI_TINGKAT1 SEKOLAH TINGKAT ANGGAL_PINDAH1 ANGGAL_KELUAR_SEKOLAH o o TA N o o LA DA o KE_ o o KE_ T o o T ALASAN

Variable characters (10) Variable characters (35) Variable characters (50) Variable characters (20) Variable characters (30) Variable characters (30) Variable characters (20) Variable characters (20) Variable characters (50)

lain_lain o catatan Variable characters (250)

login # o o o in id_adm username rd Characters (5) passwo letak

Variable characters (20) Variable characters (20) Variable characters (20)

anggota # o o o o o o o o

id_anggota u me p rd n _ang serna asswo ama jenkel t _ang g a _ang n p_ang Characters (5) empat tgl_an lamat o_tel

Variable characters (20) Variable characters (20) Variable characters (20) Variable characters (20) Variable characters (20) Date Variable characters (40) Variable characters (30)

38

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 NOMOR_INDUK KESENIAN OLAHRAGA ORGANISASI HOBI LAIN_LAIN char(5) varchar(50) varchar(50) varchar(50) varchar(50) varchar(50) <fk> keterangan_ayah_kandung NOMOR_INDUK NAMA_AYAH TEMPAT_LHR_AYAH TGL_LHR_AYAH AGAMA_AYAH KEWARGANEGARAAN_AYAH PENDIDIKAN_TERAKHIR_AYAH ALAMAT_RUMAH_AYAH PEKERJAAN_AYAH PENGHASILAN_PERBULAN_AYAH ALAMAT_PEKERJAAN_AYAH TELP_KANTOR_AYAH MASIH_HIDUP_AYAH char(5) varchar(20) varchar(15) varchar(15) varchar(15) varchar(5) varchar(7) varchar(40) varchar(30) int varchar(40) varchar(15) varchar(20) <fk> keterangan_ibu_kandung NOMOR_INDUK NAMA_IBU TEMPAT_LHR_IBU TGL_LHR_IBU AGAMA_IBU KEWARGANEGARAAN_IBU PENDIDIKAN_TERAKHIR_IBU ALAMAT_RUMAH_IBU PEKERJAAN_IBU PENGHASILAN_PERBULAN_IBU ALAMAT_PEKERJAAN_IBU TELP_KANTOR_IBU MASIH_HIDUP_IBU char(5) varchar(20) varchar(15) date varchar(15) varchar(5) varchar(7) varchar(40) varchar(30) int varchar(40) varchar(15) varchar(20) <fk> keterangan_pendidikan NOMOR_INDUK NAMA_TK ALAMAT_TK char(5) varchar(20) varchar(40) <fk> keterangan_wali NOMOR_INDUK NAMA_WALI TEMPAT_LHR_WALI TGL_LHR_WALI AGAMA_WALI KEWARGANEGARAAN_WALI PENDIDIKAN_TERAKHIR_WALI ALAMAT_RUMAH_WALI PEKERJAAN_WALI PENGHASILAN_PERBULAN_WALI ALAMAT_PEKERJAAN_WALI TELP_KANTOR_WALI char(5) varchar(20) varchar(15) date varchar(15) varchar(5) varchar(7) varchar(40) varchar(30) int varchar(40) varchar(15) <fk> data_murid NOMOR_INDUK KELAS NAMA_LENGKAP NAMA_PANGGILAN JENIS_KELAMIN TEMPAT_KELAHIRAN TANGGAL_KELAHIRAN AGAMA KEWARGANEGARAAN JUMLAH_SAUDARA_KANDUNG JUMLAH_SAUDARA_TIRI JUMLAH_SAUDARA_ANGKAT STATUS_ANAK BAHASA_DIKELUARGA BERAT_BADAN TINGGI_BADAN GOLONGAN_DARAH PENYAKIT_YANG_PERNAH_DIDERITA ALAMAT NOMOR_TELPON BERTEMPAT_TINGGAL_DENGAN JARAK_TEMPAT_TINGGAL_KE_SEKOLAH FOTOMURID1 char(5) varchar(3) varchar(30) varchar(30) varchar(15) varchar(15) date varchar(15) varchar(15) int int int varchar(10) varchar(15) int int varchar(3) varchar(50) varchar(50) varchar(15) varchar(20) int varchar(30) <pk> tanda_bukti_pendaftaran NOMOR_INDUK NAMA_SISWA2 ALAMAT_SISWA2 KOTA2 char(5) varchar(50) varchar(50) varchar(50) <fk> transaksi NO_TRANSAKSI ID_AJARAN NOMOR_INDUK BULAN TANGGAL_TKP int char(3) char(5) varchar(15) varchar(15) <pk> <fk1> <fk2> pembayaran ID NAMA_PEMBYARAN HARGA char(5) varchar(15) int <pk> tahun_ajaran ID_AJARAN char(3) <pk> TAHUN varchar(20) detail_transaksi ID NO_TRANSAKSI char(5) int <fk1> <fk2> pindahan_dari_sekolah NOMOR_INDUK NAMA_SEKOLAH DARI_TINGKAT DITERIMA_TANGGAL DITERIMA_DI_TINGKAT char(5) varchar(40) varchar(20) varchar(10) varchar(20) <fk> meninggalkan_sekolah NOMOR_INDUK TAHUN_TAMAT NOMOR_STTB LANJUT_KE_SEKOLAH DARI_TINGKAT1 KE_SEKOLAH KE_TINGKAT TANGGAL_PINDAH1 TANGGAL_KELUAR_SEKOLAH LASAN char(5) varchar(10) varchar(35) varchar(50) varchar(20) varchar(30) varchar(30) varchar(20) varchar(20) varchar(50) <fk> A lain_lain NOMOR_INDUK catatan char(5) varchar(250) <fk> anggota id_anggota user pas nama_ang jenkel tempat_ang tgl_ang alamat_ang no_telp_ang char(5) varchar(20) varchar(20) varchar(20) varchar(20) varchar(20) date varchar(40) varchar(30) <pk> Entity_16 id_admin username password letak char(5) varchar(20) varchar(20) varchar(20) <pk>

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

ukan nama ,password dan letak. Jika letak di pilih pendaftaran maka dapat login ke menu pendaftaran, Jika letak di pilih keuangan maka dapat login ke menu keuangan. Di dalam menu pendaftaran terdapat menu – menu yang akan dipilih seperti lihat data – data siswa, tambah data siswa, edit data siswa dan hapus data

40

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

42

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

Pada sub – bab 3.3 ini akan dibahas mengenai implementasi rancangan ada sub – bab 3.2 bagian implemantasi pada sub – sistem aplikasi yang di buat p

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

44

Tabel 3.11 Basis Data Murid

No Tabel Kolom Tipe Data Keterangan

1 Data_murid Nomor_ induk Char (5) Primary key

2 Kelas Varchar (3)

3 Nama_ lengkap Varchar (30)

4 Nama_panggilan Varchar (30)

5 Jenis_kelamin Varchar (15)

6 Tempat_kelahiran Varchar (15)

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

1 Keterangan_ u_kandung

induk reign key

Ib

Nomor_ Char (5) fo

2 Nama_ibu Varchar (20)

3 Tempat_lhr_ibu Varchar (15)

4 Tgl_lhr_ibu Date

5 Agama_ibu Varchar (15)

6 Kewarganegaraan_ibu Varchar (5)

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

No Tabel Kolom Tipe Data Keterangan

1 Keterangan_ yah_kandung

reign key a

Nomor_ induk Char (5) fo

2 Nama_ayah Varchar (20)

3 Tempat_lhr_ayah Varchar (15)

4 Tgl_lhr_ayah Date

5 Agama_ayah Varchar (15)

6 Kewarganegaraan_ayah Varchar (5)

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

1 Keterangan_ ali_kandung

reign key w

Nomor_ induk Char (5) fo

2 Nama_wali Varchar (20)

3 Tempat_lhr_wali Varchar (15)

4 Tgl_lhr_wali Date

5 Agama_wali Varchar(15)

6 Kewarganegaraan_wali Varchar (5)

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)

46

Tabel 3.15 Basis Data Kegemaran Siswa

No Tabel Kolom Tipe Data Keterangan

1 Kegemaran_ swa

N si

omor_ induk Char (5) foreign key

2 Kesenian Varchar (50)

3 Olahraga Varchar (50)

4 Organisasi Varchar(50)

5 Hobi Varchar (50)

6 Lain_lain Varchar (50)

Tabel 3.16 Basis Data Tanda Bukti Pendaftaran

No Tabel Kolom Tipe Data Keterangan

1 Tanda_bukti pendaftaran

uk reign key

_

Nomor_ ind Char (5) fo

2 Nama_siswa Varchar (50)

3 Alamat_siswa Varchar (50)

4 Kota2 Varchar (50)

ab ata Pindahan Dar

T el 3.17 Basis D i Sekolah

No Tabel Kolom Tipe Data Keterangan

1 Pindahan_da _sekolah

reign key ri

Nomor_ induk Char (5) fo

2 Nama_sekolah Varchar (40)

3 Dari_tingkat Varchar (10)

4 Diterima_tanggal Varchar (20)

Tabel 3.18 Basis Data Meninggalkan Sekolah

No Tabel Kolom Tipe Data Keterangan

1 Meninggalka _sekolah

reign key n

Nomor_ induk Char (5) fo

2 Tahun_tamat Varchar (10)

3 Nomor_sttb Varchar (35)

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

1 login Id_anggota Char (5) Primary_key

2 Username Varchar (20)

3 Password Varchar (20)

4 Nama_ang Varchar (20)

5 Jenkel Varchar (20)

6 Tempat_ang Varchar (20)

7 Tgl_ang Date

8 Alamat_ang Varchar (40)

9 No_telp_ang Varchar (30)

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)

48

Tabel 3.24 Basis Data Transaksi

No Tabel Kolom Tipe Data Keterangan

1 Transaski No_transaksi Integer Primary_key

2 Nomor_ induk Char (5) foreign key

3 Bulan Varchar (15)

Tanggal_tkp date

Tabel 3.25 Basis Data Keterangan pendidikan

No Tabel Kolom Tipe Data Keterangan

1 Keterangan_pen idikan

d

Nomor_ induk Char (5) foreign key

2 Nama_tk Varchar (20) foreign key

3 Alamat_tk Varchar (40)

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

50

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.

52

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

Halaman ini berisi data siswa yang sudah resmi. Pada halaman ini data siswa lama di terdaftar akan di list dalam table.

54

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.

56

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.

58

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.

60

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

Halaman ini berisi menu untuk mendaftar siswa baru. Di menu ini terdapat form – form untuk mengisi data siswa baru.

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.

62

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.

64

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.

66

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.

BAB V 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.

70

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

Setelah proses login berhasil maka akan masuk ke halaman anggota. Anggota yang sudah terdaftar akan terotomatis telah terset dalam database.

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.

72

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.

74

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

Setelah proses login admin pendaftaran berhasil maka akan masuk ke halaman admin pendaftaran. Admin pendaftaran ini berfiungsi untuk mengolah data pendaftaran dan data siswa yang telah ada. Di dalam halaman ini terdapat

76

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

Ketika di klik menu lihat dan cetak maka akan tampil tabel data pendaftaran. Halaman ini terdapat list data pendaftaran. Dan admin dapat mencari , melihat, mencetak, mengedit dan menghapus data.

78

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.

94

Gambar 5.48. Grafik MSColumn3D

Ini adalah grafik dengan animasi colom yang mempunyai ruang 3 dimensi

5.6 Uji Coba Menu Super Admin

Pada halaman ini terdapat menu untuk menambah user admin dan akses. Di dalam halaman ini tedapat beberapa menu yaitu tambah admin, edit admin, hapus admin dan logout.

95

Pada link tambah admin jika di klik maka akan muncul pop up menu untuk menambah data.

Gambar 5.50. Pop up Tambah Admin

Pada link edit admin jika di klik maka akan muncul pop up menu untuk edit data.

Gambar 5.51. Pop up edit Admin

Pada link hapus admin jika di klik maka akan muncul pop up menu hapus data admin.

96

5.7 Uji Coba Menu Hak Akse User

Pada halaman ini terdapat menu untuk menambah anggota. Di dalam halaman ini tedapat beberapa menu yaitu edit anggota, hapus anggota, lihat data anggota, cari anggota dan logout.

Gambar 5.53. Halaman Admin Anggota

Pada menu ini untuk lihat data, edit data dan hapus data anggota menggunakan pop up menu seperti penjelasan di atas.

BAB VI PENUTUP

6.1 Kesimpulan

Kesimpulan yang dapat diambil selama proses pembuatan tugas akhir ini dimulai sejak perancangan, pembuatan sampai pengujian program aplikasi ini adalah sebagai berikut:

1. Di buat sebuah aplikasi pemndaftaran online sehingga dapat di gunakan oleh wali murid untuk mendaftarkan anaknya sebagai siswa , sehingga dapat di akses kapan saja dan dimana saja.

2. Alur dan cara pembuatan pendaftaran dan pembayaran siswa di buat mengunakan model data konsep yang kemudian di generate menjadi data model fisik, sehingga akan menjadi basis data pada MySQL yang selanjutnya di gabung mengunakan pemograman PHP.

3. Aplikasi web ini mengunakan pemograman ajax. Yang bertujuan agar tampilan dan proses pengolahan data semakin cepat, efisien, dan user friendly.

6.2 Saran

Saran untuk pengembangan aplikasi web pendaftaran online dan pembayaran ini adalah:

1. Perlu ditambahkan ditambahkan lagi fitur-fitur lain untuk aplikasi Online ini.

2. Perlu adanya pengembangan dengan di tambahkan sistem e-learning.

DAFTAR PUSTAKA

Kadir, Abdul 2003, Pemograman WEB Mencakup HTML, CSS, JavaScript & php, Penerbit ANDI, Yogyakarta

Suryono, M.Kom. 2007, Membangun WEB Dengan Teknologi ASYNCHRONOUSE JavaScript & XML, Penerbit ANDI, Yogyakarta

Syafii, M. 2005, Membangun Aplikasi Berbasis PHP dan MySQL, penerbit Andi, Yogyakarta.

Hakim, Lukmanul. 2010, Bikin Website Super Keren dengan Php dan JQuery, pnerbit Lokko Media, Yogyakarta

“Bahasa Pemograman PHP”, <URL:http: //komunitaskita.net/apa-itu-php/>. Diakses tanggal 01 Oktober 2010

“Dasar PHP”, <URL:http: fernandositindaon.info/komputer/mengenal-dasar-dasar-php >. Diakses tanggal 01 Oktober 2010

“Kelebihan PHP”, < http://1sttutorial.atmonadi.com/?p=80>. Diakses tanggal 01 Oktober 2010

“MySql”,<http://www.edisetiawan.co.cc/index.php?pilih=news&mod=yes&a ksi=lihat&id=50>. Diakses tanggal 01 Oktober 2010

“Kelebihan MySql”, <:http://f4bregaz.blogspot.com/2009/02/tentan-mysql.html>. Diakses tanggal 01 Oktober 2010

“Mengenal DBMS”, <http://desi-asrianty.blogspot.com/2010/02/mengenal-dbms-database-management.html >. Diakses tanggal 01 Oktober 2010 “CSS”,<http://bloggingly.com/apa-itu-css-konsep-dasar-css/>.Diakses tanggal

01 Oktober 2010

99

“AJAX”,<http://nahwan-erlingga.blogspot.com/2009/04/apa-itu-ajax.html>.Diakses tanggal 01 Oktober 2010

“XML”,<http://satiman.blogspot.com/2007/05/apa-itu-xml.html>.Diakses tanggal 01 Oktober 2010