Generating Web Pages using Functions

أهلا بكم جميعا

تحدثنا في اخر مقالة عن عمل صفحة الويب باستخدام ال Objects.واليوم نستخدم  Hash Function لكل عنصر في صفحة الويب كما سنري في هذه المقالة،و نوضح أمثلة لصفحات ويب والتحكم فيها  بلغة الرينج.

ونقوم بشرح الخطوات بداية من التعامل مع قواعد البيانات  SQL الي التعامل مع صفحات ال Front End  وهي صفحة ال User interface  او الواجهة الامامية للمستخدم ثم نعرض صفحات ال Back End  وهي صفحات ال Responses  للتعامل والتحكم في البيانات المدخلة من المستخدمين في الصفحات الامامية.

وسوف نستخدم ال MYSQL وبالتالي يجب تنزيلها وعمل Configuration لها كما هو موضح هنا

اما بالنسبة للسيرفر فيوجد apache جاهز داخل اللغة.

ولنبدأ باسم الله

عند انشاء صفحة ويب بال Hash Function تكون بداية ونهاية أي style ب start,end مع استخدام دوال ال Hash لادخال ال attributes الخاصة بال styles.

مثال:

هذا هو ال style بال HTML:

4.PNG

  • سوف نستبدل أي تاج <>بstart,end  ونضع ال attributes  داخل دالة ال hash، وكما قلنا أن أي نص يأخذ ال text  parameter.

هذا هو ال style بلغة الرينج:

7.PNG

  • ويكون دوال ال Hash  داخل object ال {} New Page

8.PNG

وهذا شكل الخرج علي المتصفح:

9.PNG

10.PNG

الكود

11.PNG

وهذا مثال اخر علي ال Gradient – التدرج في الالوان-  صفحة ويب بال Gradient ك background:

1.PNG

2.jpg

الكود

وبهذا نكون عرفنا كيفية عمل صفحة ويب عن طريق hash functions.

أولا قواعد البيانات:

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

ونقوم بالعمل علي برنامج MYSQL Workbench

نقوم بانشاء قاعدة البيانات بما تحتوي علي جداول وأوامر للتعامل مع صفحة الويب التي نقوم ببرمجتها.

كما أن هناك قاعدة بيانات جاهزة للمهندس محمود فايد – مبتكر اللغة- خاصة ببيانات العملاء وتسجيل دخولهم ،… كما في الامثلة الموضحة في هذا الموقع نقوم بفتح قاعدة البيانات كالتالي:

نقوم نفتح ال Workbench ثم نتبع الخطوات التالية كما في الصور الموضحة…

1.png

نقوم بعمل الاتصال بالسيرفر…

2.png نقوم بادخال ال username & password

3.png

4.png

نقوم بفتح قاعدة البيانات الجاهزة- Script.

1.png

2.jpg

3.png

نقوم بعمل Run    للتأكد من صحة ال Script

4.PNG

3.jpg

4.jpg

تستطيع فتح ال shell الخاص ب mysql   من   Start   وتطلع علي قواعد البيانات التي لديك كما يمكن أن تنشأ قاعدة بيانات لتوريد البيانات اليها.

أولا يجب عليك انشاء قاعدة بيانات بأي اسم.

;create database if not exists mahdb

ثانيا نقوم باستخدام هذه القاعدة في ال Script لتوريد البيانات اليها.

;use mahdb

2.jpg ثم  نقوم بعمل Save ثم Run والتاكد من صحة ال Script.

3.jpg

نقوم باختبار البيانات داخل قاعدة البيانات الجديدة mahdb.

4.PNG

ومن ثم نكون جاهزين للتحكم في صفحة الويب الخاصة بتسجيل بيانات العملاء من خلال القاعدة mahdb.

ولكن قبل ذلك ينبغي معرفة كيفية تقسيم المشروع قبل البدء فيه والتعرف علي MVC من هنا

وأن تطلع علي مكتبة ال datalib.ring والتي سوف نقوم بعمل صفحات الويب عن طريقها ك framework من هنا 

يمكن أن تنشأ قاعدة بيانات جديدة تتناسب مع صفحة الويب والبيانات المدخلة.

  مثال لقاعدة بيانات تحتوي علي سورة الفاتحة بالترميز العربي من داخل قاعدة البيانات:

نقوم بعمل قاعدة بيانات جديدة كالتالي ثم نستخدمها في ال SQL

1.png

سوف استخدم ال workbench  لعمل قاعدة البيانات :

من file نختار New Query ثم نقوم بكتابة ال Sql  بعد تحديد قاعدة بيانات نعمل عليها ونقوم بالحفظ وليكن باسم Quran  ثم نقوم بعمل Run

3.png

2.jpg

4.png

في هذا المثال سوف أقوم بادخال البيانات باللغة العربية بترميز UTF8 في قاعدة البيانات ولكي تستجيب صفحة الويب لهذا الترميز فينبغي  علي ال Server  وقاعدة البيانات أن يتعرفوا علي هذا الترميز فنقوم بكتابة ال query الخاصة بالترميز بعد عمل اتصال مباشرة في مكتبة ال datalib وكذلك في ال  database

5.png

وسوف اغير عدد ال records   في الصفحة الواحدة  في مكتبة ال  datalib  ولك الحرية في اختيار عدد السجلات:

6.png

أو من الممكن عمل inheritance لل class المراد تغيير ال attributes بداخله في الملف الخاص بالمشروع ثم تغيير هذا ال attribute.

وكذلك سوف أقوم بتغيير اسم قاعدة البيانات والباسورد:

7.png

ثم نقوم بعمل ملف المشروع نستدعي فيه مكتبة ال datalib  لاظهار الصفحة الخاصة بنا:

1.jpg

2.jpg

هو نفس مثال ex24.ring  لل salary  مع تغيير المتغيرات التي لدينا

ويجب ملاحظة أن يتم كتابة اسم ال cLass قبل MODEL & CONTROLLER & View  مباشرة وهو اسم الجدول داخل قاعدة البيانات وهو ما يتم تغييره في الملف بالضغط علي ctrl+f وعمل replaceAll  ل salary الي Quran ، وكذلك يجب التأكد من اسم ال Website في ملف المشروع أن يكون بنفس اسم المشروع.

وهذا الشكل الناتج في صفحة الويب باللغة العربية:

2.png

ومن الممكن اظهار الصفحة بأي لغة

يكون ذلك عن طريق تغيير اسماء ال Attributes  في ال Class الخاص باللغة كالتالي:

3.jpg

pic3.PNG


وفي هذا المثال سأقوم بعمل import  لقاعدة بيانات للقران الكريم كاملا.

من الممكن تحميل المشروع كاملا بال Scripts الخاصة بقواعد البيانات من هنا 

نقوم بفتح  ال Script  الموجودة باسم allquran.sql ،  ثم نقوم بالحفظ وعمل Run ليتم توريد البيانات الي قاعدة البيانات التي أنشأناها باسم allquran.

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

;SET NAMES utf8

وسوف أقوم باضافة عمود في ال grid في صفحة الويب ويكون التعديل كالتالي:

3.jpg

5.jpg

وهذه هي الصفحة الناتجة

pic1.PNG

2.png

يمكنك تحميل المشروع كاملا ومعدلا بكل ما تم شرحة من هذا اللينك علي ال Github.

فقط عليك فتح ال Scripts الموجودة في ملف ال database بال Workbench كما وضحنا ونقوم بعمل Run لتوريد البيانات لقاعدة البيانات لديك ثم تقوم بفتح مسار المشروع الذي تم تحميلة كما في الصورة التوضيحية وتقوم بتغيير الباسورد في ملف ال datalib2,datalib.

2.jpg

وشكرا لكم والي اللقاء

للاطلاع علي المقالات الاخري من هنا

تستطيع الاطلاع علي المشاريع مفتوحة المصدر من الموقع  GitHub
الموقع الرسمي للغة  http://ring-lang.net

كيف تستخدم ال Github في المشاريع

 

Advertisements

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

شعار وردبرس.كوم

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   /  تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   /  تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   /  تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   /  تغيير )

Connecting to %s