dimanche 28 octobre 2012

تعلم إنشاء سكربت PHP


المتطلبات


 سرفر شخصي :

يمكنك تحميل السرفر الذي تشاء:
http://www.appservnetwork.com/
 config  برمجة ملف 


ملف الكونفج هو أبسط ملفات السكربت (هذا لأننا سوف نبرمجه بكل بساطة وسهولة ملف إتصال بالقاعدة) ..
اولاً : انشأ ملف جديد باسم 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 جدول المقالات ..
CREATE  TABLE  `db`.`articles` ( `idINT NOT  NULL  AUTO_INCREMENT  PRIMARY  KEY ,
 `
titleVARCHAR255  )  NOT  NULL ,
 `
authorVARCHAR255  )  NOT  NULL ,
 `
articleLONGTEXT NOT  NULL ENGINE  =  MYISAM 
والجدول الآخر جدول التعليقات comments

كود:
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 - لون الخلفية : رصاصي .

كود:
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">
&copy روابط في بي - إيهاب عصام
</div>
</div>
</body>
</html>
صفحة الرئيسية index.php :
<?phpinclude("header.php");
include(
"footer.php");?>


عرض آخر 3 مقالات ..
القائمة الجانبية

اولاً : التنسيق بالسي إس إس ..

الأول لازم نعمل مكان لعرض المقالات او محتوى الصفحة بعيداً عن القائمة الجانبية يعني القائمة الجانبية يسار و المحتوى يمين ..
يبقى نسويه المحتوى ونسويله إطار خارجي منقط
ونسوي ايضاً القائمة اليمنى
..
الكود:

كود:
#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;
}

المهم راح نفصل كود إحضار الهيدر عن كود إحضار الفوتر هكذا :
<?phpinclude("header.php");?>
<?php
include("footer.php");?>
لكي نضع بينهم الأكواد
الآن كود القائمة اليمين
كود:
<br />
<br />
<br />
<div id="rightblock">
<div class="headmenu">روابط الموقع</div>
<div class="links">
الرئيسية
<br />
روابط في بي
<br />
إيهاب عصام
</div>
</div>

ليش عملنا 3 إنتر (يعني ليش نزلنا 3 سطور) ؟
لكي لا يندمج الهيدر مع القائمة اليمين ويصير الشكل
الحين نضع وسم بداية الجسم الخاص بالصفحة (القائمة الشمال محتوى الصفحة بمعنى اوضح) ..
<div id="bodyarea" align="left"
الحين نضع امر الإحضار من قاعدة اليبانات على شرط احضار آخر 3 اخبار فقط
<?php
$select 
mysql_query("SELECT * FROM  articles Order by id DESC limit 0,3");
ثم إلى حلقة التكرار
While($row mysql_fetch_assoc($select)){ 
ثم بداخل حلقة التكرار نسوي عرض للمقالات .
$article substr($row['article'],0,200);
echo 
'<div id="article" align="center">
<h3>'
.$row['title'].'</h3>
<p>
'
.$article.'..
<br />
<a href="article.php?id='
.$row['id'].'">تفاصيل المقال</a>
</p>
</div>'
;
نعرض فقط اول 200 حرف من المقال .
طيب الحين لو مافيش مقالات أضيفت يجب ان نسوي شرط ..
if(@mysql_num_rows($select) == 0){
echo 
'<div id="article" align="center">
<p>
لا يوجد مقالات مضافة حالياً
<br />
رجاءاً عاود الزيارة لاحقاً
</p>
</div>'
;
ثم نغلق وسم البي إتش بي وديفجن المحتوى
?></div> 

إضافة مقال من أ إلى ي ..
البداية : ..
صفحة عادية جداً هنسميها addarticle.php بس ياريت نحطها في مجلد خاص وتسوي عليها فايروول .. انا هعملها في مجلد اسمه admin
المهم .,.
ننسخ الملفات :
هيدر وفوتر و سي إس إس
مع تعديل بسيط على الهيدر بكتابة :
include("../config.php"); 
بدلاً من
include("config.php"); 
محتوى الصفحة دي:
[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 يعني لو نزلنا سطر في كتابة المقال يحافظ عليه مع عدم قبول اي اكواد اتش تي إم إل للحماية + الشكل الجيد لرئيسية المقالات ..
<?phpinclude("header.php");$title $_POST['title'];$author $_POST['author'];$article nl2br(htmlspecialchars($_POST['article']));$insert mysql_query("INSERT INTO articles SET title = '".$title."' , author = '".$author."' , article = '".$article."' ");
if(
$insert){
echo 
'<br /><br /><br /><font color="green">تم الإنشاء بنجاح</font>';
}else{
echo 
'<br /><br /><br /><font color="red">خطأ اثناء عملية الإنشاء</font>';
}
include(
"footer.php");?>


نفتح صفحة article.php
ونروح عند اخر نقطة بعد إظهار المقال مباشرة ونكتب :

echo '
<div id="article" align="center">
<form method="post">
عنوان التعليق : <input type="text" name="title" /><br />
اسمك  : <input type="text" name="name" /><br />
التعليق : <textarea name="comment"></textarea><br />
<input type="submit" value="اضف التعليق !" />
</form>
</div>
'
سوف يكون الشكل هكذا :

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

if($_POST){$insert mysql_query("INSERT INTO `comments` (
`id` ,
`title` ,
`author` ,
`comment` ,
`aid`
)
VALUES (
NULL , '$title', '$name', '$comment', '$id'
);
"
);
if(
$insert){
echo 
"<font color='green'>تم الإنشاء بنجاح !<font>";
}} 
طيب نبي نعرض التعليقات بس تكون فوق اضافة تعليق نيجي فوق اظهار اضافة تعليق ونبدأ بأمر إظهار التعليقات

$selectc mysql_query("SELECT * FROM comments where aid = '".$id."'");
WHILE(
$rc mysql_fetch_assoc($selectc)){
echo 
'<div id="article" align="center"><b>
الاسم : '
.$rc['author'].' - عنوان التعليق : '.$rc['title'].'<br />
'
.$rc['comment'].'
</b></div>'
;
إنتهى .































6 commentaires:

  1. المشكلة
    لانستطيع رؤية صور الموضوع
    ؟؟
    ارجو اعادة رفعها :(

    RépondreSupprimer
  2. اشهار المواقع و السيو
    شركة مكسيوجى للتسويق الالكترونى والسيو واشهار المواقع تقوم بتسويق المواقع بطرق متطورة وتتوافق مع محركات البحث حتى يظهر موقعك فى مقدمات البحث فى اقل وقت ممكن
    شركة تسويق الكتروني
    اشهار مواقع

    اتصل بنا على

    002/01010116604

    http://mixseogy.com/

    RépondreSupprimer
  3. الان من خلال شركة سوقنى نقدم المزيد من عروض التسويق الالكتروني بتقنيات تجعل موقعكم يظهر فى النتائج الاولى فى اسرع وقت ممكن للمزيد تابعونا على الفور
    http://www.swaqny.com/
    002_01008745590

    RépondreSupprimer
  4. Interesting Article. Hoping that you will continue posting an article having a useful information. برمجة المواقع

    RépondreSupprimer
  5. السلام عليكم
    ممكن اتواصل معكم على والواتساب انا في فنلندا
    00385442384337
    عماد

    RépondreSupprimer