The use of web 2.0 effects and Ajax make this web site on of my favourites.

With this tutorial I will explain you how to create a message mail system like Facebook.

For make this we need to create some files.

1. The index file with the mail form.

2.The mail.php file that process the form and send the mail, using the simple function mail() of php.

3.A css file .

4.Jquery, naturally.

5.An other Javascript, called Ajax.js, to interact with ajax, php and jquery.

Surely you can put all in one file, but, for a better understanding and to have a clean code, I prefer to use different files for each one.

Well first of all you can see a demo of this page here, for logical reason I’ve deleted my mail from the source code, / you can use your mail to test the script) this is the only thing that you need to change before use the source code, the rest is ready for use.

OK, start with this tutorial.  First we need to create the form page and link to this page the jquery and ajax,js script, so this is the code :

<div>
<div id=”response”>

</div>
<form id=”formail” action=”" method =”post”>
<label>Name : </label>
<input type=”text” name=”name” id=”name” />
<label>Your mail :</label>
<input type=”text” name=”mail” id=”mail” />
<label>Subject : </label>
<input type=”text” name=”subject” id=”subject” />
<label>Text :</label>
<textarea name=”text” id=”text” cols=”40″ rows=”10″></textarea>
<input type=”submit” value=”send mail” id=”sendmail” name=”sendmail” />
</form>
</div>

</div>

The div called response, will be util for the validation and the text message after send the mail( or to get the error if the mail script doesn’t work), this div is really important don’t forget this.

Now we need to style this, you can style the form as you want, but the only important thing is that the div response must be in display none :

#response{display:none;}

Is better if you style this and the form, it will look more pretty this is the complete css that I’ve used :

body{
background: #E7E7DC;
font-size: 13px;
font-family: arial;
}
#wrap{
width: 800px;
background: white;
margin: auto;
padding: 10px;
}
#wrap h1{
padding: 10px;
border: 1px solid #ccc;
background: #f8f8f8;
}
.mail{
width:500px;
margin:auto;
}
#formail{
width: 500px;
margin: auto;
}
#formail label{
display: block;
margin: 10px 0;
}
#text{
background: #f8f8f8;
}
#sendmail{
margin-top: 20px;
display: block;
}
#response{
display: none;
border: 1px solid #ccc;
background: #FFFFA0;
padding: 10px;
width: 450px;
}

This is the style of the page, now it comes the nice part, the php and the ajax, this will be funny! Let’s go and create the mail.php page, with this code :

<?php
$mail = $_POST['mail'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$text = $_POST['text'];

$to = “yourmail@domain.com”;
$message =” You received  a mail from “.$mail;
$message .=” Text of the message : “.$text;

if(mail($to, $subject,$message)){
echo “mail successful send”;
}
else{
echo “there’s some errors to send the mail, verify your server options”;
}
?>

Ok, let me explain this:

Firs I create the variables that will contain the froms data values :

$mail = $_POST['mail'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$text = $_POST['text'];

With the variable $to, I store the mail where I want that the mail will be sended( my mail), this is the only thing that you must change to make works the script.

The $message variable get  the mail and the text of the sender, and put in the body of the mail message.

Finally , with tha mail() function from php I send the mail. I’ve used an if because, if the mail doesn’t work you will know.

The mail function is really simple and accept some parameters, the mail where send, the subject and the message of the mail.

You can read all from the official page of php.

Now is the time of the ajax.js. This is the complete code :

$(document).ready(function(){
$(“#sendmail”).click(function(){
var valid = ”;
var isr = ‘ is required.’;
var name = $(“#name”).val();
var mail = $(“#mail”).val();
var subject = $(“#subject”).val();
var text = $(“#text”).val();
if (name.length<1) {
valid += ‘<br />Name’+isr;
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += ‘<br />A valid Email’+isr;
}
if (subject.length<1) {
valid += ‘<br />Subject’+isr;
}
if (text.length<1) {
valid += ‘<br />Text’+isr;
}
if (valid!=”) {
$(“#response”).fadeIn(“slow”);
$(“#response”).html(“Error:”+valid);
}
else {
var datastr =’name=’ + name + ‘&mail=’ + mail + ‘&subject=’ + subject + ‘&text=’ + text;
$(“#response”).css(“display”, “block”);
$(“#response”).html(“Sending message …. “);
$(“#response”).fadeIn(“slow”);
setTimeout(“send(‘”+datastr+”‘)”,2000);
}
return false;
});
});
function send(datastr){
$.ajax({
type: “POST”,
url: “mail.php”,
data: datastr,
cache: false,
success: function(html){
$(“#response”).fadeIn(“slow”);
$(“#response”).html(html);
setTimeout(‘$(“#response”).fadeOut(“slow”)’,2000);
}
});
}

What i’ve done? let me explain :

I suppose that you know the $(document).ready function of jquery, I’ve explained in the previous tutorial, create an animated menu with jquery.

When #sendmail, the submit button of the form,  is clicked will start the validation of the form, this is important try always to validate your forms, expecially for the breakballs(usually called spammer…), so the first part of the script validate the form and if on of the input value is under 0 this will stop the script and return an error like in this image

the text that appears is stored in the #response div, for this reason I said that is important and not only for this.

var valid = ”;
var isr = ‘ is required.’;
var name = $(“#name”).val();
var mail = $(“#mail”).val();
var subject = $(“#subject”).val();
var text = $(“#text”).val();
if (name.length<1) {
valid += ‘<br />Name’+isr;
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += ‘<br />A valid Email’+isr;
}
if (subject.length<1) {
valid += ‘<br />Subject’+isr;
}
if (text.length<1) {
valid += ‘<br />Text’+isr;
}

To validate the mail, I’ve used a regular expression( thanks to Juan Carlos )

if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i))

if you try to write 2 mail addres, this will not works, or if you use white space in the mail field the validation will stop the script. You can try simply leaving white the various fields to understand how it works. All of the error in the validation will appears in the response div, that will appear with a fadeIn effect.

if (valid!=”) {
$(“#response”).fadeIn(“slow”);
$(“#response”).html(“Error:”+valid);
}

The second part of the script is for create the datastr variable, that will store the value from the form and send in the ajax request, and make appear again the #response div, yes how I said is important ejejeje, like the facebook style, that say that the message is sending.

else {
var datastr =’name=’ + name + ‘&mail=’ + mail + ‘&subject=’ + subject + ‘&text=’ + text;
$(“#response”).css(“display”, “block”);
$(“#response”).html(“Sending message …. “);
$(“#response”).fadeIn(“slow”);
setTimeout(“send(‘”+datastr+”‘)”,2000);
}

In the final  part I’ve used a “return false“, so when you click on the submit button this doesn’t do nothing, well it seems that the button doesn’t do nothing, but the reason ts that the rest of the work is done by ajax and the function send :

function send(datastr){
$.ajax({
type: “POST”,
url: “mail.php”,
data: datastr,
cache: false,
success: function(html){
$(“#response”).fadeIn(“slow”);
$(“#response”).html(html);
setTimeout(‘$(“#response”).fadeOut(“slow”)’,4000);
}
});
}

This is the “core” of the script, this will call the $.ajax function of Jquery, give it the parameters and call the mail.php file, finally get the response of the mail.php, and return this in the response div, and after 4 seconds the text fade out.

This script is inspired ,how I said, from facebook message system and it works at the same way, you can use on your own and change or modify the source code.

Here is the demo of the script

Here you can download directly the script.
I hope is useful , you can use the comments and let me know what do you thing.

If you know something to improve the script, let me know pls.

Bye !!

This posts may be interesting too

• Detect the user’s browser with javascript
• Php Beginner guide : The comments
• Simple animated menu with jquery
• php beginner guide: introduction to php
• Text reflection with photoshop
• Create a badge 2.0 with Photoshop
• Create a fire text with Photoshop

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

An important thing to know is  that their use does not weigh the execution of the script (the PHP interpreter jumps all parties recognizing that comment), or the transfer of the page to the browser (in fact the comments, as contained within the PHP code, are part of what is not sent to the browser).

In php we have the same comments use in the major programming languages, like c++ or python, here some examples :

<?php

// comment style c++

?>

<?php

# comment style python

?>

This kind of comments are only on one line, when the PHP interpreter found this comments jump this part and go directly to the source php code.

But we can also use comments on more than one lines, like this :

<?php

/* this is a comment

on multilines

*/

?>

Be sure that don’t make error when you write a comment, or this will affect your code.

<?php

*/ this is a erroneus comment

*/

?>

<?php

/* this is the correct

way to comment on mutlilines

*/

?>

Simply not? The next time i will start writing code for php, stay tuned!

This posts may be interesting too

• How to send a mail with php ajax and jquery in facebook style
• php beginner guide: introduction to php

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The first step was the expansion of the macro with a packet called form interpreter. From here Php was in continue expansion and now is a one of the most used langues in the websites with a bigger community and over 10.000.000 of server that support php now. The reason of this big expansion are lots. Php is open source, is free, is simple and works perfectly with Apache, the most used web server in the world.

The important thing that you must remember about php, is that this language is server side.

What it means that php is a server side languages?

It means that the language is interpreted from the server, namely the server, through an interpreter, received the php code from the page and returns the html code. indeed if you look at the source code of a php page you will never see php code, but only the html that the server interpreter returns.

This is the difference between php and javascript, for example, that is a client side language, so it depend on the browser user and not from the server.

Php is perfect to work with database like mysql, to create e-commerce sites, administration systems and other more, one of a great example is WordPress, the CMS blogging platform that runs this website.

How to recognize php code? Here an example:

<?php echo “Hello World!”; ?>

This is an example, if you will try this code the page will results this :

Hello World!.

A php tag start always with the “<?php” and end with “?>” you can omit the “php” in the start tag.

Other important thing of the php syntax is the “;” at the end, this means the end of the instruction(never forget, is important!) , this was inherited from the most used languages, like c, java and similar.

Finally the most simple instruction in php, the “echo” that say to the server this : write what is wrote between the ” “.

How I said if you will look at the source code you don’t see the php code, but only the html that the server returns.
Well for the moment I think is good, now you know what is php, how it works and how to start writing code, I think is a good begin.

This is only the first chapter of this php guide for beginner, so … stay tuned for the other chapters.

Hasta Luego!

This posts may be interesting too

• How to send a mail with php ajax and jquery in facebook style
• Php Beginner guide : The comments

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.