آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)(اختصاصی پرشین اسکریپت)

  • نویسنده موضوع iReza
  • تاریخ شروع
I

iReza

کاربر عضو
سلام.

خوب هستید؟

توی این تاپیک یک سری پست در رابطه با ساخت یک فرم تماس با ما Ajax و jQuery (و قطعا بقیه زبان های مورد نیاز مانند Php) گذاشته میشه. کاملا Ajax هست و بصورت پنجره PopUp ظاهر میشه و شما فقط در یک صفحه هستید، بخشی از این آموزش از کدهای قبلی تاپیک "
لینک ها تنها برای اعضای سایت قابل نمایش است.
" که جاداره از Mohammad تشکر کنم.

* مطلب کاملا اختصاصی نوشته شده! نه ترجمه شده! نه کپی شده! *

* در صورت نسخه برداری، کپی رایت رو ذکر کنید *

زبان های استفاده شده:

Javascript

Ajax

jQuery

Css

Html

Php

\\ پیشنهاد میشه از NotePad PlusPlus استفاده کنید //

مرحله یک: (طراحی پایه)

خب، اول کاریم! باید یه ساختار پروژه ثابت برای خودمون درست کنیم.

​
​


  • [*=right]index.php
    [*=right]sent.php



دو فایل بالا فایل های اصلی ما هستن، اما ما یک فولدر با نام static درست میکنیم تا فایل های استاتیک رو اونجا قرار بدیم، درون اون هم 4تا فودر دیگه میسازیم به اسم های css,js,img,font که نشانگر هست اسمشون چی هستن.

اما مسلما" ما نمیتونیم بدون استفاده از یکسری کتابخونه و فریم ورک کار طراحی رو شروع کنید، پس فایل های زیر رو فراخوانی میکنیم، به روایت آمیانه:

​


  • [*=right]jQuery :
لینک ها تنها برای اعضای سایت قابل نمایش است.

[*=right]jQuery Reveal :
لینک ها تنها برای اعضای سایت قابل نمایش است.



خب، حالا ما محتویات فایل jQuery Reveal رو به همون فولدرهایی که ساختیم میبریم (فایل های css در فولدر css و js ها در فولدر js ها و imgها در فولدر img ها)(باید هر فایلی رو طبق اصلیتش به این فولدرها انتقال بدید). به روایت کد (در index.php):


کد: 
<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 رو بنویسیم، این کد هست:


کد: 
@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;
}
اما بخاطر اینکه ما بتونیم قدر واقعی فرم رو نشون بدیم باید روی یچیزی بالاخره کلیک کنیم، پس یک کد هم به صفحه اصلی اضاف میکنیم:


کد: 
<!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 رو خودمون باید بنویسیم)

 
آخرین ویرایش توسط مدیر:
I

iReza

کاربر عضو
خب رسیدیم به بخش داینامیک فرم.

در اینجا باید کد صفحه sent.php رو بنویسید (متغیر to$ ایمیل شماست):


کد: 
<?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:


کد: 
// 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 ارسال بشن و محیط رو برای ارسال چند متغیر فراهم میکنه.

لینک ها تنها برای اعضای سایت قابل نمایش است.


دانلود

 
آخرین ویرایش توسط مدیر:
erfan

erfan

طراح وب
پرسنل مدیریت
رضا جان مخسی

خیلی خوب آموزش دادی!!

خدا کنه دوستان کپی نکنند :(

 
I

iReza

کاربر عضو
بچه ها لازم نییست برای نشون دادن آیکون لودینگ از jQuery استفاده کنید، فقط کافیه یه خورده از ریاضی یادتون مونده باشه :D

باید یک دستور با if بنویسید که اگر ReadyStat کمتر از 4 بود دستوراتتون اعمال بشه.

 
O

OSHKOL

Banned
سلام

دمو ندارید؟

ببخید میشه اینو توی قالب ها وردپرس هم استفاده کرد؟

ممنون

 
I

iReza

کاربر عضو
بله میشه فقط باید برای وردپرس اختصاصیش کنید.

دمو هست، Salaam.tk بخش Contact.

 
9

9kia

تازه وارد
درود , مقدور هست اسکریپ نهایی رو برای دانلود قرار دهید .

 
آخرین ویرایش توسط مدیر:
I

iReza

کاربر عضو
درود بر شما.

لینک دانلود در پست اول قرار داده شد!

لینک ها تنها برای اعضای سایت قابل نمایش است.


 
A

aliasghar12

تازه وارد
با سلام

اسکریپت زیبایی بود شما ببینید

دمو :
لینک ها تنها برای اعضای سایت قابل نمایش است.


 
M

m-alian

تازه وارد
سلام میشه کد امنیتی زیبا هم براش بزاربن

ممنون

 
M

m-alian

تازه وارد
و یک چیز دیگه پیش هر فیلد اسمشو بزارین هم داخل فیلد

میشه رو آجاکس بیشتر کار کنید مثلا کسی نام رو ننویسه بره فیلد بعدی اخطار بده

یا از ایمیل بره فبلد بعدی اگه ایمیل اشتباه بود بگه اشتباهه

ممنون میشم اگه اینارو بزارین

 
M

m-alian

تازه وارد
کجا بنوییسم که اطلاعات به ایمیلمون ارسال بشن

ایمیل کجا بنویسیم؟

 
IAMIR

IAMIR

کاربر عضو
به توضیحات رضا دقت می کردید مشخص بود .

در فایل php

​
کد: 
[COLOR=#000000][COLOR=#0000BB]$to [/COLOR][COLOR=#007700]= [/COLOR][COLOR=#DD0000]'Your E-Mail'[/COLOR][COLOR=#007700];[/COLOR][/COLOR]
 
T

TIREDBOY

تازه وارد
دستتون درد نکنه ولی من ایمیل خودمو قرار دادم و امتحان کردم چیزی برای ایمیلم نفرستاد

 
Blacky

Blacky

تازه وارد
چ طوری ایمیل خودمونو قرار بدیم
کلیک کنید تا گسترش یابد...
این چه سوالیه دوست عزیز ؟

آدم حس میکنه با یه معلول ذهنی بدنی طرفه

خب پست بالاییتو نیگا کن بعد با کیبورد ایمیلتو تایپ کن

در ضمن ایمیل دبلیو دبلیو دبلیو نداره

:redfadce:

در ضمن دوست عزیز این آموزشها برای یه نفر که فارسی میفهمه نوشته نمیشه برای کسیه که حداقل تعاریف پایه ی php رو بدونه

انشاء الله که ناراحت نشده باشین

اگر که علاقه دارین ابتدا HTML رو یاد بگیرین بعد بیاین سمت اینجور کدنویسیها گرچه که کدنویسی به سمت فریمورک و MVC پیش رفته

از قدیم گفتن شترسواری دولا دولا نمیشه

:37:

 
Mohammad

Mohammad

مدیر انجمن
پرسنل مدیریت
این چه سوالیه دوست عزیز ؟آدم حس میکنه با یه معلول ذهنی بدنی طرفه

خب پست بالاییتو نیگا کن بعد با کیبورد ایمیلتو تایپ کن

در ضمن ایمیل دبلیو دبلیو دبلیو نداره

:redfadce:

در ضمن دوست عزیز این آموزشها برای یه نفر که فارسی میفهمه نوشته نمیشه برای کسیه که حداقل تعاریف پایه ی php رو بدونه

انشاء الله که ناراحت نشده باشین

اگر که علاقه دارین ابتدا HTML رو یاد بگیرین بعد بیاین سمت اینجور کدنویسیها گرچه که کدنویسی به سمت فریمورک و MVC پیش رفته

از قدیم گفتن شترسواری دولا دولا نمیشه

:37:
کلیک کنید تا گسترش یابد...
لطفا تاریخ تاپیک ها رو بررسی کنید قبل از پاسخ دادن...

 
A

aminuse

تازه وارد
سلام کسی میتونه بهم کمک کنه؟

من ی مولتی فرم دارم میخوام وقتی کاربر بر روی نکست کلیک کرد تو هر step مشخصاتش تو جدول درج بشه

چطور میشه اینکار رو کرد

کسی هست بیاد کمک بده؟؟؟؟

 
شما برای پاسخ‌دادن باید به انجمن ورود کنید.
بالا