/gist:9ce2d7eda3132eec464fb0369b5aae79

## gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input Pengeluaran</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="asset/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="asset/bootstrap/compiled/theme_styles.css"/>
<link rel="stylesheet" type="text/css" href="asset/bootstrap/libs/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="asset/bootstrap/libs/nanoscroller.css"/>
<link rel="stylesheet" href="asset/bootstrap/libs/datepicker.css" type="text/css"/>
<link rel="stylesheet" href="asset/bootstrap/libs/daterangepicker.css" type="text/css"/>
<link rel="stylesheet" href="asset/bootstrap/libs/bootstrap-timepicker.css" type="text/css"/>
<link rel="stylesheet" href="asset/bootstrap/libs/select2.css" type="text/css"/>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>

<body>
<?php
include "koneksi.php";
$sql = $conn->prepare("SELECT max(kode) as maxKode FROM data");
$sql->execute();
$hasil = $sql->fetch();
$kodePay = $hasil['maxKode'];
$noUrut = (int) substr($kodePay, 5);
$noUrut++;
$char = "OUT17";
$newID = $char . sprintf("%03s", $noUrut);

?>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
<ul class="nav nav-pills nav-stacked">
<li class="nav-header nav-header-first hidden-sm hidden-xs">
Navigation
</li>
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
<span class="label label-primary label-circle pull-right">23</span>
</a>
</li>

<div id="content-wrapper">
<div class="col-lg-12">
<div class="main-box">
<div class="main-box-body clearfix">
    <header class="main-box-header clearfix">
    <h2>Form Input Payout</h2>	</header>
	<form name="form1" id="validasiform" action="save.php" method="post" />

	<div class="form-group">
    <label>Kode</label>
			<input type="text" class="form-control col-md-4" name="kode" size="10" value="<?php echo $newID; ?>" readonly />
    </div>
	<div class="form-group">
    	<label>Bulan</label>
        <select name="bulan" class="form-control col-md-4" readonly>
			<option value="Desember" selected> Desember </option>
		</select>
    </div>
	<div class="form-group">
    	<label>Tahun</label>
        <select name="tahun" class="form-control col-md-4" readonly>
			<option value="2017" selected> 2017 </option>
		</select>
    </div>

    <div class="form-group">
    	<label>Keterangan</label>
        <input type="text" class="form-control col-md-2" name="keterangan" size="30" required />
    </div>
	<div class="form-group">
    	<label>Asal</label>
        <input type="text" class="form-control col-md-2" name="asal" size="10" required />
    </div>
	<div class="form-group">
    	<label>Jumlah</label>
        <input type="text" class="form-control col-md-2" name="jumlah"  required />
    </div>
	<div class="form-group">
    	<br />
    </div>
        <div class="form-group">
    	<input type="submit" class="btn btn-success" name="submit" value="Simpan" />
    </div>
	<div class="form-group">
    	<?php
		$sql2 = $conn->prepare("SELECT id,kode,jumlah,SUM(jumlah) AS total FROM data GROUP BY id");
		$sql2 -> execute();
		$total = 0;
		while ($row = $sql2->fetch())
			{
				$total += $row['total'];
			}

		echo 'Total= Rp.' .number_format($total, 0, ',', '.'). ', -';


		?>
    </div>

    </form>

</div>
</div>
</div>
</div>
</div>
<script>
	$(function($) {
		//tooltip init
		$('#exampleTooltip').tooltip();

		//nice select boxes
		$('#sel2').select2();

		$('#sel2Multi').select2({
			placeholder: 'Select a Country',
			allowClear: true
		});

		//masked inputs
		$("#maskedDate").mask("99/99/9999");
		$("#maskedPhone").mask("(999) 999-9999");
		$("#maskedPhoneExt").mask("(999) 999-9999? x99999");
		$("#maskedTax").mask("99-9999999");
		$("#maskedSsn").mask("999-99-9999");

		$("#maskedProductKey").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});

		$.mask.definitions['~']='[+-]';
		$("#maskedEye").mask("~9.99 ~9.99 999");

		//datepicker
		$('#datepickerDate').datepicker({
		  format: 'mm-dd-yyyy'
		});

		$('#datepickerDateComponent').datepicker();

		//daterange picker
		$('#datepickerDateRange').daterangepicker();

		//timepicker
		$('#timepicker').timepicker({
			minuteStep: 5,
			showSeconds: true,
			showMeridian: false,
			disableFocus: false,
			showWidget: true
		}).focus(function() {
			$(this).next().trigger('click');
		});

		//autocomplete simple
		$('#exampleAutocompleteSimple').typeahead({
			prefetch: '/data/countries.json',
			limit: 10
		});

		//autocomplete with templating
		$('#exampleAutocomplete').typeahead({
			name: 'twitter-oss',
			prefetch: '/data/repos.json',
			template: [
				'<p class="repo-language">{{language}}</p>',
				'<p class="repo-name">{{name}}</p>',
				'<p class="repo-description">{{description}}</p>'
			].join(''),
			engine: Hogan
		});

		//password strength meter
		$('#examplePwdMeter').pwstrength({
			label: '.pwdstrength-label'
		});

	});
	</script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Input Pengeluaran</title>
	<link href="styles/kendo.common.min.css" rel="stylesheet" />
	<link href="styles/kendo.default.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="asset/bootstrap/css/bootstrap.min.css" >
	<link rel="stylesheet" type="text/css" href="asset/bootstrap/compiled/theme_styles.css"/>
	<link rel="stylesheet" type="text/css" href="asset/bootstrap/libs/font-awesome.css"/>
	<link rel="stylesheet" type="text/css" href="asset/bootstrap/libs/nanoscroller.css"/>
	<link rel="stylesheet" href="asset/bootstrap/libs/datepicker.css" type="text/css"/>
	<link rel="stylesheet" href="asset/bootstrap/libs/daterangepicker.css" type="text/css"/>
	<link rel="stylesheet" href="asset/bootstrap/libs/bootstrap-timepicker.css" type="text/css"/>
	<link rel="stylesheet" href="asset/bootstrap/libs/select2.css" type="text/css"/>
	<script src="js/jquery.min.js"></script>
	<script src="js/kendo.web.min.js"></script>
	</head>

	<body>
	<?php
	include "koneksi.php";
	$sql = $conn->prepare("SELECT max(kode) as maxKode FROM data");
	$sql->execute();
	$hasil = $sql->fetch();
	$kodePay = $hasil['maxKode'];
	$noUrut = (int) substr($kodePay, 5);
	$noUrut++;
	$char = "OUT17";
	$newID = $char . sprintf("%03s", $noUrut);

	?>
	<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
	<ul class="nav nav-pills nav-stacked">
	<li class="nav-header nav-header-first hidden-sm hidden-xs">
	Navigation
	</li>
	<li>
	<a href="index.html">
	<i class="fa fa-dashboard"></i>
	<span>Dashboard</span>
	<span class="label label-primary label-circle pull-right">23</span>
	</a>
	</li>

	<div id="content-wrapper">
	<div class="col-lg-12">
	<div class="main-box">
	<div class="main-box-body clearfix">
	<header class="main-box-header clearfix">
	<h2>Form Input Payout</h2> </header>
	<form name="form1" id="validasiform" action="save.php" method="post" />

	<div class="form-group">
	<label>Kode</label>
	<input type="text" class="form-control col-md-4" name="kode" size="10" value="<?php echo $newID; ?>" readonly />
	</div>
	<div class="form-group">
	<label>Bulan</label>
	<select name="bulan" class="form-control col-md-4" readonly>
	<option value="Desember" selected> Desember </option>
	</select>
	</div>
	<div class="form-group">
	<label>Tahun</label>
	<select name="tahun" class="form-control col-md-4" readonly>
	<option value="2017" selected> 2017 </option>
	</select>
	</div>

	<div class="form-group">
	<label>Keterangan</label>
	<input type="text" class="form-control col-md-2" name="keterangan" size="30" required />
	</div>
	<div class="form-group">
	<label>Asal</label>
	<input type="text" class="form-control col-md-2" name="asal" size="10" required />
	</div>
	<div class="form-group">
	<label>Jumlah</label>
	<input type="text" class="form-control col-md-2" name="jumlah" required />
	</div>
	<div class="form-group">
	<br />
	</div>
	<div class="form-group">
	<input type="submit" class="btn btn-success" name="submit" value="Simpan" />
	</div>
	<div class="form-group">
	<?php
	$sql2 = $conn->prepare("SELECT id,kode,jumlah,SUM(jumlah) AS total FROM data GROUP BY id");
	$sql2 -> execute();
	$total = 0;
	while ($row = $sql2->fetch())
	{
	$total += $row['total'];
	}

	echo 'Total= Rp.' .number_format($total, 0, ',', '.'). ', -';


	?>
	</div>

	</form>

	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	$(function($) {
	//tooltip init
	$('#exampleTooltip').tooltip();

	//nice select boxes
	$('#sel2').select2();

	$('#sel2Multi').select2({
	placeholder: 'Select a Country',
	allowClear: true
	});

	//masked inputs
	$("#maskedDate").mask("99/99/9999");
	$("#maskedPhone").mask("(999) 999-9999");
	$("#maskedPhoneExt").mask("(999) 999-9999? x99999");
	$("#maskedTax").mask("99-9999999");
	$("#maskedSsn").mask("999-99-9999");

	$("#maskedProductKey").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});

	$.mask.definitions['~']='[+-]';
	$("#maskedEye").mask("~9.99 ~9.99 999");

	//datepicker
	$('#datepickerDate').datepicker({
	format: 'mm-dd-yyyy'
	});

	$('#datepickerDateComponent').datepicker();

	//daterange picker
	$('#datepickerDateRange').daterangepicker();

	//timepicker
	$('#timepicker').timepicker({
	minuteStep: 5,
	showSeconds: true,
	showMeridian: false,
	disableFocus: false,
	showWidget: true
	}).focus(function() {
	$(this).next().trigger('click');
	});

	//autocomplete simple
	$('#exampleAutocompleteSimple').typeahead({
	prefetch: '/data/countries.json',
	limit: 10
	});

	//autocomplete with templating
	$('#exampleAutocomplete').typeahead({
	name: 'twitter-oss',
	prefetch: '/data/repos.json',
	template: [
	'<p class="repo-language">{{language}}</p>',
	'<p class="repo-name">{{name}}</p>',
	'<p class="repo-description">{{description}}</p>'
	].join(''),
	engine: Hogan
	});

	//password strength meter
	$('#examplePwdMeter').pwstrength({
	label: '.pwdstrength-label'
	});

	});
	</script>
	</body>
	</html>