التخطي إلى المحتوى الرئيسي

مرحبا لغتي

خلال السنوات المصرمة ومن خلال خبرتي كمطور ومبرمج ويب ومن تركيز إهتمامي على مساعدة المطورين العرب على إنشاء منصات عربية للمحتوى العربي على الإنترنت واجهت كما واجه العديد من المطورين المشاكل ذاتها المتعلقة باللغة العربية، رغم ان لغتي خاليه من المشاكل ألا أننا لايمكننا تجاهل عدم دعم أغلب التطبيقات والبرامج لهذه اللغة ، وأنا أتكلم عن بناء صفحات ويب ديناميكية تدعم اللغة العربية دعماً تاماً ، لذلك سيكون الكلام موجه للأشخاص الجدد في عالم برمجة وتطوير المواقع أو ربما هناك معلومات قد تفيد المطورين المتمرسين ايضاً :) 
الصعوبات التي نواجهها في هذا المجال جعلت الكثيرين يبنون صفحاتهم وفق المحتوى الإنكليزي حيث الجملة البرمجية الأولى التي يتعلمونها هي:
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>


تعليقات

المشاركات الشائعة من هذه المدونة

الفرق بين unlocked و locked في الهواتف المحمولة

في بعض الاحيان تلاحظ وجود كلمة unlocked بعد اسم المنتج على علبة الهاتف المحمول, او ربما يسألك البائع اذا ماكنت تريد الهاتف لشبكة اتصالات معينة ام حرا... في بعض الهواتف كهاتف iphone يتوافر نوعان منه locked و unlocked حيث الهاتف المقفل locked   يكون متاحا ويعمل على شبكة اتصالات محددة في بلدك تختارها انت بنفسك ويكون سعر الهاتف المقفل بقدر ربع السعر الحقيقي للهاتف الغير مقفل, وهذا النظام هو صفقات توقع بين شركات الهاتف وشركات الاتصالات, ومن مساوء هذه الاجهزه هو حالما تسافر الى بلد اخر سيتوقف الجهاز عن العمل تماما ولا يمكنك تشغيله على بطاقة شريحة SIM اخرى, لذا سيكون الهاتف عديم الفائدة, اما الهواتف الغير مقفلة unlocked فهي هواتف عادية تعمل على اي نوع من شبكات الاتصالات ويكون سعرها باهض جدا مقارنة بالهواتف المقفلة. 

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

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

انشاء نموذج الاتصال بنا

مستوى الدرس:  متوسط اللغات المستخدمة:   PHP ,   HTML  كما أفترض ان لديك معرفة مسبقة بأساسيات لغة PHP   . البرامج المستخدمة:  مخدم  WAMP ، برنامج Adobe Dreamweaver CS5 او اي محرر "كود" برمجي . الصفحات التي سوف ننشئها :   contact.php process.php ان من الصفحات الاساسية في كل موقع هي صفحة تمكن الزائرين من الاتصال بصاحب الموقع, او المدونة او الشركة او غيرها.حيث غالبا هذه الصفحات تتكون من نماذج اتصال مثل (نموذج دردشة, نموذج ارسال رسالة) وغيرها , كما تحتوي على معلومات اتصال اخرى. نماذج الاتصال تستخدم صفحات ديناميكية لمعالجة طلب الاتصال فمثلا لو كان نموذج دردشة مع خدمة الزبائن فمن خلال الصفحة الديناميكية يتم التأكد ما ان كان الموظف متواجد ام لا وعلى هذا الاساس يتم تفعيل صفحة برنامج الدردشة والذي غالبا يكون بلغة  JavaScript . لنركز على نموذج الاتصال الشائع والذي من خلاله يمكنك ارسال رسالة تحتوي على اسمك وبريدك الالكتروني ومحتوى الرسالة الى بريد الشركة او الموقع بدون استخدام خدمات البريد التقليدية... فكيف يعمل؟ سنقوم في هذا الدرس بأنشاء صفحة (اتصل بنا) تحتوي على