Kā nosūtīt datus no mājaslapas formas (HTML+PHP)?

DG WEB FACTORY » Pamācības » Kā nosūtīt datus no mājaslapas formas (HTML+PHP)?

Lai apgūtu kā nosūtīt datums, Jums jābūt pamatzināšanām HTML. Ar HTML variet iepazīties pamācībā Ievads HTML un par HTML formas izveidi variet uzzināt pamācībā Kā izveidot HTML formu .

HTML forma ļauj lietotājam ievadīt datus, kas tiks nosūtīti uz serveri. Klients (interneta pārlūks) nosūta HTTP/HTTPS pieprasījumu uz web serveri un serveris atbild, izmantojot to pašu protoklu.

Formas validācija

Izveidojiet HTML formu:

<form>
<label>Vārds</label><br>
<input type=”text” name=”name”><br>
<label>Jūsu ziņa</label><br>
<textarea name= “message” style=”height:200px” >
</textarea><br>
<button type=”submit” name=”submit”>Nosūtīt </button>
</form>

Pirms datu nosūtīšanas izveides, mēs pievienosim klienta puses validāciju formai. Kas ir klienta puses (clinet-side) validācija? Tā ir formā ievadīto vērtību pārbaude, piemēram, ja nav aizpildīti obligātie lauki, lietotājs nevar nosūtīt formu,kamēr nav aizpildījis obligāto (required) lauku vai arī, piemēram, e-pasta adreses vietā ir ierakstīts kaut kas cits, kas neatbilst e-pasta adreses formātam. Klienta puses validācija notiek interneta pārlūkā. Mēs izmantosim iebūvēto formu validāciju – HTML 5 formu validāciju.

Pievienosim, ka vārds un ziņa ir obligātie lauki, ko mēs varam izdarīt izmantojot formas validācijas atribūtu required:  texta ievades laukam (input type=”text”) un ziņas laukam (textarea):

<form action=”forma.php”>
<label>Vārds</label><br>
<input type=”text” name=”name” required><br>
<label>Jūsu ziņa</label><br>
<textarea name= “message” style=”height:200px” required></textarea><br>
<button type=”submit” name=”submit”>Nosūtīt </button>
</form>

Ja lietotājs nospiedīs Nosūtīt pogu, neaizpildot lauku, tad lietotājam uzrādīsies brīdinājums un nebūs iespējams nosūtīt datus, kamēr  laukos nav ievadtīta informācija.

Citi validācijas atribūti:

• minlength un maxlength: Nosaka atļauto minimālo (minlenght) un maksimālo (maxlengt) ievades teksta garumu laukā.
• min un max: Nosaka atļauto minimālo (min) un maksimālo (max) skaitli, ko atļauts ievadīt ievades laukā.
• type: Nosaka kāda veida dati jāievada konkrētajā laukā – teksts, skaitliskas vērtības, e-pasts, parole u.c.
• pattern: Nosaka regulārās izteiksmes (regular expression) šablonu (kāda ir atļautā zimju kombinācija ievades laukā).

Datu nosūtīšana

Lai noteiktu kur un kādā veidā tiks nosūtīti dati, elementam <form> jāpievieno atriubūti “action” un “method”. Action atribūts nosaka uz kurieni tiks nosūtīti dati. Action atribūta vērtība var būt absolūta vai relatīva URL. Ja action atribūts nav pievienots, tad dati tiek nosūtīti uz to pašu lapu, kurā ir forma.

Mēs datus nosūtīsim uz php failu, kur tālāk tiks apstrādāti lietotāja ievadītie dati.

Lai to izdarītu, vispirms izveidojiet failu forma.php.

HTML dokumentā, kurā ir forma pie form elementa pievienojiet action atribūtu ar vērtību forma.php. Abus failus (gan HTML dokumentu, kurā ir forma, gan formaphp failu) novietojiet vienā mapē.

<form action=”forma.php”>
<label>Vārds</label><br>
<input type=”text” name=”name” required><br>
<label>Jūsu ziņa</label><br>
<textarea name= “message” style=”height:200px” required></textarea><br>
<button type=”submit” name=”submit”>Nosūtīt </button>
</form>

Mēs norādījām uz kurieni nosūtīt datus, taču vēl jānorādā kādā veidā nosūtīt datus un to var norādīt form elementam pievienojot atribūtu “method”:

<form action=”forma.php” method=”post”>
<label>Vārds</label><br>
<input type=”text” name=”name” required><br>
<label>Jūsu ziņa</label><br>
<textarea name= “message” style=”height:200px” required></textarea><br>
<button type=”submit” name=”submit”>Nosūtīt </button>
</form>

Datu nosūtīšanai, tiks izmantota metode=POST. Populārākās metodes ir GET un POST. GET metodi izmanto, lai pieprasītu datus no kāda resursa, savukārt POST metodi izmanto, lai nosūtītu datus uz serveri, lai izveidotu vai atjauninātu kādu resursu.

Tālāk mums nepieciešams pievienot nosaukumus ievades laukiem, izmantojot atribūtu name, jo tos mēs izmantosim mūsu PHP failā. Vārda ievades laukam es pievienoju nosaukumu “name”, ziņas laukam nosaukumu “message” un nosūtīšanas pogai nosaukumu “submit”:

<form action=”forma.php” method=”post”>
<label>Vārds</label><br>
<input type=”text” name=”name” required><br>
<label>Jūsu ziņa</label><br>
<textarea name= “message” style=”height:200px” required></textarea><br>
<button type=”submit” name=”submit”>Nosūtīt </button>
</form>

Kā arī pievienosim vēl  lauku “E-pasts”, lai mums būtu e-pasts uz kuru atbildēt lietotājam, kas nosūtījis mums ziņu no mājas lapas un Subject (temata) lauku:

<form action=”forma.php” method=”post”>
<label>Vārds</label><br>
<input type=”text” name=”name” required><br>
<label>Jūsu e-pasts:</label><br>
<input type=”email” name=”mail”  required><br>
<label>Temats</label><br>
<input type=”text” name=”subject” required><br>
<label>Jūsu ziņa</label><br>
<textarea name= “message” style=”height:200px” required></textarea><br>
<button type=”submit” name=”submit”>Nosūtīt </button>
</form>

DATU NOSŪTĪŠANA UZ E-PASTU

Nākamais, kas Jums jādara, ir jāuzraksta PHP kods. Atveriet failu forma.php, ko izveidojāt.

PHP kods:

<?php

if(isset($_POST[“submit”]))
{

$name = $_POST[“name”]; //vārds
$mailFrom = $_POST[“mail”]; // e-pasta adrese
$subject = $_POST[“subject”]; //Temats
$message = $_POST[“message”]; //Ziņa

$mailTo = “jusu.epasta-adrese.lv”; /* kam nosūtīt e-pastu, šeit norādiet e-pastu uz ko vēlaties saņemt ziņas */
$headers = “From: ” . $mailFrom; //e-pasta adrese, ko norādīt from (no kā) laukā e-pastā
$txt= “Jums pienākusi ziņa no ” .$name.”.\n\n”.$message; //ziņa, kas uzrādīsies Jūsu e-pastā

mail($mailTo, $subject, $txt,$headers );
header(“Location: index.html?mailsend”);
}

?>PHP kods vienmēr sākas ar <?php un beidzas ar ?>., jo PHP parsē tam nodoto tekstu starp šiem norobežotājiem.

PHP komentārus var pierakstīt ar // vienas rindas komentāram  vai /*
ja komentārs ir
vairākās
rindās
*/
Tos kodā esmu pielikusi, lai būtu redzami paskaidrojumi katrai rindai un Jums vieglāk saprast, kas ir kas. Tie nav obligāti, bet tos Jūs varat izmantot, kad mācaties, lai neaizmirstu, ko iepriekš veidojāt.

PHP valodā ir mainīgie, kas ir konteineri, kas glabā informāciju, mainīgie PHP vienmēr sākas ar $ zīmi. Pēc $ zīmes seko mainīgā nosaukums, ko Jūs piešķirat mainīgajam. Piemēram:

$name

$mailFrom

$subject

$message

Mainīgajiem ir vērtības, kas tiek rakstītas aiz = zīmes.  Kad mainīgā vērtība ir teksts, kā iepriekšminētajam $txt = “Jums pienākusi ziņa no ”, tad teksts ir jāliek pēdiņās.

Brīdī, kad mainīgajiem pievienojiet vērtību, tie tiek deklarēti. Mainīgo nosaukumam vienmēr jāsākas ar burtu vai apakšsvītru, tie nedrīkst sākties ar ciparu. Mainīgo nosaukumi ir case-sensitive, kas nozīmē, ka, piemēram, $name un $Name, būtu 2 atšķirīgi mainīgie.

PHP( PHP Hiperteksta priekšprocesors) ir ļoti plaši pielietota programmēšanas valoda, izmantojot PHP ir būvēts vairums mājas lapu, tai skaitā WordPress, Facebook, Wikipedia un daudzas citas! PHP ir servera puses skriptu valoda, ko izmanto dinamiska satura pārraidīšanai. Uz doto brīdi jaunākā stabilā PHP versija ir PHP 7.4.7.

If komanda ir standarta nosacījuma kontroles struktūra. Ar IF var pārbaudīt vai nosacījums atbilst patiesībai (TRUE) vai nē (FALSE).

if (nosacījums) { kods, kas parādās, ja nosacījums izpildās; }

Aiz if seko isset, kas ir PHP funkcija. Funkcija isset() pārbauda vai ir deklarēts mainīgais un vai tā vērtība nav vienāda ar NULL. Šajā gadījumā parbauda vai  lietotājs ir nospiedis pogu Nosūtīt (kam HTML dokumentā piešķīrām nosaukumu (name) submit). Ja lietotājs apstiprinājis ievadītos datus ar submit pogu, tad tiks izpildīts tālāk esošais kods.

PHP $_POST ir PHP mainīgais, ko izmanto, lai savāktu formas datus pēc  HTML formas apstiprināšanas (submit) ar metodi (method)=”post”. $_POST tiek izmantots arī, lai padotu mainīgos.

mail() arī ir PHP funkcija. Iekš iekavām aiz mail ir ievietoti 4 parametri – $mailTo, $subject, $txt, $headers. Ar mail funkcijas palīdzību tiek nosūtīts e-pasts.

$mailTo vērtība ir e-pasts uz kuru vēlamies saņemt ziņas no kontaktformas, ko izveidojām iepriekš.

$subject  ir mainīgais, ko izveidojām, kas vienāds ar subject lauka (Temats) vērtību, ko ievada lietotājs.

$txt ir mainīgais, ko izveidojām, kas ietver tekstu un 2 mainīgo vērtības, ko lietotājs ievadījis (vārdu un ziņu).  ar \n apzīmē jaunu rindu e-pastā. Piemērā redzams, ka aiz vārda ievietoju 2 rindu pārtraukumus. Tas nav obligāti, bet tas ir pievienots, lai saņemtā ziņa e-pastā ir salasāmāka un izskatās labāk.

Savukārt, $headers mēs norādām no kā mēs saņemam e-pastu. Tur var norādīt arī ,piemēram, mājas lapas nosaukumu un, tad e-pastā uzrādīsies, ka ziņa saņemta no mājas lapas, bet šajā piemērā, parādu, kā pievienot to, lai e-pasta from laukā uzsrādās sūtītāja ievadītais e-pasts $mailFrom.

header () ir PHP funkcija ar kuras palīdzību atgriežam lietotāju uz sākumlapu. Ta kā man ir sākumlapa failā index.html, kur bija arī forma, tad pie atrašanās vietas norādu index.html.

mailsend ir apstiprinājums, ka e-pasts ir nosūtīts, kas pēc nosūtīšanas redzams interneta pārlūkā adreses joslā url beigās.

Ja, Jūs veidojat šo kontkatformu uz localhost (lokāli uz Jūsu Windows datora), piemēram ar XAMPP, tad Jums ir jāizmaina php.ini fails, lai varētu notestēt datu sūtīšanu.

Lai, piemēram notestētu datu nosūtīšanu uz gmail adresi, Jums jāatver php.ini fails, kas atrodas XAMP aplikācijas mapē: \xampp\php\php.ini  (Windows) un jāatrod vieta, kur ir [mail function] un jāizmaina sekojošais:

Pēc tam jāatver \xampp\sendmail\sendmail.ini. un jāaizvieto viss tur esošais kods ar šo: