IMPLEMENTASI SISTEM
4.2.1. Halaman Utama Sistem Informasi Pembayaran
43
Pembayaran Siswa Sekolah Dasar Hang Tuah 10 Kab.Sidoarjo
http://localhost/pembayaran/users/login 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>
<h2><center><font face=tahoma>Aplikasi Sistem
Informasi Pembayaran SPP Siswa</font></center></h2>
<?php echo $html->image('login.png', array('align'
=>'left')); ?>
*/script diatas untuk membuat tabel dengan ukuran 355 px dengan
posisi tabel ditengah, login.png untuk menampilkan gambar yang ada
dihalaman login
<table>
<tr>
<td> <font face=tahoma size=2> Username </font></td> <td> : </td>
<td> <?php echo $form->input('username'); ?> </td>
</tr>
<tr>
<td> <font face=tahoma size=2> Password </font></td> <td> : </td>
<td> <?php echo $form->password('password'); ?> </td> </tr> <tr> <td> <?php echo $form->end('Login'); ?> </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.
45
<?php
class UsersController extends AppController {
var $name = 'Users';
Function index() { $this->redirect('/users/login'); } function beforeFilter() { $this->__validateLoginStatus(); } function login() { $this->layout = 'login'; if (empty($this->data) == false) { if (($user = $this->User->validateLogin($this->data['User'])) == true) { $this->Session->write('User', $user);
$this->Session->setFlash('You Login
Success');
$this->redirect('/users/login');
*/ 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
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.
47
?></h4>
<?php echo $form->create('Student', array('url' => array('action'
=> 'siswa'), 'inputDefaults' => array('label' => false, 'div' =>
false))); ?>
<table>
<tr valign="top">
<td> <div id="tahoma"> Kelas </div> </td> <td> <div id="tahoma"> :
</div> </td>
<td> <?php echo >input('kel'); ?> <?php echo
$form->end('Go'); ?></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.
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.
49
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->element('fungsi_indotgl'); $tanggal = date('Y-m-d'); $tgl = tgl_indo($tanggal); ?> <table width="100%"> <tr>
<td><h4> <font face="tahoma"> Transaksi Pembayaran
</font></h4></td>
<td align="right"> <div id="tahoma"> <?php echo $tgl; ?>
</div> </td>
</tr>
</table>
*/script ini berfungsi untuk membuat table menu serta memberikan
judul menu
<?php echo $form->create('Payment', array('url' =>
array('action' => 'pay'), 'inputDefaults' => array('div' =>
false, 'label' => false))); ?>
<table width="100%">
<tr>
<td valign="top" width="50%">
<table>
<tr>
<td> <div id="tahoma">Bulan/Tahun </div> </td>
<td> <div id="tahoma"> : </div></td>
<td>
<?php
$options = array (
'01' => 'Januari',
echo $form->select('bulan', $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 :
51
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
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->image('as.jpg', array('height' => 80)); ?></td>
<td align="center" valign="top"> <h4><font face="tahoma">
SD Hang Tuah <br>
JL. TANGKUBAN PERAHU NO. 5 TELP : 8667208 <br>
SEDATI - SIDOARJO . 61353 . A<br>
LAPORAN PEMBAYARAN SISWA</font></h4></td>
</tr>
</table>
<table border=0 cellpadding=0 cellspacing=0 width="850"
align="center">
<tr>
<td width="40"> <font face="tahoma" size="2"> Bulan
</font></td>
<td width="5"> <font face="tahoma" size="2"> : </font> </td>
<td> <font face="tahoma" size="2"> <?php echo $bln;
?></font></td>
</tr>
53
<td> <font face="tahoma" size="2"> Tahun </font> </td>
<td> <font face="tahoma" size="2"> : </font></td>
<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 </font></td>
<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 </font></th>
<th> <font face="tahoma" size="2"> Evaluasi </font></th>
<th> <font face="tahoma" size="2"> Komputer </font></th>
<th> <font face="tahoma" size="2"> Kegiatan </font></th>
<th> <font face="tahoma" size="2"> Lain-lain </font></th>
<th> <font face="tahoma" size="2"> Total </font></th>
*/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.
55