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/layout/partials/navbar.php. Berikut ini adalah kode sumbernya.

–

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

Panggil elemen navbar di layout `one_column`

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

–

<!DOCTYPE html>
<html>
  <!-- load head.php file as partial html element -->
  <?php $this->getThemeElement('layout/partials/head', $__forward) ?>
  <body>
    <!-- load navbar.php inside body before main content -->
    <?php $this->getThemeElement('layout/partials/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){
        <?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.

–

http://localhost/seme_framework/

Referensi

Berikut ini adalah referensi fungsi yang digunakan dalam tutorial ini.

Membuat Navigation

Membuat View Component

Panggil elemen navbar di layout one_column

Mencoba tampilan navbar

Referensi

Panggil elemen navbar di layout `one_column`