Zadanie: Stworzyć widok z szablonu HTML

14 July 2008 Comments

W tym warsztacie zajmiemy się "importem" zwykłego szablonu HTML (metrohacker, do pobrania stąd) do Code Ignitera w postaci widoków.

Wykonanie

- Pobieramy archiwum z szablonem
- Rozpakowujemy go i sprawdzamy czy wszystko działa
- Kopiujemy katalog szablonu do katalogu widoków
- Zamieniamy rozszerzenie pliku index.html na .php
- Tworzymy roboczy kontroler (test.php):

<?php
class Test extends Controller
{
function index()
 {
 $this->load->view('metrohacker/index');
 }
 }

Załaduje i wyświetli on plik szablonu
- Poprawiamy ścieżki do plików CSS (i ew. JS, grafik). Zobacz Generowanie względnych i bezwzględnych ścieżek. Zmieniamy:

<link rel="stylesheet" type="text/css" href="metrohacker/style.css" />

Na:

<?php
<link rel="stylesheet" type="text/css" href="<?PHP echo base_url(); ?>system/application/views/metrohacker/style.css" />

- Notka: musimy mieć załadowany pomocnik "url".
Podobnie postępujemy z plikami graficznymi czy .js.
- Wywołanie kontrolera (index.php/test) powinno wyświetlić poprawnie wyglądający szablon. Jeżeli czegoś brakuje to sprawdzamy ścieżki. Pomocne może być oglądanie kodu źródłowego wygenerowanej strony

- Teraz mamy "sprawny" szablon z tym że zawiera przykładowe dane. Kilka razy powtarza się menu lewe i środkowe news:

Na zielono zaznaczyłem bloki menu a na czerwono bloki newsów.
- Należy znaleźć w kodzie HTML te powtarzające się elementy i wykasować wszystko oprócz jednego, robimy to metodą prób i błędów
- W naszym szablonie metrohacker znajdujemy:

<div id="right">

<h1>Mitnick sneezes, breaks into Pentagon</h1><div class="htimeauth">26:00 | 03/17/2006 | <a href="#">author</a></div>
<p>I'm not very creative, so I stole my favorite news headline from OWD/OSWD user antipop's extent template</p>
<blockquote><p>This morning a source close to the celebrated hacker <a href="http://en.wikipedia.org/wiki/Kevin_Mitnick">Kevin Mitnick</a> reported that he might be coming down with a bad cold. The source said the cold was so bad that when he sneezed he suddenly had root on the Pentagon's computers.</p></blockquote>
<p>For those of us who have followed Kevin's hacking career we already knew he was s00p3r 31337 but this proves it.</p>

<h1>Some random CSS crap</h1><div class="htimeauth">26:00 | 03/17/2006 | <a href="#">author</a></div>
<p>Because the width and height of elements can be set by an author, we may have the situation where an element is not big enough to fit its contents. What do we do when this occurs? For images, traditionally the image is scaled to fit the size of the element. CSS introduces the overflow property to let you specify how a browser should display an element where its contents do not all fit into its width and height.</p>
<div class="code">
#outer {<br />
margin: 0 auto<br />
width: 760px;<br />
overflow:auto;<br />
border: 1px solid #222;<br />
background: #333;<br />
}</div>

.....................
......................

</div>

To są "newsy". Znacznik DIV "odgranicza" je od reszty strony. Usuwamy wszystkie oprócz jednego.
- Pozostały "news" przenosimy do pliku np. "element.php" i zapisujemy go w katalogu szablonu
- W miejscu po "newsie" ładujemy stworzony plik:

<?php
<div id="right">
 <?PHP $this->load->view('metrohacker/element'); ?>
</div>

Odświeżamy widok w przeglądarce: nadal powinniśmy mieć działający szablon z jednym newsem:

- Tak samo postępujemy z blokami menu. Tutaj mamy DIVa "left". Usuwamy po kolei bloki menu. Oto jeden z nich, którego umieszczamy w pliku "leftmenu.php"

<div class="navouter">
<div class="orange"></div>
<div class="navheader">Valid?</div>
<div class="navcontent">
<ul>
<li><a href="http://validator.w3.org/check/referer">XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
</ul>

</div>
</div>

- W index.php naszego szablonu po blokach menu powinno pozostać:

<div id="left">
 <?PHP $this->load->view('metrohacker/leftmenu'); ?>
</div>

- Szablon powinien nadal działać.

Co zrobiliśmy?

- Przystosowaliśmy szablon HTML do bycia widokiem - poprawiliśmy ścieżki
- Elementy powtarzalne i zmienne na różnych stronach umieściliśmy w oddzielnych plikach
- Otrzymane pliki pomocnicze (leftmenu.php i element.php) posłużą nam w późniejszym etapie do szybkiego tworzenia widoków dla poszczególnych stron naszego serwisu.

- Nie musieliśmy np. wyciągać lewego menu - jeżeli zawsze miałoby być takie samo to oddzielanie go nie jest potrzebne. Wyciągamy jedynie te elementy, które będą się zmieniać.

PRACA DOMOWA

- Własnoręcznie rozbij omawiany szablon
- Znajdź jakiś szablon, który ci się podoba i chciałbyś go wykorzystać na własnej stronie (albo jakiś łatwy do ćwiczenia) i rozbij go wg. podanego schematu.

Przykładowe szablony:
Autumn_05
Nautica01
Zakas

Szablony pochodzą ze stron:
openwebdesign.org
www.oswd.org
Obie strony oferują darmowe, w znacznej większości ładne szablony. A co najważniejsze lekkie o czytelnym kodzie (poprawny XHTML)

Po wykonaniu...

Pochwal się na forum, zrób zrzut ekranu (np. Irfan View), spakuj pocięty szablon i udostępnij. Zrzuty możesz umieszczać na fotosik.pl.

RkBlog

Kurs Code Igniter, 14 July 2008