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

- visibility ١٠ mode_comment

دوستان سلام،در قسمت دوم آموزش طراحی فرم تماس با ما بخش کد های ای جکس رو می نویسیم و برای قسمت نهایی هم بخش کد های 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 یا سمت سرور رو می نویسیم.کد های این قسمت رو خوب بررسی کنید و سوالات مرتبط رو در قسمت نظرات مطرح کنید.

موفق باشید.

comment دیدگاه کاربران
wvaseteh.ir

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

wvaseteh.ir

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

کیوان علی محمدی

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

رضا

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

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

کیوان علی محمدی

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

شاتل

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

کیوان علی محمدی

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

abbas ka

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

کیوان علی محمدی

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

alikhani98

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.