Een uitgebreide gids voor het geautomatiseerd maken van webpagina's met PHP in 2023

Er zijn bepaalde momenten in het leven dat je een webpagina nodig hebt om iets meer te doen dan alleen maar een webpagina te zijn. Je hebt het nodig om de kost te verdienen. Een manier om dat te doen, is door het voor u aan het werk te zetten, zodat u niet elke update of paginamodificatie hoeft te coderen. De gemakkelijkste manier om te leren hoe u zoiets kunt doen, is door het echt te doen, dus in de rest van dit artikel laat ik u een manier zien om een ​​systeem te implementeren dat nieuwe webpagina's voor u zal bouwen met een druk op de knop 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 u natuurlijk niet betalen om het voor hen bij te werken, dus zorg ervoor dat u 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 webpagina-skelet. Je kunt het een naam geven zoals "pageBuilder.php" of zoiets. U hoeft hiervoor geen PHP te gebruiken. Je zou een andere programmeertaal kunnen gebruiken, maar voor dit voorbeeld houden we het simpel en doen we het allemaal in PHP.

2. Bootstrap toevoegen

Dit zal helpen om het formulier er beter uit te laten zien zonder extra werk. Natuurlijk heb je Bootstrap nodig om dit te laten werken.

3. Zet een container op

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

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.

5. Voeg de formuliervelden toe

Dit is heel simpel. We hoeven alleen maar een paar basisgegevens te verzamelen die de robot zal gebruiken om een ​​nieuwe webpagina te maken. De gegevens die we nodig hebben, 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
• Lettertypestijl die moet worden gebruikt voor elk van de vier framing-tekstelementen (individubbel).
• 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:

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

 

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

6. Maak het formulierprocessorbestand aan

Nadat u een formulier heeft aangemaakt, heeft u software nodig die de ingediende gegevens verwerkt en er iets mee doet. In dit geval gebruiken we de ingediende gegevens om een ​​nieuw HTML pagina.

Houd er rekening mee dat dit niet hetzelfde is als een normale PHP-respons waarbij de gegevens in realtime worden gebruikt en dynamisch aan de gebruiker worden weergegeven. In plaats daarvan maken we een statische pagina die permanent zal bestaan ​​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 voor dat de code er een beetje netter uitziet en gemakkelijker te lezen is. U zou zeker rechtstreeks met de $ _POST waarden als je dat liever hebt.

 8. Gebruik conditionals om de lettertypen naar hun juiste waarden te wijzigen

Als u dit vroeg doet, bespaart u later tijd en moeite. We controleren gewoon welke waarden zijn geselecteerd en vervangen deze door de daadwerkelijke lettertypenamen.

9. Begin met het bouwen van de generatorstring

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

U kunt waarschijnlijk zien waar we hiermee naartoe gaan. Let op de puntkomma aan het einde. Dat is belangrijk. Ook alle puntkomma's die in de tekst voorkomen (als onderdeel van een CSS-declaratie of een client-side script) moeten tussen aanhalingstekens staan.

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

Er zijn efficiëntere manieren om deze string te bouwen, maar ik vind het leuk om code netjes te maken, zodat deze gemakkelijk te lezen is. U kunt hiervoor korte handmethoden gebruiken, en u hoeft het ook niet als een apart proces voor stap 9 te doen. Ik denk dat het gemakkelijker te begrijpen is wanneer de verschillende secties van de pagina op deze manier worden opgesplitst.

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.

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.

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.

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

U zult blij zijn te horen dat we bijna klaar zijn, en het is nu echt een kwestie van testen en eventuele fouten herstellen. 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 ben ik met Moederdag en Vaderdag gegaan). Upload de afbeeldingen naar het pad waar u uw afbeeldingen voor uw website opslaat. Vul dan het formulier in, klik op de knop en kijk wat er gebeurt. Hier is een voorbeeld van het formulier met alle gegevensvelden ingevuld.

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

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 u zoiets nooit in een recursieve lus plaatst, anders vult u uw harde schijf en crasht de server.