Symfony w przykładach [PDF]

Zitiervorschau

---

Spis treści

5

Spis treści Podziękowania . ............................................................................. 13 Wstęp . .......................................................................................... 15

Część I

Tworzenie stron WWW w Symfony . .............................. 17

Rozdział 1. Pierwszy projekt w Symfony . ......................................................... 19 Przykład 1. Hello, World! . ............................................................................................... 19 ROZWIĄZANIE . ............................................................................................................ 19 Krok 1. Utwórz nowy projekt Symfony . ......................................................................... 19 Krok 2. Utwórz aplikację frontend . ................................................................................. 20 Krok 3. Utwórz moduł o nazwie glowny . ........................................................................ 22 Krok 4. Utwórz akcję glowny/powitanie . ........................................................................ 23 Krok 5. Odwiedź akcję glowny/powitanie ...................................................................... 24 Zestawienie poznanych poleceń . ..................................................................................... 24 Struktura aplikacji tworzonej w Symfony ....................................................................... 25 Środowiska . ..................................................................................................................... 28 Pasek narzędzi Debug toolbar . ........................................................................................ 30 Uruchomienie gotowego projektu ................................................................................... 32

Rozdział 2. Praca w środowisku NetBeans . ...................................................... 33 Przykład 2. Witaj w NetBeans! . ...................................................................................... 33 ROZWIĄZANIE . ............................................................................................................ 33 Krok 1. Utwórz nowy projekt Symfony w NetBeans . .............................................. 33 Krok 2. Utwórz moduł glowny w aplikacji frontend . ............................................... 38 Krok 3. Usuń akcję glowny/index ............................................................................. 40 Krok 4. Utwórz akcję glowny/powitanie ................................................................... 40 Krok 5. Zmień tytuł strony glowny/powitanie . ......................................................... 41 Krok 6. Zmień adres URL strony głównej . .............................................................. 42 Krok 7. Wyczyść pamięć podręczną aplikacji . ......................................................... 43

Rozdział 3. Wymiana szablonu XHTML/CSS . .................................................... 45 Przykład 3. Wierszyk pt. Dwa kabele .............................................................................. 45 ROZWIĄZANIE . ............................................................................................................ 45 Krok 1. Utwórz nowy projekt Symfony w NetBeans . .............................................. 45 Krok 2. Utwórz moduł wierszyk w aplikacji frontend . ............................................. 46 Krok 3. Usuń akcję glowny/index ............................................................................. 46 Krok 4. Utwórz akcję wierszyk/pokaz ....................................................................... 46

6

Symfony w przykładach Krok 5. Zmień tytuł strony wierszyk/pokaz .................................................................... 47 Krok 6. Zmień adres URL strony głównej ...................................................................... 47 Krok 7. Zmień szablon XHTML/CSS . ............................................................................ 48 Przebieg wykonania aplikacji . ......................................................................................... 52

Rozdział 4. Dołączanie zewnętrznych zasobów . ................................................ 55 Przykład 4. Żmija . ........................................................................................................... 56 ROZWIĄZANIE . ............................................................................................................ 57 Krok 1. Utwórz nowy projekt . ......................................................................................... 57 Krok 2. Utwórz moduł animal . ........................................................................................ 57 Krok 3. Usuń akcję animal/index . ................................................................................... 57 Krok 4. Utwórz akcję animal/show . ................................................................................ 57 Krok 5. Zmień tytuł strony . ............................................................................................. 58 Krok 6. Zmień adres URL strony głównej ...................................................................... 58 Krok 7. Zmień szablon XHTML/CSS . ............................................................................ 58 Krok 8. W widoku akcji animal/show wstaw zdjęcie żmii . ............................................ 60 Analiza kodu XHTML generowanego przez aplikację . .................................................. 61

Rozdział 5. Hiperłącza . .................................................................................... 63 Przykład 5. Fraszki . ......................................................................................................... 63 ROZWIĄZANIE . ............................................................................................................ 64 Krok 1. Utwórz projekt, aplikację i moduł ................................................................ 64 Krok 2. Usuń akcję wiersz/index ............................................................................... 64 Krok 3. Utwórz akcję wiersz/dogoscia ...................................................................... 65 Krok 4. Utwórz akcję wiersz/naswojeksiegi . ............................................................ 66 Krok 5. Utwórz akcję wiersz/ozywocieludzkim . ...................................................... 67 Krok 6. Zmień szablon XHTML/CSS ....................................................................... 67 Krok 7. Zmodyfikuj hiperłącza zawarte w menu . ..................................................... 69 Krok 8. Zmień adresy URL fraszek ........................................................................... 70 Krok 9. Zmień tytuły stron serwisu ........................................................................... 73

Rozdział 6. Strona błędu 404 . ......................................................................... 75 Przykład 6. Gady . ............................................................................................................ 75 ROZWIĄZANIE . ............................................................................................................ 77 Krok 1. Utwórz nowy projekt, aplikację i moduł ............................................................ 77 Krok 2. Zmień akcje modułu strony . ............................................................................... 77 Krok 3. Zmień szablon XHTML/CSS . ............................................................................ 78 Krok 4. Wymień adresy URL w pliku routing.yml ......................................................... 79 Krok 5. Zmień tytuły stron serwisu . ................................................................................ 80 Krok 6. Odwiedź domyślną stronę błędu 404 .................................................................. 81 Krok 7. Utwórz akcję strony/blad404 . ............................................................................. 82 Krok 8. Zdefiniuj stronę błędu 404 aplikacji frontend ..................................................... 83 Analiza odpowiedzi HTTP . ............................................................................................. 85

Rozdział 7. Publikowanie projektu na serwerze hostingowym . .......................... 87 Przykład 7.1. Zabytki Lublina . ........................................................................................ 87 ROZWIĄZANIE . ............................................................................................................ 88 Etap 1. Wykonaj aplikację na komputerze lokalnym ...................................................... 88 Etap 2. Opublikuj witrynę na serwerze hostingowym ..................................................... 91 Przykład 7.2. Gady (publikowanie na serwerze NetArt) . ............................................... 96 ROZWIĄZANIE . ............................................................................................................ 96 Krok 1. Przekopiuj bibliotekę Symfony na serwer . .................................................. 96 Krok 2. Wyczyść pamięć podręczną i usuń kontrolery deweloperskie ..................... 96 Krok 3. Zmodyfikuj ścieżkę do biblioteki Symfony . ............................................... 96 Krok 4. Przekopiuj projekt na serwer ........................................................................ 97

Spis treści

7 Krok 5. Zablokuj dostęp do plików ........................................................................... 97 Krok 6. Zmień domenę projektu na gady.twojadomena.nazwa.pl ............................ 97

Rozdział 8. Czego dowiedziałeś się w pierwszej części? . .................................. 99

Część II

Warstwy M oraz V . .................................................... 101

Rozdział 9. Pierwszy projekt Symfony wykorzystujący bazy danych . ................ 103 Przykład 9. Najdłuższe rzeki świata .............................................................................. 103 ROZWIĄZANIE . .......................................................................................................... 104 Etap 1. Przygotuj pustą bazę danych . ............................................................................ 104 Etap 2. Zaprojektuj strukturę bazy danych .................................................................... 105 Etap 3. Utwórz szkielet aplikacji . .................................................................................. 109 Etap 4. Wymień szablon XHTML/CSS ......................................................................... 117 Etap 5. Dostosuj wygląd akcji rzeka/index .................................................................... 117 Zestawienie plików . ....................................................................................................... 119 Klasy dostępu do bazy danych ................................................................................ 120 Przebieg wykonania aplikacji .................................................................................. 123 Uruchomienie gotowego projektu ........................................................................... 124

Rozdział 10. Dostosowywanie klas generowanych przez Propel . ....................... 125 Przykład 10. Tatry . ........................................................................................................ 125 ROZWIĄZANIE . .......................................................................................................... 125 Krok 1. Utwórz pustą bazę danych . ............................................................................... 125 Krok 2. Zaprojektuj bazę danych . ................................................................................. 126 Krok 3. Utwórz projekt z aplikacją frontend ................................................................. 127 Krok 4. Skonfiguruj dostęp do bazy danych .................................................................. 127 Krok 5. Wypełnij bazę danych rekordami ..................................................................... 127 Krok 6. Wygeneruj panel administracyjny CRUD ........................................................ 129 Krok 7. Dostosuj klasy wygenerowane przez Propel .................................................... 130 Krok 8. Dostosuj moduł szczyt . .................................................................................... 133 Krok 9. Dostosuj wygląd witryny . ................................................................................. 134 Testowanie poprawności generowanego kodu XHTML . ............................................. 135

Rozdział 11. Akcja show — wyświetlanie szczegółowych danych rekordu . ........ 137 Przykład 11. Piosenki wojskowe ................................................................................... 138 ROZWIĄZANIE . .......................................................................................................... 138 Krok 1. Utwórz pustą bazę danych .......................................................................... 138 Krok 2. Zaprojektuj bazę danych ............................................................................ 139 Krok 3. Utwórz projekt z aplikacją frontend . ......................................................... 140 Krok 4. Skonfiguruj dostęp do bazy danych . .......................................................... 140 Krok 5. Dostosuj klasy wygenerowane przez Propel . ............................................ 140 Krok 6. Napisz dynamiczny skrypt YAML odpowiedzialny za wypełnianie bazy ................................................................... 141 Krok 7. Wygeneruj panel CRUD z akcjami show . ................................................. 144 Krok 8. Dostosuj moduł piosenka ........................................................................... 144 Krok 9. Dostosuj wygląd witryny ............................................................................ 148 Krok 10. Zmień tytuły stron .................................................................................... 148 Krok 11. Zmodyfikuj adresy URL stron z piosenkami . .......................................... 150

Rozdział 12. Identyfikacja rekordów na podstawie wartości slug . ..................... 151 Przykład 12. Artykuły na temat HTML/CSS ................................................................. 152 ROZWIĄZANIE . .......................................................................................................... 153 Krok 1. Przeanalizuj pliki XHTML z treścią artykułów . ........................................ 153 Krok 2. Przygotuj funkcje pomocnicze ................................................................... 153

8

Symfony w przykładach Krok 3. Utwórz pustą bazę danych artykuly . .......................................................... 162 Krok 4. Zaprojektuj bazę danych ............................................................................ 162 Krok 5. Utwórz projekt z aplikacją frontend . ......................................................... 163 Krok 6. Skonfiguruj dostęp do bazy danych . .......................................................... 163 Krok 7. Dostosuj klasy wygenerowane przez Propel . ............................................ 164 Krok 8. Przygotuj skrypt, który wypełni bazę danych . ........................................... 166 Krok 9. Wypełnij bazę danych rekordami . ............................................................. 168 Krok 10. Wygeneruj panel CRUD z akcjami show . ............................................... 168 Krok 11. Usuń zbędne akcje modułu artykul . ........................................................ 169 Krok 12. Zmień metodę identyfikowania rekordów . .............................................. 169 Krok 13. Wyłącz cytowanie kodu XHTML . .......................................................... 170 Krok 14. Dostosuj wygląd witryny .......................................................................... 172 Krok 15. Zmień tytuły stron .................................................................................... 173 Krok 16. Zmodyfikuj adresy URL stron z artykułami . ........................................... 173 Krok 17. Zminimalizuj liczbę bajtów pobieraną w akcji artykul/index .................. 173

Rozdział 13. Komponent menu . ....................................................................... 177 Przykład 13. Treny . ....................................................................................................... 177 ROZWIĄZANIE . .......................................................................................................... 178 Krok 1. Utwórz pustą bazę danych .......................................................................... 178 Krok 2. Zaprojektuj bazę danych ............................................................................ 179 Krok 3. Utwórz projekt z aplikacją frontend . ......................................................... 179 Krok 4. Wykonaj moduł glowny z akcjami powitanie oraz blad404 ...................... 179 Krok 5. Skonfiguruj dostęp do bazy danych . .......................................................... 180 Krok 6. Dostosuj klasy wygenerowane przez Propel . ............................................ 180 Krok 7. Przygotuj zadanie propel:import-danych . .................................................. 181 Krok 8. Wypełnij bazę danych rekordami . ............................................................. 182 Krok 9. Wygeneruj panel CRUD z akcjami show . ................................................. 183 Krok 10. Usuń zbędne akcje modułu artykul . ........................................................ 183 Krok 11. Zmień metodę identyfikowania rekordów . .............................................. 183 Krok 12. Zmień adresy URL ................................................................................... 183 Krok 13. Przygotuj komponent menu ...................................................................... 184 Krok 14. Dostosuj wygląd witryny .......................................................................... 185 Krok 15. Zmień tytuły stron .................................................................................... 185 Krok 16. Wykonaj zrzut bazy danych ..................................................................... 185

Rozdział 14. Umieszczanie plików binarnych w bazie danych . ........................... 189 Przykład 14. Pliki do pobrania . ...................................................................................... 189 ROZWIĄZANIE . .......................................................................................................... 189 Krok 1. Utwórz pustą bazę danych .......................................................................... 189 Krok 2. Zaprojektuj bazę danych ............................................................................ 190 Krok 3. Utwórz projekt z aplikacją frontend . ......................................................... 191 Krok 4. Wykonaj moduł glowny z akcją blad404 . ................................................. 191 Krok 5. Skonfiguruj dostęp do bazy danych . .......................................................... 191 Krok 6. Dostosuj klasy wygenerowane przez Propel . ............................................ 191 Krok 7. Przygotuj zadanie propel:import-danych . .................................................. 192 Krok 8. Wypełnij bazę danych rekordami . ............................................................. 193 Krok 9. Wygeneruj panel CRUD ............................................................................ 194 Krok 10. Usuń zbędne akcje modułu artykul . ........................................................ 194 Krok 11. Zmodyfikuj funkcję executeShow() . ....................................................... 194 Krok 12. Zmodyfikuj widok akcji plik/show . ......................................................... 195 Krok 13. Dostosuj widok akcji plik/index . ............................................................. 196 Krok 14. Zmień adresy URL ................................................................................... 197 Krok 15. Dostosuj wygląd witryny .......................................................................... 198

Spis treści

9

Rozdział 15. Relacje 1:n . ................................................................................ 199 Przykład 15. Kontynenty/państwa ................................................................................. 203 ROZWIĄZANIE . .......................................................................................................... 204 Krok 1. Przeanalizuj szablon XHTML .................................................................... 204 Krok 2. Utwórz pustą bazę danych .......................................................................... 205 Krok 3. Zaprojektuj bazę danych ............................................................................ 205 Krok 4. Utwórz projekt z aplikacją frontend . ......................................................... 205 Krok 5. Wykonaj moduł glowny ............................................................................. 205 Krok 6. Skonfiguruj dostęp do bazy danych . .......................................................... 206 Krok 7. Dostosuj klasy wygenerowane przez Propel . ............................................ 206 Krok 8. Przygotuj zadanie propel:import-danych . .................................................. 207 Krok 9. Wypełnij bazę danych rekordami . ............................................................. 209 Krok 10. Wygeneruj panele CRUD dla tabel kontynent oraz panstwo ................... 209 Krok 11. Usuń zbędne akcje modułów kontynent oraz panstwo . ........................... 209 Krok 12. Zmodyfikuj funkcje executeShow() . ....................................................... 209 Krok 13. Dostosuj widoki akcji kontynent/index oraz panstwo/index ................... 210 Krok 14. Zmodyfikuj widok akcji kontynent/show . ............................................... 210 Krok 15. Zmodyfikuj widok akcji panstwo/show . .................................................. 211 Krok 16. Zmień adresy URL ................................................................................... 211 Krok 17. Dostosuj wygląd witryny .......................................................................... 212 Krok 18. Ustal tytuły stron ...................................................................................... 213

Rozdział 16. Relacje n:m . ............................................................................... 215 Przykład 16. Filmy/Aktorzy . ......................................................................................... 217 ROZWIĄZANIE . .......................................................................................................... 218 Krok 1. Utwórz pustą bazę danych .......................................................................... 218 Krok 2. Zaprojektuj bazę danych ............................................................................ 219 Krok 3. Utwórz projekt z aplikacją frontend . ......................................................... 219 Krok 4. Wykonaj moduł glowny ............................................................................. 219 Krok 5. Skonfiguruj dostęp do bazy danych . .......................................................... 219 Krok 6. Dostosuj klasy wygenerowane przez Propel . ............................................ 220 Krok 7. Przygotuj zadanie propel:import-danych . .................................................. 221 Krok 8. Wypełnij bazę danych rekordami . ............................................................. 223 Krok 9. Wygeneruj panele CRUD ........................................................................... 223 Krok 10. Usuń zbędne akcje modułów film oraz aktor . .............................................. 223 Krok 11. Zmodyfikuj funkcje executeShow() . ....................................................... 224 Krok 12. Dostosuj widoki akcji film/index oraz aktor/index . ................................. 224 Krok 13. Zmodyfikuj widok akcji film/show . ........................................................ 224 Krok 14. Zmodyfikuj widok akcji aktor/show . ....................................................... 224 Krok 15. Zmień adresy URL ................................................................................... 225 Krok 16. Dostosuj wygląd witryny .......................................................................... 225 Krok 17. Ustal tytuły stron ...................................................................................... 226

Rozdział 17. Widoki częściowe . ....................................................................... 227 Przykład 17. Czcionki projektów CSS Zen Garden . ..................................................... 228 ROZWIĄZANIE . .......................................................................................................... 230 Krok 1. Przeanalizuj dane ....................................................................................... 230 Krok 2. Utwórz pustą bazę danych .......................................................................... 231 Krok 3. Zaprojektuj bazę danych ............................................................................ 231 Krok 4. Utwórz projekt z aplikacją frontend . ......................................................... 232 Krok 5. Skonfiguruj dostęp do bazy danych . .......................................................... 232 Krok 6. Przygotuj zadanie propel:import-danych . .................................................. 233 Krok 7. Wypełnij bazę danych rekordami . ............................................................. 235 Krok 8. Dodaj metody zliczające powiązane rekordy . ........................................... 235

10

Symfony w przykładach Krok 9. Przygotuj zadanie propel:przelicz . ............................................................ 238 Krok 10. Przelicz rekordy . ...................................................................................... 238 Krok 11. Wykonaj moduł glowny ........................................................................... 238 Krok 12. Dostosuj klasy wygenerowane przez Propel . .......................................... 239 Krok 13. Dodaj metody ułatwiające dostęp do obiektów połączonych relacją n:m .................................................................. 239 Krok 14. Wygeneruj panele CRUD ......................................................................... 240 Krok 15. Usuń zbędne akcje .................................................................................... 240 Krok 16. Zmodyfikuj funkcje executeShow() . ....................................................... 240 Krok 17. Przygotuj widok częściowy projekt/lista . ................................................ 240 Krok 18. Dostosuj widok akcji projekt/index . ........................................................ 241 Krok 19. Dostosuj widok akcji czcionka/show . ..................................................... 242 Krok 20. Przygotuj widok częściowy czcionka/lista . ............................................. 244 Krok 21. Dostosuj widok akcji czcionka/index . ..................................................... 245 Krok 22. Dostosuj widok akcji projekt/show . ........................................................ 245 Krok 23. Dostosuj widok akcji modułu rodzina . .................................................... 245 Krok 24. Zmień adresy URL ................................................................................... 246 Krok 25. Dostosuj wygląd witryny .......................................................................... 247 Krok 26. Ustal tytuły stron ...................................................................................... 247

Rozdział 18. Publikowanie aplikacji, która wykorzystuje bazę danych, na serwerze hostingowym . ........................................................... 249 Przykład 18.1. NotH — edytor kodu XHTML/CSS . .................................................... 249 ROZWIĄZANIE . .......................................................................................................... 250 Krok 1. Przeanalizuj dane . ............................................................................................ 250 Krok 2. Utwórz pustą bazę danych . ............................................................................... 252 Krok 3. Zaprojektuj bazę danych . ................................................................................. 252 Krok 4. Utwórz projekt z aplikacją frontend ................................................................. 252 Krok 5. Skonfiguruj dostęp do bazy danych .................................................................. 253 Krok 6. Dostosuj klasy wygenerowane przez Propel .................................................... 253 Krok 7. Przygotuj zadanie propel:import-danych .......................................................... 253 Krok 8. Wypełnij bazę danych rekordami ..................................................................... 256 Krok 9. Wykonaj moduł glowny . .................................................................................. 256 Krok 10. Wygeneruj panele CRUD . .............................................................................. 256 Krok 11. Usuń zbędne akcje . ......................................................................................... 257 Krok 12. Zmodyfikuj funkcje executeShow() ............................................................... 257 Krok 13. Dostosuj widok akcji menu/show ................................................................... 257 Krok 14. Dostosuj widok akcji img/show ..................................................................... 257 Krok 15. Dostosuj widok akcji plik/show ..................................................................... 258 Krok 16. Dostosuj akcje modułu podrecznik ................................................................. 258 Krok 17. Dostosuj akcje modułu skroty ........................................................................ 258 Krok 18. Wykonaj komponent menu/menu ................................................................... 259 Krok 19. Wykonaj komponent menu/menupionowe ..................................................... 260 Krok 20. Dostosuj wygląd witryny . ............................................................................... 261 Krok 21. Zmień adresy URL . ........................................................................................ 261 Krok 22. Ustal tytuły stron . ........................................................................................... 263 Przykład 18.2. NotH — publikacja na serwerze . .......................................................... 263 ROZWIĄZANIE . .......................................................................................................... 264 Krok 1. Zrzut bazy danych ...................................................................................... 264 Krok 2. Utwórz pustą bazę danych na serwerze . .................................................... 264 Krok 3. Wykonaj import zawartości bazy danych . ................................................. 264 Krok 4. Przekopiuj na serwer bibliotekę Symfony 1.4 . .......................................... 266 Krok 5. Utwórz folder przeznaczony na projekt . .................................................... 266 Krok 6. Zablokuj dostęp do plików projektu . ......................................................... 268

Spis treści

11 Krok 7. Przekopiuj projekt na serwer ...................................................................... 268 Krok 8. Przekieruj domenę na folder noth/web/ . .................................................... 268 Krok 9. Zmodyfikuj plik noth/web/.htaccess . ......................................................... 268 Krok 10. Zmodyfikuj plik noth/config/databases.yml . ........................................... 269 Krok 11. Zmodyfikuj ścieżkę do biblioteki Symfony . ........................................... 270

Rozdział 19. Czego dowiedziałeś się w drugiej części? . .................................... 271

Część III Panele administracyjne . ............................................ 273 Rozdział 20. Tłumaczenie interfejsu witryny . .................................................... 275 Przykład 20. Dzień dobry . ............................................................................................. 275 ROZWIĄZANIE . .......................................................................................................... 276 Krok 1. Utwórz nowy projekt, aplikację i moduł . .................................................. 276 Krok 2. Ustal adres strony głównej ......................................................................... 276 Krok 3. Dostosuj akcję glowny/index ..................................................................... 276 Krok 4. Dostosuj widok akcji glowny/index . ......................................................... 276 Krok 5. Ustal domyślny język aplikacji .................................................................. 277 Krok 6. Zdefiniuj tłumaczenia komunikatu Good morning . ................................... 277 Krok 7. Ustal tytuł witryny oraz oznacz język dokumentu XHTML ...................... 278 Krok 8. Przetestuj witrynę . ...................................................................................... 279

Rozdział 21. Pierwszy panel administracyjny . ................................................... 283 Przykład 21. Piosenki wojskowe (panel administracyjny) . ........................................... 283 ROZWIĄZANIE . .......................................................................................................... 284 Krok 1. Przeanalizuj przykład 11. ........................................................................... 284 Krok 2. Uruchom przykład 11. ................................................................................ 284 Krok 3. Utwórz aplikację backend i moduł piosenka . ............................................ 284 Krok 4. Dostosuj wygląd aplikacji backend . .......................................................... 285 Krok 5. Zabezpiecz dostęp do aplikacji backend . ................................................... 288 Krok 6. Zainstaluj wtyczkę sfGuardAuth . .............................................................. 288 Krok 7. Utwórz konto admin ................................................................................... 288 Krok 8. Uruchom stronę logowania ........................................................................ 289 Krok 9. Logowanie do aplikacji backend z aplikacji frontend ............................... 290 Krok 10. Wylogowanie z aplikacji backend . .......................................................... 290 Krok 11. Dostosuj formularz logowania ................................................................. 291 Krok 12. Dostosuj panel CRUD .............................................................................. 293 Krok 13. W aplikacji backend dodaj filtr „zapamiętaj mnie” . ................................ 294

Rozdział 22. Kontekstowe hiperłącza do edycji i usuwania rekordów . ............... 295 Przykład 22. Zbiór zadań C++ . ...................................................................................... 296 ROZWIĄZANIE . .......................................................................................................... 296 Etap 1. Utwórz nowy projekt i wykonaj aplikację frontend . .................................. 296 Etap 2. Wykonaj aplikację backend ........................................................................ 307 Etap 3. Połącz aplikacje frontend i backend . .......................................................... 310 Etap 4. Kontekstowość usuwania rekordów . .......................................................... 313 Etap 5. Ułatwienia w wypełnianiu formularzy . ...................................................... 313

Rozdział 23. Administracja kontami użytkowników . ......................................... 317 Przykład 23. Angaże . ..................................................................................................... 318 ROZWIĄZANIE . .......................................................................................................... 319 Etap 1. Wykonaj aplikację frontend ........................................................................ 319 Etap 2. Zabezpieczanie dostępu do aplikacji frontend . ........................................... 336 Etap 3. Ustal poziomy dostępu do aplikacji: . ......................................................... 339

12

Symfony w przykładach

Rozdział 24. Generowanie paneli administracyjnych . ........................................ 347 Przykład 24. Turniej czterech skoczni ........................................................................... 347 ROZWIĄZANIE . .......................................................................................................... 347 Etap 1. Utwórz nowy projekt i wykonaj aplikację frontend . .................................. 347 Etap 2. Wykonaj aplikację backend ........................................................................ 352 Etap 3. Refaktoryzacja . ........................................................................................... 356

Rozdział 25. Zabezpieczanie paneli administracyjnych przy użyciu protokołu HTTPS . ....................................................... 361 Przykład 25. Turniej Czterech Skoczni (HTTPS) . ........................................................ 362 ROZWIĄZANIE . .......................................................................................................... 362 Krok 1. Zrzut bazy danych ...................................................................................... 362 Krok 2. Utwórz pustą bazę danych na serwerze . .................................................... 362 Krok 3. Wykonaj import zawartości bazy danych . ................................................. 362 Krok 4. Przekopiuj na serwer bibliotekę Symfony 1.4 . .......................................... 363 Krok 5. Utwórz folder przeznaczony na projekt . .................................................... 363 Krok 6. Zablokuj dostęp do plików projektu . ......................................................... 363 Krok 7. Przekopiuj projekt na serwer ...................................................................... 363 Krok 8. Przekieruj domeny ..................................................................................... 364 Krok 9. Zmodyfikuj pliki.htaccess .......................................................................... 364 Krok 10. Zmodyfikuj plik tcs/config/databases.yml . .............................................. 365 Krok 11. Zmodyfikuj ścieżkę do biblioteki Symfony . ........................................... 365

Rozdział 26. Czego dowiedziałeś się w trzeciej części? . ................................... 367 Literatura . ................................................................................... 369 Skorowidz . .................................................................................. 371

Podziękowania Serdecznie dziękuję:  Fabienowi Potencierowi i całemu zespołowi pracującemu nad Symfony

za trud i pracę włożoną w opracowanie, udokumentowanie oraz bezpłatne udostępnienie wspaniałego oprogramowania;  Społeczności programistów zgromadzonej wokół projektu Symfony

za ogromny zestaw rozszerzeń;  Pracownikom wydawnictwa Helion, szczególnie Pani Redaktor Ewelinie

Burskiej, za cierpliwość i profesjonalizm;  Mojemu studentowi, Panu Rafałowi Nagrodzkiemu, za zachęcenie mnie

do pracy w środowisku NetBeans;  Wszystkim studentom Katolickiego Uniwersytetu Lubelskiego im. Jana Pawła II,

którzy w latach 2007 – 2010 uczestniczyli w prowadzonych przeze mnie zajęciach dotyczących Symfony;  Moim Najbliższym za wsparcie i mobilizację.

Włodzimierz Gajda

14

Symfony w przykładach

Wstęp Tworzenie oprogramowania działającego w środowisku WWW podlega ciągłemu procesowi rozwoju. Kluczowymi czynnikami, o które toczy się nieustanna walka, są czas tworzenia aplikacji oraz jej niezawodność. Obserwując to, co działo się na rynku na przestrzeni ostatniej dekady, zauważymy bardzo intensywny rozwój rozwiązań typu framework implementowanych na bazie architektury MVC (ang. Model View Controller). Ten rozwój doprowadził do podwyższenia niezawodności, skrócenia czasu produkcji oraz obniżenia kosztu tworzonego oprogramowania. Dzisiaj trudno już znaleźć oferty pracy, w których nie pojawiają się wymagania dotyczące znajomości biblioteki MVC. Zauważając zachodzące zmiany, cztery lata temu — w ramach przedmiotów, na których nauczałem programowania w języku PHP — zacząłem wprowadzać zagadnienia związane z MVC. Najpierw były to własne próby implementacji biblioteki1, następnie oprogramowanie Symfony i Zend Framework. Z dzisiejszej perspektywy widzę, że ta decyzja była słuszna. Programowanie własnych aplikacji bez wykorzystania bibliotek MVC jest znacznie trudniejsze, bardziej pracochłonne i podatne na błędy. Wydaje mi się, że w odniesieniu do przeciętnego projektu trudno znaleźć argumenty przemawiające za rezygnacją z gotowego frameworka MVC. Obecnie kursy programowania w PHP prowadzę w taki sposób, by wykorzystanie frameworków pojawiało się możliwie jak najwcześniej. Tak jak w latach dziewięćdziesiątych XX wieku kursy programowania w językach Pascal oraz C++ zaczęto prowadzić w środowiskach RAD, tak w ciągu ostatnich pięciu lat kursy tworzenia aplikacji internetowych coraz częściej są prowadzone z wykorzystaniem gotowych bibliotek framework. Książka, którą właśnie czytasz, nie jest typowym podręcznikiem. Jest to możliwie jak najbardziej skondensowana instrukcja, która ma na celu zapoznać Cię z Symfony. Jako punkt wyjściowy założyłem zupełny brak znajomości MVC. Konieczna wydaje mi się jedynie znajomość podstaw PHP oraz XHTML/CSS. Punktem końcowym naszej 1

Te próby opisałem w dwóch książkach PHP. Praktyczne projekty oraz PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych wydanych przez wydawnictwo Helion. Te książki stanowią moim zdaniem bardzo dobre wprowadzenie do tematyki MVC. Pierwsza z nich zawiera podstawowy kurs języka PHP, który kończy się przygotowaniem własnej biblioteki MVC. Druga książka jest pewnego rodzaju kontynuacją: zawiera przykłady dużych witryn WWW wykonanych z wykorzystaniem biblioteki MVC zaimplementowanej w pierwszym podręczniku. Przy czym jeśli szukasz informacji, w jaki sposób zaimplementować własną bibliotekę MVC, to wyjaśnienie tej kwestii znajdziesz w pierwszej z książek. Druga publikacja pokazuje, w jaki sposób bibliotekę MVC wykorzystać w praktyce.

16

Symfony w przykładach

wspólnej wędrówki jest kompletna aplikacja internetowa, która z jednej strony posiada zaawansowany system autoryzacyjny pozwalający na zróżnicowane uprawnień wielu użytkowników, a z drugiej — pozwala na pełną edycję treści zawartych w bazie danych. Ta książka ma charakter czysto praktyczny. Serdecznie zachęcam Cię do samodzielnego wykonania opisanych przeze mnie przykładów. Zagadnienia, których się w ten sposób nauczysz, z pewnością pozwolą Ci na wykonanie bardzo wielu ciekawych witryn i aplikacji internetowych! Włodzimierz Gajda Lublin, 30 września 2010 r.

Część I

Tworzenie stron WWW w Symfony

18

Część I ♦ Tworzenie stron WWW w Symfony

Rozdział 1. ♦ Pierwszy projekt w Symfony

19

Rozdział 1.

Pierwszy projekt w Symfony Pierwszy z przykładów ma Cię zapoznać z procesem tworzenia i uruchamiania projektu oraz ze strukturą folderów aplikacji tworzonej w Symfony.

Przykład 1. Hello, World! Przygotuj witrynę WWW, która będzie prezentowała tekst powitalny Hello, World!. Ten tekst umieść w treści witryny, tj. pomiędzy znacznikami oraz . Zadanie wykonaj w wierszu poleceń. Powitanie Hello, World! ma być statycznym napisem zawartym w widoku akcji.

ROZWIĄZANIE Krok 1. Utwórz nowy projekt Symfony W folderze przeznaczonym na aplikacje WWW1 utwórz folder hello-world/. Uruchom wiersz poleceń i przy użyciu komend cd przejdź do folderu hello-world/. Następnie wydaj komendę: symfony generate:project hello-world

1

Procedura instalacji oprogramowania jest dostępna pod adresem: ftp://ftp.helion.pl/przyklady/symfpr.zip. Jeśli stanowisko pracy przygotowałeś zgodnie z podanym opisem, to tym folderem jest C:\xampp\htdocs\. Jeśli, instalując oprogramowanie, zachowałeś domyślne ścieżki serwera Apache, to tym folderem jest C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\.

Część I ♦ Tworzenie stron WWW w Symfony

20

Spowoduje ona utworzenie nowego projektu Symfony o nazwie hello-world. Polecenie symfony generate:project możesz uzupełnić, dodając opcjonalny parametr ustalający imię i nazwisko autora projektu: symfony generate:project hello-world "Jan Kowalski"

Po wydaniu polecenia symfony generate:project zajrzyj do folderu hello-world/. Znajdziesz w nim foldery przedstawione na rysunku 1.1. Rysunek 1.1. Foldery utworzone po wydaniu polecenia symfony generate:project

W pliku hello-world/config/properties.ini są zapisywane globalne parametry projektu: jego nazwa, imię i nazwisko autora oraz stosowany system ORM. Po wydaniu polecenia: symfony generate:project hello-world "Jan Kowalski"

zawartość pliku properties.ini będzie taka, jak na listingu 1.1. Listing 1.1. Zawartość pliku hello-world/config/properties.ini [symfony] name=hello-world author=Jan Kowalski orm=Doctrine

Polecenie symfony generate:project tworzy projekt o podanej nazwie: symfony generate:project nazwaprojektu

Za pomocą opcjonalnych parametrów możesz ustalić dane autora oraz stosowany system ORM. Projekty z pierwszej części nie wykorzystują baz danych. Parametrem --orm=none możesz zrezygnować ze stosowania systemu ORM: symfony generate:project --orm=none nazwaprojektu "Imię Nazwisko"

Krok 2. Utwórz aplikację frontend Wydaj polecenie, które w projekcie hello-world utworzy nową aplikację o nazwie frontend: symfony generate:app frontend

Rozdział 1. ♦ Pierwszy projekt w Symfony

21

Po wydaniu powyższego polecenia w folderze hello-world/apps/ pojawi się folder aplikacji, a w folderze web/ zostaną utworzone dwa pliki PHP: frontend_dev.php oraz index.php. Lista folderów i plików tworzonych przez polecenie symfony generate:app jest przedstawiona na rysunku 1.2. Rysunek 1.2. Foldery i pliki tworzone po wydaniu polecenia symfony generate:app frontend

W tym momencie możesz uruchomić aplikację. Włącz przeglądarkę WWW i odwiedź stronę http://localhost/hello-world/web/. Zwróć uwagę, by adres wpisany w przeglądarce rozpoczynał się od przedrostka http://localhost. Ujrzysz witrynę przedstawioną na rysunku 1.3.

Rysunek 1.3. Projekt hello-world po utworzeniu aplikacji frontend

Część I ♦ Tworzenie stron WWW w Symfony

22

Polecenie symfony generate:app tworzy nową aplikację w projekcie. Parametrem polecenia jest nazwa tworzonej aplikacji: symfony generate:app nazwaaplikacji

Po wydaniu polecenia zostanie utworzony folder aplikacji i dwa pliki PHP. Wydane po raz pierwszy polecenie symfony generate:app utworzy pliki: web/index.php, web/nazwaaplikacji_dev.php. Jeśli polecenie generate:app wykonasz po raz kolejny, to utworzone pliki będą się nazywały: ♦ web/nazwaaplikacji.php, ♦ web/nazwaaplikacji_dev.php.

Krok 3. Utwórz moduł o nazwie glowny Kolejnym krokiem jest utworzenie modułu. Wydaj polecenie: symfony generate:module frontend glowny

Spowoduje ono utworzenie w aplikacji frontend modułu o nazwie glowny. Pierwszy parametr polecenia ustala, że moduł będzie tworzony wewnątrz aplikacji frontend. Drugi określa nazwę modułu. Pliki modułu znajdą się w folderze hello-world/apps/ frontend/modules/glowny/. Moduł składa się z akcji i widoków. Akcje modułu są zawarte w pliku actions. class.php, zaś widoki— w folderze templates/. Pliki i foldery modułu glowny są przedstawione na rysunku 1.4. Rysunek 1.4. Pliki i foldery modułu glowny

Polecenie symfony generate:module tworzy moduł, który będzie zawierał jedną akcję index. Akcję index modułu glowny będziemy nazywali akcją glowny/index. Ta akcja jest zdefiniowana przez metodę executeIndex() zawartą w klasie glownyActions w pliku actions.class.php. Z tą akcją jest związany widok zawarty w pliku indexSuccess.php.

Rozdział 1. ♦ Pierwszy projekt w Symfony

23

Zwróć uwagę na konwencję nazewniczą dotyczącą akcji. Akcja o nazwie lorem składa się z metody executeLorem() oraz widoku loremSuccess.php. Natomiast akcję ipsum tworzą: ♦ metoda executeIpsum(), ♦ widok ipsumSuccess.php.

Krok 4. Utwórz akcję glowny/powitanie Teraz przystępujemy do zaimplementowania akcji powitanie w module glowny. Akcja glowny/powitanie będzie się składała z metody executePowitanie() oraz widoku powitanieSuccess.php. Metodę executePowitanie() należy umieścić w pliku actions.class.php modułu glowny, a widok powitanieSuccess.php — w folderze hello-world/apps/frontend/ modules/glowny/templates/. Metoda executePowitanie() będzie pusta, a w widoku powitanieSuccess.php umieścimy komunikat powitalny Hello, World!. Otwórz plik actions.class.php i wprowadź zawartość z listingu 1.2. Usuń metodę executeIndex() i dodaj pustą metodę executePowitanie(), której nagłówek jest identyczny z nagłówkiem metody executeIndex(). Listing 1.2. Plik actions.class.php modułu glowny2 w pliku actions.clas.php. Nie jest to przeoczenie. Jeśli po znaczniku ?> znalazłyby się białe znaki, to w niektórych sytuacjach mogłyby one powodować błędy. Usuwając znacznik zamykający ?>, zabezpieczamy się przed tego typu problemami. Przykład błędu generowanego przez obecność białych znaków umieszczonych przed znacznikiem znajdziesz w rozdziale 14. Listing 1.3. Plik powitanieSuccess.php Hello, World!

Moduł glowny tworzą teraz dwa pliki, których położenie w drzewie projektu jest przedstawione na rysunku 1.5. Pierwszy z nich, plik actions.class.php, jest przedstawiony na listingu 1.2, a drugi — powitanieSuccess.php — na listingu 1.3. Rysunek 1.5. Pliki tworzące moduł glowny po utworzeniu akcji powitanie i usunięciu akcji index

Krok 5. Odwiedź akcję glowny/powitanie Uruchom przeglądarkę WWW i odwiedź stronę akcji glowny/powitanie. Na końcu adresu URL strony z rysunku 1.3 dopisz ręcznie nazwę modułu i akcji. Adres URL akcji glowny/powitanie jest następujący: http://localhost/hello-world/web/glowny/powitanie

Po odwiedzeniu go ujrzysz stronę taką, jak na rysunku 1.6. Ćwiczenie zostało zakończone.

Zestawienie poznanych poleceń Wykonując pierwszy przykład, wydaliśmy trzy komendy w wierszu poleceń. Są one zawarte na listingu 1.4. Pierwsza z nich tworzy pusty projekt o nazwie hello-world. Druga wewnątrz projektu hello-world tworzy aplikację frontend. Trzecia w aplikacji frontend tworzy moduł glowny. Pamiętaj, że wszystkie pliki aplikacji frontend są zawarte w folderze hello-world/apps/frontend/, a wszystkie pliki modułu glowny — w folderze hello-world/apps/frontend/modules/glowny/.

Rozdział 1. ♦ Pierwszy projekt w Symfony

25

Rysunek 1.6. W celu uruchomienia przykładu w przeglądarce trzeba ręcznie dopisać na końcu adresu glowny/powitanie Listing 1.4. Zestawienie poleceń wydanych w trakcie wykonywania pierwszego przykładu symfony generate:project hello-world symfony generate:app frontend symfony generate:module frontend glowny

Struktura aplikacji tworzonej w Symfony Pracując w Symfony, będziemy operowali następującymi pojęciami:  projekt,  aplikacja,  moduł,  akcja,  widok.

Każdy z przykładów omawianych w książce będzie stanowił oddzielny projekt Symfony. Na projekt składają się pliki i foldery o strukturze takiej, jak na rysunku 1.1. Nowy projekt Symfony tworzymy poleceniem symfony generate:project. Projekt jest dalej podzielony na aplikacje, które są zawarte w folderze apps/. Każda aplikacja ma tam swój folder o nazwie identycznej z nazwą samej aplikacji. Aplikacja frontend w projekcie hello-world jest zawarta w folderze hello-world/apps/frontend/.

Część I ♦ Tworzenie stron WWW w Symfony

26

Do tworzenia aplikacji służy polecenie symfony generate:app. Początkowo projekty będą zawierały tylko jedną aplikację frontend. Będzie ona umożliwiała przeglądanie treści witryny bez edycji zawartości. W momencie, gdy omówimy zagadnienia dotyczące autoryzacji, w projekcie pojawi się druga aplikacja o nazwie backend, która będzie umożliwiała edycję treści. Oczywiście nazwy aplikacji w projekcie muszą być unikatowe. Innymi słowy w projekcie nie mogą pojawić się dwie aplikacje o identycznych nazwach. Aplikacja składa się z modułów. Każdy moduł jest zawarty w oddzielnym folderze i jest niezależny od pozostałych. W pierwszym omówionym przykładzie w aplikacji frontend utworzyliśmy moduł o nazwie glowny. Pliki tego modułu są zawarte w folderze apps/frontend/modules/glowny/. Moduły są podzielone na akcje i widoki. Akcje modułu definiujemy w pliku actions.class.php, a widoki umieszczamy w folderze templates/. Nazwy modułów w ramach jednej aplikacji muszą być unikatowe. Utworzenie nowej akcji o nazwie lorem wewnątrz modułu polega na zdefiniowaniu metody executeLorem() w pliku actions.class.php. Natomiast usuwając z pliku actions.class.php metodę executeLorem(), usuwamy z modułu akcję. Z akcjami są powiązane widoki, które zapisujemy w folderze templates/ modułu. W module glowny mieliśmy do czynienia z jednym widokiem hello-world/apps/frontend/ modules/glowny/templates/powitanieSucces.php. Widok jest plikiem PHP, który będzie generował kod XHTML wyświetlany po wykonaniu akcji. Oczywiście nazwy akcji w danym module muszą być unikatowe. Nazwy akcji będziemy zapisywali w postaci nazwa_modułu/nazwa_akcji. W omawianym przykładzie wystąpiła jedna akcja o nazwie glowny/powitanie. Jest ona zdefiniowana przez metodę executePowitanie() z listingu 1.2 oraz przez widok powitanieSuccess.php z listingu 1.3. Każda akcja ma swój adres URL, który możesz wpisać w przeglądarce. Jeśli zechcesz odwiedzić stronę generowaną po wykonaniu akcji glowny/powitanie w przykładzie hello-world, wówczas użyj adresu: http://localhost/hello-world/web/glowny/powitanie

Składnikami tego adresu są:  hello-world/ — folder główny projektu,  web/ — folder wygenerowany poleceniem symfony generate:project,  glowny — nazwa modułu w aplikacji frontend (frontend musi być pierwszą

utworzoną aplikacją w projekcie; dla pierwszej tworzonej aplikacji jest bowiem generowany plik index.php),  powitanie — nazwa akcji, którą chcesz odwiedzić.

Rozdział 1. ♦ Pierwszy projekt w Symfony

27

Jeśli w folderze lorem/ utworzysz nowy projekt o nazwie lorem, a w nim dwie aplikacje ipsum i dolor, oraz jeśli w aplikacji ipsum utworzysz moduł sit z akcją amet, a w aplikacji dolor moduł consectetuer z akcją adipiscing, to zostaną utworzone pliki takie, jak na rysunku 1.7. Rysunek 1.7. Projekt lorem, aplikacje ipsum i dolor oraz moduły sit/amet i consectetuer/ adipiscing

Do odwiedzenia akcji sit/amet służy adres: http://localhost/lorem/web/sit/amet

Jeśli natomiast zechcesz odwiedzić akcję consectetuer/adipiscing, wówczas użyj adresu: http://localhost/lorem/web/dolor.php/consectetuer/adipiscing

Jeśli odwiedzasz akcję aplikacji, która została utworzona jako pierwsza, to nazwę pliku index.php możesz pominąć w adresie URL, gdyż adresy: http://localhost/lorem/web/sit/amet http://localhost/lorem/web/index.php/sit/amet

są równoważne. Jeśli natomiast zechcesz się dostać do innej aplikacji, wówczas musisz użyć nazwy skryptu PHP, który został wygenerowany w folderze web/ dla danej aplikacji. Na przykład dolor.php.

Część I ♦ Tworzenie stron WWW w Symfony

28

Środowiska Ostatnim zagadnieniem dotyczącym struktury aplikacji tworzonej w Symfony są środowiska. Umożliwiają one wymianę parametrów konfiguracyjnych aplikacji, bez konieczności modyfikowania kodu. Do uruchamiania aplikacji w alternatywnym środowisku służą pliki PHP zawarte w folderze web/. Domyślnie polecenie symfony generate:app tworzy dla aplikacji dwa pliki: jeden uruchamiany w środowisku produkcyjnym, drugi uruchamiany w środowisku deweloperskim. Środowisko produkcyjne jest nazwane prod, a środowisko deweloperskie dev. W omawianym przykładzie dla aplikacji frontend zostały wygenerowane dwa pliki PHP:  web/index.php,  web/frontend_dev.php.

Pierwszy z nich, index.php, powoduje uruchomienie aplikacji frontend w środowisku produkcyjnym. Drugi z nich, frontend_dev.php, uruchamia aplikację frontend w środowisku deweloperskim. W pliku web/index.php znajdziesz instrukcje, które uruchamiają aplikację frontend w środowisku prod: $configuration = ProjectConfiguration::getApplicationConfiguration('frontend', ´'prod', false); sfContext::createInstance($configuration)->dispatch();

Natomiast w pliku web/frontend_dev.php znajdują się instrukcje uruchamiające aplikację frontend w środowisku dev: $configuration = ProjectConfiguration::getApplicationConfiguration('frontend', ´'dev', true); sfContext::createInstance($configuration)->dispatch();

Różnica pomiędzy środowiskami prod i dev jest taka, że tylko w środowisku deweloperskim są wyświetlane informacje o błędach. Jeśli chcesz się o tym przekonać, otwórz plik actions.class.php z listingu 1.2 i dodaj na samej górze błędny kod a b c:







W roli szablonu chcemy użyć pliku xhtml-css-template/index.html pochodzącego z archiwum 03-start.zip. Plik index.html jest przedstawiony na listingu 3.6. Listing 3.6. Szablon index.html, którego chcemy użyć w projekcie dwa-kabele

template



Wiersze i wierszyki...

Lorem ipsum...

Część I ♦ Tworzenie stron WWW w Symfony

50



Wymianę treści pliku layout.php na index.html wykonaj pamiętając, by:  elementy nagłówka były generowane tak, jak na listingu 3.5, tj. z wykorzystaniem funkcji pomocniczych include_title(), include_meta(), include_stylesheets() itd.;  pomiędzy znacznikami i , w miejscu, w którym ma wystąpić treść, użyć zmiennej $sf_content.

Gotowy szablon layout.php, który spowoduje, że witryna z wierszem pt. Dwa kabele będzie wyglądała tak, jak na rysunku 3.1., jest przedstawiony na listingu 3.7. Zmieniliśmy w nim zawartość pomiędzy znacznikami i , język dokumentu ustalony atrybutami xml:lang i lang elementu html oraz usunęliśmy zbędny element:

ustalający ikonę witryny. Listing 3.7. Szablon layout.php, który spowoduje, że strona z wierszem będzie wyglądała tak, jak na rysunku 3.1







Wiersze i wierszyki...





Kod XHTML z listingu 3.7 należy sformatować wizualnie stylami CSS zawartymi w plikach xhtml-css-template/css/style.css oraz xhtml-css-template/css/print.css. Style z pliku style.css są przeznaczone dla monitorów, a z pliku print.css — dla urządzeń drukujących. Pracując w gołym języku XHTML, oba pliki dołączylibyśmy elementami link:

Rozdział 3. ♦ Wymiana szablonu XHTML/CSS

51

jednak pracując w Symfony, konfigurację szablonu ustalamy w pliku view.yml. W kodzie widocznym na listingu 3.3 zmodyfikuj wiersz rozpoczynający się od stylesheets następująco: stylesheets:

[style.css , print.css: { media: print}]

Powyższa reguła powoduje, że funkcja pomocnicza include_stylesheets(), która jest użyta na listingu 3.7, umieści w generowanym kodzie XHTML elementy:

Ścieżki podane w atrybucie href będą prowadziły do plików w folderze web/css/ bieżącego projektu. Następnie skopiuj pliki style.css oraz print.css z folderu xhtml-css-template/css/ do folderu dwa-kabele/web/css/ oraz usuń zbędny plik dwa-kabele/web/css/main.css. Na zakończenie skopiuj pliki graficzne z folderu xhtml-css-template/images/ do folderu dwa-kabele/web/images/. W celu sprawdzenia wyglądu aplikacji najpierw przy użyciu polecenia: symfony cc

wyczyść pamięć podręczną, a następnie za pomocą przeglądarki odwiedź adres: http://localhost/dwa-kabele/web/

Powinieneś ujrzeć witrynę taką, jak na rysunku 3.1. Jeśli chcesz poznać funkcję stylów print.css, wykonaj w przeglądarce operację Plik/Podgląd wydruku. Ujrzysz witrynę taką, jak na rysunku 3.3. Dzięki zastosowaniu w pliku print.css właściwości: display: none

elementy dekoracyjne zostały usunięte i nie pojawią się na wydruku. Pliki graficzne tworzące szablon XHTML/CSS z rysunku 3.1 nazywają się gora.png, nagłówek.png, pojemnik.png, stopka.png. Pliki te nie występują w kodzie XHTML, a wyłącznie w kodzie CSS. W projekcie nie korzystamy ze znacznika img:

Pliki PNG stanowią tło wybranych elementów XHTML i są dołączone do witryny przy użyciu właściwości background, np.: body { background: #e8edef url('../images/gora.png') repeat-x; margin: 0; font-family: Georgia, serif; }

Ścieżki do plików graficznych są względne. Prowadzą z pliku style.css do folderu images/.

Część I ♦ Tworzenie stron WWW w Symfony

52

Rysunek 3.3. Podgląd wydruku witryny z rysunku 3.1

Przebieg wykonania aplikacji Po wprowadzeniu w przeglądarce adresu: http://localhost/dwa-kabele/web/

wyśle ona do serwera WWW o adresie localhost żądanie HTTP dotyczące zasobu /dwa-kabele/web/. Na podstawie reguły: RewriteRule ^(.*)$ index.php [QSA,L]

zawartej w pliku dwa-kabele/web/.htaccess zapytanie HTTP spowoduje wykonanie skryptu dwa-kabele/web/index.php. Ten skrypt jest głównym kontrolerem aplikacji frontend w środowisku produkcyjnym. Przy pierwszej wizycie kontroler index.php przeanalizuje składnię wszystkich plików YAML aplikacji frontend i jej modułów. Są to między innymi pliki zawarte w folderze dwa-kabele/apps/frontend/config/, w tym zmodyfikowane przez nas view.yml oraz routing.yml. Pliki YAML zostaną przekonwertowane na format PHP i zapisane w folderze dwa-kabele/cache/. Następnie na podstawie reguły:

Rozdział 3. ♦ Wymiana szablonu XHTML/CSS

53

homepage: url: / param: { module: wierszyk, action: pokaz }

zawartej w pliku routing.yml kontroler index.php wykona akcję pokaz modułu wierszyk. W ten sposób dojdzie do uruchomienia metody executePokaz() z listingu 3.1. Po wykonaniu metody executePokaz() kontroler przetworzy widok pokazSuccess.php z listingu 3.2. Wynik przetwarzania widoku zostanie zapamiętany w zmiennej $sf_content. Na zakończenie kontroler przetworzy szablon dwa-kabele/apps/frontend/ templates/layout.php, umieszczając w nim bieżącą wartość zmiennej $sf_content oraz elementy nagłówka (m.in. title, link i meta), które powstają na podstawie pliku view.yml. Wynik przetwarzania pliku layout.php zostanie wysłany do przeglądarki WWW.

54

Część I ♦ Tworzenie stron WWW w Symfony

Rozdział 4.

Dołączanie zewnętrznych zasobów Biblioteka Symfony przejmuje całą kontrolę nad adresami URL występującymi w aplikacji. Pracując w Symfony, nie należy w widokach ani w szablonie layout.php stosować adresów URL w postaci takiej, jak w statycznych dokumentach XHTML. Wiemy już, że za dołączanie do strony WWW stylów CSS odpowiada reguła zawarta w pliku view.yml. W statycznym dokumencie HTML napisalibyśmy:

...

W Symfony ten kod przyjmie postać:

...

W podobny sposób do aplikacji dołączymy zewnętrzne skrypty JavaScript oraz wyeliminujemy konieczność stosowania ścieżek prowadzących do plików graficznych. Zamiast elementu script:

...

korzystamy z funkcji:

...

Część I ♦ Tworzenie stron WWW w Symfony

56

Natomiast znacznik :

zastępujemy wywołaniem funkcji image_tag():

lub image_path():

Zapewni to niezależność całej aplikacji od położenia zasobów .js, .jpg, .png oraz od stosowanych adresów URL.

Przykład 4. Żmija W folderze 04-start/witryna-www/ jest zawarta witryna, która prezentuje zdjęcie zmija.jpg. Jest to statyczny dokument XHTML, który wygląda jak na rysunku 4.1. Skrypty JavaScript zawarte w plikach jquery-1.4.min.js oraz animacja.js powodują, że zawartość witryny jest animowana.

Rysunek 4.1. Witryna prezentująca zdjęcie żmii

Rozdział 4. ♦ Dołączanie zewnętrznych zasobów

57

Przygotuj identyczną stronę WWW, korzystając z oprogramowania Symfony. W projekcie utwórz aplikację frontend, a w niej — moduł animal. W module animal zdefiniuj akcję show. Zadanie wykonaj tak, by zdjęcie żmii było widoczne na stronie akcji animal/show. Animacja w przykładzie 4.1 jest wykonana z wykorzystaniem biblioteki jQuery. Szczegółowy opis jQuery znajdziesz w książkach: ♦ jQuery 1.3. Wprowadzenie, ♦ jQuery. Poradnik programisty, wydanych przez wydawnictwo Helion w 2010 r.

ROZWIĄZANIE Krok 1. Utwórz nowy projekt Utwórz nowy projekt o nazwie zmija zawierający aplikację frontend: symfony generate:project zmija symfony generate:app frontend

Krok 2. Utwórz moduł animal Wydaj polecenie: symfony generate:module frontend animal

Krok 3. Usuń akcję animal/index W module animal:  z folderu templates/ usuń plik indexSuccess.php,  z pliku actions.class.php usuń metodę executeIndex().

Krok 4. Utwórz akcję animal/show W pliku actions.class.php modułu animal dodaj pustą metodę executeShow(). Następnie w folderze templates/ utwórz plik showSuccess.php. W tym pliku umieść elementy h1 oraz h2 przedstawione na listingu 4.1. Listing 4.1. Widok akcji animal/show zapisany w pliku showSuccess.php Żmija zygzakowata Vipera berus

Część I ♦ Tworzenie stron WWW w Symfony

58

Krok 5. Zmień tytuł strony W pliku konfiguracyjnym view.yml aplikacji frontend wprowadź tytuł witryny: title:

Żmija zygzakowata

Jeśli którykolwiek plik konfiguracyjny YML zawiera polskie znaki diakrytyczne i jest zakodowany inaczej niż w systemie utf-8, to będzie on powodował problemy. Błąd tego typu objawia się zniknięciem napisu w generowanej witrynie. Jeśli pracujesz wyłącznie w środowisku NetBeans, nie musisz się o to martwić. Podając kodowanie utf-8 (rysunek 2.2) jako wartość Default encoding, masz gwarancję, że wszystkie pliki projektu będą stosowały ten sposób kodowania.

Krok 6. Zmień adres URL strony głównej W pliku routing.yml zmodyfikuj regułę homepage: homepage: url: / param: { module: animal, action: show }

Uruchom projekt. Po odwiedzeniu adresu: http://localhost/zmija/web/

w przeglądarce ujrzysz witrynę taką, jak na rysunku 4.2.

Krok 7. Zmień szablon XHTML/CSS Zmodyfikuj plik layout.php aplikacji frontend. Usuń odwołanie do pliku favicon.ico oraz zmień język zdefiniowany w atrybutach elementu html. Zawartość pliku layout.php powinna być taka, jak na listingu 4.2. Listing 4.2. Szablon layout.php projektu zmija









Rozdział 4. ♦ Dołączanie zewnętrznych zasobów

59

Rysunek 4.2. Witryna pt. Żmija zygzakowata przed zmodyfikowaniem szablonu XHTML/CSS

W przykładzie z rozdziału 3. do pliku HTML dołączyliśmy dwa zewnętrzne zasoby. Były to pliki style.css oraz print.css. Skrypty JavaScript dołączamy w identyczny sposób. W pliku view.yml, w którym wprowadziłeś tytuł Żmija zygzakowata, zmodyfikuj wpisy stylesheets oraz javascripts. Plik view.yml powinien wyglądać tak, jak na listingu 4.3. Listing 4.3. Plik view.yml przykładu 4.1 default: http_metas: content-type: metas: title: stylesheets: javascripts: has_layout: layout:

text/html Żmija zygzakowata [style.css] [jquery-1.4.min.js, animacja.js] true layout

Po umieszczeniu w pliku view.yml reguły konfiguracyjnej: javascripts:

[jquery-1.4.min.js, animacja.js]

instrukcja widoczna na listingu 4.2:

Część I ♦ Tworzenie stron WWW w Symfony

60

spowoduje umieszczenie w nagłówku strony WWW, tj. pomiędzy znacznikami oraz , dwóch elementów script:

Kolejność dołączanych plików JavaScript będzie identyczna, jak w regule konfiguracyjnej, zaś atrybut src będzie wskazywał pliki z folderu /zmija/web/js/. Następnie z projektu zmija usuń plik main.css oraz wykonaj kopiowanie następujących plików:  plik strona-www/css/style.css skopiuj do folderu /zmija/web/css/,  dwa pliki z folderu strona-www/js/ skopiuj do folderu /zmija/web/js/.

Po wykonaniu opisanych zmian wyczyść pamięć podręczną: symfony cc

po czym za pomocą przeglądarki odwiedź adres: http://localhost/zmija/web/

Witryna, którą ujrzysz, będzie zawierała kolorowe tło (zdefiniowane w pliku style.css) i będzie animowana (skrypty jquery-1.4.min.js oraz animacja.js). Nie będzie jeszcze zawierała zdjęcia.

Krok 8. W widoku akcji animal/show wstaw zdjęcie żmii W widoku akcji animal/show chcemy umieścić zdjęcie zmija.jpg. W statycznym dokumencie index.html (zwartym w pliku 04-start/witryna-www/) zdjęcie dołączamy przy użyciu elementu:

W Symfony wszystkie zewnętrzne zasoby, czyli m.in. style CSS, skrypty JavaScript oraz obrazy, umieszczamy, stosując funkcje pomocnicze. Do umieszczania odwołań do plików CSS oraz JavaScript służą funkcje: include_stylesheets() include_javascripts()

których działanie zależy od zawartości pliku konfiguracyjnego view.yml. Znacznik img w Symfony zastępujemy użyciem funkcji pomocniczej image_tag(). Parametrem tej funkcji jest nazwa pliku graficznego zawartego w folderze web/images/. Najpierw plik strona-www/images/zmija.jpg skopiuj do folderu /zmija/web/images/, a następnie w treści widoku showSuccess.php dodaj wywołanie funkcji pomocniczej image_tag(). Zmodyfikowany widok showSuccess.php jest przedstawiony na listingu 4.4.

Rozdział 4. ♦ Dołączanie zewnętrznych zasobów

61

Listing 4.4. Widok showSuccess.php zawiera funkcję pomocniczą image_tag() Żmija zygzakowata Vipera berus

Pierwszym parametrem funkcji image_tag() jest nazwa pliku graficznego. Domyślnym rozszerzeniem jest .png, więc w przypadku pliku strzalka.png możesz użyć zapisu skróconego: image_tag('strzalka')

Drugim parametrem jest tablica asocjacyjna definiująca dodatkowe atrybuty znacznika img. Parametr: array('alt' => 'Żmija zygzakowata')

spowoduje dodanie do generowanego znacznika img atrybutu: alt="Żmija zygzakowata"

Projekt jest skończony. Wyczyść pamięć podręczną i uruchom projekt. Ujrzysz witrynę taką, jak na rysunku 4.1.

Analiza kodu XHTML generowanego przez aplikację Uruchom przeglądarkę i odwiedź adres: http://localhost/zmija/web/

Strona powinna wyglądać tak, jak na rysunku 4.1. Zajrzyj do kodu źródłowego XHTML. Służy do tego opcja Widok/Źródło strony. Ujrzysz kod taki, jak na listingu 4.5. Listing 4.5. Źródło strony WWW generowanej przez projekt 4.1



Żmija zygzakowata



Żmija zygzakowata

62

Część I ♦ Tworzenie stron WWW w Symfony Vipera berus

W kodzie na listingu 4.5 występują trzy atrybuty src oraz jeden atrybut href. Adresy wstawiane jako wartości tych atrybutów są generowane automatycznie. Jeśli projekt przeniesiesz do innego folderu, to Symfony automatycznie wygeneruje inne ścieżki. Jeśli pracujesz w środowisku NetBeans, wyłącz je. Przenieś wszystkie pliki projektu z przykładu 4. do folderu /nowy/projekt/zmija/. Wyczyść pamięć podręczną (możesz to zrobić w wierszu poleceń lub w NetBeans) i odwiedź witrynę: http://localhost/nowy/projekt/zmija/web/

Powinieneś ujrzeć stronę identyczną jak na rysunku 4.1. Zajrzyj do źródła projektu. Ujrzysz kod taki, jak na listingu 4.6. Tym razem ścieżki zawarte w atrybutach src oraz href będą prowadziły do folderu /nowy/project/zmija/web/. Listing 4.6. Kod XHTML generowany w projekcie 4.2 po przeniesieniu plików projektu do folderu /nowy/projekt/web/



Żmija zygzakowata



Żmija zygzakowata Vipera berus

Rozdział 5.

Hiperłącza Cztery pierwsze przykłady zawierały jedną stronę WWW. Teraz przejdziemy do wykonania aplikacji, która będzie zawierała trzy strony WWW oraz menu główne ułatwiające nawigację między nimi. Wartości atrybutów href elementu a będą generowane przez funkcję pomocniczą url_for():