illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

فرم تماس با ما (php+Ajax+bootstrap) + پیگیری درخواست - قسمت2

12615 ۲۹ مهر ۹۲

دوستان سلام،در قسمت دوم آموزش طراحی فرم تماس با ما بخش کد های ای جکس رو می نویسیم و برای قسمت نهایی هم بخش کد های PHP و سمت سرور رو پیاده سازی میکنیم،بهتره دوستان اینجا کمی ب جی کوئری کار کرده باشن تا تو بررسی کد مشکلی نداشته باشن،خوب با ما همراه باشید.

قبل از نوشتن کد ها لازمه این کد استایل رو برای نمایش بهتر به صفحه اضافه کنیم(style.css)

کد های این قسمت در فایل mys.js قرار می گیرن.

درخواست ارسال فرم اصلی

توی قسمت اول کد فرم اصلی رو پیاده سازی + کد فرم پیگیری درخواست رو پیاده سازی کردیم و کد صفحه کد امنیتی رو هم ایجاد کردیم،خوب حالا باید کمی فرم کاربر رو اعتبار سنجی کنیم،البته اعتبار سنجی اصلی در قسمت PHP انجام میشه اما ما برای حفاظت فرم از دست ربات ها قسمت کد امنیتی رو با جاوا اسکریپت اعتبار سنجی میکنیم.

توضیحی که برای این قسمت باید گفت اینه که در قسمت ارسال درخواست ای جکس داده ها به صورت json ارسال و دریافت میشن؛شاید بخواید بپرسید چرا در قسمت data ما فرم رو با متد serialaize براش نوشتیم،خوب فرم ما دارای مقادیری هست ما این مقادیر رو با serialize کردن به صورت یه رشته در میاریم و برای کد سمت سرور ارسال میکنیم،وقتی داده ها با موفقیت برمیگردن ما یه تابعی براش نوشتیم که این رو چک میکنه،به وسیله json می تونیم چندین مقدار از سمت سرور به صورت ای جکس برگردونیم (قایل توجه دوستانی که  همیشه یه مقدار برمیگردوندن) ما داخل فایل ajax.php که وظیفه این پردازش رو بر عهده داره داده ها رو داخل یه آرایه قرار میدیم و بوسیله تابع json_encode اونا رو echo میکیم،با این روش پارامتر data میتونه به وسیله علامت نقطه به داده های برگشتی دسترسی داشته باشه و عملیات مورد نظر رو  انجام بده.اون قسمت trigger هم میتونه برای ما یه event رو اجرا کنه و ما این جا بعد از موفقیت آمیر بودن پردازش و ثبت داده ها فرم رو با همین trigger پاک کردیم.

فرم پیگیری درخواست 

خوب دوستان با بررسی این کد متوجه میشید خیلی شبیه کد بالایی هست و توضیح خاصی نداره،فقط بگم برای تابع قسمت success ما از نام پارامتر رو تغییر دادیم و این بستگی به خودتون داره که چه اسمی رو قرار میدید،اما همیشه سعی کنید معنا و مفهوم رو برسونه.

پاک کردن فرم

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

خوب دوستان در این قسمت ما کد های front end رو نوشتیم و در قسمت بعدی کد های back end یا سمت سرور رو می نویسیم.کد های این قسمت رو خوب بررسی کنید و سوالات مرتبط رو در قسمت نظرات مطرح کنید.

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 10 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    wvaseteh.ir(۳۰ مهر ۱۳۹۲)

    خیلی خوبه – فقط سریع تر فایل های کامل رو در دسترس قرار دهید. ممنون

  • ‏‏
    wvaseteh.ir(۳۰ مهر ۱۳۹۲)

    خیلی خوبه – فقط سریع تر فایل های کامل رو در دسترس قرار دهید. ممنون
    راستی کیوان جان شما افزونه هم طراحی میکنی؟

    • ‏‏
      کیوان علی محمدی(۱ آبان ۱۳۹۲)

      چشم دوست عزیز،بله طراحی میکنیم.

  • ‏‏

    تشکر جناب اقای علی محمدی 😛

    میشه صفحه رو جوری طراحی کرد که فرم در پنجره جدیدی باز نشه و تو همون صفحه یه افکت بخوره و صفحه فرم باز بشه. 😉

    • ‏‏
      کیوان علی محمدی(۲ آبان ۱۳۹۲)

      سلام رضا جان،بله با یه خورده جی کوئری اضافه میشه به راحتی این امکان رو اضافه کرد؛شما کل کد رو باید داخل یه تگ div دیگه قرار بدی و این تگ div رو display:none قرار بدی،بعدش با کلیک روی اون دکمه یا لینک این div به صورت افکت slideDown یا fade ظاهر بشه.به همین راحتی.

  • ‏‏

    سلام خدمت شما…
    آقا کیوان آموزش بوت استرپ خوب بهم معرفی میکنید؟؟؟
    خیلی ممنون 😀 😀 😀

    • ‏‏
      کیوان علی محمدی(۷ آبان ۱۳۹۲)

      سلام بهترین آموزش مستندات خود بوت استرپ هستش،اما خوب همیشه دنبال زبان فارسی هستیم دیگه؛اینجا می تونی کپی کاملا فارسی پیدا کنی.

  • ‏‏

    پس قسمت سوم چی شد

    • ‏‏
      کیوان علی محمدی(۱۳ آبان ۱۳۹۲)

      پیش نویس داره آماده میشه،امروز یا فردا منتشر میشه.

  • ‏‏
    alikhani98(۱۵ آبان ۱۳۹۲)

    منتظر قسمت سوم هستیم
    پس کی آماده میشه؟

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram