V životě jsou určité chvíle, kdy potřebujete webovou stránku, abyste udělali něco víc, než jen sedět na webové stránce. Potřebujete to, abyste si vydělali na udržení. Jedním ze způsobů, jak toho dosáhnout, je zprovoznit to za vás, takže nebudete muset ručně kódovat každou aktualizaci nebo úpravu stránky. Nejjednodušší způsob, jak se naučit, jak něco takového udělat, je skutečně to udělat, takže ve zbytku tohoto článku vám ukážu jeden způsob implementace systému, který za vás vytvoří nové webové stránky pouhým dotykem tlačítko.
V tomto scénáři budeme předpokládat, že vaším klientem je restaurace, která chce v průběhu roku nabízet poukázky na různé speciální příležitosti. Ale samozřejmě vám nechtějí platit za aktualizaci za ně, takže se raději ujistěte, že jim dostatečně naúčtujete tento automatizační systém, který aktualizace provede za ně
1. Nejprve musíme vytvořit základní šablonu webové stránky.
Toto je pouze standardní kostra webové stránky. Můžete mu dát jméno jako „pageBuilder.php“ nebo tak nějak. Nemusíte k tomu používat PHP. Dalo by se použít jiný programovací jazyk, ale v tomto příkladu budeme mít věci jednoduché a vše uděláme v PHP.
2. Přidejte Bootstrap
Pomůže to k lepšímu vzhledu formuláře bez další práce. Aby to fungovalo, musíte mít samozřejmě Bootstrap.
3. Nastavte kontejner
Aby bylo vše čisté a uklizené, měli bychom definovat kontejner, do kterého budeme obsah stránky ukládat.
4. Vytvořte webový formulář
Definujte webový formulář a do formuláře také přidáme efektní název, který je volitelný, ale dobrý nápad.
5. Přidejte pole formuláře
To je opravdu jednoduché. Potřebujeme jen shromáždit pár základních detailů, které robot použije k vytvoření nové webové stránky. Údaje, které potřebujeme znát, zahrnují:
- Obrázek na pozadí stránky
- Název slavené události
- Titulek
- Příkaz o zahájení
- Nějaký banální citát nebo doplňující prohlášení
- Atribuce pro banální citát
- Styl písma, který se má použít pro každý ze čtyř prvků orámovacího textu (jednotlivě).
- Období, ve kterém budou poukazy platné
- Nabídka 1 a Nabídka 2, které budou inzerovány na poukázkách.
- Dodatečné zprávy o poukazech (například obchodní podmínky)
- Údaje pro QR kódy voucheru, které budou vygenerovány
Takto to vypadá:
A po tom všem úsilí skončíme se stránkou, která vypadá asi takto:
Dobrou zprávou je, že polovina práce je nyní hotová a byla to ta nejobtížnější a časově nejnáročnější polovina. Zbytek je mnohem jednodušší.
6. Vytvořte soubor procesoru formulářů
Po vytvoření formuláře potřebujete nějaký software, který zadaná data zpracuje a něco s nimi udělá. V tomto případě použijeme odeslaná data k vytvoření nového HTML stránky.
Nyní mějte na paměti, že to není totéž jako běžná odpověď PHP, kde se data používají v reálném čase a dynamicky se odrážejí uživateli. Místo toho vytváříme statickou stránku, která bude trvale existovat, dokud ji nepřepíšeme.
Soubor musí být pojmenován stejně jako akce hodnota atributu v deklaraci formuláře, takže v našem příkladu by to bylo voucherGen.php, a protože jsme nezadali cestu, musel by být uložen na stejném místě jako pageBuilder.php aby to fungovalo.
7. Inicializujte proměnné
Údaje odeslané z pageBuilder.php bylo vráceno jako asociativní pole nazvané $ _ POSTa ke všem datovým hodnotám v poli lze přistupovat prostřednictvím jejich ovládacího prvku formuláře HTML název atributy. Proto je inicializace našich proměnných vlastně docela snadná. Je to také volitelné, ale kód díky tomu vypadá trochu přehledněji a snáze se čte. Určitě byste mohli pracovat přímo s $ _ POST hodnoty, chcete-li.
8. Pomocí podmíněných změňte písma na správné hodnoty
Pokud to uděláte včas, ušetříte čas a později problémy. Pouze zkontrolujeme, které hodnoty byly vybrány, a poté je nahradíme skutečnými názvy písem.
9. Začněte stavět řetězec generátoru
Opravdu vše, co zde musíme udělat, je vytvořit jeden opravdu dlouhý řetězec, který bude obsahovat vše potřebné k vytvoření nové stránky. Použijeme zřetězení řetězců, aby byly čitelné a aby bylo snadné vidět, kam byly vloženy datové hodnoty. Začíná se základním nastavením stránky HTML:
Asi vidíte, kam tím míříme. Všimněte si středníku na konci. To je důležité. Také všechny středníky, které se vyskytují v textu (jako součást deklarace CSS nebo skriptu na straně klienta), musí být obsaženy v uvozovkách.
10. Začněte přidávat tělo stránky do řetězce generátoru
Existují efektivnější způsoby, jak sestavit tento řetězec, ale rád dělám v kódu pořádek, aby byl snadno čitelný. K tomu můžete použít metody krátké ruky a také to nemusíte dělat jako samostatný proces ke kroku 9. Mám pocit, že je to snazší pochopit, když jsou různé části stránky rozděleny tímto způsobem.
11. Napište řetězec generátoru do HTML
V tomto případě pevně zakódujeme název souboru, ale mohli byste (a pravděpodobně byste měli) toto pole vytvořit ve formuláři pageBuilder.
12. Přidejte testovací odkaz
Když kliknete na tlačítko BUILD IT, protože nepřesměrovává na webovou stránku jako normální PHP program, musíte přidat odkaz nebo něco, abyste se mohli podívat, jaký byl výsledek.
13. Vytvořte vlastní soubor CSS
Do tohoto souboru můžete uložit další stylingové pokyny, ale prozatím jediný důležitý je stylingový pokyn pro hlavní div.
14. Vytvořte a nahrajte soubor wrap.png
Aby to správně fungovalo, musíte vytvořit jeden průsvitný pixelový obrázek a pojmenovat jej zabalit.png poté jej nahrajte na cestu, kterou jste zadali v souboru custom.css soubor.
15. Nahrajte nějaké vhodné obrázky na pozadí a otestujte svůj pageBuilder
Budete nadšeni, když budete vědět, že jsme téměř hotovi, a nyní je to opravdu jen otázka testování a opravy všech chyb, které se vyskytnou. Vyberte nějaké pěkné jednoduché obrázky, které nejsou příliš zaneprázdněné a které se hodí ke zvláštním událostem nebo příležitostem (v našem příkladu jsem vyšel se Dnem matek a Dnem otců). Nahrajte obrázky na cestu, kde ukládáte obrázky pro svůj web. Poté vyplňte formulář, klikněte na tlačítko a uvidíte, co se stane. Zde je příklad formuláře se všemi vyplněnými datovými poli.
Výsledkem by mělo být vytvoření něčeho docela podobného:
Už jsme uhodli, že to nebudete chtít psát úplně od začátku, takže si můžete stáhnout zdrojový kód pro pageBuilder.php a voucherGen.php v tomto zip soubor.
Tuto techniku vytváření souborů HTML jako řetězců a jejich následného zápisu do souborů můžete použít ve všech možných situacích. Dejte si pozor, abyste něco takového nikdy nezařadili do rekurzivní smyčky, jinak zaplníte pevný disk a zhroutíte server.
Très très instructif, j'ai essayé et ça marche à merveille, milles merci
Nemáš zač! 👍👍👍