MANUAL BOOK - BSI

MANUAL BOOK

Di Susun Oleh :

Haryani Artika Surniandari

Ida Zuniarti Ela Nurela Sari Ahmad Al Kaafi

Esty Purwaningsih Suparni

Lisda Widiastuti Hilda Rachmi

2

Login User

Fungsi :

Form interface ini digunakan untuk

user masuk ke dalam sistem

pengelolaan kas kecil.

Proses :

Input username dan password, lalu

klik tombol login.

Untuk masuk ke aplikasi username

dan pasword harus benar

3

Form Input Kas Kecil

Fungsi :

Form untuk menginput data kas kecil

Proses :

Masukkan No Referensi contoh

REF01, no referensi terdiri dari 4

digit.

Lalu input Tanggal dengan cara

memilih kalender yang tersedia.

Lanjutkan pengisian Keterangan, Kas

4

Masuk dan Kas Keluar.

Klik tombol Simpan, maka tampil

pesan

5

Jika memasukkan nomor

referensi yang sudah

terinput, ketika di klik

tombol Simpan maka akan

tampil pesan

6

Form Edit Data

Kas Kecil

Fungsi :

Untuk mengedit data kas

kecil

Proses :

Klik Edit, maka akan

tampilan akan ke form

pengeditan, lakukan

perubahan data sesuai yang

diinginkan, jika sudah yakin

melakukan perubahan klik

tombol Simpan.

7

Hapus Data Kas Kecil

Pilih data yang akan di

hapus, lalu klik Hapus. Maka

akan tampil pesan seperti di

bawah ini.

8

Tampilan Setelah Data di

Hapus

9

Tampilan

Pencarian Data

Kas Kecil

Fungsi :

Mencari data kas kecil

Proses :

Masukkan data yang dicari

pada Pencarian Data, klik

tombol Cari. Maka akan

tampil form seperti di bawah

ini.

10

Tampilan Data sesuai

pencarian

11

Cetak Laporan Kas Kecil

Harian

Fungsi :

Mencetak Laporan

Proses :

Klik tombol Cetak Laporan

Kas Kecil, maka akan tampil

Laporan Kas Kecil seperti di

bawah ini.

12

Tampilan Layar Laporan

13

1. Program

14

15

2. Listing Program

Beranda.jsp

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>

<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>

<sql:setDataSource var="dataSource"

driver="com.mysql.jdbc.Driver"

url="jdbc:mysql://localhost:3306/kaskecil"

user="root" password="" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Kas Kecil</title>

<meta http-equiv="Content-Language" content="English" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="config/style.css" media="screen" />

</head>

<body>

<div id="wrap">

<div id="header">

<h1><a href="#">APLIKASI KAS KECIL HARIAN</a></h1>

<h2>(PROGRAM KANCIL)</h2>

</div>

<div id="menu">

<ul class="dropmenu">

<li><a href="Beranda.jsp?halaman=KasKecil&aksi=SIMPAN">KAS KECIL</a></li>

</ul>

</div>

<div id="content">

<table width="100%">

<tr>

<td valign="top" width="110%">

<c:choose>

<c:when test="${param.halaman=='KasKecil'}">

<%@include file="KasKecil.jsp" %>

16

</c:when>

<c:otherwise>

<%@include file="home.jsp" %>

</c:otherwise>

</c:choose>

</td>

</tr>

</table>

</div>

<div style="clear: both;"> </div>

</div>

</body>

</html>

17

home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Home</title>

</head>

<body>

<center>

<p>SELAMAT DATANG...</p><br />

</center>

</body>

</html>

cetaklap_kaskecil.jsp

<%@page import="java.io.*, java.util.*, java.sql.*"%>

<%@page import="net.sf.jasperreports.engine.*"%>

<%@page import="net.sf.jasperreports.view.JasperViewer.*"%>

<%@page import="javax.servlet.ServletResponse"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Laporan Kas Kecil</title>

</head>

<body>

<%

Connection conn = null; //--koneksi ke MySQL database: laporan

String url="jdbc:mysql://localhost:3306/kaskecil";

String username="root";

String password="";

Class.forName("com.mysql.jdbc.Driver");

conn = DriverManager.getConnection(url, username, password);

File reportFile = new

File(application.getRealPath("/Laporan/laporan_kaskecil.jasper"));

18

Map<String, Object> param=new HashMap<String, Object>();

byte[] bytes =

JasperRunManager.runReportToPdf(reportFile.getPath(), param, conn);

response.setContentType("application/pdf");

response.setContentLength(bytes.length);

ServletOutputStream outStream = response.getOutputStream();

outStream.write(bytes, 0, bytes.length);

outStream.flush();

outStream.close();

%>

</body>

19

KasKecil.jsp

<%@ page import ="java.sql.*"%>

<h2> .: [Input Kas Kecil] :. </h2>

<div id="content">

<table border="0" width="50%">

<tr>

<td valign='top'>

<form action="ControlKasKecil" method="post">

<input type="hidden" name="aksi" value="${param.aksi}"/>

<tr>

<td>No Referensi</td>

<td>:</td>

<td>

<input type='text' name='no_referensi' size="12" value="${param.no_referensi}"/>

</td>

</tr>

<tr>

<td>Tanggal</td>

<td>:</td>

<td><input type="date" name="tgl" value="${param.tgl}"/></td>

</tr>

<tr>

<td>Keterangan</td>

<td>:</td>

<td>

<input type="text" name="ket" value="${param.ket}" width="200" size="50"/>

</td>

</tr>

<tr>

<td>Kas Masuk</td>

<td>:</td>

<td>

<input type="text" name="kas_masuk" value="${param.kas_masuk}" />

</td>

</tr>

<tr>

<td>Kas Keluar</td>

<td>:</td>

<td>

20

<input type="text" name="kas_keluar" value="${param.kas_keluar}" />

</td>

</tr>

<tr>

<td><input type="submit" value="Simpan" class="button"/></td>

</tr>

</form>

</td>

</tr>

</table><br>

<h2> .: [Cari Data Kas Kecil] :. </h2>

<form action="" method="post">

Pencarian Data : <input type="text" name="cari" value=""/>

<input type="submit" value="Cari" class="button"/> <br>

</form>

<br> <h2>.:[Cetak Laporan]:.</h2>

<a href="cetaklap_kaskecil.jsp" width="5%" class="buttonlap"> Cetak Laporan Kas Kecil</a><br>

<br>

<sql:query var="querykaskecil" dataSource="${dataSource}">

SELECT * from kaskecil where no_referensi like '%${param.cari}%' or tgl like '%${param.cari}%' or

ket like '%${param.cari}%' or kas_masuk like '%${param.cari}%' or kas_keluar like '%${param.cari}%'

</sql:query>

<h2> .: [Data Kas Kecil] :. </h2>

<table border="1" width="100%" cellpadding="0" cellspacing="0">

<tr class="head">

<td>No Referensi</td><td>Tanggal</td><td>Keterangan</td><td>Kas Masuk</td>

<td>Kas Keluar</td><td>Action</td>

</tr>

<c:forEach var="rowkaskecil" items="${querykaskecil.rowsByIndex}">

<tr class="isi">

<td valign='top'>${rowkaskecil[0]}</td>





<td valign='top'>

<a href='ControlKasKecil?aksi=HAPUS&no_referensi=${rowkaskecil[0]}'> Hapus</a> |

<a

href='Beranda.jsp?halaman=KasKecil&aksi=GANTI&no_referensi=${rowkaskecil[0]}&tgl=${rowkaskecil[1]}&ket=${rowkaskecil[2]}&kas_masuk=

${rowkaskecil[3]}&kas_keluar=${rowkaskecil[4]}'> Edit </a>

21

</td>

</tr>

</c:forEach>

</table>

</div>

Source Package Control, ControlKasKecil.java

/*

* To change this template, choose Tools | Templates

* and open the template in the editor.

*/

package Control;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.DriverManager;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

*

* @author Firdha

*/

public class ControlKasKecil extends HttpServlet {

/**

* Processes requests for both HTTP

* <code>GET</code> and

* <code>POST</code> methods.

*

* @param request servlet request

* @param response servlet response

* @throws ServletException if a servlet-specific error occurs

* @throws IOException if an I/O error occurs

*/

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

22

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

try {

String aksi = request.getParameter("aksi");

String no_referensi = request.getParameter("no_referensi");

String tgl = request.getParameter("tgl");

String ket = request.getParameter("ket");

String kas_masuk = request.getParameter("kas_masuk");

String kas_keluar = request.getParameter("kas_keluar");

String cari = request.getParameter("cari");

Class.forName("com.mysql.jdbc.Driver");

Connection koneksi=DriverManager.getConnection

("jdbc:mysql://localhost:3306/kaskecil","root","");

switch (aksi) {

case "SIMPAN":

koneksi.createStatement().execute("insert into kaskecil "+

"values('"+no_referensi+"','"+tgl+"','"+ket+"','"+kas_masuk+"','"+kas_keluar+"')");

out.println("<script>alert('Data Kas Kecil Berhasil Disimpan')</script>"

+ "<meta http-equiv='refresh'

content='1;Beranda.jsp?halaman=KasKecil&aksi=SIMPAN'/>");

break;

case "HAPUS":

koneksi.createStatement().execute(

"delete from kaskecil where no_referensi='"+no_referensi+"'");

out.println("<script>alert('Data Kas Kecil Berhasil Dihapus')</script>"



break;

case "GANTI":

koneksi.createStatement().execute(

"update kaskecil set

tgl='"+tgl+"',ket='"+ket+"',kas_masuk='"+kas_masuk+"',kas_keluar='"+kas_keluar+"' where

no_referensi='"+no_referensi+"'");

out.println("<script>alert('Data Kas Kecil Berhasil Diubah')</script>"



break;

default:

break;

}

23

} catch(Throwable e) {

out.println("<script>alert('No Referensi Sudah Ada')</script>"

+ "<meta http-equiv='refresh' content='1;Beranda.jsp?halaman=KasKecil&aksi=SIMPAN'/>");

}

}

// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit

the code.">

/**

* Handles the HTTP

* <code>GET</code> method.

*





*/

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)


processRequest(request, response);

}

/**

* Handles the HTTP

* <code>POST</code> method.

*





*/

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response)


processRequest(request, response);

}

/**

* Returns a short description of the servlet.

*

* @return a String containing servlet description

*/

24

@Override

public String getServletInfo() {

return "Short description";

}// </editor-fold>

}

config, style.css

* {

margin: 0;

padding: 0;

}

table tr td{

border-color:#006400;

}

body {

background-image: url(http://rumahsakitmulya.com/wp-content/uploads/2015/11/Potrait.jpg);

font-family:Verdana;

font-size: 12px;

line-height: 20px;

color:#0033cc;

margin: 0 auto;

}

a {

text-decoration: none;

color: black;

}

a:hover {

text-decoration: underline;

25

color: red;

}

#wrap {

margin: 0 auto;

width: 1300px;

}

#header {

height: 180px;

width: 1300px;

}

#header h1 {

font-size: 40px;

letter-spacing: -1px;

padding: 50px 0 0 20px;

text-align: center;

}

#header h1 a {

color: black;


font-weight: 100;



text-align: right;

}

#header h1 a:hover {

color: #00ff66;

}

26

#header h2 {

font-size: 30px;

color: black;



font-weight: 100;

text-align: center;

}

.dropmenu {

background: #616161;

height: 30px;

list-style-type: none;

margin: 0;

padding: 0px;

width: 1300px;

}

.dropmenu li {

border-right: solid 1px white;

float: left;

height: 30px;

}

.dropmenu li a {

color: #fff;

display: block;

font: 12px arial, verdana, sans-serif;

font-weight: bold;

padding: 9px 20px;

27


}

.dropmenu li:hover { background: #778899; position: relative; }

.dropmenu li:hover a { text-decoration: underline; }

.dropmenu li:hover ul {

background-color: #3f4a54;

border: 1px solid grey;

left: 0px;

padding: 3px;

top: 30px;

width: 160px;

}

.dropmenu li:hover ul li { border: none; height: 18px; }

.dropmenu li:hover ul li a {

background-color: #778899;

border: 1px solid transparent;

color: #fff;

display: block;

font-size: 11px;

height: 18px;

line-height: 18px;

padding: 0px;


text-indent: 5px;

width: 158px;

padding: 3px;

}

28

.dropmenu li:hover ul li a:hover {

background: silver;

border: solid 1px #444;

color: #000;

height: 18px;

padding: 3px;

}

.dropmenu ul {

left: -9999px;

list-style-type: none;

position: absolute;

top: -9999px;

}

#content {

background-color: white;

padding: 0 10px;

}

#content {

width: 1300px;

padding-top: 5px;

padding-right: 3px;

padding-left: 3px;

}

#content h2 {

margin: 5px 0 0 0;

padding-left: 10px;

height: 30px;

29

line-height: 30px;

background: #c7f9f5;

color: #228b22;

font-size: 13px;

}

#content ul {

padding: 10px 0 15px 20px;

list-style-type: square;

color: #75B03C;

}

#content ul li a { text-decoration: none; font-weight: 600;

}

#content ul li a:hover { color: #111; }

.footer {

text-align: center;

font-size: 11px;

color: purple;

margin-top: 40px;

border-top: 1px dotted #aaa;

padding-top: 10px;

background: #ffffff;

}

.footer a { color: blue; }

.footer a:hover { color: #111; }

.isi td{

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

30

background: #ffffff;

padding-top: 1px;

padding-bottom: 1px;

padding-left: 8px;

padding-right: 8px;

color: black;

font: 12px "Tahoma",Arial,sans-serif;

}

.head td{

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

border-top: 1px solid #C1DAD7;

background: #90ee90;

letter-spacing: 1px;

padding: 4px 2px 4px 10px;

color: #000080;

text-align : center;

font: 13px "Tahoma",Arial,sans-serif;

}

.button{

margin-left: 0;

padding: 4px 4px;

border: #003333;

background: #003399;;

font-size: 12px;

color: #ffffff;

font-family: "Tahoma";

31

width: 70px;

}

.buttonlap{

margin-left: 0;

padding: 4px 4px;

border: none;


font-size: 13px;

color: #ffffff;

font-family: "Tahoma";

width: 100px;

}

.button a:hover{


}

32

3. Program

33

34

4. Spesifikasi File

Spesifikasi File kaskecil

Nama Database : kaskecil

Nama File : kaskecil

Akronim : kaskecil.myd

Akses File : Random

Media : Harddisk

Panjang Record : 150 Karakter

Kunci Field : no_referensi

No Elemen Data Nama Field Tipe Panjang Keterangan

1. No Referensi no_referensi varchar 10 Primary Key

2. Tanggal tgl text

3. Keterangan ket varchar 100

4. Kas Masuk kas_masuk int 20

5. Kas Keluar kas_keluar int 20

35

Documents

MANUAL BOOK - BSI