Există anumite momente din viață când ai nevoie de o pagină web pentru a face ceva mai mult decât să stai acolo, existând o pagină web. Ai nevoie de el pentru a-și câștiga păstrarea. O modalitate de a face acest lucru este să o puneți în funcțiune pentru dvs., astfel încât nu va trebui să codificați manual fiecare actualizare sau mod de pagină. Cea mai ușoară modalitate de a învăța cum să faceți așa ceva este să o faceți efectiv, așa că în restul acestui articol, vă voi arăta o modalitate de a implementa un sistem care va construi noi pagini web pentru dvs. un buton.
În acest scenariu, vom presupune că clientul dvs. este un restaurant care dorește să ofere vouchere pentru diferite ocazii speciale pe tot parcursul anului. Dar, bineînțeles, nu vor să vă plătească pentru a-l actualiza, așa că ar fi bine să vă asigurați că le facturați suficient pentru acest sistem de automatizare care va face actualizările pentru ei
1. Mai întâi trebuie să creăm un șablon de pagină web de bază.
Acesta este doar un schelet standard al paginii web. Îi puteți da un nume precum „pageBuilder.php” sau ceva de genul acesta. Nu trebuie să utilizați PHP pentru aceasta. Ați putea folosi un alt limbaj de programare, dar pentru acest exemplu vom păstra lucrurile simple și le vom face totul în PHP.
2. Adăugați Bootstrap
Acest lucru vă va ajuta să faceți formularul să arate mai bine, fără nicio muncă suplimentară. Desigur, va trebui să aveți Bootstrap pentru ca acest lucru să funcționeze.
3. Configurați un container
Pentru a menține totul îngrijit și ordonat, ar trebui să definim un container în care vom stoca conținutul paginii.
4. Creați un formular web
Definiți un formular web și vom adăuga, de asemenea, un titlu elegant la formular, care este opțional, dar o idee bună.
5. Adăugați câmpurile formularului
Acest lucru este foarte simplu. Trebuie doar să colectăm câteva detalii de bază pe care robotul le va folosi pentru a crea o nouă pagină web. Datele pe care trebuie să le cunoaștem includ:
- Imaginea de fundal a paginii
- Numele evenimentului celebrat
- titlu
- Declarație de deschidere
- Unele citate banale sau declarații suplimentare
- Atribuire pentru o ofertă banală
- Stilul fontului de utilizat pentru fiecare dintre cele patru elemente de text de încadrare (individual).
- Interval de date pentru care vor fi valabile bonurile
- Oferta 1 și Oferta 2 care vor fi promovate pe cupoane.
- Mesaje de voucher suplimentare (termeni și condiții, de exemplu)
- Date pentru codurile QR voucher care vor fi generate
Iată cum arată:
Și după tot acest efort, vom ajunge cu o pagină care arată așa:
Vestea bună este că jumătate din slujbă este completă și a fost cea mai dificilă și consumatoare de timp. Restul este mult mai ușor.
6. Creați fișierul procesor formular
După crearea unui formular, aveți nevoie de un software care să proceseze datele trimise și să facă ceva cu el. În acest caz, vom folosi datele trimise pentru a genera un nou HTML .
Acum, rețineți că acest lucru nu este același lucru cu un răspuns PHP normal în care datele sunt utilizate în timp real și reflectate în mod dinamic utilizatorului. În schimb, creăm o pagină statică care va exista permanent până când o vom suprascrie.
Fișierul trebuie să fie denumit la fel ca acțiune atributul valorii în declarația formularului, deci în exemplul nostru ar fi voucherGen.php, și pentru că nu am specificat o cale, ar trebui să fie stocată în aceeași locație ca și pageBuilder.php ca să funcționeze.
7. Inițializați variabilele
Datele transmise de la pageBuilder.php a fost returnat ca o matrice asociativă numită $ _ POST, și toate valorile de date din matrice pot fi accesate prin controlul formularului HTML nume atribute. Prin urmare, inițializarea variabilelor noastre este de fapt destul de ușoară. De asemenea, este opțional, dar doar face ca codul să arate puțin mai ordonat și mai ușor de citit. Puteți lucra cu siguranță direct cu $ _ POST valori dacă preferați.
8. Utilizați condiționalele pentru a schimba fonturile la valorile lor corecte
Dacă faceți acest lucru devreme, veți economisi timp și probleme mai târziu. Pur și simplu verificăm ce valori au fost selectate și apoi le înlocuim cu numele de fonturi reale.
9. Începeți să construiți șirul generatorului
Într-adevăr, tot ce trebuie să facem aici este să creăm un șir foarte lung care să conțină tot ce este necesar pentru a crea noua pagină. Vom folosi concatenarea șirurilor pentru a o menține lizibilă și pentru a face mai ușor de văzut unde au fost inserate valorile datelor. Aceasta începe cu configurarea paginii HTML de bază:
Probabil puteți vedea unde mergem cu asta. Observați punct și virgulă la sfârșit. Asta este important. De asemenea, orice punct și virgulă care apare în text (ca parte a unei declarații CSS sau a unui script din partea clientului) trebuie să fie cuprins între ghilimele.
10. Începeți să adăugați corpul paginii la șirul generatorului
Există modalități mai eficiente de a construi acest șir, dar îmi place să fac codul ordonat, astfel încât să fie ușor de citit. Puteți utiliza metode de mână scurtă pentru a face acest lucru și, de asemenea, nu trebuie să o faceți ca un proces separat la pasul 9. Cred că este mai ușor de înțeles când diferitele secțiuni ale paginii sunt împărțite în acest fel.
11. Scrieți șirul generator într-un HTML
În acest caz, codificăm greu numele fișierului, dar puteți (și probabil ar trebui) să faceți din acesta un câmp în formularul dvs. pageBuilder.
12. Adăugați un link de testare
Când faceți clic pe butonul BUILD IT, deoarece nu redirecționează către o pagină web așa cum ar face un program normal PHP, trebuie să adăugați un link sau ceva pentru a vedea care a fost rezultatul.
13. Creați fișierul CSS personalizat
Puteți stoca instrucțiuni suplimentare de styling în acest fișier, dar deocamdată singurul important este instrucțiunile de styling pentru principal div.
14. Creați și încărcați wrap.png
Pentru ca acest lucru să funcționeze corect, trebuie să creați o singură imagine translucidă în pixeli și să o denumiți wrap.png apoi încărcați-l pe calea pe care ați specificat-o în CSS personalizat fișier.
15. Încărcați câteva imagini de fundal adecvate și testați-vă paginaBuilder
Veți fi încântați să știți că aproape am terminat și, într-adevăr, este doar o chestiune de testare și remediere a eventualelor erori care apar. Alegeți câteva imagini simple, care nu sunt prea ocupate și care sunt potrivite pentru a se raporta la evenimente sau ocazii speciale (în exemplul nostru, am mers cu Ziua Mamei și Ziua Tatălui). Încărcați imaginile pe calea în care vă stocați imaginile pentru site-ul dvs. web. Apoi completați formularul, faceți clic pe buton și vedeți ce se întâmplă. Iată un exemplu de formular cu toate câmpurile de date completate.
Ceea ce ar trebui să aibă ca rezultat crearea a ceva similar cu acesta:
Am ghicit deja că nu ați dori să introduceți toate acestea de la zero, astfel încât să puteți descărca codul sursă pentru pageBuilder.php și voucherGen.php în acest zip.
Puteți aplica această tehnică de a crea fișiere HTML ca șiruri și apoi să le scrieți în fișiere în tot felul de situații. Doar aveți grijă să nu puneți așa ceva într-o buclă recursivă sau vă veți umple hard diskul și veți bloca serverul.
Très très instructiv, j'ai essayé et ça marche à merveille, milles merci
Cu plăcere! 👍👍👍