Membuat Navigation

Navigation digunakan dalam situs web untuk berpindah dari satu halaman ke halaman lainnya. Navigation ini biasanya terletak bagian atas halaman web. Pada tutorial kali ini kita akan membuat view component navigation bar dengan menggunakan tampilan materializeCSS. Jadi, pastikan untuk menyelesaikan tutorial Pengenalan bagian 2 sebelum melanjutkan tutorial ini. Sehingga pengaturan view, view component, beserta temanya sudah disetel dan berjalan dengan baik.

Membuat View Component

Pertama-tama kita akan membuat view component khusus untuk navigation bar di app/view/front/page/html/navbar.php. Berikut ini adalah kode sumbernya.

x
–
+
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="<?=base_url()?>">Test</a></li>

    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li><a href="<?=base_url()?>">Test</a></li>
</ul>

Panggil ke dalam layout col-1

Setelah view component-nya selesai, sekarang panggil view component tersebut melaui layout col-1.php. Berikut ini adalah kode sumbernya

x
–
+
<!DOCTYPE html>
<html>
  <?php $this->getThemeElement('page/html/head', $__forward) ?>
  <body>
    <!-- Panggil view component navbar -->
    <?php $this->getThemeElement('page/html/navbar', $__forward) ?>

    <?php $this->getThemeContent() ?>

    <!-- jQuery, Bootstrap.js, jQuery plugins and Custom JS code -->
    <?php $this->getJsFooter(); ?>

    <!-- Load and execute javascript code used only in this page -->
    <script>
      $(document).ready(function(e){
        $('.sidenav').sidenav();
        <?php $this->getJsReady(); ?>
      });
      <?php $this->getJsContent(); ?>
    </script>
  </body>
</html>

Mencoba tampilan navbar

Untuk mencoba halaman dengan view component navbar, cukup ketikan buka url seperti dibawah ini.

x
–
+
http://localhost/seme_framework/

Referensi

Berikut ini adalah referensi fungsi yang digunakan dalam tutorial ini.

  1. Navbar materializeCSS
  2. getThemeElement
  3. loadLayout
  4. View Theme
Tutorial: Notfound Page
Tutorial: Login Register