web templating
DESCRIPTION
Tugas Webpro 2 framework CITRANSCRIPT
WEB TEMPLATE
Anggota : Rahadyan D.G (30210172)Suslianto Hadi S (30210213)Ayu Ekarani Swandhita (30210178)
“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 empat
bagian yaitu Header (berfungsi sebagai tempatlogo dan slogan aplikasi ), Top menu (bagian menu utama disebelah atas), Right Menu (me
nunavigasi tambahan disebelah kanan) dan sebu
ahContent. Area content ini lah yang seringkaliberubah 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 manayang akan dipanggil dan meletakkannya diDalam template.Kenapa membuatnya dalam sebuah library?Karena dengan cara inimemberikan flesibilitas terhadap sistem templateCara pembuatan library ini diawali denganmembuat sebuah file bernama template.php pada folder application/libraries. Adapun isi filetemplate.php adalah:
application/libraries/template.php1. <?php2. 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 databerfungsi sebagai data yang akan dikirimkan ke controller. Sedangkan template adalah viewyang akan dipanggil untuk ditampilkan sebagai content utama. Pada template ini akan dibagimenjadi empat area yaitu content, header, top menu, dan right menu. Masing-masing area diisiOleh sebuah view (perhatikan baris 11,13,15,17).Masing-masingview tadi di-load dandisimpan dalam memori. Lalu digabungkan kedalam sebuah template (baris 15).
2. MEMBUAT TEMPLATE LAYOUT VIEW
Sebuah template layout view adalah sebuah
view yang akan menggabungkan masing-masingview menjadi suatu bentuk kesatuan. Ad
apun isi 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 Header14. -->15. <?php echo $_header;?>16. </div>17. <div id="menu">18. <!--19. Area Top Menu20. -->21. <?php echo $_top_menu;?>22. </div>23. <div id="contentwrap">
24. <div id="content">25. <!--26. Area content27. -->28. <?php echo $_content;?>29.30. </div>31.32. <div id="sidebar">33. <!--34. Area Right Menu35. -->36. <?php echo $_right_menu;?>37. </div>38. <div style="clear: both;"></div>39. </div>
40.41. <div id="footer">42. <p>Copyright ©<ahref="#">Ibnoe</
a> | Design by43. <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 baris15, 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.php1. <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.php1. <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 untukmenggunakan sistem template ini. Selanjutnya adalah membuat sebuah controller. Agar lebihmudah pembuatan controllernya maka gunakan saja controller default
dari CodeIgniter, yaitudengan sedikit melakukan perubahan kode program pada controller-nya.
Application/controllers/welcome.php1. <?
php if (! defined('BASEPATH')) exit('No direct script accessallowed');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/welcome.php */
Kita harus menyiapkan sebuahview yang bernama welcome_messa
ge. View tersebut akan diletakkan pada ar
ea 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 byCodeIgniter.</p>4.5. <p>If you would like to edit this page you'll find it locatedat:</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/">User13. Guide</a>.</p>14.15.16. <p><br />Page rendered in {elapsed_time} seconds</p>
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;}
B. DESAIN
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: 5px44. }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/memasang_template_css
Copy Template CSS yang sudah di ekstrak tadi kedalam folderC:/xampp/htdocs/memasang_template_csssystem/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 alamathttp://localhost/memasang_template_css
Sekarang masuk ke dalam folderC:/xampp/htdocs/memasang_template_css/system/application/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 samaC:/xampp/htdocs/memasang_template_css/system/application/controller
Dalam file home.php ketikkan code berikut:<?phpclass 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/views. 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><li> <?=anchor(‘home/contact’, ‘Contact 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<?phpclass 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:<?phpclass 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