Lab 5

Technologie programowania systemów internetowych
Laboratorium 5
Laboratorium 5 – Zend Framework: lista zadań
Tworzenie projektu – aplikacja: prosta lista zadań
Celem ćwiczenia jest przygotowanie prostej aplikacji wyświetlającej listę zadań. Aplikacja ma
pozwalać na oznaczenie zadania jako wykonane. Efekt końcowy przedstawiony jest na poniższym
zrzucie ekranu.

W Netbeans stwórz nowy projekt typu: PHP Application, z obsługą Zend Framework.
Skonfiguruj uruchamianie, sprawdź działanie.

Skopiuj do katalogu public pliki dołączone do ćwiczenia: style.css, tick.png,
tick-szary.png.
Strona 1 z 6
Technologie programowania systemów internetowych
Laboratorium 5
Tworzenie warstwy modelu
Założenia

Za model w naszej aplikacji posłużą dwie klasy:

o
Application_Model_Task będzie reprezentować pojedyncze zadanie na liście;
o
Application_Model_TaskManager będzie służyć do operacji na zadaniach
(pobranie, usuwanie, oznaczenie jako wykonane, itd.).
Lista zadań przechowywana będzie w sesji.
Klasa Application_Model_Task

Stwórz nową klasę o nazwie Application_Model_Task, zapisz ją w katalogu models
w pliku o nazwie Task.php.

Klasa Application_Model_Task nie będzie zawierać żadnej logiki, tylko definicję kilku
pól oraz konstruktor:
<?php
class Application_Model_Task {
public
public
public
public
$id;
$description;
$date;
$done;
public function __construct($id, $desc) {
$this->id = $id;
$this->description = $desc;
$this->done = false;
$this->date = date('Y.m.d H:i:s');
}
}
Strona 2 z 6
Technologie programowania systemów internetowych
Laboratorium 5
Klasa Application_Model_TaskManager

Stwórz nową klasę o nazwie Application_Model_TaskManager, zapisz ją w katalogu
models w pliku o nazwie TaskManager.php.
<?php
class Application_Model_TaskManager {
private $tasks;
public function __construct() {
$session = new Zend_Session_Namespace('todoapp');
if(!isset($session->tasks))
$session->tasks = $this->initTasks();
$this->tasks = & $session->tasks;
}
private function initTasks() {
$id = 0;
$tasks = array();
$id++;
$tasks[$id] = new Application_Model_Task(
$id, 'Zjeść śniadanie');
$id++;
$tasks[$id] = new Application_Model_Task(
$id, 'Wyrzucić śmieci');
$id++;
$tasks[$id] = new Application_Model_Task(
$id, 'Posprzątać mieszkanie');
$id++;
$tasks[$id] = new Application_Model_Task(
$id, 'Kupić chleb i mleko');
$id++;
$tasks[$id] = new Application_Model_Task(
$id, 'Obejrzeć Klan');
$id++;
$tasks[$id] = new Application_Model_Task(
$id, 'Wygrać w totolotka');
$id++;
$tasks[$id] = new Application_Model_Task(
$id, 'Zostać prezydentem');
return $tasks;
}
public function getTasks() {
return $this->tasks;
}
}
Strona 3 z 6
Technologie programowania systemów internetowych
Laboratorium 5
Przeanalizuj kolejne elementy klasy Application_Model_TaskManager.

Metoda initTasks() służy do przygotowania przykładowych danych; zwraca ona tablicę
wypełnioną zadaniami (obiektami Application_Model_Task).

Konstruktor ma na celu zainicjowanie zmiennej klasowej $tasks:
o
jeśli w sesji zapisano już tablicę zadań – należy ją odczytać lub powiązać ze zmienną
$tasks przez referencję;
o
jeśli w sesji nie ma informacji o zadaniach – należy stworzyć tablicę zadań i zapisać
w sesji.
Zatem w konstruktorze sprawdzamy, czy w sesji istnieje zmienna tasks. Jeśli nie –
inicjujemy ją przykładowymi zadaniami. Do zmiennej klasowej $tasks przez referencję
przypisujemy tablicę z sesji.

Metoda getTasks() będzie służyła do pobierania listy wszystkich zadań.
Pobranie i wyświetlenie wszystkich zadań

W kontrolerze IndexController, w akcji index:
o
stwórz nową instancję modelu (Application_Model_TaskManager),
o
pobierz z niego listę zadań (getTasks),
o
przekaż do widoku.
$model = new Application_Model_TaskManager();
$tasks = $model->getTasks();
$this->view->tasks = $tasks;

Przygotuj widok wyświetlający listę zadań – istniejącą
/views/scripts/index/index.phtml zastąp następującą:
zawartość
pliku
<?php foreach ($this->tasks as $task) : ?>
<div class="task">
<span class="date">
<?php echo $task->date; ?>
</span>
<span>
<?php echo $task->description; ?>
</span>
</div>
<?php endforeach; ?>
Strona 4 z 6
Technologie programowania systemów internetowych
Laboratorium 5
Layout strony

Włączymy obsługę Zend Layout – mechanizmu pozwalającego na stworzenie szablonu,
wewnątrz którego wyświetlane będą wszystkie widoki.

Wydaj następującą komendę Zend Tool (z linii poleceń lub z menu Zend w Netbeans):
zf enable layout
Spowoduje to:
o
dodanie w pliku konfiguracyjnym application.ini wpisu wskazującego na katalog
szablonów,
o
utworzenie głównego szablonu o nazwie layout.phtml.

Otwórz w edytorze plik application/layouts/scripts/layout.phtml, przyjrzyj
się jego zawartości. Sprawdź działanie aplikacji.

Zmień kod szablonu na następujący:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ToDoApp</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="<?php echo $this->baseUrl('style.css');?>">
</head>
<body>
<div id="header">
<h1>Lista zadań</h1>
</div>
<div id="main">
<?php echo $this->layout()->content; ?>
</div>
</body>
</html>
Zwróć uwagę na linijkę ładującą arkusz CSS – użyta została tutaj funkcja pomocnicza baseUrl:
<?php echo $this->baseUrl('style.css');?>
Fukcja ta służy do generowania adresów URL względnych w stosunku do głównego katalogu
projektu.
Na
przykład,
jeśli
nasz
projekt
dostępny
jest
pod
adresem
http://localhost/zf_lab5/public, funkcja ta będzie zwracała:
o $this->baseUrl() -> http://localhost/zf_lab5/public
o
$this->baseUrl('style.css')
http://localhost/zf_lab5/public/style.css
->
Strona 5 z 6
Technologie programowania systemów internetowych
Laboratorium 5
Funkcję pomocniczą baseUrl() warto wykorzystać wszędzie, gdzie potrzebne jest tworzenie
adresów URL, np.:
o w odnośnikach do zawartości statycznej (ładowanie skryptów JavaScript, obrazków,
arkuszy stylów CSS),
o
w formularzach (atrybut action elementu form),
o
w linkach do akcji.
Zadanie
Dodaj obsługę zaznaczania zadań jako ukończone:

obok każdego elementu na liście zadań powinna być wyświetlana ikonka: dla zadania
aktywnego ikona tickSzary.png, dla ukończonego tick.png;

kliknięcie na ikonie aktywnego zadania powoduje oznaczenie go jako ukończone;

przy wyświetlaniu zadań ukończonych element div zawierający zadanie powinien mieć
dodaną klasę done, np.:
<div class="task done">
<span class="date">2012.04.16 10:47:13</span>
<span>Posprzątać mieszkanie</span>
...
</div>
Aby wykonać zadanie, konieczne będzie:
 dodanie w klasie Application_Model_TaskManager metody oznaczającej wskazane
zadanie jako wykonane, np. setDone($id);

dodanie w kontrolerze nowej akcji, która:
o
jako parametr przyjmuje id zadania do oznaczenia jako wykonane;
o
wywołuje odpowiednią metodę z modelu, aby faktycznie oznaczyć zadanie jako
wykonane;
o
przekierowuje na stronę główną z listą zadań, na przykład za pomocą następującego
polecenia:
$this->_redirect('index');
Strona 6 z 6