Aplikasi GIS Geographic Information system berbasis web (codeigniter) – bagian IV

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>

Template untuk aplikasi gis sudah siap, selanjutnya kita akan membuat CRUD (Create, Read, Update dan Delete) data jalan.

7 thoughts on “Aplikasi GIS Geographic Information system berbasis web (codeigniter) – bagian IV

    • puri ardila Balas

      mas bagi koding template-admin nya donk.. yang mas kirin tidak bisa dibuka..

  1. Pingback: Aplikasi GIS Geographic Information system berbasis web (codeigniter) – bagian IV – Kodingan

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.