31 Dec, 2020 | Ditulis oleh : Fadlur Rohman
Laravel adalah salah framework php dengan pengguna terbanyak. Dengan banyaknya pengguna otomatis ketika kita menghadapi error akan lebih mudah menemukan solusin...
Halo, kali ini kita akan membuat template untuk aplikasi gis yang akan kita buat. Sebelumnya kita telah membuat file homepage.php di folder views. Template yang akan kita buat dengan cara membuat folder “templates” di dalam folder views. Dari file homepage.php kita pecah menjadi dua file, yaitu header-admin.php dan footer-admin.php dan kita letakkan di dalam folder templates.
# homepage.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Gis</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container text-center">
<h1>Simple Gis</h1>
<p>
Berbasis codeigniter
</p>
</div>
</body>
</html>
Pada header-admin.php kita akan menambahkan menu navigasi, yaitu data dan koordinat, untuk menu data terdapat 2 menu yaitu jalan dan jembatan. Sedangkan menu koordinat terdapat 2 menu yaitu menu koordinatjalan dan koordinat jembatan.
# header-admin.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Gis</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class="glyphicon glyphicon-list"></span> Data <b class='caret'></b></a>
<ul class='dropdown-menu'>
<li><?php echo anchor('admin/jalan','Jalan') ?></li>
<li><?php echo anchor('admin/jembatan','Jembatan') ?></li>
</ul>
</li>
<li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class="glyphicon glyphicon-globe"></span> Koordinat <b class='caret'></b></a>
<ul class='dropdown-menu'>
<li><?php echo anchor('admin/koordinatjalan','Koordinat Jalan') ?></li>
<li><?php echo anchor('admin/koordinatjembatan','Koordinat Jembatan') ?></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--header admin-->
# footer-admin.php
<!--footer admin-->
</body>
</html>
Related Post :
22 Jan, 2021 - Fadlur Rohman
Laravel 8 menyediakan sistem authentication untuk SPA (single page app...
31 Dec, 2020 - Fadlur Rohman
Laravel telah dilengkapi fitur untuk membuat backend API, diantaranya:...
31 Dec, 2020 - Fadlur Rohman
Sistem login untuk aplikasi simplegis sudah kita buat sebelumnya, untu...
31 Dec, 2020 - Fadlur Rohman
Pada aplikasi simple gis yang kita buat, pengguna dapat mengakses hala...
31 Dec, 2020 - Fadlur Rohman
Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, bia...
31 Dec, 2020 - Fadlur Rohman
Setelah kita membuat database untuk menyimpan data hasil mon...