SwP #1: Sklep w PHP – szkielet strony i pliki php

Od czego najlepiej zacz膮膰 nauk臋 PHP? Oczywi艣cie od podstaw 馃檪

 

Celem tej serii jest poznanie PHP od podstaw buduj膮c prosty sklepki z koszykiem. Nie wiem jak „zaawansowany” b臋dzie sklep – wszystko b臋dzie zale偶e膰 od potrzeb. 呕eby nie traci膰 czasu na HTML i CSS (kt贸re mo偶na pozna膰 w serii Blog od podstaw) skorzystamy z Bootstrapa 4聽i nie b臋dziemy po艣wi臋ca膰 czasu na dopieszczanie widoku – b臋dzie tylko tak, 偶eby jako艣 to wygl膮da艂o (to w ko艅cu o PHP).

Zaczynamy od utworzenia virtual host聽na naszym serwerze (szczeg贸艂y w „Uruchamiamy serwer – XAMPP„) kt贸ry b臋dzie przypisany do katalogu sklep i adresu sklep.dev (tak b臋dzie serii ale nic nie stoi na przeszkodzie aby艣cie u偶yli w艂asnych nazw). W katalogu sklep聽tworzymy plik index.php, wpisujemy np. M贸j sklep聽i je艣li wszystko zosta艂o zrobione poprawnie to w przegl膮darce po wpisaniu adresu sklep.dev聽zobaczymy:

Szkielet

Nasz HTML zaczynamy od utworzenia szkieletu wraz z podlinkowaniem plik贸w CSS i JS potrzebnych do u偶ycia Bootstrapa (w pliku聽index.php po usuni臋ciu wcze艣niejszego napisu)

 

Pierwszym elementem b臋dzie Bootstrapowe menu:

G艂贸wnie interesuj膮 nas tutaj trzy odno艣niki (linia 2, 11 i 14) – dwa pierwsze b臋d膮 przekierowywa膰 do strony g艂贸wnej a trzeci do koszyka.

 

Jeszcze tylko jeden element – kontener ze zwyk艂ym tekstem (dodajemy zaraz za </nav>)

 

Nast臋pnie tworzymy sobie katalog聽css a w nim plik聽main.css i linkujemy do niego w聽<head>

i dodajemy prosty CSS:

 

Podstrona „koszyk”

Pora utworzy膰 podstron臋 dla koszyka, dlatego dodajemy plik聽cart.php (taka sama nazwa jak w odno艣niku) i kopiujemy do niego zawarto艣膰 pliku index.php. Nast臋pnie zmieniamy dwie rzeczy: zmieniamy tekst w kontenerze:

oraz zmieniamy miejsce dla klasy聽active w menu (<li>) – teraz to odno艣nik Koszyk ma by膰 aktywny

na

 

Po wej艣ciu na stron臋聽Koszyk zobaczymy:

 

Pliki php

Wyobra藕cie sobie, 偶e macie wi臋cej podstron. O wiele wi臋cej. Dla ka偶dej podstrony kopiujecie ten sam kod HTML i zmieniacie tylko to co potrzeba (np. miejsce klasy聽active w menu). Po jakim艣 czasie stwierdzacie, 偶e chcecie zmieni膰 wygl膮d strony Co wtedy? Edytujecie ka偶dy plik z osobna. Wyobra偶acie sobie edytowa膰 kilkadziesi膮t (lub wi臋cej) plik贸w? Idzie oszale膰 馃榾

Na szcz臋艣cie z pomoc膮 przychodzi obs艂uga plik贸w php. Na czym to polega? Dzi臋ki temu mo偶emy w dowolnym miejscu wczyta膰 inny plik php. S艂u偶膮 do tego instrukcje聽include, require, include_once i require_once.

Instrukcje聽include i聽require dzia艂aj膮 identycznie poza jedn膮 r贸偶nic膮 – je艣li plik, kt贸ry chcemy wczyta膰 nie istnieje to聽include pozwoli aby ca艂a strona si臋 wczyta艂a/wykona艂a a w miejscu gdzie mia艂 by膰 do艂膮czony plik pojawi si臋 odpowiedni komunikat a聽require zatrzyma si臋 w miejscu gdzie mia艂 by膰, wy艣wietli komunikat a dalsza cz臋艣膰 strony si臋 nie wczyta.

Instrukcje聽include_once聽i聽required_once dzia艂aj膮 tak samo jak te poprzednie ale dbaj膮 o to aby plik nie by艂 do艂膮czany wi臋cej ni偶 jeden raz. Je艣li u偶yjemy聽include (lub聽require)聽i wczytamy plik dwa razy:

to plik聽cart.php wczyta si臋 dwa razy. Natomiast u偶ywaj膮c聽include_once lub聽required_once w taki sam spos贸b:

plik聽cart.php wczyta si臋 tylko jeden raz.

 

Jak to wykorzysta膰 w projekcie? Zaczniemy od utworzenia katalogu聽views (widoki – z wzorca MVC, wi臋cej w p贸藕niejszych postach – w skr贸cie chodzi o rozdzielenie logiki, danych i szablon贸w) i pliki聽header.php,聽menu.php i聽footer.php. Nast臋pnie z pliku聽index.php kopiujemy wszystko od pocz膮tku do聽<body> (w艂膮cznie) i przenosimy do pliku聽header.php:

 

Ca艂e menu przenosimy do聽menu.php:

 

A to co zosta艂o poza kontenerem (czyli od pierwszego聽<script> do ko艅ca) przenosimy do pliku聽footer.php

 

Nasz plik聽index.php zawiera tylko:

 

Teraz wystarczy za艂膮czy膰 te pliki do pliku聽index.php

Poza kontenerem mamy trzy linie zawieraj膮ce聽<?php include 鈥歷iews/header.php鈥; ?>. Na pocz膮tku i ko艅cu znajduj膮 si臋 znaczniki, kt贸re informuj膮 serwer (dok艂adniej parser PHP), 偶e w tym miejscu jest kod PHP.聽<?php to otwarcie kodu PHP a聽?> to zamkni臋cie. Pomi臋dzy tym mamy instrukcj臋聽include wraz ze 艣cie偶k膮 do odpowiedniego pliku (podajemy w cudzys艂owie). Za cudzys艂owiem jest 艣rednik (;) – tak ko艅czy si臋 ka偶d膮 instrukcj臋 w php (w naszym przypadku mo偶na pomin膮膰 te 艣redniki, bo ka偶da instrukcja jest zawarta w osobnym „bloku” PHP.

Jaki b臋dzie wynik tych zmian (poza podzieleniem kodu na osobne pliki) ? Taki sam jak wcze艣niej – strona b臋dzie wygl膮da膰 tak samo 馃檪

Pozostaje ju偶 tylko powt贸rzy膰 to samo dla strony聽Koszyka – oczywi艣cie bez tworzenia nowych plik贸w. Z pliku聽cart.php usuwamy wszystko poza kontenerem i dodajemy te same instrukcje聽include:

 

Tutaj mo偶ecie zauwa偶y膰 jeden „b艂膮d” po otworzeniu tej strony – aktywny b臋dzie odno艣nik聽Ksi膮偶ki zamiast聽Koszyk. Dlaczego? W pliku聽views/menu.php klasa聽active jest przypisana do odno艣nika聽Ksi膮偶ki i w 偶aden spos贸b nie rozr贸偶niamy na kt贸rej stronie jeste艣my. To si臋 zmieni w kolejnej cz臋艣ci, w kt贸rej b臋dzie co nieco o zmiennych 馃檪

 

Git

Repozytorium:聽https://github.com/morawcik/sklep

 

PS Je艣li macie jakie艣 pytania albo co艣 jest nie jasne to pytajcie 艣mia艂o 馃檪

PPS Dajcie zna膰 czy taka forma Wam odpowiada.


Post 1 z 4 z serii Sklep w PHP
  • nieznajomy

    Chcia艂em odnie艣膰 si臋 tylko do fragmentu pliku header.php, dok艂adnie linii 6: https://github.com/morawcik/sklep/blob/cb66ce300663fd0c937d445da510aa9a9933094b/views/header.php#L6

    Dodanie maximum-scale=1.0 poskutkuje wy艂膮czeniem mo偶liwo艣ci powi臋kszenia strony na urz膮dzeniach mobilnych: http://a11yproject.com/posts/never-use-maximum-scale/

    W dokumentacji bootstrapa jest dobry przyk艂ad: https://getbootstrap.com/docs/4.0/getting-started/introduction/#responsive-meta-tag

    • Masz racj臋 ale to jest seria nastawiona na PHP i na tym b臋d臋 si臋 skupia艂 a ca艂a reszta to tylko dodatek. Tak samo b臋d臋 pomija艂 np. atrybuty alt obrazk贸w, title odno艣nik贸w itd. Prawdopodobnie nawet nie b臋dziemy zawraca膰 sobie g艂owy wersj膮 mobiln膮 (poza tym co Bootstrap oferuje na starcie)

      • luk

        @morawcik:disqus i bardzo dobre podej艣cie, tego si臋 trzymaj.

        Front-endu jest w polskim internecie ca艂a masa, wi臋c na pewno ka偶dy znajdzie co艣 dla siebie, a z PHP ju偶 gorzej, a wi臋c dobrze, 偶e skupiasz si臋 stricte na pisaniu programu

  • CeLeS

    W艂a艣nie mia艂em bra膰 si臋 za nauk臋 PHP 馃檪
    Czekam na kolejne cz臋艣ci, bardzo jasny i ciekawy kurs 馃檪

    • Oby taki zosta艂 do samego ko艅ca 馃榾
      Powodzenia w nauce 馃檪

  • luk

    Jest okej. Akurat ja czekam na bardziej zaawansowane etapy, ale tak czy inaczej forma jest w porz膮dku, czekam na wi臋cej 馃檪

    • Niestety jeszcze chwilk臋 b臋dziesz musia艂 poczeka膰 ale obiecuj臋, 偶e nie poprzestan臋 na podstawach 馃檪

      Ciesz臋 si臋, 偶e jest dla Ciebie ok 馃檪

      • luk

        Nie no, jasna sprawa, wiadomo nauka musi by膰 harmonijna i dost臋pna dla wszystkich, tak偶e lecimy od A do Z 馃檪