نمایش نتایج: از شماره 1 تا 4 , از مجموع 4

موضوع: آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)

  1. #1
    کاربر اخراج شده
    تاریخ عضویت
    May 2013
    نوشته ها
    100
    تشکر تشکر کرده 
    3
    تشکر تشکر شده 
    409
    تشکر شده در
    68 پست

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

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


    • index.php
    • sent.php



    دو فایل بالا فایل های اصلی ما هستن، اما ما یک فولدر با نام 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 رو خودمون باید بنویسیم)

    نوشته شده توسط رضا فرهادیان

  2. تعداد تشکر ها از negin.server به دلیل پست مفید


  3. # ADS




     

  4. #2
    کاربر اخراج شده
    تاریخ عضویت
    May 2013
    نوشته ها
    100
    تشکر تشکر کرده 
    3
    تشکر تشکر شده 
    409
    تشکر شده در
    68 پست

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

    دانلود

  5. تعداد تشکر ها از negin.server به دلیل پست مفید


  6. #3
    کاربر اخراج شده
    تاریخ عضویت
    May 2013
    نوشته ها
    100
    تشکر تشکر کرده 
    3
    تشکر تشکر شده 
    409
    تشکر شده در
    68 پست

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

    دانلود


    نوشته شده توسط رضا فرهادیان

  7. تعداد تشکر ها از negin.server به دلیل پست مفید


  8. #4
    عضو جدید
    تاریخ عضویت
    Jun 2012
    نوشته ها
    82
    تشکر تشکر کرده 
    25
    تشکر تشکر شده 
    86
    تشکر شده در
    68 پست

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

    دوست من، کد شما اشکالات Syntaxی واضحی داره !
    داخل header هم برای ارسال متن فارسی میبایست utf-8 کنیدش :
    کد PHP:
    $headers .= "Content-type: text/html; charset=UTF-8\r\n"

  9. تعداد تشکر ها از mehrdd به دلیل پست مفید


اطلاعات موضوع

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

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. قالب های رایگان | کیاوا - زبان های HTML5,CSS3,Jquery,AJax
    توسط kiavaco در انجمن دیگر زبان ها
    پاسخ ها: 0
    آخرين نوشته: September 10th, 2017, 07:18
  2. نیازمند برنامه نویس js jquery ajax
    توسط secureconfig در انجمن درخواست خدمات برنامه نویسی
    پاسخ ها: 2
    آخرين نوشته: April 25th, 2015, 09:40
  3. url ایده آل در سئو و تاثیر Ajax و Jquery در سئو
    توسط mohsen.unlimited در انجمن مباحث و منابع آموزشی
    پاسخ ها: 2
    آخرين نوشته: February 24th, 2015, 20:09
  4. مشکل در ajax و jquery
    توسط meisamphp در انجمن AJAX
    پاسخ ها: 2
    آخرين نوشته: July 24th, 2013, 02:53
  5. پاسخ ها: 2
    آخرين نوشته: March 31st, 2013, 01:24

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •