Učinkovito oblikovanje galerijskega pregleda v PHPju

Pred teboj je razburljiva naloga, da oblikuješ Galerijo za svojo spletno aplikacijo. V tem vodiču ti bom pokazal, kako prevzameš dizajn iz predloge, ga prilagodiš in v svojo PHP aplikacijo integriraš. Poglejmo skupaj korak za korakom, da se prepričamo, da si na pravi poti.

Najpomembnejše ugotovitve

1. Prenesi potrebno dodatno gradivo, vključno s datotekami logotipa in PSD-predlogo.
2. Poskrbi, da upoštevaš pravne predpise glede uporabe slik.
3. Razumej osnovno strukturo strani galerije ter integracijo CSS in JavaScript-a.
4. Ustvari direktorij za statične datoteke, da izboljšaš organizacijo svojega projekta.

Navodila po korakih

Vstopi v razburljiv svet spletnega razvoja tako, da najprej preneseš potrebno dodatno gradivo. Sem spada direktorij za logotip, v katerem najdeš različico logotipa, ki jo lahko urejaš, ter PSD-predlogo za celoten projekt galerije. Vsak lahko te datoteke uporablja po svoji izbiri, vendar bodi pozoren, da so shranjene slike le makete in pravice za nadaljnjo uporabo na spletu niso zagotovljene. Te slike zamenjaj s svojimi.

Naslednje odpri datoteko galerie_index, da si ogledaš surovo različico svoje HTML in CSS izvedbe. Oblikovanje vključuje različne elemente, kot so stranska navigacija in vsebinski del s slikami. Ti elementi so pomembni, da lahko predstavimo našo končno galerijo. V zgornji orodni vrstici boš našel gumbe, ki jih že poznaš iz predstavitve. Vendar pa bodi pozoren, da obstajajo dodatni elementi, ki jih ne bomo uporabili v tej izvedbi.

Kopiraj izvorno kodo strani, da jo prilepiš v datoteko bilder.phtml. Predhodno odstrani foreach zanko in obstoječi dokument, saj bomo delali z drugo strukturo. V kodi bosta dve datoteki JavaScript: jQuery knjižnica in tvoja lastna JS funkcija. Prav tako boš potreboval CSS datoteko, ki bo odgovorna za oblikovanje. Ne pozabi, da moraš dodati CSS ukaze za Internet Explorer.

Če pogledamo dlje v kodo, najdemo črno orodno vrstico in stransko vrstico. Stranska vrstica vsebuje različne slike avatarjev in morda tudi tok z najnovejšimi dogodki. V tem trenutku pa ni potrebno integrirati stranske vrstice. Zaenkrat se osredotoči na glavni del galerije.

Ključna točka je seznam slik, ki naj bodo razporejene v neurejenem seznamu (UL) v galeriji. Ta seznam je naš osrednji predmet, nad katerim bomo delali. Obstajajo različni elementi seznama (LI), ki temeljijo na tem, in vsebine bomo kmalu prilagodili. Preostale slike, ki so bile uporabljene za prvotno oblikovanje, lahko tukaj odstraniš.

Da bi slike prikazali dinamično, v igro vstopi foreach zanka. Uporabi zanko okoli elementa seznama in zamenjaj obstoječo označbo slike z dinamično sliko, ki jo želiš pridobiti iz svoje baze podatkov.

Formatiraj index.php z dodajanjem potrebnih CSS in JS datotek v glavo. Trenutno dostop do teh datotek manjka, zato dodaj pomišljaj in ustvari direktorij skin, da organiziraš statične datoteke.

Ustvari direktorij skin in vanj daj vse datoteke iz predloge. Na ta način bo tvoje projektne struktura boljša in lažje bo izvajati spremembe. Direktorij skin bi moral vsebovati vse potrebne vire, ki so odgovorni za zunanjo oblikovanje.

Ko je vse pravilno nastavljeno, osveži stran. Zdaj bi moral videti prve slike, ki so naložene iz tvojega neurejenega seznama. Morda boš moral še nekaj elementov očistiti in prilagoditi, kot so paginacija in možnosti "všeč mi" - zaenkrat jih ne potrebujemo.

Zdaj, ko je osnovno oblikovanje postavljeno, lahko načrtuješ dodatne funkcije, kot so nalaganje in prijavne funkcije. V naslednjem koraku se bomo posvetili navigaciji in dinamičnemu upravljanju osnovnih URL-jev, da bomo izboljšali tvoje projekt še naprej.

Povzetek – Učinkovito oblikovanje gledanja galerij v PHP

V tem priročniku si se korak za korakom naučil, kako ustvariti dizajn za ogled galerij s PHP. Zdaj razumeš potrebne korake, da začneš s sklopom začetnih operacij, vključno z upravljanjem map in CSS datotek.