بعد ان قمنا بتحميل البرامج اللازمه وتأكدنا من عملها بشكل ممتاز نبدأ في إنشاء تطبيقات بسيطه
تطبيق آله حاسبه !
نحتاج في هذا التطبيق إلى حقلين نصيين وخمسة أزرار (* / + - =) هذا كله مكتوب بلغه html في هذا الإطار يتم فصل اللغات يعني html في مجلد القوالب
C:\xampp\htdocs\urorbit_fw\template\urorbit
نقوم بإنشاء قالب ويكون بإمتداد .inc
القالب الرئيسي والذي ينفذ أولا هو index.inc
لنفتح هذا القالب
سنجد بعض الأكواد الخاصه بهذا الإطار وهي أكواد بسيطه ولكن مفيده جدا وتختصر الكثير وأهم مايميزها هو إغلاق الكثير من الثغرات المهمه
الكود إنكلود لجلب ودمج أي قالب موجود في مجلد القوالب , يعني بإمكاننا حذف جميع القوالب الموجوده وترك القالب الرئيسي كما في الصورة التاليه
للإبقاء على ترتيب الأكواد والملفات ننشئ ملف هيدر وفوتر بعد حذف الملفات القديمه كما فعلنا في الخطوة السابقه , وذلك بالضغط كليك يمين على المجلد الذي ننوي إنشاء ملف فيه وهو هنا مجلد القوالب الرئيسي يورأوربت
في ملف الهيدر
header.inc
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Urorbit FW - Demos </title>
[var:"css_compression"end var]السطر الأخير هو شيفره خاصه بإطار العمل تقوم بتظمين ملفات الستايل بدون أن نقوم بتظمينها بطريقه إعتياديه فهي تسهل العمل كثيرا وسنلاحظ ذلك في الأمثله القادمه
في ملف الفوتر نكتب
footer.inc
[var:"js_compression"end var] </body> </html>
في السطر الأول شيفره لتظمين ملفات الجافاسكريبت
نبدأ الآن بكتابة تطبيقنا الصغير
أولا تظمين ملف الهيدر والفوتر في القالب الرئيسي
[include:"header.inc"end include] هنا الكود الخاص بنا html [include:"footer.inc"end include]
الآن نقوم بكتابه كود لإنشاء حقلين نص وخمسة أزرار كما ذكرنا سابقا مع نموذج والشيفر تصبح كما يلي
[include:"header.inc"end include] <form method="post"> <label for="n1">الرقم الأول</label> <input id="n1" name="n1"/> <label for="n2">الرقم الثاني </label> <input id="n2" name="n2"/> <br/> <button name="plus" type="submit">+</button> </form> [include:"footer.inc"end include]
سنكتفي مبدئيا بعمليه الجمع ... بعد حفظ العمل نذهب إلى موقعنا لنرى التالي
موقعنا على هذا الرابط
الآن سنقوم ببرمجه عمليه الجمع ..كود بي أتش بي , وأكواد البي أتش بي في هذا الإطار يتم وضعها في مجلد الإضافات داخل أي مجلد نريد , نذهب إلى مجلد الإضافات وننشئ مجلد بإسم mywork وداخل هذا المجلد ننشئ ملف بإسم index.php وأي كود سيتم وضعه داخل هذا الملف سيتم تنفيذه فورا
وسم إغلاق شيفرة بي أتش بي يفضل حذفه (الذي عليه دائره) لن يتأثر الكود إذا تركت وسم بي أتش بي دون إغلاق
الآن نحذف التعليقات ونكتب الكود الخاص بنا , سنسأل هل تم إرسال الرقم الأول والرقم الثاني ؟ الرقم الأول إسمه n1 والثاني n2
لن نضطر لكتابه إسم المتغير كما يلي :
$_GET[n1] or $_POST[n1]
فإطار العمل يقوم بفلترة جميع المتغيرات القادمه وماعليك سوى إستدعاء المتغير بالطريقه البسيطه
$n1
إذن الكود يصبح
<?php
if($n1 && $n2){
$result_mywork="n1=$n1 and n2=$n2";
}هنا سألنا إذا هناك قيمه في الرقم الأول وقيمة في الرقم الثاني إذن قم بجعل المتغير نتائج عملي (result_mywork) تساوي الرقم الاول والرقم الثاني , لاحظ لم نقم بطباعه الناتج فورا لأن هذا يعني عدم فصل اللغات والنتيجه ستكون مشاكل في التصميم .. إذا كيف يتم طباعه النتيجه؟
هناك شيفره خاصه بالإطار تقوم بطباعه اي متغير في مكان وجود هذه الشيفره وهي كالتالي
[var:"result_mywork"end var]
لاحظ كتبنا المتغير بدون علامة الدولار $
الآن تصبح صفحة القالب الرئيسي كما يلي
[include:"header.inc"end include] <form method="post"> <label for="n1">الرقم الأول</label> <input id="n1" name="n1"/> <label for="n2">الرقم الثاني </label> <input id="n2" name="n2"/> <br/> <button name="plus" type="submit">+</button> </form> [var:"result_mywork"end var] [include:"footer.inc"end include]
نذهب إلى موقعنا ونرى النتائج بعد إضافه رقمين
الآن نقوم بالرجوع إلى كود php ونسأل سؤال آخر ... على ماذا تم الضغط + أو - !!
ليصبح الكود كما يلي
<?php
if($n1 && $n2){
if(isset($plus))
$result_mywork="$n1 plus $n2 = ".($n1+$n2);
}بالتوفيق للجميع وإلى اللقاء في الدرس القادم بإذن الله
