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...
SISTEM TEMPLATING    Sistem templating adalah salah satu fituratau library yang harus dipikirkan di dalamCodeIgniter, kare...
Kegunaan sistem templating adalah :   Kerja Sama Tim Yang Lebih Baik -           Dengan pemisahan menggunakan templating ...
Dengan menyusun view-view yang ada, kitasebenarnya dapat membuat sebuah tempatelibrary yang cukup powerful. Idenyasederhan...
Masing-masing area tersebut akanditangani oleh sebuah view agar tidak terjadiduplikasi dan akan mempermudahpenggunaan kemb...
Template yang akan dibuat terbagi menjadi emp  atbagian yaitu Header (berfungsi sebagai tempatlogo dan slogan aplikasi ), ...
Untuk mengimplementasikan sistem templating tersebut sebaiknya kita buat sebuah library template.Adapun langkah-langkah ya...
1.   MEMBUAT LIBRARY TEMPLATEFungsi library tersebut hanya mengatur view manayang akan dipanggil dan meletakkannya diDalam...
application/libraries/template.php1. <?php2. class Template {3. protected $_ci;4. function __construct()5. {6. $this->_ci ...
13. $data[_top_menu]=$this->_ci->load-  >view( template/menu,$data, true);14. $data[_right_menu]=$this->_ci->load-  >view(...
Perhatikan fungsi display, disana ada dua parameter yaitutemplate dan data. Parameter databerfungsi sebagai data yang akan...
2.   MEMBUAT TEMPLATE LAYOUT VIEWSebuah template layout view adalah sebua  hview yang akan menggabungkanmasing-masingview ...
Application/view/template.php1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"2.  "http://www.w3.org/TR/xhtml1/...
12.   <!--13.       Area Header14.   -->15.   <?php echo $_header;?>16.   </div>17.   <div id="menu">18.   <!--19.       A...
24. <div id="content">25. <!--26. Area content27. -->28. <?php echo $_content;?>29.30. </div>31.32. <div id="sidebar">33. ...
40.41. <div id="footer">42. <p>Copyright &copy;<ahref="#">Ibnoe</a> | Design    by43. <a href="http://www.readcrazyreviews...
File diatas merupakan penggabung darisemua bagian yang telah dibahas.Perhatikan baris15, 21, 28, dan 36. Keempat variabelt...
A.   VIEW HEADERApplication/view/template/header.php1. <h1><a href="#">Red Wall Template</a  ></h1>2. <h2>Your web site sl...
B.   VIEW TOP MENUApplication/view/template/menu.php1. <ul>2. <li><a href="#">Home</a></li>3. <li><a href="#">Articles</a>...
C.       VIEW SIDEBAR MENUApplication/view/template/sidebar.php1. <h3>Main Content</h3>2. <ul>3. <li><a href="#">Conflantu...
Setelah memiliki view ketiga area tersebut(header, top menu dan sidebar) maka kita siapuntukmenggunakan sistem template in...
Application/controllers/welcome.php1.        <?php if (! defined(BASEPATH)) exit(No direct script     accessallowed);2.3. ...
11.12.   function index()13.   {14.     $this->template->display(welcome_message);15.   }16.17.   function contoh_paramete...
21. }22.23. }24.25. /* End of file welcome.php */26. /* Location: ./application/controllers/welco  me.php */
Kita harus menyiapkan sebuahview yang bernama welcome_message.View tersebut akan diletakkan pada areacontent.Isi viewnya s...
1. <h1>Welcome to CodeIgniter!</h1>2.3. <p>The page you are looking at is being generated dynamically byCodeIgniter.</p>4....
B. DESAIN      public/style.css1.    a{text-decoration:none;}2.    a:hover{color:#CCC;}3.    h1 a{4.            font-size:...
17.   #wrap{18.              width:1000px;19.              margin: 0px auto;20.              }21.   #header{22.           ...
39.   #menu ul li{40.           display:inline;41.           list-style:none;42.           border:1px solid transparent;43...
61.   #content{62.           float:left;63.           width:647px;64.           padding:10px;65.           box-shadow: ins...
MEMASANG TEMPLATE KE CI   Download CodeIgniter    1.7.2   Download Template    CSS nya   Jika kedua-dua nya    sudah di...
   Copy Template CSS yang sudah di ekstrak tadi    kedalam    folderC:/xampp/htdocs/memasang_template_csss    ystem/appli...
   File index.html diganti menjadi template.php   Buka file template.php dengan Notepad++ atau Notepad, kemudian cari   ...
   Dalam file home.php ketikkan code berikut:    <?php    class Home extends Controller    {        function Home()      ...
   Sekarang buka file autoload.php yang berada    padaC:/xampp/htdocs/memasang_template_css/system/application/config.   ...
   Buka file template.php,    C:xampp/htdocs/memasang_template_css/system/application/views. Dan cari code    ini:<title>...
   Sekarang coba masuk ke browser dan coba klik salah satu menu nya    dan apa yang terjadi. Dan pasti yang nongol page e...
   dan kemudian tambahkan code ini dibawah penutup terakhir untuk function index, sehingga    menjadi:    <?php    class ...
Web templating
Web templating
Web templating
Web templating
Upcoming SlideShare
Loading in …5
×

Web templating

864 views

Published on

Tugas Webpro 2 Framework CI

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
864
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
77
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web templating

  1. 1. Anggota : Rahadyan D.G (30210172)Suslianto Hadi S (30210213)Ayu Ekarani Swandhita (30210178)WEB TEMPLATE
  2. 2. “Web template adalah kunci baik untuk web desain”Mengapa demikan?? Jika seseorang ingin membuat situs Web yang baik,yang mempunyai kualitas tinggi, kemudianmenggunakan web template adalah pilihan terbaik.mereka tidak hanya efektif biaya ketika datang kedesain, tetapi juga merupakan cara tercepat untukmembuat situs. sebagai dengan norma untukmenciptakan sebuah situs web, akan ada banyakmasalah yang satu untuk memecahkan telahmembuatnya sempurna.
  3. 3. SISTEM TEMPLATING Sistem templating adalah salah satu fituratau library yang harus dipikirkan di dalamCodeIgniter, karena CodeIgniter memiliki metodeyang sangat sederhana. Tidak memilikisistem layout, widget dan lain-lain. Untuk membuat sistem templating diCodeIgniter kita dapat membuat sendiri denganMenggunakan fungsi-fungsi yang telahDisediakan oleh CodeIgniter atau kita juga dapatmenggunakan sistem templating yang sudah adadan populer.
  4. 4. Kegunaan sistem templating adalah : Kerja Sama Tim Yang Lebih Baik - Dengan pemisahan menggunakan templating ini, maka rekan bagian pengerjaan desaintidak lagi terganggu oleh kode program yang Anda buat. Begitupun Anda, tidak khawatir lagiscript/kode program yang telah dibuat akan terganggu. Skrip/code Yang Bersih - Situs dengan aplikasi kompleks, misalnya sebuah portal, pasti memerlukan skrip yangkompleks yang menghabiskan sampai ribuan baris. Tentunya akan sangat mengganggu sekalikalau 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. 5. Dengan menyusun view-view yang ada, kitasebenarnya dapat membuat sebuah tempatelibrary yang cukup powerful. Idenyasederhana saja, cukup membagi sebuah halamanmenjadi beberapa area. Dari desain tersebut dapatkita bagi menjadi area header, top menu, rightmenu dan content. Masing-masing area tersebutakan digabungkan dalam satu halaman utuh yangdinamakan template.
  6. 6. Masing-masing area tersebut akanditangani oleh sebuah view agar tidak terjadiduplikasi dan akan mempermudahpenggunaan kembali area tersebut. Adapunarea-area tesebut dapat dilihat pada gambarberikut.
  7. 7. Template yang akan dibuat terbagi menjadi emp atbagian yaitu Header (berfungsi sebagai tempatlogo dan slogan aplikasi ), Top menu (bagianmenu utama disebelah atas), Right Menu (me nunavigasi tambahan disebelah kanan) dan sebu ahContent. Area content ini lah yang seringkaliberubah pada setiap page.
  8. 8. Untuk mengimplementasikan sistem templating tersebut sebaiknya kita buat sebuah library template.Adapun langkah-langkah yang harus dilakukan adalah:
  9. 9. 1. MEMBUAT LIBRARY TEMPLATEFungsi 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 padafolder application/libraries. Adapun isi filetemplate.php adalah:
  10. 10. 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);
  11. 11. 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. }
  12. 12. Perhatikan fungsi display, disana ada dua parameter yaitutemplate 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 templat e(baris 15).
  13. 13. 2. MEMBUAT TEMPLATE LAYOUT VIEWSebuah template layout view adalah sebua hview yang akan menggabungkanmasing-masingview menjadi suatu bentuk kesatuan. Adapun i sidari template layout adalah:
  14. 14. Application/view/template.php1. <!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">
  15. 15. 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">
  16. 16. 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>
  17. 17. 40.41. <div id="footer">42. <p>Copyright &copy;<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>
  18. 18. File diatas merupakan penggabung darisemua bagian yang telah dibahas.Perhatikan baris15, 21, 28, dan 36. Keempat variabeltersebut akan diisi view darimasing-masing bagian.Berikut ini adalahview-view yang menjadi part/area dari template
  19. 19. A. VIEW HEADERApplication/view/template/header.php1. <h1><a href="#">Red Wall Template</a ></h1>2. <h2>Your web site slogan goes here </h2>
  20. 20. B. VIEW TOP MENUApplication/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>
  21. 21. C. VIEW SIDEBAR MENUApplication/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>
  22. 22. Setelah memiliki view ketiga area tersebut(header, top menu dan sidebar) maka kita siapuntukmenggunakan sistem template ini. Selanjutnyaadalah membuat sebuah controller. Agar lebihmudah pembuatancontrollernya maka gunakan saja controller defau ltdari CodeIgniter, yaitudengan sedikit melakukan perubahan kode program pa dacontroller-nya.
  23. 23. 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. }
  24. 24. 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));
  25. 25. 21. }22.23. }24.25. /* End of file welcome.php */26. /* Location: ./application/controllers/welco me.php */
  26. 26. Kita harus menyiapkan sebuahview yang bernama welcome_message.View tersebut akan diletakkan pada areacontent.Isi viewnya sama dengan view pada umumnya.
  27. 27. 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 youll 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>
  28. 28. B. DESAIN public/style.css1. 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;}
  29. 29. 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. }
  30. 30. 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;}
  31. 31. 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;}
  32. 32. 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
  33. 33.  Copy Template CSS yang sudah di ekstrak tadi kedalam folderC:/xampp/htdocs/memasang_template_csss ystem/application/views
  34. 34.  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
  35. 35.  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:
  36. 36.  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
  37. 37.  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>
  38. 38.  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); } } ?>
  39. 39.  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

×