Categories

Manufacturers

  • Join Our Community
  • Follow us
  • Join Our Community
Home>CodeIgniter dengan CSS, Header, Sidebar, Main, dan Footer

Persiapan Awal
Pertama kali kita harus menyiapkan beberapa file yang akan digunakan, file-file tersebut adalah header.php, sidebar.php, main.php, dan footer.php, serta sebuah file CSS yang kita beri nama desain.css.

Memulai Codeigniter
Setelah CodeIginiter terinstall dengan sempurna (dapat dibaca disini). Langkah selanjutnya adalah membuat 4 buah file yang akan kita jadikan konten, dan controller yang akan memanggil file-file tersebut dan menggabungkannya menjadi sebuah halaman web utuh.

-desain.css
Terlebih dahulu, buatlah direktori khusus CSS di root pada server (kita menggunakan folder dengan nama CSS) dimana kita akan meletakkan file desain.css tersebut kedalam direktori tersebut. Isi dari css kita yang sederhana adalah sebagai berikut :

body {

   background:#FFF;

   text-align:center;

}

 

#container{

   width:900px;

   margin:auto;

}

 

#header{

   width:900px;

   margin:auto;

   height:30px;

}

 

#content{

   width:900px;

   margin:auto;

}

 

#sidebar{

   width:300px;

   float:left;

}

 

#main{

   width:600px;

   float:right;

}

 

#footer{

   width:900px;

   clear:both;

}

-Konfigurasi Awal

Setelah kita mempersiapkan CSS dan disimpan didalam direktori CSS pada root web kita, maka selanjutnya adalah mempersiapkan CodeIgniternya.

  1. Mengaktifkan URL Helper pada autoload.
    Untuk mengaktifkannya, kita mengkonfigurasikan pada file autoload.php yang terdapat pada /system/application/config/autoload.php.
    Cari baris
    $autoload['helper'] = array('url');
    Kita telah mengaktifkan URL helper pada Aplikasi kita.
  2. Mengaktifkan default controller pada file yang akan kita buat dengan nama "userpage.php", untuk mengaktifkan dapat membaca disini.

-userpage.php
Buatlah file userpage.php dan disimpan didalam direktori "system/application/controllers/" dengan isi sebagai berikut :

<?php

class Userpage extends Controller {  //perhatikan bahwa huruf "U" harus besar

        function Userpage() //begitu juga dengan huruf "U" difungsi

        {

               parent::Controller(); 

        }

        function index()

        {

               $this->load->view('header');

                $this->load->view('sidebar');

                $this->load->view('main');

                $this->load->view('footer');

        }

}

?>

-header.php
Langkah berikutnya adalah membuat file header.php dengan kode sebagai berikut :

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="<?=base_url();?>css/desain.css">

<title>Untitled Document</title>

</head>

 

<body>

 

<div id="container">

        <div id="header">

        <h1>Web Ku Pertama</h1>

    </div>

    <div id="content">


Perlu diperhatikan perintah <?=base_url();?> untuk memanggil URL dasar pada web kita kemudian menuju ke folder CSS dan mengambil file desain.css. Langkah ini sebenarnya berguna apabila site kita dibangun pada subfolder. Misalnya kita mencoba pada localhost.

-sidebar.php
File sidebar.php akan berisi kode sebagai berikut :

         <div id="sidebar">

               <h2>Menu Sidebar</h2>

               <p>Hai disini nanti menu sidebar</p>

         <div>

-main.php
Kode file main.php adalah sebagai berikut :

         <div id="main">

               <h1>Selamat Datang di Web Ku Pertama</h1>

            <p>Ini adalah bagian main</p>

         </div>

-footer.php
Dan untuk kode footer.php adalah sebagai berikut :

         <div id="footer">

               <p>Copyright 998</p>

         </div>

    </div>

</div>

</body>

</html>

Semua file header.php,sidebar.php,main.php, dan footer.php disimpan didalam direktori "system/application/views/".

Selamat mencoba

 




HomeHome

Cart  

(empty)