Anggota : Rahadyan D.G (30210172)
Suslianto Hadi S (30210213)
Ayu Ekarani Swandhita (30210178)


WEB TEMPLATE
“Web template adalah kunci baik untuk web desain”

Mengapa demikan??

   Jika seseorang ingin membuat situs Web yang baik,
yang mempunyai kualitas tinggi, kemudian
menggunakan web template adalah pilihan terbaik.
mereka tidak hanya efektif biaya ketika datang ke
desain, tetapi juga merupakan cara tercepat untuk
membuat situs. sebagai dengan norma untuk
menciptakan sebuah situs web, akan ada banyak
masalah yang satu untuk memecahkan telah
membuatnya sempurna.
SISTEM TEMPLATING
    Sistem templating adalah salah satu fitur
atau library yang harus dipikirkan di dalam
CodeIgniter, karena CodeIgniter memiliki metode
yang sangat sederhana. Tidak memiliki
sistem layout, widget dan lain-lain.

   Untuk membuat sistem templating di
CodeIgniter kita dapat membuat sendiri dengan
Menggunakan fungsi-fungsi yang telah
Disediakan oleh CodeIgniter atau kita juga dapat
menggunakan sistem templating yang sudah ada
dan populer.
Kegunaan sistem templating adalah :
   Kerja Sama Tim Yang Lebih Baik -

           Dengan pemisahan menggunakan templating ini, maka rekan bagian pengerjaan desain
tidak lagi terganggu oleh kode program yang Anda buat. Begitupun Anda, tidak khawatir lagi
script/kode program yang telah dibuat akan terganggu.

   Skrip/code Yang Bersih -

          Situs dengan aplikasi kompleks, misalnya sebuah portal, pasti memerlukan skrip yang
kompleks yang menghabiskan sampai ribuan baris. Tentunya akan sangat mengganggu sekali
kalau skrip yang sudah memusingkan itu ditambah lagi dengan tag-tag HTML di dalamnya.

   Perubahan Tampilan Lebih Cepat Dan Mudah -

         Dengan pemisahan melalui template, hal tersebut dapat dilakukan dengan mudah,
bahkan tanpa harus merombak skrip PHP Sedikit pun.
Dengan menyusun view-view yang ada, kita
sebenarnya dapat membuat sebuah tempate
library yang cukup powerful. Idenya
sederhana saja, cukup membagi sebuah halaman
menjadi beberapa area. Dari desain tersebut dapat
kita bagi menjadi area header, top menu, right
menu dan content. Masing-masing area tersebut
akan digabungkan dalam satu halaman utuh yang
dinamakan template.
Masing-masing area tersebut akan
ditangani oleh sebuah view agar tidak terjadi
duplikasi dan akan mempermudah
penggunaan kembali area tersebut. Adapun
area-area tesebut dapat dilihat pada gambar
berikut.
Template yang akan dibuat terbagi menjadi emp
  at
bagian yaitu Header (berfungsi sebagai tempat
logo dan slogan aplikasi ), Top menu (bagian
menu utama disebelah atas), Right Menu (me
  nu
navigasi tambahan disebelah kanan) dan sebu
  ah
Content. Area content ini lah yang seringkali
berubah pada setiap page.
Untuk mengimplementasikan sistem templating
 tersebut sebaiknya kita buat sebuah library
 template.
Adapun langkah-langkah yang harus dilakukan
 adalah:
1.   MEMBUAT LIBRARY TEMPLATE

Fungsi library tersebut hanya mengatur view mana
yang akan dipanggil dan meletakkannya di
Dalam template.
Kenapa membuatnya dalam sebuah library?
Karena dengan cara ini
memberikan flesibilitas terhadap sistem template
Cara pembuatan library ini diawali dengan
membuat sebuah file bernama template.php pada
folder application/libraries. Adapun isi file
template.php adalah:
application/libraries/template.php
1. <?php
2. class Template {
3. protected $_ci;
4. function __construct()
5. {
6. $this->_ci =&get_instance();
7. }
8.
9. function display($template,$data=null)
10. {
11. $data['_content']=$this->_ci->load->view($template,$data, true);
12. $data['_header']=$this->_ci->load-
   >view('template/header',$data,true);
13. $data['_top_menu']=$this->_ci->load-
  >view( 'template/menu',$data, true);
14. $data['_right_menu']=$this->_ci->load-
  >view( 'template/sidebar',$data, true);
15. $this->_ci->load-
  >view('/template.php',$data);
16. }
17. }
Perhatikan fungsi display, disana ada dua parameter yaitu
template dan data. Parameter data
berfungsi sebagai data yang akan dikirimkan ke controller.
Sedangkan template adalah view
yang akan dipanggil untuk ditampilkan sebagai content utama.
Pada template ini akan dibagi
menjadi empat area yaitu content, header, top menu, dan right menu
   .
Masing-masing area diisi
Oleh sebuah view (perhatikan baris          11,13,15,17). Masing-
   masing
view tadi di-load dan
disimpan dalam memori. Lalu digabungkan kedalam sebuah templat
   e
(baris 15).
2.   MEMBUAT TEMPLATE LAYOUT VIEW

Sebuah template layout view adalah sebua
  h
view yang akan menggabungkan
masing-masing
view menjadi suatu bentuk kesatuan. Adapun i
  si
dari template layout adalah:
Application/view/template.php

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3.  <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
4.  <head>
5.  <meta http-equiv="content-type" content="text/html; charset=utf-
    8"/>
6. <link rel="stylesheet"type="text/css"href="<?php echo
        base_url();?>public/style.css"/>
7. <title>Sistem Template CodeIgniter Template</title>
8. </head>
9. <body>
10. <divid="wrap">
11. <divid="header">
12.   <!--
13.       Area Header
14.   -->
15.   <?php echo $_header;?>
16.   </div>
17.   <div id="menu">
18.   <!--
19.       Area Top Menu
20.   -->
21.   <?php echo $_top_menu;?>
22.   </div>
23.   <div id="contentwrap">
24. <div id="content">
25. <!--
26. Area content
27. -->
28. <?php echo $_content;?>
29.
30. </div>
31.
32. <div id="sidebar">
33. <!--
34. Area Right Menu
35. -->
36. <?php echo $_right_menu;?>
37. </div>
38. <div style="clear: both;"></div>
39. </div>
40.
41. <div id="footer">
42. <p>Copyright &copy;<ahref="#">Ibnoe</a> | Design
    by
43. <a href="http://www.readcrazyreviews.com">
44. Read Crazy Reviews</a></p>
45. </div>
46.
47. </div>
48.
49. </body>
50. </html>
File diatas merupakan penggabung dari
semua bagian yang telah dibahas.
Perhatikan baris
15, 21, 28, dan 36. Keempat variabel
tersebut akan diisi view dari
masing-masing bagian.
Berikut ini adalah
view-view yang menjadi part/area dari template
A.   VIEW HEADER

Application/view/template/header.php
1. <h1><a href="#">Red Wall Template</a
  ></h1>
2. <h2>Your web site slogan goes here
  </h2>
B.   VIEW TOP MENU

Application/view/template/menu.php
1. <ul>
2. <li><a href="#">Home</a></li>
3. <li><a href="#">Articles</a></li>
4. <li><a href="#">About Us</a></li>
5. <li><a href="#">Resources</a></li>
6. <li><a href="#">Contact Us</a></li>
7. </ul>
C.       VIEW SIDEBAR MENU

Application/view/template/sidebar.php
1. <h3>Main Content</h3>
2. <ul>
3. <li><a href="#">Conflantur</a></li>
4. <li><a href="#">Externarum vi</a></li>
5. <li><a href="#">Essem paulo</a></li>
6. <li><a href="#">Aeque fecto ii</a></li>
7. <li><a href="#">Quo locis utens</a></li>
8. </ul>
9.
10. <h3>Related Web Sites</h3>
11. <ul>
12. <li><a href="#">Plus vi</a></li>
13. <li><a href="#">Agi praecise</a></li>
14. <li><a href="#">Infinitum veritates</a></li>
15. <li><a href="#">Corporea ac perpauca</a></li>
16. <li><a href="#">Aeque fecto</a></li>
17. </ul>
Setelah memiliki view ketiga area tersebut
(header, top menu dan sidebar) maka kita siap
untuk
menggunakan sistem template ini. Selanjutnya
adalah membuat sebuah controller. Agar lebih
mudah pembuatan
controllernya maka gunakan saja controller defau
  lt
dari CodeIgniter, yaitu
dengan sedikit melakukan perubahan kode program pa
  da
controller-nya.
Application/controllers/welcome.php
1.
        <?php if (! defined('BASEPATH')) exit('No direct script
     access
allowed');
2.
3. class Welcome extends CI_Controller {
4.
5. function __construct()
6. {
7. parent::__construct();
8. $this->load->library('template');
9. $this->load->helper('url');
10. }
11.
12.   function index()
13.   {
14.     $this->template->display('welcome_message');
15.   }
16.
17.   function contoh_parameter()
18.   {
19.     $this->template->display('view_parameter',
20.     array('judul'=>'judul View'));
21. }
22.
23. }
24.
25. /* End of file welcome.php */
26. /* Location: ./application/controllers/welco
  me.php */
Kita harus menyiapkan sebuah
view yang bernama welcome_message.
View tersebut akan diletakkan pada area
content.
Isi viewnya sama dengan view pada umumnya.
1. <h1>Welcome to CodeIgniter!</h1>
2.
3. <p>The page you are looking at is being generated dynamically by
CodeIgniter.</p>
4.
5. <p>If you would like to edit this page you'll find it located
at:</p>
6. <code>application/views/welcome_message.php</code>
7.
8. <p>The corresponding controller for this page is found at:</p>
9. <code>application/controllers/welcome.php</code>
10.
11. <p>If you are exploring CodeIgniter for the very first time,
12. you should start by reading the <a href="user_guide/">User
13. Guide</a>.</p>
14.
15.
16. <p><br />Page rendered in {elapsed_time} seconds</p>
B. DESAIN
      public/style.css

1.    a{text-decoration:none;}
2.    a:hover{color:#CCC;}
3.    h1 a{
4.            font-size:30px;}
5.    h2{
6.            font-size:18px;
7.            font-weight:normal;
8.            }
9.    h3{
10.           border:1px solid #CCC;
11.           padding :10px 20px;
12.           box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
13.           -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
14.           }
15.   body{
16.           background-color:#333;}
17.   #wrap{
18.              width:1000px;
19.              margin: 0px auto;
20.              }
21.   #header{
22.            border:1px solid #930;
23.            margin:0px auto;
24.            padding:5px 10px;
25.            background:#930;
26.            }
27.   #header h2,#header h1 a{
28.            color:#FFF;
29.            margin-top:1px;
30.            font-family:Verdana, Geneva, sans-serif;
31.            }
32.   #menu{
33.            margin-top:-50px;}
34.   #menu ul{
35.            border:1px solid #666;
36.            padding:10px;
37.            background-color:#666;
38.            }
39.   #menu ul li{
40.           display:inline;
41.           list-style:none;
42.           border:1px solid transparent;
43.           padding: 5px
44.           }
45.   #menu ul li:hover{
46.           background-color:#F4F4F4;
47.           box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
48.           -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
49.           }
50.   #menu ul li a{
51.           color:#FFF;
52.           }
53.   #menu ul li a:hover, #menu ul li:hover a{
54.           color:#CCC;
55.           }
56.   #contentwrap{
57.           border:1px solid transparent;
58.           background-color:#FFF;
59.           margin-top:-57px;
60.           padding : 5px;}
61.   #content{
62.           float:left;
63.           width:647px;
64.           padding:10px;
65.           box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
66.           -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
67.           margin-right:5px}
68.   #sidebar{
69.           float:right;
70.           width:30%;
71.           padding-top:0px;
72.           margin-top:-28px;}
73.   #sidebar ul{
74.           list-style-type:square;
75.           }
76.

77.   #sidebar ul li{
78.            margin:1px;
79.   }
80.   #footer{
81.            background-color:#666;
82.            padding:5px 15px;}
MEMASANG TEMPLATE KE CI
   Download CodeIgniter
    1.7.2
   Download Template
    CSS nya
   Jika kedua-dua nya
    sudah didownload.
    Ekstrak file
    CodeIgniter dalam
    root folder anda
    seperti ini misalnya
    C:/xampp/htdocs/me
    masang_template_c
    ss
   Copy Template CSS yang sudah di ekstrak tadi
    kedalam
    folderC:/xampp/htdocs/memasang_template_csss
    ystem/application/views
   File index.html diganti menjadi template.php
   Buka file template.php dengan Notepad++ atau Notepad, kemudian cari
    code ini:
    <link href="default.css" rel="stylesheet" type="text/css" media="screen" /
    >
    Ganti code diatas menjadi seperti ini:
    <link href="<?php echo base_url()?> system/ application/ views/
    default.css"rel="stylesheet" type="text/css" media="screen" />
   Disini belum terjadi apa-apa saat membuka browser dengan alamat
    http://localhost/memasang_template_css
   Sekarang masuk ke dalam
    folderC:/xampp/htdocs/memasang_template_css/system/applicatio
    n/controller,
     disini akan ada dua buah file yaitu index.html dan welcome.php.
    Hapus kedua file tersebut dan buat file baru dengan
    nama home.php, simpan ditempat yang sama
    C:/xampp/htdocs/memasang_template_css/system/application/con
    troller
   Dalam file home.php ketikkan code berikut:
    <?php
    class Home extends Controller
    {
        function Home()
        {
           parent::Controller();
        }
        function index()
        {
           $data['title'] = "Memasang Template CSS";
           $this->load->view('template', $data);
        }
    }
    ?>
   Sekarang coba buka browser nya dengan alamat
    URLhttp://localhost/memasang_template_css/index.php. Dan akan tampil
    seperti gambar ini:
   Sekarang buka file autoload.php yang berada
    padaC:/xampp/htdocs/memasang_template_css/system/application/config.
    Cari code berikut dalam file autoload.php
    $autoload['helper'] = array();
    kemudian ganti menjadi seperti ini:
    $autoload['helper'] = array(„url‟);
   Buka file config.php dalam folder yang sama dan kemudian cari code berikut
    dalam file config.php
    $config['base_url']         = "http://example.com/";
    kemudian ganti menjadi seperti ini:
    $config['base_url']         = "http://localhost/memasang_template_css/";
   Buka file route.php dalam folder yang sama dan kemudian cari kode berikut
    dalam file route.php
    $route['default_controller'] = "welcome";
    kemudian ganti menjadi seperti ini:
    $route['default_controller'] = "home";
   Sekarang masuk ke browser dan reload browser apa yang terjadi kemudian :
    Coba diperhatikan pada title nya di browser disini tidak terjadi perubahan apa-
    apa bukan. Padahal tadi pada file home.php kita membuat title dengan nama
    Memasang Template CSS
    $data[„title‟] = “Memasang Template CSS”;
   jadi bagaimana cara nya supaya title nya sama dengan apa yang ditulis pada
    file home.php, begini caranya
   Buka
    file template.php, C:xampp/htdocs/memasang_template_css/system/application/vie
    ws. Dan cari code ini:<title>Gestured by Free CSS Templates</title>kemudian ganti
    menjadi seperti ini:
    <title> <?=$title?> </title>
   Pada langkah nomor 11 kan ada banyak menu tuh, bagaimana menu diberikan link nya:
        Homepage
        Services
        About Us
        Contact Us
     Dari menu diatas anda juga bisa menggantinya dengan sesuka anda.
   Untuk membuat link tersebut berfungsi. Buka file template.php (anda pasti tau dong
    dimana letak filenya).
    Cari code berikut:
    <li><a href="#">Homepage</li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    kemudian ganti menjadi seperti ini:
    <li class=”current_page_item”> <?=anchor(„/‟, „Homepage‟)?> </li>
    <li> <?=anchor(„home/services‟, „Services‟)?> </li>
    <li> <?=anchor(„home/about‟, „About Us‟)?> </li>
   Sekarang coba masuk ke browser dan coba klik salah satu menu nya
    dan apa yang terjadi. Dan pasti yang nongol page error, dan yang jalan
    Cuma satu link menu yaitu Homepage.
    Buka file home.php
    <?php
    class Home extends Controller
    {
        function Home()
        {
          parent::Controller();
        }
        function index()
        {
          $data['title'] = "Memasang Template CSS";
          $this->load->view('template', $data);
        }
    }
    ?>
   dan kemudian tambahkan code ini dibawah penutup terakhir untuk function index, sehingga
    menjadi:
    <?php
    class Home extends Controller
    {
         function Home()
         {
           parent::Controller();
         }
        function index()
         {
           $data[„title‟] = “Memasang Template CSS”;
           $this->load->view(„template‟, $data);
         }
         function services()
         {
           $data[„title‟] = “Services”;
           $this->load->view(„template‟, $data);
         }
    }
    ?>
   Nah untuk menu yang laiinnya sama saja cara pembuatannya, dan anda tinggal menambahkan
    function yang dibutuhkan saja seperti function services() yang terakhir dibuat tadi dalam
    file home.php

Web templating

  • 1.
    Anggota : RahadyanD.G (30210172) Suslianto Hadi S (30210213) Ayu Ekarani Swandhita (30210178) WEB TEMPLATE
  • 2.
    “Web template adalahkunci baik untuk web desain” Mengapa demikan?? Jika seseorang ingin membuat situs Web yang baik, yang mempunyai kualitas tinggi, kemudian menggunakan web template adalah pilihan terbaik. mereka tidak hanya efektif biaya ketika datang ke desain, tetapi juga merupakan cara tercepat untuk membuat situs. sebagai dengan norma untuk menciptakan sebuah situs web, akan ada banyak masalah yang satu untuk memecahkan telah membuatnya sempurna.
  • 3.
    SISTEM TEMPLATING Sistem templating adalah salah satu fitur atau library yang harus dipikirkan di dalam CodeIgniter, karena CodeIgniter memiliki metode yang sangat sederhana. Tidak memiliki sistem layout, widget dan lain-lain. Untuk membuat sistem templating di CodeIgniter kita dapat membuat sendiri dengan Menggunakan fungsi-fungsi yang telah Disediakan oleh CodeIgniter atau kita juga dapat menggunakan sistem templating yang sudah ada dan populer.
  • 4.
    Kegunaan sistem templatingadalah :  Kerja Sama Tim Yang Lebih Baik - Dengan pemisahan menggunakan templating ini, maka rekan bagian pengerjaan desain tidak lagi terganggu oleh kode program yang Anda buat. Begitupun Anda, tidak khawatir lagi script/kode program yang telah dibuat akan terganggu.  Skrip/code Yang Bersih - Situs dengan aplikasi kompleks, misalnya sebuah portal, pasti memerlukan skrip yang kompleks yang menghabiskan sampai ribuan baris. Tentunya akan sangat mengganggu sekali kalau skrip yang sudah memusingkan itu ditambah lagi dengan tag-tag HTML di dalamnya.  Perubahan Tampilan Lebih Cepat Dan Mudah - Dengan pemisahan melalui template, hal tersebut dapat dilakukan dengan mudah, bahkan tanpa harus merombak skrip PHP Sedikit pun.
  • 5.
    Dengan menyusun view-viewyang ada, kita sebenarnya dapat membuat sebuah tempate library yang cukup powerful. Idenya sederhana saja, cukup membagi sebuah halaman menjadi beberapa area. Dari desain tersebut dapat kita bagi menjadi area header, top menu, right menu dan content. Masing-masing area tersebut akan digabungkan dalam satu halaman utuh yang dinamakan template.
  • 6.
    Masing-masing area tersebutakan ditangani oleh sebuah view agar tidak terjadi duplikasi dan akan mempermudah penggunaan kembali area tersebut. Adapun area-area tesebut dapat dilihat pada gambar berikut.
  • 8.
    Template yang akandibuat terbagi menjadi emp at bagian yaitu Header (berfungsi sebagai tempat logo dan slogan aplikasi ), Top menu (bagian menu utama disebelah atas), Right Menu (me nu navigasi tambahan disebelah kanan) dan sebu ah Content. Area content ini lah yang seringkali berubah pada setiap page.
  • 9.
    Untuk mengimplementasikan sistemtemplating tersebut sebaiknya kita buat sebuah library template. Adapun langkah-langkah yang harus dilakukan adalah:
  • 10.
    1. MEMBUAT LIBRARY TEMPLATE Fungsi library tersebut hanya mengatur view mana yang akan dipanggil dan meletakkannya di Dalam template. Kenapa membuatnya dalam sebuah library? Karena dengan cara ini memberikan flesibilitas terhadap sistem template Cara pembuatan library ini diawali dengan membuat sebuah file bernama template.php pada folder application/libraries. Adapun isi file template.php adalah:
  • 11.
    application/libraries/template.php 1. <?php 2. classTemplate { 3. protected $_ci; 4. function __construct() 5. { 6. $this->_ci =&get_instance(); 7. } 8. 9. function display($template,$data=null) 10. { 11. $data['_content']=$this->_ci->load->view($template,$data, true); 12. $data['_header']=$this->_ci->load- >view('template/header',$data,true);
  • 12.
    13. $data['_top_menu']=$this->_ci->load- >view( 'template/menu',$data, true); 14. $data['_right_menu']=$this->_ci->load- >view( 'template/sidebar',$data, true); 15. $this->_ci->load- >view('/template.php',$data); 16. } 17. }
  • 13.
    Perhatikan fungsi display,disana ada dua parameter yaitu template dan data. Parameter data berfungsi sebagai data yang akan dikirimkan ke controller. Sedangkan template adalah view yang akan dipanggil untuk ditampilkan sebagai content utama. Pada template ini akan dibagi menjadi empat area yaitu content, header, top menu, dan right menu . Masing-masing area diisi Oleh sebuah view (perhatikan baris 11,13,15,17). Masing- masing view tadi di-load dan disimpan dalam memori. Lalu digabungkan kedalam sebuah templat e (baris 15).
  • 14.
    2. MEMBUAT TEMPLATE LAYOUT VIEW Sebuah template layout view adalah sebua h view yang akan menggabungkan masing-masing view menjadi suatu bentuk kesatuan. Adapun i si dari template layout adalah:
  • 15.
    Application/view/template.php 1. <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"> 4. <head> 5. <meta http-equiv="content-type" content="text/html; charset=utf- 8"/> 6. <link rel="stylesheet"type="text/css"href="<?php echo base_url();?>public/style.css"/> 7. <title>Sistem Template CodeIgniter Template</title> 8. </head> 9. <body> 10. <divid="wrap"> 11. <divid="header">
  • 16.
    12. <!-- 13. Area Header 14. --> 15. <?php echo $_header;?> 16. </div> 17. <div id="menu"> 18. <!-- 19. Area Top Menu 20. --> 21. <?php echo $_top_menu;?> 22. </div> 23. <div id="contentwrap">
  • 17.
    24. <div id="content"> 25.<!-- 26. Area content 27. --> 28. <?php echo $_content;?> 29. 30. </div> 31. 32. <div id="sidebar"> 33. <!-- 34. Area Right Menu 35. --> 36. <?php echo $_right_menu;?> 37. </div> 38. <div style="clear: both;"></div> 39. </div>
  • 18.
    40. 41. <div id="footer"> 42.<p>Copyright &copy;<ahref="#">Ibnoe</a> | Design by 43. <a href="http://www.readcrazyreviews.com"> 44. Read Crazy Reviews</a></p> 45. </div> 46. 47. </div> 48. 49. </body> 50. </html>
  • 19.
    File diatas merupakanpenggabung dari semua bagian yang telah dibahas. Perhatikan baris 15, 21, 28, dan 36. Keempat variabel tersebut akan diisi view dari masing-masing bagian. Berikut ini adalah view-view yang menjadi part/area dari template
  • 20.
    A. VIEW HEADER Application/view/template/header.php 1. <h1><a href="#">Red Wall Template</a ></h1> 2. <h2>Your web site slogan goes here </h2>
  • 21.
    B. VIEW TOP MENU Application/view/template/menu.php 1. <ul> 2. <li><a href="#">Home</a></li> 3. <li><a href="#">Articles</a></li> 4. <li><a href="#">About Us</a></li> 5. <li><a href="#">Resources</a></li> 6. <li><a href="#">Contact Us</a></li> 7. </ul>
  • 22.
    C. VIEW SIDEBAR MENU Application/view/template/sidebar.php 1. <h3>Main Content</h3> 2. <ul> 3. <li><a href="#">Conflantur</a></li> 4. <li><a href="#">Externarum vi</a></li> 5. <li><a href="#">Essem paulo</a></li> 6. <li><a href="#">Aeque fecto ii</a></li> 7. <li><a href="#">Quo locis utens</a></li> 8. </ul> 9. 10. <h3>Related Web Sites</h3> 11. <ul> 12. <li><a href="#">Plus vi</a></li> 13. <li><a href="#">Agi praecise</a></li> 14. <li><a href="#">Infinitum veritates</a></li> 15. <li><a href="#">Corporea ac perpauca</a></li> 16. <li><a href="#">Aeque fecto</a></li> 17. </ul>
  • 23.
    Setelah memiliki viewketiga area tersebut (header, top menu dan sidebar) maka kita siap untuk menggunakan sistem template ini. Selanjutnya adalah membuat sebuah controller. Agar lebih mudah pembuatan controllernya maka gunakan saja controller defau lt dari CodeIgniter, yaitu dengan sedikit melakukan perubahan kode program pa da controller-nya.
  • 24.
    Application/controllers/welcome.php 1. <?php if (! defined('BASEPATH')) exit('No direct script access allowed'); 2. 3. class Welcome extends CI_Controller { 4. 5. function __construct() 6. { 7. parent::__construct(); 8. $this->load->library('template'); 9. $this->load->helper('url'); 10. }
  • 25.
    11. 12. function index() 13. { 14. $this->template->display('welcome_message'); 15. } 16. 17. function contoh_parameter() 18. { 19. $this->template->display('view_parameter', 20. array('judul'=>'judul View'));
  • 26.
    21. } 22. 23. } 24. 25./* End of file welcome.php */ 26. /* Location: ./application/controllers/welco me.php */
  • 27.
    Kita harus menyiapkansebuah view yang bernama welcome_message. View tersebut akan diletakkan pada area content. Isi viewnya sama dengan view pada umumnya.
  • 28.
    1. <h1>Welcome toCodeIgniter!</h1> 2. 3. <p>The page you are looking at is being generated dynamically by CodeIgniter.</p> 4. 5. <p>If you would like to edit this page you'll find it located at:</p> 6. <code>application/views/welcome_message.php</code> 7. 8. <p>The corresponding controller for this page is found at:</p> 9. <code>application/controllers/welcome.php</code> 10. 11. <p>If you are exploring CodeIgniter for the very first time, 12. you should start by reading the <a href="user_guide/">User 13. Guide</a>.</p> 14. 15. 16. <p><br />Page rendered in {elapsed_time} seconds</p>
  • 30.
    B. DESAIN public/style.css 1. a{text-decoration:none;} 2. a:hover{color:#CCC;} 3. h1 a{ 4. font-size:30px;} 5. h2{ 6. font-size:18px; 7. font-weight:normal; 8. } 9. h3{ 10. border:1px solid #CCC; 11. padding :10px 20px; 12. box-shadow: inset 0 1px 3px rgba(51,51,51,0.95); 13. -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95); 14. } 15. body{ 16. background-color:#333;}
  • 31.
    17. #wrap{ 18. width:1000px; 19. margin: 0px auto; 20. } 21. #header{ 22. border:1px solid #930; 23. margin:0px auto; 24. padding:5px 10px; 25. background:#930; 26. } 27. #header h2,#header h1 a{ 28. color:#FFF; 29. margin-top:1px; 30. font-family:Verdana, Geneva, sans-serif; 31. } 32. #menu{ 33. margin-top:-50px;} 34. #menu ul{ 35. border:1px solid #666; 36. padding:10px; 37. background-color:#666; 38. }
  • 32.
    39. #menu ul li{ 40. display:inline; 41. list-style:none; 42. border:1px solid transparent; 43. padding: 5px 44. } 45. #menu ul li:hover{ 46. background-color:#F4F4F4; 47. box-shadow: inset 0 1px 3px rgba(51,51,51,0.95); 48. -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95); 49. } 50. #menu ul li a{ 51. color:#FFF; 52. } 53. #menu ul li a:hover, #menu ul li:hover a{ 54. color:#CCC; 55. } 56. #contentwrap{ 57. border:1px solid transparent; 58. background-color:#FFF; 59. margin-top:-57px; 60. padding : 5px;}
  • 33.
    61. #content{ 62. float:left; 63. width:647px; 64. padding:10px; 65. box-shadow: inset 0 1px 3px rgba(51,51,51,0.95); 66. -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95); 67. margin-right:5px} 68. #sidebar{ 69. float:right; 70. width:30%; 71. padding-top:0px; 72. margin-top:-28px;} 73. #sidebar ul{ 74. list-style-type:square; 75. } 76. 77. #sidebar ul li{ 78. margin:1px; 79. } 80. #footer{ 81. background-color:#666; 82. padding:5px 15px;}
  • 35.
    MEMASANG TEMPLATE KECI  Download CodeIgniter 1.7.2  Download Template CSS nya  Jika kedua-dua nya sudah didownload. Ekstrak file CodeIgniter dalam root folder anda seperti ini misalnya C:/xampp/htdocs/me masang_template_c ss
  • 36.
    Copy Template CSS yang sudah di ekstrak tadi kedalam folderC:/xampp/htdocs/memasang_template_csss ystem/application/views
  • 37.
    File index.html diganti menjadi template.php  Buka file template.php dengan Notepad++ atau Notepad, kemudian cari code ini: <link href="default.css" rel="stylesheet" type="text/css" media="screen" / > Ganti code diatas menjadi seperti ini: <link href="<?php echo base_url()?> system/ application/ views/ default.css"rel="stylesheet" type="text/css" media="screen" />  Disini belum terjadi apa-apa saat membuka browser dengan alamat http://localhost/memasang_template_css  Sekarang masuk ke dalam folderC:/xampp/htdocs/memasang_template_css/system/applicatio n/controller, disini akan ada dua buah file yaitu index.html dan welcome.php. Hapus kedua file tersebut dan buat file baru dengan nama home.php, simpan ditempat yang sama C:/xampp/htdocs/memasang_template_css/system/application/con troller
  • 38.
    Dalam file home.php ketikkan code berikut: <?php class Home extends Controller { function Home() { parent::Controller(); } function index() { $data['title'] = "Memasang Template CSS"; $this->load->view('template', $data); } } ?>  Sekarang coba buka browser nya dengan alamat URLhttp://localhost/memasang_template_css/index.php. Dan akan tampil seperti gambar ini:
  • 40.
    Sekarang buka file autoload.php yang berada padaC:/xampp/htdocs/memasang_template_css/system/application/config. Cari code berikut dalam file autoload.php $autoload['helper'] = array(); kemudian ganti menjadi seperti ini: $autoload['helper'] = array(„url‟);  Buka file config.php dalam folder yang sama dan kemudian cari code berikut dalam file config.php $config['base_url'] = "http://example.com/"; kemudian ganti menjadi seperti ini: $config['base_url'] = "http://localhost/memasang_template_css/";  Buka file route.php dalam folder yang sama dan kemudian cari kode berikut dalam file route.php $route['default_controller'] = "welcome"; kemudian ganti menjadi seperti ini: $route['default_controller'] = "home";  Sekarang masuk ke browser dan reload browser apa yang terjadi kemudian : Coba diperhatikan pada title nya di browser disini tidak terjadi perubahan apa- apa bukan. Padahal tadi pada file home.php kita membuat title dengan nama Memasang Template CSS $data[„title‟] = “Memasang Template CSS”;  jadi bagaimana cara nya supaya title nya sama dengan apa yang ditulis pada file home.php, begini caranya
  • 41.
    Buka file template.php, C:xampp/htdocs/memasang_template_css/system/application/vie ws. Dan cari code ini:<title>Gestured by Free CSS Templates</title>kemudian ganti menjadi seperti ini: <title> <?=$title?> </title>  Pada langkah nomor 11 kan ada banyak menu tuh, bagaimana menu diberikan link nya:  Homepage  Services  About Us  Contact Us Dari menu diatas anda juga bisa menggantinya dengan sesuka anda.  Untuk membuat link tersebut berfungsi. Buka file template.php (anda pasti tau dong dimana letak filenya). Cari code berikut: <li><a href="#">Homepage</li> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> kemudian ganti menjadi seperti ini: <li class=”current_page_item”> <?=anchor(„/‟, „Homepage‟)?> </li> <li> <?=anchor(„home/services‟, „Services‟)?> </li> <li> <?=anchor(„home/about‟, „About Us‟)?> </li>
  • 42.
    Sekarang coba masuk ke browser dan coba klik salah satu menu nya dan apa yang terjadi. Dan pasti yang nongol page error, dan yang jalan Cuma satu link menu yaitu Homepage. Buka file home.php <?php class Home extends Controller { function Home() { parent::Controller(); } function index() { $data['title'] = "Memasang Template CSS"; $this->load->view('template', $data); } } ?>
  • 43.
    dan kemudian tambahkan code ini dibawah penutup terakhir untuk function index, sehingga menjadi: <?php class Home extends Controller { function Home() { parent::Controller(); } function index() { $data[„title‟] = “Memasang Template CSS”; $this->load->view(„template‟, $data); } function services() { $data[„title‟] = “Services”; $this->load->view(„template‟, $data); } } ?>  Nah untuk menu yang laiinnya sama saja cara pembuatannya, dan anda tinggal menambahkan function yang dibutuhkan saja seperti function services() yang terakhir dibuat tadi dalam file home.php