ابحث في هذه المدونة

الخميس، 27 سبتمبر، 2012

انشاء صفحة تسجيل دخول


مستوى الدرس: متوسط

اللغات المستخدمة: PHPSQL, HTML 
كما أفترض ان لديك معرفة مسبقة بأساسيات لغة SQL والقليل من PHP .

البرامج المستخدمة: مخدم WAMP، برنامج Adobe Dreamweaver CS5 او اي محرر "كود" برمجي .

الصفحات التي سوف ننشئها : 
Index.html 
process.php
  welcome.html
ان انشاء صفحة تسجيل دخول حقيقية ليست بالصعوبة التي تتصورها فكل الية تسجيل دخول تتشابه بالاساسيات وربما تختلف من ناحية الجرافكس او شدة الاجراءات الوقائية, في النهاية كلها تتألف من ثلاث مراحل (ادخال البيانات, التحقق من وجود البيانات في قاعدة البيانات, التصرف في حال وجودها ام عدمه) لاشيء اخر وكلها في غاية السهولة!! تابع معي:
الخطوة الاولى يجب ان ننشىء جدول في قاعدة البيانات يحتوي على جدول مكون من ثلاثة حقول (id, user, pass) وسندخل بعض المعلومات عن اسماء مستخدمين وكلمات السر كما هو موضح في الصورة:



لقد ادخل معلومات مستخدم واحد كما هو موضح , والان لننتقل الى الخطوة التالية:الخطوة الثانية انشاء الصفحات الثلاث (صفحة استقبال المعلومات, صفحة معالجة المعلومات والتحقق من وجودها في قاعدة البيانات, صفحة الترحيب في حالة كانت المعلومات صحيحة).الان لنبدأ بصفحة استقبال المعلومات وستتكون من حقلين (اسم مستخدم وكلمة السر وزر الارسال) قم بفتح محرر النصوص او برنامج التصميم وقم بكتابة شيفرة HTML التالية :


<div align="center" dir="rtl" style="background-color:#CCC;">

تسجيل الدخول
<br />
<br />

<form action="process.php" method="post">
<label> اسم المستخدم </label>
<input type="text" name="user" /><br /><br />

<label>كلمة السر </label>
<input type="password" name="pass" /><br /><br />

<input type="submit" value="تسجيل دخول"  /><br />
<br />
</form><br />

</div>


والان لنأتي الى الصفحة الثانية والاهم (صفحة المعالجة) (process.php)
قم بأنشاء ملف جديد واكتب الشيفرة التالية:




<?php
if (empty($_POST['user']) || empty($_POST['pass'])) {
echo "يرجى ملء كافة الحقول";
} else { 

 $db_name="test";
 


mysql_connect("localhost","root","");
mysql_select_db($db_name);
$result=mysql_query("SELECT  *  FROM `".$db_name."`.`users_info` WHERE `user` = '".$_POST['user']."' AND `pass` = '".$_POST['pass']."' ");
$result_a=mysql_fetch_assoc($result);
   
 
if ($result_a==0)
{
echo "هناك خطأ في اسم المستخدم او كلمة السر";
} else {
  header("Location: welcome.html");
   
}
 

 
}
?>

في البداية استخدمنا دالة empty للتحقق من عدم خلو اي حقل من البيانات والا سنظهر رسالة الخطأ, بعد ذلك استخدمنا متغير لخزن اسم قاعدة البيانات (في هذه الحالة test ) ثم بواسطة mysql_connect  قمنا بالاتصال بالمخدم عن طريق المعلومات بين الاقواس (مخدم محلي) .
بعد ذلك امرنا قاعدة البيانات بالتالي:

SELECT  *  FROM `".$db_name."`.`users_info` WHERE `user` = '".$_POST['user']."' AND `pass` = '".$_POST['pass']."'

اي استخرج كل البيانات المطابقة لاسم المستخدم المزود وكلمة السر.


من دالة mysql_fetch_assoc($result); قمنا باستخراج الاستعلام  ووضعه في متغير حيث ان قيمة الاستعلام دائما تكون منطقية, بعد ذلك نتحقق من القيمة المنطقية المستخرجة من الاستعلام حيث اذا كانت تساوي 0 تعني لايوجد تطابق ولذلك نظهر رسالة الخطأ واما غير ذلك يتم توجيه المستخدم ال رسالة الترحيب عن طريق الدالة header();
حيث دالة $_POST تستخرج المعلومات المرسلة من النموذج السابق.

الان لنجرب ادخال البيانات الصحيحة (اسم المستخدم: admin وكلمة السر: tictactoe):

ولنجرب ادخال معلومات غير صحيحة (مثلا: اسم المستخدم: ali وكلمة السر: password):



أنتهينا ! درس سهل اليس كذلك؟ :)


المثال متوفر للتحميل : https://docs.google.com/open?id=0B38AluNyPIRSMGZadS1GS0NKTTQ

الثلاثاء، 25 سبتمبر، 2012

المصادر الحرة 2.5 , نظرة عن كثب.

مايقارب 5700 سطر برمجي اساسي تمت كتابته ليشكل النسخة 2.5.1 من الاصدار 2.5 وها أنا الان افكر "ما التالي؟" رغم كون النسخة 2.5.0 (نسخة تجريبية) لاحتوائها على بعض الاخطاء الا ان الاصدار المحسن يشكل قفزة نوعية في هذا المشروع لكنها ليست القفزة الاخير بالطبع..

المراحل الاخيرة من المشروع
ان الاخطاء المنطقية والبرمجية شيء لابد منه والتجربة الاصعب لأي مطور ويب هي مرحلة الاختبار على مخدم حقيقي حيث الاخطاء تظهر في كل مكان والصفحات تتبعثر .. وهنا يظهر التحدي الحقيقي حيث اخذت مني مرحلة التجربة 3 ايام ولازالت هناك بعض الاخطاء التي لم استطع تصحيحها فالاخطاء تختلف بأختلاف نوع المخدم وقواعد البيانات ونوع المتصفح وغيرها ..
المشروع هو مفتوح المصدر لذا يمكن لاي شخص تحميل النسخة 2.5.0 من الموقع او من Google Code .
ماهي المميزات؟
حسنا, بعد العمل الشاق استطعت توفير بعض المميزات التي قد يراها البعض بدائية لكنها ليست كذلك لنظام ادارة محتوى عربي أسس من قبل شص واحد !
  • يمكن الان التحكم بالمستخدمين (كحذف المستخدمين وتعديل اشتراكاتهم بالقوائم البريدية ) من خلال لوحة التحكم
  • يستطيع المدير ارسال رسائل بريد الكتروني الى المستخدمين 
  • يمكن من خلال لوحة الادارة وبدون كتابة اي شفرة برمجية من اضافة, تعديل وحذف الصفحات, حيث يمكن التحكم بخصوصية وفهرسة ونوع محتوى كل صفحة
  • اضافة محتوى مستقل لصفحة معينة او لعمود الاخبار او الى المدونة
  • تحكم خاص بالمدونة لسهولة اكبر حيث يمكن تعديل او حذف او اضافة المقالات والتعليقات من داخل المدونة نفسها ودون الحاجة الى الذهاب الى لوحة الادارة
  • يمكن تثبيت الموقع بدون كتابة اي سطر برمجي هذا كله من ضمن معالج تثبيت مبيت في النظام



في النهاية أود من كل مطور ويب عربي ان يأخذ دوره في تطوير هذه النسخة وسأكون مسرورا ان وجدت اصدارات مطوره من قبل مطورين ومبرمجين عرب.


الثلاثاء، 18 سبتمبر، 2012

تعرف على Google App Engine

 في سبتمبر 2011 أطلقت Google خدمة Google App Engine أو ما تسمى أختصاراً GAE وهي عبارة عن خوادم عالية الأداء متاحة مجاناً ضمن حدود معينة سأتطرق اليها لاحقاً.
كان الهدف من إنشاء GAE هو تمكين مطوري المواقع وتطبيقات الويب من إنشاء برامجهم على خدمة تخزين سحابية حتى 1GB تحتوي على خوادم مضمنة لبيئات مختلفة وهي (Java  و Go  و Python بإصداريها 2.5 و 2.7 ) وتشغيلها وعرضها على الانترنت حول العالم.
حتى هذه اللحضة GAE يدعم فقط لغات البرمجة المذكورة آنفاً لكن بالطبع يمكن أستخدام لغات برمجة جهة-المخدم مثل PHP عن طريق ترجمتها الى Java بواسطة تطبيق Quercus . كما هنالك العديد من الحلول للغات الاخرى.

كل مايلزمك لبدء برمجة تطبيقك الخاص هو حساب Google  ثم يمكنك تفعيل هذه الخدمة من هنا , في الحال سيتم تخصيص مساحة 1GB مجاناً مع 5 ملايين مشاهدة للتطبيق شهرياً أما عند الحاجة لترقية المساحة ومعدل النقل الشهري يمكنك شراء المزيد من المساحة مع معدل نقل شهري ومميزات أخرى.
يقدم GAE مميزات عديدة بجانب أستضافة التطبيقات , فيمكن خزن البيانات بقواعد البيانات ومعالجة الصور وأستخدام البريد وتعدد المستخدمين.



ليس هذا فقط! بل Google تدع المطورين يرفعون تطبيقاتهم لأغراض العمل والتسويق لمنتجاتهم والكسب المادي من خلالها , فيمكنك أستخدام عنوان النطاق الخاص بشركتك أو مجموعة عملك بدل النطاق المجاني الذي توفره Google .
yourapp.appspot.com

لمزيد من المعرفة:
https://developers.google.com/appengine/kb/

الخميس، 13 سبتمبر، 2012

تعلم انشاء صفحة استخراج بيانات من قاعدة بيانات Mysql


مستوى الدرس: مبتدئ
اللغات المستخدمة: PHP, SQL
كما أفترض ان لديك معرفة مسبقة بأساسيات هذه اللغات واستخدام واجهة phpMyAdmin او يمكنك ببساطة تعلم هذه الاساسيات من هنا.
البرامج المستخدمة: مخدم WAMP، برنامج Adobe Dreamweaver CS5 او اي محرر "كود" برمجي .

الصفحات التي سوف ننشئها :
Index.php
Config.php

يعتبر استخراج ومعالجة البيانات من قاعدة البيانات من اكثر العمليات شيوعا في المواقع والمنتديات، فبيانات ملفك الشخصي في احد المنتديات كالاسم والعمر والهوايات في الحقيقة هو عبارة عن استخراج معلوماتك المخزنة في قواعد البيانات باستخدام نفس المفهوم الذي سأشرحه الان، الامر في غاية البساطة فكل ماتحتاجه هو:
١- تتصل بالمخدم ومن ثم قاعدة البيانات. 
٢- تستخرج المعلومات من جدول معين داخل قاعدة البيانات هذه.
هذا هو الروتين المتبع وهو بسيط جداً، دعنا في البداية ننشئ قاعدة بيانات نوع Mysql أسمها (احمد) وننشئ بداخلها جدول (الاسماء) يحتوي بداخله حقلين هما (الاسم، المعرف) ولفعل ذلك تابع الخطوات المصورة:






الان لندخل بعض المعلومات في هذه الحقول اضغط على (insert) :



الان حصلنا على قاعدة بيانات تحتوي على معلومات عن اشخاص معينين لنأتي الى مرحلة الاستخراج وتذكر ان الخطوة الاولى كانت الاتصال بقاعدة البيانات لذلك سنقوم بإنشاء ملف منفصل يحتوي كل المعلومات اللازمة للإتصال بقاعدة البيانات افتح محرر صفحات الويب واكتب الشيفرة التالية:
<?php
$hostname="localhost";
$db_name="احمد";
$db_user="root";
$db_pass="";
?>
اخزن الملف بأسم (config.php) داخل مسار (www) في مجلد المخدم .
في هذا الملف انشأنا متغيرات تحمل معلومات الاتصال اللازمة ، عنوان المخدم المحلي واسم قاعدة البيانات واسم مستخدم قاعدة البيانات ( افتراضياً هو root) وكلمة السر لقاعدة البيانات ( افتراضياً فارغة).
الان سننتقل الى الخطوة الاخيرة وهي الاتصال بقاعدة البيانات واستخراج المعلومات، قم بإنشاء ملف جديد واكتب الشيفرة التالية:

<?php
include("config.php");
mysql_connect($hostname, $db_user, $db_pass);
mysql_select_db($db_name);
$sql=("SELECT * FROM 'الاسماء' ");
$result=mysql_query($sql);
while ($rows=mysql_array($result)) {
echo "<br>";
echo "المعرف: ".$rows['المعرف'];
echo " - ";
echo "الاسم: ". $rows['الاسم'];
}
?>


في السطر الاول قمنا بتضمين ملف الاعدادات بواسطة الدالة include ثم قمنا بالاتصال بقاعدة البيانات mysql_connect باستخدام المعلومات الموجودة في ملف الاعدادات, بعد ذلك اتصلنا بقاعدة البيانات وقمنا بأرسال شيفرة لغة SQL:
$sql=("SELECT * FROM 'الاسماء' ");
استخرج كل المعلومات من الجدول "الاسماء"

ثم وضعنا ناتج الاستعلام في حلقة تكرار (وذلك لاستخراج جميع البيانات بالتسلسل).
بعد ذلك قمنا بطباعة الناتج . 
أخزن الملف بأسم (Index.php) ثم انتقل الى متصفحك واستعرض الصفحة ستشاهد الناتج التالي:

المعرف:1 - الاسم:احمد باسل
المعرف:2 - الاسم: خالد عبد الله



الجمعة، 7 سبتمبر، 2012

مرحبا لغتي

خلال السنوات المصرمة ومن خلال خبرتي كمطور ومبرمج ويب ومن تركيز إهتمامي على مساعدة المطورين العرب على إنشاء منصات عربية للمحتوى العربي على الإنترنت واجهت كما واجه العديد من المطورين المشاكل ذاتها المتعلقة باللغة العربية، رغم ان لغتي خاليه من المشاكل ألا أننا لايمكننا تجاهل عدم دعم أغلب التطبيقات والبرامج لهذه اللغة ، وأنا أتكلم عن بناء صفحات ويب ديناميكية تدعم اللغة العربية دعماً تاماً ، لذلك سيكون الكلام موجه للأشخاص الجدد في عالم برمجة وتطوير المواقع أو ربما هناك معلومات قد تفيد المطورين المتمرسين ايضاً :) 
الصعوبات التي نواجهها في هذا المجال جعلت الكثيرين يبنون صفحاتهم وفق المحتوى الإنكليزي حيث الجملة البرمجية الأولى التي يتعلمونها هي:
print ("hello world");
إنها من أسهل وأبسط الجمل البرمجية اطلاقاً أنها ومع الأسف أسهل من أن تكتب باللغة العربية . لكن فكر في الأمر، أن كنت تتعلم برمجة صفحات الويب كهواية أو كمهنة مستقبلية فالزبائن والأصدقاء وأرباب العمل سيطلبون منك مشاريع وصفحات وإعلانات ذات محتوى عربي كونك عربي تعيش على أرض عربية!
 إذن لماذا لا نبدأ البرمجة وفق لغتنا الجميلة؟ نعم كلنا سنواجه صعوبات في بداية الطريق لكن في النهاية ستحصل على صفحة مبرمجة تدعم العربية .
كيف تبدأ ؟
حسناً، لنواجه الأمر، لغات برمجة الصفحات الديناميكية مثل ASP, PHP, Python, Groovy تدعم النصوص العربية لكن لاتدعم تنسيقها (اتجاه النص يميناً، الكتابة من اليمين الى اليسار ، ترميز الصفحة) .
لحسن الحظ لغة ترميز النصوص التشعبية HTML ( لغة بناء الصفحات الساكنة) قد حلت المشكلة فمن خلال هذه اللغة يمكنك تحديد النص او المعلومات المخرجة ما أن تبدأ من اليمين إلى اليسار أو العكس وكذلك يمكنك أختيار محاذاة النص المخرج سواء كان يميناً ام يساراً والأهم هو تغيير ترميز الصفحة بأكملها لجعلها تدعم المحتوى العربي، إذا لنبدأ من الأساس ولنتعرف سوياً على الحلول القياسية لبناء صفحات ديناميكية تدعم المحتوى العربي:

الصفحات: 

قبل كل شيء يجب أن تجهز صفحتك لتتعامل مع نصوص عربية، فلا يهم إن كانت الصفحة ستحتوي على جمل باللغة الإنكليزية أم لا، إن كنت تستخدم برامج لتصميم وبرمجة صفحات الويب مثل Adobe Dreamweaver فهذا سيسهل الأمر عليك بتخصيص إعدادات إنشاء صفحة جديدة:

محتوى الصفحات:
إن الشيفرة الافتراضية لأي صفحة html هي كالتالي:

<!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>
<title>Untitled Document</title>
</head>

<body></body>
</html>

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 حيث يمكنك وضع هذه الترويسة في أي موضع بين ترويسة الرأس حصراً

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


ترويسات البدن وعناصر الصفحة الأخرى:
لنتخيل شيفرة صفحة html كالتالي:

<html>
<head></head>
<body>
<div>
<p>
<span>
مرحبا لغتي
</span>
</p>
</div>
</body>
</html>

كمطور ويب بالطبع سيكون مجال عملك بين ترويسات بدن الصفحة 
<body>
</body>
وما تحويهما ، في الحقيقة أن في كل ترويسة بدن body او فقرة p او تقسيم div او التجميع span او غيرها من ترويسات لغة HTML تحتوي على خصائص عدة من ضمنها خصائص تنسيق اللغة وتكمن هذه الخصائص في مجموعة خيارات .
- dir  وهو اختصارا direction اي اتجاه الكتابة ، لاحظ الفقرة التالية تم تنسيقها لتحوي نصوص عربية:
<p dir="rtl">
مرحبا لغتي
</p>

- align او المحاذاة وتحدد ما إذا كان النص يحاذي اليمين او اليسار او الوسط:

<p align="right">
مرحبا لغتي
</p>

حسنا لقد طبقت الشروط على فقرة نص واحد لكن ماذا لو كانت صفحتك كلها تستخدم النصوص العربية؟ سيكون من الاسهل تنسيق ترويسة رئيسية بدلا من تنسيق كل فقرة او تقسيم على حدة:

<html>
<head></head>
<body>
<div dir="rtl" align="right">
<p>
<span>
مرحبا لغتي
</span>
</p>
</div>
</body>
</html>

في هذه الحالة سيتم تطبيق التنسيقات على جميع اجزاء المتن بدون استثناء.

لغة الإستعلامات الهيكلية SQL:

مما لايخفى على اي مطور أهمية قواعد البيانات أو بالأخص أهمية ترميز الجداول والحقول، فقواعد البيانات بشكل افتراضي لاتدعم النصوص العربية إلا اذا غيرنا ترميزها ، يمكن فعل ذلك من خلال واجهة phpMyadmin لكني سأشرح طريقة الأستعلامات الهيكلية:
CREATE DATABASE `قاعدة بيانات` DEFAULT CHARACTER SET utf8 COLLATE utf8_bin;

الأوامر اعلاه تؤدي إلى إنشاء قاعدة بيانات جديدة تدعم اللغة العربية حيث استخدمت الصيغة   DEFAULT CHARACTER SET للإشارة الى ترميز utf8_bin الذي يدعم العربية بشكل تام.

وعندانشاء جدول أو حقل لاتختلف الطريقة :

CREATE TABLE `قاعدة بيانات`.`جدول` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`العنوان` TEXT NOT NULL
) ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_bin;




اسئلة وأجوبة:

س: عند ادخال نصوص عربية الى قاعدة البيانات تظهر بالعربية لكن عند استخراجها في لغة PHP أواجه مشكلة حيث تظهر بصورة رموز غير مفهومة، ما السبب؟

ج/ في احيان نادرة تسلك البيانات المستخرجة منحنى اخر بعيداً عن ترميز الصفحة فتأخذ التنسيقات الافتراضية خاصة في الاصدارات القديمة لقواعد البيانات Mysql ولحل هذه المشكلة تحتاج لدالة mysql_query قبل كل عملية أستعلام واستخدامها كالتالي:
mysql_query("set names 'utf-8'");


س: هل يمكن تسمية الجداول بأسماء عربية؟
ج/ طالما أن ترميز قواعد البيانات العام هو utf-8_bin اذن يمكنك تسمية الجداول والحقول بأسماء عربية .

س: هل يوجد برنامج لتصميم صفحات الانترنت يسهل المهمة؟
ج/ أن من افضل البرامج في هذا المجال هو Adobe Dreamweaver  لكن احرص على شراء النسخة ME التي تدعم اللغة العربية حيث في هذا البرنامج يمكنك تعديل الاعدادات الافتراضية عند انشاء الصفحات مثل اللغة، الترميز ، وغيرها من المميزات.

س: كيف يمكنني التحكم بتنسيق النصوص المستخرجة من قواعد البيانات؟
ج/ ان النصوص والمعلومات التي تخزن في قواعد البيانات هي بيانات خالية من التنسيق ولاضافة التنسيقات عند عرض هذه البيانات يمكن دمجها داخل ترويسة من ترويسات HTML كما في المثال التالي:

<p dir="rtl" align="right">
<?php echo rows['الاسم']; ?>
</p>