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

31 Dec, 2020 | Ditulis oleh : Fadlur Rohman

Rekomendasi Kelas
Membangun Toko Online Menggunakan Laravel

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 :

Rest Api Authentication Laravel 8 menggunakan sanctum

22 Jan, 2021 - Fadlur Rohman

Laravel 8 menyediakan sistem authentication untuk SPA (single page app...

Restful API Menggunakan Laravel Framework

31 Dec, 2020 - Fadlur Rohman

Laravel telah dilengkapi fitur untuk membuat backend API, diantaranya:...

Sistem registrasi menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Sistem login untuk aplikasi simplegis sudah kita buat sebelumnya, untu...

Membuat sistem login menggunakan codeigniter ion auth

31 Dec, 2020 - Fadlur Rohman

Pada aplikasi simple gis yang kita buat, pengguna dapat mengakses hala...

Membuat Grafik Menggunakan CanvasJs

31 Dec, 2020 - Fadlur Rohman

Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, bia...

Rest Web Service Codeigniter Bagian Keempat (API KEY)

31 Dec, 2020 - Fadlur Rohman

Setelah kita membuat&nbsp;database&nbsp;untuk menyimpan data hasil mon...

Mau Bikin Aplikasi Web & Aplikasi Android?

Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir

Silahkan kontak link di bawah ini untuk teknis dan harganya