Efektīva galeriju skata veidošana PHP

Tu stāvi priekšā aizraujošam izaicinājumam izstrādāt Galerijas skatījumu savai tīmekļa lietotnei. Šajā pamācībā es tev parādīšu, kā pārņemt dizainu no veidnes, pielāgot to un integrēt savā PHP lietotnē. Sāksim kopā soli pa solim, lai pārliecinātos, ka esi pareizajā ceļā.

Galvenie secinājumi

1. Lejupielādē nepieciešamos papildus materiālus, tostarp logo failus un PSD veidni.
2. Pārliecinies, ka ievēro attēlu izmantošanas tiesību aktus.
3. Izproti galerijas lapas pamatstruktūru un CSS un JavaScript integrāciju.
4. Iestatiet katalogu statiskajiem failiem, lai uzlabotu sava projekta organizāciju.

Solis pa solim padele

Iestartē aizraujošajā tīmekļa izstrādes pasaulē, vispirms lejupielādējot nepieciešamo papildus materiālu. Tas iekļauj logo katalogu, kurā atradīsi rediģējamu logo versiju, kā arī PSD veidni visai galerijas projekta izstrādei. Ikviens var izmantot šos failus, tomēr tev jāņem vērā, ka pievienotie attēli ir maketi un tiesības turpmākai izmantošanai tīmeklī nav pieejamas. Aizvieto šos attēlus ar savējiem.

Nākamajā solī atver failu galerie_index, lai aplūkotu savas HTML un CSS izstrādes neapstrādāto versiju. Dizains ietver dažādus elementus, piemēram, sānu navigācijas joslu un saturu ar attēliem. Šie elementi ir svarīgi, lai mēs varētu prezentēt mūsu beidzamo galeriju. Augšējā rīkjoslā atradīsi pogas, kuras jau pazīsti no demonstrācijas. Tomēr ņem vērā, ka pastāv papildu elementi, kurus mēs šajā izstrādē neizmantojam.

Kopē lapas avota kodu, lai to ielīmētu failā bilder.phtml. Pirms tam noņem foreach ciklu un esošo dokumentu, jo mēs strādāsim ar citu struktūru. Kodā būs divi JavaScript faili: jQuery bibliotēka un tava paša JS funkcija. Turklāt, tev būs nepieciešams CSS fails, kas atbild par stilu. Atceries, ka tev jāpievieno papildu CSS norādījumi Internet Explorer.

Ja paskatāmies tālāk kodā, mēs atradīsim melno rīkjoslu un sānu paneli. Sānu panelī ir dažādi avatari un iespējams arī jaunāko notikumu straume. Šobrīd nav nepieciešams integrēt sānu paneli. Paglāb to galvenā galerijas daļā.

Izšķirošais punkts ir attēlu uzskaitījums, kas galerijā tiek attēlots nesakārtotā sarakstā (UL). Šis saraksts ir mūsu centrālais objekts, pie kura mēs strādāsim. Tam ir dažādi saraksta elementi (LI), balstoties uz kuriem mēs tūlīt pielāgosim saturu. Pārējos attēlus, kas tika izmantoti sākotnējā dizainā, var šeit izdzēst.

Lai attēlus dinamiskā veidā parādītu, tiek izmantots foreach cikls. Izmanto ciklu ap saraksta elementu un aizvieto esošo attēlu tagu ar dinamisko attēlu, kuru vēlies iegūt no savas datu bāzes.

Formatē index.php, pievienojot nepieciešamās CSS un JS failus galvenē. Pašlaik nav piekļuves šiem failiem, tāpēc pievieno slīpsvītru un izveido folder skin, lai organizētu statiskos failus.

Izveido katalogu skin un pievieno tur visus failus no veidnes. Šādā veidā tavs projekts iegūs labāku struktūru, un būs vieglāk veikt izmaiņas. Katalogs skin jāņem vērā, lai uzglabātu visus nepieciešamos resursus, kas atbild par ārējo stilu.

Ja viss ir pareizi iestatīts, atjauno lapu. Tu tagad vajadzētu redzēt pirmos attēlus, kas ielādēti no tava nesakārtotā saraksta. Iespējams, ka tev vēl būs jāiztīra un jāpielāgo daži elementi, piemēram, lapošanas un patīk options – šie mums pagaidām nav nepieciešami.

Tagad, kad pamata dizains ir izstrādāts, vari plānot papildu funkcijas, piemēram, augšupielādes un pieteikšanās funkcijas. Nākamajā solī mēs parūpēsimies par navigāciju un dinamisko bāzes URL kontroli, lai turpinātu uzlabot savu projektu.

Kopsavilkums – Efektīva galerijas skatījuma izveide PHP

Šajā rokasgrāmatā tu soli pa solim esi uzzinājis, kā izveidot dizainu galerijas skatījumam, izmantojot PHP. Tagad tu saproti nepieciešamos soļus, lai sāktu ar noteiktu sākuma darbību kopumu, tostarp direktoriju un CSS failu apstrādi.