چهارشنبه, 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

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

نوشتن دیدگاه


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

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

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

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

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

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

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

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

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

ورود

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

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

آموزش نحوه بازیابی Contact و شماره های حذف شده از تلگرام

حتما برای شما هم پیش آمده که یه نفر رو از لیست دوستانتان در تلگرام حذف یا Delete کنید و بعد بخواهید دوباره اون رو بر گردونید اما ندونید که چطوری باید این کار بکنید. اما واقعا اگه یه نفر را در تلگرام حذف کنیم بعدا چطوری میتونیم دوباره اون رو به contact تلگراممون بر گردونیم؟ اگه جواب این سوال میخواهید با این آموزش همراه باشید.

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

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

Windows Phone People

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

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

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