web templating

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

Upload: rahadyan-gusti

Post on 28-May-2015

234 views

Category:

Technology


0 download

DESCRIPTION

Tugas Webpro 2 framework CI

TRANSCRIPT

Page 1: Web templating

WEB TEMPLATE

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

Page 2: Web templating

“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. 

Page 3: Web templating

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.

Page 4: Web templating

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.

Page 5: Web templating

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.

Page 6: Web templating

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.

Page 7: Web templating
Page 8: Web templating

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.

Page 9: Web templating

Untuk mengimplementasikan sistem templating tersebut sebaiknya kita buat sebuah library template. 

Adapun langkah-langkah yang harus dilakukan adalah:

Page 10: Web templating

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:

Page 11: Web templating

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);

Page 12: Web templating

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. }

Page 13: Web templating

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).

Page 14: Web templating

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:

Page 15: Web templating

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">

Page 16: Web templating

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">

Page 17: Web templating

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>

Page 18: Web templating

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>

Page 19: Web templating

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

Page 20: Web templating

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>

Page 21: Web templating

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>

Page 22: Web templating

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>

Page 23: Web templating

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.

Page 24: Web templating

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.   }

Page 25: Web templating

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'));

Page 26: Web templating

21.   }22.23.   }24.25.   /* End of file welcome.php */26.   /* Location: ./application/

controllers/welcome.php */

Page 27: Web templating

Kita  harus  menyiapkan  sebuahview  yang  bernama  welcome_messa

ge.  View  tersebut  akan  diletakkan  pada  ar

ea  content.  Isi

viewnya sama dengan view pada umumnya.

Page 28: Web templating

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>

Page 29: Web templating
Page 30: Web templating

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

Page 31: Web templating

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. }

Page 32: Web templating

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;}

Page 33: Web templating

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;}

Page 34: Web templating
Page 35: Web templating

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

Page 36: Web templating

Copy Template CSS yang sudah di ekstrak tadi kedalam folderC:/xampp/htdocs/memasang_template_csssystem/application/views

Page 37: Web templating

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

Page 38: Web templating

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:

Page 39: Web templating
Page 40: Web templating

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

Page 41: Web templating

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>

Page 42: Web templating

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);      }}?>

Page 43: Web templating

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