Rise Company
17-05-2018, 14:28
نظام محرك سمارتى Smarty القوالب لفصل البرمجة و التصميم PHP Template Engine
برمجة/تصميم مواقع الانترنت وهندسة البرمجيات (محرك سمارتي):
https://www.smarty.net/
قد تبدأ ببرمجة أحد مواقع الوب , وفق تصميم ما قمت بتنجيزه , أو قام مصمم وب مختص بإنجازه لك , ولنفترض بأنك تبرمج بلغة php , وبعد انتهاء برمجة الموقع , اضطر مصمم الموقع أن يقوم ببعض التعديلات على تصاميمه , فتجد نفسك مضطراً في أغلب الأحيان – ليس دوما وذلك بحسب المنهجية التي تتبعها في أسلوب برمجتك – إلى تعديل في الرماز الذي قمت به سابقاً ليتكيف مع التصميم الجديد , وهذه هي الحالة مع أية تعديلات قد تطرأ على التصميم ؟! فما الحل؟ وهل هذه العملية منطقية برأيك ؟؟!
نعلم بأن أحد المبادئ الأساسية في هندسة البرمجيات يكمن في عزل منطق العمل business logic عن العرض – التصميم- presentation . وحتى نحافظ على هذا المبدأ في عملنا فقد تم ابتكار العديد من الأدوات والبرمجيات والمكتبات المساعدة على تنظيم عملية الرماز والمحافظة على مبادئ هندسة البرمجيات قولاً وفعلاً, ومن أشهرها سمارتي smarty , فما هو سمارتي , وكيف يتم استخدامه والاستفادة من الفعاليات التي يتقدمها؟؟
تعريف نظام القوالب smarty
يعتبر سمارتي بمثابة أحد محركات القوالب template engineالمخصصة للغة php. وبشكل أكثر تحديداً, فهو يوفر لنا وسيلة سهلة وبسيطة لعزل منطق التطبيق application logicوالمحتوى عن العرض presentation . وتعتبر هذه الطريقة بمثابة الطريقة المثلى في الحالات التي يكون فيها مبرمج التطبيق ومصمم القوالب شخصان منفصلان.
https://www.rise.company/upload/uploads/1526560228381.jpg
سمارتي هو نظام قوالب مخصص للـ PHP يسهل الفصل بين الاكواد البرمجية والتصميم
بغرض تسهيل العمل بين المبرمج والمصمم فلكل منهما دوره وعمله الخاص
مثال :
نفترض ان لديك صفحة ويب اخبارية تتضمن عنوان الخبر مقدمة عن الخبر ومحتوى
الخبر كل هذه عناصر يقوم المبرمج بانشائها بغية ايصال الخبر
بطريقة يفهمها الجميع وبشكل واضح , بالطريقة الكلاسيكية المبرمج يضع اكواد
التصميم والبرمجة مدموجة مع بعضها صحيح (لي يقول غلط لاحظ معي ان التصميم متعلق بكود البرمجة
اوكي نفترض فيوم ما المبرمج اراد تغيير محتوى لمحة عن الخبر فماذا سيحدث
سيكون المصمم مجبرا على اعاده تصميمه لان الكود البرمجي تغير
نفس الشسء للمبرمج فاذا اراد المصمم تغيير اي شيء لابد من تغيير الكود البرمجي
هنا نلاحظ ان عمل المبرمج والمصمم متعلقان ببعضهما البعض والمفروض ان ينفصلا انفصالا تاما
لذالك فنظام القوالب سمارتي يسمح لك بفصل الكود البرمجي عن التصميم (اكواد html ....)
<--- لا يزال لدي غموض كبير اشك في كلامك --->
لاحظ الاستايلات في منتديات الفي بي لو ان الكود البرمجي متعلق بالتصميم لما شاهدنا هذا الكم الهائل من الاستايلات صح
الفي بي حسب علمي يستعمل نظام قوالب خاص به ما علينا ادرجته هنا للفهم فقط
اذا خلاصة قولنا في حال استعمالنا لنظام القوالب لن نكون مجبرين على
تغيير التصميم في حال تغير الكود او العكس
آلية العمل :
يعتمد سمارتي ببساطة مبدأ القوالب في عمله , فبعد أن يقوم المصمم بتصميم القالب الذي يرغب أن يكون العرض فيه , يتم تضمين متحولات سمارتي ضمنه ,تلك المتحولات المسؤولة عن عرض القيم المطلوبة ضمن هذه القوالب بالقيم المناسبة وفي الوقت المناسب بالاعتماد على إسناد القيم الصحيحة والمطلوبة لها وفق منطق العمل المطلوب.
بمعنى آخر, يقوم مصمم القوالب باستخدام مزيج من تاغات html مع تاغات القالب template tags بهدف تشكيل عرض مستقل عن لغة البرمجة – سيتضح لنا هذا الكلام بشكل عملي عند طرح المثال البسيط بعد قليل.
وبذلك في حال قرر مصمم القوالب أن يعيد هيكلة تصميم القوالب بشكل كامل فإن ذلك لن يؤثر على المبرمج ولن يضطر المبرمج إلى إعادة البرمجة من جديد لتتكيف مع تصاميم القوالب الجديدة. وبالمثل, ففي الحالة التي قد يقرر فيها المبرمج تغير منطق العمل الذي كان يسير وفقه فإن ذلك لا يقتضي أن يقوم مصمم القوالب بالقيام بأي تغيّرات لتتوافق مع المنطق الجديد في العمل.
اعداد بيئة عمل سمارتي مع مثال توضيحي بسيط :
هالك عدة أساليب مختلفة لتبدأ بتصميم موقع يستخدم سمارتي ,ولكني سأختار طريقة بسيطة وواضحة:
1:تقوم في البداية بتنزيل المجلد المضغوط الذي يحتوي على مكتبات سمارتي الأساسية اللازمة لإعداد بيئة العمل – المجلد موجود في موقع سمارتي www.smarty.net (http://www.smarty.net/).
2:تقوم بفك ضغط المجلد ضمن مجلد يدعى – على سبيل المثال – smarty , ويتواجد هذا المجلد ضمن مجلد الموقع الذي تقوم ببرمجته , وبعد فك الضغط ستجد ضمن مجلد سمارتي مايلي
/yourSiteFolder/smarty/
Config_File.class.php
debug.tpl
internals/
plugins/
Smarty.class.php
Smarty_Compiler.class.php
3:حتى يعمل سمارتي بشكل صحيح فأنت بحاجة لإنشاء 4 مجلدات ضمن مجلد سمارتي الذي انشأته سابقاً , ألا وهي
templates,templates_c,cache,configs ,وهي مخصصة – بالترتب- لملفات سمارتي التالية
templates , compiled templates ,cached templates , config
4:أنشأ داخل مجلد تطبيقك ملف يدعى index.phpواكتب فيه الرماز التالي:
<?php
// put path to Smarty.class.php
require(‘./smarty/Smarty.class.php’);
$smarty = new Smarty();
$smarty->template_dir = ‘./smarty/templates’;
$smarty->compile_dir = ‘./smarty/templates_c’;
$smarty->cache_dir = ‘./smarty/cache’;
$smarty->config_dir = ‘./smarty/configs’;
$smarty->assign(‘name’, ‘:I am Light Tiger, nice to meet you ‘);
$smarty->display(‘index.tpl’);
?>
5:أنشأ ملف يدعى index.tplفي مجلد templates أي كما يلي :
/yourSiteFolder/smarty/templates/index.tpl
حرر هذا الملف ليحوي الرماز التالي:
<html>
<head>
<title>Smarty</title>
</head>
<body>
Hello, {$name}!
</body>
</html>
6:واخيراً ,استعرض التطبيق الذي انشأته باستخدام مستعرض الوب الموجود على جهازك
http://localhost/yourSiteFolder/index.php
وسيظهر لك النص التالي
Hello, :I am Light Tiger, nice to meet you!
وبذلك تكون قد قمت بإنشاء أول تطبيق لك باستخدام سمارتي .
لاحظ كيف تمت عملية استبدال المتحول الموجود بالقالب بالقيمة المسندة له من خارج القالب.
ما سبق كان مقدمة بسيطة لتتابع تعلم العديد من ميزات سمارتي التي توفر عليك الكثير الكثير من الجهد والوقت.
مفاهيم اساسية لمتحولات سمارتي :
يتم تعريف متحول في سمارتي كما يلي {$smaryVariable} حيث يخضع تعريف اسم المتحول لنفس قواعد تعريف المتحولات في php ,ويجب أن يحاط بالأقواس التالية{}
أما عملية إسناد متحول لسمارتي فتتم عبر الاستدعاء التالي :
$smarty->assign(‘variableName’,’value’);
لعرض أحد القوالب(الموجودة ضمن مجلد القوالب ):
$smarty->display(‘templateName.tpl’);
لإضافة تعليق
{*this is a smarty comment that will not be displayed on the final output of the template*}
وبالإضافة إلى الكثير من التوابع والإمكانيات التي يقدمها لنا سمارتي للتحكم بعرض المعلومات.
شاهد ايضا
انشاء و ضبط التاريخ و الساعة فى سمارتي Smarty Date and Time zone (https://www.rise.company/forum/threads/30084-%D8%A7%D9%86%D8%B4%D8%A7%D8%A1-%D9%88-%D8%B6%D8%A8%D8%B7-%D8%A7%D9%84%D8%AA%D8%A7%D8%B1%D9%8A%D8%AE-%D9%88-%D8%A7%D9%84%D8%B3%D8%A7%D8%B9%D8%A9-%D9%81%D9%89-%D8%B3%D9%85%D8%A7%D8%B1%D8%AA%D9%8A-Smarty-Date-and-Time-zone)
برمجة/تصميم مواقع الانترنت وهندسة البرمجيات (محرك سمارتي):
https://www.smarty.net/
قد تبدأ ببرمجة أحد مواقع الوب , وفق تصميم ما قمت بتنجيزه , أو قام مصمم وب مختص بإنجازه لك , ولنفترض بأنك تبرمج بلغة php , وبعد انتهاء برمجة الموقع , اضطر مصمم الموقع أن يقوم ببعض التعديلات على تصاميمه , فتجد نفسك مضطراً في أغلب الأحيان – ليس دوما وذلك بحسب المنهجية التي تتبعها في أسلوب برمجتك – إلى تعديل في الرماز الذي قمت به سابقاً ليتكيف مع التصميم الجديد , وهذه هي الحالة مع أية تعديلات قد تطرأ على التصميم ؟! فما الحل؟ وهل هذه العملية منطقية برأيك ؟؟!
نعلم بأن أحد المبادئ الأساسية في هندسة البرمجيات يكمن في عزل منطق العمل business logic عن العرض – التصميم- presentation . وحتى نحافظ على هذا المبدأ في عملنا فقد تم ابتكار العديد من الأدوات والبرمجيات والمكتبات المساعدة على تنظيم عملية الرماز والمحافظة على مبادئ هندسة البرمجيات قولاً وفعلاً, ومن أشهرها سمارتي smarty , فما هو سمارتي , وكيف يتم استخدامه والاستفادة من الفعاليات التي يتقدمها؟؟
تعريف نظام القوالب smarty
يعتبر سمارتي بمثابة أحد محركات القوالب template engineالمخصصة للغة php. وبشكل أكثر تحديداً, فهو يوفر لنا وسيلة سهلة وبسيطة لعزل منطق التطبيق application logicوالمحتوى عن العرض presentation . وتعتبر هذه الطريقة بمثابة الطريقة المثلى في الحالات التي يكون فيها مبرمج التطبيق ومصمم القوالب شخصان منفصلان.
https://www.rise.company/upload/uploads/1526560228381.jpg
سمارتي هو نظام قوالب مخصص للـ PHP يسهل الفصل بين الاكواد البرمجية والتصميم
بغرض تسهيل العمل بين المبرمج والمصمم فلكل منهما دوره وعمله الخاص
مثال :
نفترض ان لديك صفحة ويب اخبارية تتضمن عنوان الخبر مقدمة عن الخبر ومحتوى
الخبر كل هذه عناصر يقوم المبرمج بانشائها بغية ايصال الخبر
بطريقة يفهمها الجميع وبشكل واضح , بالطريقة الكلاسيكية المبرمج يضع اكواد
التصميم والبرمجة مدموجة مع بعضها صحيح (لي يقول غلط لاحظ معي ان التصميم متعلق بكود البرمجة
اوكي نفترض فيوم ما المبرمج اراد تغيير محتوى لمحة عن الخبر فماذا سيحدث
سيكون المصمم مجبرا على اعاده تصميمه لان الكود البرمجي تغير
نفس الشسء للمبرمج فاذا اراد المصمم تغيير اي شيء لابد من تغيير الكود البرمجي
هنا نلاحظ ان عمل المبرمج والمصمم متعلقان ببعضهما البعض والمفروض ان ينفصلا انفصالا تاما
لذالك فنظام القوالب سمارتي يسمح لك بفصل الكود البرمجي عن التصميم (اكواد html ....)
<--- لا يزال لدي غموض كبير اشك في كلامك --->
لاحظ الاستايلات في منتديات الفي بي لو ان الكود البرمجي متعلق بالتصميم لما شاهدنا هذا الكم الهائل من الاستايلات صح
الفي بي حسب علمي يستعمل نظام قوالب خاص به ما علينا ادرجته هنا للفهم فقط
اذا خلاصة قولنا في حال استعمالنا لنظام القوالب لن نكون مجبرين على
تغيير التصميم في حال تغير الكود او العكس
آلية العمل :
يعتمد سمارتي ببساطة مبدأ القوالب في عمله , فبعد أن يقوم المصمم بتصميم القالب الذي يرغب أن يكون العرض فيه , يتم تضمين متحولات سمارتي ضمنه ,تلك المتحولات المسؤولة عن عرض القيم المطلوبة ضمن هذه القوالب بالقيم المناسبة وفي الوقت المناسب بالاعتماد على إسناد القيم الصحيحة والمطلوبة لها وفق منطق العمل المطلوب.
بمعنى آخر, يقوم مصمم القوالب باستخدام مزيج من تاغات html مع تاغات القالب template tags بهدف تشكيل عرض مستقل عن لغة البرمجة – سيتضح لنا هذا الكلام بشكل عملي عند طرح المثال البسيط بعد قليل.
وبذلك في حال قرر مصمم القوالب أن يعيد هيكلة تصميم القوالب بشكل كامل فإن ذلك لن يؤثر على المبرمج ولن يضطر المبرمج إلى إعادة البرمجة من جديد لتتكيف مع تصاميم القوالب الجديدة. وبالمثل, ففي الحالة التي قد يقرر فيها المبرمج تغير منطق العمل الذي كان يسير وفقه فإن ذلك لا يقتضي أن يقوم مصمم القوالب بالقيام بأي تغيّرات لتتوافق مع المنطق الجديد في العمل.
اعداد بيئة عمل سمارتي مع مثال توضيحي بسيط :
هالك عدة أساليب مختلفة لتبدأ بتصميم موقع يستخدم سمارتي ,ولكني سأختار طريقة بسيطة وواضحة:
1:تقوم في البداية بتنزيل المجلد المضغوط الذي يحتوي على مكتبات سمارتي الأساسية اللازمة لإعداد بيئة العمل – المجلد موجود في موقع سمارتي www.smarty.net (http://www.smarty.net/).
2:تقوم بفك ضغط المجلد ضمن مجلد يدعى – على سبيل المثال – smarty , ويتواجد هذا المجلد ضمن مجلد الموقع الذي تقوم ببرمجته , وبعد فك الضغط ستجد ضمن مجلد سمارتي مايلي
/yourSiteFolder/smarty/
Config_File.class.php
debug.tpl
internals/
plugins/
Smarty.class.php
Smarty_Compiler.class.php
3:حتى يعمل سمارتي بشكل صحيح فأنت بحاجة لإنشاء 4 مجلدات ضمن مجلد سمارتي الذي انشأته سابقاً , ألا وهي
templates,templates_c,cache,configs ,وهي مخصصة – بالترتب- لملفات سمارتي التالية
templates , compiled templates ,cached templates , config
4:أنشأ داخل مجلد تطبيقك ملف يدعى index.phpواكتب فيه الرماز التالي:
<?php
// put path to Smarty.class.php
require(‘./smarty/Smarty.class.php’);
$smarty = new Smarty();
$smarty->template_dir = ‘./smarty/templates’;
$smarty->compile_dir = ‘./smarty/templates_c’;
$smarty->cache_dir = ‘./smarty/cache’;
$smarty->config_dir = ‘./smarty/configs’;
$smarty->assign(‘name’, ‘:I am Light Tiger, nice to meet you ‘);
$smarty->display(‘index.tpl’);
?>
5:أنشأ ملف يدعى index.tplفي مجلد templates أي كما يلي :
/yourSiteFolder/smarty/templates/index.tpl
حرر هذا الملف ليحوي الرماز التالي:
<html>
<head>
<title>Smarty</title>
</head>
<body>
Hello, {$name}!
</body>
</html>
6:واخيراً ,استعرض التطبيق الذي انشأته باستخدام مستعرض الوب الموجود على جهازك
http://localhost/yourSiteFolder/index.php
وسيظهر لك النص التالي
Hello, :I am Light Tiger, nice to meet you!
وبذلك تكون قد قمت بإنشاء أول تطبيق لك باستخدام سمارتي .
لاحظ كيف تمت عملية استبدال المتحول الموجود بالقالب بالقيمة المسندة له من خارج القالب.
ما سبق كان مقدمة بسيطة لتتابع تعلم العديد من ميزات سمارتي التي توفر عليك الكثير الكثير من الجهد والوقت.
مفاهيم اساسية لمتحولات سمارتي :
يتم تعريف متحول في سمارتي كما يلي {$smaryVariable} حيث يخضع تعريف اسم المتحول لنفس قواعد تعريف المتحولات في php ,ويجب أن يحاط بالأقواس التالية{}
أما عملية إسناد متحول لسمارتي فتتم عبر الاستدعاء التالي :
$smarty->assign(‘variableName’,’value’);
لعرض أحد القوالب(الموجودة ضمن مجلد القوالب ):
$smarty->display(‘templateName.tpl’);
لإضافة تعليق
{*this is a smarty comment that will not be displayed on the final output of the template*}
وبالإضافة إلى الكثير من التوابع والإمكانيات التي يقدمها لنا سمارتي للتحكم بعرض المعلومات.
شاهد ايضا
انشاء و ضبط التاريخ و الساعة فى سمارتي Smarty Date and Time zone (https://www.rise.company/forum/threads/30084-%D8%A7%D9%86%D8%B4%D8%A7%D8%A1-%D9%88-%D8%B6%D8%A8%D8%B7-%D8%A7%D9%84%D8%AA%D8%A7%D8%B1%D9%8A%D8%AE-%D9%88-%D8%A7%D9%84%D8%B3%D8%A7%D8%B9%D8%A9-%D9%81%D9%89-%D8%B3%D9%85%D8%A7%D8%B1%D8%AA%D9%8A-Smarty-Date-and-Time-zone)