PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από fafos » 09 Δεκ 2009 20:06

Τώρα τελευταία είναι πολύ της μόδας η ajax σε συνδυασμό με δυναμικές γλώσσες όπως η php.
Θα ξεκινήσω μία σειρά βοηθημάτων όπου θα χρησιμοποιούμε την ajax σε συνδυασμό με την php (και mysql όπου χρειάζεται).

Στα βοηθήματα θα χρησιμοποιώ την βιβλιοθήκη ajax JQuery


Αποστολή δεδομένων από φόρμα

Με αυτό το βοήθημα μπορούμε να στέλνουμε εντολές στην php για να κάνει όποια ενέργεια θέλουμε μέσω μίας φόρμας (καταχώρηση δεδομένων στην βάση, αποστολή emails κλπ).

Βασικά, δεν μας δεσμεύει τίποτα.. ότι κάνουμε με μία απλή φόρμα και php κάνουμε και με την χρήση του ajax.. η διαφορά εδώ είναι ότι δεν χρειάζεται να φύγουμε από την σελίδα όταν δώσουμε αποστολή (submit) στην φόρμα ενώ μπορούμε να πάρουμε όποιο λάθος έχει γίνει στην φόρμα. Το μειονέκτημα είναι ότι ο χρήστης πρέπει να έχει ενεργοποιημένη την javascript στον browser που χρησιμοποιεί αλλά αυτοί οι χρήστες είναι ένα πολύ μικρό ποσοστό σήμερα.

Στο παράδειγμά μου στέλνω κάποια στοιχεία της φόρμας σε κάποιο email..

Χρησιμοποιώ το PHPMailer για να παίρνω το μήνυμα με HTML και όχι απλό κείμενο.. εσείς βέβαια μπορείτε να χρησιμοποιήσετε όποια μέθοδο θέλετε..


DEMO: http://www.istopoli.com/tuts/contact-form.html

Ας το αναλύσουμε:

Κατεβάζοντας το zip αρχείο που επισυνάπτω (κάνουμε αποσυμπίεση) θα δούμε μέσα κάποια αρχεία και φακέλλους..

Το αρχείο contact-form.html περιέχει την φόρμα μας και τον ajax κώδικα:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;

	$&#40;&#41;.ajaxStart&#40;function&#40;&#41; &#123;
		$&#40;'#loading'&#41;.show&#40;&#41;;
		$&#40;'#result'&#41;.hide&#40;&#41;;
	&#125;&#41;.ajaxStop&#40;function&#40;&#41; &#123;
		$&#40;'#loading'&#41;.hide&#40;&#41;;
		$&#40;'#result'&#41;.fadeIn&#40;'slow'&#41;;
	&#125;&#41;;

	$&#40;'#contactform'&#41;.submit&#40;function&#40;&#41; &#123;
		$.ajax&#40;&#123;
			type&#58; 'POST',
			url&#58; $&#40;this&#41;.attr&#40;'action'&#41;,
			data&#58; $&#40;this&#41;.serialize&#40;&#41;,
			success&#58; function&#40;data&#41; &#123;
				$&#40;'#result'&#41;.html&#40;data&#41;;
			&#125;
		&#125;&#41;
		return false;
	&#125;&#41;;
&#125;&#41;
</script>
εδώ παίρνω την βιβλιοθήκη της jquery απευθείας από το google (μπορείτε να κάνετε και εσείς το ίδιο ή να κατεβάσετε το js αρχείο από την σελίδα της jquery και να το ανεβάσετε στην σελίδα σας αλλάζοντας το path στον κώδικα)

Μετά δίνω κάποιες εντολές για να πάρει τα δεδομένα από την φόρμα και με POST να τα στείλει σε κάποιο αρχείο php (contact.php) για έλεγχο και αποστολή.

Σημαντικό είναι αυτό το κομμάτι: $('#contactform').submit(function() { όπου στο contactform δίνουμε το id που έχουμε δώσει στην φόρμα μας (όπως θα δείτε παρακάτω)..

Προχωράμε στο style όπου σας ενδιαφέρει το κομμάτι:

Κώδικας: Επιλογή όλων

#result &#123; background-color&#58; #d5eaff; border&#58; 1px solid #0080ff; padding&#58; 10px; width&#58; 400px; margin-bottom&#58; 20px;text-align&#58;left; &#125;
(τα υπόλοιπα τα έχω βάλει εγώ για το demo, μην τα βάλετε)
Σε αυτό το κομμάτι βάζουμε το στυλ που θέλουμε να εμφανίζει ένα div όταν στέλνουμε την φόρμα (τα λάθη ή την επιτυχή αποστολή)..


Μετά βάζουμε αυτά τα divs για να βλέπουμε τα μηνύματα που θα μας δώσει η php (λάθη ή επιτυχής καταχώρηση) καθώς και ένα animation gif σας preloader που ειδοποιεί τον χρήστη ότι η αποστολή γίνεται:

Κώδικας: Επιλογή όλων

<div id="loading" style="display&#58;none;"><img src="images/preload.gif" alt="loading..." /></div>
<div id="result" style="display&#58;none;font-family &#58; Verdana;  font-size &#58; 12px;"></div>
Πιο κάτω είναι η φόρμα μας όπου εδώ θα δώσουμε το id (id="contactform") την μέθοδο (method="POST") και σε ποιο αρχείο θα σταλούν τα στοιχεία της φόρμας (action="contact.php")

Κώδικας: Επιλογή όλων

<form name="contactform" id="contactform" method="POST" action="contact.php">
αφού βάλουμε ότι πεδία θέλουμε στην φόρμα μας πάμε να δούμε το php αρχείο...

Ανοίγοντας το contact.php αρχείο θα δείτε κάποιο κώδικα php όπου κάνω έλεγχο για να δω ανα συμπληρώθηκαν όλα τα πεδία στην φόρμα και αν το email είναι σωστό.

Αν όλα είναι σωστά θα συνεχίσει παρακάτω αλλιώς θα δώσει λάθος μήνυμα στην σελίδα μας που πρέπει να διορθώσουμε.

Παρακάτω έχω τον κώδικα από το PHPMailer για να στείλω το μήνυμα με HTML στοιχεία (χρώματα, εικόνες κλπ).. Για το πως δουλεύει το PHPMailer διαβάστε τις οδηγίες στην ανάλογη ιστοσελίδα: http://phpmailer.worxware.com/

Αφού περάσει από εκεί και όλα είναι σωστά θα τυπώσει ένα μήνυμα ότι όλα πήγαν καλά και το μήνυμα εστάλη επιτυχώς!

Στους φακέλους images και phpmailer έχω τις εικόνες και τα αρχεία που χρησιμοποιώ για το demo μου και μπορείτε να τα αλλάξετε με τα δικά σας (τις εικόνες)..

Όπως προανέφερα, η φόρμα μπορεί να κάνει ότι της ζητήσουμε στην php.. από καταχώρηση δεδομένων μέχρι απλή αποστολή email.. πως θα την χρησιμοποιήσετε είναι θέμα δικό σας αλλά πάντα πρέπει να τα ασφαλίζεται αυτά για να μην έχετε περιπέτειες!


Στο demo μου δεν στέλνει μήνυμα.. απλώς παίρνετε μία προεπισκόπιση αυτού που θα έστελνε κανονικά.. στα αρχεία όμως μπορεί να δουλέψει κανονικά αλλάζοντας το toemailsas@edo.gr με το δικό σας email.
Συνημμένα
PHP-Jquery-send-form.zip
αρχεια
(65.9 KiB) Μεταφορτώθηκε 898 φορές
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από dimsis » 09 Δεκ 2009 20:31

Άψογος, ευχαριστούμε.
Θέλω να δω τι θα γράψεις μετά μια και ξεκίνησες με τη μια από jquery ajax calls :) Αλλά από την άλλη αν μας έγραφες π.χ. για τους jq selectors θα έπρεπε να πάει στην javascript και όχι στην php... Περιμένω τα επόμενα!

Δεν μου λες όταν γράφεις στη φόρμα σου "Fafos, after this guy... the chaos!!" εννοείς τον freestuffίτη cha0s ; :)

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από fafos » 09 Δεκ 2009 20:37

dimsis έγραψε:Άψογος, ευχαριστούμε.
Θέλω να δω τι θα γράψεις μετά μια και ξεκίνησες με τη μια από jquery ajax calls :) Αλλά από την άλλη αν μας έγραφες π.χ. για τους jq selectors θα έπρεπε να πάει στην javascript και όχι στην php... Περιμένω τα επόμενα!

Δεν μου λες όταν γράφεις στη φόρμα σου "Fafos, after this guy... the chaos!!" εννοείς τον freestuffίτη cha0s ; :)

ta jq selectors einai allounou papa euaggelio... :lol: o cha0s exei mhden anti gia omikron I think..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

diegito
Δημοσιεύσεις: 185
Εγγραφή: 18 Ιουν 2007 22:55
Τοποθεσία: Heraklio

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από diegito » 09 Δεκ 2009 23:58

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>

<script type="text/javascript">
$(document).ready(function() {

$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});

$('#contactform').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
Μήπως θα μπορούσες να μας εξηγήσεις τα παραπάνω;
A.P

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από fafos » 10 Δεκ 2009 00:01

kai na ta ekshghso den leei tipota... aples entoles ths jquery einai.. an ksereis liga agglika katalavaineis ti prospathei na kanei to kathena..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από vassilism » 10 Δεκ 2009 18:19

Ωραίος πατρίδα, ευχαριστούμε για τα ωραία βοηθήματα :D

Κάτι που σκέφτηκα:
Επειδή αρκετός κόσμος δεν ξέρει τι ακριβώς είναι το ajax και ίσως αρκετοί νομίζουν ότι είναι μια νέα σκριπτογλώσσα, μήπως να δίναμε έναν ορισμό τι είναι ajax?
Δεν ξέρω αν έχει αναφερθεί στο παρελθόν.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από fafos » 10 Δεκ 2009 18:31

Εικόνα
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από vassilism » 10 Δεκ 2009 18:35

Κάνεις λάθος πατρίδα.
Αυτό είναι το σωστό:

Εικόνα

Πέρα από την πλάκα, με μια γρήγορή αναζήτηση είδα πως έχει αναφερθεί.
Από το θέμα Tutorial για Pagination με Ajax στα Ελληνικά!
petsoukos έγραψε: Τι είναι η τεχνολογία AJAX.
Το όνομα AJAX είναι ένα ακρώνυμο του Asynchronous JavaScript and XML. Αναλαμβάνει να κάνει αιτήματα (request) στον διακομιστή (server) στο παρασκήνιο ώστε να μην χρειάζεται να φορτωθεί από την αρχή ολόκληρη η ιστοσελίδα, αλλά μόνο ένα μέρος της.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από fafos » 10 Δεκ 2009 19:22

vassilism έγραψε:Κάνεις λάθος πατρίδα.
Αυτό είναι το σωστό:

Εικόνα
ego kano lathos? rothse thn mana sou... :lol: (mhn rothseis ton patera sou giati tha sou pei oti einai mia omada ths Olandias)
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

klix
Δημοσιεύσεις: 42
Εγγραφή: 03 Ιαν 2010 00:15
Τοποθεσία: Λονδίνο

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από klix » 05 Ιαν 2010 20:31

και ένας γρήγορος "ορισμός"...

Ajax -> Asynchronous Javascript and XML. Πρόκειται στην ουσία για μια μέθοδο που επιτρέπει επικοινωνία client - server με ασύγχρονο τρόπο. Όταν λέμε ασύγχρονο δεν εννοούμε παρωχημένο - μη σύγχρονο :P αλλά επικοινωνία που δεν απαιτεί συγχρονισμό μεταξύ του client και του server.

Χωρίς το ajax η επικοινωνία γίνεται με το HTTP πρωτόκολλο, ο client στέλνει ένα HTTP request μήνυμα και ο server απαντά με τα δεδομένα σε HTML/CSS μορφή αφότου έχει επεξεργαστεί το request και η σελίδα στον client ξαναφορτώνει για να δείξει τα νέα δεδομένα που ήρθαν απο το server.

Το ajax στην ουσία εισάγει ένα ενδιάμεσο επίπεδο στην επικοινωνία αυτή με το XMLHttpRequest αντικείμενο, κατά την οποία τα δεδομένα απο το server στέλνονται σε μορφή XML και αναλαμβάνει η ajax engine να τα μετατρέψει και να τα "σερβίρει" στον client σε μορφή κατάλληλη για απεικόνιση (HTML/CSS) απο την πλευρά του client πάντα. Με τον τρόπο αυτό δεν χρειάζεται η σελίδα στον client να ξαναφορτώσει όταν λαμβάνεται κάτι απο το server και η web εφαρμογή μας αποκτά έναν πιο interactive χαρακτήρα...

Ελπίζω να μη σας μπέρδεψα ούτε να είπα κάτι λάθος, έτσι το αντιλαμβάνομαι το ajax δεν είναι επίσημος ορισμός ο παραπάνω... :P
-What are we going to do tonight Brain?
-The same thing we do every night pinky,try to take over the world!

Άβαταρ μέλους
vcore
Δημοσιεύσεις: 354
Εγγραφή: 20 Δεκ 2003 01:19
Τοποθεσία: Crete
Επικοινωνία:

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από vcore » 19 Φεβ 2010 00:54

Ωραίο tutorial dude.

Να ρωτήσω κάτι γρήγορο?

$.post("test.php?die=not", { mpla mpla mpla

στο αρχείο test.php κάνω

if ($_POST['die'] == "not") {

//code

}

αλλά δεν γουστάρει... :( είναι σωστός ο τρόπος με τον οποίο ελέγχω το posted var?

Ευχαριστώ :)
Easy CMS
------------
Το να ζητάς βοήθεια δεν σημαίνει ότι είσαι εξαρτημένος.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από fafos » 19 Φεβ 2010 01:14

vale sthn forma ena hidden pedio:

Κώδικας: Επιλογή όλων

  <input type="hidden" name="die" value="not">
kai vgale to ?die=not

Άβαταρ μέλους
vcore
Δημοσιεύσεις: 354
Εγγραφή: 20 Δεκ 2003 01:19
Τοποθεσία: Crete
Επικοινωνία:

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από vcore » 19 Φεβ 2010 02:05

Βασικά δεν είναι φόρμα.

Είναι <a href="javascript:void(0) ....... ></a>

Τελικά κατάφερα να παίξει. Το χαλούσε το $_POST['field']
που έβαζα στο php file.

'Επαιξε if (($field == "kati") && ($anotherfield == 0)) {

:)

Ευχαριστώ για το tip.
Easy CMS
------------
Το να ζητάς βοήθεια δεν σημαίνει ότι είσαι εξαρτημένος.

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από dpa » 19 Φεβ 2010 13:07

Παιδιά βάζω και μια εικόνα στην forma <input name="imagefile" type="file" id="imagefile" />

Αλλά όταν κάνω submit δεν την ανεβάζει

Γιατί ???

Άβαταρ μέλους
vcore
Δημοσιεύσεις: 354
Εγγραφή: 20 Δεκ 2003 01:19
Τοποθεσία: Crete
Επικοινωνία:

PHP+JQUERY+MYSQL no1- Αποστολή δεδομένων από φόρμα

Δημοσίευση από vcore » 08 Μαρ 2010 12:25

Fafos:

Λειτουργεί το όλο σκηνικό αλλά δεν βλέπω τα μυνήματα μετά το click που κάνω στην φόρμα.

Αυτό δηλαδή δεν λειτουργεί αν δεν κάνω λάθος:

Κώδικας: Επιλογή όλων

   $&#40;&#41;.ajaxStart&#40;function&#40;&#41; &#123;
      $&#40;'#loading'&#41;.show&#40;&#41;;
      $&#40;'#result'&#41;.hide&#40;&#41;;
   &#125;&#41;.ajaxStop&#40;function&#40;&#41; &#123;
      $&#40;'#loading'&#41;.hide&#40;&#41;;
      $&#40;'#result'&#41;.fadeIn&#40;'slow'&#41;;
   &#125;&#41;;
Βασικά έχω μπερδευτεί με το όλο σκηνικό. Σκεφτόμουν να κάνω validation client side & server side αλλά μετά σκέφτομαι γιατί να το περιπλέξω τόσο πολύ και να μην κάνω μόνο server side?

Στο παράδειγμα σου έχεις τον κώδικα σε ένα αρχείο. Στην δική μου περίπτωση έχω την φόρμα στο index.php το .js σε άλλο αρχείο το οποίο κάνω include στο index.php και σε ένα άλλο αρχείο το menu_insert.php σε άλλο αρχείο.

Πως θα μπορέσω να υλοποιήσω real time validation σε κάθε πεδίο της φόρμας? Πριν γίνει το submit?

Θα μπορούσε να γίνει κάτι τέτοιο?

function validatemenu_title(){

if(menu_title.val().length > 50 ){
menu_title.addClass("error");
menu_title.text("Δεν μπορεί να είναι πάνω από 50!");
menu_title.addClass("error");
return false;
}

και μέσα στην φόρμα στο αντιστοιχο πεδίο να πω:

Κώδικας: Επιλογή όλων

<input name="menu_title" class="input" style="width&#58; 300px;" type="text" onblur="function&#40;validatemenu_title&#41;;">
?

Υπάρχει τρόπος να δείχνω τα μυνήματα σε κάποιο DIV το οποίο είναι σε διαφορετικό σημείο στο index.php και όχι στην φόρμα ?

Ευχαριστώ πολύ.!!!
Easy CMS
------------
Το να ζητάς βοήθεια δεν σημαίνει ότι είσαι εξαρτημένος.

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες