Generating Web Pages using Objects

أهلا ومرحبا بكم جميعا

نقدم لكم في هذه المقالة form بسيط بلغة رينج حيث أنها تدخل في التطبيقات المختلفة للويب ونوضح اليوم  عمل تطبيق صفحة ويب لادخال بيانات المستخدمين، ومن ثم صفحة أخري نعرض فيها ال response أو البيانات التي تم ادخالها بكلا طريقتي ال HTTP Get &HTTP Post

ونحتاج الي بعض الاعدادت قبل البدء في الشرح:

1-هنحتاج الي server يدعم CGI وليكن Apache HTTP Server

ومن هنا شرح بالصور طريقة تنزيل ال Apache والاعدادات الاخري قبل البدء.

ملحوظة:

في الاصدار الجديد من لغة الرينج Ring 1.6 تم تركيب Apache  في اللغة دون الحاجة الي تلك الخطوات فقط عليك بالضغط علي زر واحد وهي علامة الويب في أعلي المحرر كما في الشكل التالي:

5.jpg

بعد تحميل الاصدار الجديد من صفحة اللغة http://ring-lang.net   ثم الضغط علي زر الويب تعرض صفحة الويب تلقائيا.

ملحوظة أخري:

  • مجرد أن يتم الضغظ علي زر الويب يتم فتح ال appache ويتم فتح صفحة الويب من أي مكان علي الجهاز لديك ولكن بعد فتح أول صفحة ويب وفتح ال appache  يتم تخزين ذلك المسار ولا يعرض بعدها أي صفحة ويب خارج ال directory الذي يحتوي علي صفحة الويب المعروضة حتي يتم عمل restart لل appache مرة أخري ومحرر اللغة ثم تستطيع تغيير مسار ال directory بأول صفحة يتم فتحها.
  •  يتم عمل  restart لل appache  عن طريق عمل restart لجهاز الكمبيوتر أو من الممكن فتح ال task manager وغلق اي appache   مفتوح – عن طريق عمل كليك يمين من ال task bar أو alt+ctrl+delete ثم نختار task manager ثم نعمل end task لل appache.

2.jpg

2-يجب تعريف السطر التالي في أول سطر في البرنامج قبل البدء في كتابة أي كود:

c:\ring\bin\ring.exe -cgi!#

ويختلف مساره من جهاز لاخر حسب مسار تواجد ملف ال execution

فهذا مسار تواجده علي جهازي c:\ring\bin\ring.exe ثم نضع !# قبل المسار و cgi- بعد المسار وينبغي أن يتم كتابة هذا السطر في أول سطر في البرنامج

3-يجب استدعاء مكتبة ال Web و عمل import.

"Load "weblib.ring
Import System.Web

4-واخيرا يجب معرفة أساسيات ال web design حتي يتسني لنا معرفة كل جزء بسهولة وطريقة الاستخدام.

من الممكن اختبار ال apache عند فتحه  أول مرة بفتح صفحات الويب في ال examples الجاهزة في المسار  ring\ringlibs\weblib\ringapp

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

Generating Pages using Objects

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

فأسرع طريقة هو كتابة كود ال HTML مباشرة ثم استخدام ال Functions ثم ال Templates ثم ال Objects

ونستخدم في هذه المقالة ال Objects  وكما قلنا أنها بطيئة الا أنها سهلة الاستخدام وتعطي style سهل جميل كما سنري في هذه المقالة حيث أننا  نستخدم nested structures  عن طريق الاقواس {}  لكل Object ثم ندخل بداخلها مجموعة ال attributes المستخدمه .وتستطيع أن تطلع علي ال attributes الموجودة في لغة الرينج باستخدام Class ال WebPageمن هنا

  • وسوف نبدأ من بداية شكل الكود بال HTML وادخالة في لغة رينج خطوة بخطوة.

شكل الكود في لغة ال HTML :

<"form name="reg" action="post>
</ "input type="text" name="username>     
<label>Name</label>     
</ "input type="email" name="email>     
<label>Email</label>     
</ "input type="tel" name="tel>     
<label>Telephone</label>     
</ "input type="password" name="password>     
<label>password</label>     
</ "input type="submit" name="submit" value="send>     
<label>Submit</label>     
</form>
  • أي نص يتم وضعة بالشكل التالي:  ( النص “)text
  • وأي تاج <>يكون عبارة عن object ويتم ادخال مجموعة ال attributes عن طريق الاقواس {}
  • ومجموعة ال objects تكون داخل ال ()WebPage

كما هو موضح في هذا الكود

ثم بعد ذلك نقوم بوضع ال styles لتظبيط شكل الصفحة:

ويكون ذلك عن طريق style=  style-name وممكن الدمج بين أكثر من style عن طريق +

ومن هنا تستطيع الاطلاع علي الاستايل الموجودة في لغة الرينج

وهذا شكل ال form بعد وضع النص في div خاص به  وكذلك مربعات النص في div اخر خاص به ليعرضهم علي هيئة blocks ووضعت ال styles الخاص بكل div.

كما هو موضح هنا في هذا الكود 

3.PNG

أما هنا فوضعت ال form علي هيئة جدول كل صف يحتوي علي النص ومربع ادخال النص

كما هو موضح في هذا الكود

2.PNG

Hypertext Transfer Protocol) HTTP):

يستخدم لعمل اتصال بين المستخدم user  والسيرفر server علي هيئة Request &Response،يقوم المستخدم بالاتصال بالسيرفر علي هيئة Request ثم يستجيب السيرفر لهذا الطلب علي هيئة Response.

والان سوف نعمل صفحة response الخاصة بالسيرفر نعرض فيها كل الداتا التي تم وضعها في مربعات الادخال عن طريق ال User.

ويوجد طريقتان لعمل ذلك:

1.   HTTP Get

  • في هذه الطريقة نضع “method=“get داخل تعريف ال form  كما   في هذا الكود
  • وكذلك “action=response.ring وهي الصفحة التي سوف ننشأها لنعرض فيها البيانات المدخلة.

وهذا الطريقة تعرض البيانات التي ادخلها المستخدم في أعلي المتصفح في صفحة ال response، حيث تحصل علي البيانات المدخلة من السيرفر علي هيئة Get request.

  • ولتوضيح ذلك  نقوم بعمل برنامج جديد باسم response.ring
  • ونقوم بنفس الخطوات التي ذكرناها سابقا في انشاء صفحة الويب
  • ثم نقوم بمعالجة القيمة المدخلة من المستخدم عن طريق  [”        “]aPageVars
{(["       "] p{ text ( aPageVars
  • ال aPageVars تمثل قيم المتغيرات التي أدخلها المستخدم في صفحة ال front end
  • و text حتي تقوم بعرض المتغيرات المدخلة
  • و تعمل علي عرض text  علي هيئة سطور
  • وبداخل ال ” “ نضع  قيمة المتغير الذي تم تعريفة داخل مربعات النص {}inputs ليتم التعرف علي البيانات بداخل كل مربع نصي.
  • وليكن المتغير هو ال name فنضع القيم الخاص بكل مربع كما في هذا الكود
  • ونضع ما نحب من باقي مكونات الصفحة وال styles الخاصة بها.

كما هو موضح في هذا الكود

وهذا الشكل الناتج و نلاحظ أن المدخلات موضحة في أعلي الصفحة.

4.png

2.   HTTP Post

هي نفس طريقة ال Get  ولكن الاختلاف فقط  في أننا  نضع “method=”post  داخل تعريف ال form كما في هذا الكود

وهذا الطريقة تخفي البيانات التي ادخلها المستخدم في أعلي المتصفح في صفحة ال response ، حيث يتم حفظ البيانات في ال Body وارسالها للسيرفر مغلقة .

وهذا الشكل الناتج و نلاحظ أن المدخلات لا تظهر في أعلي الصفحة.

3.png

ونكتفي بهذا والي اللقاء والسلام عليكم ورحمة الله وبركاته

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

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

Advertisements

فكرة واحدة على ”Generating Web Pages using Objects

  1. تعقيب: Generating Web Pages using Functions | لغة البرمجة رينج Ring programming language

اترك رد

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

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

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

Google+ photo

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

صورة تويتر

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

Facebook photo

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

w

Connecting to %s

%d مدونون معجبون بهذه: