Gambar IV.26 Halaman Status Transaksi
Gambar IV.27 Data Transaksi Keuangan
4.3 Code Generation
Pada tahapan ini akan menampilkan listing program pada form yang terkait dengan proses bisnis utamanya.
1. Form Login Sistem
<!DOCTYPE html>
<html>
<head>
<title>Pah Tsung School</title>
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="icon" href="img/favicon.ico">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?
family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?
family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<!-- CSS Libs -->
<link rel="stylesheet" type="text/css"
href="lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/font- awesome.min.css">
<link rel="stylesheet" type="text/css"
href="lib/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap- switch.min.css">
<!-- CSS App -->
<link rel="stylesheet" type="text/css" href="lib/css/style.css">
</head>
<body class="flat-blue login-page">
<div class="container">
<div class="login-box">
<div>
<div class="login-form row">
<div class="col-sm-12 text-center login-header">
<img src="img/logo.png" alt="logo.png">
</div>
<div class="col-sm-12">
<div class="login-body">
<div class="progress hidden" id="login-progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width: 100%">
Log In...
</div>
</div>
<div id="error-login"></div>
<form method="post" id="login-form">
<div class="control">
<input type="text" class="form-control"
name="user_email" placeholder="email address" id="user_email"/>
</div>
<div class="control">
<input type="password" class="form-control"
name="password" placeholder="password" id="password" />
<div class="checkbox" align="left">
<label><input type="checkbox"
id="methods"><span style="color:#fff"> Show password</span></label>
</div>
</div>
<div class="login-button">
<button type="submit" class="btn btn-primary"
id="btn-login" name="btnloginsistem"><i class="fa fa-key"></i>
Login</button>
</div>
</form>
</div>
<div class="login-footer">
<!-- Javascript Libs -->
<script type="text/javascript" src="lib/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/js/jquery- 1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#methods').click(function(){
if($(this).is(':checked')){
$('#password').attr('type','text');
}else{
$('#password').attr('type','password');
} });
});
</script>
<script type="text/javascript"
src="lib/js/validation.min.js"></script>
<script src="lib/login.js" type="text/javascript"></script>
<!-- Javascript -->
</body>
</html>
2. Form Permohonan Uang Muka
<!DOCTYPE html>
<html>
<head>
<title>E-budgeting</title>
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="icon" href="img/favicon.ico">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?
family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?
family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<!-- CSS Libs -->
<link rel="stylesheet" type="text/css"
href="lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/font- awesome.min.css">
<link rel="stylesheet" type="text/css"
href="lib/css/animate.min.css">
<link rel="stylesheet" type="text/css"
href="lib/css/select2.min.css">
<!--datepicker-->
<link href="lib/css/bootstrap-datetimepicker.css" rel="stylesheet"
media="screen">
<link href="lib/css/bootstrap-datetimepicker.min.css"
rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css"
href="lib/css/dataTables.bootstrap.css">
<!--alert-->
<link rel="stylesheet" href="themes/alertify.core.css" />
<link rel="stylesheet" href="themes/alertify.bootstrap.css"/>
<!-- CSS App -->
<link rel="stylesheet" type="text/css" href="lib/css/style.css">
<link rel="stylesheet" type="text/css" href="lib/css/themes/flat- blue.css">
</head>
<body class="flat-blue">
<div id="loading"></div>
<div class="app-container" id="page">
<div class="row content-container">
<nav class="navbar navbar-default navbar-fixed-top navbar- top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-expand-toggle">
<i class="fa fa-bars icon"></i>
</button>
<ol class="breadcrumb navbar-breadcrumb">
<li class="active"><img src="img/loggo.gif"
alt="loggo"></li>
</ol>
<button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
<i class="fa fa-th icon"></i>
</button>
</div>
<ul class="nav navbar-nav navbar-right">
<button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
<i class="fa fa-times icon"></i>
</button>
<li class="info">
<ul class="dropdown-menu animated fadeInDown">
<li>
<div class="profile-info">
<h4 class="username">Mr.
Kasnawi</h4>
<p>[email protected]</p>
<div class="btn-group margin-bottom-2x" role="group">
<a
href="#Modalusersetting" class="btn btn-default setting-user"
id="u17" data-toggle="modal" data-dismiss="modal"><i class="fa fa- gears fa-fw"></i> Setting</a>
<a href="logout.php"
type="button" class="btn btn-default"><i class="fa fa-sign-out"></i>
Logout</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div> </nav>
<div class="side-menu sidebar-inverse">
<nav class="navbar navbar-default" role="navigation">
<div class="side-menu-container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<div class="icon">
<div><img src="img/loggo.png" width="35"></div>
</div>
<div class="title">PAH TSUNG SCHOOL</div>
</a>
<button type="button" class="navbar-expand-toggle pull-right visible-xs">
<i class="fa fa-times icon"></i>
</button>
</div>
<ul class="nav navbar-nav">
<li class="">
<a href="http://pahtsung99/e-budgeting/">
<span class="icon fa fa-home"></span><span class="title">Beranda</span>
</a>
</li>
<li id="unit" class="">
<a href="?page=unit">
<span class="icon fa fa-tags"></span><span class="title">Master Unit</span>
</a>
</li>
<li id="tahunajaran" class="">
<a href="?page=tahun-anggaran">
<span class="icon fa fa-bookmark-o"></span><span class="title">Master Tahun anggaran</span>
</a>
</li>
<li id="anggaran" class="">
<a href="?page=anggaran">
<span class="icon fa fa-money"></span><span class="title">Master Anggaran</span>
</a>
</li>
<li id="transaksi-permohonan" class="active">
<a href="?page=transaksi-permohonan">
<span class="icon fa fa-paper-plane"></span><span class="title">Pemohonan Uang Muka</span>
</a>
</li>
<li id="transaksi-pertanggungjawaban" class="">
<a href="?page=transaksi-pertanggungjawaban">
<span class="icon fa fa-thumbs-o-up"></span><span class="title">Pertanggungjawaban</span>
</a>
</li>
<li id="data-permohonan" class="">
<a href="?page=data-permohonan">
<span class="icon fa fa-file-text-o"></span><span class="title">Data Pemohonan</span>
</a>
</li>
<li id="data-pertanggungjawaban" class="">
<a href="?page=data-pertanggungjawaban">
<span class="icon fa fa-file-text"></span><span class="title">Data Pertanggungjawaban</span>
</a>
</li>
<li id="status-transaksi" class="">
class="title">Data anggaran</span>
</a>
</li>
<li id="data-transaksi-bag-keuangan" class="">
<a href="?page=data-transaksi-bag-keuangan">
<span class="icon fa fa-cart-plus"></span><span class="title">Data Transaksi</span>
</a>
</li>
<li id="data-transaksi-bag-akunting" class="">
<a href="?page=data-transaksi-bag-akunting">
<span class="icon fa fa-cart-plus"></span><span class="title">Data Transaksi</span>
</a>
</li>
<li id="pindah-anggaran" class="">
<a href="?page=pindah-anggaran">
<span class="icon fa fa-file-text"></span><span class="title">Pindah Anggaran</span>
</a>
</li>
<li id="laporan-anggaran" class="">
<a href="?page=laporan-anggaran">
<span class="icon fa fa-file-text"></span><span class="title">Laporan Anggaran</span>
</a>
</li>
<li id="setting-user" class="">
<a href="?page=setting-user">
<span class="icon fa fa-gears fa-fw"></span><span class="title">Pengaturan pemakai</span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<!-- Main Content -->
<div class="container-fluid">
<div class="side-body">
<div class="card">
<div class="card-header">
<div class="card-title">
<div class="title"><i class="fa fa-angle-double- right"></i> Transaksi Uang Muka</div>
</div>
</div>
<div class="card-body">
<div class="alert fresh-color alert-info alert-dismissible fade in" role="alert">
<button type="button" class="close" data- dismiss="alert" aria-label="Close"><span aria- hidden="true">×</span></button>
<i class="fa fa-info-circle "> </i><strong >
Warning!</strong> Masukan estimasi Permohonan uang muka anda sesuai kebutuhan anggaran yang diperkirakan
</div>
<form action="modul/permohonan/action.php"
method="post">
<div class="sub-title">No Uang Muka </div>
<div class="row">
<div class="col-md-4">
<div>
<input type="text" class="form- control input-sm" value="IT-5" name="kd_permohonan"
id="kd_permohonan" readonly>
</div>
</div>
<div class="col-md-8"></div>
</div>
<div class="sub-title">Pilih Anggaran **
<em class="description text-primary">( Sesuaikan Permohonan anda dengan Kode Anggaran yang telah ditentukan )
</em>
</div>
<div>
<select class="form-control input-sm" name="kd_anggaran"
id="kd_anggaran" style="width:100%" required>
<option value="" selected>Pilih anggaran</option></select>
</div>
<div class="sub-title">
Keterangan
<em class="description text-
danger">( Masukan Lampiran kebutuhan permohonan anda ) </em>
</div>
<div>
<textarea id="editor" rows="3"
name="keterangan" id="keterangan" required></textarea>
</div>
<br>
<div>
<button type="submit" class="btn btn-
success" id="PermohonanProcess"
name="PermohonanProcess">Proses</button>
<a href="?page=data-permohonan"
class="btn btn-danger">Batal</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="app-footer">
<div class="wrapper"><span class="pull-right">Versi 2.1 <a href="#"><i class="fa fa-angle-double-up top-up"></i></a></span>
© Right Reserved PahTsung School 2017 </div>
</footer>
</div>
<!-- Modal setting user -->
<div class="modal fade in" id="Modalusersetting">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header md-header">
<button type="button" class="close" data- dismiss="modal" aria-label="Close"><span aria- hidden="true">×</span></button>
<h4 id="myModalLabel" class="modal-title"><i class="fa fa-user"></i> Form User Edit</h4>
</div>
<div class="modal-body edit-user" style="max- height:550px; overflow-y: auto;">
</div>
</div>
</div>
</div>
<!--alert-->
<script src="lib/js/alertify.min.js"></script>
<script src="lib/js/jquery-1.10.2.js"></script>
<!-- Javascript Libs -->
<script type="text/javascript" src="lib/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/loading.js"></script>
<script type="text/javascript" src="lib/ajax.js"></script>
<script type="text/javascript" src="lib/mymoney.js"></script>
<script type="text/javascript" src="lib/js/select2.full.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/samples/js/sample.js"></script>
<script src="ckeditor/tinymce.js"></script>
<!-- Javascript -->
<script type="text/javascript" src="lib/js/app.js"></script>
<script type="text/javascript" src="lib/js/index.js"></script>
</body>
</html>
3. Form Pertanggungjawaban
<!DOCTYPE html>
<html>
<head>
<title>E-budgeting</title>
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="icon" href="img/favicon.ico">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?
family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?
family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<!-- CSS Libs -->
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/font- awesome.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/select2.min.css">
<!--datepicker-->
<link href="lib/css/bootstrap-datetimepicker.css" rel="stylesheet"
media="screen">
<link href="lib/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
media="screen">
<link rel="stylesheet" type="text/css"
href="lib/css/dataTables.bootstrap.css">
<!--alert-->
<link rel="stylesheet" href="themes/alertify.core.css" />
<link rel="stylesheet" href="themes/alertify.bootstrap.css"/>
<div class="row content-container">
<nav class="navbar navbar-default navbar-fixed-top navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-expand-toggle">
<i class="fa fa-bars icon"></i>
</button>
<ol class="breadcrumb navbar-breadcrumb">
<li class="active"><img src="img/loggo.gif"
alt="loggo"></li>
</ol>
<button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
<i class="fa fa-th icon"></i>
</button>
</div>
<ul class="nav navbar-nav navbar-right">
<button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
<i class="fa fa-times icon"></i>
</button>
<li class="info">
<a href='#' class='dropdown-toggle'><img
src='profile/small_1518121742.jpg' class='nav-user-photo'
alt='1518121742.jpg'></a>
</li>
<li class="dropdown profile">
<a href="#" class="dropdown-toggle" data- toggle="dropdown" role="button" aria-expanded="false">Mr. Kasnawi
<span class="caret"></span></a>
<ul class="dropdown-menu animated
fadeInDown">
<li>
<div class="profile-info">
<h4 class="username">Mr.
Kasnawi</h4>
<p>[email protected]</p>
<div class="btn-group margin-bottom-2x" role="group">
<a
href="#Modalusersetting" class="btn btn-default setting-user" id="u17"
data-toggle="modal" data-dismiss="modal"><i class="fa fa-gears fa- fw"></i> Setting</a>
<a href="logout.php"
type="button" class="btn btn-default"><i class="fa fa-sign-out"></i>
Logout</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="side-menu sidebar-inverse">
<nav class="navbar navbar-default" role="navigation">
<div class="side-menu-container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<div class="icon">
<div><img src="img/loggo.png" width="35"></div>
</div>
<div class="title">PAH TSUNG SCHOOL</div>
</a>
<button type="button" class="navbar-expand-toggle pull-right visible-xs">
<i class="fa fa-times icon"></i>
</button>
</div>
<ul class="nav navbar-nav">
<li class="">
<a href="http://pahtsung99/e-budgeting/">
<span class="icon fa fa-home"></span><span class="title">Beranda</span>
</a>
</li>
<li id="transaksi-permohonan" class="">
<a href="?page=transaksi-permohonan">
<span class="icon fa fa-paper-plane"></span><span class="title">Pemohonan Uang Muka</span>
</a>
</li>
<li id="transaksi-pertanggungjawaban" class="active">
<a href="?page=transaksi-pertanggungjawaban">
<span class="icon fa fa-thumbs-o-up"></span><span class="title">Pertanggungjawaban</span>
</a>