صمم موقعك بإستخدام نظام القوالب
مقدمة
يعلم الجميع وخصوصاً مطوري المواقع أهمية نظام القوالب والذي أنتشر انتشاراً واسعاً لما له من فوائد كثيرة . حيث يتم باستخدام هذه الطريقة فصل الشفرة البرنامج عن شفرة HTML بمعنى آخر فصل البرنامج عن التصميم . و
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا بدورة يسهل عملية تغيير التصميم بدون المساس بمحتوى الشفرة . وكذلك يسهل هذه العملية عما لو كان التصميم مدمج مع شفرة البرنامج .
لقد قرأت في
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا المنتدى موضوع عن كيفية استخدام القوالب في تصميم المواقع وقام بعض الأعضاء مشكورين بإفادة السائل واشاروا عليه بإستخدام كلاس
://shapes.gulfson.com" onmouseover="this.href='#';"> خاص بهذه المهمة
://shapes.gulfson.com" onmouseover="this.href='#';"> اسمه FastTemplate
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، ولقد قمت شخصياً بتحميل
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا الكلاس ولكن لم استطع التعامل معه لتعقيده وبدأت بالبحث عن كلاسات
://search.gulfson.com" onmouseover="this.href='#';"> أخرى
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، حتى وجدت المطلوب و
://archive.gulfson.com" onmouseover="this.href='#';"> هو مجموعه تحتوي على ثلاث كلاسات أحدهم للتاريخ والآخر لإرسال البريد والثالث
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( و
://archive.gulfson.com" onmouseover="this.href='#';"> هو موضوعنا هنا )
://shapes.gulfson.com" onmouseover="this.href='#';"> خاص بالقوالب .
أولاً قم بتحميل
الملف بزيارة الموقع
://action.gulfson.com" onmouseover="this.href='#';"> ال
://shapes.gulfson.com" onmouseover="this.href='#';"> خاص به
://www.gulfson.com/vb/?gsr=http
://vlib.activefish.com/download/" target="_blank"> بالضغط هنا
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، اسم
الملف vLIB_3-0-10.zip .
قم بفك ضغط
الملفات بأي مجلد من اختيارك
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، ستجد ملف بإسم vlibIni.php-dist قم بتغيير
://shapes.gulfson.com" onmouseover="this.href='#';"> اسمه إلى vlibIni.php
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ،
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا
الملف يحتوي على متغيرات
://shapes.gulfson.com" onmouseover="this.href='#';"> خاصة بالقوالب و
://dir.gulfson.com" onmouseover="this.href='#';"> قيم إفتراضية لها
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( لا تقم بتغيير أي من تلك المتغيرات ) .
الآن لنقم بتصميم موقع بسيط يحتوي على نظام القوالب
:
1- انشئ مجلد جديد وليكن
://shapes.gulfson.com" onmouseover="this.href='#';"> اسمه mysite .
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> 2- انسخ المجلد
://action.gulfson.com" onmouseover="this.href='#';"> ال
://shapes.gulfson.com" onmouseover="this.href='#';"> خاص بالمجموعه
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( Vlib ) داخل
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا المجلد
://action.gulfson.com" onmouseover="this.href='#';"> بحيث يصبح عنوانه mysite/vilb .
3- تأكد من ان المجلد السابق
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( Vlib ) يحتوي على جميع المجلدات و
الملفات
://action.gulfson.com" onmouseover="this.href='#';"> ال
://shapes.gulfson.com" onmouseover="this.href='#';"> خاصة بالمجموعه .
4- انشئ مجلد جديد داخل مجلد mysite لحفظ القوالب به وليكن
://shapes.gulfson.com" onmouseover="this.href='#';"> اسمه templates .
إنشاء ملف القالب
سنقوم الآن بإنشاء القالب للصفحة الرئيسية
:
1- انشئ ملف جديد بإسم mainpage.tbl
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( يمكنك اختيار أي امتداد غير tbl ولكن يفضل استخدام الإمتداد اللذي تختاره لجميع ملفات القوالب حتى تتفادى المشاكل ) مع التأكد من حفظ
الملف داخل المجلد templates .
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> 2- ضع هذه الشفرة داخل ملف القالب
:
:20px; margin-top
:5px">
: 0px;
padding : 6px;
border : 1px inset;
width : 520px;
height : 322px;
text-align : left;
overflow : auto"><html dir=rtl>
<head>
<title> ://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var ://pattern.gulfson.com" onmouseover="this.href='#';"> name='title'></title>
</head>
<body bgcolor=" ://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var name='bg'>">
://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var name='msg'>
<table border="1">
<tr>
<td>رقم المستخدم</td>
<td>اسم المستخدم</td>
</tr>
<tmpl_loop name='loop1'>
<tr>
<td> ://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var name='userid'></td>
<td> ://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var name='username'></td>
</tr>
</tmpl_loop>
</body>
</html>
- شرح الكود السابق
:
://redirect.gulfson.com" onmouseover="this.href='#';">
://www.gulfson.com" onmouseover="this.href='#';"> كما تلاحظون بأن الكود السابق
://archive.gulfson.com" onmouseover="this.href='#';"> هو كود html عادي جداً
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، ولكن هناك اوسمه
tags جديده وهي
:
1-
://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var naem='VAR_NAME'>
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> 2- <tmpl_loob name='LOOP_NAME'>
3- </tmpl_loop>
الوسم الأول
://shapes.gulfson.com" onmouseover="this.href='#';"> خاص بالمتغيرات حيث سيتم إستبداله ب
://dir.gulfson.com" onmouseover="this.href='#';"> قيمة معينه . مثل title سيتم إستبداله ب
://dir.gulfson.com" onmouseover="this.href='#';"> قيمة title
://redirect.gulfson.com" onmouseover="this.href='#';">
://www.gulfson.com" onmouseover="this.href='#';"> كما سنشاهده بعد قليل .
الوسم الثاني
://shapes.gulfson.com" onmouseover="this.href='#';"> خاص بإنشاء دورة تكرارية أما الوسم الثالث ف
://archive.gulfson.com" onmouseover="this.href='#';"> هو لإنهاء الدورة التكرارية
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، بمعنى أن ما يكتب
://redirect.gulfson.com" onmouseover="this.href='#';"> بين الوسم الثاني والثالث سيتم تكرارهما على حسب عدد مرات التكرار المطلوبه
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( في مثالنا
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا سيتم تكرار كتابة رقم المستخدم و
://shapes.gulfson.com" onmouseover="this.href='#';"> اسمه حتى
://torrent.gulfson.com/games/" onmouseover="this.href='#';"> تنتهي البيانات ) .
إنشاء ملف PHP
الآن لننشئ الصفحة الرئيسية وليكن
://shapes.gulfson.com" onmouseover="this.href='#';"> اسمها index.php واحفظها في المجلد الرئيسي للموقع
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( mysite )
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، بعد ذلك قم بفتح
الملف index.php وضع هذه الشفرة بداخله
:
:20px; margin-top
:5px">
: 0px;
padding : 6px;
border : 1px inset;
width : 520px;
height : 578px;
text-align : left;
overflow : auto"><?
// إضافة ملف كلاس القوالب إلى ://shapes.gulfson.com" onmouseover="this.href='#';"> هذا الملف
include ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ("vlib/vlibTemplate.php");
// جلب ملف القالب المطلوب التعامل معه
$tmpl = new vlibTemplate ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ("templates/mainpage.tbl");
// يقوم السطر التالي بتغيير وسم عنوان الصفحة إلى النص المحدد
$tmpl->setVar ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('title', 'عنوان الصفحة');
// إضافة رسالة إلى القالب
$tmpl->setVar ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('msg', 'مرحباً بك ://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، هذه معلومات اسماء المستخدمين');
// لنفترض بأن لديك مصفوفه تحتوي على ارقام واسماء المستخدمين
$rows = array ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ();
$rows[] = array ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('userid' => 1, 'username' => 'Mohammed');
$rows[] = array ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('userid' => 2, 'username' => 'Ali');
$rows[] = array ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('userid' => 3, 'username' => 'Khaled Al-Omar');
$rows[] = array ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('userid' => 4, 'username' => 'Saud Ahmad');
$rows[] = array ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('userid' => 5, 'username' => 'Mobarak');
$rows[] = array ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('userid' => 6, 'username' => 'Hashem');
// ://www.gulfson.com" onmouseover="this.href='#';"> بدء الدورة مع تحديد الإسم الذي اخترناه في القالب
$tmpl->newLoop ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ('loop1');
foreach ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ($rows as $row) {
// إضافة بيان واحد إلى القالب
// سيتم التكرار حتى ://torrent.gulfson.com/games/" onmouseover="this.href='#';"> تنتهي البيانات من المصفوفه
$tmpl->addRow ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ($row);
}
// إنهاء الدورة وإدخال البيانات إلى القالب
$tmpl->addLoop ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ();
// طباعة القالب مع المحتويات الجديدة
$tmpl->pparse ://cinema 4d.gulfson.com" onmouseover="this.href='#';"> ();
?>
- شرح الكود السابق
:
1- يتم في السطر الأول جلب ملف الكلاس الذي سيتم استخدامه في تغيير
://dir.gulfson.com" onmouseover="this.href='#';"> قيم المتغيرات في القالب .
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> 2- بعد ذلك يتم جلب ملف القالب المراد استخدامه .
3- يتم تعيين
://dir.gulfson.com" onmouseover="this.href='#';"> قيمة "عنوان الصفحة" بدل الوسم
://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var name='title'> .
4- بـعد ذلـك يتـم تعيـين
://glitter.gulfson.com" onmouseover="this.href='#';"> قيـمة "مرحباً بك
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، هذه معلـومات اسماء المتسخدمين" بـدل الوسـم التالي
://shapes.gulfson.com" onmouseover="this.href='#';"> <tmpl_var name='msg'> .
5- يقوم النظام ب
://www.gulfson.com" onmouseover="this.href='#';"> بدء الدورة .
6- يتم تعيين ال
://dir.gulfson.com" onmouseover="this.href='#';"> قيم المدرجة في المصفوفة داخل الدورة
://services.gulfson.com" onmouseover="this.href='#';"> الموجودة في القالب
://action.gulfson.com" onmouseover="this.href='#';"> بحيث تتكرر حتى نهاية البيانات .
7- في السطر الأخير يتم طباعة القالب بعد تغيير
://dir.gulfson.com" onmouseover="this.href='#';"> قيم المتغيرات ليظهر بشكله النهائي .
عند فتح الصفحة الرئيسية index.php سيتم جلب القالب وتغيير
://dir.gulfson.com" onmouseover="this.href='#';"> قيم المتغيرات وطباعة الشكل النهائي
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( قم بفتح مصدر
الملف الناتج واطلع على شكل شفرة html
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، ستلاحظ بأنها نفس
://services.gulfson.com" onmouseover="this.href='#';"> الموجودة بالقالب ما عدا تكرار الأوسمه
://action.gulfson.com" onmouseover="this.href='#';"> ال
://shapes.gulfson.com" onmouseover="this.href='#';"> خاصة بالجدول بعدد ارقام واسماء المتسخدمين ) .
يوجد عدة أمثله
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( للتاريخ
://torrent.gulfson.com/games/" onmouseover="this.href='#';"> والبريد والقوالب ) مرفقه مع المجموع تجدونها في مجلد vlib/examles أرجو الإطلاع عليها ومحاولة فهمها وتطبيقها
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( خصوصاً أمثلة القوالب )
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، كذلك يوجد شرح وافٍ لأنواع المتغيرات والخواص
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( باللغة الإنجليزية ) في الموقع الرسمي للمجموعه وعنوانه
://archive.gulfson.com" onmouseover="this.href='#';"> هو
://www.gulfson.com/vb/?gsr=http
://vlib.activefish.com" target="_blank">http
://vlib.activefish.com .
وفي الختام اتمنى من الجميع
الاستفادة من
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا الدرس
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، وفي حال وجود اي استفسار فأرجو عدم التردد في طرحه هنا حتى تعم الفائدة للجميع .
وأعتذر من الجميع إن كان الدرس غير واضح او غير مف
://archive.gulfson.com" onmouseover="this.href='#';"> هوم
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، فهذه اول مرة اكتب فيها درساً ك
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا .
://cinema
4d.gulfson.com" onmouseover="this.href='#';"> ( سامحوني على القصور )
://www.gulfson.com/vb/" onmouseover="this.href='#';"> ، وفي النهاية لا تنسونا من دعائكم في
://shapes.gulfson.com" onmouseover="this.href='#';"> هذا الشهر الفضيل
://brush.gulfson.com" onmouseover="this.href='#';"> ..
المصدر
:
://www.gulfson.com/vb/?gsr=http
://www.phpvillage.org/p.php?page=0&idp=6
4" target="_blank">قرية الـ php