Pada bagian ke-7 ini, aplikasi gis akan digabungkan dengan jquery dan bootstrap. Download bootstrap disini selanjutnya buat folder "assets" di dalam folder simplegis. Kemudian copas folder di dalam folder dist ke dalam folder assets tadi yang terdiri dari folder css, js, font dan img.
Buka kembali folder view, kemudian edit file "header.php" di dalam folder templates menjadi seperti ini :
Buka kembali folder view, kemudian edit file "header.php" di dalam folder templates menjadi seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Gis</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.css');?>">
<style>
</style>
<script src="<?php echo base_url('assets/js/jquery-1.11.1.min.js');?>"></script>
<script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo site_url('admin'); ?>">GIS</a>
</div>
<ul class="nav navbar-nav">
<li><a href="<?php echo site_url('admin/jalan') ?>">Jalan</a></li>
<li><a href="<?php echo site_url('admin/jembatan') ?>">Jembatan</a></li>
<li><a href="<?php echo site_url('admin/koordinatjalan') ?>">Koordinat Jalan</a></li>
<li><a href="<?php echo site_url('admin/koordinatjembatan') ?>">Koordinat Jembatan</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--content-->
Selain folder templates, edit juga file di folder admin.- jalanform.php
- jembatanform.php
- editjalanform.php
- editjembatanform.php
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<form action="<?php echo site_url('admin/createjalan') ?>" method="POST">
<div class="form-group">
<label for="namajalan">Nama Jalan</label>
<input type="text" name="namajalan" class="form-control">
</div>
<div class="form-group">
<label for="keterangan">Keterangan</label>
<textarea name="keterangan" id="keterangan" cols="30" rows="10" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="submit" value="simpan" class="btn btn-primary">
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<?php if ($itemjalan->num_rows()!=null) {
$no = 1;
echo "<table class='table'>";
echo "<th>No</th>";
echo "<th>Nama Jalan</th>";
echo "<th>Keterangan</th>";
foreach ($itemjalan->result() as $jalan) {
echo "<tr>";
echo "<td>".$no++."</td>";
echo "<td>".$jalan->namajalan."</td>";
echo "<td>".$jalan->keterangan."</td>";
echo "<td><a href='".site_url('admin/editjalan')."/".$jalan->id_jalan."'>edit</a>";
echo " <a href='".site_url('admin/deletejalan')."/".$jalan->id_jalan."'>delete</a></td>";
echo "</tr>";
}
echo "</table>";
} ?>
</div>
</div>
</div>
Kedua kita edit file "jembatanform.php" menjadi :
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<form action="<?php echo site_url('admin/createjembatan') ?>" method="POST">
<div class="form-group">
<label for="namajembatan">Nama jembatan</label>
<input type="text" name="namajembatan" class="form-control">
</div>
<div class="form-group">
<label for="keterangan">Keterangan</label>
<textarea name="keterangan" id="keterangan" cols="30" rows="10" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="submit" value="simpan" class="btn btn-primary">
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<?php if ($itemjembatan->num_rows()!=null) {
$no = 1;
echo "<table class='table'>";
echo "<th>No</th>";
echo "<th>Nama jembatan</th>";
echo "<th>Keterangan</th>";
foreach ($itemjembatan->result() as $jembatan) {
echo "<tr>";
echo "<td>".$no++."</td>";
echo "<td>".$jembatan->namajembatan."</td>";
echo "<td>".$jembatan->keterangan."</td>";
echo "<td><a href='".site_url('admin/editjembatan')."/".$jembatan->id_jembatan."'>edit</a>";
echo " <a href='".site_url('admin/deletejembatan')."/".$jembatan->id_jembatan."'>delete</a></td>";
echo "</tr>";
}
echo "</table>";
} ?>
</div>
</div>
</div>
Ketiga kita edit file "editjalanform.php" menjadi :<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<form action="<?php echo site_url('admin/updatejalan') ?>" method="POST">
<?php
if ($itemjalan->num_rows()!=null) {
foreach ($itemjalan->result() as $jalan) {
echo '<div class="form-group">';
echo '<label for="id_jalan">ID Jalan</label>';
echo '<input type="text" name="id_jalan" value="'.$jalan->id_jalan.'" class="form-control">';
echo '</div>';
echo '<div class="form-group">';
echo '<label for="namajalan">Nama Jalan</label>';
echo '<input type="text" name="namajalan" value="'.$jalan->namajalan.'" class="form-control">';
echo '</div>';
echo '<div class="form-group">';
echo '<label for="keterangan">Keterangan</label>';
echo '<textarea name="keterangan" id="keterangan" cols="30" rows="10" class="form-control">'.$jalan->keterangan.'</textarea>';
echo '</div>';
echo '<div class="form-group">';
echo '<input type="submit" value="update" class="btn btn-primary">';
echo '</div>';
}
}
?>
</form>
</div>
</div>
</div>
Terakhir keempat kita edit file "editjembatanform.php" menjadi :<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<form action="<?php echo site_url('admin/updatejembatan') ?>" method="POST">
<?php
if ($itemjembatan->num_rows()!=null) {
foreach ($itemjembatan->result() as $jembatan) {
echo '<div class="form-group">';
echo '<label for="id_jembatan">ID Jembatan</label>';
echo '<input type="text" name="id_jembatan" value="'.$jembatan->id_jembatan.'" class="form-control">';
echo '</div>';
echo '<div class="form-group">';
echo '<label for="namajembatan">Nama Jembatan</label>';
echo '<input type="text" name="namajembatan" value="'.$jembatan->namajembatan.'" class="form-control">';
echo '</div>';
echo '<div class="form-group">';
echo '<label for="keterangan">Keterangan</label>';
echo '<textarea name="keterangan" id="keterangan" cols="30" rows="10" class="form-control">'.$jembatan->keterangan.'</textarea>';
echo '</div>';
echo '<div class="form-group">';
echo '<input type="submit" value="update" class="btn btn-primary">';
echo '</div>';
}
}
?>
</form>
</div>
</div>
</div>
Sehingga saat kita akses dibrowser http://localhost/simplegis tampilannya akan berusah menjadi seperti ini.