Okna.  Wirusy.  Laptopy.  Internet.  Biuro.  Narzędzia.  Kierowcy

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.

indeks.php

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


Tworzymy dynamiczną stronę internetową z za pomocą php

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.

  • Dlaczego potrzebujesz dynamicznej strony internetowej?
  • Jak przekonwertować stronę statyczną na dynamiczną
  • Tworzymy bloki dynamicznej witryny
  • Konwersja strony internetowej ze statycznej na dynamiczną
  • Pliki źródłowe witryny

Dlaczego potrzebujesz dynamicznej strony internetowej?

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 przekonwertować stronę statyczną na dynamiczną

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.

  1. „utf-8” >

    <span><b>Tytuł strony</b> </span>

    "Opis" treść = "Krótki opis zawartości strony" >

  2. "obwoluta" >

    Czapka

    Rewolwer

    Główna zawartość

    Pasek boczny

    Piwnica

Jak widać z kodu HTML, kontener , zaprojektowany tak, aby pomieścić widoczną część strony internetowej, zawiera następujące główne bloki:

  • Czapka;
  • Rewolwer;
  • Główna zawartość;
  • Pasek boczny;
  • Piwnica.

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:

  • włączać;
  • wymagać;
  • uwzględnij_raz;
  • wymagają raz.

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.

Tworzymy bloki dynamicznej witryny

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

  • konieczne jest przypisanie wartości do klasy klasy dla każdej strony „aktywny”. To samo tyczy się podobnego fragmentu w bloku „stopka”.

    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.

    Konwersja strony internetowej ze statycznej na dynamiczną

    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:

    • Usuń zawartość bloków, które zostały wcześniej przeniesione do nowo utworzonych plików.
    • W wolnym miejscu napisz instrukcje „require_once” w PHP, wskazując ścieżkę do odpowiednich plików.
    • W tagach menu
    • , które wskazują ścieżkę do stron, dla strony głównej zamień rozszerzenie z „html” na „php”, a dla pozostałych podaj nazwy nowo tworzonych stron.
    • W tytule wskaż „Dom”.

    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

    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źć!

    PHP i HTML

    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:

    • Utwórzmy nowy plik z rozszerzeniem php;
    • Umieśćmy tam następujący kod:

    Strona internetowa bez tytułu Która jest teraz godzina?

    • Zapiszmy plik na serwerze lokalnym i otwórzmy go w przeglądarce. Następnie kliknij prawym przyciskiem myszy i wybierz „ Wyświetl stronę HTML».

    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.

    Dynamiczna witryna

    Nowoczesne strony internetowe występują w dwóch głównych typach:

    • Statyczny - tworzony wyłącznie w oparciu o HTML. Takie witryny nie zmieniają swojej zawartości w odpowiedzi na działania użytkownika. Oczywiście zasób statyczny może reagować na zdarzenia i działania użytkownika. Jednak implementacja dynamiki strony po stronie klienta ma wąski zakres zastosowań, ograniczony możliwościami Java Script.

    Kod Java Script działa w przeglądarce po stronie klienta.

    • Dynamiczne - zdolne do zmiany swojego stanu i zawartości - strony HTML dynamicznych serwisów powstają na bieżąco w momencie wykonywania kodu w odpowiedzi na żądanie użytkownika przesłane z przeglądarki do serwera. Najczęściej generowanie strony po stronie serwera odbywa się przy użyciu kodu napisanego w języku PHP.

    Dynamiczna strona internetowa w php składa się z następujących plików:

    • indeks.php – jest głównym plikiem projektu;
    • Szablony - uwzględniają strukturę konkretnej części strony ( nagłówek, stopka, treść);
    • Pliki CSS – przechowują wszystkie opisy stylów zasobu.

    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.

    Jak napisać stronę internetową w PHP

    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:

    Przykład strony internetowej w php

    Czapka

    Treść



    Kod pliku Style.css:

    Nagłówek ( margines lewy: auto; margines prawy: auto; margines dolny: 10 pikseli; szerokość: 1000 pikseli; wysokość: 100 pikseli; obramowanie: 1 pikseli stałe #000000; tło: #009966; obraz tła: url(img/1. gif); ) .pages ( margines-lewy:auto; margines-prawy:auto; szerokość:1000px; ) .content ( margines-prawy:10px; szerokość:806px; wysokość:450px; obramowanie:1px solid #000000; tło: #999999; float:left; ) .sidebar ( szerokość:180px; wysokość:450px; border:1px solid #000000; tło: #FF9900; float:left; ) .foot ( clear:obu; ) .footer (margines-góra :10px; margines-lewy:auto; margines-prawy:auto; szerokość:1000px; wysokość:50px; obramowanie:1px stałe #000000; tło: #333399; )

    Zanim napiszesz do końca stronę w PHP, cały kod HTML trzeba rozłożyć na kilka plików:

    • header.php będzie zawierał cały kod od początku do końca warstwy „nagłówka”;
    • W footer.php – warstwy „stopka” i „stopka”;
    • Content.php zawiera cały kod pozostawiony w środku.

    Teraz tworzymy główną stronę Index.php, która będzie zawierała wywołania plików zawierające kod niezbędnych elementów projektu. W sumie w głównym pliku znajdowały się tylko 3 linie skryptu:

    A jeśli wyświetlisz kod HTML strony w przeglądarce, zobaczysz oryginalny kod źródłowy:

    Oczywiście ta opcja nadaje się tylko do generowania strony głównej witryny. Ale jeśli usuniesz kod paska bocznego do osobnego pliku, szablon może zostać również użyty do wygenerowania wewnętrznych stron witryny.

    Objazd

    Ale takie stworzenie strony internetowej wymaga wysiłku, specjalistycznego oprogramowania i wiedzy. Dlatego chciałbym znaleźć łatwiejszą opcję. W takim razie powinieneś skorzystać z narzędzia do tworzenia stron internetowych PHP.

    Reprezentują określony zestaw szablonów z rozszerzonym zakresem ustawień. Z tego powodu są bardzo podobne do konwencjonalnych CMS-ów. Oczywiście nikt nie gwarantuje wysoce unikalnego projektu przyszłej witryny internetowej, a w przyszłości mogą pojawić się problemy z przeniesieniem i adaptacją zasobu na inną witrynę lub platformę hostingową. Oto kilka sprawdzonych opcji takich usług online.

    Utwórz plik o nazwie hello.php i umieść go w katalogu głównym swojego serwera WWW (DOCUMENT_ROOT) z następującą zawartością:

    Przykład #1 Nasz pierwszy skrypt PHP: hello.php



    Test PHP


    Witaj świecie

    " ; ?>



    Użyj przeglądarki, aby uzyskać dostęp do pliku z adresem URL serwera internetowego kończącym się na /witaj.php odniesienie do pliku. Podczas tworzenia lokalnego ten adres URL będzie wyglądał mniej więcej tak http://localhost/hello.php Lub http://127.0.0.1/hello.php ale to zależy od konfiguracji serwera WWW. Jeśli wszystko jest skonfigurowane poprawnie, plik ten zostanie przeanalizowany przez PHP, a do Twojej przeglądarki zostaną przesłane następujące dane wyjściowe:

    Test PHP

    Witaj świecie



    Ten program jest niezwykle prosty i naprawdę nie trzeba było używać PHP, aby stworzyć taką stronę. Jedyne co robi to wyświetla: Witaj świecie za pomocą PHP Echo oświadczenie. Należy pamiętać, że plik nie musi być wykonywalny lub wyjątkowy w jakikolwiek sposób. Serwer dowiaduje się, że ten plik musi zostać zinterpretowany przez PHP, ponieważ użyłeś rozszerzenia „.php”, które serwer jest skonfigurowany do przekazywania do PHP. Pomyśl o tym jak o zwykłym pliku HTML, który zawiera zestaw specjalnych znaczników, które robią wiele interesujących rzeczy.

    Jeśli wypróbowałeś ten przykład i nie wyświetlił niczego, wyświetlił się monit o pobranie lub widzisz cały plik jako tekst, istnieje prawdopodobieństwo, że serwer, na którym się znajdujesz, nie ma włączonego PHP lub nie jest poprawnie skonfigurowany. Poproś administratora o włączenie tej funkcji, korzystając z rozdziału Instalacja w instrukcji. Jeśli tworzysz lokalnie, przeczytaj także rozdział dotyczący instalacji, aby upewnić się, że wszystko jest poprawnie skonfigurowane. Upewnij się, że masz dostęp do pliku przez http i serwer dostarczający dane wyjściowe. Jeśli po prostu wywołasz plik ze swojego systemu plików, nie zostanie on przeanalizowany przez PHP. Jeśli mimo to problemy będą się powtarzać, nie wahaj się skorzystać z jednej z wielu opcji.

    Celem tego przykładu jest pokazanie specjalnego formatu znacznika PHP. W tym przykładzie użyliśmy aby wskazać początek znacznika PHP. Następnie umieściliśmy instrukcję PHP i opuściliśmy tryb PHP dodając tag zamykający, ?> . Możesz wchodzić i wychodzić z trybu PHP w takim pliku HTML, gdziekolwiek chcesz. Aby uzyskać więcej informacji, przeczytaj sekcję podręcznika dotyczącą podstawowej składni PHP.

    Notatka: Uwaga na temat kanałów liniowych

    Znaki liniowe mają niewielkie znaczenie w formacie HTML, jednak nadal dobrym pomysłem jest sprawienie, aby kod HTML wyglądał ładnie i przejrzyście, umieszczając je. Przesunięcie do wiersza następujące bezpośrednio po zamknięciu ?> zostaną usunięte przez PHP. Może to być niezwykle przydatne, gdy wstawiasz wiele bloków PHP lub dołączasz pliki zawierające PHP, które nie powinny niczego generować.Jednocześnie może to być nieco mylące.Możesz wstawić spację po zamknięciu ?> aby wymusić wypisanie spacji i znaku nowego wiersza, lub możesz umieścić wyraźny znak nowego wiersza w ostatnim echu/wydruku z bloku PHP.

    Notatka: Uwaga na temat edytorów tekstu

    Istnieje wiele edytorów tekstu i zintegrowanych środowisk programistycznych (IDE), których można używać do tworzenia, edytowania i zarządzania plikami PHP. Częściowa lista tych narzędzi znajduje się na stronie » Lista redaktorów PHP. Jeśli chcesz polecić redaktora, odwiedź powyższą stronę i poproś opiekuna strony o dodanie redaktora do listy. Pomocne może być posiadanie edytora z podświetlaniem składni.

    Notatka: Uwaga na temat procesorów tekstu

    Procesory tekstu, takie jak StarOffice Writer, Microsoft Word i Abiword, nie są optymalne do edycji plików PHP. Jeśli chcesz go użyć w tym skrypcie testowym, musisz zapisać plik jako zwykły tekst lub PHP nie będzie w stanie odczytać i wykonać skryptu.

    Notatka: Uwaga dotycząca Notatnika systemu Windows

    Jeśli piszesz skrypty PHP przy użyciu Notatnika systemu Windows, musisz upewnić się, że Twoje pliki są zapisane z rozszerzeniem .php. (Notatnik automatycznie dodaje rozszerzenie .txt do plików, chyba że wykonasz jeden z poniższych kroków, aby temu zapobiec.) Po zapisaniu pliku i pojawieniu się monitu o podanie nazwy pliku, umieść nazwę pliku w cudzysłowie (tj. „ hello.php „). Alternatywnie możesz kliknąć menu rozwijane „Dokumenty tekstowe” w oknie dialogowym „Zapisz” i zmienić ustawienie na „Wszystkie pliki”. Następnie możesz wprowadzić nazwę pliku bez cudzysłowów.

    Teraz, gdy pomyślnie utworzyłeś działający skrypt PHP, czas stworzyć najsłynniejszy skrypt PHP! Zadzwoń do phpinfo() funkcję, a zobaczysz wiele przydatnych informacji o swoim systemie i konfiguracji, takich jak dostępne predefiniowane zmienne, załadowane moduły PHP i ustawienia konfiguracyjne. Poświęć trochę czasu i przejrzyj te ważne informacje.

    Przykład nr 2 Uzyskaj informacje o systemie z PHP

    Cześć! Teraz postaramy się zaimplementować najprostszą rejestrację na stronie za pomocą PHP + MySQL. Aby to zrobić, na komputerze musi być zainstalowany Apache. Zasada działania naszego skryptu pokazana jest poniżej.

    1. Zacznijmy od utworzenia tabeli użytkowników w bazie danych. Będzie zawierać dane użytkownika (login i hasło). Przejdźmy do phpmyadmin (jeśli tworzysz bazę danych na swoim komputerze http://localhost/phpmyadmin/). Utwórz tabelę użytkownicy, będzie miał 3 pola.

    Tworzę go w bazie danych mysql, możesz utworzyć go w innej bazie danych. Następnie ustaw wartości jak na rysunku:

    2. Wymagane jest połączenie z tą tabelą. Utwórzmy plik bd.php. Jego treść:

    $db = mysql_connect("twój serwer MySQL","login do tego serwera","hasło do tego serwera");
    mysql_select_db („nazwa bazy danych, z którą się łączymy”, $db);
    ?>

    W moim przypadku wygląda to tak:

    $db = mysql_connect("localhost","użytkownik","1234");
    mysql_select_db("mysql",$db);
    ?>

    Ratować bd.php.
    Świetnie! Mamy tabelę w bazie danych i połączenie z nią. Teraz możesz przystąpić do tworzenia strony, na której użytkownicy będą zostawiać swoje dane.

    3. Utwórz plik reg.php z zawartością (wszystkie komentarze w środku):



    Rejestracja


    Rejestracja


















    4. Utwórz plik, który wprowadzi dane do bazy i zapisze użytkownika. zapisz_użytkownika.php(komentarze w środku):



    {
    }
    //jeśli zostanie podany login i hasło, to je przetwarzamy, aby tagi i skrypty nie działały, nigdy nie wiadomo, co ktoś może wpisać


    //usuń dodatkowe spacje
    $login = trim($login);
    $hasło = trim($hasło);
    //połącz się z bazą danych
    // sprawdź, czy istnieje użytkownik o tym samym loginie
    $result = mysql_query("WYBIERZ identyfikator OD użytkowników GDZIE login="$login"",$db);
    if (!empty($myrow["id"])) (
    exit("Przepraszamy, podany login jest już zarejestrowany. Proszę podać inny login.");
    }
    // jeśli tak nie jest, zapisz dane
    $result2 = mysql_query("WSTAW DO użytkowników (login,hasło) WARTOŚCI("$login","$hasło")");
    // Sprawdź, czy występują błędy
    jeśli ($result2=="TRUE")
    {
    echo "Zarejestrowałeś się pomyślnie! Teraz możesz wejść na stronę. Strona główna";
    }
    w przeciwnym razie(
    echo "Błąd! Nie jesteś zarejestrowany.";
    }
    ?>

    5. Teraz nasi użytkownicy mogą się zarejestrować! Następnie musisz utworzyć „drzwi” dla już zarejestrowanych użytkowników, aby mogli wejść na stronę. indeks.php(komentarze w środku):

    // cała procedura działa w sesjach. To w nim przechowywane są dane użytkownika podczas jego pobytu na stronie. Bardzo ważne jest, aby uruchomić je na samym początku strony!!!
    początek_sesji();
    ?>


    Strona główna


    Strona główna











    Rejestr



    // Sprawdź, czy zmienne login i identyfikator użytkownika są puste
    if (pusty($_SESSION["login"]) lub pusty($_SESSION["id"]))
    {
    // Jeśli puste, to nie wyświetlamy linku
    echo "Jesteś zalogowany jako gość
    Ten link jest dostępny tylko dla zarejestrowanych użytkowników";
    }
    w przeciwnym razie
    {

    W pliku indeks.php Wyświetlimy link, który będzie otwarty tylko dla zarejestrowanych użytkowników. O to właśnie chodzi w skrypcie - aby ograniczyć dostęp do dowolnych danych.

    6. Pozostaje plik z weryfikacją wprowadzonego loginu i hasła. testreg.php (komentarze w środku):

    session_start();// cała procedura działa na sesjach. To w nim przechowywane są dane użytkownika podczas jego pobytu na stronie. Bardzo ważne jest, aby uruchomić je na samym początku strony!!!
    if (isset($_POST["login"])) ( $login = $_POST["login"]; if ($login == "") ( unset($login);) ) //wprowadź login wprowadzony przez użytkownika do zmiennej $login, jeśli jest pusta, zniszcz zmienną
    if (isset($_POST["hasło"])) ( $hasło=$_POST["hasło"]; if ($hasło =="") ( unset($hasło);) )
    //wpisz hasło wprowadzone przez użytkownika w zmiennej $password, jeśli jest pusta, zniszcz zmienną
    if (empty($login) lub pusty($password)) //jeżeli użytkownik nie podał loginu lub hasła to zgłaszamy błąd i zatrzymujemy skrypt
    {
    exit("Nie podałeś wszystkich informacji, wróć i wypełnij wszystkie pola!");
    }
    //jeśli zostanie podany login i hasło, to je przetwarzamy, aby tagi i skrypty nie działały, nigdy nie wiadomo, co ktoś może wpisać
    $login = stripslashes($login);
    $login = htmlspecialchars($login);
    $hasło = paski ukośników($hasło);
    $hasło = htmlspecialchars($hasło);
    //usuń dodatkowe spacje
    $login = trim($login);
    $hasło = trim($hasło);
    //połącz się z bazą danych
    include("bd.php");// plik bd.php musi znajdować się w tym samym folderze co wszystkie pozostałe, jeśli nie, po prostu zmień ścieżkę

    $result = mysql_query("WYBIERZ * OD użytkowników GDZIE login="$login"",$db); //pobierz z bazy wszystkie dane o użytkowniku z wprowadzonym loginem
    $myrow = mysql_fetch_array($wynik);
    if (pusty($myrow["hasło"]))
    {
    //jeżeli użytkownik o podanym loginie nie istnieje
    }
    w przeciwnym razie(
    //jeśli istnieje, sprawdź hasła
    if ($myrow["hasło"]==$hasło) (
    //jeśli hasła są zgodne, uruchamiamy sesję dla użytkownika! Można mu pogratulować, dostał się!
    $_SESSION["login"]=$myrow["login"];
    $_SESSION["id"]=$myrow["id"];//te dane są wykorzystywane bardzo często, dlatego zalogowany użytkownik będzie je „nosił przy sobie”
    echo "Wszedłeś pomyślnie na stronę! Strona główna";
    }
    w przeciwnym razie(
    //jeśli hasła nie pasują

    Wyjdź („Przepraszamy, wprowadzony login lub hasło jest nieprawidłowe.”);
    }
    }
    ?>

    OK, już wszystko! Lekcja może być nudna, ale bardzo przydatna. Pokazana jest tu tylko idea rejestracji, potem można ją ulepszyć: dodać ochronę, wygląd, pola danych, wczytać awatary, wylogować się z konta (w tym celu wystarczy po prostu zniszczyć zmienne z sesji funkcją nieoprawny) i tak dalej. Powodzenia!

    Sprawdziłem wszystko, działa poprawnie!

    Jeśli zauważysz błąd, zaznacz fragment tekstu i naciśnij Ctrl+Enter
  • UDZIAŁ: