بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني كما رأينا بالدرس السابق ، قمنا بتجهيز المجلدات وقاعدة البيانات ، وجهزنا ملفات نظام القوالب الذكي [ Smarty ] ، والان ننتقل إلى الدرس الثاني ، وفي هذا الدرس سنقوم ببرمجة كلاس الاتصال بقواعد البيانات ، وبرمجة ملف يحتوي على دوال مفيدة سنستعملها للحماية وللعمل في السكربت ، وايضا سيتم ارفاق التصميم وهو مركب جاهز وسيتم شرح عمل صفحات القوالب ...
- أهداف الدرس :
- معرفة كيفية تجهيز ملفات القالب الأساسية
- معرفة كيفية عمل الأصناف والدوال [ Classes & Functions ]
- برمجة ملف الاتصال بالقاعدة والتواصل [ Config.php ]
- برمجة ملف صنف القواعد [ db.class.php ]
- موضوع الدرس :
- تركيب التصميم وتوزيعة القوالب
نظرا لعدم وجود فراغ او وقت لشرح تركيب التصميم بواسطة Css , Xhtml ، فقمت انا بتركيبه وتجهيزه وقمت بعمل ملف index.html وملف style.css ومجلد images ، في هذا الجزء من الشرح سنقوم بعمل توزيعة للملف index.html ، على 3 ملفات اخرىوهي :
header.tpl >> هذا الملف يحتوي على الهيدر وملفات الاستدعاء
index.tpl >> هذه صفحة الرئيسية والتي سنقوم بوضع فيها القوائم ومحتويات الجسم
footer.tpl >> هذا الملف يحتوي على نهاية التصميم او ما يسمى الفوتر ويكون فيه الحقوق والملكية
** ملاحظة : سيكون الامتداد TPL ، وهو الامتداد الخاص بقوالب Smarty تقريبا ، وهو الافضل للقوالب
- اولا : قم بتحميل مجلد القالب ، وقم بفك الضغط عنه
[[ لتحميل القالب : www.life5.net/Smarty's/Plan/default.zip ]]
- ثانيا : قم بفتح مجلد templates ، وقم بانشاء مجلد جديد فارغ وسميه على اسم القالب الذي تريده ، مثلا انا قمت بتسميته default
- ثالثا : الان قم بنقل ملف index.html + style.css + مجلد images إلى مجلد القالب الخاص بك .
الان اصبح لديك مجلد القالب مثلا لدي [ default ] ويحتوي على الملفين والمجلد الخاص بالصور
- رابعا : سننتقل إلى التوزيع تجهيزا لعمل القوالب ... الان سنقوم بعمل ملفات كالتالي داخل مجلد القالب
header.tpl
footer.tpl
index.tpl
(*) طريقة انشاء الملف بسيطة ،
-- اما انك تفتح محرر الاكواد إذا كنت تستعمل PhpDesigner وتقوم من شريط القوائم اختيار ملف [ File ] ، وتختار جديد [ New ] ، ومن ثم تختار Smarty ،، وتقوم بحفظه
-- لمن لا يستعمل محرر الاكواد السابق يقوم بالضغط في مكان فارغ في مجلد القالب بالزر الايمن ومن ثم يختار جديد [ New ] >> ومن ثم تختار مستند نصي جديد [ Text Document ] ، ومن ثم تقوم بتغيير الامتداد من txt إلى tpl وتغير اسمه إلى header وتنشأ ملفين اخرين وتقوم بتسميتهم footer + index
[ *** ] نفتح ملف header.tpl بواسطة محرر الاكواد او اي برنامج اخر ، ونقوم بفتح ايضا ملف index.html وذلك لننسخ الاكواد منه ،،، الان نحن في ملف header.tpl ، فمن الاسم فقط نريد عرض الهيدر كامل من ملفات استدعاء والهيدر وما الى ذلك ...
- نرى في ملف index.html ، ونبدأ بتحديد الملف من بدايته إلى اخر حد نريده ، واخر حد هنا هو بعد الهيدر ،،، كالتالي ..:
كما نرى بالكود السابق كان الحد النهائي هو صندوق الهيدر والصورة بداخله ، مع ملاحظة انه بداخل صندوق الهيدر ، نجد اللوجو الخاص بي ، ويمكنك تغييره إلى ما شئت ...كود PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<title>Life Article Script </title>
</head>
<body>
<div id="Life">
<div id="header"><img src="images/logo.png" style="margin-right: 200px;" /></div>
[ *** ] الان ننتقل إلى ملف footer.tpl ، فنقوم بفتح الملف السابق وهو الخاص بالفوتر ، وننظر مرة اخرى إلى ملف index.html ، وننسخ من اول الجزء الخاص بالفوتر إلى نهاية المستند ويكون كالتالي
في الفوتر فقط وضعنا شريط بسيط للحقوق ، لا نريد زحمة التصاميم حاليا ، بعد الانتهاء كما وعدتكم بإذن الله سيكون شرح لتركيب اي تصميم بأي شكل على السكربتكود PHP:
<div id="footer">جميع الحقوق محفوظة لدورة الحياة البرمجية 2010 - 2010 ©</div>
</div>
</body>
</html>
[ *** ] الان ننتقل إلى صفحة index.tpl ، وهي الصفحة التي تحتوي على جسم الصفحة الرئيسي ،، وطبعا سيكون كالتالي :
الان ننتهي بصورة بسيطة للعمل الكامل وكيف سيكون شكله بعد تركيبه :كود PHP:<div id="rightblock">
<div class="headmenu">القائمة الرئيسية</div>
<div class="linkesmenu">
<ul>
<li><a href="#" title="الصفحة الرئيسية" target="_self">الصفحة الرئيسية</a></li>
<li><a href="#" title="الصفحة الرئيسية" target="_self">الصفحة الرئيسية</a></li>
<li><a href="#" title="الصفحة الرئيسية" target="_self">الصفحة الرئيسية</a></li>
<li><a href="#" title="الصفحة الرئيسية" target="_self">الصفحة الرئيسية</a></li>
<li><a href="#" title="الصفحة الرئيسية" target="_self">الصفحة الرئيسية</a></li>
<li><a href="#" title="الصفحة الرئيسية" target="_self">الصفحة الرئيسية</a></li>
</ul>
</div>
<div class="headmenu">دخول الأعضاء</div>
<div class="bodymenu">
<form method="" action="">
اسم المستخدم : <input type="text" name="username" size="15" /><br />
كلمـة المرور : <input type="text" name="password" size="15" />
<input type="submit" value="دخول" class="submit" />
</form>
</div>
<div class="headmenu">الاحصائيات العامة</div>
<div class="bodymenu">
</div>
</div>
<div id="leftblock">
<div class="headmenu">ابحث</div>
<div class="bodymenu">
<form>
<input type="text" name="s" style="margin-right:10%;" />
<input type="submit" value="ابحث" style="margin-right:40%;cursor:pointer;" />
</form>
</div>
<div class="headmenu">جديد الكتاب</div>
<div class="bodymenu">
<div class="newest_writer">
<ul>
<li>
<img src="" class="avatar" />
<p>اسم الكاتب</p>
<p>عنوان المقال عنوان المقال</p>
</li>
<li>
<img src="" class="avatar" />
<p>اسم الكاتب</p>
<p>عنوان المقال عنوان المقال</p>
</li>
<li>
<img src="" class="avatar" />
<p>اسم الكاتب</p>
<p>عنوان المقال عنوان المقال</p>
</li>
<li>
<img src="" class="avatar" />
<p>اسم الكاتب</p>
<p>عنوان المقال عنوان المقال</p>
</li>
</ul>
</div>
</div>
</div>
<div id="bodyarea">
<div id="centerblock">
<div class="headmenu">جديد المقالات</div>
<div class="bodymenu">
<ul>
<li>
<img src="images/lessons.png" class="avatar" />
<p class="title" > هنا سيكون عنوان المقالة</p>
<p class="date" > تاريخ الإضافة : 22-12-2010</p>
<p>
في دورة الحياة البرمجية سنقوم ببرمجة سكربت مقالات مميز بإذن الله تعالى ، وسيكون عبارة عن سكربت مقالات وايضا سيكون هناك لوحة تحكم خاصة بالسكربت تستطيع التحكم بجميع السكربت <a href="" style="font-weight:600;">المزيد ...</a>
</p>
</li>
<li>
<img src="images/lessons.png" class="avatar" />
<p class="title" > هنا سيكون عنوان المقالة</p>
<p class="date" > تاريخ الإضافة : 22-12-2010</p>
<p>
في دورة الحياة البرمجية سنقوم ببرمجة سكربت مقالات مميز بإذن الله تعالى ، وسيكون عبارة عن سكربت مقالات وايضا سيكون هناك لوحة تحكم خاصة بالسكربت تستطيع التحكم بجميع السكربت <a href="" style="font-weight:600;">المزيد ...</a>
</p>
</li>
<li>
<img src="images/lessons.png" class="avatar" />
<p class="title" > هنا سيكون عنوان المقالة</p>
<p class="date" > تاريخ الإضافة : 22-12-2010</p>
<p>
في دورة الحياة البرمجية سنقوم ببرمجة سكربت مقالات مميز بإذن الله تعالى ، وسيكون عبارة عن سكربت مقالات وايضا سيكون هناك لوحة تحكم خاصة بالسكربت تستطيع التحكم بجميع السكربت <a href="" style="font-weight:600;">المزيد ...</a>
</p>
</li>
<li>
<img src="images/lessons.png" class="avatar" />
<p class="title" > هنا سيكون عنوان المقالة</p>
<p class="date" > تاريخ الإضافة : 22-12-2010</p>
<p>
في دورة الحياة البرمجية سنقوم ببرمجة سكربت مقالات مميز بإذن الله تعالى ، وسيكون عبارة عن سكربت مقالات وايضا سيكون هناك لوحة تحكم خاصة بالسكربت تستطيع التحكم بجميع السكربت <a href="" style="font-weight:600;">المزيد ...</a>
</p>
</li>
<li>
<img src="images/lessons.png" class="avatar" />
<p class="title" > هنا سيكون عنوان المقالة</p>
<p class="date" > تاريخ الإضافة : 22-12-2010</p>
<p>
في دورة الحياة البرمجية سنقوم ببرمجة سكربت مقالات مميز بإذن الله تعالى ، وسيكون عبارة عن سكربت مقالات وايضا سيكون هناك لوحة تحكم خاصة بالسكربت تستطيع التحكم بجميع السكربت <a href="" style="font-weight:600;">المزيد ...</a>
</p>
</li>
<li>
<img src="images/lessons.png" class="avatar" />
<p class="title" > هنا سيكون عنوان المقالة</p>
<p class="date" > تاريخ الإضافة : 22-12-2010</p>
<p>
في دورة الحياة البرمجية سنقوم ببرمجة سكربت مقالات مميز بإذن الله تعالى ، وسيكون عبارة عن سكربت مقالات وايضا سيكون هناك لوحة تحكم خاصة بالسكربت تستطيع التحكم بجميع السكربت <a href="" style="font-weight:600;">المزيد ...</a>
</p>
</li>
</ul>
</div>
</div>
</div>
www.life5.net/Smarty's/Plan/life5.net
هذه هي مبدأيا محتويات القوالب الرئيسة ، الان ، كما شاهدنا قمنا بوضع الهيدر في ملف خاص والفوتر في ملف خاص وعرضنا جسم الصفحة في ملف خاص ، الان كيف نعرض في ملف جسم الصفحة [ index.tpl ] الهيدر والفوتر ؟؟!
هذا بسيط جدا ، نقوم بالرجوع لملف index.tpl ، وسنستعمل هنا احدى دوال نظام القوالب لعرض الهيدر والفوتر ،، ويتم ذلك عن طريق
--- اضافة الهيدر لجسم الصفحة
نفتح ملف index.tpl ونقوم بوضع في بداية الملف
هذه الدالة هي include ، وهي كما في لغة php تقوم باستدعاء ملف ، لكن هنا نستعملها في القوالب لنقوم باستدعاء ملف الهيدر والفوتر ، تكون جميع متغيرات ودوال واصناف وكل شيء لسمارتي بين قوسين معكوفين ( {} ) ، وللاستدعاء نقوم بوضع كما بالسابق دالة include بعدها نعطيه قيمة الـ file رابط الملف الذي تريد استدعائه ، وبالنهاية هناك خيار اختياري ان اردت ، وهذا الخيار يحدد الصفحة المستدعية لأجلها ، فنضيف p ونسند إليه القيمة وتكون اسم الصفحة التي ستستدعي فيها ، وفي حالتنا indexكود PHP:{include file="default/header.tpl" p="index"}
--- إضافة الفوتر لجسم الصفحة
ويكون ايضا بنفس الطريقة ، فبنهاية الصفحة index.tpl ، نقوم كما بالسابق بعمل
طبعا كما بالسابق استعملنا الدالة include ، فقط غيرنا مسار الملف واشرنا إلى الفوتركود PHP:{include file="default/footer.tpl" p="index"}
[ *|* ] ملاحظة : الآن لن تتمكن من معاينة العمل ، ولكن الدرس القادم سيكون به شرح لعمل الصفحة الرئيسية وكل شيء وبعدها ستتمكن من معاينته في المتصفح ..
- برمجة ملف صنف قاعدة البيانات [ db.class.php ]
الان بعد ان انتهينا من القوالب وتطويع التصميم واصبح لدينا مجلد قوالب وضعنا به الملفات السابق شرحها ، ننتقل إلى شرح برمجة ملف صنف قاعدة البيانات ، وبما اننا سنقوم ببرمجة صنف [ Class ] سنقوم بداية بتحديد عناصر الصنف ...
1- يقوم الصنف بعمل اتصال [ mysql_connect ]
2- يقوم الصنف بعمل استعلام [ mysql_query ]
3- يقوم الصنف بعمل استعلام الجلب [ fetch_array ]
4- يقوم الصنف بعمل تحرير للاستعلام [ mysql_free_result ]
5- يقوم الصنف بعمل اغلاق مقبض الاتصال [ mysql_close ]
هذه هي اهم الاعمال التي سيقوم بها الصنف الذي سنقوم ببرمجته ،، ونقوم بالبداية بانشاء ملف db.class.php ، ونقوم بوضعه في مجلد includes ...
ونبدأ على بركة الله تعالى ...
[ * 1 * ] نبدأ اولا بتعريف الصنف وتحديد المتغيرات الرئيسة ،، المتغيرات هي
1- اسم المتغير الذي سيكون المقبض للتحكم بالدوال والصنف
2- وايضا متغير يحدد اخر اتصال ان وجد
3- يقوم بتعداد عدد الاستعلامات في السكربت << مفيدة
[ * 2 * ] ومن ثم نقوم بعمل دالة الاتصال بقاعدة البيانات ، وهي بسيطة وسهلة :كود PHP:class db_mysql
{
var $link;
var $recent_link = null;
var $query_count = 0;
}
اولا قمنا باستعمال function لتعريف الدالة ، وبعد function قمنا بتسمية الدالة على اسم الصنف ، وذلك لاستعماله الدالة عن استدعاء الصنف ، ثم تفتح قوسين لتعريف معطيات الدالة وهم 4 معطيات [ parameters ] وهم كالتالي :كود PHP:/**
# $db_host | Database Host #
# $db_user | Database User name #
# $db_pass | Database Pass word #
# $db_name | Database name #
**/
function db($db_host, $db_user, $db_pass, $db_name)
{
$
this->link = @mysql_connect($db_host, $db_user, $db_pass);
if ($this->link)
{
if (@mysql_select_db($db_name, $this->link))
{
$this->recent_link =& $this->link;
return $this->link;
}
}else{
die("هناك خطأ في الاتصال في قاعدة البيانات ، الرجاء المحاولة فيما بعد");
}
}
$db_host ==> وهي المسؤولة عن هوست قواعد البيانات وبالغالب يكون localhost
$db_user ==> وهي تعبر عن اسم مستخدم قاعدة البيانات
$db_pass ==> وهي تعبر عن كلمة المرور الخاصة بقاعدة البيانات
$db_name ==> وهي تعبر عن اسم قاعدة البيانات
وبعد ان عرفنا المعطيات ، ننتقل لداخل الدالة والعمليات ،، فبعد ان اغلقنا قوس المعطيات ( ، نقوم بفتح قوسين معكوفين {} ،، ونبدأ بداخلهم بالعمليات ..
طبعا لأننا داخل الصنف لا نستعمل دالة ثابتة نقوم بعمل $this-> ونضع بعدها متغير link الذي عرفناه داخل الصنف سابقا ، وهو يستعمل لتحديد مقبض الصنف وهكذا .. وهنا اسندنا القيمة mysql_connect وهذه الدالة تستعمل للاتصال بقواعد البيانات واعطيناها الـ 3 معطيات السابقة لتقوم بعملها وتفتح لنا الاتصال بالقاعدة ...كود PHP:$this->link = @mysql_connect($db_host, $db_user, $db_pass);
ثم بعد ذلك قمنا بالتحقق من ان الاستعلام تم على خير ، وفتح الاتصال بالقاعدة نقوم بتحديد قاعدة البيانات المستخدمة في السكربت ويتم ذلك عن طريق دالة بسيطة وهي mysql_select_db وتأخذ هذه الدالة المعطيات الاتية :
$db_name ==> وهي كما قلنا سابقا اسم القاعدة
$this->link ==> وهذا هو متغير الاتصال بالقاعدة
والباقي بسيط كما بالكود السابق ،، الان ننتقل للدالة الاخرى وهي دالة الاستعلامات ، وتكون كالتالي :
الدالة هذي بسيطة وواضحة ، قمنا بتحديد المعطيات واسناد قيم لها ، ومن ثم قمنا بعمل استعلام وزودنا عدد الاستعلامات بواحد ، وارجعنا قيمة فيها النتائجكود PHP:function query($sql)
{
$this->recent_link =& $this->link;
$this->sql =& $sql;
$result = @mysql_query($sql, $this->link);
$this->query_count++;
return $result;
}
-- ننتقل للدالة الاخرى وهي دالة : دالة جلب النتائج من الاستعلام ، وهي كالتالي
وهي ابسط من البسيطة واظنها واضحة ، قمنا بعمل mysql_fetch_assoc وهي دالة تجلب النتائج بمصفوفة مفتاحها حرفي ويكون عبارة عن اسم الحقلكود PHP:function fetch_array($result)
{
return @mysql_fetch_assoc($result);
}
-- ننتقل إلى دالة تحرير البيانات
وفي هذه الدالة استعملنا mysql_free_result وهي تساعد بالتخفيف على الموقع وتسرع قليلا الصفحات ...كود PHP:function free_result($result)
{
return @mysql_free_result($result);
}
-- ننتقل إلى دالة اغلاق مقبض الاتصال ،، ويكون كالتالي :
كود PHP:function close()
{
$this->sql = '';
return @mysql_close($this->link);
}
- برمجة ملف الاتصال بقاعدة البيانات [ Config.php ]
في هذا الجزء سنستخدم الكلاس السابق في الاتصال بقاعدة البيانات ،
قم بانشاء ملف config.php ، ومن ثم نقوم بالبدء بفتح اكواد البرمجة بلغة php
ونبدأ على بركة الله ، بالبداية للاتصال بقاعدة البيانات كم اسلفنا نحتاج لـ 4 متغيرات وهي كالتاليكود PHP:<?php
?>
$db_host
$db_user_name
$db_pass_word
$db_name
فلذلك سنقوم ببرمجة المتغيرات واسناد القيام لها ، فنقوم كالتالي :
هكذا قمنا بعمل المتغيرات واسندنا القيم لها ،، الان ننتقل لعمل الاتصال بقاعدة البيانات بواسطة الصنف السابق ..كود PHP:// نستدعي ملف صنف قاعدة البيانات
require_once('db.class.php');
$db_host = "localhost" ;// هنا يكون الهوست
$db_user_name = "root" ;// هنا يكون اسم مستخدم قاعدة البيانات
$db_pass_word = "";// هنا يكون كلمة مرور قاعدة البيانات
$db_name = "manga";// هنا يكون اسم قاعدة البيانات
ونقوم بالتالي :
- اولا : قمنا بتحديد متغير $mysql وهو كما اسلفنا المقبض الخاص بالصنف والدوالكود PHP:$mysql = new db($db_host, $db_user_name, $db_pass_word, $db_name);
- ثانيا : قمنا بعمل نسخة للصنف ، وذلك لاستعماله في برمجيتنا وهذا عن طريق new
- ثالثا : قمنا بعمل اتصال بالقاعدة عبر دالة db ولذلك قمنا بعمل اسم الدالة كاسم الصنف ، ووضعنا المعطيات بين القوسين ..
وهكذا اصبح لدينا ملف صنف القاعدة ، وملف الاتصال بالقاعدة ..
- برمجة ملف الدوال المهمة [ function.php ]
في هذا الجزء من الدرس سنقوم بعمل ملف يسمى function.php ، ويكون محتواه عبارة عن دوال نستعملها اثناء البرمجة كدالة تأمين المدخلات ، وغيرها ..
--- كما بالسابق نقوم بانشاء ملف ونسميه function ويكون بامتداد php ويتم حفظه في مجلد السكربت الرئيسي ...
ونبدأ على بركة الله ،،
- هذا الملف سيكون هو الملف الرئيسي لكل الصفحات ، اي هذا الملف سيتم استدعائه في كل الصفحات ..
في بداية الصفحة نفتح اكواد الphp ،، وننطلق في البداية باستدعاء الملفات اللازمة للعمل ..
هذه هي الملفات التي قمنا بعملها سابقا مثلا ملف صنف القاعدة ، وملف الاتصال ، وملف صنف نظام القوالب ...كود PHP:<?php
/**
* @author Life
* @copyright 3-7-2010
*/
require_once("includes/db.class.php");
require_once("includes/config.php");
require_once("libs/Smarty.class.php");
?>
الان ننطلق لنقوم بانشاء متغير ينسخ صنف القوالب وذلك عن طريق
ثم بعد ذلك سنقوم بعمل دالة لتأمين المدخلات ، وسيكون بها التالي :كود PHP:$smarty = new Smarty();
أظنها واضحة جدا ولا تحتاج لشرح او تفسيركود PHP:function mksafe($txt, $intval = false, $no_html = false)
{
$txt = trim($txt);
$txt = AddSlashes($txt);
$txt = mysql_real_escape_string($txt);
$preg_find = array('#^javascript#i', '#^vbscript#i');
$preg_replace = array('java script', 'vb script');
$txt = str_replace('<meta', '', $txt);
$txt = preg_replace($preg_find, $preg_replace,$txt);
$txt = preg_replace($preg_find, $preg_replace,$txt);
if($intval == TRUE)
{
$txt = intval($txt);
}
if($no_html == TRUE):
$txt = strip_tags($txt, '<br />');
endif;
return(nl2br($txt));
}
<<< جميع حقوق الدالة محفوظة لسكربت احد الاخوان والله نسيته ، وهي دالة رائعة ومميزة لذلك استعملتها ، واظنها كافية لتأمين المدخلات ...
وهذا هو محتويات ملف function حاليا ..
- إضافة وتوضيح :
لا يوجد اضافة ولا توضيح
بالنهاية احب اشكر الجميع على مروركم ومتابعتكم ، وان شاء الله يكون الدرس بسيط وسهل ومفهوم ، واي استفسارات او مشاكل او اقتراحات يمكنك طرحها هنا بالموضوع ،، وللزوار الذين يرغبون في متابعة الدورة والاستفسار يمكنهم ذلك عن طريق مدونة الحياة
للزوار : www.life5.net
تحياتي للجميع
Life
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة apitos 
