المتطلبات
سرفر شخصي :
يمكنك تحميل السرفر الذي تشاء:
http://www.appservnetwork.com/
config برمجة ملف
ملف الكونفج هو أبسط ملفات السكربت (هذا لأننا سوف نبرمجه بكل بساطة وسهولة ملف إتصال بالقاعدة) ..
اولاً : انشأ ملف جديد باسم config.php
ثانياً : إبدأ في البرمجة
اولاً : انشأ ملف جديد باسم config.php
ثانياً : إبدأ في البرمجة
<?php
$host= "localhost"; //خادم قواعد البيانات
$user="root";//اسم مستخدم قواعد البيانات$pass="1";//كلمة المرور$db="db";//قاعدة البيانات$con = mysql_connect($host,$user,$pass);//امر الإتصال بخادم قواعد البيانات$con2=mysql_select_db($db,$con);//امر تحديد قاعدة البيانات?>
تمهيد لبداية برمجة السكربت ..
اولاً : ادخل : http://localhost/phpmyadmin طبعاً بعد تشغيل الأباتشي الخاص بك ..
ثم أنشأ قاعدة بيانات كما وضعتها بالكونفج :
.
نضغط هنا
لزرع كود الجدول
الجدول : articles جدول المقالات ..
والجدول الآخر جدول التعليقات comments
اولاً : ادخل : http://localhost/phpmyadmin طبعاً بعد تشغيل الأباتشي الخاص بك ..
ثم أنشأ قاعدة بيانات كما وضعتها بالكونفج :
.نضغط هنا
لزرع كود الجدولالجدول : articles جدول المقالات ..
|
كود:
CREATE TABLE `db`.`comments` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title` VARCHAR( 255 ) NOT NULL ,
`author` VARCHAR( 255 ) NOT NULL ,
`comment` TEXT NOT NULL ,
`aid` INT NOT NULL
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
التخطيط :
1 - برمجة ملف التصميم style.css
2- برمجة ملف الهيدر .
3 - برمجة ملف الفوتر ..
4- بداية برمجة ملف الإندكس .. عرض الهيدر + الفوتر
ثانياً : البداية في برمجة ملف التصميم style.css :
اولاً : جسم الصفحة :
نحدد فيه:
1- نوع الخط : tahoma.
2 - حجم الخط : 12 .
3 - لون الخلفية : رصاصي .
الحين جا دور محتوى صفحتنا .. يعني نسوي صفحتنا ..
الأول المقاس : العرض 98 %
+اللون : ابيض
+ هامش يمين : 10
+هامش شمال : 10
الحين جه دور الهيدر بس الهيدر لا بد يكون داخل الصفحة مو جسم الصفحة ..
مواصفات الهيدر عرض 100 % + طول 100 بكسل
بس لون الهيدر ! .. اختر افضل لون من هنا
ولكن انا اخترت .. ازرق فاتح سنة بسيطة ..#3399CC ..
لون الخط ابيض ..
الكود :
جيد نوعاً ما ..
الحين ننشأ مكاناً للإعلان بس راح يكون في الهيدر فقط ..
فقط راح نحدد انه راح يكون في اليسار ..
عائم ناحية اليسار
الحين بعد إضافة الإعلان :
.. يحتاج إلى ناف بار ..
النافبار تابع للهيدر ..
والنافبار سيكون مقسم لأزرار لذا فسيتكون الناف بار من اكثر من كود ..
الحين الشكل صار :
وعند المرور على اي رابط منهم يتحول اللون إلى الأبيض ..
الحين نسوي الفوتر ..
مثل الهيدر بالضبط
بس راح نصغره إلى الطول 25 بكسل ونصغر الخط طبعاً
وطبعاً لحل مشكلة إلتصاق الفوتر بالكلام سوينا هامش الفوتر من الأعلى 40 بكسل ..
تمام ..
الكود :
الحين انتهينا من الجزء الأول من ملف السي إس إس .. نكمل في الدرس القادم بالطبع ..
الحين نسوي ملف الهيدر ونسوي فيه تضمين لملف الكونفج + ملف السي إس إس ..
header.php
كود الصفحة :
الحين ننشأ صفحة الفوتر :
footer.php
صفحة الرئيسية index.php :
1 - برمجة ملف التصميم style.css
2- برمجة ملف الهيدر .
3 - برمجة ملف الفوتر ..
4- بداية برمجة ملف الإندكس .. عرض الهيدر + الفوتر
ثانياً : البداية في برمجة ملف التصميم style.css :
اولاً : جسم الصفحة :
نحدد فيه:
1- نوع الخط : tahoma.
2 - حجم الخط : 12 .
3 - لون الخلفية : رصاصي .
كود:
body {
font-family : tahoma;
font-size : 12;
}
الأول المقاس : العرض 98 %
+اللون : ابيض
+ هامش يمين : 10
+هامش شمال : 10
كود:
#page {
background-color : #fff;
width : 98%;
margin-right : 10;
margin-left : 10;
}
مواصفات الهيدر عرض 100 % + طول 100 بكسل
بس لون الهيدر ! .. اختر افضل لون من هنا
ولكن انا اخترت .. ازرق فاتح سنة بسيطة ..#3399CC ..
لون الخط ابيض ..
الكود :
كود:
#page #header {
background-color : #3399CC;
width : 100%;
height : 100px;
color : #fff;
}
جيد نوعاً ما ..
الحين ننشأ مكاناً للإعلان بس راح يكون في الهيدر فقط ..
فقط راح نحدد انه راح يكون في اليسار ..
عائم ناحية اليسار
كود:
#header #ad {
float:left;
}
.. يحتاج إلى ناف بار ..
النافبار تابع للهيدر ..
والنافبار سيكون مقسم لأزرار لذا فسيتكون الناف بار من اكثر من كود ..
كود:
#header #navbar {
font-size: 12px;
color: #333333;
background-color: #f1f1f1;
padding-right: 7px;
padding-left: 7px;
height: 26px;
margin-top : 50;
}
#header #navbar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#header #navbar ul li {
float: right;
}
#header #navbar ul li a {
font-size: 12px;
color: #666666;
text-decoration: none;
display: block;
height: 16px;
margin-left: 5px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
}
#header #navbar ul li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
}
وعند المرور على اي رابط منهم يتحول اللون إلى الأبيض ..
الحين نسوي الفوتر ..
مثل الهيدر بالضبط
بس راح نصغره إلى الطول 25 بكسل ونصغر الخط طبعاًوطبعاً لحل مشكلة إلتصاق الفوتر بالكلام سوينا هامش الفوتر من الأعلى 40 بكسل ..
تمام ..
الكود :
كود:
#page #footer {
background-color : #3399CC;
width : 100%;
height : 25px;
color : #fff;
margin-top : 40px;
}
الحين انتهينا من الجزء الأول من ملف السي إس إس .. نكمل في الدرس القادم بالطبع ..
الحين نسوي ملف الهيدر ونسوي فيه تضمين لملف الكونفج + ملف السي إس إس ..
header.php
كود الصفحة :
كود:
<?php
include("config.php");
?>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body dir="rtl">
<div id="page">
<div id="header">
روابط في بي
<div id="ad">
<img src="http://www.rawabetvb.com/UP-RAWABETVB.gif" />
</div>
<div id="navbar">
<ul>
<li><a href="index.php">الرئيسية</a></li>
<li><a href="index.php">روابط في بي</a></li>
<li><a href="index.php">إيهاب عصام</a></li>
</ul>
</div>
</div>
footer.php
كود:
<div id="footer" align="center"> © روابط في بي - إيهاب عصام </div> </div> </body> </html>
|
عرض آخر 3 مقالات ..
القائمة الجانبية
اولاً : التنسيق بالسي إس إس ..
الأول لازم نعمل مكان لعرض المقالات او محتوى الصفحة بعيداً عن القائمة الجانبية يعني القائمة الجانبية يسار و المحتوى يمين ..
يبقى نسويه المحتوى ونسويله إطار خارجي منقط
ونسوي ايضاً القائمة اليمنى
..
الكود:
المهم راح نفصل كود إحضار الهيدر عن كود إحضار الفوتر هكذا :
لكي نضع بينهم الأكواد
الآن كود القائمة اليمين
ليش عملنا 3 إنتر (يعني ليش نزلنا 3 سطور) ؟
لكي لا يندمج الهيدر مع القائمة اليمين ويصير الشكل
الحين نضع وسم بداية الجسم الخاص بالصفحة (القائمة الشمال محتوى الصفحة بمعنى اوضح) ..
الحين نضع امر الإحضار من قاعدة اليبانات على شرط احضار آخر 3 اخبار فقط
ثم إلى حلقة التكرار
ثم بداخل حلقة التكرار نسوي عرض للمقالات .
نعرض فقط اول 200 حرف من المقال .
طيب الحين لو مافيش مقالات أضيفت يجب ان نسوي شرط ..
ثم نغلق وسم البي إتش بي وديفجن المحتوى
القائمة الجانبية
اولاً : التنسيق بالسي إس إس ..
الأول لازم نعمل مكان لعرض المقالات او محتوى الصفحة بعيداً عن القائمة الجانبية يعني القائمة الجانبية يسار و المحتوى يمين ..

يبقى نسويه المحتوى ونسويله إطار خارجي منقط
ونسوي ايضاً القائمة اليمنى
..
الكود:
كود:
#page #rightblock {
float: right;
width: 170px;
height : auto;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #666666;
}
#page #rightblock .headmenu {
padding: 5px;
color: #FFFFFF;
background-color: #3399CC;
text-align: center;
margin: 5px;
}
#page #rightblock .links {
padding: 5px;
text-align: center;
border-width: 1px;
border-style: dotted;
border-color: #666666;
margin: 5px;
}
#page #bodyarea {
padding: 5px;
}
#bodyarea #article {
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
width : 75%;
background-color : #F0F0F0;
}
#page #article:hover{
background-color : #D8D8D8;
}
المهم راح نفصل كود إحضار الهيدر عن كود إحضار الفوتر هكذا :
|
الآن كود القائمة اليمين
كود:
<br /> <br /> <br /> <div id="rightblock"> <div class="headmenu">روابط الموقع</div> <div class="links"> الرئيسية <br /> روابط في بي <br /> إيهاب عصام </div> </div>
ليش عملنا 3 إنتر (يعني ليش نزلنا 3 سطور) ؟
لكي لا يندمج الهيدر مع القائمة اليمين ويصير الشكل

الحين نضع وسم بداية الجسم الخاص بالصفحة (القائمة الشمال محتوى الصفحة بمعنى اوضح) ..
|
|
|
|
طيب الحين لو مافيش مقالات أضيفت يجب ان نسوي شرط ..
|
|
إضافة مقال من أ إلى ي ..
البداية : ..
صفحة عادية جداً هنسميها addarticle.php بس ياريت نحطها في مجلد خاص وتسوي عليها فايروول .. انا هعملها في مجلد اسمه admin
المهم .,.
ننسخ الملفات :
هيدر وفوتر و سي إس إس
مع تعديل بسيط على الهيدر بكتابة :
بدلاً من
محتوى الصفحة دي:
[PHP]<?php
include("header.php");
?>
<br />
<br />
<br />
<form method="post" action="create.php" >
<div align="center">
<font color="blue">
<b>
عنوان المقال <input type="text" name="title" /><br />
الكاتب <input type="text" name="author" /><br />
المقال <textarea name="article"></textarea><br />
<input type="submit" value="انشأ" />
</b>
</font>
</div>
</form>
<?php
include("footer.php");
?>[/PHP]
فورم عادي جداً ويوجهنا لصفحة إنشاء المقال create.php
صفحة إضافة الخبر لقاعدة البيانات : ..
صفحة create.php
راح نستقبل ماكتبنا في الفورم مع الحفاظ على br يعني لو نزلنا سطر في كتابة المقال يحافظ عليه مع عدم قبول اي اكواد اتش تي إم إل للحماية + الشكل الجيد لرئيسية المقالات ..
البداية : ..
صفحة عادية جداً هنسميها addarticle.php بس ياريت نحطها في مجلد خاص وتسوي عليها فايروول .. انا هعملها في مجلد اسمه admin
المهم .,.
ننسخ الملفات :
هيدر وفوتر و سي إس إس
مع تعديل بسيط على الهيدر بكتابة :
|
|
[PHP]<?php
include("header.php");
?>
<br />
<br />
<br />
<form method="post" action="create.php" >
<div align="center">
<font color="blue">
<b>
عنوان المقال <input type="text" name="title" /><br />
الكاتب <input type="text" name="author" /><br />
المقال <textarea name="article"></textarea><br />
<input type="submit" value="انشأ" />
</b>
</font>
</div>
</form>
<?php
include("footer.php");
?>[/PHP]
فورم عادي جداً ويوجهنا لصفحة إنشاء المقال create.php
صفحة إضافة الخبر لقاعدة البيانات : ..
صفحة create.php
راح نستقبل ماكتبنا في الفورم مع الحفاظ على br يعني لو نزلنا سطر في كتابة المقال يحافظ عليه مع عدم قبول اي اكواد اتش تي إم إل للحماية + الشكل الجيد لرئيسية المقالات ..
|
نفتح صفحة article.php
ونروح عند اخر نقطة بعد إظهار المقال مباشرة ونكتب :
سوف يكون الشكل هكذا :

طيب الحين نبي نضيف التعليق !
نسوي شرط إذا ارسل الزائر تعليق يتم إضافته
طيب نبي نعرض التعليقات بس تكون فوق اضافة تعليق نيجي فوق اظهار اضافة تعليق ونبدأ بأمر إظهار التعليقات
ونروح عند اخر نقطة بعد إظهار المقال مباشرة ونكتب :
|

طيب الحين نبي نضيف التعليق !
نسوي شرط إذا ارسل الزائر تعليق يتم إضافته
|
|
إنتهى .








جزاك الله كل خير
RépondreSupprimerالمشكلة
RépondreSupprimerلانستطيع رؤية صور الموضوع
؟؟
ارجو اعادة رفعها :(
اشهار المواقع و السيو
RépondreSupprimerشركة مكسيوجى للتسويق الالكترونى والسيو واشهار المواقع تقوم بتسويق المواقع بطرق متطورة وتتوافق مع محركات البحث حتى يظهر موقعك فى مقدمات البحث فى اقل وقت ممكن
شركة تسويق الكتروني
اشهار مواقع
اتصل بنا على
002/01010116604
http://mixseogy.com/
الان من خلال شركة سوقنى نقدم المزيد من عروض التسويق الالكتروني بتقنيات تجعل موقعكم يظهر فى النتائج الاولى فى اسرع وقت ممكن للمزيد تابعونا على الفور
RépondreSupprimerhttp://www.swaqny.com/
002_01008745590
Interesting Article. Hoping that you will continue posting an article having a useful information. برمجة المواقع
RépondreSupprimerالسلام عليكم
RépondreSupprimerممكن اتواصل معكم على والواتساب انا في فنلندا
00385442384337
عماد