MANUAL BOOK
Di Susun Oleh :
Haryani Artika Surniandari
Ida Zuniarti Ela Nurela Sari Ahmad Al Kaafi Esty Purwaningsih
Suparni Lisda Widiastuti
Hilda Rachmi
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
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
Masuk dan Kas Keluar.
Klik tombol Simpan, maka tampil
pesan
Jika memasukkan nomor
referensi yang sudah
terinput, ketika di klik
tombol Simpan maka akan
tampil pesan
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.
Hapus Data Kas Kecil
Pilih data yang akan di
hapus, lalu klik Hapus. Maka
akan tampil pesan seperti di
bawah ini.
Tampilan Setelah Data di
Hapus
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.
Tampilan Data sesuai
pencarian
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.
Tampilan Layar Laporan
1. Program
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" %>
</c:when>
<c:otherwise>
<%@include file="home.jsp" %>
</c:otherwise>
</c:choose>
</td>
</tr>
</table>
</div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
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"));
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>
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>
<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'>${rowkaskecil[1]}</td>
<td valign='top'>${rowkaskecil[2]}</td>
<td valign='top'>${rowkaskecil[3]}</td>
<td valign='top'>${rowkaskecil[4]}</td>
</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 {
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>"
+ "<meta http-equiv='refresh'
content='1;Beranda.jsp?halaman=KasKecil&aksi=SIMPAN'/>");
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>"
+ "<meta http-equiv='refresh'
} 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.
*
* @param request servlet request * @param response servlet response
* @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
} /**
* Handles the HTTP
* <code>POST</code> method.
*
* @param request servlet request * @param response servlet response
* @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
} /**
* Returns a short description of the servlet.
*
* @return a String containing servlet description */
@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;
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;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
padding: 5px 0 0 20px;
text-align: right;
}
#header h1 a:hover { color: #00ff66;
}
#header h2 { font-size: 30px;
color: black;
padding: 30px 0 0 20px;
letter-spacing: -1px;
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;
text-decoration: none;
}
.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-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.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;
}
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;
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;
width: 70px;
}
.buttonlap{
margin-left: 0;
padding: 4px 4px;
border: none;
background: #003399;
font-size: 13px;
color: #ffffff;
font-family: "Tahoma";
width: 100px;
}
.button a:hover{
background: #000080;
}
