Na ostatniej lekcji ustaliliśmy, z jakich bloków będzie się składał szablon wycieczki, więc możemy zabrać się do pracy. Najpierw utwórzmy dwa foldery:
obrazy - w tym folderze będą znajdować się wszelkie pliki graficzne użyte do zaprojektowania szablonu. Ponieważ Nie mamy jeszcze żadnych pomysłów na projekt, więc wrzuć każdy z nich do tego folderu plik graficzny, w przeciwnym razie Joomla nie zainstaluje szablonu i zgłosi błąd, jeśli folder będzie pusty.
UWAGA: Folder obrazów szablonów nie zawiera treści graficznych!
css - ten folder będzie zawierał kaskadowe pliki arkuszy stylów. Najpierw umieśćmy w nim pusty plik template.css, który posłuży do przypisania różnych stylów projektowania do elementów serwisu.
Następnie możesz przystąpić do tworzenia głównego pliku indeks.php, który określi wizualne rozmieszczenie elementów witryny i poinformuje CMS Joomla, w którym bloku umieścić różne komponenty i moduły. Plik jest kombinacją PHP i HTML.
Pisząc kod, zawsze używam wyłącznie programu Macromedia Dreamweaver. Świetny program, Gorąco polecam ją początkującym, ponieważ... Jeśli podczas pracy nad kodem popełniłeś błąd, program na pewno go podkreśli.
Na stronie znajdziesz tutorial do programu Macromedia Dreamweaver. Jeśli masz zamiar tworzyć strony internetowe to warto przynajmniej opanować ten program poziom wejścia aby edytować kody szablonów bez błędów.
Pozycjonowanie elementów strony (bloków) odbywa się za pomocą kodu HTML, a konkretnie wykorzystamy znaczniki DIV. Ale sposób, w jaki nasza strona będzie działać na silniku Joomla, tj. będzie dynamiczny, wtedy będziesz musiał również użyć Język PHP. Za jego pomocą ustalimy, w jakich blokach będą znajdować się pozycje modułów wyjściowych, jak będą nazywać się te pozycje, czy bloki zostaną zwinięte, czy nie. Połączymy arkusze stylów z plików zewnętrznych, język treści, ustalimy, jak będzie się zmieniać wielkość witryny itp.
Nagłówek pliku
Nagłówek pliku składa się z kilku części. Pierwsza część kodu nagłówka PHP ma na celu zapewnienie, że plik nie będzie dostępny bezpośrednio, ze względów bezpieczeństwa.
<
?php
zdefiniowany („_JEXEC” ) lub umrzeć ;
JHtml::_("behavior.framework" , prawda ) ;
$ aplikacja = JFactory::getApplication() ;
?>
<
?php echo
"<
?"
; ?> wersja xml="1.0" kodowanie=" <
?php echo
$Ten-> _charset?> "?>
DOCTYPE to bardzo ważny parametr, na podstawie którego przeglądarka decyduje o sposobie renderowania tej strony i interpretacji CSS.
< ! DOCTYPE html PUBLIC "- / / W3C/ / DTD XHTML 1.0 Strict/ / EN"„http: // www.w3.org/ TR/ xhtml1/ DTD/ xhtml1- strict.dtd">
Poniższy fragment pobiera zainstalowany język z konfiguracji globalnej.
< html xmlns= "http:// www.w3.org/ 1999/xhtml" xml:język= " < ?php echo $Ten-> język; ?>" język= " < ?php echo $Ten-> język; ?>" katalog = " < ?php echo $Ten-> kierunek; ?>” >
Poniżej znajduje się fragment kodu, który zawiera Dodatkowe informacje dla nagłówka, który jest ustawiony w konfiguracji globalnej. Możesz zobaczyć te informacje, patrząc źródło dowolną stronę internetową. W szczególności są to metatagi, o których już wiesz.
<
head>
<
jdoc:include
type=
"head"
/
>
Poniższe wiersze tytułu zawierają linki do strony głównej Style CSS Joomla.
<
link
rel=
"stylesheet"
href=
"<
?php echo
$Ten-> baseurl ?> / szablony/ system / css/ system .css" typ="tekst /css” /
>
<
link
rel=
"stylesheet"
href=
"<
?php echo
$Ten-> baseurl ?> / szablony/system / css/general.css" typ="tekst /css” /
>
Aby skorzystać ze stylów projektowania szablonów, łączymy się z plikiem zawierającym kaskadowe arkusze stylów template.css, który znajduje się w folderze CSS. Nie ma znaczenia, że ten plik jest na razie pusty, najważniejsze, aby go połączyć, projektem zajmiemy się później, gdy będziemy instalować szablon na Joomla. Ułatwi to obserwację wyniku.
< link rel= "stylesheet" href= "< ?php echo $Ten-> baseurl ?> /szablony/< ?php echo $Ten-> szablon?> /css/template.css" typ="tekst /css” / >
Poniższy fragment kodu pozwala nam zwinąć lewą lub prawą kolumnę, jeśli po lewej i prawej stronie nie ma modułów. Jeśli obie kolumny są zwinięte, treść zajmuje 100% szerokości strony. Jeśli uwzględniona zostanie tylko jedna kolumna, zawartość zajmie 80%. Po włączeniu dwóch kolumn treść stanowi 60% szerokości strony.
<
?php
jeśli ($ Ten-> countModules("lewy i prawy" ) = = 0) $contentwidth = "100" ;
jeśli ($ Ten-> countModules("w lewo lub w prawo" ) = = 1) $contentwidth = "80" ;
jeśli ($ Ten-> countModules("lewy i prawy" ) = = 1) $contentwidth = "60" ;
?>
Nagłówek zamyka się
<
/
head>
<
body>
Blok „strona” zawiera projekt samej strony serwisu, która będzie miała szerokość 950px.
< div id= "page" >
Blok „górny” znajduje się na samej górze strony i zawiera dwa bloki „logo” i „użytkownik1”.
< div id= "top" >
W bokeh „logo” umieścimy plik graficzny logo, zostanie to określone w arkuszach stylów. Ale zapisujemy automatyczne wyświetlanie nazwy witryny w pliku Index.php i umieszczamy nazwę w tagu H1, co jest bardzo ważne dla optymalizacji wyszukiwarek.
<
div id=
"logo"
>
<
h1>
<
?php echo
$app
-
>getCfg("nazwa witryny" ); ?><
/
h1>
<
/
div>
Zdefiniujmy pozycję „użytkownik1” w bloku o tej samej nazwie, aby wyświetlić moduł wyszukiwania serwisu.
<
div id=
"user1"
>
<
jdoc:include
type=
"modules"
name=
"user1"
style=
"xhtml"
/
>
<
/
div>
<
/
div>
<
!
-
-
конец блока top -
-
>
Wyjście poziomego modułu menu w bloku „użytkownik2” w pozycji „użytkownik2”. Blok zapadnie się, jeśli w tym miejscu nie będzie modułu.
<
?php if
($Ten-> countModules("użytkownik2")): ?>
<
div id=
"user2 "
>
<
jdoc:include
type=
"modules"
name=
"user2"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Następny jest blok nagłówka witryny. Zdefiniujemy w nim pozycję „nagłówka” do wyświetlania modułów. Blok zapadnie się, jeśli w tym miejscu nie będzie modułu. Celowo rozszerzyłem możliwości tego bloku, aby móc umieścić w nim nie tylko obraz nagłówka, ale także rotatory obrazu.
<
?php if
($Ten-> liczba modułów(" nagłówek")
)
: ?>
<
div id=
"nagłówek">
<
jdoc:include
type=
"modules"
name=
"nagłówek" styl="xhtml" / >
<
/
div>
<
?php endif
; ?>
W bloku „user3” definiujemy pozycję „user3” dla modułów wyjściowych.
Blok zostanie zwinięty, jeśli w pozycji „użytkownik3” nie będzie wyjścia modułu.
<
?php if
($Ten-> countModules("użytkownik3")): ?>
<
div id=
"user3"
>
<
jdoc:include
type=
"modules"
name=
"user3"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Otwiera się blok lewej kolumny, który zwinie się, jeśli w „lewej” pozycji nie będzie żadnych modułów.
<
?php if
($Ten-> countModules("lewo")): ?>
<
div id=
"left"
>
<
jdoc:include
type=
"modules"
name=
"left"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Otworzy się najważniejszy blok treści, który może zająć 100% szerokości strony, 80% i 60%, w zależności od liczby zawartych kolumn.
< div id= "content< ?php echo $contentwidth ; ?> " >
Wyświetlanie komunikatów w komponentach
< jdoc:include type= "message" / >
Treść wyjściowa.
<
jdoc:include
type=
"component"
style=
"xhtml"
/
>
<
/
div>
<
!
-
-
конец блока контента-
-
>
Otwiera się blok prawej kolumny, który zwinie się, jeśli w „prawej” pozycji nie będzie żadnych modułów.
<
?php if
($Ten-> countModules("right") ): ?>
<
div id=
"rigth"
>
<
jdoc:include
type=
"modules"
name=
"right"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Wyjście bloku „stopki”, przeznaczonego do wyświetlenia modułu „kod HTML” z informacją o prawach autorskich. Można tu także umieścić spód menu poziome lub moduł prezentacji treści. Blok zostanie zwinięty, jeśli w tej pozycji „stopki” wyświetlony zostanie więcej niż jeden moduł
<
?php if
($Ten-> countModules("stopka") : ?>
<
div id=
"footer"
>
<
jdoc:include
type=
"modules"
name=
"footer"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Blok strony witryny „strona”, treść i cały kod są zamknięte.
<
/
div>
<
!
-
-
конец блока page-
-
>
<
/
body>
<
!
-
-
конец блока body -
-
>
<
/
html>
<
!
-
-
конец кода-
-
>
Stworzyliśmy kompletny plik Index.php. Teraz wiesz, jakich poleceń używasz i w jakiej kolejności wyświetlane są bloki szablonu.
UWAGA: Aby kod szablonu mógł zostać odczytany z panelu administracyjnego Joomla, należy otworzyć plik Index.php w edytorze AkelPad i zapisać go w kodowaniu UTF-8, odznaczając jednocześnie checkbox BOM. Jeżeli do pracy z plikiem korzystałeś z programu Macromedia Dreamweaver, to w górnym menu wybierz „Edycja” > „Właściwości strony” i wybierz kodowanie dokumentu Unicode (utf-8) oraz odznacz „włącz podpisy Unicode (BOM) )”. Zdecydowanie odradzam jednak edytowanie kodu z poziomu panelu administracyjnego Joomla, jeśli coś schrzanisz - nie ma odwrotu, w przeciwieństwie do programu Macromedia Dreamweaver, gdzie zawsze możesz cofnąć dokonane zmiany.
Sam projekt bloków zostanie opisany w szablonie.css. Ale skonfigurujemy arkusze stylów po zainstalowaniu szablonu na Joomla 3 (joomla 2.5) i w tym celu musimy utworzyć
2017-01-10
Witaj drogi gościu!
Dziś od strona główna używając języka Programowanie w PHP stwórzmy strona dynamiczna, które będą następnie generowane na serwerze przy każdym żądaniu użytkownika.
Zatem zmieniając strukturę witryny i wypełniając ją podobnymi zmieniającymi się stronami, otrzymamy dynamiczną witrynę, co znacznie ją uprości w przyszłości pomoc techniczna i rozwoju w porównaniu do opcji statycznej.
Po co nam dynamiczna strona internetowa, omówiliśmy już na samym początku instrukcje krok po kroku Zobacz artykuł Instalacja lokalnego serwera WWW Denwer, w którym wyjaśniono potrzebę instalacji lokalnego serwera WWW. Dlatego możemy wrócić i odświeżyć to pytanie.
Ponadto, jeśli chcesz dokładniej rozważyć zalety i wady witryn statycznych i dynamicznych, możemy doradzić przeczytanie stron katalogu internetowego „Puzzleweb.ru” z sekcją Rodzaje witryn, gdzie dość zwięźle, ale jednocześnie czas jasno podane wyjaśnienia różne opcje witryny.
zrzut ekranu 12
Możemy tylko dodać do tego, że aby uzyskać naprawdę pełnoprawny zasób internetowy, nie można pominąć tego kroku i pozostać przy opcji strony statycznej.
Dlatego nie będziemy już zagłębiać się w teoretyczne dyskusje na temat konieczności stworzenia dynamicznej witryny, ale przejdziemy do rozważenia pytania, jak to zrobimy.
Jak wiadomo, podstawowa różnica pomiędzy witryną dynamiczną a statyczną polega na tym, że w witrynie statycznej gotowe strony internetowe leżą na serwerze i czekają na swoją kolej, aby zostać przesłane do przeglądarki użytkownika. Co więcej, jeśli strony różnią się nawet nieznacznie, powiedzmy, że różnica dotyczy tylko jednego wyrażenia lub nawet jednego słowa, wówczas nadal będą to osobne strony.
W wersji dynamicznej strony generowane są na serwerze przy każdym żądaniu użytkownika, w zależności od żądanych informacji.
W uproszczeniu można to porównać do konstruktora, w którym można tworzyć z ograniczonej liczby elementów duża liczba różne figury. Co więcej, jeśli dokonasz jakiejkolwiek zmiany w jednym z elementów, zostanie to odzwierciedlone w całej konstrukcji zawierającej ten element.
Na tej podstawie utworzymy z utworzonej przez nas strony głównej coś w rodzaju konstruktora składającego się z określonych elementów (w naszym przypadku będą to pliki), z których później będą składane strony internetowe zgodnie z życzeniami użytkowników.
Aby wyjaśnić działania, które w tym celu wykonamy, wykorzystamy w artykule kod HTML ramki strony głównej uzyskany na jednym z etapów tworzenia witryny.
„utf-8” >
"Opis" treść = "Krótki opis zawartości strony" >
Jak widać z kodu HTML, kontener
, zaprojektowany tak, aby pomieścić widoczną część strony internetowej, zawiera następujące główne bloki:Trzeba jednak zwrócić uwagę na fakt, że cztery z pięciu bloków są wspólne i tylko jeden blok „Główna treść” będzie inny dla każdej strony.
Aby uzyskać elementy dynamicznej witryny, zawartość tych bloków rozdzielimy na osobne pliki, które później dołączymy podczas składania różnych stron internetowych na podstawie żądań użytkowników.
Teraz na tym etapie będzie tylko pięć takich plików. Jednak w przyszłości, gdy do witryny zostaną dodane strony lub dodatkowe funkcje, zostaną połączone nowe pliki i tak dalej, w razie potrzeby.
Taka konstrukcja struktury witryny pozwoli Ci w przyszłości nie zajmować się rutynową pracą związaną ze zmianą kodu HTML wszystkich stron w przypadku wymiany lub dodania jakiegokolwiek wspólnego dla nich fragmentu. W takich przypadkach wystarczy dokonać zmian tylko w konkretnym pliku, a cała procedura wymiany zostanie zakończona. Jak widać, jest to zaleta.
Jednak do tego potrzebny nam będzie język PHP, za pomocą którego strony internetowe będą mogły uzyskać dostęp do tych wybranych bloków i przenieść ich zawartość do siebie.
Jeśli ktoś nigdy nie miał do czynienia z językiem PHP, to warto poznać go lepiej, gdyż PHP jest jednym z najważniejszych narzędzi do tworzenia stron internetowych. Można to zrobić, korzystając z różnego rodzaju literatury przedmiotu, którą można znaleźć w dużych ilościach w rosyjskim Internecie.
Opcjonalnie wspomniana już książka referencyjna „Puzzleweb.ru”, w której jedna z jej części poświęcona jest tematyce PHP. Aby uzyskać bardziej dogłębną wiedzę na temat PHP, możesz także skorzystać ze specjalistycznego podręcznika dostosowanego specjalnie dla tego języka, opublikowanego na stronie internetowej „php.ru”. Korzystając z linku „https://php.ru/manual/control-structures.intro.html” możesz przejść do strony „Wprowadzenie”, skąd możesz łatwo wybrać dowolną sekcję katalogu, który Cię interesuje.
Aby jednak teraz stworzyć dynamiczną stronę internetową i zapewnić możliwość łączenia plików ze stronami HTML, wystarczy użyć tylko jednej instrukcji językowej (w PHP każdy skrypt składa się z ciągu instrukcji). Może to być jedna z czterech możliwych instrukcji łączenia plików:
Nie ma sensu opisywać tutaj ich funkcji, ponieważ jest to szczegółowo wyjaśnione w podręcznikach, na przykład za pomocą linku „http://www.puzzleweb.ru/php/26_inc_files.php”, który można to dobrze zrozumieć.
Tworząc stronę skorzystamy z instrukcji „require_once”, ja zazwyczaj korzystam z tej opcji, dla mnie jest ona najwygodniejsza.
Cóż, skoro już ustaliliśmy, co zrobimy, przejdźmy do działań praktycznych.
Aby uformować bloki, które następnie będą brały udział w montażu stron internetowych, należy je najpierw utworzyć. Odbywa się to w edytorze tekstu Notepad++ w taki sam sposób, w jaki utworzyliśmy pierwszy plik witryny „index.html” w artykule Utwórz stronę internetową i umieść ją na lokalnym serwerze internetowym. Tylko w tym przypadku należy podać rozszerzenie nie „html”, ale „php”. W takim przypadku zdecydowanie należy zwrócić uwagę na kodowanie, aby w przyszłości uniknąć pojawiania się na stronach różnego rodzaju niezrozumiałych znaków.
Pliki utworzymy w osobnym, nowo utworzonym folderze „bloki”. Plikom wspólnym dla wszystkich stron nadamy nazwy uwzględniające nazwy odpowiednich bloków. A dla „głównego” bloku wskażemy konkretną nazwę dla każdej strony witryny.
Zatem dla strony głównej połączymy plik o nazwie „block_glavnaya” z blokiem „głównym”. Reszta: „nagłówek”, „sekcja”, „na boku” i „stopka”.
Tworząc pliki, możesz także wziąć pod uwagę, że dla uproszczenia tej procedury możesz je skopiować za pomocą menu „Plik”, podając nową nazwę pliku podczas zapisywania „Zapisz jako”.
Generalnie tworzenie plików to standardowa procedura, więc nie powinno być żadnych trudności. Ostatecznie powinno to wyglądać tak.
Następnie kopiujemy zawartość każdego bloku i przenosimy do odpowiedniego pliku. Używając przykładu „header.php”, przyjrzyjmy się temu bardziej szczegółowo.
1. Otwórz plik „index.html” w edytorze Notepad++, zaznacz żądany obszar bloku „nagłówka” i kliknij na przemian prawym i lewym przyciskiem myszy i skopiuj go do schowka.
Należy zaznaczyć, że tutaj kopiujemy całą zawartość bloku z wyjątkiem menu. Dzieje się tak, ponieważ w atrybutach tagu znajduje się odzwierciedlenie aktywnego przycisku menu
W przyszłości te fragmenty menu również przeniesiemy w blokach „nagłówek” i „stopka” do osobnych plików, ale na razie nie będziemy komplikować rzeczy i zostawiać je w tym samym miejscu.
Sposób zaznaczenia i skopiowania fragmentu bloku „nagłówka” do schowka pokazano na zrzucie ekranu poniżej.
3. I na koniec, aby przenieść zawartość pliku w Notepad++ w lewo, należy kilkakrotnie nacisnąć „Tab”, przytrzymując przycisk „Shift”. W efekcie otrzymamy wygenerowany plik „header.php” w następującej formie.
To samo zrobimy z innymi plikami. Poniżej zrzuty ekranu pokazują, jak będzie wyglądać ich zawartość po wykonaniu wszystkich niezbędnych kroków.
Rys.6 Plik „section.php”
Ryc.7 Plik „block_glavnaya.php”
Ryc.8 Plik „aside.php”
Ryc. 9 Plik „footer.php”
Tym samym otrzymaliśmy wszystkie pliki umożliwiające utworzenie strony dynamicznej i możemy teraz przejść bezpośrednio do jej kodu HTML.
Aby mieć pewność, że nasza strona główna załaduje pliki, które zostały utworzone w poprzedniej sekcji, musimy najpierw zmienić rozszerzenie pliku „indeks” z „html” na „php”, a następnie otworzyć go ponownie w edytorze Notepad++ i dokonaj następujących zmian:
Po wykonaniu tych operacji nasza strona główna powinna wyglądać tak.
Na powyższym zrzucie ekranu widać, że wszystkie instrukcje PHP są wyróżnione znacznikiem otwierającym. To oznaczenie służy do wskazania, kiedy rozpocząć i zakończyć przetwarzanie kodu napisanego w PHP. Dlatego w przyszłości wszystkie kody PHP będą wyróżniane tym oznaczeniem.
Można również zauważyć, że nazwy nowych stron są tworzone z uwzględnieniem ich przeznaczenia, dzięki czemu struktura i kod witryny są lepiej postrzegane.
Na tym zakończyły się wszystkie nasze przemiany. A teraz, jeśli ponownie otworzymy stronę główną w przeglądarce, nie powinniśmy zobaczyć żadnych zmian w stosunku do poprzedniej wersji witryny, powinna ona otworzyć się tak samo jak poprzednio. Jeśli jednak wynik okaże się błędny, musisz poszukać błędu w powyższych operacjach.
Zaktualizujmy teraz przeglądarkę i spróbujmy otworzyć stronę główną.
Jak widać, w naszym przypadku strona główna otworzyła się bez żadnych problemów. Jednak w przeciwieństwie do poprzedniej pracy witryny, strona uzyskała taki wygląd w wyniku jej utworzenia na serwerze podczas przetwarzania żądania.
Tym samym nasza witryna ma teraz pierwszą dynamiczną stronę. A po dodaniu do niej innych podobnych stron, tę witrynę słusznie można nazwać dynamiczną ze wszystkimi wynikającymi z tego konsekwencjami, tj. będzie miał wszystkie zalety charakterystyczne dla dynamicznych witryn. I będziemy mogli to zweryfikować, gdy w przyszłości wypełnimy go różnego rodzaju funkcjonalnościami.
W ten sposób zakończymy ten ważny etap rozwoju strony internetowej i w następnym artykule stworzymy dla niej nowe, dynamiczne strony. Kody źródłowe najnowszej wersji serwisu można pobrać tradycyjnie z linku na końcu artykułu.
Pliki źródłowe witryny z aktualizacjami, które zostały wprowadzone w tym artykule, można pobrać z załączonego pliku Dodatkowe materiały.
Należy podjąć środki ostrożności. Ponieważ zasób może okazać się niezwykle dynamiczny. Tylko spójrz, będzie gryźć!
Teraz te dwie dyscypliny są prawie połączone. Ich tandem jest podstawą, na której budowane jest „życie” większości Internetu. Oczywiście inne języki po stronie serwera (Perl, ASP.NET) są również używane w połączeniu z HTML. Jednak ich występowanie w sieci WWW, w porównaniu z PHP, jest czysto epizodyczne.
Według statystyk architektura większości zasobów w Internecie zbudowana jest w oparciu o php i html.
Dla wielu początkujących związek pomiędzy tymi technologiami wydaje się niejasny. Z jednej strony statyczny HTML, który jest interpretowany przez przeglądarki po stronie klienta. Z drugiej strony na serwerze przetwarzany jest język programu. Dlatego zanim napiszemy od podstaw stronę internetową w PHP podamy prosty przykład interakcji tych dwóch technologii:
Jak widać na zrzucie ekranu, linianie jest wyświetlany w kodzie HTML strony. Zarówno przeglądarka, jak i kod widzą tylko zwróconą datę i godzinę. Oznacza to, że skrypt został przetworzony po stronie serwera. Dlatego tworzenie strony internetowej w PHP zasadniczo różni się od pisania prostych stron HTML.
Nowoczesne strony internetowe występują w dwóch głównych typach:
Kod Java Script działa w przeglądarce po stronie klienta.
Dynamiczna strona internetowa w php składa się z następujących plików:
Ponadto projekt witryny może składać się z plików zawierających kod funkcji i metod PHP. A także zawierać bazę danych.
W większości CMS-ów źródłem treści do wypełniania stron generowanych dynamicznie po stronie serwera jest baza danych. Najpopularniejszym systemem DBMS jest MySQL.
Aby zrozumieć jak powstaje strona internetowa w PHP, spójrzmy na praktyczny przykład. Oczywiście znaczna część została uproszczona, jednak cały mechanizm działania i etapy tworzenia zostały zachowane.
Istnieje witryna HTML o następującej strukturze i wyglądzie:
Jego kod: