Kuidas Teha Korralikku PHP Tagasiside Vormi Php, HTML ja CSS Abil, Mis Saadab Tagasiside Sinu Emailile

Kirjutas Toomas
Article3900048196lYMw4y

 (11 korda hinnatud)

Kuidas teha kodulehele tagasisidevormi? Märksõnadeks HTML, PHP, CSS ja Notepad++, failid rar-ina lõpus.

Juhised ja sammud

Raskusaste: Lihtne

Vajalikud asjad

  • a. php tugi serveril
  • b. koht kuhu vorm üles laadida avalikuks
  • c. mõni tekstiredaktor (ma eelistan Notepad++)
  • d. kasuks tulevad teadmised CSS-st, PHP-st ja HTML-st
1
Loo uus kaust, kuhu järgnevad failid salvestad. Esmalt teeme valmis vormi HTML-s, mida inimesele kuvatakse, koosneb kolmest lahtrist (nimi, e-mail, sõnum) ja saatmisnupust, mis vajutamisel käivitab koodi failis feedback_short.php (vormi sisestatud väärtustega võtab submit nupp ette seda, mis sa talle actioniga külge paned. Faili nimeks pane näiteks "feedback_form.php" :

Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"> <!-- stiilileht külge, et vormil oleks ka väljanägemist-->
<title>Minu ilus tagasiside vorm</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<center>

<table class="form"><!--alustame vormiga -->
<form class="form" method="post" action="feedback_short.php"><!--actioniga määrad, mis failis sul kirjeldatud on, mis vormi sisestatud väärtustega peale hakata-->
<tr>
<td>Name:</td>
<td><input name="name" type="text" /><br /></td><!-- lahter kust tuleb väärtus "name"-->
</tr>

<tr>
<td>E-mail:</td>
<td><input name="email" type="text" /><br /></td><!--lahter kust tuleb väärtus "e-mail" -->
</tr>

<tr>
<td>Message:</td>
<td><textarea name="message" rows="15" cols="40"></textarea><br /></td><!--lahter kust tuleb väärtus "message" -->
</tr>

<tr>
<td></td>
<td><input type="submit" value="Send" /></td> <!-- nupp, mille vajutamisel saadud andmed vormidest feedback_short.php-sse töötlemisele saadetakse-->
</tr>
</form>
</table>
</center>

</body>
</html>
2
Teiseks kirjutame valmis actioni, ehk mida vormis olevate andmetega peale hakata. Siin olev action saadab saadud andmed vormindatud kujul e-maili aadressile, mille sa ise määrama pead. Vormis e-mail olevale mailiaadressile teostatakse ka kontroll, kas on ikka mailiaadress, salvesta see nimega "feedback_short.php" samasse kausta, kus eelminegi fail:

Kood:

<?

//anname mõned väärtused muutujatele, mida kasutame

$mailto = 'sinuemail@kuidas.ee' ;

$subject = "Feedback" ;

$formurl = "feedback_form.html" ;
$errorurl = "error_page.php" ;
$thankyouurl = "thankyou.php" ; //võid ka täispikalt välja kirjutada, kuid kui failid asuvad kõik samas kaustas, siis ei ole tegelikult vahet ("näiteks: http://www.kuidas.ee/feedback/thankyou.php")

$uself = 0;

//võtame väärtused html vormidest

$headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ;
$name = $_POST['name'] ;
$email = $_POST['email'] ;
$message = $_POST['message'] ;
$http_referrer = getenv( "HTTP_REFERER" );

if (!isset($_POST['email'])) {
header( "Location: $formurl" );
exit ;
}

//kontroll, et poleks vormis tühje välju jäetud, kui jaa, siis suunata kasutaja error lehele

if (empty($name) || empty($email) || empty($message)) {
header( "Location: $errorurl" );
exit ;
}
if ( ereg( "[\r\n]", $name ) || ereg( "[\r\n]", $email ) ) {
header( "Location: $errorurl" );
exit ;
}

// siit algab e-maili aadressi kontrollija, kontrollib, kas on ikka õige e-maili aadress sisestatud vormi

function check_email_address($email) {
// kontrollime pikkust ja et oleks ikka ainult üks @ märk aadressis
if (!ereg("^[^@]{1,64}@[^@]{1,255}$", $email)) {
// vale emaili aadress, liialt tähemärke või @ märke.
}
// jupitame osadeks, et oleks lihtsam
$email_array = explode("@", $email);
$local_array = explode(".", $email_array[0]);
for ($i = 0; $i < sizeof($local_array); $i++) {
if (!ereg("^(([A-Za-z0-9!#$%&'*+/=?^_`{|}~-][A-Za-z0-9!#$%&'*+/=?^_`{|}~\.-]{0,63})|(\"[^(\\|\")]{0,62}\"))$", $local_array[$i])) {
return false;
}
}
if (!ereg("^\[?[0-9\.]+\]?$", $email_array[1])) { // domeeninime kontroll
$domain_array = explode(".", $email_array[1]);
if (sizeof($domain_array) < 2) {
return false; // pole päris domeen
}
for ($i = 0; $i < sizeof($domain_array); $i++) {
if (!ereg("^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$", $domain_array[$i])) {
return false;
}
}
}
return true;
}

// e-maili aadressi kontrollija lõpp

//e-kiri, mis vormi sisestatust saadetakse sinu poolt ülevalpool etteantud mailiaadressile

if (get_magic_quotes_gpc()) {
$message = stripslashes( $message );
}

$messageproper =
//siin ei ole vist raskusi aru saada, mis on mis, \n on reavahetus php-s ja muutujate väärtused kirjutatakse kirjas vastavas kohas, nagu näha;
"This message was sent from:\n" .
"$http_referrer\n" .
"----------------------------------------------------\n" .
"Name of sender: $name\n" .
"Email of sender: $email\n" .
"----------------------------------------------------\n\n" .
$message .
"\n\n----------------------------------------------------\n" ;

//kui oli õige mailiaadress, siis... ;
if (check_email_address($email)) {
//saada meil ja suuna kasutaja thankyou lehele
mail($mailto, $subject, $messageproper,
"From: \"$name\" <$email>" . $headersep . "Reply-To: \"$name\" <$email>" . $headersep . "X-Mailer: chfeedback.php 2.07" );
header( "Location: $thankyouurl" ); }

else { header( "Location: $errorurl" );
}
exit ;

?>
3
Nüüd teeme valmis veateate, juhuks, kui andmete sisestamisel vormidesse midagi vussi läks ja sisestatud andmed ei läbinud meie andmekontrolli. See fail salvesta nimega "error_page.php:

Kood:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<title>Tagasiside vormi veatede</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php

//anname inimesele aega teadet lugeda ja siis suuname ta tagasi eelmisele lehele javascripti abil

$url = "javascript:history.go(-1)"; // sihtmärk on üks samm tagasi brauseris
$delay = "3"; // 3 sekundit aega lugemiseks

//see kõik brauseri metasse kirja
echo '<meta http-equiv="refresh" content="'.$delay.';url='.$url.'">';
?>

</head>

<body>
<center>

<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center"><b>Sinu teate saatmisel tuli viga, täida kõik väljad ja proovi uuesti.</b> </td>
</tr>
<tr>
<td align="center">Sind suunatakse koheselt tagasi lehele, kust sa tulid.</td>
</tr>
<tr>
<td align="center">Kui Sind 3 sekundi jooksul pole tagasi suunatud, klikka <a href="javascript:history.go(-1)">siia.</a>
</td>
</tr>
</table>
</center>

</body>
</html>
4
Lõpetuseks täname vormi täitnud inimest:

Kood:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<title>Aitäh kirjutamast!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php
$url = "feedback_form.php"; // kuhu tagasi suunata
$delay = "5"; // 5 sekundit ooteaega enne kui tagasi suunata

echo '<meta http-equiv="refresh" content="'.$delay.';url='.$url.'">';

?>
</head>

<body>
<center>

<!--tänusõnad-->
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center"><b>Täname tagasiside eest! Aitäh!</b></td>
</tr>
<tr>
<td align="center">Sind suunatakse kohe tagasi lehele, kust sa tulid.</td>
</tr>
<tr>
<td align="center">Kui sind ei suunata 3 sekundi jooksul, kliki <a href="feedback_form.php">siia.</a>
</td>
</tr>
</table>
</center>

</body>
</html>
5
Et tagasisidevorm näeks parem välja, on mul näitefailides talle juba külge pandud ka CSS stiilileht, salvesta see nimega "style.css":

Kood:
body {
margin:0px;
padding:0px;
background:url(all_bg.jpg);
}

/*******TABELIS OLEVA TEKSTI FONT*****/
td {
font-family:tahoma;
font-size:11px;
color:#B1B1B1
}


/*******VORM ÜLDISELT*****/
.form {
margin:13 0 0 5px;
}

/*******NIMI JA E-MAILI AADRESS JA SUBMIT NUPP*****/
.form input{
width:237px;
height:24px;
border-style:solid;
border-width:1px;
border-color:#797979;
background:#282828;
font-family:tahoma;
font-size:11px;
color:#B1B1B1;
padding:2 0 0 7px
}


/*******TEKSTI LAHTER*****/
.form textarea{
width:237px;
height:132px;
border-style:solid;
border-width:1px;
border-color:#797979;
background:#282828;
font-family:tahoma;
font-size:11px;
color:#B1B1B1;
padding:2 0 0 7px;
overflow:auto
}
6
Failid kokkupakitult siit.

Nipid ja hoiatused

  • Failid, mis siin näites omavahel suhtlevad on: feedback_short.php, feedback_form.php, error_page.php, thankyou.php ja style.css, neid nimesid muuda vastavalt soovile (failinimes kui vajalikus kohas koodis).
  • Küsimuste korral kommentaarid teretulnud.

Kommentaarid