تصميم البرنامج شيء أساسي فهو كالهيكل العظمي للإنسان .. و قبل الشروع في وضع أوامر البرنامج يجب عمل شكل للبرنامج و إلا سيكون شكله مفزعاً ..
و هناك طرق كثيرة لإدخال تصميم على البرنامج ..
مثل وضع التصميم على ملفي html .. هيدر و فوتر ..
أو وضعها عن طريق عمل فنكشن ..
أو كمتغيرات !! ..
أو عن طريق قوالب سواء كانت بملفات أو بقواعد البيانات ..
و لعلي أتطرق لطريقة سهلة إن شاءالله ..
و هي عمل فنكشن للهيدر و الفوتر مع إمكانية عمل فنكشن أيضاً للصناديق أو لمساحات معينة ..
طبعاً بداية قم بعمل تصميم برنامجك بالكامل عن طريق برنامج التصميم الذي تستخدمه لو قلنا الفرونت بيج مثلاً على أن يكون ملف html واحد مع الصور الخاصة به لو وجدت .. ثم قم بحفظه بمجلد البرنامج الذي نفترض وجود ملفين فيه مسبقاً .. هما ملف الكونفق و ملف القاعدة ..
إذاً سيكون ملف التصميم المحفوظ حالياً هو الملف الثالث و ليكن إسمه index.html ..
طبعاً أنا سأفترض معرفة الإخوة بالتصميم سواء الجرافيكس أو تصميم الصفحات .. لأنه أعتقد من غير الجيد أن تتعلم البرمجة قبل أن تتعلم تصميم المواقع ..
لذا سأفترض أنك قمت بعمل التصميم على نظام الهيدر و الفوتر مع ترك مساحة للكتابة ..
و لنفترض هذا التصميم المبدئي الذي يمكن كل واحد منكم يضعه بملف html و يرى كيف سيكون شكله ..
كود PHP:
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>برنامج المقالات !!</title>
</head>
<body bgcolor="#C00000">
<table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
<tr>
<td align="center" width="25%" bgcolor="#EFEFEF">
<font><b>خيارات لوحة التحكم</b></font>
<br><br>هنا ستوضع أوامر و خيارات لوحة التحكم<br><br><br>
</td>
<td align="center" width="100%" bgcolor="#FFFFFF">
<font><b>خصائص لوحة التحكم</b></font>
<br><br>هنا سيتم تغيير النص حسب خيار لوحة التحكم<br><br><br>
</td>
</tr>
</table>
</body>
</html>
طبعاً التصميم السابق مجرد مثال وإلا فأنت أبدع ببرنامجك ..
بعد أن تنتهي كما قلت لك إحفظ التصميم بمجلد البرنامج و ليكن إسمه index.html مثلاً ..
الآن قم بإنشاء ملف و سميه template.php مثلاً ..
طبعاً كما تلاحظ بمثال التصميم السابق أنه عبارة عن عمودين عمود به خيارات لوحة التحكم و هي ستكون ثابتة و سنقوم بتعديلها إن شاءالله .. و العمود الثاني محتواه سيكون متغير حسب خيار لوحة التحكم ..
و دقق معي الآن فيما سيعمل و هو تقسيم التصميم لقسمين ..
القسم الأول و هو الهيدر :
كود PHP:
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>برنامج المقالات !!</title>
</head>
<body bgcolor="#C00000">
<table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
<tr>
<td align="center" width="25%" bgcolor="#EFEFEF">
<font><b>خيارات لوحة التحكم</b></font>
<br><br>هنا ستوضع أوامر و خيارات لوحة التحكم<br><br><br>
</td>
<td align="center" width="100%" bgcolor="#FFFFFF">
<font><b>
و القسم الثاني و هو الفوتر :
كود PHP:
</b></font>
</td>
</tr>
</table>
</body>
</html>
طبعاً ستلاحظون أنه فصل التصميم في منطقة متغيرة و هي العمود الثاني ..
و سأعطيكم مثال للفنكشن الذي سنعمله بملف template.php ..
كود PHP:
<?php
function top() {
include("config.php");
?>
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title><?php echo"$sitename";></title>
</head>
<body bgcolor="#C00000">
<table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">
<tr>
<td align="center" width="25%" bgcolor="#EFEFEF">
<font><b>خيارات لوحة التحكم</b></font>
<br><br>هنا ستوضع أوامر و خيارات لوحة التحكم<br><br><br>
</td>
<td align="center" width="100%" bgcolor="#FFFFFF">
<font><b>
<?php
}
function bottom() {
include("config.php");
?>
<br><br>
<?php echo"$sitemail";>
</b></font>
</td>
</tr>
</table>
</body>
</html>
<?php
}
?>
هذه الطريقة لعمل الفنكشن و تلاحظون أننا عملنا فنكشن إسمه top و آخر bottom ..
بالنسبة للطريقة هي ثابتة لكن يمكن تغيير مسمى top أو bottom إلى أي شيء أو حتى إضافة فنكشن جديد بمسمى آخر لكن على غرار الطريقة السابقة ..
تلاحظون في المثال السابق أننا عملنا include لملف الكونفق ..
و هذه الطريقة المتعارف عليها لإدراج أي ملف داخل ملف php ..
طبعاً نحن عملنا إدراج لملف الكونفق لنستفيد بما فيه من متغيرات و أوامر إتصال ..
طبعاً كما تلاحظون حذفنا إسم البرنامج الذي كان داخل وسم <title> ووضعنا أمر عرض المتغير $sitename ..
و الطريقة التي إستخدمت هي الطريقة المتعارف عليها لعرض أي قيمة لمتغير ..
كذلك أدرجنا بالفنكشن السفلي بريد الموقع ..
هناك طريقة أخرى يمكن إستخدامها بملف template.php و هي نفس السابقة لكن مع تغيير بسيط :
كود PHP:
<?php
function top() {
include("config.php");
echo "<html dir='rtl'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1256'>
<title>$sitename</title>
</head>
<body bgcolor='#C00000'>
<table border='1' cellpadding='0' cellspacing='0' width='100%' bgcolor='#000000'>
<tr>
<td align='center' width='25%' bgcolor='#EFEFEF'>
<font><b>خيارات لوحة التحكم</b></font>
<br><br>هنا ستوضع أوامر و خيارات لوحة التحكم<br><br><br>
</td>
<td align='center' width='100%' bgcolor='#FFFFFF'>
<font><b>";
}
function bottom() {
include("config.php");
echo "<br><br>
$sitemail
</b></font>
</td>
</tr>
</table>
</body>
</html>";
}
?>
طبعاً ستلاحظون أننا وضعنا التصميم داخل أمر العرض echo ..
مع مراعاة أننا غيرنا جميع علامات التنصيص بكود الهتمل من " إلى ' ..
حيث لا يمكن إستخدام نفس علامتي التنصيص داخل بعض ..
يعني مو ممكن نعمل كذا مثلاً :
كود PHP:
echo "<html dir="rtl">";
بل نعملها إما :
كود PHP:
echo "<html dir='rtl'>";
أو نضع \ قبل علامة التنصيص الداخلية كمثال :
كود PHP:
echo "<html dir=\"rtl\">";
كما أننا حذفنا أمر العرض للمتغيرات لأننه أصلاً كود الهتمل داخل أمر php فلا يمكن وضع أوامر php داخل أوامر php ..
أتمنى تكون الصورة واضحة ..
طبعاً لو إفترضنا أننا عدلنا بملف الكونفق و أضفنا متغيرات مثلاً ليصبح :
كود PHP:
<?php
$dbserver="localhost";
$dbusername="";
$dbpassword="";
$dbname="reda";
$password="123456789";
$sitename="صفحة رضا
الشخصية";
$siteurl="www.domain.com";
$sitemail="reda1@flashmail.com";
$color1="#C00000";
$color2="#000000";
$color3="#EFEFEF";
$color4="#FFFFFF";
mysql_connect($dbserver,$dbusername,$dbpassword);
mysql_select_db($dbname);
?>
طبعاً مثل ما تلاحظون أضفنا متغيرات للألوان و ممكن نستفيد منها بالشكل التالي :
كود PHP:
<?php
function top() {
include("config.php");
echo "<html dir='rtl'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1256'>
<title>$sitename</title>
</head>
<body bgcolor='$color1'>
<table border='1' cellpadding='0' cellspacing='0' width='100%' bgcolor='$color2'>
<tr>
<td align='center' width='25%' bgcolor='$color3'>
<font><b>خيارات لوحة التحكم</b></font>
<br><br>هنا ستوضع أوامر و خيارات لوحة التحكم<br><br><br>
</td>
<td align='center' width='100%' bgcolor='$color4'>
<font><b>";
}
function bottom() {
include("config.php");
echo "<br><br>
$sitemail
</b></font>
</td>
</tr>
</table>
</body>
</html>";
}
?>
أتمنى تكون التعديلات واضحة و الغرض فهم ؟!! ..
طبعاً الآن مجرد تغير القيمة من ملف الكونفق سيتغير التصميم أو الكلام اللي فيه فهذه ستسهل عليك الكثير من الأمور إن شاءالله ..
فمثلاً لو كنت مستخدم اللون الأحمر بتصميمك 10 مرات فلن تضطر مستقبلاً لو تريد تغييره للأخضر أن تعدل ال 10 مواضع بل يكتفي فقط بتغيير قيمة المتغير الخاص بهذا اللون ..
إن شاءالله يكون الدرس واضح ..
و واجب اليوم عمل ملف template.php غير اللي سويته مع وضع متغيرات و عمل فنكشن هيدر و فوتر و فنكشن ثالث عبارة عن مربع حفظ الحقوق ..