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.
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.
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.
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.
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
- A négy keretes szövegelemhez (egyenként) használandó betűstílus.
- 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:
És mindezen erőfeszítések után kapunk egy oldalt, amely valahogy így néz ki:
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.
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.
9. 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:
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.
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.
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.
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.
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.
Ennek eredményeként valami ehhez hasonlót kell létrehoznia:
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.
Très très instructif, j'ai essayé et ça marche à merveille, milles merci
Szívesen! 👍👍👍