Joomla jest jednym z wygodniejszych CMS-ów. Oferuje podstawowe komponenty, jednak bardzo często potrzebujemy dodać do niego różne moduły dodające nowe funkcjonalności. Jednym z takich modułów jest moduł panelu z zakładkami. Jak go wykonać?
Czytelnik, chcąc zrozumieć wszystkie zagadnienia, jakie omawiam w tym tutorialu, powinien znać postawy PHP, Javascript, a także CSS. Znajomość SQL-a i bazy danych nie jest potrzebna, ponieważ Joomla zajmuje się tym problemem samodzielnie.
W ostatnich latach Joomla przeszła pewną ewolucję przy okazji zmiany numerka wersji z 1.0 do 1.5. W starszej wersji budowanie dodatków było łatwiejsze, obowiązywała mniejsza dyscyplina w układzie kodu. W nowszej wersji trzeba trzymać się pewnych ram, jednak zyski z narzuconych reguł przewyższają koszty.
Zmiana wyglądu dodatków jest teraz znacznie łatwiejsza. Wcześniej należało nieraz całkowicie przebudować moduł, gdy ten nie pasował do naszego szablonu. Teraz wystarczy jedynie dodać do szablonu plik z modyfikacją wyglądu tegoż elementu, nie trzeba zmieniać samego modułu czy komponentu.
Mając tę wiedzę, zbudujemy więc skrypt przystosowany już do tej nowszej wersji Joomli.
Zaczynamy tworzenie modułu
Pierwszym krokiem, jaki musimy podjąć jest stworzenie odpowiedniej struktury katalogów, pokazanej na ilustracji.
Nasz katalog /mod_zakladki po zainstalowaniu znajdzie się w katalogu /modules w Joomli. Powinien on zawierać pliki mod_zakladki.php, mod_zakladki.xml, helper.php, a także podkatalog /tmpl zawierający podstawowy szablon w pliku default.php. Dodanie plików index.html jest dobrym zwyczajem. Dzięki temu osoba postronna po wpisaniu bezpośredniego adresu katalogu z plikami na serwerze zobaczy tylko treść index.html, a nie spis plików i katalogów.
Plikiem, dzięki któremu Joomla orientuje się co i jak przetwarzać, jest plik mod_zakladki.xml. Pliki tego typu przypominają pliki HTML. Zawartość pliku mod_zakladki wygląda jak poniżej:
Zakładki
TK
GPLv2/PostcardWare
teodor.kulej@gmail.com
Zakładki
mod_zakladki.php
index.html
helper.php
jquery-1.3.1.min.js
tmpl/default.php
tmpl/index.html
W pierwszej części tego pliku znajdujemy dane dotyczące autora, nazwy modułu czy licencji. De facto możemy tam wpisać, co nam się podoba, a nawet zostawić je puste. Ostatni blok, czyli files, powinien odpowiadać plikom, jakie utworzymy dla naszego modułu. Dzięki temu instalator wie, jakie pliki ma przekopiować z paczki instalacyjnej. Dzięki linijce z atrybutem „module”, Joomla wie, że ten właściwy plik jest sercem skryptu.
Środkowa część, objęta w tag „params” jest bardzo ważna – określa, co użytkownik będzie mógł ustawić w panelu administracyjnym. Parametry z nazwami „Label_0” i „Content_0” możemy powielić kilkukrotnie, poprawiając zero na kolejne cyfry, jeśli chcemy mieć więcej zakładek. Ja zostawiłem dwa bloczki, aby nie produkować na próżno kodu. Nic nie stoi na przeszkodzie, aby dodać tych zakładek kilkanaście czy nawet więcej, jeśli tylko indeksy będą wpisane poprawnie.
Joomla niestety nie pozwala w wygodny sposób wstawić zbioru kilku takich samych opcji, więc musimy uciec się do takiego triku. Sugeruję jednak nie wstawiać więcej niż 4 zakładek w jednym miejscu – zakładkowy tasiemiec odstraszy widza. Wielkość pól do wpisywania tekstu możemy regulować za pomocą parametrów „rows” i „cols”.
Już na tym etapie widać z listingu, że w dalszej części zamierzam wykorzystać bibliotekę jQuery, szerzej omawianą na łamach Internet Makera w artykule „{link_wew 4139}AJAX Kurs od podstaw – jQuery{/link_wew}”.
Treść pliku mod_zakladki.php powoduje załadowanie parametrów zapisanych w Joomli przez użytkownika.
Wiersz 2 powoduje wczytanie właściwego kodu modułu, 3 wiersz wykonuje go i wynik przypisuje do zmiennej, a 4 wiersz - wstawia treści do szablonu.
Wiersz 1 sprawdza, czy plik jest wywołany z wnętrza Joomli, czy jako samodzielny, z paska adresu przeglądarki. Ten drugi przypadek może być zagrożeniem bezpieczeństwa aplikacji, więc dobrze wyrobić sobie nawyk dodawania takiej linijki. Wszystkie pliki PHP dostarczone z Joomlą ten wiersz zawierają.
Plik helper.php zawiera właściwy kod przygotowujący nasze zakładki do wstawienia do szablonu i wyświetlenia.
get('Label_'.$i)): //B
$zakladki[$i]['label']=$params->get('Label_'.$i);
$zakladki[$i]['content'] = $params->get('Content_'.$i);
$zakladki[$i]['id']=md5($unique.$i.$zakladki[$i]['label']);
endif;
}
return($zakladki);
}
}
Ten plik odpowiada za przetworzenie informacji trzymanych przez Joomlę w bazie danych na takie, jakie wstawimy do szablonu. W linijce, którą oznaczyłem literką A, sprawdzamy w pętli wszystkie potencjalne pakiety z danymi o zakładkach. Liczba 4 powinna zostać zwiększona, jeśli dodaliśmy więcej zakładek. Nic się nie stanie, jeśli będzie wyższa, jednak gdy będzie mniejsza niż liczba zakładek opisanych w pliku xml na początku - to nadmiarowe zakładki nie będą wyświetlone.
Linijka oznaczona B sprawdza, czy pola z danymi pasują do naszego schematu z pliku XML i jeśli tak - wstawia je do tablicy, którą przekażemy do szablonu.
{$zakladka['label']}
";
}?>
To jest najdłuższy plik w naszym skrypcie. Na początku znajdują się dwa bloki dodające javascript, który będziemy wykorzystywać. Trzeci parametr, ustawiony na "true" w obu wywołaniach JHTML::script powoduje, że ten sam skrypt nie zostanie załączony dwukrotnie.
Linijki od 30 do 44 określają szkielet naszych zakładek, który możemy modyfikować. Ważne jest, abyśmy zachowali tylko konstrukcję divów o klasach "panelZakladek", "labels" i "content" oraz elementy "a" w odpowiednim miejscu. Pomiędzy te tagi można w zależności od potrzeb dodać swój własny kod, a potem nadać mu dodatkowy CSS.
Dwie pętle for powodują wyświetlenie się najpierw nagłówków zakładek, a potem samych zakładek. W tym miejscu się zatrzymam i opiszę pewien trik, który wykorzystałem. Otóż skrypty z zakładkami, które często spotykałem, określały właściwy kontener na zakładki za pomocą id. Jest to rozwiązanie wygodne dla programisty, bo pozwala łatwo określić w którym miejscu są zakładki. Jest to jednak bardzo niewygodne dla użytkownika, bo może on zamieścić na stronie bez modyfikowania kodu tylko jeden taki moduł.
Tutaj zastosowałem parametr rel dla linków, zawierający unikalny hasz dla każdej zakładki - liczony w oparciu o liczbę losową indywidualną dla każdej zakładki (i odświeżenia strony), a także o tytuł zakładki i jej kolejny numer. Odpowiadają za to linijki 5 i 11 pliku helper.php.
$(document).ready(function() {
$('.panelZakladek .content').hide()
$('.panelZakladek').each(function() {
$(this).children('.content').eq(0).show()
$(this).children('.labels').children('a').eq(0).addClass('selected')
})
$('.panelZakladek .labels a').click(function() {
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
$('#' + this.rel).siblings(".content").hide()
$('#' + this.rel).show()
})
})
Ostatni plik, mod_zakladki.js wykorzystuje wspomnianą bibliotekę jQuery aby wyświetlać odpowiednie zakładki. Najpierw wszystkie one są chowane (wiersz 2), następnie osobno dla każdego bloku (wiersz 4) z zakładkami są wyświetlane pierwsze karty (wiersz 5) i podświetlane linki przełączające (wiersz 6).
Blok zaczynający się od wiersza 9 zapala kliknięty link wygaszając pozostałe (wiersze 10-11), chowa zakładki sąsiednie wobec tej, którą będziemy wyświetlali (wiersz 12) i w końcu wyświetla tą właściwą zakładkę (wiersz 13). Za rozpoznanie, która zakładka jest tą wybraną, odpowiada jQuery i wartość przemycona w parametrze rel linków: "$('#' + this.rel)", co odpowiada zapytaniu o element z id takim, jak rel klikniętego linku.
Gotowy skrypt do pobrania można ściągnąć stąd:
Podsumowanie
Pokazany przeze mnie sposób działania zakładek jest bardzo prostą metodą, choć wystarczającą do większości zastosowań.
Ulepszając to rozwiązanie, można umieścić nagłówki w kodzie wynikowym bliżej odpowiednich zakładek, zadbać o internautów nie korzystających z JavaScript. Poprawi to czytelność strony dla wyszukiwarek i czytników stron, ale nie jest to zadanie, które dałoby się opisać w jednym artykule. Warto także na koniec ulepszyć ich wygląd, ale to już nie jest zadanie dla programisty, a dla webdesignera.
