|
  |
 Formmailer mit PHP v2 + jQuery |
WuLana
...ehemals oldgirl
Dabei seit: 01.07.2008
Beiträge: 802
Herkunft: Niederösterreich
 |
|
| Formmailer mit PHP v2 + jQuery |
     |
Hallihallohallöle
Hiermit präsentiere ich euch mein erstes Tutorial hier auf GB
Beachten: Ich baue auf das Tut von White_Mustang (Formmailer mit PHP) auf und bitte euch dieses gründlich zu lesen bevor ihr mit Teil 2 beginnt.
Zuerst einmal zu den Grundlagen und eventuell aufkommende Fragen.
Was ist jQuery?
jQuery ist eine Erweiterungsbibliothek von javascript die die verwendung "vereinfacht" - bzw. einige Dinge wesentlich kürzer machen, was den Code betrifft.
Warum jQuery?
Nun ich haben jQuery aus dem Grund gewählt, dass es client-seitig arbeitet und keinen Seitenreload erfordert um ein Ergebniss zu sehen, außerdem entlastet es den Server ungemein.
Was bedeutet Client-Seitig?
Client-Seitig bedeutet das Aktionen auf dem PC des Clients(Nutzers) ausgeführt werden und nicht - so wie bei PHP - die Aktionen an den Server geschickt werden der diese dann bearbeitet und das Ergebniss dann zurück schickt.
Als erstes kümmern wir uns um das Formular + Auswertung mittels jQuery
So sieht unsere formular.html aus nachdem ich die HTML/Head/Body Tags hinzugefügt habe damit ihr nichts mehr hinzufügen müsst und daher Copy/Paste betreiben könnt.
Weiters ist es wichtig das ihr der Datei die Endung und damit auch den Dateityp ".php" verleihen solltet, warum? Das seht ihr dann im Bereich der Sessions
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
|
<html>
<head>
<!-- Später wichtig für den jQuery Teil-->
</head>
<body>
<form name="formmailer" action="action_formular.php" method="POST">
<table>
<tr><td><b>Name:</b></td> <td><input type="text" name="name"></td></tr>
<tr><td><b>eMail-Adresse:</b></td> <td><input type="text" name="email"></td></tr>
<tr><td><b>Betreff:</b></td> <td><input type="text" name="betreff"></td></tr>
<tr><td><b>Homepage:</b></td> <td><input type="text" name="homepage"></td></tr>
<tr><td><b>Nachricht:</b></td> <td><textarea name="nachricht"></textarea></td></tr>
<tr><td><input type="submit" value="Absenden?"></td><td><input type="reset" value="Zurücksetzen?"></td></tr></table>
</form>
</body>
</html> |
|
Da ich kein allzu großer Fan von stupider Tabellenformatierung bin habe ich das ganze in ein Feld gepackt und habe die "Textfeldbeschreibung" mittels label mit dem Textfeld verknüpft
-legend ist ein kleiner Zusatz der einen Text in der oben Linie des Felds einpflanzt
Das ganze sieht nun so aus
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
|
<html>
<head>
<!-- Später wichtig für den jQuery Teil-->
</head>
<body>
<form id="mail" action="action_formular.php" method="POST">
<fieldset style="width:350px">
<legend>Formmailer</legend>
<table>
<tr><td><label for="name"><b>Name:</b></label></td>
<td><input type="text" id="name" name="name"></td></tr>
<tr><td><label for="email"><b>eMail-Adresse:</b></label></td>
<td><input type="text" id="email" name="email"></td></tr>
<tr><td><label for="betreff"><b>Betreff:</b></label></td>
<td><input type="text" id="betreff" name="betreff"></td></tr>
<tr><td><label for="homepage"><b>Homepage:</b></label></td>
<td><input type="text" id="homepage" name="homepage"></td></tr>
<tr><td><label for="nachricht"><b>Nachricht:</b></label></td>
<td><textarea id="nachricht" name="nachricht"></textarea></td></tr>
<tr><td><input type="submit" value="Absenden"></td>
<td><input type="reset" value="Zurücksetzen"></td></tr>
</table>
</fieldset>
</form>
</body> |
|
Beachte: Ab hier werde ich nur noch die geänderten Codes zeigen, am Ende dieses Schrittes zeige ich den gesamten Code
Nun wird es das erste mal interessant, wir fangen mit jQuery an
als erstes fügen wir im head ein:
| php: |
1:
2:
|
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script> |
|
Die Dateien hängen im Dateianhang
Beachte: Ihr müsst das ".html" am Ende des Datenamens wieder löschen da das js also javascript dateien sind ich diese jedoch nicht uploaden konnte
Weiter gehts:
Als erstes wollen wir sicherstellen das jQuery erst seine arbeit aufnimmt nachdem alles andere geladen wurde,
wir öffnen daher einen neuen script block und rufen die .ready function auf
| php: |
1:
2:
3:
4:
5:
|
<script type="text/javascript">
$(document).ready(function(){
}
</script> |
|
Dannach "sperren" wir unser Abschicken Feld, bzw deaktivieren es, denn wir wollen das man es erst anklicken kann nachdem alle Anforderungen erfüllt wurden
Wir fügen die Action für das Attribut innerhalb des ready blocks ein
| php: |
1:
|
$('input[type="submit"]').attr('disabled','disabled'); |
|
beachte: durch "('input[type="submit"]')" sprechen wir alle submit button in diesem Formular an,sollte es nur ein gewünschter sein fügt man statt dem input '#name' ein.
Als nächste rufn wir die sogenannte "validation" function auf, die uns dank der vorhin eingefügten jquery.validate.js zur verfügung steht.
| php: |
1:
2:
3:
|
$("#register").validate({
}); |
|
Das ganze fügen wir unter der deaktivierung des Submit buttons ein.
Nun müssen wir der Validierung Regeln aufstellen die dann im Formular überprüft werden.
Beachte: Bei einer Regel für ein Feld reicht es diese unter " " zu stellen und mit "," die nächste Regel für das nächste Feld zu starten, möchte man jedoch mehr Regeln für ein Feld so kommen alle für dieses Feld geforderten Regeln in einen { } Block
Falls dies nun zu verwirrung führen solltet, ihr werdet im Code dann sehen was ich meine und hoffentlich auch verstehen. Falls nicht stehe ich gerne für Fragen zur verfügung
Das Aufstellen der Regeln leiten wir mit "rules:" ein, wie könnte es denn auch anders sein 
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
|
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$("#formmailer").validate({
rules: {
}
});
} |
|
Nun wollen wir natürlich noch die Regeln aufstellen,
Das sind die Regeln die ich erstmal aufgestellt haben
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
|
name: "required",
email: {
required: true,
email: true
},
nachricht: {
required: true,
minlength: 20
} |
|
x required bewirkt, das in diesem Feld etwas stehen muss
x email ist für emails und überprüft ob sie ein richtiges format hat
x minlength legt fest wieviele zeichen minimal eingeben werden müssen
ich habe Homepage bewusst Regellos gelassen, da nicht jeder eine hat.
Meiner Meinung nach sind die Standartfehlermeldungen doch langweilig,
also basteln wir uns eigene.
Wir fügen unter dem rules block "messages: " ein
Nun sieht das ganze so aus
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
|
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$("#formmailer").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
nachricht: {
required: true,
minlength: 20
}
},
messages: {
name: "Bitte geben Sie Ihren Namen ein.",
email: {
required: "Bitte geben Sie Ihre gültige E-Mail Adresse ein.",
email: "Die E-Mail hat ein ungültiges Format. Format: name@domain.de/at/com/..."
},
nachricht: {
required: "Bitte geben Sie eine Nachricht ein die Sie übermitteln möchten",
minlength: jQuery.format ("Es müssen mindestens {0} Zeichen eingegeben werden.")
}
}
});
} |
|
Jedoch hätten wir fast etwas vergessen wir müssen den Abschicken Button wieder aktivieren wenn alles ausgefüllt wurde.
Um unser Skript dazu bewegen nach jedem Tastendruck zu prüfen benutzen wir ".keyup"
Um zu prüfen ob bei Validation noch fehler vorhanden sind rufen wir "valid()" auf, diese Function gibt true zurück wenn keine Fehler mehr vorhanden sind
Sollte die Funktion also true zurückgeben so wird das Fehld wieder Aktiviert indem wir das vorhin hinzugefügte Attribut wieder entfernen,
Sollte eine anderes Ergebniss zurückgegeben bleibt das Feld deaktiviert, bzw wird wieder deaktiviert
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
|
$('#formmailer').keyup(function(){
if($('#formmailer').valid() == true){
$('input[type="submit"]').removeAttr('disabled');
}
else{
$('input[type="submit"]').attr('disabled','disabled');
}
}); |
|
Somit sind wir mit unserem jQuery Teil fast fertig.
Um wiederholtes abschicken zu verhindern, sperren wir unseren submit button nachdem er geklickt und abgeschickt wurde
submit wird wie folgt geändert
| php: |
1:
2:
3:
4:
5:
6:
|
<script type="text/javascript">
$('form').submit(function(){
$(this).find('input[type=submit]').attr('disabled', 'disabled').val('Bereits gesendet');
});
</script></td>
<td><input type="reset" value="Zurücksetzen"></td></tr> |
|
Wenn im Formular nun auf Submit geklickt wurde, wird der Button deaktiviert und der neue Inhalt ist "Bereits gesendet"
Unsere formular.php sieht nun so aus
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
|
<html>
<head>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$("#mail").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
betreff: "required",
nachricht: {
required: true,
minlength: 20
}
},
messages: {
name: "Bitte geben Sie Ihren Namen ein.",
email: {
required: "Bitte geben Sie Ihre gültige E-Mail Adresse ein.",
email: "Die E-Mail hat ein ungültiges Format. Format: name@domain.de/at/com/..."
},
betreff: "Bitte geben Sie den Betreff an",
nachricht: {
required: "Bitte geben Sie eine Nachricht ein die Sie übermitteln möchten",
minlength: jQuery.format("Es müssen mindestens {0} Zeichen eingegeben werden.")
}
}
})
$('#mail').keyup(function(){
if($('#mail').valid() == true){
$('input[type="submit"]').removeAttr('disabled');
}
else{
$('input[type="submit"]').attr('disabled','disabled');
}
});
});
</script>
</head>
<body>
<form id="mail" action="action_formular.php" method="POST">
<fieldset>
<legend>Formmailer</legend>
<table>
<tr><td><label for="name"><b>Name:</b></label></td>
<td><input type="text" id="name" name="name"></td></tr>
<tr><td><label for="email"><b>eMail-Adresse:</b></label></td>
<td><input type="text" id="email" name="email"></td></tr>
<tr><td><label for="betreff"><b>Betreff:</b></label></td>
<td><input type="text" id="betreff" name="betreff"></td></tr>
<tr><td><label for="homepage"><b>Homepage:</b></label></td>
<td><input type="text" id="homepage" name="homepage"></td></tr>
<tr><td><label for="nachricht"><b>Nachricht:</b></label></td>
<td><textarea id="nachricht" name="nachricht"></textarea></td></tr>
<tr><td><input type="submit" value="Absenden">
<script type="text/javascript">
$('form').submit(function(){
$(this).find('input[type=submit]').attr('disabled', 'disabled').val('Bereits gesendet');
});
</script></td>
<td><input type="reset" value="Zurücksetzen"></td></tr>
</table>
</fieldset>
</form>
</body>
</html>
|
|
Nun kümmern wir uns um die action_formular.php
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
|
<html>
<body>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$betreff = $_POST['betreff'];
$homepage = $_POST['homepage'];
$nachricht = $_POST['nachricht'];
$text = "Name: ".$name.
"E-Mail: ".$email.
"Homepage: ".$homepage.
"Nachricht: ".$nachricht;
@mail("EMAIL-ADRESSE",$betreff,$text,"From $name <$email>");
echo "Deine e-Mail wurde erfolgreich abgeschickt.";
?>
</body>
</html>
|
|
Wie ihr seht habe ich die IF-Verzweigung gelöscht die fragt ob alle Felder ausgefüllt wurden, da das in unserem fall ja nicht nötig ist weil das bereits jQuery übernommen hat
Nun wollen wir noch eine Session Starten die E-Mail und Username und die Homepage(wenn vorhanden) automatisch einträgt wenn dieser Benutzer schon einmal etwas abgeschickt hat
Das ganze geht ganz einfach:
In formular.php und action_formular.php fügen wir ganz oben vor <html> folgendes ein
| php: |
1:
2:
3:
4:
5:
|
<?php
session_start() ||die("Session konnte nicht gestartet werden, bitte Cookies aktivieren!");
?>
|
|
Damit uns die Session etwas bringt brauchen wir noch Session-Variablen
Im Grunde ist die Session nur ein Assoziatives Array,
Assoziatives Array häää? werden sich einige von euch denken
Assoziative Arrays sind Arrays die nicht mit den Indizes 0-n zählen sondern einen wert als indizes haben und selbst noch einen Wert:
z.B $array['name']=berta;
Beachte: Assoziative Arrays können nur mit einer "foreach-Schleife durchlaufen werden"Diese sieht so aus: foreach($array as $key=>$value){ echo($key." ".$value);}$key -> index$value -> inalt des momentanigen $key
Genug erklärt, das ganze wird nun verwendet!
wir fügen in action_formular unter der Variablen deklaration von $nachricht
| php: |
1:
2:
3:
|
$_SESSION['name']=$name;
$_SESSION['email']=$email;
$_SESSION['hp']=$homepage; |
|
ein.
Als nächstes widmen wir uns wieder der formular.php
und fügen bei name,email und homepage folgendes ein
| php: |
1:
2:
3:
|
value=" <?php if(isset($_SESSION['name'])){echo($_SESSION['name']);}?> "
|
|
statt name fügen wir email und hp bei den andren feldern ein,
Somit sind wir mit unserem abgeänderten Formular fertig
formular.php
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
|
<?php
session_start() ||die("Session konnte nicht gestartet werden, bitte Cookies aktivieren!");
?>
<html>
<head>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$("#mail").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
betreff: "required",
nachricht: {
required: true,
minlength: 20
}
},
messages: {
name: "Bitte geben Sie Ihren Namen ein.",
email: {
required: "Bitte geben Sie Ihre gültige E-Mail Adresse ein.",
email: "Die E-Mail hat ein ungültiges Format. Format: name@domain.de/at/com/..."
},
betreff: "Bitte geben Sie den Betreff an",
nachricht: {
required: "Bitte geben Sie eine Nachricht ein die Sie übermitteln möchten",
minlength: jQuery.format("Es müssen mindestens {0} Zeichen eingegeben werden.")
}
}
})
$('#mail').keyup(function(){
if($('#mail').valid() == true){
$('input[type="submit"]').removeAttr('disabled');
}
else{
$('input[type="submit"]').attr('disabled','disabled');
}
});
});
</script>
</head>
<body>
<form id="mail" action="action_formular.php" method="POST">
<fieldset>
<legend>Formmailer</legend>
<table>
<tr><td><label for="name"><b>Name:</b></label></td>
<td><input type="text" id="name" name="name" value=" <?php if(isset($_SESSION['name'])){echo($_SESSION['name']);}?> "></td></tr>
<tr><td><label for="email"><b>eMail-Adresse:</b></label></td>
<td><input type="text" id="email" name="email" value=" <?php if(isset($_SESSION['email'])){echo($_SESSION['email']);}?> "></td></tr>
<tr><td><label for="betreff"><b>Betreff:</b></label></td>
<td><input type="text" id="betreff" name="betreff"></td></tr>
<tr><td><label for="homepage"><b>Homepage:</b></label></td>
<td><input type="text" id="homepage" name="homepage" value=" <?php if(isset($_SESSION['hp'])){echo($_SESSION['hp']);}?> "></td></tr>
<tr><td><label for="nachricht"><b>Nachricht:</b></label></td>
<td><textarea id="nachricht" name="nachricht"></textarea></td></tr>
<tr><td><input type="submit" value="Absenden">
<script type="text/javascript">
$('form').submit(function(){
$(this).find('input[type=submit]').attr('disabled', 'disabled').val('Bereits gesendet');
});
</script></td>
<td><input type="reset" value="Zurücksetzen"></td></tr>
</table>
</fieldset>
</form>
</body>
</html>
|
|
action_formular.php
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
|
<?php
session_start() ||die("Session konnte nicht gestartet werden, bitte Cookies aktivieren!");
?>
<html>
<body>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$betreff = $_POST['betreff'];
$homepage = $_POST['homepage'];
$nachricht = $_POST['nachricht'];
$_SESSION['name']=$name;
$_SESSION['email']=$email;
$_SESSION['hp']=$homepage;
$text = "Name: ".$name.
"E-Mail: ".$email.
"Homepage: ".$homepage.
"Nachricht: ".$nachricht;
@mail("EMAIL-ADRESSE",$betreff,$text,"From $name <$email>");
echo "Deine e-Mail wurde erfolgreich abgeschickt.";
?>
</body>
</html>
|
|
Normalerweise sollte man noch mit einer Checkbox nachfragen ob das mit der Session gewünscht ist, das überlasse ich dann euch
Eine weitere kleine Anmerkung zu jQuery und Checkboxen/Radio buttons,
in diesem Fall solltet ihr bei "Message : "" " nutzen da die Fehlermeldung sonst vor den Text geschoben wird und das nicht gerade schick ist.
die Fertigen Dateien hängen im Dateianhang
Sollten noch Fragen auftreten, nur her damit
lG Oldy
Hoffe ein Mod könnte das in die Tut Abteilung schieben
Achja: Falls euch diese Tut gefällt überlege ich eventuell noch einen Captcha zusatz zu machen um gegen Bots zu handeln
__________________
Dieser Beitrag wurde 9 mal editiert, zum letzten Mal von WuLana: 12.07.2012 13:24.
|
|
12.07.2012 01:43 |
|
|
|
|
|
|
Impressum
|
