Aplikasi ini dapat digunakan untuk perhitungan seperti halnya kalkulator, diantara perhitungannya seperti penjumlahan, pengurangan, pembagian, dan perkalian yang dapat anda akses secara online karena aplikasi ini dibuat dengan menggunakan bahasa pemrograman PHP MySQL, Berikut ini adalah contoh tampilan aplikasi aritmatika yang telah dibuat.
Bagi anda, yang membutuhkan aplikasi ini, mari kita belajar dan menyimak tutorial yang akan saya terangkan kepada anda semua.
Seperti biasa sebelum kita membuat Aplikasi Web, alangkah baiknya terlebih dahulu untuk mempersiapkan hal-hal yang sekiranya diperlukan dalam pembuatan aplikasi web ini, seperti :
- Aplikasi Xampp
- Text Editor
- Web Browser
Langkah Membuat Aplikasi Aritmatika
- Buka aplikasi Text Eript ditor pada komputer anda, seperti Notepad, Notepad ++, Dreamwever, Sublime Text, dll
- Kemudian Setelah terbuka, buatlah sebuah script untuk membuat halaman index.php, sehingga akan tampil pada gambar diatas.
<!DOCTYPE html>
<html>
<head>
<title>APLIKASI BENGKEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!--jquery-->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<link rel="stylesheet" href="dist/css/summernote.css">
<script src="dist/js/summernote.js"></script></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="#" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>R</b>CK</span>
<!-- logo for regular state and mobile devices --><strong>BENGKEL MESRA</strong></a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="glyphicon glyphicon-menu-hamburger"></span> </a> </nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<?php include'menu.php'; ?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- Main content -->
<section class="content">
<?php
if(isset($_GET['page']))
{
switch($_GET['page'])
{
case 'penjumlahan': include'penjumlahan.php'; break;
case 'pengurangan': include'pengurangan.php'; break;
case 'perkalian': include'perkalian.php'; break;
case 'pembagian': include'pembagian.php'; break;
case 'list_berita': include'list_berita.php';$order=3; break;
}
}
?>
</section>
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Versi</b> 1.0 </div>
<strong>Copyright © 2016 Rujito Hermawan</strong> </footer>
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- Bootstrap 3.3.5 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.konten').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'hr']],
['view', ['fullscreen', 'codeview']]
],
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
setTimeout(function () {
document.execCommand('insertText', false, bufferText);
}, 10);
}
});
});
</script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
$("#example1").DataTable({
"order": [[<?php echo $order; ?>, "desc"]]
});
});
</script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>-->
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<script>
$('#tgl_agenda').datepicker({
format: 'dd-mm-yyyy'
})
</script>
</body>
</html> - Setelah selesai, buat juga menunya, gunakan script berikut ini.<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<!-- search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MENU BENGKEL MESRA</li>
<li class="treeview"><a href="halaman.php?page=menuh"><i class="glyphicon glyphicon-home"></i> <span>Halaman User</span></a>
<i class="fa fa-angle-left pull-right"></i>
</li>
<li class="treeview">
<a href="#">
<i class="glyphicon glyphicon-list"></i> <span>Lihat Data</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="index.php?page=penjumlahan"><i class="glyphicon glyphicon-list active"></i> Penjumlahan</a></li>
<li><a href="index.php?page=pengurangan"><i class="glyphicon glyphicon-list"></i> Pengurangan</a></li>
<li><a href="index.php?page=perkalian"><i class="glyphicon glyphicon-list active"></i> Perkalian</a></li>
<li><a href="index.php?page=pembagian"><i class="glyphicon glyphicon-list"></i> Pembagian</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="glyphicon glyphicon-dashboard"></i> <span>Cetak Data</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="halaman.php?page=spk"><i class="glyphicon glyphicon-list active"></i> SPK Montir</a></li>
<li><a href="halaman.php?page=list_berita"><i class="glyphicon glyphicon-pencil"></i> BPSPK</a></li>
<li><a href="halaman.php?page=karyawan"><i class="glyphicon glyphicon-user"></i> LHA</a></li>
</ul>
</li>
<li class="treeview">
<a href="halaman.php?page=admin">
<i class="glyphicon glyphicon-file"></i> <span>Laporan</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="halaman.php?page=admin"><i class="glyphicon glyphicon-list active"></i> Daftar SPK Montir</a></li>
<li><a href="halaman.php?page=list_berita"><i class="glyphicon glyphicon-user"></i> Daftar BPSPK </a></li>
<li><a href="halaman.php?page=karyawan"><i class="glyphicon glyphicon-user" color="red"></i> Daftar LHA</a></li>
</ul>
</li>
<li class="treeview"><a href="halaman.php?page=keluar"><i class="glyphicon glyphicon-off"></i><span> Keluar </span></a></li>
</ul>
</section>
<!-- /.sidebar -->
</aside> - Setalah tampilan halaman selesai, langkah selanjutnya yaitu membuat script tampilan penjumlahan, pengurangan, pembagian dan perkalian, silahkan anda gunakan script dibawah ini.<html>
<body>
<h2> PENJUMLAHAN </h2>
<hr>
<form method="post" action="hasil penjumlahan.php">
Nilai 1 = <input type="number" name="a" value="<?php echo $_POST["b"] ?>" required><br>
Nilai 2 = <input type="number" name="b" value="<?php echo $_POST["b"] ?>" required><br>
<br><input type="submit" value="hasil">
</form>
</body>
</html><html>
<body>
<h1> PENGURANGAN </h1>
<form method="post" action="hasil pengurangan.php">
Nilai 1 = <input type="number" name="a" value="<?php echo $_POST["b"] ?>" required><br>
Nilai 2 = <input type="number" name="b" value="<?php echo $_POST["b"] ?>" required><br>
<br><input type="submit" value="hasil">
</form>
</body>
</html><html>
<body>
<h1> PEMBAGIAN </h1>
<form method="post" action="hasil pembagian.php">
Nilai 1 = <input type="number" name="a" value="<?php echo $_POST["a"] ?>" required><br>
Nilai 2 = <input type="number" name="b" value="<?php echo $_POST["b"] ?>" required><br>
<br><input type="submit" value="hasil">
</form>
</body>
</html><html>
<body>
<h1> PERKALIAN </h1>
<form method="post" action="hasil perkalian.php">
Nilai 1 = <input type="number" name="a" value="<?php echo $_POST["b"] ?>" required><br>
Nilai 2 = <input type="number" name="b" value="<?php echo $_POST["b"] ?>" required><br>
<br><input type="submit" value="hasil">
</form>
</body>
</html> - Pada langkah ke-4 kita sudah membuat tampilan halaman dari fungsi aritmatika, langkah selanjutnya yaitu membuat script fungsi aritmatika tujuannya yaitu untuk menjalankan aplikasi aritmatika tersebut.
Untuk yang tertarik dengan aplikasi aritmatika diatas silahkan download sourcecode aplikasinya dibawah ini
0 Comments