آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)
مرحله یک: (طراحی پایه)
خب، اول کاریم! باید یه ساختار پروژه ثابت برای خودمون درست کنیم.
دو فایل بالا فایل های اصلی ما هستن، اما ما یک فولدر با نام static درست میکنیم تا فایل های استاتیک رو اونجا قرار بدیم، درون اون هم 4تا فودر دیگه میسازیم به اسم های css,js,img,font که نشانگر هست اسمشون چی هستن.
اما مسلما" ما نمیتونیم بدون استفاده از یکسری کتابخونه و فریم ورک کار طراحی رو شروع کنید، پس فایل های زیر رو فراخوانی میکنیم، به روایت آمیانه:
خب، حالا ما محتویات فایل jQuery Reveal رو به همون فولدرهایی که ساختیم میبریم (فایل های css در فولدر css و js ها در فولدر js ها و imgها در فولدر img ها)(باید هر فایلی رو طبق اصلیتش به این فولدرها انتقال بدید). به روایت کد (در index.php):
کد HTML:
<script src="static/js/jquery.js" type="text/javascript"></script> <script src="static/js/app.js" type="text/javascript"></script> <script src="static/js/jquery.reveal.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="static/css/reveal.css"> <link rel="stylesheet" type="text/css" href="static/css/style.css">
حالا باید فایل style.css رو بنویسیم، این کد هست:
کد HTML:
@font-face{ font-family: Dnb; src: url(../font/droidnaskh-bold.ttf), url(../font/droidnaskh-bold.eot); } body { margin: 0 auto; font-family: tahoma; font-size: 12px; direction: rtl; } .box { width: 400px; height: 16px; border: 2px solid #a1a1a1; border-radius: 10px; margin: 8% auto; padding: 12px; text-align: center; } a { text-decoration: none; color: #4C4C4C; } footer { text-align: center; } h4 { margin: 0 auto; font-family: Dnb; font-size: 70px; direction: rtl; text-align: center; color: #2F2F2F; text-shadow: 1px 1px 2px #1A1A1A; } input { border: 1px solid #ccc; border-radius:4px; padding: 3px; font: normal 12px Tahoma; background:#F8F8F8; transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; } textarea { border:1px solid #ccc; border-radius:4px; padding:3px; font:normal 12px Tahoma; background:#F8F8F8; transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; }
اما بخاطر اینکه ما بتونیم قدر واقعی فرم رو نشون بدیم باید روی یچیزی بالاخره کلیک کنیم، پس یک کد هم به صفحه اصلی اضاف میکنیم:
کد HTML:
<!DOCTYPE html> <html> <head> <title>فرم تماس با ما</title> <script src="static/js/app.js" type="text/javascript"></script> <script src="static/js/jquery.js" type="text/javascript"></script> <script src="static/js/jquery.reveal.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="static/css/reveal.css"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> </head> <body> <br> <div class="box"> <b><a href="#" class="big-link" data-reveal-id="myModal">اینجا کلیک کنید</a><br></b> </div> <div id="myModal" class="reveal-modal"> <center> <h4>تماس با ما</h4> <br><br> <form action="#"> <input type="text" name="yname" size="40" placeholder="نام شما"><br><br> <input type="text" name="ymail" size="40" placeholder="ایمیل شما"><br><br> <input type="text" name="ysubject" size="40" placeholder="موضوع"><br><br> <textarea name="ymsg" cols="40" rows="12" placeholder="پیغام شما"></textarea><br><br> <input type="button" value="ارسال" onclick="formget(this.form, 'sent.php?');"> </form> <br> <div id="show"></div> <a class="close-reveal-modal">×</a> </center> </div> <footer>طراحی و برنامه نویسی: <a href="http://ireza.blog.ir">رضا فرهادیان</a></footer> </body> </html>
در کلاس big-link، ما خاصیت هایی رو به تگ اضاف کردیم که طبق کتابخونه ها، بعد کلیک روی اون یکسری محتویات در قالب یک پنجره PopUp باز میشه. محتویات اون پنجره درون کلاس MyModal هست..
دانلود فونت ها
در جلسه بعد سراغ برنامه نویسی میریم...... (همچنین فایل app.js رو خودمون باید بنویسیم)
نوشته شده توسط رضا فرهادیان
پاسخ : آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)
خب رسیدیم به بخش داینامیک فرم.
در اینجا باید کد صفحه sent.php رو بنویسید (متغیر to$ ایمیل شماست):
کد PHP:
<?php
if (!empty($_GET['ysubject']) && !empty($_GET['ymsg']) && !empty($_GET['ymail'])) {
$to = 'Your E-Mail';
$subject = $_GET['ysubject'];
$name = $_GET['yname'];
$from = $_GET['ymail'];
$user_message = $_GET['ymsg'];
$body = "\n".
"نام: $name\n".
"ایمیل: $from \n".
"توضیحات: \n ".
"$user_message\n".
$headers = "From: $from \r\n";
$headers . "Reply-To: $from \r\n";
mail($to, $subject, $body, $headers);
echo '<p style="text-shadow: 1px 1px 8px #00cc0e;">عملیات با موفقیت انجام شد</p>';
}
else
{
echo '<p style="text-shadow: 1px 1px 8px #ff0000;">لطفا تمامی فیلدها را پر کنید</p>';
}
?>
و اما فایل app.js:
کد PHP:
// Developed By: R.Farhadian <R3ZA.FARHADIAN> <Http//Www.iReza.Blog.Ir/>
// V.1
function Ajaxrequest(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e){
try{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
return false;
}
}
}
}
function formget(form, url) {
var poststr = getFormValues(form);
postData(url, poststr);
}
function postData(url, parameters){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
document.getElementById("show").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET", url+parameters, true);
xmlHttp.send();
}
function getFormValues(formobj){
var str = "";
var valueArr = null;
var val = "";
var cmd = "";
for(var i = 0;i < formobj.elements.length;i++){
switch(formobj.elements[i].type){
case "text":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "textarea":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "select-one":
str += formobj.elements[i].name +
"=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
break;
case "checkbox":
if(formobj.elements[i].checked == true){
str += formobj.elements[i].name +
"=" + formobj.elements[i].value + "&";
}
break;
}
}
str = str.substr(0,(str.length - 1));
return str;
}
توضیحات فایل app.js:
ما در این فایل یک عملیات سریع ای جکس رو انجام میدیم.
تابع اولی که نوشتم، به طور کلی شیء HttpRequest رو فرهم میکنه. (اگر مرورگر کلا باش مشکل داشته باشه اررور میده)
تابع دوم، اطلاعات فرم رو از زیر فیلثر رد میکنه تا داده ارسال بشن البته صحیح!!!!!
تابع بعدی، وظیفه تبادل اطلاعات و ارسال و دریافت پاسخ رو داره که در بلاک show نمایش داده میشه.
تابع چهارم، اطلاعات فروم رو EncodeURI میکنه و اجازه نمیده داده های غیر استاندارد html ارسال بشن و محیط رو برای ارسال چند متغیر فراهم میکنه.
دانلود
پاسخ : آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)
خب رسیدیم به بخش داینامیک فرم.
در اینجا باید کد صفحه sent.php رو بنویسید (متغیر to$ ایمیل شماست):
کد PHP:
<?php
if (!empty($_GET['ysubject']) && !empty($_GET['ymsg']) && !empty($_GET['ymail'])) {
$to = 'Your E-Mail';
$subject = $_GET['ysubject'];
$name = $_GET['yname'];
$from = $_GET['ymail'];
$user_message = $_GET['ymsg'];
$body = "\n".
"نام: $name\n".
"ایمیل: $from \n".
"توضیحات: \n ".
"$user_message\n".
$headers = "From: $from \r\n";
$headers . "Reply-To: $from \r\n";
mail($to, $subject, $body, $headers);
echo '<p style="text-shadow: 1px 1px 8px #00cc0e;">عملیات با موفقیت انجام شد</p>';
}
else
{
echo '<p style="text-shadow: 1px 1px 8px #ff0000;">لطفا تمامی فیلدها را پر کنید</p>';
}
?>
و اما فایل app.js:
کد PHP:
// Developed By: R.Farhadian <R3ZA.FARHADIAN> <Http//Www.iReza.Blog.Ir/>
// V.1
function Ajaxrequest(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e){
try{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
return false;
}
}
}
}
function formget(form, url) {
var poststr = getFormValues(form);
postData(url, poststr);
}
function postData(url, parameters){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
document.getElementById("show").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET", url+parameters, true);
xmlHttp.send();
}
function getFormValues(formobj){
var str = "";
var valueArr = null;
var val = "";
var cmd = "";
for(var i = 0;i < formobj.elements.length;i++){
switch(formobj.elements[i].type){
case "text":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "textarea":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "select-one":
str += formobj.elements[i].name +
"=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
break;
case "checkbox":
if(formobj.elements[i].checked == true){
str += formobj.elements[i].name +
"=" + formobj.elements[i].value + "&";
}
break;
}
}
str = str.substr(0,(str.length - 1));
return str;
}
توضیحات فایل app.js:
ما در این فایل یک عملیات سریع ای جکس رو انجام میدیم.
تابع اولی که نوشتم، به طور کلی شیء HttpRequest رو فرهم میکنه. (اگر مرورگر کلا باش مشکل داشته باشه اررور میده)
تابع دوم، اطلاعات فرم رو از زیر فیلثر رد میکنه تا داده ارسال بشن البته صحیح!!!!!
تابع بعدی، وظیفه تبادل اطلاعات و ارسال و دریافت پاسخ رو داره که در بلاک show نمایش داده میشه.
تابع چهارم، اطلاعات فروم رو EncodeURI میکنه و اجازه نمیده داده های غیر استاندارد html ارسال بشن و محیط رو برای ارسال چند متغیر فراهم میکنه.
دانلود
نوشته شده توسط رضا فرهادیان
پاسخ : آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)
دوست من، کد شما اشکالات Syntaxی واضحی داره !
داخل header هم برای ارسال متن فارسی میبایست utf-8 کنیدش :
کد PHP:
$headers .= "Content-type: text/html; charset=UTF-8\r\n";
