Halaman Utama Sistem Informasi Pembayaran

42

BAB IV IMPLEMENTASI SISTEM

Pada bab IV ini akan dibahas hasil pembuatan aplikasi Sistem Informasi Pembayaran Siswa Berbasis CakePHP

4.1. Kebutuhan Sistem

Ada beberapa hal dalam membangun aplikasi yang harus diperhatikan sebelum akhirnya sampai pada langkah menjalankan program atau aplikasi, antara lain perangkat keras hardware, perangkat lunak software serta bagaimana akhirnya aplikasi dapat sampai ke tangan user pemakai. Sistem Informasi Pembayaran Siswa Berbasis CakePHP, ini ditulis dengan bahasa Pemograman CakePHP dan membutuhkan web server serta database server dalam proses implementasinya. Adapun web server yang digunakan dalam Tugas Akhir ini adalah XAMPP Server dan database servernya adalah MYSQL.

4.2. Imlementasi Sistem

Seperti yang telah disinggung pada bagian Kebutuhan Sistem di atas, sistem yang dibangun ini terdiri atas dua unsur utama, GUI Graphical User Interface dan basis data. GUI direpresentasikan oleh website, sedangkan data yang disajikan berasal dari database. Karena itu, uraian pada bagian Implementasi Sistem ini akan dibagi berdasarkan kedua unsur tersebut dengan tujuan agar proses implementasi sistemnya lebih mudah untuk dimengerti.

4.2.1. Halaman Utama Sistem Informasi Pembayaran

Tampilan halaman utama atau halaman login untuk Sistem Informasi Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Pembayaran Siswa Sekolah Dasar Hang Tuah 10 Kab.Sidoarjo http:localhostpembayaranuserslogin seperti gambar dibawah ini. Gambar 4.1. Halaman Utama Atau Login Sistem Pembayaran Siswa Link pada bagian Menu ditampilkan dengan menggunakan sintaks HTML biasa. Hal ini dikarenakan link yang ada di Halaman Utama ini bersifat statis, sedangkan potongan skript yang digunakan untuk menampilkan halaman Login tampak seperti dibawah ini. table align=center width=355 h2centerfont face=tahomaAplikasi Sistem Informasi Pembayaran SPP Siswafontcenterh2 ?php echo html-imagelogin.png, arrayalign =left; ? script diatas untuk membuat tabel dengan ukuran 355 px dengan posisi tabel ditengah, login.png untuk menampilkan gambar yang ada dihalaman login Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. table tr td font face=tahoma size=2 Username fonttd td : td td ?php echo form-inputusername; ? td tr tr td font face=tahoma size=2 Password fonttd td : td td ?php echo form-passwordpassword; ? td tr tr td ?php echo form-endLogin; ? td tr table script untuk membuat sebuah tabel username, password dan tombol Login, tampilannya tampak seperti gambar 4.2 dibawah ini Gambar 4.2. Form Login Sistem Pembayaran Siswa Setelah seorang admin menginputkan user name dan password kemudian dilanjutkan dengan klik tombol Login, kemudian sistem akan mengecek user name dan password apakah memeliki hak akses atau tidak script yang digunakan untuk mefilter user name dan password tampak seperti dibawah ini. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. ?php class UsersController extends AppController { var name = Users; Function index { this-redirectuserslogin; } function beforeFilter { this-__validateLoginStatus; } function login { this-layout = login; if emptythis-data == false { if user = this-User-validateLoginthis- data[User] == true { this-Session-writeUser, user; this-Session-setFlash You Login Success ; this- redirect userslogin; jika seorang admin memasukan user name dengan benar maka dia akan dibawah kedalam halaman menu admin You Login Success , jika sebaliknya maka dia redirect kehalaman login atau halaman utama. Setelah berhasil login maka sistem akan membawa seorang user atau admin kehalaman menu Administrator, tampilan halaman menu Administrator tampak seperti gambar 4.3 Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.3. Halaman Menu Administrator Dari halaman menu administartor yang terlihat pada gambar 4.8 dari halaman inilah sebuah Sistem Pembayaran Siswa akan dikelola oleh seorang admin, untuk manajeman siswa, halaman menu manajemen siswa tampak seperti gambar dibawah ini. Gambar 4.3. Halaman Menu Manajemen Siswa Dari tampilan halaman menu berita, seorang admin bisa melakukan penambahan siswa berdasarkan kelas masing-masing sesuai dengan data atau banyaknya siswa dan kelas yang ada disekolah bersangkutan tersebut. Script yang digunakan untuk menampilkan seperti pada Gambar 4.3. Halaman Menu Manajemen Siswa sebagai berikut. h4?php echo form-Html-link__Tambah Siswa, true, add; Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. ?h4 ?php echo form-createStudent, arrayurl = arrayaction = siswa, inputDefaults = arraylabel = false, div = false; ? table tr valign=top td div id=tahoma Kelas div td td div id=tahoma : div td td ?php echo form-inputkel; ? ?php echo form- endGo; ?td tr table Link Tambah Siswa merupakan link yang akan menghubungkan ke hamalan siswa tampak seperti gambar 4.4 Gambar 4.4. Halaman Tambah Siswa Untuk melakukan manajemen kelas, seorang admin bisa mengklik manajemen kelas dan bentuk tampilannya seperti gambar dibawah ini. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.5. Halaman Tambah Kelas Script yang digunakan untuk menampilkan halaman tambah kelas hampir sama dengan script yang digunakan untuk menampilkan tambah siswa, dari menu manajemen kelas ini seorang admin dapat melakukan 2 aksi yaitu ubah kelas dan hapus kelas. Untuk malakukan manajemen pambayaran siswa, seorang admin bisa menggunakan fasilitas menu manajemen Transaksi Pembayaran, untuk tampilan menu tersebut tampak seperti pada gambar 4.6. halaman menu transaksi siswa. Dari menu tersebut seorang admin bisa mengelola transaksi pembayaran siswa, dengan sistem ini pihak sekolah bisa merasa terbantu karena transaksi bisa dilakukan berdasarkan kelas atau bisa secara personal masing-masing siswa. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.6. Halaman Transaksi Pembayaran Script yang digunakan untuk menampilkan seperti pada Gambar 4.6. Halaman Menu Transaksi Pembayaran sebagai berikut. h4?php echo form-Html-link__Back, true, ..payments; ?h4 ?php echo this-elementfungsi_indotgl; tanggal = dateY-m-d; tgl = tgl_indotanggal; ? table width=100 tr tdh4 font face=tahoma Transaksi Pembayaran fonth4td td align=right div id=tahoma ?php echo tgl; ? div td tr Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. table script ini berfungsi untuk membuat table menu serta memberikan judul menu ?php echo form-createPayment, arrayurl = arrayaction = pay, inputDefaults = arraydiv = false, label = false; ? table width=100 tr td valign=top width=50 table tr td div id=tahoma BulanTahun div td td div id=tahoma : divtd td ?php options = array 01 = Januari, echo form-selectbulan, options, 01; ? td script ini berungsi untuk mencatat waktu,tanggal dan tahun saat transaksi pembayaran dilakukan. Menggunakan menu laporan pembayaran, setiap transaksi yang dilakukan pastinya akan dilaporkan kepada atasannya, untuk menggunkan fitur tersebut seorang admin bisa memilih menu laporan pembayaran pada halaman menu administrator, adapun langkah-langkah yang digunakan untuk melihat laporan pembayaran sebagai berikut : Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 1. Seorang admin diminta untuk memilih bulan, ini dimaksudkan agar data yang ditampilkan sesuai bulan yang dipilih. 2. Selanjutnya admin juga diharuskan menginputkan tahun, ini bertujuan untuk memperdetail dari transaksi pembayaran yang dilakukan. 3. Yang berikutnya adalah memilih kelas, ini bertujuan agar data yang ditampilkan berdasarkan kelas dan nama siswa, untuk lebih jelasnya ada pada gambar 4.7 dibawah ini. Gambar 4.7. Laporan Transaksi Pembayaran Dari menu laporan transaksi pembayaran seorang admin akan memperoleh hasil laporan pembayaran seperti pada gambar dibawah ini. Gambar 4.8. Laporan Transaksi Pembayaran Dengan Id Siswa 051 Dengan memasukan Id Siswa disetakan dengan bulan dan tahun, seorang admin Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. bisa mengetahui transaksi pembayaran satiap siswa. Script yang digunakan untuk menampilkan Laporan Transaksi Pembayaran Dengan Id Siswa 051 pada gambar 4.8 sebagai berikut: table border=0 cellpadding=0 cellspacing=0 width=850 align=center tr td width=220 height=70 align=center ?php echo html-imageas.jpg, arrayheight = 80; ?td td align=center valign=top h4font face=tahoma SD Hang Tuah br JL. TANGKUBAN PERAHU NO. 5 TELP : 8667208 br SEDATI - SIDOARJO . 61353 . Abr LAPORAN PEMBAYARAN SISWAfonth4td tr table table border=0 cellpadding=0 cellspacing=0 width=850 align=center tr td width=40 font face=tahoma size=2 Bulan fonttd td width=5 font face=tahoma size=2 : font td td font face=tahoma size=2 ?php echo bln; ?fonttd tr tr Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. td font face=tahoma size=2 Tahun font td td font face=tahoma size=2 : fonttd td font face=tahoma size=2 ?php echo tahun; ?font td tr table table border=1 cellpadding=0 cellspacing=0 width=850 align=center tr valign=top th font face=tahoma size=2 No fonttd th font face=tahoma size=2 Id Siswa font th th width=130 font face=tahoma size=2 Nama font th th font face=tahoma size=2 SPP font th th font face=tahoma size=2 Komite fontth th font face=tahoma size=2 Evaluasi fontth th font face=tahoma size=2 Komputer fontth th font face=tahoma size=2 Kegiatan fontth th font face=tahoma size=2 Lain-lain fontth th font face=tahoma size=2 Total fontth script ini berfungsi untuk membuat tampilan atau layout laporan pembayaran siswa Selain menu Laporan Transaksi Pembayaran Dengan Siswa, seorang admin juga bisa mengetahui informasi pembayaran siswa, informasi pembayaran ini hanya menampilkan informasi pembayaran siswa secara personal atau sesuai dengan id siswa dengan menampilkan informasi berdasarkan tanggal dan tahun serta rincian pembayaran, untuk lebih jelasnya tampak seperti gambar dibawah ini. Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. Gambar 4.9. Informasi Pembayaran Siswa Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber. 55

BAB V PENGUJIAN SISTEM