المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : التطوير الرابع لدرس مفصل برمجة وتصميم موقع بphp+css



said
11-01-2013, بتوقيت غرينيتش 03:50 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„طھط·ظˆظٹط± ط§ظ„ط±ط§ط¨ط¹ ظ„ط¯ط±ط³ ط¨ط±ظ…ط¬ط© ظˆطھطµظ…ظٹظ… ظ…ظˆظ‚ط¹ ط¨php+css (http://www.dzbatna.com/t1685662/)







كنا قد شرح طريقةنا زوار موقعنا الكرام التطوير الثالث على هذا الرابـــــــــط (http://www.advphp.com/phpbeginnerssection/257-code-asite-using-php-and-css-version3)

وفيه تعرفنا على المخطط الهيكلى لكيفية برمجة لوحة التحكم , وشرح طريقةنا نظام الفريمات لتقسيم اللوحة
بشكل مفصل



نستكمل معكم زوار موقعنا الكرام التطوير الثالث, وكنا قد انهينا فى الدرس مفصل السابق الجزء الثانى الخاص
بنظام الفريمات ........

نكمل على بركة الله .........

الجزء الثالث: شرح طريقة برمجة ملفات لوحة التحكم والتحكم بالمقالات

دعونا أولا كما عودناكم دائما ان نضع مخطط لما سوف سيتم انجازه سويا


http://www.advphp.com/tuts/final3/cp1.jpg

اولا: انشاء قاعدة البيانات الخاصه بتخزين المقالات

1-اذهب لنفس القاعده التى قمنا بأنشاءها والتى سميناها فى الدرس مفصل السابق final3
ومن أمر sql من فوق, راح نضيف أمر عمل جدول واسمه news وبه الاعمده

id
title: لتخزين عنوان المقال
content:لتخزين محتوى المقال
author: لتخزين كاتب المقال
date :لتخزين تاريخ كتابة المقال

رمز Code:
CREATE TABLE `news` ( `id` int(11) NOT NULL auto_increment, `title` text NOT NULL , `content` text NOT NULL, `author` text NOT NULL, `date` datetime NOT NULL default '00-00-0000 00:00:00', PRIMARY KEY (`id`) ) TYPE=MyISAM AUTO_INCREMENT=10 ;
http://www.advphp.com/tuts/final3/cp2.jpg


ثانيا: عمل ملف الاتصال بقاعدة البيانات وراح نسميه site.inc.php

وقم بوضعه داخل مجلد final3

وهذا هو كود codeه :

رمز Code:
<? $confg['db_uname'] = &quot;root&quot;; $confg['db_paswd'] = &quot;root&quot;; $confg['db_host'] = &quot;localhost&quot;; $confg['db_dbase'] = &quot;final3&quot;; function db_login() { global $confg; $link = @mysql_connect($confg['db_host'], $confg['db_uname'], $confg['db_paswd']) or die(&quot;Error connecting: &quot; . mysql_error()); @mysql_select_db($confg['db_dbase'], $link); mysql_query(&quot;set names 'utf8';&quot;); } function db_logout() { @mysql_close($link); } ?>

طبعا فى الاول حددنا متغيرات اسم الهوست واليوزر وباسورد القاعده واسم قاعدة البيانات

رمز Code:
$confg['db_uname'] = &quot;root&quot;; $confg['db_paswd'] = &quot;root&quot;; $confg['db_host'] = &quot;localhost&quot;; $confg['db_dbase'] = &quot;final3&quot;;

ثم قمنا بعمل فانكشن لتنفيذ أمر الاتصال بقاعدة البيانات

رمز Code:
function db_login() { global $confg; $link = @mysql_connect($confg['db_host'], $confg['db_uname'], $confg['db_paswd']) or die(&quot;Error connecting: &quot; . mysql_error()); @mysql_select_db($confg['db_dbase'], $link); mysql_query(&quot;set names 'utf8';&quot;); }
ولاحظ اخر جملة joomla لارسال الاستعلام بترميز utf-8 ليتم تخزين البيانات بهذا الترميز




ثالثا: برمجة ملف الاندكس index.php الخاص بلوحة التحكم

نشوف كود codeه الاول ثم نشرح طريقةه:

رمز Code:
<? session_start(); if(!session_is_registered(myusername)){ header(&quot;location:../login.php&quot;); } ?> <?php include(&quot;frame.html&quot;); ?>

فى هذا الملف اللى راح نضعه داخل مجلد admincp, راح يكون كود codeه بسيط
وهو عباره انكلود لجلب ملف frame.html اللى سويناه فى الدرس مفصل السابق
الخاص بتقسيم لوحة التحكم



ويسبق هذا الكود code جلسة لتقوم بتسجيل جلسة تسجيل الدخول لهذه المنطقه المحميه , بحيث يتم
الدخول للوحة التحكم عن طريق نموذج تسجيل الدخول فقط login.php


طبعا كنا فى الدرس مفصل السابق قد قمنا بعمل الثلاث ملفات وهم frame.html,admin.html,page1.html
ولكن لم نقوم بعمل الكود code الخاص بالملفين admin.html وpage1.html


اولا: نشوف كود code ملف admin.html


رمز Code:
<div id=&quot;wrapper&quot;> <h3>لوحة التحكم</h3> <div id=&quot;sidebar&quot;> <li><a target=&quot;_top&quot; href=&quot;index.php&quot;>الرئيسية</a></li> <br> <br> <h3>ادارة المقالات</h3> <li><a href=&quot;admin/list.php&quot; target=&quot;left&quot;>تعديل وحذف </a></li> <li><a href=&quot;admin/add.php&quot; target=&quot;left&quot;>اضافة مقال</a></li> <li><a href=&quot;#&quot;>link</a></li> <li><a href=&quot;#&quot;>link</a></li> </div> </div>
ونضيف لهذا الكود code بعض التجميل ب css فى نفس الصفحة

رمز Code:
<style type=&quot;text/css&quot;> #body{ background-color:#999999; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; } #sidebar{ width:200px; height:500px; list-style:none; text-decoration:none; padding-left:10px; } </style>

بحيث ستظهر القائمه اليمنى للوحة التحكم بالشكل الاتى :


http://www.advphp.com/tuts/final3/cp3.jpg



ثانيا: نشوف كود code ملف page1.html


رمز Code:
<h1 style=&quot;text-align:center;&quot;>أهلابك فى لوحة التحكم</h1> <h5 style=&quot;border-bottom:1px solid #eeeeee;&quot;><a style=&quot;text-decoration:none;&quot; target=&quot;_top&quot; href=&quot;index.php&quot;> عوده لرئيسية لوحة التحكم</a> </h5> <h4 style=&quot;text-align:left;&quot;><a style=&quot;text-decoration:none;&quot; target=&quot;_top&quot; href=&quot;logout.php&quot;>تسجيل الخروج</a></h4>

طبعا الكود code بسيط, وانا بعتذر عن تجميل الكود code داخل الاوسمه لانى لا احب هذه الطريقه, لكن وجدت الملف حجمه صغير فى كود codeه , قلنا ما راح تأثر كثير

بس فيه ملاحظه مهمه أريدكم تتعلموها, وهى ملاحظة عبارة target وانى سويتها top_ وهى مهمه جدا

لانك لو ماسويت هيك, عند الضغط على لنك تسجيل الخروج او العوده , راح تجد ان الصفحة تعود
بداخل الفريم الايسر فقط, وليس الصفحة كلها, لذلك لنتجنب هذه المشكله , نقوم بعمل الهدف target
هو العوده لكافة الصفحة ككل top_



بعد ما سوينا كود code صفحة page1.html راح يظهر يسار لوحة التحكم كالاتى:


http://www.advphp.com/tuts/final3/cp4.jpg

----------------------------------------

رابعا:برمجة ملفات التحكم بالمقالات

كنا سوينا مجلد فى الدرس مفصل السابق اسمه admincp, الحين بداخل هذا المجلد
قم بعمل مجلد اسمه admin , وراح نقوم بداخله بوضع ملفات التحكم بالمقالات من لوحة التحكم

add.php
list.php
edit.php
delete.php


اولا: برمجة ملف add.php

وهذا هو كود code هذه الصفحة :

رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>اضافة مقال جديد</title> </head> <?php require_once(&quot;../../site.inc.php&quot;); //Calls in the previous file we created // form not yet submitted // display initial form if (!$submit) { ?> <div style=&quot; direction:rtl;margin-right:10px;&quot;> اضافة مقال جديد<br /> <form action=&quot;<? echo $PHP_SELF; ?>&quot; method=&quot;POST&quot;> <input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;id&quot;> العنوان<br /> <input size=&quot;50&quot; maxlength=&quot;60&quot; type=&quot;text&quot; name=&quot;title&quot;><br /> المقال<br /> <textarea name=&quot;content&quot; cols=&quot;38&quot; rows=&quot;10&quot;> </textarea> <br /> اسم الكاتب<br /> <input size=&quot;50&quot; maxlength=&quot;250&quot; type=&quot;text&quot; name=&quot;author&quot;> <br /> <input type=&quot;Submit&quot; name=&quot;submit&quot; value=&quot;اضف المقال&quot;> </form> </div> <? } else { //set up error array $err = array(); $count = 0; //validate the user text input fields if (!$title) { $err[$count] = &quot;Invalid entry: title&quot;; $count++; } if (!$content) { $err[$count] = &quot;Invalid entry: content&quot;; $count++; } if (!$author) { $err[$count] = &quot;Invalid entry: author&quot;; $count++; } // if no error found... if (sizeof($err) == 0) { db_login(); //we defined this function in site.inc.php // generate and execute query to insert the post $query = &quot;INSERT INTO news(id, title, content, author, date) VALUES(0, '$title', '$content', '$author', NOW())&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error()); // print result echo &quot;تم اضافة المقال <a href='list.php'>العوده لقائمة المقالات</a>.&quot;; } else { // errors found // print as list echo &quot;<font size=-1>حدث خطأ غير متوقع <br>&quot;; echo &quot;<ul>&quot;; for ($x=0; $x<sizeof($errorList); $x++) { echo &quot;<li>$errorList[$x]&quot;; } echo &quot;</ul></font>&quot;; } } ?>


شرح طريقة الكود code بأختصار:

اولا: الاتصال بالقاعدة +عمل فورم ادخال البيانات وكتابتها


رمز Code:
<?php require_once(&quot;../../site.inc.php&quot;); //Calls in the previous file we created // form not yet submitted // display initial form if (!$submit) { ?> <div style=&quot; direction:rtl;margin-right:10px;&quot;> اضافة مقال جديد<br /> <form action=&quot;<? echo $PHP_SELF; ?>&quot; method=&quot;POST&quot;> <input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;id&quot;> العنوان<br /> <input size=&quot;50&quot; maxlength=&quot;60&quot; type=&quot;text&quot; name=&quot;title&quot;><br /> المقال<br /> <textarea name=&quot;content&quot; cols=&quot;38&quot; rows=&quot;10&quot;> </textarea> <br /> اسم الكاتب<br /> <input size=&quot;50&quot; maxlength=&quot;250&quot; type=&quot;text&quot; name=&quot;author&quot;> <br /> <input type=&quot;Submit&quot; name=&quot;submit&quot; value=&quot;اضف المقال&quot;> </form> </div> <? } else






والحين راح نضيف كود code للتحقق من المدخلات فى الفورم

ولاحظ انها راح تكون عبارة عن مصفوفة
بحيث انه لو لم يتم ادخال اى قيم فى اى فورم راح يعطى عبارة ان الحقول فارغة

ولو كانت الفورمز كلها مدرج بها اى عبارة, راح نسوى حالة if بحيث لو حجم مصفوفة الخطأ =0 اى انه لا يوجد اى خطأ, راح نتصل بالقاعدة وندخل البيانات فى الفورمز فى قاعدة البيانات

نشوف الكود code



رمز Code:
{ $err = array(); $count = 0; if (!$title) { $err[$count] = &quot;Invalid entry: title&quot;; $count++; } if (!$content) { $err[$count] = &quot;Invalid entry: content&quot;; $count++; } if (!$author) { $err[$count] = &quot;Invalid entry: author&quot;; $count++; } if (sizeof($err) == 0) {


واخيرا الاتصال وتخزين البيانات فى القاعدة


رمز Code:
db_login(); //we defined this function in site.inc.php // generate and execute query to insert the post $query = &quot;INSERT INTO news(id, title, content, author, date) VALUES(0, '$title', '$content', '$author', NOW())&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error()); // print result echo &quot;تم اضافة المقال <a href='list.php'>العوده لقائمة المقالات</a>.&quot;; } else { // errors found // print as list echo &quot;<font size=-1>حدث خطأ غير متوقع <br>&quot;; echo &quot;<ul>&quot;; for ($x=0; $x<sizeof($errorList); $x++) { echo &quot;<li>$errorList[$x]&quot;; } echo &quot;</ul></font>&quot;; } } ?>

الحين محتاجين لعمل صفحة لامكانية تعديل الموضوع او حذفه,

راح نسوى صفحة بها لست لادراج كافة المواضيع المضافة مع اضافة خيار التعديل او الحذف

وراح نسميها list.php

وانا شارح الكود code بداخله

رمز Code:
<div style=&quot;direction:rtl;&quot;> <? //جلب ملف الاتصال بقاعدة البيانات include(&quot;../../site.inc.php&quot;); //تنفيذ أمر الاتصال بقاعدةالبيانات db_login(); //اختيار عنوان المقالات وجلبها من القاعده $query = &quot;SELECT id, title FROM news ORDER BY id DESC&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error()); //جلب عناوين المقالات if (mysql_num_rows($result) > 0) { while($send = mysql_fetch_object($result)) { echo&quot; $send->title - <a href='edit.php?id=$send->id'>تعديل المقال</a> - <a href='delete.php?id=$send->id'>حذف المقال</a><br /><br />&quot;; } } ?> </div>



الحين نقوم بعمل ملف edit.php الخاص بتعديل المقالات المخزنه بالفعل داخل قاعدة البيانات



شوف الملف وشرح طريقةه بداخله

رمز Code:
<? //جلب ملف الاتصال بقاعدة البيانات include(&quot;../../site.inc.php&quot;); //فى حالة عدم الضغط على زرالتحديث update سوف يتم الاتصال بقاعدة البيانات if (!$submit) { db_login(); //اختيار كافة البيانات من جدول الاخبار $query = &quot;SELECT * FROM news WHERE id = '$id'&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error()); //اذا تم ايجاد مقالات مخزنه if (mysql_num_rows($result) > 0) { // حول هذه البيانات المخزنه فى هذا المتغير $send = mysql_fetch_object($result); //الخطوه القادمه لعمل الفورم بداخله البيانات اللى سيتم جلبها من جدول الاخبار ?> <!-- السابق لجلب البيانات من الجدول لاحظ بنفسك اوامر البى اتش بى وكيف سندخل للمتغير--> <div style=&quot;direction:rtl;&quot;> <h3>تعديل المقال</h3> <form action=&quot;<? echo $PHP_SELF; ?>&quot; method=&quot;POST&quot;> <input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;<? echo $send->id; ?>&quot;> عنوان المقال:<br /> <input size=&quot;50&quot; maxlength=&quot;250&quot; type=&quot;text&quot; name=&quot;title&quot; value=&quot;<? echo $send->title; ?>&quot;><br /> نص المقال:<br /> <textarea name=&quot;content&quot; cols=&quot;40&quot; rows=&quot;10&quot;><? echo $send->content; ?></textarea><br /> كاتب المقال:<br /> <input size=&quot;50&quot; maxlength=&quot;250&quot; type=&quot;text&quot; name=&quot;author&quot; value=&quot;<? echo $send->author; ?>&quot;><br /> <input type=&quot;Submit&quot; name=&quot;submit&quot; value=&quot;تحديث update&quot;> </form> </div> <? } // اذا لم يتم جلب اية بيانات else { echo &quot;<font size=-1>هذا المقال غير موجود</font>&quot;; } } // سيتم تحديث update البيانات فى الاوامر القادمه else { $errorList = array(); $count = 0; if (!$title) { $errorList[$count] = &quot;Invalid entry: title&quot;; $count++; } if (!$content) { $errorList[$count] = &quot;Invalid entry: content&quot;; $count++; } if (!$author) { $errorList[$count] = &quot;Invalid entry: author&quot;; $count++; } if (sizeof($errorList) == 0) { db_login(); // تنفيذ خطوة تحديث update بيانات المقال المخزنه بالقاعده بعد التحقق بالاوامر السابقة من خلو المقال من اية اخطاء $query = &quot;UPDATE news SET title = '$title', content = '$content', author = '$author' WHERE id = '$id'&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error()); // رسالة تأكيد التحديث update للبيانات echo &quot;<font size=-1>تم تحديث update بيانات المقال<a target='_top' href=../index.php>عوده للرئيسية </a>.</font>&quot;; } else { // errors occurred // print as list echo &quot;<font size=-1>لقد حدث خطأ غير متوقع <br>&quot;; echo &quot;<ul>&quot;; for ($x=0; $x<sizeof($errorList); $x++) { echo &quot;<li>$errorList[$x]&quot;; } echo &quot;</ul></font>&quot;; } } ?>

بحيث راح نشوف شكل الصفحة كالاتى بعد زر تعديل المقال

http://www.advphp.com/tuts/final3/cp5.jpg

نأتى الان لصفحة حذف المقالات واسمها delete.php

رمز Code:
<? //جلب ملف الاتصال بقاعدة البيانات include(&quot;../../site.inc.php&quot;); // تنفيذ فانكشن الاتصال الموحوده بالملف السابق الذى تم جلبه db_login(); // تنفيذ أمر حذف المقال من جدول الاخبار $query = &quot;DELETE FROM news WHERE id = '$id'&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error()); // رسالة تأكيد الحذف echo &quot;<font size=-1>تم الحذف بنجاح <a href=list.php>عودة لقائمة المقالات</a>.</font>&quot;; ?>

بهيك تقريبا نكون انتهينا من الصفحات التحكم المقال من لوحة التحكم





الجزء الرابع : شرح طريقة طريقة عرض المقالات عن طريق لوحة التحكم بالرئيسية


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


اولا: حتى نقوم بعرض المقالات المخزنه فى قاعدة البيانات وعرضها بالرئيسية , علينا ان نقوم ببرمجة
ملف خاص بجلب البيانات من القاعدة

لذلك قم بعمل ملف اسمه article.php داخل مجلد الموقع final3

وهذا هو كود codeه :

رمز Code:
<? include(&quot;site.inc.php&quot;); db_login(); //Generate the query so we can retrieve all titles in the DB in descending ID order $query = &quot;SELECT id,title,content,author,date FROM news ORDER BY id DESC&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error()); // if records are present if (mysql_num_rows($result) > 0) { while($send = mysql_fetch_object($result)) { ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>test</title> </head> <table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> <tr> <td> <?php echo&quot;$send->content&quot;; ?> </td> </tr> <tr> <?Php echo &quot;$send->author&quot;; }} ?> </tr> <br> </table>

شرح طريقة الملف:

1-الاتصال بقاعدة البيانات وجلب كافة أعمدة جدول الاخبار


رمز Code:
include(&quot;site.inc.php&quot;); db_login(); $query = &quot;SELECT id,title,content,author,date FROM news ORDER BY id DESC&quot;; $result = mysql_query($query) or die (&quot;Error in query: $query. &quot; . mysql_error());

2-لو تم ايجاد مقال سوف يتم عمل لوب لجلب كافة المقالات ,وسنخزن هذه المقالات التى تم جلبها فى
المتغير send$

رمز Code:
if (mysql_num_rows($result) > 0) { while($send = mysql_fetch_object($result)) {
3-بداخل هذا اللوب, سوف نقوم بعمل جدول table والذى بداخله سوف نقوم بالدخول للمتغير send اللى خزنا به المقالات, لنقوم بجلب محتوى وكاتب المقال

رمز Code:
?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>test</title> </head> <table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> <tr> <td> <?php echo&quot;$send->content&quot;; ?> </td> </tr> <tr> <?Php echo &quot;$send->author&quot;; }} ?> </tr> <br> </table>



الحين نكون انتهينا من برمجة هذا الملف,



بعد هيك , نروح لملف الاندكس الرئيسى للموقع نفسه index.php ونقوم بفتحه

وسوف نقوم بعمل انكلود لجلب الملف السابق article.php ليقوم بعرض المقالات المخزنه
بقاعدة البيانات

رمز Code:
<div id=&quot;content&quot;> <a href=&quot;#&quot;><h3>||المقـالات المضافة حديثا||</h1></a> <?php include(&quot;article.php&quot;); ?> </div>

طبعا بقية كود code index.php ماحبيت اضعه لانه تم شرح طريقةه فى الدروس السابقه ........

فى النهاية , مبروك عليك , سوف تظهر لك المقالات المخزنه بقاعدة البيانات

http://www.advphp.com/tuts/final3/cp6.jpg



لتحميل ملفات الموقع كاملة : اضـــغــــط هــــنـــــا (http://www.advphp.com/tuts/final3/final3.rar)


ترقبوا التطوير القادم , وفيه سوف نقوم بتجميل لوحة التحكم واضافة تحسينات برمجية أفضل بكثير

بالتوفيق


أخوكم vista-design














ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى