على بركة الله سلسلة دروس تصميم المواقع

[أبو عبدالرحمن]

أخي الحبيب أبو الحروف

على كل حال إذن نكمل السلسلة  طالما أنه لا استعجال لديكم حيال الموضوع إجمالاً فطريقة تنصيب السيرفر موجودة بالصورة ، وكذا بعض المواقع التي تدعم لغة الـ asp .

ولا يتبقى إلا أن نكمل السلسلة ، وعلى بركة الله في رد قادم .

[ابو الحروف]

تحياتي لك اخي الكريم

ارجو المعذرة على مبالغتي في الاستفسار والسؤال... ويبدو انك لم تر رسالتي الخاصة التي بعثتها لك!

مع رجائي بأن لا اكون عبئا ثقيلا عليك

[ابو الحروف]

سيدي الكريم ابو عبد الرحمن

لقد تمكنت من تثبيت السيرفر, كما نفذت كل ما ورد في الدروس السابقة, وانا الان على اتم الاستعداد لتلقي بقية الدروس...

وبارك الله فيك

[أبو عبدالرحمن]

أخي أبو الحروف

مع خالص التحية والتقدير

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

[ابو الحروف]

جزاك الله كل خير سيدي الكريم

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

كثر الله من امثالك يا اخي الكريم

[أبو عبدالرحمن]

الدرس الخامس: ربط صفحات ASP بقاعدة البيانات


صممنا في الدرس السابق قاعدة بيانات باستخدام برنامج Microsoft Access 2000. وفي هذا الدرس، سنتعلم كيفية ربط القاعدة بصفحات ASP واستعراض محتوياتها.

قم بفتح الصفحة الأولى (default.asp) لإجراء بعض التعديلات عليها. لذا قم بحفظها باسم (tech.asp). فكل التغييرات التي سنقوم بهذا ستكون على ملف tech.asp

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

إليكم آخر المستجدات على الساحة التقنية

والآن.. سنبدأ بالجزء الأهم.. وهو كتابة نصوص ASP .

نصوص ASP تكتب دائما بين هاتين العلامتين <% %> .لذا، افتح نصوص HTML واكتب الجملة التالية في أول سطر:

Code Sample

<%@ Language=VBScript CodePage = "1256"%>

هذا السطر يشير إلى أننا سنستخدم لغة VBScript في هذه الصفحة. وسطر (تحديد اللغة) يجب أن يكون دائما في بداية الصفحة.

واكتب التالي تحت الجملة الترحيبية:

Code Sample

<% Dim ConnectionString Dim ADO ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;" & "Data Source=" & Server.MapPath("\news\database\project.mdb") Set ADO=Server.CreateObject("ADODB.Connection") ADO.ConnectionString =ConnectionString ADO.Open %>

السطران الأول والثاني (Dim): يتم فيها تحديد المتغيرات، وسنتحدث عن المتغيرات أكثر في المستقبل.

السطر الثالث (ConnectionString): يحدد طريقة فتح قاعدة البيانات، واسم القاعدة والمسار إليها. يمكنك تغيير اسم القاعدة ومسارها بما يتناسب مع ما قمت به على جهازك. لقد قمت بتسمية القاعدة project.mdb وما قبل الاسم هو مسار الوصول إليها.

السطر الرابع (Set ADO): يحدد اسم المتغير الذي سيقوم بالربط.. وهو في مثالنا ADO ويمنك تغييره بما يتناسب معك، إلا أن عليك استخدامه كثيرا، لذا لا أفضل تغييره حتى لا يسبب لك بعض الصعوبة في متابعة الدروس.

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

ما قمنا به حتى هذه الخطوة، هو الوصول للقاعدة فقط. والخطوة التالية هي الوصول للبيانات التي بالقاعدة. ولعمل ذلك قم بكتابة التالي تحت عبارة ADO.open مباشرة:

Code Sample

selectSQL="select * from tech_news" set rs=ADO.execute(selectSQL)

السطر الأول (selectSQL): تحدد أمر الاختيار Select وفيها يثم اختيار البيانات من القاعدة حسب شروط يتم تحديدها. في حالتنا هذه طلبنا اختيار:

1- جميع البينات (ويمثلها رمز *) , ويمكن استبدالها باسم عمود او خانة معية من الجدول.

2- من جدول tech_news

أي أن هذان هما الشرطان الواجب القيام بهما.

السطر الثاني (set rs): تنفيذ الأمر.

ما قمنا به حتى الآن هو فتح القاعدة، واستدعاء البيانات منها. وما سنقوم به الآن هو طباعة هذه المعلومات. قم بكتابة التالي تحت عبارة set rs=ADO.execute(selectSQL) مباشرة:

Code Sample

response.write "العنوان : " & rs("subject") response.write "التاريخ : " & rs("add_dat") response.write "الخبر : " & rs("body")

response.write تقوم بطباعة النتائج، (*)rs ، تمثل النتائج. حيث يكتب اسم الجدول المراد عرض بياناته بين علامات التنصيص " "

قم بتشغيل الصفحة tech.asp وذلك بفتح المتصفح Internet Explorer وفي شريط العنوان Address Bar اكتب العنوان الموقع، وذلك بكتابة اسم جهازك ومن ثم المجلد الذي يحتوي الموقع:

http://asp/news/default.asp

ملاحظة: ASP في العنوان تمثل اسم الجهاز، وهذا الاسم يختلف من جهاز لآخر. لمعرفة اسم جهازك، افتح لوحة التحكم Control Panel ومنها افتح الشبكة Network واختر Identification لترى: Computer Name

يمكنك الاستعاضة عن اسم الجهاز بكلمة localhost أي أن العنوان سيصبح كالتالي:

http://localhost/news/default.asp

ستظهر صفحة عالم اليوم بالشكل التالي:

                                                                                         عالم اليوم
فاضغط على رابط: أخبار تقنية. لترى النتيجة:

Code Sample

إليكم آخر المستجدات في الساحة التقنية العنوان : اختراق مواقع حركة طالبان على الإنترنتالتاريخ : 31/9/2001الخبر : بعد عملية تفجير برجي التجارة العالمية بنيويورك، ورفض حركة طالبان تسليم بن لادن للولايات المتحدة الأمريكية، قام مجهولون باختراق مواقع الحركة على الإنترنت.

مبروك. لقد قام الـ Code الذي كتبته بقراءة محتويات القاعدة وعرضها. بالطبع توجد إشكاليات بسيطة في البيانات المعروضة، وسنشرح طريقة التغلب عليها في الدروس القادمة. لكن المهم في هذا الدرس، هو فهمه جيدا لأن معظم الدروس التالية تعتمد على هذا الدرس.

أخيرا، يفضل إغلاق ربط القاعدة بهذا السطر تحت عبارة response.write "الخبر : " & rs("body") مباشرة:

Code Sample

ADO.close

-----------------------------------------------------
يمكنك مشاهدة الصفحة التي قمنا بتصميمها في هذا الدرس من خلال هذا الرابط:  أخبار تقنية

سيتم وضع رابط لسحب هذه الصفحة في الدرس الثامن - إن شاء الله - وذلك بعد الانتهاء من تصميم صفحة tech.asp بالكامل.

[أبو عبدالرحمن]

الدرس السادس: تحسين مظهر عرض البيانات

تحسين مظهر عرض البيانات يعتمد على أوامر لغة HTML فإن كنا نود عرض النتائج كل جملة في سطر فسنضع الجملة بين

Code Sample

<p></p>

أي أن أوامر العرض ستكتب بالطريقة التالية:

ملاحظة: لا تنسى أن تغلق نصوص ASP بوضع هذه العلامة

Code Sample

<%

قبل السطور التالية.

Code Sample

<p><%response.write "العنوان : " & rs("subject")%></p> <p><%response.write "التاريخ : " & rs("add_dat")%></p> <p><%response.write "الخبر : " & rs("body")%></p>

يجب ملاحظة التالي:

قبل البدء بكتابة أوامر HTML علينا إغلاق نصوص ASP بالعلامة التالية:

Code Sample

<%

عند كتابة نصوص ASP في أسطر HTML علينا عدم نسيان وضع هذه العلامات:

Code Sample

<% %>

مثال:

Code Sample

<p><%response.write "العنوان : " & rs(2)%></p>

شغل صفحة أخبار تقنية. لترى النتيجة:



أظن أن شكل النتائج أصبح أجمل بهذه الطريقة. وإن كنت تريد تجميله أكثر، عليك باستخدام الجداول. كما في المثال التالي:

Code Sample

%> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%"> <tr> <td width="100%" dir="rtl" bgcolor="#DFDFFF"><b><span lang="ar-sa">العنوان : <%response.write rs("subject")%></span></b></td> </tr> <tr> <td width="100%" dir="rtl"><b><span lang="ar-sa">التاريخ : <%response.write rs("add_dat")%></span></b> <p><b><span lang="ar-sa">الخبر : <%response.write rs("body")%></span></b></td> </tr> </table> </center> </div> <hr color="#DFDFFF" width="90%"><%

وستكون النتيجة:



لا تنسى أن تضع

Code Sample

<% ADO.close %>

عند الانتهاء من كتابة هذه الأوامر.
بهذا نكون قد عالجنا الإشكالية الأولى، وهي مظهر البيانات. لكن هنالك إشكالية أكبر، وهي أن الـ Code الذي كتبناه قام بعرض وطباعة أول حقل فقط من القاعدة (أول خبر فقط) وتجاهل الأخبار الأخرى. لذا سنستخدم كل من If ... Then  و Do ... Loop لحل هذه الإشكالية.

وهذا ما سنقوم به في الدرس التالي.
------------------------------------------------------------------------------------------



--------

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

[الخالد]

جزاك الله كل الخير أخي/أبو عبدالرحمن
وفي موازين أعمالك إن شاء الله


أخوك / خالد

[ابو الحروف]

شكرا لك يا اخي الكريم على ما تبذله من جهود...

ما عليك الان سوى انتظار الاسئلة مني  '>
لاني كنت مشغول الليلة الماضية '>
كنت سهران مع...  '>

[أبو عبدالرحمن]

أخي وحبيبي خالد

يا هلا والله فيك وغلا ، وأشكرك كثيراً على المتابعة والدعاء لنا ، وإن كان ثمة ما يحفز على النشاط والمثابرة فهو تشجيعكم أخي الحبيب ومؤازرتكم .

تقبل خالص تحياتي وتقديري ..


أخي الحبيب أبو الحروف

تحية طيبة وبعد فإنه من دواعي سروري أن أكون عند رهن إشارتكم فيما تودون السؤال عنه وتكون لدي الإجابة .. وأرجو أن تكون قد توصلت إلى رأي محدد حيال اللغتين ( html - asp ) ، وهل اخترتم موقعاً  للاستضافة غير ما عقدتم العزم على اختياره سابقاً بعد محرك البحث عن المواقع ،
وبعدين سهران مع مين    
تقبل خالص التحية والتقدير .

أخوكم ابو عبدالرحمن

[ابو الحروف]

تحياتي العطرة اخي الكريم ابو عبد الرحمن

بالنسبة للغتين فقد قمت انت بهمتك الرائعة وكذلك ابو معاذ بشرح ما لم اكن اعرفه... والان فقد توطد العزم على متابعة السلسلة بإذن الله عز وجل...

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

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

جزاك الله خير الجزاء

[أبو عبدالرحمن]

الدرس السابع: عرض جميع النتائج


في الدرس السابق، تعلمنا كيف يمكننا تغيير مظهر عرض الأخبار. والإشكالية الوحيدة المتبقية الآن هي: كيفية عرض جميع الأخبار. فما قمنا به إلى الآن هو قراءة الأخبار من القاعدة، وعرض أول خبر فقط. وفي هذا الدرس سنتعلم كيف يمكننا عرض كل الأخبار.

افتح صفحة tech.asp. وافتح HTML فستجد التالي:

Code Sample

<%@ Language=VBScript CodePage = "1256"%> <html dir=rtl> <!--#include file="pageheader.txt" --> <p align="center"><span lang="ar-sa"><font face="Simplified Arabic">إليكم آخر المستجدات في الساحة التقنية</font></span></p> <% 'أوامر فتح قاعدة البيانات Dim ConnectionString Dim ADO ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;" & "Data Source=" & Server.MapPath("\news\database\project.mdb") Set ADO=Server.CreateObject("ADODB.Connection") ADO.ConnectionString =ConnectionString ADO.Open 'أوامر اختيار الجدول واستدعاء البيانات منه selectSQL="select * from tech_news" set rs=ADO.execute(selectSQL) 'أوامر استعراض البيانات %> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%"> <tr> <td width="100%" dir="rtl" bgcolor="#DFDFFF">[b]<span lang="ar-sa">العنوان : <%response.write rs("subject")%></span>[/b]</td> </tr> <tr> <td width="100%" dir="rtl">[b]<span lang="ar-sa">التاريخ : <%response.write rs("add_dat")%></span>[/b] <p>[b]<span lang="ar-sa">الخبر : <%response.write rs("body")%></span>[/b]</td> </tr> </table> </center> </div> <hr color="#DFDFFF" width="90%"> <% ADO.close %> <!--#include file="pagefooter.txt" -->

قم بتعديل HTML ليكون بالشكل التالي:

Code Sample

<%@ Language=VBScript CodePage = "1256"%> <html dir=rtl> <!--#include file="pageheader.txt" --> <p align="center"><span lang="ar-sa"><font face="Simplified Arabic">إليكم آخر المستجدات في الساحة التقنية</font></span></p> <% 'أوامر فتح قاعدة البيانات Dim ConnectionString Dim ADO ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;" & "Data Source=" & Server.MapPath("\news\database\project.mdb") Set ADO=Server.CreateObject("ADODB.Connection") ADO.ConnectionString =ConnectionString ADO.Open 'أوامر اختيار الجدول واستدعاء البيانات منه selectSQL="select * from tech_news" set rs=ADO.execute(selectSQL) 'أوامر استعراض البيانات do while not rs.eof %> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%"> <tr> <td width="100%" dir="rtl" bgcolor="#DFDFFF"><b><span lang="ar-sa">العنوان : <%response.write rs("subject")%></span></b></td> </tr> <tr> <td width="100%" dir="rtl"><b><span lang="ar-sa">التاريخ : <%response.write rs("add_dat")%></span></b> <p><b><span lang="ar-sa">الخبر : <%response.write rs("body")%></span></b></td> </tr> </table> </center> </div> <hr color="#DFDFFF" width="90%"> <%          rs.movenext loop ADO.close %> <!--#include file="pagefooter.txt" -->

وستكون النتيجة كالتالي:



والآن سنقوم بشرط الإضافات سطرا سطرا:

-(Do) حلقة. صيغتها Do (something) Loop. فالسطر do while not rs.eof يعني: (Do) ابدأ حلقة، (while) ما دامت، (not) لم تكون rs نهاية الملف (eof اختصار لـ End Of File). إي أنه الحلقة ستستمر في التنفيذ (الحلقة تبدأ بكلمة Do وتنتهي بكلمة Loop) ما دام هذا الشرط صحيحا، وبمجرد أن لا يتحقق الشرط لن يتم تنفيذ ما بين Do و Loop وسيغلق الحلقة لينفذ ما بعدها (أي ما بعد Loop).

- ثم وضعنا أوامر عرض النتائج.

- rs.movenext تعني انتقل للنتيجة التالية
- (Loop) تكرار الحلقة. أي سيعود إلى جملة Do وينفذها ما دامت صحيحة. حيث كانت Do تعني أنه يستمر في تنفيذ الحلقة حتى تصبح rs نهاية الملف. فإن كانت rs نهاية الملف سيتوقف عن تنفيذ الحلقة وينتقل للسطر الذي يلي Loop أما إن لم تكن rs نهاية الملف فسينفذ الحلقة.

نختم هذا الدرس، باستخدام SSI لـ Code ربط الملف بقاعدة البيانات:

قم بقص الأسطر التالية من ملف tech.asp والصقهم في Notpad واحفظهم باسم connection.txt.

Code Sample

<% 'أوامر فتح قاعدة البيانات Dim ConnectionString Dim ADO ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;" & "Data Source=" & Server.MapPath("\news\database\project.mdb") Set ADO=Server.CreateObject("ADODB.Connection") ADO.ConnectionString =ConnectionString ADO.Open %>

مكان الأسطر السابقة في tech.asp ضع سطر (إدراج الملف) التالي:

Code Sample

<!--#include file="connection.txt" -->

وسيكون شكل الصفحة كالتالي:

Code Sample

<%@ Language=VBScript CodePage = "1256"%> <html dir=rtl> <!--#include file="pageheader.txt" --> <p align="center"><span lang="ar-sa"><font face="Simplified Arabic">إليكم آخر المستجدات في الساحة التقنية</font></span></p> <!--#include file="connection.txt" --> <% 'أوامر اختيار الجدول واستدعاء البيانات منه selectSQL="select * from tech_news" set rs=ADO.execute(selectSQL) 'أوامر استعراض البيانات do while not rs.eof %> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%"> <tr> <td width="100%" dir="rtl" bgcolor="#DFDFFF"><b><span lang="ar-sa">العنوان : <%response.write rs("subject")%></span></b></td> </tr> <tr> <td width="100%" dir="rtl"><b><span lang="ar-sa">التاريخ : <%response.write rs("add_dat")%></span></b> <p><span lang="ar-sa">الخبر : <%response.write rs("body")%></span></b></td> </tr> </table> </center> </div> <hr color="#DFDFFF" width="90%"> <%        rs.movenext loop ADO.close %> <!--#include file="pagefooter.txt" -->

تمنى أن يكون هذا الدرس واضحا. وسيتم تطوير هذا الملف في مرحلة متقدمة إن شاء الله. ويمكنك الآن الانتقال للدرس التالي.

------------------------------------------------------------------------------------------



----

يمكنك مشاهدة الصفحة التي قمنا بتصميمها في هذا الدرس من خلال هذا الرابط:  أخبار تقنية

سيتم وضع رابط لسحب هذه الصفحة في الدرس الثامن وذلك بعد الانتهاء من تصميم صفحة tech.asp بالكامل.

[ابو الحروف]

اخي الكريم ابو عبد الرحمن

ارجو الا يضيق صدرك لكثرة اسئلتي, ولكن...
انا ما زلت في الدرس الخامس ويبدو ان هنالك مشكلة في الاوامر في هذا الدرس!
هل هذا يعود الى كونها الصقت من جديد؟ لا ادري!

[أبو عبدالرحمن]

أخي الحبيب أبو الحروف

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

[ابو الحروف]

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

الحقيقة انني لا ادري اين الخلل بالضبط!! لقد تحريت في موقع النور وقمت بكتابة الاكواد تماما كما ظهرت هناك... حتى انها تظهر تقريبا كما تفضلتم في الدرس السابع (طبعا بدون الاضافات التي في الدرس السادس)... انا احاول تشغيل الملف فلا تظهر لي المعلومات من قاعدة البيانات!! قد تكون المشكلة في وجود ويندوز xp وويندوز me على جهازي حيث ان ال xp موجود في d وليس في c!!