Home PHP Programming Tutorial Tutorial CRUD Aplikasi PO Bus Menggunakan PHP dan Bootstrap part 1

Tutorial CRUD Aplikasi PO Bus Menggunakan PHP dan Bootstrap part 1

Selamat siang semuanya kali ini saya akan membagikan tutorial membuat program PO Bus menggunakn PHP dan bootstrap. Sebelumnya saya sangat berterimakasih kepada penyedia source code. Saya mempelajari sourcenya dan saya telah modifikasi beberapa bagian.


Contoh Source Code Original dari aplikasi yang saya pelajari dan modifikasi beberapa bagian ini.

Untuk itu saya ingin membagikan tutorialnya serta beberapa penambahan fitur.

Pertama - tama, mari kita buat sebuah folder dalam htdocs. bebas apa saja.

Kemudian, buka localhost/phpmyadmin lalu buat database dengan nama 'terminal_bdis' lalu go dan buka databasenya kemudian klik tab sql dan copy code berikut.
-- phpMyAdmin SQL Dump -- version 4.3.11 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Jul 13, 2017 at 08:19 AM -- Server version: 5.6.24 -- PHP Version: 5.5.24 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Database: `terminal_bdis` -- -- -------------------------------------------------------- -- -- Table structure for table `admin` -- CREATE TABLE IF NOT EXISTS `admin` ( `adminid` int(11) NOT NULL, `branchid` int(11) NOT NULL, `firstname` varchar(100) NOT NULL, `lastname` varchar(100) NOT NULL, `username` varchar(100) NOT NULL, `password` varchar(100) NOT NULL, `confirm_password` varchar(100) NOT NULL, `user_type` varchar(100) NOT NULL, `date_added` varchar(100) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=latin1; -- -- Dumping data for table `admin` -- INSERT INTO `admin` (`adminid`, `branchid`, `firstname`, `lastname`, `username`, `password`, `confirm_password`, `user_type`, `date_added`) VALUES (1, 1, 'Arya Adhi', 'Prasetya', 'arya_pwp', '2ad6f04015710f5c25c8c20e2d6c597eb13f3989', '2ad6f04015710f5c25c8c20e2d6c597eb13f3989', 'Admin', 'Aug 27 2015 11:37 AM'), (11, 6, 'ade', 'Roy', 'ade', '6fb0394b969258c4f33b92bbe8c601462bb5455b', '6fb0394b969258c4f33b92bbe8c601462bb5455b', 'Dispatcher', 'Jul 09 2017 05:23 PM'); -- -------------------------------------------------------- -- -- Table structure for table `branch` -- CREATE TABLE IF NOT EXISTS `branch` ( `branchid` int(11) NOT NULL, `branch_location` varchar(100) NOT NULL, `date_added` varchar(100) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1; -- -- Dumping data for table `branch` -- INSERT INTO `branch` (`branchid`, `branch_location`, `date_added`) VALUES (5, 'Jakarta', 'Jul 09 2017 05:16 PM'), (6, 'Bogor', 'Jul 09 2017 05:16 PM'); -- -------------------------------------------------------- -- -- Table structure for table `bus` -- CREATE TABLE IF NOT EXISTS `bus` ( `busid` int(11) NOT NULL, `bus_number` varchar(100) NOT NULL, `bus_type` varchar(100) NOT NULL, `harga` int(11) NOT NULL, `date_added` varchar(100) NOT NULL, `bus_travel` varchar(100) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1; -- -- Dumping data for table `bus` -- INSERT INTO `bus` (`busid`, `bus_number`, `bus_type`, `harga`, `date_added`, `bus_travel`) VALUES (3, '113', 'Bussiness', 200000, 'Aug 29 2015 02:56 PM', 'No'), (4, '675', 'Economy', 150000, 'Aug 29 2015 02:56 PM', 'Yes'), (5, '355', 'Economy', 150000, 'Sep 07 2015 12:46 PM', 'Yes'), (6, '234', 'Economy', 150000, 'Sep 15 2015 04:54 PM', 'No'), (7, '3542', 'Super Executive', 300000, 'Sep 17 2015 02:09 PM', 'No'), (8, '5225', 'Executive', 100000, 'September 22,2015 8:05AM', 'No'), (9, '5532', 'Economy', 150000, 'September 22,2015 8:15AM', 'No'), (10, '1999', 'Bussiness', 200000, 'Jul 10 2017 08:34 AM', ''); -- -------------------------------------------------------- -- -- Table structure for table `driver` -- CREATE TABLE IF NOT EXISTS `driver` ( `driverid` int(11) NOT NULL, `firstname` varchar(100) NOT NULL, `lastname` varchar(100) NOT NULL, `contact_number` varchar(100) NOT NULL, `profile` varchar(100) NOT NULL, `date_added` varchar(100) NOT NULL, `driver_travel` varchar(100) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=latin1; -- -- Dumping data for table `driver` -- INSERT INTO `driver` (`driverid`, `firstname`, `lastname`, `contact_number`, `profile`, `date_added`, `driver_travel`) VALUES (13, 'Pengemudi', 'Utama Satu', '081319798765', 'has.jpg', 'Jul 09 2017 05:16 PM', ''), (14, 'Putra', 'Ganteng', '085299110909', 'bitcoin-1813545_1280.jpg', 'Jul 10 2017 02:55 AM', ''); -- -------------------------------------------------------- -- -- Table structure for table `route` -- CREATE TABLE IF NOT EXISTS `route` ( `from_location` varchar(100) NOT NULL, `destination_location` varchar(100) NOT NULL, `price` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `route` -- INSERT INTO `route` (`from_location`, `destination_location`, `price`) VALUES ('Bogor', 'Jakarta', 10000); -- -------------------------------------------------------- -- -- Table structure for table `schedule` -- CREATE TABLE IF NOT EXISTS `schedule` ( `scheduleid` int(11) NOT NULL, `busid` varchar(100) NOT NULL, `driverid` varchar(100) NOT NULL, `from_location` varchar(100) NOT NULL, `destination_location` varchar(100) NOT NULL, `passanger` int(11) NOT NULL, `departure_time` datetime NOT NULL, `arrival_time` datetime NOT NULL, `terminal_location` varchar(100) NOT NULL, `status` varchar(100) NOT NULL, `status_operation` varchar(100) NOT NULL, `arrived_at_destination` varchar(100) NOT NULL, `date_added` datetime NOT NULL, `income` bigint(255) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=27 DEFAULT CHARSET=latin1; -- -- Dumping data for table `schedule` -- INSERT INTO `schedule` (`scheduleid`, `busid`, `driverid`, `from_location`, `destination_location`, `passanger`, `departure_time`, `arrival_time`, `terminal_location`, `status`, `status_operation`, `arrived_at_destination`, `date_added`, `income`) VALUES (12, '8', '13', 'Bogor', 'Jakarta', 100, '2017-07-11 04:00:00', '2017-07-12 04:28:15', 'Jakarta', 'Arrive', 'Arrived At Destination', 'Yes', '2017-07-10 03:35:37', 1000000), (26, '3', '14', 'Bogor', 'Jakarta', 100, '2017-07-10 12:00:00', '0000-00-00 00:00:00', 'Jakarta', 'Travel', 'On Travel', 'Not Yet', '2017-07-10 08:52:55', 200000000000); -- -------------------------------------------------------- -- -- Table structure for table `type` -- CREATE TABLE IF NOT EXISTS `type` ( `class` varchar(25) NOT NULL, `price` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `type` -- INSERT INTO `type` (`class`, `price`) VALUES ('Bussiness', 200000), ('Economy', 150000), ('Super Executive', 300000), ('Executive', 100000); -- -- Indexes for dumped tables -- -- -- Indexes for table `admin` -- ALTER TABLE `admin` ADD PRIMARY KEY (`adminid`); -- -- Indexes for table `branch` -- ALTER TABLE `branch` ADD PRIMARY KEY (`branchid`); -- -- Indexes for table `bus` -- ALTER TABLE `bus` ADD PRIMARY KEY (`busid`); -- -- Indexes for table `driver` -- ALTER TABLE `driver` ADD PRIMARY KEY (`driverid`); -- -- Indexes for table `schedule` -- ALTER TABLE `schedule` ADD PRIMARY KEY (`scheduleid`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `admin` -- ALTER TABLE `admin` MODIFY `adminid` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=12; -- -- AUTO_INCREMENT for table `branch` -- ALTER TABLE `branch` MODIFY `branchid` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7; -- -- AUTO_INCREMENT for table `bus` -- ALTER TABLE `bus` MODIFY `busid` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=11; -- -- AUTO_INCREMENT for table `driver` -- ALTER TABLE `driver` MODIFY `driverid` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=15; -- -- AUTO_INCREMENT for table `schedule` -- ALTER TABLE `schedule` MODIFY `scheduleid` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=27; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Sebelumnya buat dulu folder db lalu didalamnya buat file dbcon.php untuk koneksi ke database.
<?php mysql_select_db('terminal_bdis',mysql_connect('localhost','root',''))or die(mysql_error());?>

Kalau sudah pada folder project buat file php dengan nama clock_lcd.php. Dan copy syntax berikut.

<span id="digitalclock" style="font-size:20px;"></span>

<script>
var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="11"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+"   "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+" : "+minutes+" "+"<sup style='font-size:70%'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+" : "+minutes+" "+"<sup style='font-size:70%'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
</script>

Lalu buat file currentdate.php. Copy syntax berikut.

<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<font face='Arial'><b style='font-size:12px;'>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font>")
</script>
Monday, April 14, 2025

Kalau sudah buat file footer.php, dan copycan syntax berikut

</div>
</div>
<div class="clearfix"></div>

<footer>

<p>
<span style="text-align:left;float:left">&copy; <?php echo date('Y'); ?> <a alt="Bus Dispatch and Information System">Bus Dispatch and Information System</a></span>

</p>

</footer>

<!-- start: JavaScript-->

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>

<script src="js/jquery-ui-1.10.0.custom.min.js"></script>

<script src="js/jquery.ui.touch-punch.js"></script>

<script src="js/modernizr.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.cookie.js"></script>

<script src='js/fullcalendar.min.js'></script>

<script src='js/jquery.dataTables.min.js'></script>

<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

<script src="js/jquery.chosen.min.js"></script>

<script src="js/jquery.uniform.min.js"></script>

<script src="js/jquery.cleditor.min.js"></script>

<script src="js/jquery.noty.js"></script>

<script src="js/jquery.elfinder.min.js"></script>

<script src="js/jquery.raty.min.js"></script>

<script src="js/jquery.iphone.toggle.js"></script>

<script src="js/jquery.uploadify-3.1.min.js"></script>

<script src="js/jquery.gritter.min.js"></script>

<script src="js/jquery.imagesloaded.js"></script>

<script src="js/jquery.masonry.min.js"></script>

<script src="js/jquery.knob.modified.js"></script>

<script src="js/jquery.sparkline.min.js"></script>

<script src="js/counter.js"></script>

<script src="js/retina.js"></script>

<script src="js/custom.js"></script>
<!-- end: JavaScript-->

</body>
</html>
Kemudian kita buat file dengan nama header.php, syntaxnya sebagai berikut

<!DOCTYPE html>
<html lang="en">
<head>

<!-- start: Meta -->
<meta charset="utf-8">
<title>Bus Dispatch and Information System</title>
<!-- end: Meta -->

<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->

<!-- start: CSS -->
<link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<!-- end: CSS -->


<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link id="ie-style" href="css/ie.css" rel="stylesheet">
<![endif]-->

<!--[if IE 9]>
<link id="ie9style" href="css/ie9.css" rel="stylesheet">
<![endif]-->

<!-- start: Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- end: Favicon -->

<script>
<!--

/*
Auto Refresh Page with Time script
By JavaScript Kit (javascriptkit.com)
Over 200+ free scripts here!
*/

//enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59
var limit="0:10"

var doctitle = document.title
var parselimit=limit.split(":")
parselimit=parselimit[0]*60+parselimit[1]*1

function beginrefresh(){
if (parselimit==1)
window.location.reload()
else{
parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!"
else
curtime=cursec+" seconds left until page refresh!"
document.title = doctitle + ' (' + curtime +')'
setTimeout("beginrefresh()",1000)
}
}

if (window.addEventListener)
window.addEventListener("load", beginrefresh, false)
else if (window.attachEvent)
window.attachEvent("load", beginrefresh)

//-->
</script>


</head>

<body>
<!-- start: Header -->
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand"><span>Bus Dispatch and Information System</span></a>

<!-- start: Header Menu -->
<div class="nav-no-collapse header-nav">
<ul class="nav pull-right">
<li style="margin:10px;">
<?php include('currentdate.php'); ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php include('clock_lcd.php'); ?>
</li>
</ul>
</div>
<!-- end: Header Menu -->

</div>
</div>
</div>
<!-- start: Header -->

<div class="container-fluid-full">
<div class="row-fluid">



<!-- start: Content -->

Selanjutnya buat file dengan nama index.php. Syntaxnya adalah sebagai berikut.

<?php require('header.php'); ?>

<ul class="breadcrumb" style="margin-top:1px;">
<li>
<i class="icon-home"></i>
<a href="index.php">Sagay Bus Terminal</a>
<i class="icon-angle-right"></i>
</li>
<li><a href="#">Viewing Schedule</a></li>
</ul>

<table class="table table-striped table-bordered" style="width:90%; margin:auto;">
<h2 style="text-indent:20px;">Bogor to Jakarta </h2>
 <thead>
 <tr>
 <th>Driver Name</th>
 <th>Bus Number</th>
 <th>Bus Type</th>
 <th>From</th>
 <th>Destination</th>
 <th>Departure</th>
 <th>Arrival</th>
 <th>Terminal Location</th>
 <th>Status</th>
 </tr>
 </thead>
 <tbody>
<?php
include ('db/dbcon.php');
$result= mysql_query("select * from schedule
LEFT JOIN bus ON schedule.busid = bus.busid
LEFT JOIN driver ON schedule.driverid = driver.driverid
 where destination_location='Jakarta' ORDER BY schedule.scheduleid DESC ") or die (mysql_error());
while ($row= mysql_fetch_array ($result) ){
$id=$row['scheduleid'];
$busid=$row['busid'];
$driverid=$row['driverid'];



?>
<tr>
<td><?php echo $row['firstname']." ".$row['lastname']; ?></td>
<td><span class="label label-success"><?php echo $row['bus_number']; ?></span></td>
<td><?php echo $row['bus_type']; ?></td>
<td><?php echo $row['from_location']; ?></td>
<td><?php echo $row['destination_location']; ?></td>
<td><span class="label label-info"><?php echo date("M d, Y H:i:s",strtotime($row['departure_time'])); ?></span></td>
<td><span class="label label-success"><?php echo ($row['arrival_time'] == "0000-00-00 00:00:00") ? "Travel" : date("M d, Y H:i:s",strtotime($row['arrival_time'])); ?></span></td>
<td><span class="label label-success"><?php echo $row['terminal_location']; ?></span></td>
<?php
if ($row['status_operation'] == 'On Travel') {
echo "<td><span class='label label-info'>".$row['status_operation']."</span></td>";
} elseif ($row['status_operation'] == 'Cancelled') {
echo "<td><span class='label label-warning'>".$row['status_operation']."</span></td>";
} else {
echo "<td><span class='label label-success'>".$row['status_operation']."</span></td>";
}
?>
</tr>
<?php } ?>
 </tbody>
 </table>

<br />
<br />
<br />

<table class="table table-striped table-bordered" style="width:90%; margin:auto;">
<h2 style="text-indent:20px;">Sagay to Bacolod City </h2>
 <thead>
 <tr>
 <th>Driver Name</th>
 <th>Bus Number</th>
 <th>Bus Type</th>
 <th>From</th>
 <th>Destination</th>
 <th>Departure</th>
 <th>Arrival</th>
 <th>Terminal Location</th>
 <th>Status</th>
 </tr>
 </thead>
 <tbody>
<?php
include ('db/dbcon.php');
$result= mysql_query("select * from schedule
LEFT JOIN bus ON schedule.busid = bus.busid
LEFT JOIN driver ON schedule.driverid = driver.driverid
 where destination_location='Bacolod City' ORDER BY schedule.scheduleid DESC ") or die (mysql_error());
while ($row= mysql_fetch_array ($result) ){
$id=$row['scheduleid'];
$busid=$row['busid'];
$driverid=$row['driverid'];
?>
<tr>
<td><?php echo $row['firstname']." ".$row['lastname']; ?></td>
<td><span class="label label-success"><?php echo $row['bus_number']; ?></span></td>
<td><?php echo $row['bus_type']; ?></td>
<td><?php echo $row['from_location']; ?></td>
<td><?php echo $row['destination_location']; ?></td>
<td><span class="label label-info"><?php echo date("M d, Y H:i:s",strtotime($row['departure_time'])); ?></span></td>
<td><span class="label label-success"><?php echo ($row['arrival_time'] == "0000-00-00 00:00:00") ? "Travel" : date("M d, Y H:i:s",strtotime($row['arrival_time'])); ?></span></td>
<td><span class="label label-success"><?php echo $row['terminal_location']; ?></span></td>
<?php
if ($row['status_operation'] == 'On Travel') {
echo "<td><span class='label label-info'>".$row['status_operation']."</span></td>";
} elseif ($row['status_operation'] == 'Cancelled') {
echo "<td><span class='label label-warning'>".$row['status_operation']."</span></td>";
} else {
echo "<td><span class='label label-success'>".$row['status_operation']."</span></td>";
}
?>
</tr>
<?php } ?>
 </tbody>
 </table>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<?php require('footer.php'); ?>
Dan buat file session.php dengan syntax seperti berikut.
<?php
session_start();
if (!isset($_SESSION['id'])){
header('location:index.php');
}
$id_session=$_SESSION['id'];
?>

Nah itulah tutorial part 1 untuk membuat po bus menggunakan php dan bootstrap kita akan lanjut di part 2

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)