• Tidak ada hasil yang ditemukan

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

BAB V

Dokumen terkait