چهارشنبه, 15 ارديبهشت 1395 22:51

پردازش داده های Web Component در PHP به وسیله PrimeElements

نوشته شده توسط
این مورد را ارزیابی کنید
(0 رای‌ها)

نکته ها و ترفندهای برنامه نویسی

PrimeElements یک کتابخانه ی برافزا (add-on library) برای PrimeUI (مجموعه ای از ویجب های جاوا اسکریپت مبتنی بر جی کوئری) است که صرفا از فناوری عناصر سفارشی یا Custom Elements استفاده می کند. PrimeElements با فراهم آوردن یک کیت توسعه سریع نرم افزار (Rapid Application Development) مبتنی بر فناوری های استاندارد Web Components باعث می شود تا میزان کار لازم برای  ساختن واسط های کاربری زیبا و کاربردی به اندازه بسیار زیادی کاهش یابد. پس در واقع PrimeElements یک کتابخانه WebComponents برای ساختن واسط های کاربری (User Interfaces) با استفاده از عناصر HTML سفارشی است.

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

جهت کار با PrimeElements می بایست از کتابخانه های زیر استفاده کنید.

PrimeUI - صفحه دانلود ، دانلود نسخه 4.1.9 از سرور بهگذر

JQuery - صفحه دانلود ، دانلود نسخه 1.12.3 از سرور بهگذر

JQueryUI - صفحه دانلود ، دانلود نسخه 1.11.4 از سرور بهگذر

FontAwsome - صفحه دانلود ، دانلود نسخه 4.6.1 از سرور بهگذر

X-Tag + Polyfills - صفحه دانلود ، دانلود نسخه از سرور بهگذر

بعد از اینکه کتابخانه های بالا را دانلود کردید، فایل های فشرده (zip) را اکسترکت کنید. سپس در فایل HTML موارد زیر را include کنید.

<head>                                    
    <link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="/jquery-ui/jquery-ui.css" />
    <link rel="stylesheet" href="/primeui/primeui.min.css" />
    <link rel="stylesheet" href="/primeui/themes/glass-x/theme.css" />
    <script type="text/javascript" src="/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="/jquery-ui/jquery-ui.js"></script>
    <script type="text/javascript" src="/primeui/primeui.min.js"></script>
    <script type="text/javascript" src="/x-tag-core.min.js"></script>
    <script type="text/javascript" src="/primeui/primeelements.js"></script>    
</head>

در این مرحله با بعضی از کامپونتت های مفید PrimeElements آشنا می شویم.

1) Fieldset کامپوننتی است که می توانیم از آن برای گروهبندی کردن سایر کامپوننت ها استفاده کنیم. همچنین با استفاده از خاصیت toggle امکان باز و بسته شدن هم دارد.

<p-fieldset toggleable>
<legend>Personal details</legend>
     Content
</p-fieldset>

2) InputText افزونه ای است به عنصر InputText استاندارد

<input id="name" name="name" type="text" is="p-inputtext" size="20" placeholder="Name" required autofocus />

3) Password افزونه ای است به عنصر InputText استاندارد که از آن برای فیلد کلمه عبور و همچنین نمایش شاخص قدرت کلمه عبور استفاده می کنیم.

<input id="security" name="security" type="password" is="p-password" size="20" placeholder="Provide your security code" required/>

4) Dropdown یک ویجت پیشرفته است که از آن برای انتخاب یک آیتم از یک مجموعه استفاده می کنیم.

<p-dropdown id="country" name="country" effect="fade" filter>
            <option value="Romania">Romania</option>
            <option value="England">England</option>
            <option value="Ireland">Ireland</option>
            <option value="USA">USA</option>
            <option value="France">France</option>
            <option value="Spain">Spain</option>
            <option value="Finland">Finland</option>
</p-dropdown>

5) TextArea افزونه ای به عنصر TextArea استاندارد است که خواصی مثل autoComplete، تغییر اندازه خودکار، شمارنده کاراکترهای باقی مانده و ... به آن افزوده شده.

<textarea rows="3" cols="30" is="p-textarea" autoresize>
       Shipping & Delivery
</textarea>

6) RadioButton افزونه ای به عنصر RadioButton استاندارد است که قابلیت پوسته گذاری به آن اضافه شده.

<input id="visa" name="card" type="radio" value="Visa" is="p-radiobutton"/>

7) DatePicker یک عنصر اولیه برای JQuery UI DatePicker است و با استفاده از تگ p-datepicker می توانیم آن را تعریف کنیم.

<p-datepicker showOn="button"></p-datepicker>

8) Button افزونه ای به Button استاندارد است و با استفاده از خصوصیت is="p-button" فعال می شود.

<button is="p-button" icon="fa-pencil-square-o" type="submit" style="margin-top:5px;">Register</button>

اکنون با استفاده از عناصر بالا می خواهیم یک فرم ثبت سفارش خرید کتاب بسازیم. کد HTML این فرم به شرح زیر خواهد بود.

<body>
    <h2><p style="color:darkblue"><b>Book Order Form</b></h2>
        <div class="ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
                <div class="ui-grid-col-4">
                    <form  action="./process.php" method="post">
                        <p-fieldset toggleable>
                            <legend>Personal details</legend>  
 
                            <div class="ui-grid ui-grid-responsive">
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-4">Name:</div>
                                    <div class="ui-grid-col-4">
                                        <input id="name" name="name" type="text" is="p-inputtext" size="20" placeholder="Name"
                                               required autofocus />                                   
                                    </div>
                                </div>
<div class="ui-grid-row">
                                    <div class="ui-grid-col-4">Email:</div>
                                    <div class="ui-grid-col-4">
                                        <input id="email" name="email" type="text" is="p-inputtext" size="20" placeholder="email"
                                               required autofocus />                                   
                                    </div>
                                </div>
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-4">Password:</div>
                                    <div class="ui-grid-col-4">
                                        <input id="security" name="security" type="password" is="p-password" size="20"
                                               placeholder="Provide your security code" required/>                                       
                                    </div>
                                </div>              
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-4">Country:</div>                   
                                    <div class="ui-grid-col-4">
                                        <p-dropdown id="country" name="country" effect="fade" filter>
                                            <option value="Romania">Romania</option>
                                            <option value="England">England</option>
                                            <option value="Ireland">Ireland</option>
                                            <option value="USA">USA</option>
                                            <option value="France">France</option>
<option value="Spain">Spain</option>
<option value="Finland">Finland</option>
                                        </p-dropdown>
                                    </div>
                                </div>
                            </div>
                        </p-fieldset>
                       
                        <p-fieldset toggleable>
                            <legend>Select book to purchase</legend>
                            <div class="ui-grid ui-grid-responsive">
                               <div class="ui-grid-row">
                                    <div class="ui-grid-col-4">Books:</div>                   
                                    <div class="ui-grid-col-4">
                                        <p-dropdown id="book" name="book" effect="fade" filter>
    <option value="Omnifaces">Anghel Leonard: Mastering OmniFaces</option>
                                            <option value="Mastering">Anghel Leonard: Mastering JavaServer Faces 2.2</option>
                                            <option value="Nio">Anghel Leonard: Pro Java 7 Nio.2 </option>
                                            <option value="Cookbook">Anghel Leonard: Jsf 2.0 Cookbook </option>
                                            <option value="Jboss">Anghel Leonard: Jboss Tools 3 Developers Guide </option>
                                            <option value="Mongodb">Anghel Leonard: Pro Hibernate and Mongodb </option>
                                        </p-dropdown>
                                    </div>
                                </div>  
<div class="ui-grid-row">
                                    <div class="ui-grid-col-4">Special Instructions:</div>                   
                                    <div class="ui-grid-col-4">
                                        <textarea rows="3" cols="30" is="p-textarea" autoresize>Shipping & Delivery</textarea>
                                    </div>
                                </div> 
                            </div>       
                        </p-fieldset>
 
<p-fieldset toggleable>
                            <legend>Card type</legend>
                            <div class="ui-grid ui-grid-responsive">
                                <div class="ui-grid-row">                           
                                    <div class="ui-grid-col-1"><input id="visa" name="card" type="radio" value="Visa" is="p-
                                         radiobutton"/></div>
                                    <div class="ui-grid-col-11"><label for="visa" class="ui-widget">VISA</label></div>
                                </div>
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-1"><input id="mastercard" name="card" type="radio" value="Mastercard"
                                         is="p-radiobutton"/></div>
                                    <div class="ui-grid-col-11"><label for="mastercard" class="ui-widget">Mastercard</label></div>
                                </div>
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-1"><input id="amex" name="card" type="radio" value="AMEX" is="p-
                                         radiobutton"/></div>
                                    <div class="ui-grid-col-11"><label for="amex" class="ui-widget">AMEX</label></div>
                                </div>
<div class="ui-grid-row"><br />
<div class="ui-grid-col-4">Card No:</div>
                                    <input id="name" name="name" type="text" is="p-inputtext" size="20" placeholder="card number"
                                           required autofocus />            
</div> 
<div class="ui-grid-row">
<div class="ui-grid-col-4">Expiration Date:</div>
                                    <div class="ui-grid-col-5"><p-datepicker showOn="button"></p-datepicker></div>           
</div>
                            </div>
                        </p-fieldset>
                        <button is="p-button" icon="fa-pencil-square-o" type="submit" style="margin-top:5px;">Register</button>                   
                    </form>   
                </div>
            </div>
        </div>
</body>

پردازش فرم با PHP 

حالا می خواهیم فایلی بسازیم و در آن داده های ارسال شده توسط فرم را با استفاده از PHP پردازش کنیم.  در این اسکریپت PHP بعضی از اطلاعات خرید را درون یک fieldset لیست می کنیم و تصویر و عنوان کتاب خریداری شده را به همراه سایر کتاب های موجود، درون یک  <p-galleria> نمایش می دهیم. فایل HTML به همراه اسکریپت PHP به شرح زیر خواهد بود.

<div class="ui-grid ui-grid-responsive">
   <div class="ui-grid-row">
     <div class="ui-grid-col-4">
<p-fieldset toggleable colapsed="true">
<legend>Purchase information</legend>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?><br>
 
<?php
 
   $image=array("0","1","2","3","4","5");
   $books=array("Anghel Leonard: Mastering OmniFaces","Anghel Leonard: Mastering JavaServer Faces 2.2",
   "Anghel Leonard: Pro Java 7 Nio.2","Anghel Leonard: Jsf 2.0 Cookbook","Anghel Leonard: Jboss Tools 3 Developers
   Guide","Anghel Leonard: Pro Hibernate and Mongodb");
   echo 'The book selected to purchase is:'.$books[$_POST["book"]]; 
   echo '</p-fieldset>';
   echo '</div></div></div>';
   echo '<p-galleria panelWidth="445" panelHeigh="313" autoplay="false">';
   echo '<ul>';
   echo '<li><img src="'.$_POST["book"].'.jpg" alt="'.$books[$_POST["book"]].'" title="Anghel Leonard"/></li>';
   foreach ($image as $v) {
   if($v<>$_POST["book"]){
       echo '<li><img src="'.$v.'.jpg" alt="'.$books[$v].'" title="Anghel Leonard"/></li>';}
       }
   echo '</ul>'; 
   echo '</p-galleria>';  
          ?>

خروجی کد بالا به صورت زیر خواهد بود 

 

همچنین بخوانید


کار کردن با رشته متن ها در PHP

تابع substr در PHP

تابع substr_replace در PHP

آموزش کار با پروتکل FTP در PHP

اعتبارسنجی داده ها در PHP

پردازش داده های Web Component در PHP به وسیله PrimeElements

بازدید 1246 بار آخرین ویرایش در چهارشنبه, 15 ارديبهشت 1395 22:57

اضافه کردن نظر


کد امنیتی
تازه سازی

جدیدترین های آندروید

جدیدترین های آموزش زبان فرانسوی

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

جدیدترین های صوتی

جدیدترین های ویندوزفون

جدیدترین های الگوریتم

جدیدترین های آموزش PHP

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

ورود

رضایت از بهگذر را به گوش گوگل برسانید
Web Analytics

بیشتر بخوانید

اضافه کردن ویجت های قفل صفحه نمایش روی گوشی Galaxy S4

ویجت های قفل صفحه نمایش را به آسانی می توان روی Galaxy S4 فعال کرد اما لازم است تا یکی دو تنظیمات اضافی را به این منظور اعمال کنید.

ولی برای نخستین بار سامسونگ گالاکسی S4 استفاده می کنید ممکن است به نظر برسد که ویجت های قفل صفحه نمایش در آن موجود نیست.

 قفل پیش فرض صفحه نمایش ویجتی از یک ساعت بزرگ همراه با متن "life companion" یا متن دیگری در بالای است. اما S4 بعنوان یک دستگاه مجهز به آندروید 4.2 پشتیبانی کاملی از ویجت های قفل صفحه نمایش دارد. موضوع این است که باید آنها را در تنظیمات قفل صفحه نمایش فعال کنید.

بیشتر بخوانید

بیشتر بخوانید

Windows 8 Ringtone

گاهی ممکن است پس از مدتی صدای زنگ (رینگتون ها) و یا صداهای هشدار تلفن شما برایتان یکنواخت و تکراری شود. این زمانی است که تصمیم میگیرید آنها را عوض کنید. به علاوه گاهی ممکن است تصمیم بگیرید اصلا صدای زنگ را قطع کنید و به اصطلاح گوشی را سایلنت کنید و یا آن را در وضعیت ویبره (لرزش) قرار دهید. دانستن نحوه ی تنظیم این تغییرات برای هر کسی که دارای یک گوشی موبایل مجهز به ویندوز فون 8 است مهم می باشد.

بیشتر بخوانید

رضایت از بهگذر را به گوش گوگل برسانید