9 - انشاء صفحة ويب مرتبطة بصفحات خارجية (external views) واضافات تنسيقات css

في هذا الدرس سنقوم بعمل صفحة ويب ونضيف لها اكواد باستخدام css  وكذلك نقوم بانشاء مجلدات  خاصة لوضع ادواتنا التي نستخدمها مثل الصور وغيرها في مجلد خاص يمكننا التعامل معه بسهولة

باديء الامر نقوم بانشاء مجلد views لوضع الصفحات الخارجية التي سنستدعيها فيما بعد باستخدام الراوترات , وايضا نقوم بانشاء مجلد ثانِ باسم public  نقوم فيه بخزن الميديا المختلفة من صور وملفات فيديو او صوتيات ويمكننا ان نضيف داخل هذا المجلد مجلد للصور او مجلد للفيديو ... الخ  وكل هذه المجلدات سيضمها مجلد اعم هو ما اسميناه sinatra ..

انشاء المجلدات

 الان نقوم بانشاء الراوترات داخل ملف ونسميه main.rb

انشاء الراوترات

ومن ثم نقوم بانشاء الملفات المدمجة وخزنها في مجلد views

الان نقوم بانشاء ملف الصفحة الرئيسية home.erb   كما هو مبين في الصورة التالية:-

home.erb

كما نلاحظ في السطر السابع قمنا باضافة صورة موجودة في مجلد image الذي انشاناه داخل مجلد public الذي انشأناه مسبقا .

الان ننتقل لانشاء الملفات الاخرى ...

about.erb

 ومن ثم نقوم بعمل الملف الاخر

contact.erb

بعدها نقوم بانشاء ملف inline views داخل ملف main.rb 

inline views

بعد اكمال الملفات والاكواد البرمجية , دعونا الان ننتقل الى المتصفح لنرى النتيجة..

عرض الصفحة الرئيسية

عادة نحتاج في عمل صفحة ويب الى انشاء تنسيقات توحد ظهور بعض الفقرات والعناوين بتنسيق موحد, لهذا سنحتاج الى 

استخدام لغة الانماط الانسيابية css التي ستمكننا من التحكم بالتنسيقات بشكل عام . 

نقوم اولا بانشاء الكود باستخدام محرر النصوص الذي نستخدمه وخزنه بامتداد css  في المجلد public باسم style.css

style.css

بعد انشاء هذا الملف نذهب الى ملف main.rb ونقوم بعمل ربط لـ style.css  مع ملف inline views  كما هو موضح في السطر العشرون من ملف main.rb وكما مبين في الصورة ادناه .

استدعاء style.css في main.rb

وبالتالي سنحصل على النتيجة التالية :-

نتيجة اضافة تنسيقات css

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

8- تعريف المتغيرات واستخدامها داخل كود html

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

 الطريقة الاولى 

 الصيغة العامة للـ tag هي <% …..%> وفي داخله نقوم بتعريف متغير مثل المتغيرات التي نستخدمها عادة في لغة روبي مثل

"name= "hi dear

هذا المتغير نقوم بوضعه داخل الـ tag  ويكون تطبيقها كما في المثال ادناه 

الطريقة الاولى لتعريف متغير داخل كود html

في السطر السابع كما نرى قمنا بتعريف المتغير ادخل الوسم (tag) والذي كان كالاتي :

<% "انا اخوكم كرار الحلو , احاول في هذا الموقع ان اساهم بنقل ما تعلمته لكم "  = about %>

 

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

  الطريقة الثانية 

الطريقة الثانية لها نفس النتيجة ولكن بتغيير بسيط في طريقة كتابة المتغير ففي الطريقة الاولى كان تعريف المتغير داخل ما نسميه inline views  ولكن في هذه المرة سنقوم بتعريف المتغير داخل الراوتر ومن ثم نعيد استخدامه داخل كود html  وكما هو موضح في المثال التالي :-

الطريقة الثانية في تعريف المتغير داخل الراوتر

 

7- تضمين كود html داخل ملف روبي

في  الدرس السادس قمنا بعمل صفحة بسيطة تحوي على معلومات ترحيبية بشكل منفصل ومخزنة بمجلد خاص يدعى views ومن ثم قمنا باستدعائها بواسطة الامر erb :tt والذي يقوم باستدعاء الصفحة وعرضه عن طريق الراوتر ..

اليوم نقوم بعمل اختصار لهذه العملية يدعى (inline views)  الذي يتيح لنا دمج نفس الكود السابق في ملف الروبي باستخدام ادوات تعريفية تتيح لنا انشاء ملف واحد يمكننا من عرض صفحتنا بكل سهولة .

تكون الطريقة على النحو التالي :-

دمج كود html  في ملف روبي

السطر الخامس:- (__END__)هو عبارة عن تصريح بان هذا نهاية الملف الخاص بتعريف الراوتر وبداية تعريف كود html .

السطر السادس :-  لنتذكر سوية اننا في الدرس السابق كنا نقوم بتعريف كود html  بلاحقة erb وذلك ليتسنى للمفسر ان يفهم انه ملف مدمج بلغة روبي , الان باستخدام (@@)  نقوم باعلام المفسر بان الاسم الذي يليه هو ملف views (( في مثالنا home@@)) شبيه بالملف الذي كان بلاحقة erb ومن خلال هذه العملية نختصر عدد الملفات التي نعمل عليها منفصلة لنجمعها بملف واحد لتتيح لنا سهولة التعامل مع المتغيرات التي نصرح عنها فيما بعد في الاستخدامات المتقدمة ..
الان لو فرضنا ان لدينا اكثر من ملف (erb) ونريد التعامل معه في ملف واحد هنا سوف نستخدم اضافة تتيح لنا التعامل مع اكثر من ملف مدمج مع روبي ...
في البداية دعونا ننشأ هذه الملفات كما هو مبين في الصورة ادناه :-

انشاء اكثر من ملف مدمج مع روبي

 بعد انشاء هذه الملفات نقوم بانشاء صفحة html  بالطريقة التي تعلمناهــــا
(inline views) ولكن هنا وبسبب تعاملنا مع اكثر من ملف سنقوم باضافة هذه الكلمة البرمجية layout@@ التي بمجرد كتابتها تخبر المفسر بان هذا الملف يحوي على اكثر من ملف روبي مدمج وبالتالي يتعامل معه , كما مبين في الصورة التالية :-

انشاء inline views

في السطر الثاني عشر قمنا باضافة layout@@ التي كما شرحناها تتعامل مع اكثر من ملف مدمج 
في الاسطر من 29 الى 31  قمنا باضافة <section> وفي داخله <%= yield %> الذي يتيح لنا عرض ما في داخل الملفات المدمجة التي انشأناها مسبقا مثل (erb :home , erb :about)  وكما نرى في السطر 34 اننا قمنا بتعريف هذا الملف الذي انشأناه في بداية وفي السطر الـ 35 قمنا باضافة نص اليه وكذلك الحال مع بقية الملفات, الان دعونا نختبر ما قمنا بعمله على المتصفح لنا النتيجة كما في الصورة التالية :-

نتيجة العمل

 هذه هي النتيجة التي حصلنا عليها ...

ملاحظة :-
الوسم <section> نستطيع ان نضعه في اي مكان نشاء وهنا وضعناه اخر الكود لاننا نريد ان نعرض النصوص اسفل المتصفح


 

6- انشاء صفحة الكترونية بسيطه

في هذا الدرس سنقوم بالدخول الفعلي الى الغاية من تعلم سيناترا وهو عمل موقع الكتروني متكامل ومن خلال دروس بسيطه نتمكن من انشاء اول موقع لنا باستخدام لغات وصفية داعمة مثل html &css  والتي لا بد لكل مطور مواقع ويب ان يلم بالاعم منها لانها تمثل الواجهة المهمه للمواقع...

هناك موقع خفيف ومبسط لتعلم هذه اللغة بصورة نظرية وعمليه ويمكن مع قليل من الاصرار والتوجه ان تستكمل المنهج خلال يومين لا اكثر من خلال زيارته على هذا الرابط :- 

http://www.w3schools.com

 

الان دعونا نتوجه الى المثال الاول لعمل صفحة تعريفية بسيطة

اولا نقوم بفتح محرر النصوص ونقوم بكتابة كود html بسيط ونقوم بخزنها بامتداد tt.erb  والذي يعني ان هذا الملف مدمج مع روبيembedded) (Ruby.

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

اعداد مجلد views داخل المجلد العام وخزن الملف  tt.erb

 الان نتوجه الى المحرر لنقوم بكتابة الكود كما هو موضح ادناه..

اعداد صفحة الـ html 

الى هنا اكملنا صفحة الهتمل وهي كما ترى بسيطة جدا لغرض توضيح الية الربط بينها وبين سيناترا عن طريق التالي كما هو مبين في الصورة التالية :-

ربط ملف روبي مع صفحة html

طبعا شكل الكود مجملا ليس غريبا ولكن الاضافة الوحيدة هي erb :tt

وهو اننا نعلم سيناترا بانه عليها ان تفتح ملف مدمج مع روبي اسمه tt الذي انشأناه سابقا ..

 الان نذهب الى المتصفح لنرى النتيجة ...

عرض الملف على المتصفح

 هذه ابسط طريقة للتعامل مع كود html وانشاء صفحة مبسطه وكما قلنا سيناترا تتعامل مع الواجهة الخلفية للموقع وهي البرمجة وادارة قواعد البيانات والمحتوى, في الدروس التالية سنتعامل مع مواقع اكثر تعقيدا وتطورا حتى نصل الى  انتاج موقع متكامل .

5- استخدام المعلمات (parameter)

    في الدرس السابق قمنا بعمل تطبيق يعرض المعلومات الواقعة بين بداية ونهاية ال route حسب ما نقوم نحن بكتابته , في هذا الدرس سوف نقوم بتعلم تكنيك جديد نطلب فيه من المستخدم ان يدخل البيانات التي تخصه ومن ثم يقوم المتصفح بعرضها وهذا يتم باستخدام ما يدعى بالبارميترات

تعتبر الباراميترات نوعا ما مصفوفه تقوم بحفظ قيم متغيره يقوم العميل بادخالها وبناء على ذلك نقوم باستدعاء القيمة المدخلة بكود معين.

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

المثال الاول

كتابة الكود الخاص بالبارميتر

   في السطر الثالث جعلنا name  متغير يحوي على باراميتر وهذا المتغير يساوي الباراميتر الذي عرفناه بعد علامة المساواة وparams عبارة عن تعريف للمتغير [name:] الذي سيقوم بخزن ما يقوم العميل بكتابته ومن ثم عرضه في المتصفح 

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

 

تنفيذ الكود وعرض النتيجة

الكود السابق فقط يظهر لنا ما نكتبه ولكن احيانا نريد اضافة رسالة  ترحيبية اي اضافة نص الى باراميتر وهذا سيكون كالتالي :-

المثال الثاني 

اضافة رسالة ترحيبية

 في محرر النصوص قمنا باضافة نص الى الباراميتر بالطريق التي بيناها في الصورة اعلاه..

"{hello # {name"

وضعنا علامة التنصيص لان الباراميتر والرسالة هما عبارة عن نصين وهذا ما يتيح لنا ان نجمعهما في كود واحد .

الامر الاخر المتغير الذي وضعناه بين الاقواس هو المظلل باللون الاحمر لا الذي داخل اقواس الباراميتر ولكن المتغير المكتوب في المتصفح هو متغير الباراميتر

المثال الثالث

في هذا المثال سنقوم بكتابة كود يقوم العميل من خلاله كتابة اسمه مباشرة بعد علامة (/) وذلك بوضع الباراميتر في مكان طلب الرابط بعد الامرget كما في الصــــــورة التالية :-

مثال 3

المثال الرابع

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

 

اضافة وتعريف اكثر من باراميترز

الان سوف نعيد المثال نفسه لكن باستخدام اللغة العربية بكتابة المتغيرات والنصوص الترحيبية , هناك ملاحظة مهمة وهي انه في محرر النصوص الذي نستخدمه لابد ان نقوم بتغيير الترميز (Encoding)الى "Encode UTF-8" حتى يقوم المتصفح بعرض النص العربي دون مشاكل كما في الصورة أدناه:-

عرض رسالة ترحيبية بالنص العربي

 المثال الاخير يشرح كيفية ربط اكثر من باراميترز مع بعضهما...

المثال الخامس

ربط اكثر من باراميتر

 في هذا المثال اضفنا عبارة مهمه وهي اداة تعريفية لمتغير رقمي كما في السطر الرابع وهي (to_i.)هذه العبارة تخبر المفسر بانه هذا المتغير هو متغير رقمي حتى يقوم بالتعامل مع القيمة الرقمية كما في المعادلة في السطر الخامس
هذه اهم الطرق التي يمكن ان نتعامل بها مع البارميترات وكيفية استخدامها وهناك طرق اخرى لم نذكرها لكفاية هذه الطرق الان ومحاولة التركيز على روح الكود لا التعدد والتعقيد

4- التطبيق الاول في Sinatra

السلام عليكم ورحمة الله وبركاته ...

في هذه الحلقة سنقوم بعمل تطبيق بسيط يعرفنا على الية التعامل مع المتصفحات.

في البدء أود ان اذكر ان روح Sinatra  ونواتها المهمة هي ال Route أو ماتسمى بال Http verb والتي تتكون من عدد من الاوامر المستخدمة من قبل العميل ويفهمها السيرفر لغرض تنفيذ المطلوب  هذا الموجهات (Route ) لها استخدامات متباينة سنبينها فيما بعد ولكن نذكر هنا اهمها وهي :

1- get   (تستخدم لطلب رابط "URL" معين)

2- put   ( تستخدم لاستبدال المحتوى باخر او تحديث المحتوى الحالي)

3- post ( لانشاء محتوى جديد)

4- delete (لحذف المحتوى )

 احب ان اوضح نقطه مهمة وهو ان المقصود بعبارة المحتوى التي تكررت هي الروابط والنصوص واي شيء يقع بين ال Route وبين امر النهاية End  وحتما ستكون الفكرة أوضح اثناء مرورنا على هذه الاوامر واحدا تلو الاخر واخذ أكثر من مثال عملي عليها ...

المثال الاول.

* ملاحظة:- قبل البدء دعونا ننشأ ملف في القرص الصلب الذي نستخدمه وليكن (:C ) ونسمي الملف sinatra مثل ما مبين في الصورة أدناه وهذا المف سيكون حاوٍ على كل التطبيقات التي سنقوم بعملها وحفظها والتعامل معها لا حقا وهو أمر تنظيمي مهمم جدا سوف تتعرف عليه لاحقا...

1- نفتح محرر النصوص الذي نستخدمه انا شخصيا افضل محرر النصوص Notebad++ ويمكنك تحميله من  من هنا

2- نقوم بانشاء ملف جديد ونسميه first.rb ونقوم بحفظه في الملف الذي أنشأناه وحسب مامبين في الصورة التالية 

ملحوظة :-  " صيغة rb. تعني ان الملف مكتوب بلغة Ruby"

انشاء ملف first.rb  

    3- نكتب الكود التالي في محرر النصوص ...

كتابة التطبيق الاول

 لنشرح قليلا الاكواد السابقة 

- السطر الاول نقوم هنا بطلب من محرر الاوامر ان يقوم بتحميل مكتبة Sinatra لكي يقوم المتصفح فيما 

بعد بالتعامل معها ومع اكوادها 

-  السطر الثاني الذي يبدأ ب get  وهي كما قلنا احدى سابقا تستخدم لطلب رابط والذهاب اليه حيث ان 

الرابط هنا "hi/" الذي بمجرد كتابته في المتصفح يعرض لنا المحتوى الموجود في السطر الثالث والذي

هو عبارة عن نص ترحيب او اي نص يمكن  ان تضيفه واغلب العمليات تجرى في هذه المنطقة حيث هي 

من سيعرض ما يراد عرضه في المتصفحات 

- السطر الرابع وهو  قفل ال Route  حيث يخبر المحرر بان العملية تتم عند هذا الحد ولا تتجاوزه 

الاكواد بين 2 و 4 هي مشتركة بين كل الراوترات ..

4- نقوم بحفظ العمل ومن ثم نتوجه الى محرر الاوامر في روبي كما في الصورة ادناه:-

محرر الاوامر الخاص بلغة روبي

لنشرح قليلا ماتم في محرر الاوامر 

اولا نكتب بعد هذه العلامة <

cd c:\sinatra 

وهذا يعني اننا نريد جعل مسار محرر الاوامر يتلقى المعلومات من هذا الملف الذي انشأناه سابقا باسم

sinatra , بعدها سيتحول المسار الى المجلد المذكور عندها نطلب من محرر الاوامر بتشغيل الملف 

الخاص ببرنامجنا الذي اسميناه first.rb  بكتابة الامر التالي :-

ruby first.rbعندها يقوم المحرر بالاستجابة للامر ويقوم باعطائنا منفذ للسيرفر الافتراضي 

الذي سنقوم بتجربة تطبيقنا عليه وهذا المنفذ الذي يسمى (port) له قيمه هي = 4567 عند

 كتابته في المتصفح بطريقة سنعرفها بعد قليل سيقوم بتنفيذ  ماموجود في ملفنا وسيقوم بعرض المحتوى 

الموجود بين ال Route  وال End 

  5- الان نذهب الى المتصفح ونكتب التالي :-

localhost:4567/hi

هذا السطر localhost:4567 ثابت في كل برامجنا ولكن الذي يتغير هو مابعد رقم المنفذ (port) حيث ان  hi/  هو الرابط الذي سينتقل اليه المتصفح عند طلبه ويعرض المحتوى الموجود كما ذكرنا سابقاً...

عرض المتصفح للنتائج

ملاحظة :--  طبعا اذا اردنا تجربة تعديل على المحتوى واردنا عرضه على المتصفح يجب ان نقوم بالضغط على ctr+c  لانهاء الجلسة الحالية والبدء بجلسة جديدة ...

3- إعداد وتنصيب Sinatra

لايحتاج تنصيب سيناترا الى جهد كبير فكل العملية لا تأخذ حيزا أكثر من بضع كلمات تكتب في محرر الاوامر,كل ماعليك فعله , (طبعا بعد أن تتأكد من تنصيب لغة روبي ) هو أن تفتح محرر الاوامر او التيرمنال او الطرفية وتكتب كلمات.. 
الان سنستعرض كيفية تنصيب سيناترا حسب النظام الذي نستخدمه :- 
1-  الويندوز ...
بعد التأكد من تنصيب لغة روبي نكتب في محرر الاوامر الامر التالي:- 
gem install Sinatra
وكما هو موضح في الصور أدناه

كتابة الامر في محرر الاوامر الخاص بلغة روبي

بعدها بدقائق ستظهر لك هذه الشاشة .

اكمال عملية التنصيب 

لانني لا استخدم نظامي لينكس وماكنتوش في عملي على Sinatra  لذا ساذكر طريقة التنصيب فقط ..

2- اللينكس 
نكتب التالي  
 sudo gem install Sinatra   

3-  الماكنتوش 
   gem install sinatra

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