Tutorial Codeigniter Part 7 – Integrasi Framework CSS (Materialize)

codeigniter-kcdev
Advertisements

Ada banyak sekali framework CSS yang bisa kita gunakan dalam project kita. Framework CSS ini akan sangat memudahkan dan mempercepat kita untuk menyelesaikan sebuah project karena semua tampilan user interface yang kita butuhkan sudah tersedia. Nah pada kesempatan kali ini kita akan mencoba untuk meng-integrasi framework css materialize pada codeigniter. Bagi yang belum mengunduh file materialize nya silahkan mengunjungi website materialize atau bisa mengklik link ini.

1. Menambahkan Folder Assets

Melanjutkan tutorial sebelumnya (part 6), kita akan menambahkan folder baru yang bernama assets dimana folder ini akan berisi file-file css dan javascript yang akan kita gunakan. Kemudian kita akan membuat tiga folder baru yang masing-masing bernama:

  • images untuk menyimpan file-file gambar dan logo
  • css untuk menyimpan file-file css
  • js untuk menyimpan file-file javascript

Setelah itu, mari mengekstrak kulit manggis file materialize kedalam folder assets sehingga struktur folder kita akan terlihat seperti dibawah ini.

codeigniter
|-application
|-assets
| |-materialize
| | |-css
| | |-fonts
| | |-js
| |-images
| | |-logo.png
| | |-nav.jpg
| |-css
| | |-kcdev.css
| |-js
| | |-kcdev.js
|-system
.htaccess
index.php

2. Meng-update template

Langkah selanjutnya adalah mengubah template layout yang sudah kita buat sebelumnya. Kita akan mengikuti layout standar dari materialize. Mari kita update view template nya.

Pada file header.php menjadi seperti berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
    <title><?php echo $pageTitle; ?> | Kcdev Admin</title>

    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="<?php echo base_url('assets/materialize/css/materialize.css'); ?>" type="text/css" rel="stylesheet" media="screen,projection"/>
    <link href="<?php echo base_url('assets/css/kcdev.css'); ?>" type="text/css" rel="stylesheet" media="screen,projection"/>
  </head>
  <body>
    <header>
      <nav class="light-blue lighten-1 navbar-fixed" role="navigation">
        <div class="nav-wrapper container">
          <a id="logo-container" href="<?php echo base_url('#'); ?>" class="brand-logo center">
            <img src="<?php echo base_url('assets/images/logo.png'); ?>" alt="Kcdev Logo">
          </a>
          <a href="#" data-activates="sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
      </nav>
    </header>

Pada file footer.php menjadi seperti berikut:

    <footer class="page-footer white">
      <div class="footer-copyright amber darken-1">
        <div class="container center">
          Copyright &copy; <a class="white-text text-lighten-3" href="https://www.kcdev.id">Kcdev Interactive Software</a>
        </div>
      </div>
    </footer>

   <!-- Scripts -->
   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="<?php echo base_url('assets/materialize/js/materialize.js'); ?>"></script>
   <script src="<?php echo base_url('assets/js/kcdev.js'); ?>"></script>
  </body>
</html>

Pada file sidebar.php menjadi seperti berikut:

<aside>
  <ul id="sidenav" class="side-nav fixed">
    <li>
      <div class="userView">
        <div class="background">
          <img src="<?php echo base_url('assets/images/nav.jpg'); ?>">
        </div>
        <a href="#!user"><img class="circle" src="<?php echo base_url('assets/images/noavatar.png'); ?>"></a>
        <a href="#!name"><span class="white-text name">Abdul Manaaf Saparuddin</span></a>
        <a href="#!email"><span class="white-text email">nafplann@gmail.com</span></a>
      </div>
    </li>
    <li>
      <a class="waves-effect" href="<?php echo base_url('dashboard'); ?>"><i class="material-icons">home</i>Dashboard</a>
    </li>
  </ul>
</aside>
Advertisements

Pada file content.php menjadi seperti berikut:

<main>
 <div class="container">
   <?php echo $pageContent; ?>
 </div>
</main>

Pada file kcdev.css menjadi seperti berikut:

.brand-logo img {
  max-width: 140px;
  margin-top: 15px
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}

header, main, footer {
  padding-left: 300px;
}

main {
  padding-top: 20px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

@media only screen and (min-width: 993px) {
  .container {
      width: 95%;
  }
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.dashboard-row {
  margin-bottom: 0px;
}

.dashboard-title {
  margin-top: 5px;
  margin-left: 40px;
}

Pada file kcdev.js menjadi seperti berikut:

$(document).ready(function() {
  $('.button-collapse').sideNav();
  $('select').material_select();
});

3. Testing

Setelah melakukan sedikit konfigurasi pada view template kita, sekarang kita akan mencoba mengakses controller codeigniter kita melalui web browser http://localhost/codeigniter/dashboard. Jika muncul tampilan seperti di bawah ini berarti kita telah berhasil meng-integrasi framework css pada project codeigniter, jika tidak pastikan adiks tidak melewati satupun langkah-langkah di atas.

Tutorial Codeigniter Part 7 - Integrasi Framework CSS (Materialize)

Sekian tutorial kali ini, semoga bermanfaat.

“Amal yang paling dicintai oleh Allah adalah yang terus menerus walaupun sedikit” (HR. Bukhari & Muslim).

Advertisements

Salam kulit manggis

kaceManaf

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

21 Replies to “Tutorial Codeigniter Part 7 – Integrasi Framework CSS (Materialize)

      1. A PHP Error was encountered
        Severity: Error

        Message: Call to undefined function base_url()

        Filename: template/sidebar.php

        Line Number: 4

        Backtrace:

        1. di config autoload.php tambahkan parameter url
          $autoload[‘helper’] = array(‘url’);

          default
          $autoload[‘helper’] = array(”);

  1. I can see the list of my .php files in localhost/Practice (Practice is the folder where I’ve saved my files) The file even opens whenever I click on it. But when I click on any ‘submit’ button inside any of my files, it gives this error. Please help! I updated xampp from 1.8.1 to 1.8.2 but still the same problem persists!

        1. jika menggunakan google chrome, mungkin bisa dicoba untuk klik kanan pada page dan klik inspect element kemudian pada tab ‘console’ pastikan tidak ada error

  2. template hancur.. apa mungkin karena file materialize terbaru sementara yang di tutorial versi lama?…

  3. Assalamualaikum mas…
    boleh nanyak tidak…
    ketika saya mengikuti tutorial ni cssnya nggk muncul mas
    tu knp ya?

Leave a Reply

Your email address will not be published. Required fields are marked *