'n Omvattende gids tot outomatiese webbladskepping met PHP in 2023

As jy inteken op 'n diens vanaf 'n skakel op hierdie bladsy, kan Reeves and Sons Beperk 'n kommissie verdien. Sien ons etiese verklaring.

There are certain times in life when you need a web page to do something more than just sit there being a web page.  You need it to earn its keep.  One way to do that is to put it to work for you, so you won’t have to hand code every update or page mod.  The easiest way to learn how to do something like this is by actually doing it, so in the rest of this article, I’m going to show you one way of implementing a system that will build new web pages for you at the touch of a button.

In this scenario, we’ll assume your client is a restaurant that wants to offer vouchers for different special occasions throughout the year.  But of course they don’t want to pay you to update it for them, so you’d better make sure to bill them sufficiently for this automation system that will do the updates for them

1. Eerstens moet ons 'n basiese webbladsjabloon skep.

This is just a standard web page skeleton.  You can give it a name like “pageBuilder.php” or something.  You don’t have to use PHP for this.  You could use another programming language, but for this example we’ll keep things simple and do it all in PHP.

Screen Shot 2016-05-30 at 1.56.52 AM

2. Voeg Bootstrap by

This will help to make the form look better without any extra work.  Of course you’ll need to have Bootstrap for this to work.

Screen Shot 2016-05-30 at 1.56.56 AM

3. Sit 'n houer op

To help keep everything neat and tidy, we should define a container that we’ll store the page contents in.

Screen Shot 2016-05-30 at 1.56.48 AM

4. Skep 'n webvorm

Define a web form, and we’ll also add a fancy title to the form, which is optional but a good idea.

Screen Shot 2016-05-30 at 1.56.43 AM

5. Voeg die vormvelde by

Dit is regtig eenvoudig. Ons moet net 'n paar basiese besonderhede versamel wat die robot sal gebruik om 'n nuwe webblad te skep. Die inligting wat ons moet weet, sluit in:

  • Die agtergrondprent vir die bladsy
  • Naam van die geleentheid wat gevier word
  • Wesensverdienste
  • Openingsverklaring
  • Sommige kort aanhaling of addisionele stelling
  • Erkenning vir 'n besliste aanhaling
  • Lettertipe styl om te gebruik vir elk van die vier omlystekst-elemente (indivitweeledig).
  • Die datumreeks waarop die geskenkbewyse geldig is
  • Aanbod 1 en aanbieding 2 wat op die geskenkbewyse geadverteer sal word.
  • Bykomende voucher-boodskappe (byvoorbeeld bepalings en voorwaardes)
  • Data vir die QR-kodes van die voucher wat gegenereer sal word

Here’s how that looks:

Screen Shot 2016-05-30 at 1.56.00 AM

Screen Shot 2016-05-30 at 1.55.54 AM

Screen Shot 2016-05-30 at 1.55.36 AM

En na al hierdie pogings, eindig ons met 'n bladsy wat soos volg lyk:

Screen Shot 2016-05-30 at 1.55.22 AM

 

Die goeie nuus is dat die helfte van die werk nou voltooi is, en dat dit die moeilikste en tydrowendste helfte was. Die res is baie makliker.

6. Skep die vormverwerkingslêer

After creating a form, you need some software that will process the submitted data and do something with it.  In this case, we’ll be using the submitted data to generate a new HTML bladsy.

Onthou, dit is nie dieselfde as 'n normale PHP-reaksie waar die data intyds gebruik word en dinamies aan die gebruiker weerspieël word nie. In plaas daarvan skep ons 'n statiese bladsy wat permanent sal bestaan ​​totdat ons dit oorskryf.

Die lêer moet dieselfde benoem word as die aksie kenmerkwaarde in die vormverklaring, so in ons voorbeeld sou dit wees voucherGen.php, en omdat ons nie 'n pad gespesifiseer het nie, moet dit op dieselfde plek as gestoor word pageBuilder.php sodat dit kan werk.

7. Inisialiseer veranderlikes

Die gegewens ingedien vanaf pageBuilder.php is terugbesorg soos 'n assosiatiewe skikking genoem $ _POST, en al die datawaardes in die skikking kan verkry word via hul HTML-vormbeheer naam attributes.  Therefore initializing our variables is actually quite easy.  It’s also optional, but it just makes the code look a bit more tidy and easier to read.  You could certainly work directly with the $ _POST waardes as u verkies.

Screen Shot 2016-05-30 at 1.55.15 AM

 8. Gebruik voorwaardes om die lettertipes na hul regte waardes te verander

As u dit vroeg doen, sal u later tyd en probleme bespaar. Ons gaan net na watter waardes gekies is en vervang dit dan met die werklike lettername.

Screen Shot 2016-05-30 at 1.55.10 AM9. Begin met die opbou van die kragopwekker

Eintlik hoef ons net hier 'n baie lang string te maak wat alles bevat wat nodig is om die nuwe bladsy te skep. Ons sal stringketting gebruik om dit leesbaar te hou en dit maklik te maak om te sien waar die datawaardes ingevoeg is. Dit begin met die basiese HTML-bladsy opgestel:

Screen Shot 2016-05-30 at 1.55.06 AM

You can probably see where we’re going with this.  Note the semi-colon at the end.  That’s important.  Also any semi-colons that occur within the text (as part of a CSS declaration or a client-side script) must be contained inside quote marks.

10. Begin die bladsyliggaam by die generatorstring voeg

There are more efficient ways to build this string, but I like to make code tidy, so that it’s easy to read.  You can use short hand methods to do this, and you also don’t have to do it as a separate process to step 9.  I feel it’s easier to understand when the different sections of the page are split this way.

Screen Shot 2016-05-30 at 1.55.00 AM

11. Skryf die generatorstring op 'n HTML

In hierdie geval kodifiseer ons die lêernaam hard, maar u kan (en waarskynlik moet) dit 'n veld maak in u bladsybou-vorm.

Screen Shot 2016-05-30 at 1.54.55 AM

12. Voeg 'n toetsskakel by

When you click the BUILD IT button, because it doesn’t redirect to a web page like a normal PHP program would, you need to add a link or something to go and see what the result was.

Screen Shot 2016-05-30 at 1.54.50 AM

13. Skep die pasgemaakte CSS-lêer

U kan addisionele stylinstruksies in hierdie lêer stoor, maar die enigste belangrike een is die stileringinstruksies vir die hoof div.

Screen Shot 2016-05-30 at 1.54.45 AM

14. Skep en laai wrap.png op

Om dit behoorlik te laat werk, moet u 'n enkele deurskynende pixelbeeld skep en dit noem wrap.png laai dit dan op na die pad wat u in die custom.css lêer.

15. Laai 'n paar geskikte agtergrondprente op en toets u bladsybouer

You’ll be thrilled to know we’re almost done, and really it’s now just a matter of testing and fixing up any errors that occur.  Choose some nice simple images that are not too busy and that are suitable to relate to special events or occasions (in our example, I’ve gone with Mother’s Day and Father’s Day).  Upload the images to the path where you store your images for your website.  Then fill in the form, click the button, and see what happens.  Here’s an example of the form with all the data fields filled in.

Picture1

Dit sal daartoe lei dat u iets soortgelyk hieraan skep:

Screen Shot 2016-05-30 at 1.54.11 AM

We already guessed you wouldn’t want to type all that from scratch, so you can download the source code for pageBuilder.php and voucherGen.php in this zip-lêer.

You can apply this technique of creating HTML files as strings and then writing them out to files in all kinds of situations.  Just be careful never to put something like this in a recursive loop or you’ll fill up your hard drive and crash the server.

Kommentaar Kommentaar

  1. Ufas Webmeester sê:

    Très très instructif, j'ai essayé et ça marche à merveille, Milles merci

    1. Bogdan Rancea sê:

      Jy is welkom! 👍👍👍

Lewer Kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk *

Gradering *

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.