Komplexní průvodce automatizovaným vytvářením webových stránek s PHP v roce 2023

Pokud se přihlásíte k odběru služby z odkazu na této stránce, může společnost Reeves and Sons Limited získat provizi. Podívejte se na naše etické prohlášení.

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.

Shot obrazovka na 2016 05-30 1.56.52-AM

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.

Shot obrazovka na 2016 05-30 1.56.56-AM

3. Nastavte kontejner

Aby bylo vše čisté a uklizené, měli bychom definovat kontejner, do kterého budeme obsah stránky ukládat.

Shot obrazovka na 2016 05-30 1.56.48-AM

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.

Shot obrazovka na 2016 05-30 1.56.43-AM

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á:

Shot obrazovka na 2016 05-30 1.56.00-AM

Shot obrazovka na 2016 05-30 1.55.54-AM

Shot obrazovka na 2016 05-30 1.55.36-AM

A po tom všem úsilí skončíme se stránkou, která vypadá asi takto:

Shot obrazovka na 2016 05-30 1.55.22-AM

 

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.

Shot obrazovka na 2016 05-30 1.55.15-AM

 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.

Shot obrazovka na 2016 05-30 1.55.10-AM9. 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:

Shot obrazovka na 2016 05-30 1.55.06-AM

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.

Shot obrazovka na 2016 05-30 1.55.00-AM

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.

Shot obrazovka na 2016 05-30 1.54.55-AM

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.

Shot obrazovka na 2016 05-30 1.54.50-AM

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.

Shot obrazovka na 2016 05-30 1.54.45-AM

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.

Picture1

Výsledkem by mělo být vytvoření něčeho docela podobného:

Shot obrazovka na 2016 05-30 1.54.11-AM

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.

Komentáře 2 Odpovědi

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Hodnocení *

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.

shopify-first-one-dollar-promo-3-months