Geautomatiseerde webpagina-creatie met PHP

Er zijn bepaalde momenten in het leven dat je een webpagina nodig hebt om meer te doen dan alleen maar een webpagina te bezoeken. Je hebt het nodig om zijn donatie te verdienen. Eén manier om dat te doen, is om het voor u aan het werk te zetten, zodat u niet elke update of pagina mod hoeft in te voeren. De eenvoudigste manier om te leren hoe je zoiets kunt doen, is door het echt te doen, dus in de rest van dit artikel zal ik je een manier laten zien om een ​​systeem te implementeren dat nieuwe webpagina's voor je zal bouwen met een aanraking van een knop.

In dit scenario gaan we ervan uit dat uw klant een restaurant is dat het hele jaar door vouchers wil aanbieden voor verschillende speciale gelegenheden. Maar ze willen je natuurlijk niet betalen om het voor hen te updaten, dus zorg er voor dat je ze voldoende factureert voor dit automatiseringssysteem dat de updates voor hen zal doen

1. Eerst moeten we een eenvoudige webpagina-sjabloon maken.

Dit is slechts een standaard webpaginaskelet. Je kunt het een naam geven zoals "pageBuilder.php" of zoiets. Hiervoor hoeft u geen PHP te gebruiken. Je zou een andere programmeertaal kunnen gebruiken, maar voor dit voorbeeld houden we de dingen eenvoudig en doen we het allemaal in PHP.

Screen Shot op 2016 05-30 1.56.52-AM

2. Bootstrap toevoegen

Dit zal helpen om het formulier er beter uit te laten zien zonder extra werk. Natuurlijk moet Bootstrap hiervoor werken.

Screen Shot op 2016 05-30 1.56.56-AM

3. Zet een container op

Om alles netjes en opgeruimd te houden, moeten we een container definiëren waarin we de pagina-inhoud opslaan.

Screen Shot op 2016 05-30 1.56.48-AM

4. Maak een webformulier

Definieer een webformulier en we voegen ook een mooie titel toe aan het formulier, wat optioneel is, maar een goed idee.

Screen Shot op 2016 05-30 1.56.43-AM

5. Voeg de formuliervelden toe

Dit is echt eenvoudig. We moeten alleen enkele basisgegevens verzamelen die de robot zal gebruiken om een ​​nieuwe webpagina te maken. De gegevens die we moeten weten, omvatten:

  • De achtergrondafbeelding voor de pagina
  • Naam van het evenement dat gevierd wordt
  • Opschrift
  • Openingszin
  • Enkele afgezaagd citaat of aanvullende verklaring
  • Attributie voor afgezaagd citaat
  • Lettertype om te gebruiken voor elk van de vier framing-tekstelementen (afzonderlijk).
  • Datumbereik waarvoor de vouchers geldig zijn
  • Bied 1 aan en bied 2 aan die zal worden geadverteerd op de vouchers.
  • Extra voucher-berichten (bijvoorbeeld algemene voorwaarden)
  • Gegevens voor de voucher QR-codes die worden gegenereerd

Zo ziet het eruit:

Screen Shot op 2016 05-30 1.56.00-AM

Screen Shot op 2016 05-30 1.55.54-AM

Screen Shot op 2016 05-30 1.55.36-AM

En na al deze inspanningen zullen we eindigen met een pagina die er ongeveer zo uitziet:

Screen Shot op 2016 05-30 1.55.22-AM

Het goede nieuws is dat de helft van de klus nu voltooid is en dat dit de moeilijkste en tijdrovende helft was. De rest is veel gemakkelijker.

6. Maak het formulierprocessorbestand aan

Nadat u een formulier hebt gemaakt, hebt u software nodig die de ingediende gegevens verwerkt en er iets mee doet. In dit geval gebruiken we de ingediende gegevens om een ​​nieuwe te genereren HTML pagina.

Houd er nu rekening mee dat dit niet hetzelfde is als een normaal PHP-antwoord waarbij de gegevens in realtime worden gebruikt en dynamisch aan de gebruiker worden gereflecteerd. In plaats daarvan maken we een statische pagina die permanent bestaat totdat we deze overschrijven.

Het bestand moet hetzelfde worden genoemd als het actie attribuutwaarde in de formulierverklaring, dus in ons voorbeeld zou dat zijn voucherGen.phpen omdat we geen pad hebben opgegeven, moet het op dezelfde locatie worden opgeslagen als pageBuilder.php om het te laten werken.

7. Variabelen initialiseren

De gegevens die zijn verzonden vanuit pageBuilder.php werd geretourneerd als een associatieve array genaamd $ _POSTen alle gegevenswaarden in de array zijn toegankelijk via hun HTML-formulierbesturingselement naam attributen. Daarom is het initialiseren van onze variabelen eigenlijk vrij eenvoudig. Het is ook optioneel, maar het zorgt er alleen maar voor dat de code er wat netter en gemakkelijker leesbaar uitziet. Je zou zeker rechtstreeks met de kunnen werken $ _POST waarden als je dat liever hebt.

Screen Shot op 2016 05-30 1.55.15-AM

8. Gebruik conditionals om de lettertypen in de juiste waarden te veranderen

Als u dit vroeg doet, bespaart u later tijd en problemen. We controleren alleen welke waarden zijn geselecteerd en vervangen deze vervolgens door de werkelijke lettertypenamen.

Screen Shot op 2016 05-30 1.55.10-AM9. Begin met het bouwen van de generatorstring

Het enige dat we hier echt hoeven te doen, is een heel lange reeks maken die alles bevat wat nodig is om de nieuwe pagina te maken. We gebruiken string-aaneenschakeling om het leesbaar te houden en maken het gemakkelijk om te zien waar de gegevenswaarden zijn ingevoegd. Dit begint met het instellen van de basis HTML-pagina:

Screen Shot op 2016 05-30 1.55.06-AM

Je kunt waarschijnlijk zien waar we naartoe gaan. Let op de puntkomma aan het einde. Dat is belangrijk. Ook eventuele puntkomma's die voorkomen in de tekst (als onderdeel van een CSS-verklaring of een script aan de clientzijde) moeten binnen aanhalingstekens worden geplaatst.

10. Begin met het toevoegen van de paginolichaam aan de generatorstring

Er zijn efficiëntere manieren om deze reeks te bouwen, maar ik maak code graag netjes, zodat het gemakkelijk te lezen is. Je kunt korte-kantmethoden gebruiken om dit te doen, en je hoeft het ook niet te doen als een afzonderlijk proces om 9 te stappen. Ik voel dat het gemakkelijker te begrijpen is wanneer de verschillende secties van de pagina op deze manier worden gesplitst.

Screen Shot op 2016 05-30 1.55.00-AM

11. Schrijf de generatorstring naar een HTML

In dit geval coderen we de bestandsnaam hard, maar je zou (en waarschijnlijk zou dit) een veld moeten maken in je page Builder-formulier.

Screen Shot op 2016 05-30 1.54.55-AM

12. Voeg een testlink toe

Wanneer u op de knop BUILD IT klikt, omdat deze niet naar een webpagina doorstuurt zoals een normaal PHP-programma zou doen, moet u een link toevoegen of iets om te gaan en zien wat het resultaat was.

Screen Shot op 2016 05-30 1.54.50-AM

13. Maak het aangepaste CSS-bestand

U kunt aanvullende stylinginstructies in dit bestand opslaan, maar voor nu is de enige stylinginstructie voor de hoofd- div.

Screen Shot op 2016 05-30 1.54.45-AM

14. Maak wrap.png aan en upload deze

Om dit goed te laten werken, moet je een enkele doorzichtige pixelafbeelding maken en deze een naam geven wrap.png upload het vervolgens naar het pad dat u hebt opgegeven in de aangepast custom.css bestand.

15. Upload enkele geschikte achtergrondafbeeldingen en test je pagina Builder

Je zult blij zijn als je weet dat we bijna klaar zijn, en eigenlijk is het gewoon een kwestie van het testen en oplossen van eventuele fouten. Kies een aantal leuke, eenvoudige afbeeldingen die niet te druk zijn en die geschikt zijn om te relateren aan speciale evenementen of gelegenheden (in ons voorbeeld ging ik met Moederdag en Vaderdag). Upload de afbeeldingen naar het pad waar u uw afbeeldingen opslaat voor uw website. Vul vervolgens het formulier in, klik op de knop en kijk wat er gebeurt. Hier is een voorbeeld van het formulier waarin alle gegevensvelden zijn ingevuld.

Picture1

Wat zou moeten resulteren in het creëren van iets dat erg op dit lijkt:

Screen Shot op 2016 05-30 1.54.11-AM

We hebben al geraden dat je dit niet vanaf het begin zou willen typen, dus je kunt de broncode voor pageBuilder.php en voucherGen.php hier downloaden zip-bestand.

U kunt deze techniek toepassen om HTML-bestanden als strings te maken en ze vervolgens in allerlei situaties naar bestanden te schrijven. Pas op dat je nooit zoiets in een recursieve lus plaatst, anders vul je je harde schijf vol en crash je de server.

Catalin Zorzini

Ik ben een blogger voor webdesign en ben dit project gestart na een paar weken worstelen om erachter te komen welke dat is het beste e-commerceplatform voor mezelf. Bekijk mijn huidige top 10 bouwers van e-commerce-sites.