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 5 z serii Sklep w PHP