CMS- kontakty (mapa)

Transkrypt

1 CMS- kontakty (mapa) Rozpatrzy inny rodzaj kontaktu mapa sytuacyjna. W naszej kategorii kontaktów dodamy teraz multimedialną mapę dojazdową. W tym celu potrzebny nam będzie moduł HTML 1.0. Będziemy mogli wstawić do niego kod wykonywalny html. Pobieramy moduł ze strony: w kategorii Zasoby najłatwiej jest wyszukać plik (Carl+F), wpisując nazwę modułu. Zapisujemy plik w dowolnie wybranym katalogu. 1. Moduły Rys Opis modułu Moduł jest zbudowany w prostszy sposób od komponentu jest to po prostu niezależny odcinek kodu, wstawiany i interpretowany przez inną część programu. Dzięki możliwościom języka skryptowego PHP moduły mogą zbierać dane z wszystkich źródeł. Mogą to być źródła znajdujące się na Twojej stronie (na przykład pięć ostatnich artykułów) lub w serwisie na temat pogody, kursów walut, czy też na stronie Amazon lub ebay. Na moduł składa się logika biznesowa i interfejs użytkownika. W przeciwieństwie do większości komponentów moduły nie posiadają własnych obszarów administracyjnych. Szablon Twojej strony wywołuje i rozpoczyna działanie modułów bezpośrednio. Moduły są niezależnymi programami, dlatego potrafią wykonywać odpowiednie funkcje w ramach szablonu (np. wyświetlać baner). Zadaniem szablonu jest po prostu zgrupowanie wielu różnych modułów w atrakcyjny sposób. Struktura modułowa ma tę zaletę, że potrafi w bardzo łatwy sposób rozszerzyć możliwości strony. Szablony można przypisywać zarówno stronie, jak i systemowi CMS Joomla, dlatego też dostępne są różne moduły dla każdego szablonu. Aby zainstalować moduł w systemie CMS Joomla, musimy zalogować się na zapleczu systemu CMS Joomla. Wybieramy z górnego menu (rys. 1.2.) Instalatory/Moduły

2 Rys Okno zakładki Instalatory/moduły W menu Instalatory/Moduły możesz instalować pakiety modułów metodą wczytywania plików lub z poziomu katalogu (rys. 1.3.). Rys Instalator modułów Wybieramy plik skompresowany modułu HTML 1.0 do instalatora - Przeglądaj a następnie klikamy na Wczytaj plik i zainstaluj Aby dokonać deinstalacji należy zaznacz moduł i ikoną Usuń wykasować moduł.. Pod obszarem instalacji znajduje się lista zainstalowanych modułów znajdziesz w niej informacje na temat pochodzenia modułu oraz inne dane. 2. Mapa Aby wstawić interaktywną mapę na naszą stronę, potrzebna nam będzie do tego celu usługa dostępna na stronie: Wpisujemy w pasku wyszukiwarki pożądaną lokalizację, np. Włocławek z nazwą ulicy. (Rys ) lub inną miejscowość, która dotyczy strony. Rys Wyszukiwarka lokalizacji Następnie klikamy na odnośnik link, kopiujemy zawartość kodu do wstawienia na stronę internetową. (Rys. 2.2.)

3 Rys Okno kodu HTML wybranej miejscowości 3. Konfiguracja Wracamy do zaplecza Systemu CMS Joomla, z menu górnego wybieramy Moduły/Moduły - witryna (Rys. 3.1.) Rys Pozycja menu Moduły/Moduły - witryna Wyświetli się Lista Modułów. Jest to centrum zarządzania modułami (Rys. 3.2.) Nazwa modułu nazwa modułu i nagłówek widoczny na stronie. Publikacja widać tu, czy moduł został opublikowany. Przestaw w tym miejscu możesz zmieniać kolejność za pomocą niebieskich strzałek. W ten sposób określasz na przykład, czy menujoomla_book znajdzie się nad Main Menu. Kolejność bezpośrednie określanie kolejności wystarczy wpisać pozycję i kliknąć ikonę znajdującą się obok Order, by zaoszczędzić sobie klikania niebieskich strzałek. Dostęp uprawnienia dostępu do tego modułu (Public, Registered lub Special).

4 Rys Lista modułów Z listy modułów wybieramy moduł HTML 1.0 i klikamy na niego. Przeniesiemy się teraz do edytora konfiguracji modułu (Rys. 3.2.). W nim określamy nazwę oraz wklejamy kod html mapy do okienka HTML. Rys Definicja modułu Jeśli opublikujemy i zapiszemy to w kontaktach (bo tak został moduł zadeklarowany) po naciśnięciu linku pojawi się mapa. Nie publikujmy naszej mapy, ustalmy pozycję, w której mapa będzie wyświetlana. Zaznaczamy opcje Publikacja na nie i zapisujemy ustawienia. Proszę zwrócić uwagę czy moduł w liście modułów, nie jest opublikowany przez odpowiednią ikonę w kolumnie publikacja.

5 4. Pozycje modułów i dopasowanie kodu Określmy gdzie nasza mapa będzie wyświetlana. Najlepiej jest to sprawdzić w menu górnym Witryna/Podgląd/Szablon pozycje modułów (Rys. 4.1.). Rys Pozycja menu Witryna/Podgląd/Szablon pozycje modułów Pozycje modułów jest to podgląd wyświetlony w obszarze pracy wraz z oznaczeniami pozycji poszczególnych modułów. (Rys. 4.2.). Możemy zorientować się, w której pozycji chcemy, aby nasz moduł był wyświetlany. Rys Podgląd witryny poprzez pozycje modułów Jeżeli żadna z pozycji nam nie odpowiada możemy stworzyć naszą własną nową pozycję w dowolnym obszarze Szablonu Strony. W tym celu potrzebny nam będzie wgląd do struktury pliku index.php. Stwórzmy pozycje modułu o nazwie mapa. Dopasowywanie kodu. Przenosimy się teraz do szablonów witryny, w menu górnym wybieramy Witryna/Szablony/Szablony - witryna (Rys. 4.3.)

6 Rys Pozycja menu Witryna/Szablony/Szablony - witryna Wyświetli się nam lista zainstalowanych szablonów (Rys. 4.3.). Możemy tutaj ustawić, jaki szablon ma być domyślnie aktywny ( Domyślne ) lub przypisać szablon określonej pozycji w menu ( Przypisz ). Za pomocą ikony ( usuń ) można usunąć wybrany szablon. Co najważniejsze mamy możliwość zmiany kodu szablonu ( Popraw HTML ) oraz ( Popraw CSS ). Klikając w ikonę ( Utwórz ) możemy zainstalować nowy szablon. Rys Lista szablonów. W celu dodania nowej pozycji modułu, zaznaczamy szablon, który chcemy edytować i klikamy na ikonę ( Popraw HTML ). Zostaniemy skierowaniu do wbudowanego edytora HTML-PHP(Rys. 4.5.)

7 Rys Edytor HTML-PHP. Skopiujmy teraz zawartość okna do nowego pliku otwartego przez edytor EdHTML, żółty kolor kodu jest kodem PHP (Rys. 4.6.) Krótkie zapoznanie się z kodem PHP Rys Edytor EdHTML Programy w PHP pisze się w edytorach tekstów. Pliki mają *.php. Rozszerzenie to informuje serwer WWW, aby dokonał przetworzenia kodu PHP przed wysłaniem wynikowej strony do przeglądarki internetowej użytkownika. Kod PHP umieszcza się na stronie pomiędzy odpowiednimi znacznikami przedstawionymi poniżej: <?php //pierwszy wiersz //drugi wiersz //trzeci wiersz?>

8 Komentarze w kodzie programu umieszcza się, poprzedzając je dwoma ukośnikami (dotyczy to komentarzy jednowierszowych) lub umieszczając go między konstrukcjami: /* komentarz */ System CMS Joomla wykorzystuje w swojej strukturze FUNKCJE. Funkcja jest pojęciem znanym z matematyki: to zbiór operacji przypisujący danej grupie parametrów jakiś rezultat. Posiada własną nazwę, za pomocą której można się do niej odwoływać, pobiera dane i generuje wynik ponownie zwracany do programu. Odwołanie do funkcji w php wygląda naprzykład tak: mosloadmodules(). Jak można zauważyć, funkcje rozpoznaje się po nawiasach występujących po ich nazwie. W nawiasach tych (jeśli funkcja tego wymaga) podaje się parametry dla danej funkcji. Niektóre funkcje zwracają jakąś wartość, a więc wywołanie takiej funkcji można wstawić jak dowolne inne wyrażenie do listy parametrów innej funkcji czy np. do obliczenia. W systemie CMS Joomla wykorzystywane są następujące odwołania do funkcji PHP <?php mosshowhead();?> - Pokazuje zawartość nagłówka strony <?php mosloadmodules( parametr );?> -Funkcja wyświetla obszary modułów dla strony frontowe, wymaga nazwy parametru w postaci lokalizacji modułu (Wright, left, user1 ). Określamy to miejsce w obszarze Witryna/szablony/Pozycje modułów <?php mospathway();?> - Wyświetla pasek nawigacji (gdzie się obecnie znajdujesz na stronie) <?php mosmainbody();?> - Wyświetla zawartość główną strony (Content) <?php include_once( /scieżka/nazwa_pliku.php );?> - Dodatkowe odwołania do plików php Wróćmy teraz do naszego ćwiczenia, chcąc umieścić nową pozycję modułu tak jak zostało to pokazane na rysunku 4.3. pod główną zawartością strony, musimy odnaleźć w kodzie szablonu funkcje główną mosmainbody(). Gdy już ją znaleźliśmy, umieścimy pod nią funkcję odwołania do modułu mosloadmodules( parametr ). Nazwą parametru będzie nazwa pozycji modułu mapa (Rys. 4.7.). Rys Edytor EdHTML

9 Zmiany dokonujemy w kodzie HTML-PHP w systemie CMS Joomla, zapiszmy zmiany. Edytor wykorzystaliśmy jako pomoc w wyszukiwaniu funkcji 5. Uruchomienie modułu w nowej lokalizacji Określmy teraz nazwę naszej nowej pozycji modułu w systemie CMS Joomla, w tym celu wybieramy z górnego menu Witryna/szablony/Pozycje modułów (Rys. 5.1.) Rys Pozycja menu Witryna/szablony/Pozycje modułów Musimy podać w edytorze pozycji modułów parametru, jaki wpisaliśmy w kodzie PHP. Musi być to taka sama nazwa jak wpisany parametr w kodzie PHP. Wpisujemy nazwę w pierwszym wolnym polu edytora, obok możemy zdefiniować opis nowej pozycji. (Rys. 5.2.) Rys Edytor pozycji modułów. Następnie zapisujemy zmiany i przenosimy się do listy modułów witryny. Wybieramy ponownie moduł dla mapy dojazdowej i w edytorze konfiguracji modułu definiujemy nową pozycję dla modułu. (Rys. 5.3.)

10 Rys Edytor konfiguracji modułu. Pamiętajmy, aby zaznaczyć pozycje w opcji Przypisz do stron pozycji menu tak aby nasza mapa wyświetlała się tylko w Kontaktach. Ostatnią czynnością będzie zaznaczenie opcji publikacja na tak i zapisujemy nasze ustawienia. (Rys. 5.4.) Rys Efekt końcowy