تركيب سلايد شو جاهز في دليل مواقع الفضيل الثالت slideshow

هذه هي آخر فكرة برمجية أنجزتها اليوم

دعونا الآن نطرح بعض الأسئلة و أول سؤال يطرح هو لماذ؟

إذن لماذا برمجت هذه الفكرة؟

1 - لوضع الإعلانات فيها،الخاصة والعامة،

2 - لأنها تعطي للموقع رونقا وجمالا خاصا،

إلى هذه اللحظة تبدو هذه الفكرة جيدة للموقع ،

وثاني أهم سؤال هو كيف؟

كيفية برمجة الفكرة؟

لو طرحت هذا السؤال فالجواب سهل جدا،

نحن نستعمل في برمجتنا بيئة عمل سي إس إس Bootstrap css framework

ففي هذه البيئة هناك سلايد شو جاهز و تستطيع تعديله كيفما شئت ويسمى carousel ،وإن كان لديك بعض العلم حول لغة الجافاسكريبت javascript فتق بنفسك عندما أقول لك أنه سهل جدا برمجة السلايد شو لو أردت ذلك ،أما الآن فإليكم كود Bootstrap carousel

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

في الكود التالي نضع صور و نصوص الإعلانات 

<div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div>

إذن كيف نقوم ببرمجة سكريبت يجلب بيانات الإعلانات ويضعها وسط الديف التي تحمل اسم الكلاس carousel-inner؟
وكالعادة الجواب سهل جدا ،لقد قمت بعمل الآتي :
1 - قمت بإنشاء مجلد و سميته carousel،
2 - قمت بإنشاء صفحة الإتش تي إم إل HTML ،ووضعت فيها الكود الأول ،
لماذا وضعته في صفحة خاصة؟
- حتى يسهل تعديله،
 - لكي لا يصبح الكود في الصفحة الرئيسية طويلا ،وبالتالي يكون سهل تعديل شيء ما،
3  - قمت بإنشاء مجلد و سميته items وأنشأت 3 ملفات JSON وعبئتها بالبيانات التالية يدويا،

{

"name":"دليل مواقع الفضيل الثالت",

"description":"أضف موقعك واكسب زوار حقيقيون و باك لنك وتحسين موقعك في محركات البحت وأليكسا",

"keywords":"أضف موقعك",

"link":"https://elfadil3.blogspot.com/",

"pic":"http://localhost/elfdalil/theme/mdls/img/elfadilbackgroud.jpg"

}

4 - برمجت الكود التالي

////////////////////////Slideshow Print items ///////////////////////////// function SlideShow(){ $items = glob("mdls/dalil/inc/carousel/items/*.json"); if(!empty($items)){ foreach ($items as $item) { $s_item = $this->HomejsDecode($item); $a=basename($item,".json"); if($a== 1){$a_item = "carousel-item active";}else{$a_item = "carousel-item";} echo ' <div class="'.$a_item.'"> <img src="'.$s_item["pic"].'" alt="'.$s_item["name"].'" style="width:100%;"> <div class="carousel-caption"> <a href="'.$s_item["link"].'" target="_blank"> <h3> '.$s_item["name"].'</h3> </a> <p> '.$s_item["description"].'</p> </div> </div> '; }} //////////////////////////////////////////////////////////////////////////// } //////////////////////////////////////////////////////////////////////////////

ماهي الصعوبات التي وجدتها؟
1 - الديف الأول الذي سنضع فيه نصوص و صور الإعلانات يجب أن يكون إسمه carousel-item active وباقي الديفات يجب أن تكون إسم كلاسها هو carousel-item ،وإلا فلن يعمل السلايد الشو،
لهذا إضطررت لابتكار طريقة تقوم بهذه العملية،
 - الملفات التي تحمل البيانات إسمها عبارة عن أرقام و أول ملف إسمه هو

1.JSON

و لأخد القيمة 1 فقط، استعملت الدالة basename وأضفت شرط لتخزين إسم الكلاس في المتغير

$a_item

التطوير المستقبلي للفكرة

1 - إنشاء صفحة لإضافة و تخزين بيانات الإعلان في مجلد items ،

2 - أسماء الملفات :  يتم حساب عدد الملفات ثم إضافة 1 للعدد ليكون إسم الملف الجديد،

وللحديث بقية...

الأفكار البرمجية حلل و ناقش

وإذا أردت معرفة أصل الحديث فشاهد التدوينة التالية

برمجة دليل مواقع بدون قاعدة بيانات MySQL

مواضيع قد تفيدك