rezabaghaie

آموزش : ایجاد پیش نمایش فرم و پرینت آن در RSFORM

6 پست در این موضوع

سلام خدمت دوستان. با توجه به امکانات خوب RSform اکثرا دوستان ازین فرم ساز استفاده میکنن. در این آموزش قصد دارم تا با چند خط کد نویسی ساده یک پیشنمایش از فرم ایجاد کنیم و در آخر به صورت حرفه ای اون رو پرینت کنیم ! البته اینو بگم که این آموزش ترکیبی از چند آموزشی هست که به صورت رایگان در اینترنت وجود داره و من فقط کنار هم قرار دادمشون .این مورد خیلی بدرد سایت های شرکتی و رسمی میخوره به عنوان مثال می تونن در فرم ثبت نمایندگی یک فرم پیش قرارداد به صورت رسمی طراحی کنن (نمونه)

پیش نیاز:

  • داشتن RSFORM
  • دانش HTML برای ایجاد جدول و ساخت بلوک های span و div
  • دانش CSS برای زیباسازی فرم
  • دانش javascript برای کدنویسی پیش نمایش فرم و پرینت
  • دانش PHP برای کد نویسی بخش پیشنمایش

همینطور که میدونید یکی از قابلیت های بسیار خوب RSFORM اینه که شما میتونید داخل فیلد های متنی از کد های HTML استفاده کنید ! بعنوان مثال میتونید متن عنوان یک المنت رو بولد کنید و .... 

همچنین قابلیت دیگه RSFORM ایجاد فرم های چند صفحه ای هستش که به وسیله اون میتونید برای دقت  و زیبایی خدمات ارائه شده فرم های در چند صفحه ایجاد کنید .

نکته مهم : برای داشتن پیش نمایش و پرینت حتما باید فرمتون فقط دو صفحه ای باشه !  در صفحه اول اطلاعات دریافت بشه و در صفحه بعد اطلاعات نمایش داده بشه.

نکته مهم : با توجه به اینکه چند ترجمه برای RSFORMوجود داره بنابراین ممکنه گزینه هایی که مینویسم یا توی عکس میبینید با نسخه ترجمه شما تفاوت داشته باشه ! سعی میکنم جوری عکس بگیرم که از روی عکس این مشکل حل بشه.

نکته مهم : این آموزش دارای دو بخشه که در بخش اول فقط با فیلد های متنی کار میکنیم و در بخش دوم بقیه موارد رو اضافه میکنیم.

بخش اول :

1- یک فرم خیلی ساده طراحی میکنیم که قراره از کاربر مشخصات فردی دریافت کنه:

1.png.fc1c72c975ad55130d9edb2536017ff2.png

نکته : تعیین مور دنیاز و معتبر سازی رو به دلخواه میتونید انجام بدید و تاثیری رو کار نداره

2-  حالا ما باید بریم صفحه بعد و اطلاعات رو نمایش بدیم - پس حالت چند صفحه ای رو انتخاب میکنیم.

2.png.f2ebe71ddd5e753d620b79134864e341.png

3- سپس به این صورت یک دکمه ایجاد میکنیم

3.png.e2afca4bbbe36b4d525601235eae1ac1.png

4- برای نمایش دادن اطلاعات از "متن معمولی" استفاده میکنیم  . روش کار به این صورته که متن مورد نیاز (قرارداد ، پیام تشکر ، پیش فاکتور و ...)رو مینویسیم و بعد به وسیله کد نویسی محتوای فرم قبل رو به اون اضافه میکنیم. 

برای کد نویسی ما از تابع innerHTML استفاده میکنیم ، بنابراین متن داخل "متن معمولی" رو به این صورت مینویسیم:

4.png.89f47216833719fb0b781bc692d8a2d4.png

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

<span id="nameP">.</span

نکته مهم : حتما یادتون باشه که تگ span رو ببندید ! من خوردم خیلی وقتی فراموش میکنم !

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

5.png.1bd83a6dbec717d41f00eb49c5b4fab7.png

5- حالا ما میخوایم به وسیله کد نویسی اون متن پیش فرض داخل span رو تغییر بدیم. بنابراین به این قسمت میریم:

6.png.c026feb1c747505bd4fd328133afb450.png

و در قسمت Javascript کدهای زیر رو مینویسیم:

<script type="text/javascript">
function preV(param1, param2, param3, param4)
{
  if (param2 == 1 && param3 == 1)
  {
  document.getElementById('nameP').innerHTML = document.getElementById('name').value;
  document.getElementById('mobileP').innerHTML = document.getElementById('mobile').value;
  document.getElementById('emailP').innerHTML = document.getElementById('Email').value;
  }
  rsfp_changePage(param1, param2, param3, param4);
}
</script>

خب در کد بالا میبینید که داخل اسکریپت جاوا یک تابع ایجاد شده ئ در تابع محتویات المنتی که id اون nameP هستش رو با محتوای (value) کاربر که داخل فیلد name وارد کرده پر میکنه ! و درآخر با یکی از تابع های پیش فرض Rsform دستور تغییرات رو میده

بنابراین شما هرتعداد المنتی که دارید باید برای هرکدوم به صورت بالا یک خط کد بنویسید تا اون رو نمایش بده !

document.getElementById('nameP').innerHTML = document.getElementById('Name').value;

نکته مهم : در کد نویسی رعایت حروف کوچک و بزرگ الزامیه ، اگه شما اسم فیلد رو name گذاشتین حتما باید در کد بالا هم name بنویسید !! بنابراین اگه کدتون اجرا نشد حتما این موارد رو بررسی کنید ! چون این یکی از اصلی ترین مواردی که باعث بروز مشکل میشه !

((گزینه های param1 - param2 - param3 - param4 رو نمیدونم چیه ! اگه کسی میدونه توضیح بده ))

6- خب حالا نیاز به کدی داریم که تابع بالا رو اجرا کنه بنابراین در قسمت :

7.png.d8cee2a34cf02d2e57d94aeb4a94c074.png

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

$formLayout = str_replace('rsfp_changePage(','preV(',$formLayout);

در کد بالا میگه که در زمان تغییر صفحه تابع preV رو اجرا کن و ظاهر و محتویات فرم رو مجددا بار گذاری کن ! (این توضیح به زبان ساده بود)

7- نتیجه کار

8.png.abf59023324004cc4b2a0d5700827cc8.png

9.thumb.png.9cd9199f835326df2f5cdf841db564fe.png

-

همینطور که میبینید پیش نمایش فرم ما کار کرد !

خب حالا میخوایم کاری کنیم که کاربر از این فرم بتونه پرینت بگیره 

ساده ترین روش اینه که روی صفحه Ctrl+p بزنه و صفحه رو پرینت کنه . متاسفانه مشکل این روش اینه که تمام محتویات رو پرینت میکنه ! ولی ما میخوایم که کاربر فقط همون فرم رو پرینت کنه ! روش های زیادی برای اینکار وجود داره ! به عنوان مثال تگ های خاصی هستن که روی هر المنتی قرار بگیرن باعث میشه اون قسمت پرینت نشه ! ولی با توجه به اینکه دست بردن توی کدهای صفحات جوملایی باعث بوجود دردسر میشه ، بهترین روش اینه که ما محتویاتی که میخوایم پرینت بشه رو داخل یک div بزاریم و بعد یک دکمه تعریف کنیم و بگیم با کلیک روی این دکه فقط اون div رو پرینت کن !

اینهم روش پرینت:

1- به قسمت طرح بندی فرم میریم و ایجاد طرح خودکار رو غیر فعال میکنیم تا به ما اجازه بده به کدهای طرح بندی دسترسی داشته باشیم!

نکته مهم : اینکار رو در آخر و وقتی که فرمتون رو به صورت دلخواه طراحی کردید انجام بدین ! در آینده آموزش ساخت یک فرم با ظاهر دلخواه رو قرار میدم.

سپس از داخل کد ها باید دنبال جایی باشیم که محتویات اون محل نمایش ما قرار داره ! 

من اسم Preview Field رو انتخاب کردم بنابراین دنبال بلوک مربوط به این اسم میگردم. چیزی که پیدا کردم اینه: (طرح بندی فرم من بر اساس div بود - شاید فرم شما با table باشه)

<div class="rsform-block rsform-block-preview-field">
		<div class="formControlLabel">{Preview Field:caption}</div>
		<div class="formControls">
		<div class="formBody">{Preview Field:body}<span class="formValidation">{Preview Field:validation}</span></div>
		<p class="formDescription">{Preview Field:description}</p>
		</div>

((در اموزش بعدی این موارد رو کامل توضیح میدم و یک فرم به این شکل میسازیم : نمونه))

{Preview Field:body} در این قسمت بدنه یا متن اصلی ما قرار داره ! بعد از اینکه کد های مروبوط به پیش نمایش اجرا بشه محتویات (body) فیلد نمایش ما میشه اون متنی که قرار پرینت بشه ! بنابراین ما این قسمت رو داخل یک div مجزا قرار میدیم تا فقط همین قسمت پرینت بشه:

<div id="divPrint"> /* شروع محل پرینت */
<div class="formBody">{Preview Field:body}<span class="formValidation">{Preview Field:validation}</span></div>
</div>	/** خاتمه محل پرینت **/

2- حالا دکمه ای که قراره با اون پرینت گرفته بشه رو اضافه می کنیم ! من دکمه رو داخل فیلد نمایش قرار میدم:

11.png.78cbf0091126ef0ec40f665b1ac91c82.png

کد :

<a class="w3-btn" id="btnPrint" name="btnPrint" onclick="printDiv('divPrint')">چاپ </a>

3- حالا کدهای جاوا برای عملیات پرینت رو مینویسیم ! کد های جاوا در rsform در این قسمت هستند:

6.png.c026feb1c747505bd4fd328133afb450.png

 

کد زیر رو وارد میکنیم: (در ادامه کدهای قبلی که مروبط به پیش نمایش  بود)

<script type="text/javascript">
function printDiv(id) {
    var printContents = document.getElementById(id).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}
</script>

این هم نتیجه کار

12.png.3daf69656d8cc47bec9f6e57eb5898a8.png

13.thumb.png.951d9d0aec1425d0f93435573277b917.png

 

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

":"اللهم عجل لویک الفرج":"

10.png

2 کاربر پسند شده

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش html و css آموزش لاراول آموزش cPanel آموزش php آموزش سئو وردپرس آموزش امنیت وردپرس آموزش وردپرس آموزش فرم ساز RSform آموزش سئو جوملا آموزش فروشگاه ساز Hikashop آموزش فروشگاه ساز ویرچومارت آموزش طراحی سایت آگهی تبلیغاتی آموزش امنیت جوملا آموزش طراحی سایت فروش فایل آموزش طراحی قالب ریسپانسیو با Helix آموزش جوملا 3 آموزش ساخت ربات دکمه ی شیشه ای آموزش ساخت ربات همکاری در فروش آموزش ساخت ربات جذب ممبر آموزش ساخت ربات ضد اسپم آموزش ساخت ربات پیوست فایل سورس ربات مدیر گروه | ربات مدیر گروه همسریابی

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

فک کنم علاقه ای برای فرم سازی کاربردی ندارند

پس نیازی به ادامه آموزش ها نیست ....

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

سلام

مطلب مفیدی بود. اتفاقا خیلی به درد میخوره ولی انگار سئو نشده. منم اتفاقی اومدم تو انجمن دیدم. 2 تا مشتری دارم که همچنین چیزی می خوان. خدا خیرت بده. 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
در در 12/16/2017 در 11:51، rezabaghaie گفته است :

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

فک کنم علاقه ای برای فرم سازی کاربردی ندارند

پس نیازی به ادامه آموزش ها نیست ....

دستت درد نکنه شاه پسر ممنون ولی چقدر تصمیم خوبی گرفتی دوستم - انقدر حساس نباش

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری