Átfogó útmutató az automatizált weboldalkészítéshez PHP-vel 2023-ban

Ha előfizet egy szolgáltatásra az ezen az oldalon található hivatkozásról, a Reeves and Sons Limited jutalékot kereshet. Lásd a mi etikai nyilatkozat.

Vannak bizonyos időszakok az életben, amikor szükséged van egy weboldalra ahhoz, hogy valami többet tudj csinálni, mint egyszerűen csak ülni egy weboldal mellett. Szüksége van rá, hogy kiérdemelje a tartást. Ennek egyik módja az, hogy működésre készteti, így nem kell minden frissítést vagy oldalmódosítást kódolnia. A legegyszerűbb módja annak, hogy megtanulja, hogyan kell ilyesmit csinálni, ha ténylegesen megcsinálja, ezért a cikk további részében egy olyan rendszer megvalósításának egyik módját fogom bemutatni, amely új weboldalakat hoz létre az Ön számára. egy gomb.

Ebben a forgatókönyvben azt feltételezzük, hogy az Ön ügyfele egy étterem, amely az év során különféle különleges alkalmakra szeretne utalványokat kínálni. De természetesen nem akarnak fizetni azért, hogy frissítsd helyettük, ezért jobb, ha kellően számlázod ki nekik ezt az automatizálási rendszert, amely elvégzi helyettük a frissítéseket.

1. Először létre kell hoznunk egy alap weblap sablont.

Ez csak egy szabványos weboldalváz. Adhatsz neki egy nevet, például „pageBuilder.php” vagy valami. Ehhez nem kell PHP-t használni. Használhat másik programozási nyelvet is, de ebben a példában a dolgokat egyszerűnek tartjuk, és mindezt PHP-ben tesszük.

Screen Shot at 2016 05-30-1.56.52 AM

2. Adja hozzá a Bootstrap-et

Ez segít abban, hogy az űrlap jobban nézzen ki minden további munka nélkül. Természetesen ehhez Bootstrap szükséges.

Screen Shot at 2016 05-30-1.56.56 AM

3. Állítson fel egy tárolót

Annak érdekében, hogy minden rendben és rendezett legyen, meg kell határoznunk egy tárolót, amelyben tároljuk az oldal tartalmát.

Screen Shot at 2016 05-30-1.56.48 AM

4. Hozzon létre egy webes űrlapot

Határozzon meg egy webes űrlapot, és mi is adunk egy díszes címet az űrlaphoz, ami nem kötelező, de jó ötlet.

Screen Shot at 2016 05-30-1.56.43 AM

5. Adja hozzá az űrlapmezőket

Ez nagyon egyszerű. Csak össze kell gyűjtenünk néhány alapvető részletet, amelyeket a robot felhasznál egy új weboldal létrehozásához. Az adatok, amelyeket tudnunk kell, a következőket tartalmazzák:

  • Az oldal háttérképe
  • Az ünnepelt esemény neve
  • Headline
  • Nyitott állítás
  • Néhány elcsépelt idézet vagy kiegészítő állítás
  • Attribútum elcsépelt idézethez
  • Mind a négy keretező szövegelemhez használandó betűstílus (indivikettősen).
  • Az a dátumtartomány, amelyre az utalványok érvényesek lesznek
  • Az 1. ajánlat és a 2. ajánlat, amelyeket az utalványokon fogunk hirdetni.
  • További utalvány üzenetek (például szerződési feltételek)
  • Az utalványhoz generált QR-kódok adatai

Így néz ki:

Screen Shot at 2016 05-30-1.56.00 AM

Screen Shot at 2016 05-30-1.55.54 AM

Screen Shot at 2016 05-30-1.55.36 AM

És mindezen erőfeszítések után kapunk egy oldalt, amely valahogy így néz ki:

Screen Shot at 2016 05-30-1.55.22 AM

 

A jó hír az, hogy a munka fele már kész, és ez volt a legnehezebb és legidőigényesebb fele. A többi sokkal könnyebb.

6. Hozza létre az űrlapfeldolgozó fájlt

Az űrlap elkészítése után szükség van valami szoftverre, ami feldolgozza a beküldött adatokat és csinál vele valamit. Ebben az esetben a beküldött adatok alapján újat generálunk HTML cimre.

Ne feledje, ez nem ugyanaz, mint egy normál PHP-válasz, ahol az adatokat valós időben használják fel, és dinamikusan tükrözik a felhasználó számára. Ehelyett egy statikus oldalt hozunk létre, amely mindaddig fennmarad, amíg felül nem írjuk.

A fájlt ugyanúgy kell elnevezni, mint a akció attribútum értéke az űrlapdeklarációban, így a példánkban ez lenne utalványGen.php, és mivel nem adtunk meg elérési utat, azt ugyanazon a helyen kell tárolni, mint pageBuilder.php hogy működjön.

7. Inicializálja a változókat

-tól benyújtott adatok pageBuilder.php nevű asszociatív tömbként került visszaadásra $ _ POST, és a tömb összes adatértéke elérhető a HTML űrlapvezérlőjükön keresztül név attribútumok. Ezért a változóink inicializálása valójában meglehetősen egyszerű. Ez szintén nem kötelező, de csak egy kicsit rendezettebbé és könnyebben olvashatóvá teszi a kódot. Biztosan dolgozhatna közvetlenül a $ _ POST értékeket, ha úgy tetszik.

Screen Shot at 2016 05-30-1.55.15 AM

 8. A feltételes feltételekkel módosítsa a betűtípusokat a megfelelő értékre

Ha ezt korán megteszi, később időt és fáradságot takarít meg. Csak ellenőrizzük, hogy mely értékek lettek kiválasztva, majd lecseréljük azokat a tényleges betűtípusnevekre.

Screen Shot at 2016 05-30-1.55.10 AM9. Kezdje el a generátorlánc felépítését

Valójában csak annyit kell tennünk, hogy létrehozunk egy igazán hosszú karakterláncot, amely mindent tartalmaz, ami az új oldal létrehozásához szükséges. Karakterlánc-összefűzést fogunk használni, hogy olvasható maradjon, és könnyen látható legyen, hová lettek beszúrva az adatértékek. Ez az alap HTML oldal beállításával kezdődik:

Screen Shot at 2016 05-30-1.55.06 AM

Valószínűleg látja, hová megyünk ezzel. Jegyezze meg a pontosvesszőt a végén. Ez fontos. A szövegben (CSS-deklaráció vagy kliensoldali szkript részeként) előforduló pontosvesszőket is idézőjelek között kell feltüntetni.

10. Kezdje el hozzáadni az oldal törzsét a generátor karakterlánchoz

Vannak hatékonyabb módszerek is ennek a karakterláncnak az elkészítésére, de én szeretem a kódot rendezettvé tenni, hogy könnyen olvasható legyen. Ehhez használhatja a rövidkezes módszereket, és nem kell külön folyamatként megtennie a 9. lépéshez. Úgy érzem, könnyebb megérteni, ha az oldal különböző részei így vannak felosztva.

Screen Shot at 2016 05-30-1.55.00 AM

11. Írja be a generátor karakterláncot egy HTML-be

Ebben az esetben keményen kódoljuk a fájlnevet, de beállíthatja (és valószínűleg meg is kell) ezt a mezőt a pageBuilder űrlapon.

Screen Shot at 2016 05-30-1.54.55 AM

12. Adjon hozzá egy tesztlinket

Ha rákattint a BUILD IT gombra, mert az nem irányít át egy weboldalra, mint egy normál PHP program, hozzá kell adnia egy hivatkozást vagy valamit, hogy megnézze, mi lett az eredmény.

Screen Shot at 2016 05-30-1.54.50 AM

13. Hozza létre az egyéni CSS-fájlt

Ebben a fájlban további formázási utasításokat is tárolhat, de egyelőre az egyetlen fontos a fő- div.

Screen Shot at 2016 05-30-1.54.45 AM

14. Hozzon létre és töltsön fel wrap.png-t

Ahhoz, hogy ez megfelelően működjön, létre kell hoznia egyetlen áttetsző pixeles képet, és el kell neveznie azt wrap.png majd töltse fel a -ban megadott elérési útra egyéni.css fájlt.

15. Tölts fel néhány megfelelő háttérképet, és teszteld a pageBuilder-t

Örömmel fogja tudni, hogy már majdnem készen vagyunk, és valójában most már csak a tesztelés és az esetleges hibák kijavítása a dolgunk. Válasszon néhány szép egyszerű képet, amelyek nem túl elfoglaltak, és amelyek alkalmasak arra, hogy különleges eseményekhez vagy alkalmakhoz kapcsolódjanak (példánkban az anyák napját és az apák napját választottam). Töltse fel a képeket arra az útvonalra, ahol a képeket tárolja webhelyéhez. Ezután töltse ki az űrlapot, kattintson a gombra, és nézze meg, mi történik. Íme egy példa az űrlapra az összes adatmezővel.

Picture1

Ennek eredményeként valami ehhez hasonlót kell létrehoznia:

Screen Shot at 2016 05-30-1.54.11 AM

Már sejtettük, hogy nem szeretnéd az egészet a semmiből beírni, így itt letöltheted a pageBuilder.php és a voucherGen.php forráskódját. zip fájl.

Alkalmazhatja ezt a technikát, amikor HTML-fájlokat karakterláncként hoz létre, majd mindenféle helyzetben kiírhatja őket fájlba. Csak ügyeljen arra, hogy soha ne tegyen ilyesmit rekurzív ciklusba, különben megtelik a merevlemez, és összeomlik a szerver.

Hozzászólások 2 válaszok

  1. Ufas webmester mondja:

    Très très instructif, j'ai essayé et ça marche à merveille, milles merci

    1. Bogdan Rancea mondja:

      Szívesen! 👍👍👍

Hagy egy Válaszol

E-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *

Értékelés *

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.