درس] نظام smarty للمبتدئين

تاريخ التسجيل : 01/01/1970

السلام عليكم ,,,

كيفكم اخواني انشاء الله مبسوطين [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

انا من النوع اللي ما احب المقدمات و لا اجيدها عشان كذا رح ادخل في الموضوع علىطول [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

في الاول نظام smarty هو نظام يسمح بفصل برمجة الموقع عن التصميم عشان كل واحد له شغله لوحده

في البداية متطلبات العمل:-

1- اخر اصدار من نظام smarty للتحميل من المرفقات
2- سيرفر محلي لعمل الدرس مثل appserv او xampp او خادم الجمل على راحتك

بسم الله نبدا الدرس

1- في البداية نفك الضغط عن الملف Smarty-2.6.25.zip

2- بعد كذا نروح نسوي مجلد جديد اسمه مثلا smarty في السيرفر المحلي داخل مجلد www

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

3- بعدها نفتح مجلد Smarty-2.6.25 و ننسخ مجلد libs و نضعه داخل مجلد smarty اللي سويناه قبل شوي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

4- الان ننشئ مجلد باسم templates داخل مجلد smarty

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

5- اللحين نفتح مجلد libs لعمل بعض التعديلات البسيطة

في البداية ننشئ مجلد جديد داخل libs نعطيه الاسم SmartyCompiler
ملاحظة/ هذا المجلد يجب اعطاءه التصريح 777 في الموقع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الان نفتح ملف Smarty.class.php الموجود في مجلد libs لتعديل بعض الاشياء البسيطة
ملاحظة/ يمكنك فتح الملف باستخدام المفكرة او FrontPage او اي برنامج تحرير اخر

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

في السطر 82 تقريبا نقوم بالتعديل كما في الصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

6- اللحين نروح نفتح الفرونت بيج و نسوي كود بسيط يكون هيدر و كود اخر يكون فوتر و ايضا كود محتوى

و انا قمت بعمل الاكواد التالية

قالب header:

كود HTML:<html dir=rtl><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>شبكة عرب كوم</title><link rel="stylesheet" type="text/css" href="templates/style.css" /></head><div id="outside"><div id="header"><h1>شبكة عرب كوم</h1></div><div id="menu"><ul><li><a href="index.html">الرئيسية</a></li><li><a href="vb">المنتديات</a></li><li><a href="up">مركز التحميل</a></li><li><a href="prog">البرامج</a></li><li><a href="games">الالعاب</a></li><li><a href="vb/contactus.php">راسلنا</a></li></ul></div>قالب footer:

كود HTML:<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><div id="footer"><span id="footerlink"><a href="http://www.qyasi.com">تصميم قياسي</a></span><a href="http://www.3rbcom.co.cc" title="شبكة عرب كوم">شبكة عرب كوم</a></div>قالب home:

كود HTML:<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><div align="center"><table border="0" width="100%"><tr><td><p align="center"><b><font size="5">اهلا</font><font size="5"> و سهلا بك
في موقعنا المتواضع ... المعذرة الموقع مغلق للصيانة</font></b></td></tr></table></div>طبعا نحفظ جميع هذي الملفات بصيغة html داخل مجلد templates

اللحين نسوي ملف جديد اسمه styles.css و نحفظه داخل مجلد templates ايضا

كود HTML:body { margin: 0; padding: 0; font-size: 90%;}
#outside {width: 100%; margin: 0; padding: 0; background-color: #ffffff;}
hr {color: Silver; width: 90%; text-align: center;}
p{
padding: 3px;
margin: 0px;
font: normal .8em/1.3em Tahoma,arial;
}
h1{
margin: 2px;
padding: 0px;
font: bold 1.3em/1.5em arial,tahoma;
color: #FF8C00;
text-align: center;
}
h2{
margin: 5px 2px 5px 0px;
padding: 0px;
font: bold 1.1em/1.4em arial,tahoma;
color: #FF4500;
}
/*--------------بداية رأس الصفحة (البانر)------------*/
#header {
height: 80px;
margin: 0;
padding: 0px;
background-color: #A9DBFB;
width: 100%;
}
#header h1{
color: #FFA500;
margin: 0;
text-align: center;
font: bold 1.7em/80px Tahoma,arial;
}
/*---------------القائمة العلوية-------------*/
#menu {
padding: 0px;
background: #eee;
width: 100%;
height: 25px;
display: block;
margin: 0 0 13px 0;
}
#menu ul
{
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
#menu a
{
float: right;
text-align: center;
text-decoration: none;
font: bold .9em/25px tahoma,arial;
color: #191970;
background-color: #eee;
margin: 0px;
padding: 0 8px 0 8px;
}
#menu a:hover
{
color: #2728B1;
background-color: #f8f8f8;
}
#menu li
{
display:inline;
}
/*---------------بداية العمود الأيمن والقائمة اليمنى-------------*/
#col1
{
width: 20%;
background-color: #fff;
margin: 0 0 0 0;
float: right;
padding: 0px;
}
.sec
{
width: 100%;
height: 1.5em;
background: #708090;
font: bold 1em/1.5em tahoma,arial;
margin: 0;
padding: 0;
text-align: center;
color: #fff;
}
.nav ul
{
font: bold 1em/1.2em arial,tahoma;
padding: 0px;
margin: 0px;
list-style: none;
}
.nav il
{
margin: 0px;
padding: 0px;
}
.nav {
width: 100%;
margin: 0px;
background-color: #F0F0F0;
}
.nav a {
display: block;
width: 98%;
margin: 0px;
padding: 1%;
color: #1E90FF;
border-bottom: 1px solid White;
font-weight: bold;
text-align: right;
text-decoration: none;
}
.nav a:hover {
background: #FAFAFA;
color: #3C1FE6;
}
/*---------------بداية العمود الأوسط --------------*/
#col2
{
background-color: #fff;
margin: 0 20% 0 0;
padding: 5px;
text-align: right;
font: normal 1em/1.3em Tahoma,Arial;
}
#col2 a{
color: #7B68EE;
text-decoration: none;
}
#col2 a:hover{
text-decoration: underline;
}
/*---------------بداية ذيل الصفحة---------------*/
#footer {
clear: both;
font: bold .9em/2em Arial;
padding: 1px;
background-color: #eee;
color: #2F4F4F;
text-align: right;
}
#footerlink {float: left; margin-right: 5px;}
#footer a {color: #7B68EE;text-decoration: none;}
#footer a:hover {color: #1E90FF;text-decoration: underline;}

/*تصميم قياسي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] هذي اخر خطوة ان شاء الله و هي انشاء ملف index.php الصفحة الرئيسية

نضع الكود التالي:

كود PHP:
<?php

include("libs/Smarty.class.php");

$smarty = new Smarty;

///////////////////////////////////////

$smarty->display("header.htm");

$smarty->display("home.htm");

$smarty->display("footer.htm");

///////////////////////////////////////

?>و اللحين احفظه و ضعه داخل مجلد smarty

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

اللحين اطلب الرابط التالي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] و شاهد النتيجة و ادعيلي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

اي واحد يجد صعوبة في الدرس يسألني و ان شاء الله اعرف اجاوبه

العمل كامل في المرفقات و الصور ايضا و لا تنسوا التقييم [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بالتوفيق [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

» درس فوتوشوب للمبتدئين
» برمجة الحاسب للمبتدئين
» نظام شمسي0000000
» تحويل تردد على النايل سات إلى نظام hd
» درس تأسيس برمجة نظام قوالب صغير فيديو عربى