راهبران

سلام خدمت دوستان. با توجه به امکانات خوب RSform اکثرا دوستان ازین فرم ساز استفاده میکنن. در این آموزش قصد دارم تا با چند خط کد نویسی ساده یک پیشنمایش از فرم ایجاد کنیم و در آخر به صورت حرفه ای اون رو پرینت کنیم ! البته اینو بگم که این آموزش ترکیبی از چند آموزشی هست که به صورت رایگان در اینترنت وجود داره و من فقط کنار هم قرار دادمشون .این مورد خیلی بدرد سایت های شرکتی و رسمی میخوره به عنوان مثال می تونن در فرم ثبت نمایندگی یک فرم پیش قرارداد به صورت رسمی طراحی کنن (نمونه) پیش نیاز: داشتن RSFORM دانش HTML برای ایجاد جدول و ساخت بلوک های span و div دانش CSS برای زیباسازی فرم دانش javascript برای کدنویسی پیش نمایش فرم و پرینت دانش PHP برای کد نویسی بخش پیشنمایش همینطور که میدونید یکی از قابلیت های بسیار خوب RSFORM اینه که شما میتونید داخل فیلد های متنی از کد های HTML استفاده کنید ! بعنوان مثال میتونید متن عنوان یک المنت رو بولد کنید و .... همچنین قابلیت دیگه RSFORM ایجاد فرم های چند صفحه ای هستش که به وسیله اون میتونید برای دقت و زیبایی خدمات ارائه شده فرم های در چند صفحه ایجاد کنید . نکته مهم : برای داشتن پیش نمایش و پرینت حتما باید فرمتون فقط دو صفحه ای باشه ! در صفحه اول اطلاعات دریافت بشه و در صفحه بعد اطلاعات نمایش داده بشه. نکته مهم : با توجه به اینکه چند ترجمه برای RSFORMوجود داره بنابراین ممکنه گزینه هایی که مینویسم یا توی عکس میبینید با نسخه ترجمه شما تفاوت داشته باشه ! سعی میکنم جوری عکس بگیرم که از روی عکس این مشکل حل بشه. نکته مهم : این آموزش دارای دو بخشه که در بخش اول فقط با فیلد های متنی کار میکنیم و در بخش دوم بقیه موارد رو اضافه میکنیم. بخش اول : 1- یک فرم خیلی ساده طراحی میکنیم که قراره از کاربر مشخصات فردی دریافت کنه: نکته : تعیین مور دنیاز و معتبر سازی رو به دلخواه میتونید انجام بدید و تاثیری رو کار نداره 2- حالا ما باید بریم صفحه بعد و اطلاعات رو نمایش بدیم - پس حالت چند صفحه ای رو انتخاب میکنیم. 3- سپس به این صورت یک دکمه ایجاد میکنیم 4- برای نمایش دادن اطلاعات از "متن معمولی" استفاده میکنیم . روش کار به این صورته که متن مورد نیاز (قرارداد ، پیام تشکر ، پیش فاکتور و ...)رو مینویسیم و بعد به وسیله کد نویسی محتوای فرم قبل رو به اون اضافه میکنیم. برای کد نویسی ما از تابع innerHTML استفاده میکنیم ، بنابراین متن داخل "متن معمولی" رو به این صورت مینویسیم: همینطور که میبینید ما جایی که قراره دیتا های دریافتی از کاربر رو نمایش بدیم از کد زیر استفاده کردیم <span id="nameP">.</span نکته مهم : حتما یادتون باشه که تگ span رو ببندید ! من خوردم خیلی وقتی فراموش میکنم ! شما میتونید به وسیله htmlوcss یه فرم به دلخواه خودتون طراحی کنید و هرجا که لازم بود اطلاعات نمایش داده بشه از قطعه کد بالا استفاده کنید 5- حالا ما میخوایم به وسیله کد نویسی اون متن پیش فرض داخل span رو تغییر بدیم. بنابراین به این قسمت میریم: و در قسمت 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- خب حالا نیاز به کدی داریم که تابع بالا رو اجرا کنه بنابراین در قسمت : قسمت مربوط به کدهای زمان نمایش (فراخوانی اسکریپت هنگام نمایش فرم) (باکس اول) کد زیر رو وارد میکنیم: $formLayout = str_replace('rsfp_changePage(','preV(',$formLayout); در کد بالا میگه که در زمان تغییر صفحه تابع preV رو اجرا کن و ظاهر و محتویات فرم رو مجددا بار گذاری کن ! (این توضیح به زبان ساده بود) 7- نتیجه کار - همینطور که میبینید پیش نمایش فرم ما کار کرد ! خب حالا میخوایم کاری کنیم که کاربر از این فرم بتونه پرینت بگیره ساده ترین روش اینه که روی صفحه 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- حالا دکمه ای که قراره با اون پرینت گرفته بشه رو اضافه می کنیم ! من دکمه رو داخل فیلد نمایش قرار میدم: کد : <a class="w3-btn" id="btnPrint" name="btnPrint" onclick="printDiv('divPrint')">چاپ </a> 3- حالا کدهای جاوا برای عملیات پرینت رو مینویسیم ! کد های جاوا در rsform در این قسمت هستند: کد زیر رو وارد میکنیم: (در ادامه کدهای قبلی که مروبط به پیش نمایش بود) <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> این هم نتیجه کار ممنون از توجهتون ! آموزش ما تموم شد ! اگه سوالی هست توی همین تاپیک بنده در خدمتم ! ":"اللهم عجل لویک الفرج":"