View
19
Download
0
Category
Preview:
Citation preview
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'>${rowkaskecil[1]}</td>
<td valign='top'>${rowkaskecil[2]}</td>
<td valign='top'>${rowkaskecil[3]}</td>
<td valign='top'>${rowkaskecil[4]}</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>"
+ "<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'
content='1;Beranda.jsp?halaman=KasKecil&aksi=SIMPAN'/>");
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.
*
* @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
*/
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;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
padding: 5px 0 0 20px;
text-align: right;
}
#header h1 a:hover {
color: #00ff66;
}
26
#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;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
27
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;
}
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;
background: #003399;
font-size: 13px;
color: #ffffff;
font-family: "Tahoma";
width: 100px;
}
.button a:hover{
background: #000080;
}
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
Recommended