Tomasz Kowalczyk

Witam po raz kolejny. W niniejszym artykule chciaÅ‚bym przedyskutować sposób organizacji plików podczas tworzenia stron internetowych. Wydaje siÄ™ to niby proste, ale przy tworzeniu wiÄ™kszych projektów może nastrÄ™czyć wielu problemów natury: “paaanieee kodeeerzeee, a obraaazki to do katalogu img czy images?”. ;] W tej kwestii nie ma jednego dobrego rozwiÄ…zania, raczej na etapie nauki / pracy dostosowujemy siÄ™ lub tworzymy swój wÅ‚asny sposób. Nie zmienia to jednak faktu że źle przemyÅ›lana struktura katalogów a co za tym idzie organizacja plików może skutecznie utrudnić postÄ™py w projekcie, szczególnie, jeżeli przechowujemy w kilku różnych miejscach pliki o podobnym przeznaczeniu.

Przez takie rozwiÄ…zanie jesteÅ›my zmuszeni do stosowania instrukcji warunkowych typu: “jeżeli wrzucam pdf, który ma w tytule sÅ‚owo ‘funkcja’, to do /pdf/funkcje/ a jak sÅ‚owo ‘algorytm’ to do /ebooki/algorytmy/”. Wierz lub nie, jest to poważny bÅ‚Ä…d, który o ile nie jest uzasadniony porzÄ…dnie przemyÅ›lanÄ… strukturÄ… aplikacji ma duże szanse uniemożliwić ukoÅ„czenie projektu. Na pewnym etapie okaże siÄ™, ze istnieje potrzeba indeksowania obu zbiorów danych a wtedy logika kodu zostanie doszczÄ™tnie zburzona. No ale dość apokalipsy, czas na przykÅ‚ady.

Na początku należy przemyśleć i ocenić, z jakich potencjalnie części, modułów lub katalogów może się składać aplikacja webowa. Ja ze swojej strony mogę wymienić następujące:

• parser szablonów [Smarty, OPT]
• mini-edytor zawartoÅ›ci [FCKeditor, tinyMCE]
• szablon [szkielet] strony [pliki TPL]
• katalog kompilacji szablonów
• katalog plików konfiguracyjnych [Config]
• pliki graficzne zwiÄ…zane z layoutem [statyczne]
• pliki stylów CSS
• katalog przeznaczony na upload plików, zawierajÄ…cy podkatalogi tematyczne
• skrypty JavaScript
• pliki kodu strony
• pliki inicjujÄ…ce

Sporo, prawda? Na szczęście wiÄ™kszość z nich logicznie zawiera siÄ™ w innych lub jest po prostu opcjonalna. W każdym razie lepiej powiedzieć od razu o tylu, niż potem dopowiadać, że “przydaÅ‚by siÄ™ jeszcze katalog na…”. PrzystÄ…piÄ™ teraz do opisu poszczególnych punktów:

• parser szablonów [Smarty, OPT]

Serce każdej nowoczesnej strony. Bez szablonów stylów zmiana wyglÄ…du jakiegokolwiek elementu strony to po prostu koszmar. Jeżeli chcesz dowiedzieć siÄ™ wiÄ™cej na ich temat, polecam strony projektów: OPT i Smarty. Jeżeli to nie wystarczy, zawsze zostaje Wikipedia lub Google. ;] Idea szablonów polega na oddzieleniu kodu strony od sposobu jego wyÅ›wietlania, tj. programujÄ…c stronÄ™ pobierasz jakieÅ› wartoÅ›ci z bazy danych i przesyÅ‚asz je do szablonu. Ten dokonuje tzw. kompilacji i zwraca ci przetworzony plik php, który nastÄ™pnie jest wykonywany i przez niego przesyÅ‚ane sÄ… dane w jÄ™zyku HTML, który nastÄ™pnie odczytuje user w przeglÄ…darce. Jeżeli nadal myÅ›lisz o wypisywaniu wszystkiego za pomocÄ… ‘echo’ w PHP, pomyÅ›l, ile ci zajmie gruntowna zmiana layoutu strony. BÄ™dziesz musiaÅ‚ szukać wszystkich if’ów, for’ów, sÅ‚owem mÄ™czyć siÄ™, podczas, gdy szablony umożliwiÄ… ci pisanie w czystym HTMLu bez potrzeby znajomoÅ›ci jakiegokolwiek jÄ™zyka programowania. [no, tutaj trochÄ™ przesadziÅ‚em, ale wystarczy podstawowa obsÅ‚uga zmiennych i pÄ™tli] W tym miejscu należy zwrócić uwagÄ™ na jeszcze jeden plus - osoba tworzÄ…ca szablon prawie nie musi wiedzieć czym jest programowanie, np. grafik może zająć siÄ™ spokojnie tworzeniem wyglÄ…du strony bez ingerencjÄ™ w kod, a programista nie musi zwracać uwagi na niuanse zwiÄ…zane z grafikÄ….

• mini-edytor zawartoÅ›ci [FCKeditor, tinyMCE]

Być może wielu z Was uzna ten element za zbędny, ale, jak Wam powiadam, całkowicie zbędnie. ;] Po co się męczyć, mr FCK Was wyręczy. Po pierwsze darmowe, po drugie ładne, a po trzecie udostępnia funkcjonalność zbliżoną do prawie samego Worda [dlatego bardzo często jest nazywany mini-Wordem] więc wstawienie pogrubienia, kursywy, zmiana rozmiaru tekstu lub wstawienie obrazka pomiędzy tekst jest dziecinnie łatwe. Potencjalnym koderom wystarczy zwykłe <textarea> ;] ale potencjalnemu klientowi edytor taki jak FCK spada jak manna z nieba. A ile pracy oszczędza? Zastanawiacie się może czemu nic nie wspominam o tinyMCE? Bo jeszcze z niego nie korzystałem. ;] Po drugie FCK jest lepszy, bardziej rozpowszechniony, i ogólnie miły. ;] [W poprzednim artykule trochę się na niego wyzłośliwiałem, ale jak już jest gotowy do pracy to jest fajny] Zainteresowanych zapraszam: FCKeditor lub tinyMCE, jak kto woli.

• szablon [szkielet] strony [pliki TPL]

W tym katalogu, zwyczajowo nazywanym /templates/ znajdujÄ… sie tzw. pliki szablonów TPL, czyli zawierajÄ…ce kod HTML i metajÄ™zyk szablonu pliki tekstowe, które na etapie “kompilacji” podlegajÄ… przetworzeniu przez parser szablonów.  Umieszczenie caÅ‚ego szablonu w jednym katalogu umożliwia Å‚atwÄ… wymianÄ™ “skórek” strony, wystarczy tylko skopiować zawartość jednego katalogu na drugi i voila! Pomaga to także w stworzeniu zestawu szablonów - czyli oddania użyrkwnikowi dynamicznej możliwoÅ›ci zmiany skórek na stronie - vide [znienawidzone] Grono.NET. [podkreÅ›lenie celowe, .NET też na razie uważam za ZUE, taka maÅ‚a dygresja]. ;] - w takim przypadku należy tylko nakazać parserowi szablonów zmianÄ™ kalalogu kompilacji.

• katalog kompilacji szablonów

Tutaj nie bÄ™dÄ™ siÄ™rozpisywaÅ‚ jako, ze ten katalog powinien po prostu… istnieć. No i mieć prawa zapisu oczywiÅ›cie. Tutaj znajdujÄ… siÄ™ skompilowane do plików PHP pliki TPL. Jedziemy dalej.

• katalog plików konfiguracyjnych [Config]

Rzekłbym najważniejsza część, bo zawierające wszystkie informacje [poza bazą danych] o stronie. Składa się z kilku powiązanych ze sobą części:

• • część konfiguracyjna, staÅ‚e używane w kodzie strony, inicjalizacja obiektów [np. klasy parsera szablonów]
  • część poÅ‚Ä…czenia z bazÄ… danych - czyli wywoÅ‚anie żądania poÅ‚Ä…czenia z bazÄ… danych, uzgodnienie typu kodowania znaków, zwrócenie uchwytu na poczÄ…czenie
  • część funkcji i klas, czyli wÅ‚Ä…czenie deklaracji i definicji używanych w kodzie, a zdefiniowanych przez nas, programistów.

• pliki graficzne zwiÄ…zane z layoutem [statyczne]

Odpowiadają za wizualny aspekt strony - są ładowane i wyświetlane w kodzie HTML. Zwykle przechowywane razem z plikami szablonu, celem ułatwienia wymienności.

• pliki stylów CSS

Pliki stylów CSS odpowiadają za wygląd poszczególnych znaczników HTML, tj. decydują o tym, jaki kolor będzie miało tło, czy linki będą miały podkreślenie, czy tekst będzie wyrównywany do lewej oraz wiele innych opcji. Po informacje na temat samego języka odsyłam do kursu HTML i CSS autorstwa Sławomira Kokłowskiego, uważam ten zbiór za najlepszy kurs jaki można znaleźć po polsku [!] w Internecie. [ link ] Pliki stylów są trzymane razem z plikami szablonu, jako, że są mocno powiązane z resztą layoutu.

• katalog przeznaczony na upload plików, zawierajÄ…cy podkatalogi tematyczne

W tym katalogu tworzymy podkatalogi odpowiedzialne za przechowywanie plików, które wrzuca user / userzy. Katalogi powinny być nazywane zgodnie z ich przeznaczeniem. Jeżeli user bÄ™dzie wrzucaÅ‚ dokumenty office’a, to katalog można nazwać office_docs. DziÄ™ki temu bÄ™dzie możliwa Å‚atwa identyfikacja zawartoÅ›ci a w razie czego prosty sposób dostÄ™pu.

• skrypty JavaScript

MówiÄ…c w tym miejscu ’skrypty JavaScript’ mam na myÅ›li stosunkowo maÅ‚e skrypty, [FCKeditor też jest napisane w JS, ale ze wzglÄ™du na jego rozmiar wrzuciÅ‚em go w oddzielny katalog] czyli np. takie do wyÅ›wietlania zdjęć, lub tworzenia dynamicznego menu, ogólnie skÅ‚Ä…dajÄ…ce siÄ™ z max. kilku plików i nie używane do tworzenia jednej zwartej caÅ‚oÅ›ci.

• pliki kodu strony

Dochodząc do końca, musimy gdzieś trzymać pliki PHPa. ;] Generalnie można je trzymać po prostu w katalogu głównym strony, ale ja odradzam takie rozwiązanie, ze względu na to, iż wiele plików utrudni poszukiwania index.php. ;] Tutaj akurat upieram się najmniej, bo to już jest czyta dywagacja na temat gustów, ale ja robię tak, jak napisałem. Jak mnie ktoś przekona to będe robił jeszcze inaczej. ;]

• pliki inicjujÄ…ce

Et voila, zbliżamy się powoli do końca. Czym są pliki inicjujące? Generalnie miałem na myśli jeden plik - index.php. ;] Oczywiście trzymamy go w katalogu głownym strony. ;]

Wszystko ładnie pięknie, ale nadal nie wiemy jak stworzyć tą strukturę. Wobec tego, mając na uwadze poprzednie opisy przedstawiam przykłądowe drzewo katalogów:

• / - katalog główny
• /opt/ - katalog parsera szablonów OPT [lepszy niż Smarty, jeżeli zaÅ› używasz smarty to także katalog nazwij /smarty/]
• /fckeditor/ - katalog edytora FCK [jak używasz tinyMCE to patrz wyżej]
• /templates/ - katalog plików szablonów
• /require/ - katalog plików konfiguracyjnych [zwykle wÅ‚Ä…cznych funckjÄ… 'require']
• /templates/static/ - katalog plików graficznych layoutu
• /templates/css/ - katalog plików stylów css dla szablonu
• /upload/ - katalog uploadu
• /js/ - katalog skryptów JS
• /php/ - pliki kodu strony
• /index.php - index.php ;]

Na koniec kilka rad konstrukcyjnych:

• Jeżeli tworzysz stronÄ™ w której majÄ… być stosowane wymienne przez usera szablony, najlepiej umieść je w podkatalogu /templates/. W ten sposób bÄ™dziesz musiaÅ‚ jedynie zmienić katalog pobierania plików TPL przez parser, a zachowasz logikÄ™ rozmieszczenia danych.
• Należy oddzielić katalog uploadu edytora od katalogu uploadu przez zwykÅ‚e formularze - trzymanie tych danych razem utrudni wyszukiwanie użytkownikowi danych w przeglÄ…darce plików edytora.
• DobrÄ… opcjÄ… konstrukcyjnÄ… jest includowanie plików .php w index.php, zamiast przekierowywać użytkownika do innych. W ten sposób kontrolujemy dane wejÅ›ciowe w jednym miejscu, co np. pozwoli na wygodne przetwarzanie np. adresu URL. Chodzi o to, aby index.php inicjalizowaÅ‚ wszystkie podstawowe dane potrzebne stronie, a includowany plik obsÅ‚ugiwaÅ‚ tylko konkretne akcje.

OczywiÅ›cie jak zwykle musze siÄ™ usprawiedliwić, że wcale nie próbujÄ™ forsować jednego ustalonego stylu. Na podstawie wÅ‚asnych doÅ›wiadczeÅ„ oraz pracy jako programista poznaÅ‚em kilka sposobów, a ten jest takÄ… jakby “kompilacjÄ…” poznanych opcji. Jak zwykle powiem też, że zrobisz, jak chcesz, ja tylko wskazujÄ™ zalety i wytykam bÅ‚Ä™dy poszczególnych rozwiÄ…zaÅ„. Mam nadziejÄ™, też jak zwykle, że coÅ› Ci siÄ™ Czytelniku z tego atykuÅ‚u przyda.

Będę wdzięczny za opinie na temat artykułu - proszę, zamieszczajcie ;]

Tommy.