لمقرر تقنية تصميم صفحات الويب 1266 · 2019. 5. 26. · لاثم( ام...

: .

2014

الدليل العملي 6611لمقرر تقنية تصميم صفحات الويب

فت حةج م ة لق س لم

ل ة لت ل ج ل ل م لتطب ق ة

كلية التكنولوجيا والعلوم التطبيقية جامعة القدس المفتوحة

2 عيسى أسعد. أ: إعداد 4102كانون أول | الدليل العملي لمقرر تقنية تصميم صفحات الويب

الدليل العملي

لمقرر

6611تقنية تصميم صفحات الويب

(6)نسخة رقم

6162ول أكانون



جدول المحتويات

5 ...................................................................................................................................... :العملي الدليل أهداف

5 ....................................................................................................................................... :العملي الدليل أقسام

HTML ......................................................................................................................... 6 لغة تعلم: األول القسم

6 ............................................................................................................... :القسم هذا في تحتاجها التي األدوات

HTML ................................................................................................................... 7 أساسيات: األول الدرس

Cascading Style Sheets CSS: ...................................................................... 21 المتعاقبة االنماط: الثاني الدرس

CSS: ....................................................................................................... 21 المتعاقبة األنماط خداماست طرق

26 .............................................................................................................................. النماذج: الثالث الدرس

ASP .................................................................................................. 21 لغة باستخدام المخدوم برمجة: الثاني القسم

21 ................................................................................................................................................... مقدمة

ASP .................................................................................................................... 21 لغة على العمل متطلبات

21 .......................................................................................... (التشغيل نظام على IIS تنصيب) التشغيل بيئة إعداد

XP ....................................................................................................................... 21 ويندوز في التنصيب

12 ........................................................................................................................... 7ويندوز في التنصيب

IIS ............................................................................................................................ 12 الويب خادم تشغيل

ASP ................................................................................................................... 12 باستخدام مثال أول تطبيق

12 ............................................................................................................................... .البيانات قاعدة مع الربط

17 ................................................................................................................... للمشروع البيانات قاعدة تصميم

22 .............................................................................................................. اناتيالب بقاعدة ASP صفحات ربط

21 .................................................................................................................................... :البيانات قراءة

22 .................................................................................... البيانات قاعدة مع للربط التقنية المشاكل لبعض حلول

23 ............................................................................................................................... البيانات في البحث

21 ..................................................................................................................................... بيانات إضافة

27 ...................................................................................................................المعلومات من التحقق صفحة

52 ................................................................................................................................... البيانات تحديث

56 ..................................................................................................................................... البيانات حذف

XML ......................................................................................................... 57 لغة على تطبيقية أمثلة: الثالث القسم

Document Type Definition (DTD) . .......................................................................... 57 الوثيقة نوع تعريف

XSL. ...................................................................................................... 53 باستخدام XML مستندات استعراض

ASP ..................................................................................................... 62 صفحات خالل من XML ملف إنشاء



ASP ............................................................................................ 61 باستخدام الويب خادم على XML ملف انشاء

62 ........................................................................................... :البيانات قواعد من XML ملف محتويات استرجاع



:أهداف الدليل العملي :على أنيتوقع منك عزيزي الطالب بعد االنتهاء من دراسة هذا المقرر أن تكون قادرا

.لتصميم واجهة المواقع اإللكترونية( HTML)لغة تطبق .6

(.Server-Side)لبرمجة الخادم ( ASP)تطبق لغة .6

.لربط المواقع اإللكترونية مع نظم قواعد البيانات( ADO)تطبق التطبيقات .3

.XMLتطبيق أمثلة عملية حول لغة .2

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

:الدليل العملي أقسامالقسم األول، و يقدم أمثلة وتطبيقات عملية حول تصميم وعرض : يقسم هذا الدليل إلى ثالثة أقسام أساسية لتحقيق األهداف أعاله

برمجة المخدوم باستخدام "مما يحقق الهدف االول أما القسم الثاني بعنوان HTMLمحتويات صفحات األنترنت باستخدام وسوم لغة

، ثم تطبيق أول مثال باستخدام لغة (التشغيل نظام على IIS تنصيب) التشغيل بيئة إعدادفإنه يحتوي شرحا عمليا حول " ASPة لغ

ASP باستخدام لغة البيانات عدواق مع الربط، ثم تتطرق دروس هذا القسم إلى شرح آليةASP لعرض، تخزين وتعديل و بحث عن

مما يحقق الهدف الثاني البيانات قاعدة مع لربطالتي تواجه الطالب أثناء ا التقنية المشاكل لبعض حلولبيانات، كما يتطرق إلى شرح ال

، أو XMLويشرح كيف يمكن للطالب أن يقرأ بيانات ملف XMLأما القسم الثالث فإنه يحتوي تطبيق أمثلة عملية حول لغة . والثالث

. XMLالبيانات ويخزنها في ملف ، كيف يقرأ بيانات قواعدXMLأن يحفظ بيانات في ملف

دروس أثناء شرح يقونةالباوترمز "مشكلة وحل"شعار وتظهر تحت لبعض المشاكل التي قد تواجه الطالب حلواليتخلل الدليل

، كما يحتوي الدليل أيضا على معلومات بعض وتظهر باأليقونة الدليل دروسضمن ، كما يتطرق الدليل إلى تدريبات الدليل .وباأليقونة " ل تعلمه"لمعلومات المميزة تظهر تحت شعار ا



HTMLتعلم لغة : ولاأل القسم

:األدوات التي تحتاجها في هذا القسم

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

.عكلكي تكمل الدرس وتقوم بإنشاء موق

ليس مهماً أي متصفح تستخدم، المتصفح . ، وهو البرنامج الذي يمكنك من تصفح المواقع والتجول فيها"متصفح"لديك

، لكن هناك متصفحات أخرى مثل أوبيرا Internet Explorerاألكثر انتشاراً هو مايكروسوفت إنترنت إكسبلورر

Opera وموزيال فايرفوكسFireFox و كرومChrome قابلة لالستخدام وكلها.

أو ماكروميديا دريمويفر FrontPageربما سمعت أو حتى استخدمت برامج مثل مايكروسوفت فرونت بيج

DreamWeaver إنشاء المواقع لك، سوف -أو تدعي أنها تستطيع -أو حتى مايكروسوفت وورد، هذه البرامج تستطيع

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

"Notepad" بدالً من ذلك ستحتاج إلى محرر نصي بسيط، إذا كنت تستخدم نظام ويندوز يمكنك أن تستخدم المفكرة

:"Accessories" ثم في قائمة األدوات "Program" ثم قائمة البرامج "start" والذي يمكنك أن تجده في قائمة إبدأ

ذلك لما فيه من مزايا فهم اللغة المستخدمة وتحريرها بشكل ++Notepadستخدام محرر النصوص المجاني أو يمكنك ا

. plus.org/ar/download-plus-http://notepad: الئق، ويمكنك تحميل البرنامج من خالل الرابط التالي

http://notepad-plus-plus.org/ar/download



HTMLأساسيات : الدرس األول

سوف أقوم في هذا الدرس بسرد الوسوم األساسية لصفحة الويب . HTMLأهالً وسهالً بك إلى الدرس األول من دروس

. لنصل في النهاية إلى إنشاء صفحة ويب بسيطة. ومناقشتها معك واحداً تلو اآلخر

.HTMLالشكل التالي يبين األقسام الرئيسية لصفحة

مثال . )على مجلد ما htmأو htmlواحفظ الملف بامتداد من نوع ++notepadالي مستخدما محرر النصوص اكتب النص الت -2

(c:\appعلى المجلد index.htmlملف باسم

.افتح الملف السابق باستخدام المتصفح -1

:سوف تظهر لك النتيجة التالية



:قق ما يلياعمل التعديل الالزم على المثال السابق ليح: تدريب

اضافة عنوانا للصفحة( 6

.اظهار النص كعنوان في منتصف السطر( 6

لون النص أحمر( 3

إضافة صورة( 2

إضافة رابط( 5

؟أنه بإمكاننا استخدام عدة وسوم وتنسيقات معاً في نفس الوقت ولنفس المقطع من النص هل تعلم

:كيف؟ أنظر إلى الرسم التالي!... ة عدم التداخل بينهاعند استخدام الوسوم المتعددة في مقطع واحد يجب مراعا

: فكتابة الوسوم السابقة بالطرق التالية هو خطأ<B><I><U>

This is a Bold, Italic and Underlined Text

<‎/B> <‎/I> <‎/U>

<B><I><U>

This is a Bold, Italic and Underlined Text

<‎/B> <‎/U> <‎/I>

.اه إلى إغالق الوسوم عند كتابتهابجب االنتب :مثال

<html>

<body>

<h1>This is h1 heading</h1>



<p>My first paragraph.</p>

</body>

</html>

:والحظ ماذا سيحدث النتيجة <body>داخل الوسوم التي تقع أعد تطبيق المثال السابق دون إغالق الوسوم : سؤال

<h1>This is h1 heading





<p>My first paragraph.

اضافة رابط لصفحة جامعة القدس المفتوحة

<a href="http://www.qou.edu">موقع جامعة القدس المفتوحة</a>

اضافة صورة

<img src="assets/qou.jpg" alt="qou.com" width="104" height="142">

داخل الصورة ظهر فإن المتصفح لن ي assetsفي مجلد qou.jpgصورة باسم في حال عدم وجود: مشكلة وحل

.الصورة المفقودة بدال من qou.comعبارة وسيعرص الصفحة عند عرضها

وضع خاصية تعريف لغة الصفحة يكمن في لحلا. قد تواجهك مشكلة في اظهار النص باللغة العربية: مشكلة وحل

.كما في المثال التالي

<HTML>

<HEAD>

<TITLE> ... <‎/TITLE>

‎<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=windows-1256 ">‎

<‎/HEAD>

<BODY>

.مرحبا بكم في صفحتي االلكترونية

....

<‎/BODY>

<‎/HTML>

.يوجد دائماً أكثر من طريقة ألداء نفس العمل: حظةمال

؟styleأنه يمكنك تحديد خصائص الوسوم باستخدام الخاصية هل تعلم

: فمثال، يمكنك تحديد خصائص الصورة بالطريقة التالية

<img src="assets/qou.jpg" alt="qou.com" style="width:104px; height:142px">

.للصورة المضافة مسبقا اأضف رابط: سؤال

.نضع وسم الصورة بين اشارتي الفتح واإلغالق لوسم الرابط :اإلجابة<a href="http://www.qou.edu" alt="موقع جامعة القدس المفتوحة"> <img src="assets/qou.jpg" alt="qou.com" width="104" height="142">

</a>



.أضف خلفية رمادية اللون للصفحة: سؤال

<body style="background-color:lightgrey"> أو

<body bgcolor="lightgrey">

تغيير لون النص في كل من العنوان والفقرةاعمل على : سؤال

<h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph.</p>

من العنوان والفقرةتغيير نوع الخط للنص في كل قم ب: سؤال<h1 style="font-family:verdana">This is a heading</h1> <p style="font-family:courier">This is a paragraph.</p>

تغيير حجم الخط للنص في كل من العنوان والفقرةقم ب: سؤال

<h1 style="font-size:300%">This is a heading</h1> <p style="font-size:160%">This is a paragraph.</p>

توسيط النصقم ب: سؤال<h1 style="text-align:center">Centered Heading</h1>

من خالل دمج قيم ثالثة ألوان رئيسية كما في هو موضح HTMLأنه بإمكانك تحديد قيم األلوان في وسوم لغة ه ت لم

:ص التاليويمكن اسنادها كما في الن ؟في الشكل التالي

<font face="Simplified Arabic" size="3" color="#6699CC"> مرحبا</font>

ويعبر عن هذه الدرجات درجة لونية 651ثالثة ألوان أساسية هي األحمر واألخضر واألزرق، ولكل منها يوجد هناك

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

.مكتوبة بالنظام السداس عشريو تكون من هذه األلوان الثالثة -معينة من الدرجات وبنسبة -إن أي لون هو مزيج

:تدريبات محلولة . courierاعمل على تغيير نوع الخط في المثال السابق إلى ( 1

.داخل الوسم styleاستخدم الخاصية : مساعدة

.عمل توسيط لجميع محتويات الصفحةا( 2

في وسم الصفحة text-alignاستخدم الخاصية : مساعدة

:تغيير خلفية الصفحة إلى اللون االصفر( 3

.styleاستخدم الخاصية : مساعدة



:(6)تدريب إجابة

<!DOCTYPE html>

<html>

<body>

<h1 style="font-family:courier">This is a heading</h1>

<p style="font-family:courier">This is a paragraph.</p>

</body>

</html>


<!DOCTYPE html>

<html>

<body style="text-align:center">

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>


<!DOCTYPE html>

<html>

<body style="background-color:yellow">

<h1>This is a heading</h1>


</body>

</html>

في المثال السابق ثم <body>اعمل على تطبيق الوسوم التي تعلمتها من خالل دراستك للمقرر داخل الوسم : تدريب

.دام المتصفحانظر النتيجة التي تظهر عند فتح الملف باستخ

في االمثلة السابقة بطرق مختلفة عن الطرق التي تعلمتها HTMLوسوم لغة خصائص تحديدأنه بإمكانك هل تعلم

؟CSS األنماط المتعاقبةما يسمى وذلك باستخدام



:Cascading Style Sheets CSSاالنماط المتعاقبة : الدرس الثاني

في الدرس كما رأيت .CSS ، في هذا الدرس ستجد مقدمة قصيرة إلى(CSS) خدم تقنيةلكي تعطي صفحتك تصميماً يجب أن تست

، فمثالً يمكنك أن تضع داخل الوسوم وهذه إحدى ثالث طرق الستخدام االنماط Style من خالل خاصية CSS يمكن إضافة ،السابق

:كما في المثال التالي نوع الخط وحجمه<p style="font-size:20px;">This is typed in size 20</p> <p style="font-family:courier;">This is typed in Courier</p> <p style="font-size:20px; font-family:courier;">This is typed in

Courier size 20</p>

وحددنا حجم font-family لتحديد نوع الخط الذي نريد استخدامه من خالل أمر style في المثال أعاله اسخدمنا خاصية

، الحظ كيف أن الفقرة األخيرة استخدامنا األمرين معاً وقمنا بالفصل بينمها من خالل font-size الخط من خالل أمر

.فاصلة منقوطة

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

.CSSاستخدام تقنية االنماط المتعاقبة ن خاللم يكونوالحل

:CSSطرق استخدام األنماط المتعاقبة

.وضع أوامر األنماط في رأس الصفحة: ولىالطريقة األ

وضع أوامر األنماط في رأس الصفحة: (6)مثال

<!DOCTYPE html>

<html>

<head> <style> body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; } </style>

</head>

<body>

<h1>My First CSS Example</h1>


</body>

</html>

:التاليعند استعراض الملف السابق فإن النتيجة ستظهر كما في الشكل



.تطبيق األنماط مباشرة داخل الوسوم: لطريقة الثانيةا

:كما مر معنا في أمثلة سابقة

: (6) مثال

<!DOCTYPE html> <html> <head> <body style="background-color: #d0e4fe;"> <h1 style="color: orange;text-align: center;">My First CSS Example</h1> <p>This is a paragraph without any style.</p> <p style="font-size:20px;">This is typed in size 20</p> <p style="font-family:courier;">This is typed in Courier</p> <p style="font-size:20px; font-family:courier;">This is typed in Courier size 20</p

</body>

</html>

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



css.باالمتداد ظاستخدام صفحات أنماط خارجية تحف: الطريقة الثالثة

.يتم فيها تحديد خصائص االنماط المرغوبة وثم نقوم بتضمين الملف

(:3)مثال

:يحتوي النص التالي mystyle.cssنص ملف االنماط ( 6

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

p {

font-family: "Times New Roman";

font-size: 20px;

}

.يحتوي الوسوم التالية، انتبه إلى وسم الربط بملف االنماط في قسم رأس الصفحة HTMLملف صفحة ( 6

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>My First CSS Example</h1>

<p>This is a paragraph.</p> </body> </html>

الناتج . السابق وسترى بأن الوسوم قد تأثرت بالخصائص المعرفة داخل ملف األنماط HTMLاستعرض ملف صفحة ( 3

:سيظهر كما في الشكل التالي



خدام تفبدالً من اس ؟أنها تمكنك من إدارة التصميم من خالل مكان واحد CSS أن إحدى أذكى خصائص هل تعلم

.لكل وسم، يمكن أن تخبر المتصفح مرة واحدة كيف يجب أن يعرض التصميم لكل النصوص في الصفحة style خاصية

ثم قم بتغيير قيم . وقم باستعراضهم في المتصفح mystyle.cssبق ابملف األنماط الس HTMLط أكثر من ملف حاول رب: ت ر ب

.بعد التغيير مرة أخرى والحظ النتيجة اخل ملف االنماط ثم استعرض الملفبعض الخصائص المعرفة د



النماذج: الثالثالدرس أن هناك شكلين آخرين ندرجهما العلم بمع . ي الجدول التاليف TYPEالمستخدمة مع الخاصية ( القيم)األشكال الحظ

<SELECT< ,>TEXTAREA>بالوسوم

‎<INPUT TYPE="text">‎

‎<INPUT TYPE="password">‎

‎<INPUT TYPE="hidden">‎

‎<INPUT TYPE="radio">‎

‎<INPUT TYPE="checkbox">‎

‎<INPUT TYPE="submit">‎ Submit Query

‎<INPUT TYPE="reset">‎ Reset

‎<INPUT TYPE="button">‎

: INPUTشرح خصائص الوسم

TYPE : حقل البيانات( شكل)لتحديد نوع .

NAME :لتعيين اسم لحقل البيانات .

VALUE : لحقل البيانات( مبدئية)لتعيين قيمة إفتراضية .

SIZE :لتحديد حجم حقل البيانات .

MAXLENGTH :حد األقصى لعدد الحروف المدخلة في الحقللتعيين ال.

ثم استعرض الملف مستخدما المتصفح والحظ bodyاعمل على انشاء ملف يحتوي النص التالي داخل الوسم : تدريب

.النتيجة

<FORM> <INPUT TYPE="radio" NAME="day" VALUE="sun"> Sunday <BR>

<INPUT TYPE="radio" NAME="day" VALUE="mon"> Monday<BR> <INPUT TYPE="radio" NAME="day" VALUE="tue">

Tuesday<BR> <INPUT TYPE="radio" NAME="day" VALUE="wed"> Wednesday<BR>

</FORM>



<FORM> <INPUT TYPE="checkbox" NAME="sun" VALUE="Yes">

Sunday <BR> <INPUT TYPE="checkbox" NAME="mon" VALUE="Yes"> Monday <BR>

<INPUT TYPE="checkbox" NAME="tue" VALUE="Yes"> Tuesday <BR> <INPUT TYPE="checkbox" NAME="wed" VALUE="Yes">

Wednesday <BR> </FORM>

<FORM>

<SELECT NAME="day" SIZE="2"> <OPTION>Sunday</option> <OPTION>Monday</option>

<OPTION>Tuesday</option> <OPTION>Wednesday</option> </SELECT>

</FORM>

<FORM> <SELECT NAME="day" SIZE="4" MULTIPLE>

<OPTION> Sunday <OPTION> Monday <OPTION> Tuesday

<OPTION> Wednesday </SELECT> </FORM>

<TEXTAREA NAME="comments" COLS="30" ROWS="6"> </TEXTAREA>

.القسم الثاني من الدليلمادة سوف نتطرق إلى عمل نماذج وتطبيقها في



ASPبرمجة المخدوم باستخدام لغة : القسم الثاني

مقدمة

مثل .. العرض عند لك سيظهر الصفحة في تكتبه ما أنك بمعنى ثابتة تكونHTML صفحات في الظاهرة المعلومات

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

مثل بيانات قواعد في مخزنة أخرى معلومات أو منتداك في المشتركين أسماء أو ..الزوار سجل مالحظات مثل

.اكسس ميكروسوفت

فيها البيانات المخزنة قواعد نم مباشرة باستخراجها الشاشة في البيانات هذه عرض ASPصفحة باستخدام تستطيع

غير صفحات بكونها HTMLعن ASPصفحات وتتميز HTMLصفحات على البيانات هذه تخزين من بدال البيانات

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

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

، Guest Bookالزوار ، سجلDiscussion Board، المنتديات Chatغرف الحوار ..الصفحات هذه على األمثلة ومن

.المعلومات وإرسال استقبال تتطلب التي الصفحات من وغيرها.. المشتركين قوائم

ASPلغة على العمل متطلبات

.Internet Information Services IISمثل ASPخادم ويب يستطيع تشغيل ملفات

.MS ACCESSمثل قواعد البيانات إحدى برامج

(على نظام التشغيل IIS تنصيب)إعداد بيئة التشغيل ب عليك القيام بتنصيبه تلقائيا، بل يج IISعندما تقوم بتنصيب نظام التشغيل ألول مرة فإن نظام التشغيل ال يقوم بإضافة

فيمكنك استخدام ملف التنصيب ( IISموقع والتي يمكنك الحصول عليها من ) IISفإذا كانت لديك نسخة أحدث من . بنفسك

ي مع نظام أما إذا لم تكن لديك نسخة أحدث أو كنت تفضل استخدام اإلصدار الذي يأت. إلى نظام التشغيل IISإلضافة

لتنصيب هذه النسخة، وهذا ما سنفعله Windows Componentsالتشغيل فيمكنك استخدام لوحة إدارة مكونات النظام

.اليوم

XP التنصيب في ويندوز

:اتبع الخطوات التالية XP في ويندوز IIS لتنصيب

.Control Panel اذهب إلى لوحة التحكم .6

.Add or Remove Programs إزالة البرمج/اختر إضافة .6

.Add/Remove Windows Components إزالة مكونات الويندوز/اتجه إلى إضافة .3

.وقم بتحديدها Internet Information Services (IIS) اتجه إلى الظاهرة في الشكل التالي، من الشاشة .2

http://www.iis.net/



مثال اختيار )تريد تنصيبها واختيار المكونات اإلضافية التي IIS لـ Details يمكنك أيضا دخول شاشة التفاصيل .5

(.إذا كنت مهتما بها SMTP خدمة البريد

وقم بإدخال اسطوانة نظام التشغيل أو تحديد مجلد ملفات تنصيب نظام التشغيل Next اآلن اضغط التالي .1

.الموجود على جهازك

Control من لوحة التحكم Administrative Tools يمكنك الذهاب إلى أدوات اإلدارة IIS اآلن وقد انتهيت من تنصيب

Panel وتشغيل IIS من هناك.

http://withdotnet.net/wp-content/uploads/2011/01/Installing-IIS-Windows-XP.jpg



7التنصيب في ويندوز

:، فقط اتبع الخطوات التالية(XP) عنه في إكس بي 7كثيرا في ويندوز IIS ال يختلف تنصيب

.Control Panel إفتح لوحة التحكم .6

.Programs and Features اتجه إلى .6

.Turn Windows features on or off من اليسار اختر .3

وقم باختيار World Wide Web Servicesافتح قائمة ثم Internet Information Services قم بتحديد .2

:في الشكل التاليمن القائمة كما هو ظاهر ( ISAPI Extensionو ASP)الخيارات

7في ويندوز IIS تنصيب - 6شكل

.ما تحتاج إلى إعادة تشغيل النظام بعدهارب. واالنتظار حتى يتم التنصيب OK قم بالضغط على .5

الحظ أن التنصيب قام بإنشاء مجلد جديد على . على جهازك ASPواألن لقد تم تنصيب خادم صفحات

C:\inetpub\wwwroot بإمكانك إنشاء مجلد . والذي يعتبر المجلد اإلفتراضي لصفحات موقعك( باسمapp مثال ) داخل

.وي ملفات الموقع الخاص بكالمجلد اإلفتراضي السابق ليحت

ولكنه يسمح wwwrootالملفات الموجودة داخل المجلد محتويات من التعديل على IISقد ال يسمح خادم الويب :مشكلة وحل

داخل المجلد تلك الملفات ثم أقوم بنسخ wwwrootخارج المجلد آخر إنشاء ملفات داخل مجلدالحل هو أن أعمل على . بنسخ ملفات

wwwroot.



IIS خادم الويب تشغيل

.من هناك IIS من لوحة التحكم وتشغيل Administrative Tools اآلن وبعد التنصيب يمكنك الذهاب إلى

فحيث .IIS فيمكنك استخدام طريقة مختصرة لتشغيل Administrative Tools كل مرة من IIS إذا لم ترغب بتشغيل

فيمكننا ببساطة أن نضيف هذا المجلد في متغيرات windir%\System32\inetsrv% يتم تنصيبه في مجلد IIS أن

تشغيله بكتابة اسم البرنامج تلقائيا أال Cmd أو Run وبالتالي تستطيع من خالل أمر Environment Variables النظام

.inetsrv وهو

:إلى متغيرات النظام اتبع الخطوات التالية IIS إلضافة مجلد

أو باستخدام اختصار ) Properties واختيار Computer م بالضغط بزر الفأرة األيمن علىافتح خصائص النظا .6

(.Start + Pause Break لوحة المفاتيح وهو

.من اليسار Advanced System Settings اختر 7إذا كنت تستخدم ويندوز .6

(.3شكل انظر ) Environment Variables ومن هناك اختر Advanced اآلن اذهب إلى التبويب .3

.Edit ثم الضغط على زر Path من شاشة متغيرات النظام وفي القائمة السفلى قم باختيار العنصر .2

إلى ; قم بإضافة عالمة الفاصلة المنقوطة Variable Value من خالل هذه الشاشة وفي خانة .اآلن انتبه جيدا .5

:ثم قم بإضافة هذا السطر حرفيا( لنهايةإذا لم تكن هذه العالمة موجودة أصال في ا)نهاية القيمة الموجودة

%windir%\System32\inetsrv

.مرة ثالثة OK ثم OK ثم OK اآلن قم بالضغط على .1



الخاص بالنظام Path التعديل على متغير كيفية يوضح شكل

.مباشرة IIS حلفت inetmgr وكتابة (Start + R ممكن باستخدام اختصار لوحة المفاتيح) Run اآلن يمكنك الذهاب إلى

ح وذلك من خالل من خالل المتصف ASPأنه بإمكانك اظهار األخطاء التي قد تواجهك أثناء تنفيذ صفحات هل تعلم

؟IISعلى خادم إعدادات تقوم بها

.على المتصفح للمستخدم ASPيعرض أخطاء صفحات IISكيفية إعداد خادم

http://withdotnet.net/wp-content/uploads/2011/01/Path-Environment-Variable.png



ASPتطبيق أول مثال باستخدام

.داخل مجلد ما ليكون( aspالحظ بأن امتداد الملف هو ) index.aspنص التالي في ملف باسم ال احفظ -6

<html>

<body>

<%

response.write("<h1>Welcome to my web page</h1>")

%>

</body>

</html>

. C:\inetpub\wwwrootتنشئه داخل appانسخ الملف السابق إلى مجلد -6

.IISالويب أعد تشغيل خادم -3

.والحظ الناتج .باستخدام المتصفح http://localhost/app/index.aspافتح الرابط التالي -2

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



.الربط مع قاعدة البيانات

على سنعتمد لكننا ..البيانات قواعد برامج من غيرها أو SQL Server أو Microsoft Accessاستخدام يمكننا

Microsoft Access 2000 األغلبية عند لتوفره في هذا الدليل وذلك.

:يحتوي مايلي بسيط إخباري موقع تصميم سيكون، مشروعنا

:المحتوى :أوال

. تقنية أخبار .١

. منوعة أخبار .٢

:الخدمات :ثانيا

. الموقع تمحتويا في بحث محرك .١

. زوار سجل .٢

:اإلدارة:ثانيا

. الموقع خالل من األخبار حذف تعديل، إضافة، .١

.انشاء الصفحة الرئيسية للمشروع: مثال

<html dir=rtl> <head>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1256">

<title> اليوم عالم </title>

</head> <body>

<p align="center"><img border="0" src="thetitel.gif"></p> <hr>

<p align="center">

<font face="Simplified Arabic" size="3">

<b><a href="index.asp"> الصفحة الرئيسية</a>|

<a href="tech.asp"> أخبار تقنية </a>| <a href="news.asp"> أخبار

|<a/> منوعة

<a href="search.asp"> بحث </a> | <a href="guest.asp">

|<a/> سجل الزوار

<a href="admin.asp"> إدارة الموقع </a></b> </font> </p>

<hr> <p align="center">

<font face="Simplified Arabic" size="3"> مرحبا بكم في موقعنا اإلخباري

<font/> المتميز </p>

<p align="center">

<font face="Simplified Arabic" size="3"> المتعة والفائدة معنالكم نتمنى

</font> </p> <p align="center">

<font face="Simplified Arabic" size="3">مع تحيات </font> </p> <p align="center">



<font face="Simplified Arabic" size="3" color="#AD1212"> إدارة

<font/> الموقع </p> <hr>

<p align="center"> <font face="Simplified Arabic" size="3">


<a href="tech.asp"> أخبار تقنية </a>|

<a href="news.asp"> أخبار منوعة </a>|

<a href="search.asp"> بحث </a> |

<a href="guest.asp"> سجل الزوار </a>|

<a href="admin.asp"> إدارة الموقع </a></b> </font> </p>

<p align="center"><b>

<font face="Simplified Arabic" size="2"> جميع الحقوق محفوظة 2014 </font></b> </p>

</body> </html>

.IISقم بإيقاف خادم الويب -6

C:\inetpub\wwwroot\appداخل المجلد index.htmlاحفظ النص السابق في ملف باسم -6

.أعد تشغيل الخادم -3

.والحظ النتيجةالمتصفح باستخدام http://localhost/app/index.htmlالرابط التالي فتح ا -2

.شرحا للمثالواآلن إليك

.من أجل تحديد اتجاه المحتوى داخل الصفحة ليكون من اليمين إلى اليسار< html dir=rtl>استخدمنا الوسم -

يستخدم < "meta http-equiv="Content-Type" content="text/html;charset=windows-1256>الوسم -

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

.charset=windows-1256خالل قيمة الخاصية

.الحظ أن الملف يحتوي قائمة الروابط في الترويسة وأيضا في التذييل للصفحة

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

؟include من خالل جملة نحتاجها ASP استدعائها في كل صفحةثم فاتداخل مل

:اء التاليةزواآلن سنقوم بتقسيم الملف السابق إلى اإلج

(pageHeader.txt)الجزء االعلى من الصفحة ملف نص

<head>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1256">

<title> الم اليومع </title> </head> <body> <p align="center"><img border="0" src="thetitel.gif"></p>

<hr> <p align="center">

<font face="Simplified Arabic" size="3">


<a href="tech.asp"> أخبار تقنية </a>| <a href="news.asp">

|<a/> أخبار منوعة



<a href="admin.asp"> إدارة الموقع </a></b> </font> </p> <hr>

(pagefooter.txt)ملف نص الجزء االسفل من الصحة <hr>

<p align="center"> <font face="Simplified Arabic" size="3">


<a href="tech.asp"> أخبار تقنية </a>| <a href="news.asp">

|<a/> أخبار منوعة



<a href="admin.asp"> ة الموقعإدار </a></b>

</font> </p> <p align="center"><b>

<font face="Simplified Arabic" size="2"> جميع الحقوق محفوظة 2014</font></b> </p> </body>

</html>

يستورد الملفين السابقين index.aspملف

<html dir=rtl>  <p align="center">

<font face="Simplified Arabic" size="3">مرحبا بكم في موقعنا اإلخباري المتميز </font> </p> <p align="center">

<font face="Simplified Arabic" size="3"> المتعة والفائدة معنالكم نتمنى

</font> </p> <p align="center">

<font face="Simplified Arabic" size="3">مع تحيات </font> </p> <p align="center">

<font face="Simplified Arabic" size="3" color="#AD1212">إدارة الموقع </font> </p> <hr>



من خالل المتصف والحظ http://localhost/app/index.aspاعمل التعديالت السابقة ثم استعرض الملف : تدريب

.النتيجة

بإعداد قاعدة بيانات المشروع باستخدام سوف نقوم ، مع قاعدة البيانات كتبة النصوص المتعلقة بالربط بدأ فينقبل أن

.ACCESSبرنامج

للمشروع البيانات قاعدة تصميم

في سابقة خبرة لديك لم تكن وإن Microsoft Access 2000 برنامج باستخدام البيانات قاعدة سابقا، سنصمم ذكرنا كما

.بخطوة خطوة معك فسأكون شيئا، تخشى فال البرنامج هذا مع التعامل

.Accessانشيء قاعدة بيانات جديدة باستخدام برنامج .6

واحفظها في اسما لها البيانات، اختر قاعدة حفظ منك سيطلبOk واضغط Blank Access databaseاختر .6

C:\databaseمجلد

project.mdbهنا القاعدة سنسمي



التالية الشاشة لك ستظهرCreate زر على الضغط بعد

التالي الجدول وصمم Create table in Design viewاختر



Fieldستجد ( (Text, Memo, AutoNumberالحقل نوع بتغير يتغير الجزء وهذا Field Propertiesقسم في

Size .قل الح كان إنText بإمكانك التي عدد الحروف يحدد الذي هو الجزء هذا. ٠٥ الموجود الرقم يكون ما وعادة

.األقصى الحد وهو ٢٠٠ ل بتغييرها أنصح لذا الحقل، هذا في إدخالها

أي Yesبإمكانك وضع .فارغ الحقل هذا ترك يمكن ال أي Noأمامها يكون وعادة Allow Zero Lengthستجد أيضا

.البيانات من فارغ الحقل هذا ركت يمكن

. tech_newsسنسميه الحالي مشروعنا في .يعجبك اسم أي اختيار بإمكانك الجدول، اسم عن سيسألك Saveعلى اضغط

Noمنها اختر التالية الرسالة لك ستظهر ثم

الشكل التالي لك رسيظه. لفتحه مرتين اسمه على اضغط. في الشكل التالي موجود اسمه وسترى الجدول، أغلق



(.سيتم ترقيمها تلقائيا idالحظ أن خانة )الجدول في التالية البيانات أدخل

أبل قد تكون عالجت 3/66/6162 6

مشكلة انحناء

بلس 1 آيفون

كشفت تقارير أن شركة أبل األمريكية عالجت مشكلة انحناء هاتفها الذكي

أجراها أحد مستخدمي موقع التواصل بلس، استنادا إلى اختبارات 1آيفون

، دون أن تعلن الشركة رسميا عن تخلصها من Redditاالجتماعي

المشكلة التي واجهت مستخدمي الهاتف، بعد إطالقه، والمتعلقة بتعرضه

.النحناء دائم في جيوب بناطيلهم

، إنه اشترى doctorkuddlesوأوضح المستخدم، الذي يحمل اسم

1جيجابايت من آيفون 661زودة بذاكرة تخزين سعتها مؤخرا النسخة الم

بلس، وقارنه بهاتف زوجته الذي ينتمي إلى النوع ذاته، لكنه اإلصدار

جيجابايت، والذي اشترته عقب إطالقه للبيع، 61المزود بذاكرة سعتها

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

.زوجتهاستُخدمت في هاتف

عدة اختبارات على الهاتفين ليكتشف الفروق doctorkuddlesوأجرى

بينهما، والتي كان أولها النقر عليهما، واستخدام السماعات الطبية لمقارنة

الصوت الذي يصدر منهما، وبالفعل وجد أن هاتف يطلق صوتا فاترا، في

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

.هاتفه أكثر صالبة

شيئا أحمر موجودا “ووجد ” ميكروسكوب“ووضع هاتفه تحت المجهر

، وهي المنطقة التي ينحني عندها ”أسفل زر خفض مستوى الصوت

الهاتف، ما يعني أن أبل زودت الجزء المعرض لالنحناء بطبقات إضافية

.لتقويته

سخته أثقل من تلك الهاتفين، ووجد أن ن Redditكما وزن مستخدم

جراما، مشيرا إلى أن زيادة سعة ذاكرة هاتفه لن 66الخاصة بزوجته بـ

.تحدث هذا الفارق الكبير في الوزن

أندرويد جيلي بين 2/66/6162 6

.. مازال على القمة

وكيتكات يستحوذ

من % 31على

المستخدمين

م كشفت شركة جوجل األمريكية عن أحدث نسب استخدام إصدارات نظا

المختلفة، والتي جاءت مشابهة للتوقعات وغير مختلفة ” أندرويد“تشغيل

.لإلحصائيات السابقة

مازال على ” جيلي بين“وبحسب لوحة قياس نظام أندرويد، فإن إصدار

، ويليه %51.5قمة اإلصدارات األكثر استخداما ضمن أندرويد بـ

كز الثاني بنسبة والذي يشهد تعافيا كبيرا مؤخرا محتال المر” كيتكات“

%.31.6استخدام

، ويليه آيس كريم %5.1فيأتي في النركز الثالث بـ ” خبز الزنجبيل“أما

%.1.5ساندوتش بالمركز الرابع بنسبة

يذكر أن هذه النتائج اعتمدت على زيارات مستخدمي نظام أندرويد لمتجر

.جوجل بالي حتى االثنين الماضي

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



البيانات بقاعدة ASPصفحات ربط tech.aspالتي عدلناها سابقا ثم احفظها باسم index.aspقم بفتح صفحة .6

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

. إليكم آخر المستجدات على الساحة التقنية: فسنكتب جملة. ماهية الصفحة

C:\inetpub\wwwroot\appعلى المجلد tech.asp احفظ الملفبعد إجراء التعديل السابق، .3

. وانظر النتيجة من الصفحة الرئيسية "اخبار تقنية"انقر على رابط .2

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

فإنه سيظهر للك خطأ يفيد بعدم وجود الصفحة وذلك الننا لم ننشيء صفحة " أخبار منوعة"قر على رابط حاول ان تن

news.asp بعد.

.الالزمة للربط مع قاعدة البيانات ASPواآلن سوف نكتب نصوص

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

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

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

.الصفحة

:الترحيبية الجملة تحت التاليالنص واكتب<% Dim ConnectionString Dim ADO ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;" & "Data

Source=" & Server.MapPath("c:\database\project.mdb") Set ADO=Server.CreateObject("ADODB.Connection") ADO.ConnectionString =ConnectionString ADO.Open %>

:شرح النص السابق

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

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

مسار هو االسم قبل وما project.mdbالقاعدة قمت بتسمية قدل .جهازك على به قمت ما مع يتناسب بما ومسارها القاعدة

.إليها الوصول

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

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

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

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

:مباشرة ADO.openعبارة تحت التالي بكتابة

selectSQL="select * from tech_news"

set rs=ADO.execute(selectSQL)

:شرح النص السابق

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

:اختيار طلبنا هذه حالتنا في .تحديدها

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

tech_newsجدول من -

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

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

:قراءة البيانات

التالي بكتابة قم .هذه المعلومات طباعة هو اآلن به سنقوم وما .منها البيانات واستدعاء القاعدة، فتح هو اآلن حتى به قمنا ما

:مباشرة set rs=ADO.execute(selectSQL)عبارة تحت

response.write " العنوان : " & rs("subject")

response.write " التاريخ : " & rs("add_dat")

response.write " الخبر : " & rs("body")

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

" " .التنصيص عالمات

.تحت العبارة السابقة مباشرة السطر بهذا القاعدة ربط إغالق يفضل أخيرا،

ADO.close

:بشكله النهائي tech.aspملف نص <%@ Language=VBScript CodePage = "1256"%>

<html dir=rtl> 

<p align="center">

<font face="Simplified Arabic" size="3"> آخر المستجدات على

<font/> الساحة التقنية </p> <% Dim ConnectionString Dim ADO ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;" & "Data Source=" & Server.MapPath("c:\database\project.mdb") Set ADO=Server.CreateObject("ADODB.Connection") ADO.ConnectionString =ConnectionString ADO.Open selectSQL="select * from tech_news" set rs=ADO.execute(selectSQL)

response.write " العنوان : " & rs("subject")

response.write " التاريخ : " & rs("add_dat")

response.write " الخبر : " & rs("body") next %> 

.و انظر النتيجةمن خالل المتصفح http://localhost/app/tech.aspالصفحة بعرض قم



حلول لبعض المشاكل التقنية للربط مع قاعدة البيانات

ات وذلك بسبب عدم التعرف على كائن الربط قد ينتج خطأ أثناء الربط مع قاعدة البيان :مشكلة وحل

No ODBC Drivers available

32bitاعمل على تفعيل خاصية تشغيل . ولحل هذه المشكلة. 64bitنظام تشغيل إذا كنت تعمل ضمن خصوصا

.كما هو موضح في الشكلين التاليين IISالموجودة في أعدادات

. نتيجة عدم وجود صالحيات للملف project.mdbكتابة في ملف قاعدة البيانات قد يتعذر القراءة وال :مشكلة وحل

:والتي تحدد صالحيات الكتابة من خالل خصائص الملف لحل المشكلة اتبع الخطوات المبينة في الشكل التالي

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

.بشكل متتالي سنقوم بالتعديل وتحسين طريقة عرض البيانات داخل جدول: حلال<%@ Language=VBScript CodePage = "1256"%>

<html dir=rtl>  <p align="center">

<font face="Simplified Arabic" size="3"> آخر المستجدات على

قنيةالساحة الت </font>

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

selectSQL="select * from tech_news"

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> العنوان : <%response.write rs("subject")%></b></td> </tr> <tr>

<td width="100%" dir="rtl"><b> التاريخ : <%response.write rs("add_dat")%></b>

<p><b> الخبر : <%response.write rs("body")%></b></td> </tr> </table> </center> </div> <hr color="#DFDFFF" width="90%"> <% rs.movenext loop ADO.close %>



.من المتصفح http://localhost/app/tech.aspشكل الصفحة عند استدعاء الرابط انظر

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

.ة البياناتفي فصل النص داخل ملف و إدراجه في كل ملف نحتاج للربط مع قاعديكون الحلو. البياناتقاعدة

appفي مجلد connection.txtباسم داخل ملف واحفظهم tech.aspملف من التالية األسطر بقص قم ( 6<%

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

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

:كالتالي الصفحة نص وسيكون<%@ Language=VBScript CodePage = "1256"%>

<html dir=rtl>  <p align="center">

<font face="Simplified Arabic" size="3">آخر المستجدات على الساحة التقنية </font> </p>  <% selectSQL="select * from tech_news" set rs=ADO.execute(selectSQL) do while not rs.eof %> <div align="center"> <b><a href="body.asp?field=tech_news&id=<%=rs("id")%>"> <%response.write rs("subject")%></a></b> </div> <hr color="#DFDFFF" width="90%"> <% rs.movenext loop

ADO.close %>


حيث تظهر من المتصفح http://localhost/app/tech.aspشكل الصفحة عند استدعاء الرابط لن يجري تغيير علىو

:كالتالي

أخبار طويلة، أو مقاالت، عرض المطلوب كان إن أما . ليست كثيرة رطأس عن عبارة راألخبا كانت إن مقبول الشكل هذا

صفحة به تفتح (رابط)شكل على يكون العنوان وهذا فقط، العنوان عرض هو واألفضل. مناسبا الشكل هذا يكون فلن

.المثال التالي موضوع هو وهذا .الموضوع على تحتوي جديدة tech.aspالملف افتح


<html dir=rtl>



<p align="center"><font face="Simplified Arabic"> آخر إليكم

<font></p/> الساحة في المستجدات التقنية <% selectSQL="select * from tech_news"


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 %>



نصالو عنوانالو الخبر تاريخ بعرض تقوم التي األسطر وهي األعلى، األخضر والمظللة في باللون المكتوبة سطراال بحذف سنقوم

:التالي النص مكانها سنضعثم <b><a href="body.asp?field=tech_news&id=<%=rs("id")%>"> <%response.write rs("subject")%></a></b>

بإرسالها تتميز الروابط هذه .روابط شكل على العناوين هذه وستكون فقط، األخبار عناوين بعرض سيقوم النص هذا

.التالية للصفحة )قيمة(

.الرابط في كلمة كل معنى وشرح body.aspصفحة بتصميم سنقوم واآلن

التغييرات سنقوم بجميع. المطلوبة التغييرات عليها لنجري body.aspباسم حفظها بإعادة وقم teach.aspصفحة بفتح قم

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

:body.aspملف نص <%@ Language=VBScript CodePage = "1256"%> <html dir=rtl> 

 <% field=request.querystring("field")

id=request.querystring("id") selectSQL="select * from "&field&" where id="&id set rs=ADO.execute(selectSQL)

%>

<p align="center"><b><font face="Simplified Arabic" size="5"

color="#C11111"><%response.write rs("subject")%></font></b>

<p align="left"><font face="Simplified Arabic" size="3">

<%response.write rs("add_dat")%></font></p> <p><b><font face="Simplified Arabic" size="3">

<%response.write rs("body")%></font></b></p> <%ADO.close%>


:المثالنص شرح

: يعنيfield=request.querystring("field") التالي السطر

.=fieldبكتابة وذلك fieldباسم متغير تحديد -6

request.querystringبكتابة وذلك رابط طريق عن استقبالها سيتم المتغير هذا قيمة -6

("field")بكتابة وذلك fieldبكلمة الرابط في للقيمة سيشار -3

: السابق الدرس في بكتابته قمنا الذي الرابط اآلن لنتذكر

body.asp?field=tech_news&id=<%=rs("id")%>

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

:كالتالي الرابط أن لنفترض ..أكثر وللتوضيح tech_newsهي القيمة وهذه .رابط خالل

body.asp?section=tech_news&id=<%=rs("id")%>

إلى field=request.querystring("field") تغيير يجب الحالة هذه في

field=request.querystring("section")

وبالنظر .المتغير وقيمته في الفارق مع األول، السطر وظيفة نفس له id=request.querystring("id")الثاني السطر

بتغير ستتغير idير قيمة المتغ أن يتضح <%body.asp?field=tech_news&id=<%=rs("id")السابق للرابط

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

انقر على عنوان خبر لترى تقاصيل . انقر رابط أخبار تقنية من الصفحة الرئيسية للمشروع والحظ طريقة عرض األخبار

.body.aspالخبر في صفحة

لتقوم بعرض األخبار بنفس الطريقة ولكن من جدول tech.aspكما صممنا صفحة news.aspصمم صفحة :تدريب

.tech_newsليكون بنفس مواصفات جدول general_newsآخر اسمه

البحث في البيانات

search.aspصفحة تصميم

عدل ما ثم search.aspم باس بحفظها وقم tech.aspصفحة افتح .الوقت من الكثير يأخذ لن search.aspصفحة تصميم

:كما هو مبين في التالي HTMLبداخلها لتحتوي نموذج <%@ Language=VBScript CodePage = "1256"%> <html dir=rtl>  <form method="GET" action="search_result.asp"> <p align="center"> <input type="text" name="keyword" size="20"></p>

<p align="center"><input type="submit" value=" ابحث " name="B1"></p>



</form>


:من المتصفح يكون كالتالي http://localhost/app/search.aspشكل الصفحة عند استدعاء الرابط

.وتعرض النتائج من قاعدة البيانات المطلوبة، الكلمة عن ستبحث التي search_result.aspصفحة واآلن سنصمم

. search_result.aspباسم بحفظها وقم search.aspصفحة افتح

الصفحة قيمته من أخذ متغيرا يجب هنالك أن البرنامج إعالم هو التغييرات هذه أولى .المطلوبة بالتغييرات لنقم ..واآلن

المثال في فعلنا وكما. البحث عنها المطلوب الكلمة على يحتوي والذي keywordاسمه المتغير هذا serach.aspالسابقة

: األسطر هذه قم بمسح لذا .المهمة بهذه للقيام Request.QueryStringسنستخدم السابق،

<form method="GET" action="search_result.asp">

<p align="center">

<input type="text" name="keyword" size="20"></p>

<p align="center"><input type="submit" value=" ابحث "

name="B1"></p>

</form>

:منها بدال واكتب

<%

keyword=request.querystring("keyword")

%>

Selectمر أ باستخدام البحث صفحة من استقبالها بعد الجدول في الكلمة عن بالبحث سنقوم واآلن

<%@ Language=VBScript CodePage = "1256"%> <html dir=rtl>   <% keyword=request.querystring("keyword")

SelectTechSQL="select * from tech_news where subject like '%"&keyword&"%' " set rs=ADO.execute(SelectTechSQL)

%>

<p align="center">

<font face="Simplified Arabic" size="3">نتائج البحث عن <%=keyword%> </font> </p> <% do while not rs.eof %> <div align="center"> <b><a href="body.asp?field=tech_news&id=<%=rs("id")%>"> <%response.write rs("subject")%></a></b> </div> <hr color="#DFDFFF" width="90%"> <% rs.movenext loop

ADO.close %> 

أو يةكل مساواة تعبر عن أن ويمكن. ( = )عالمة عن والتي تغني Likeكلمة أضفنا أننا هنا Selectأمر في المالحظ

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

الخالد، خالدا، خالد، :على تحتوي التي لنا النتائج فستظهر الجزئية المساواة استخدما إن أما ."خالد" كلمة على تحتوي

الخ .. خالدون الخالدون،

نكتب الكلية المساواة عن للتعبيرLike هو مثالنا في .. المتغير اسم وبعدهاKeyword التالية فنكتبه بالصيغة :

"&keyword&"

نكتب الجزئية المساواة عن للتعبيرLike هو في مثالنا .. المؤوية النسبة عالمات بين المتغير اسم وبعدها

Keyword التالية بالصيغة فنكتبه :'%"&keyword&"%'

Subjectفي العمود القيمة تكون عندما Techجدول من شي أي اختر :هو المثال هذا في Selectعبارة في والمقصود

Keywordالمتغير في للقيمة مشابهة أو مساوية

:الجملة التاليةSelectTechSQL="select * from tech_news where subject like '%"&keyword&"%' or body like '%"&keyword&"%' "

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



أو اي كلمة موجودة في عناوين األخبار " مشكلة" قم بالنقر على رابط بحث من الصفحة الرئيسية ثم ابحث عن الكلمة

.التقنية

بحث اثم .المحتوى وأ العنوانفي كل من عن الكلمة لى الملف السابق ليقوم بالبحثاعمل التعديل المناسب ع: تدريب

"شركة جوجل األمريكية "عن

إضافة بيانات

ومن sign_book.aspزائر إضافة وصفحة guest.aspالزوار عرض صفحتين، صفحة من الزوار سجل سنصمم

وسنصمم الزوار سجل في تواقيع أن هنالك سنفترض أننا الإ. إلضافة زائر sign_book.aspبصفحة نبدأ أن الطبيعي

.الباقية الصفحات نصمم ثم العرض، صفحة

جدول باسم وصمم البيانات، قاعدة افتح .الزوار على سيحتوي التي البيانات قاعدة في الجدول لنصمم واآلن،

guest_book شكله هو وهذا:

.الخانات هذه في بيانات بإدخال ثم قم

الختيار Selectواستخدام األمر البيانات، بقاعدة guest.aspالصفحة لربط سابقا، تعلمناها التي المهارات سنستخدم اآلن،

لتزيين HTMLوأوامر .في الشاشة المعلومات (عرض)لطباعة Response.Writeواألمر القاعدة، من المعلومات

.العرض طريقة

: guest.aspإليك نص صفحة <%@ Language=VBScript CodePage = "1256"%> <html dir=rtl>


<p align="center"><font face="Simplified Arabic">

ومالحظاتكم تسعدنا.. مرحبا بكم في سجل الزوار </font></p>

 <%

selectSQL="select * from guest_book order by add_dat desc"

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> التاريخ : <%response.write rs("add_dat")%></b></td> </tr>

<tr>

<td width="100%" dir="rtl" bgcolor="#ECECFF"><b> االسم : <a href="mailto:<%response.write rs("email")%>"> <%response.write rs("name")%></a></b></td> </tr>

<tr>

<td width="100%" dir="rtl" bgcolor="#DFDFFF"><b> الموقع الشخصي : <a href="<%response.write rs("website")%>"> <%response.write rs("website")%></a></b></td>

</tr> <tr>

<td width="100%" dir="rtl" bgcolor="#ECECFF"><b> طريقة

<response.write rs("link")%></b></td%> : االستدالل على الموقع</tr> <tr>

<td width="100%" dir="rtl" bgcolor="#DFDFFF"><b>

:تقييم الموقع<%response.write rs("ranking")%></b></td> </tr> <tr>

<td width="100%" dir="rtl"><b> التعليق : <%response.write rs("comment")%></b></td> </tr> </table>

</center> </div> <hr color="#DFDFFF" width="90%">

<% rs.movenext loop

ADO.close %>


:شكل التنفيذ

ماذا يحدث عند النقر على رابط اسم الزائر في الصفحة السابقة؟: سؤال

في الصفحة السابقة؟ماذا يحدث عند النقر على رابط الموقع الشخصي : سؤال

sign_book.aspصفحة الزوار سجل في إضافة صفحة تصميم

احفظ النص التالي في ملف . HTMLفستكون كاملة بلغة ASPأي نص بلغة بها يكون لن sign_book.aspصفحة

.sign_book.aspباسم <%@ Language=VBScript CodePage = "1256"%>

<html dir=rtl> 

<p align="center"><font face="Simplified Arabic"> مرحبا بكم في

ومالحظاتكم تسعدنا.. سجل الزوار </font></p>

<form method="POST" action="add_to_book.asp">

<b> الحقول التي أمامها عالمة (<font color="#C11111">*</font>) مطلوبة .</b><p>



<b> االسم : <font color="#C11111">*</font> <input type="text" name="name" size="20"></b></p>

<p><b> البريد االلكتروني : <input type="text" name="email" size="20"></b></p>

<p><b> الموقع الشخصي (URL): <input type="text" name="website" size="20"></b></p>

<p><b> الموقع طريقة االستدالل على : <select size="1" name="link">

<option> محرك بحث </option>

<option> رابط من موقع آخر </option>

<option> وسائل اإلعالم </option>

<option> صديق </option>

<option> أخرى </option> </select></b></p>

<p><b> تقييم الموقع : <input type="radio" value=" ممتاز " checked name="ranking">

"nbsp; <input type="radio" name="ranking& ممتاز

value="جيد">

"nbsp; <input type="radio" name="ranking& جيد

value=" ضعيف">

<b></p/> ضعيف

<p><b> التعليق : <font color="#C11111">*</font></b></p> <p><textarea rows="5" name="comment" cols="25"></textarea></p>

<p><input type="submit" value=" إضافة التوقيع " name="B1"></p> </form>


اآلن البيانات، سنقوم إلدخال المطلوبة حقولال على تحتوي والتي sign_book.aspصفحة تصميم من انتهينا أن بعد

ولن ASPعن نص لغة ستكون عبارة الصفحة هذه .للقاعدة البيانات إلضافة add_to_book.aspباسم صفحة بتصميم

الصفحة هذه ستعمل أي .للزائر عدم ظهورها هو الصفحة هذه في ستالحظه وما HTMLعبارات خاصة بلغة أي نستخدم

في نفسه وسيرى الصفحة، هذه يالحظ لن الزائر لكن" أضف التوقيع "زر على والضغط بياناته بكتابة ئرالزا يقوم عندما

.في األعلى توقيعه وسترى (التواقيع عرض)صفحة

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



<%

add_dat = now()

name = request.form ("name")

email = request.form ("email")

website = request.form ("website")

link = request.form ("link")

ranking = request.form ("ranking")

comment = request.form ("comment")

If name="" or comment="" then

response.write "<center>" & " من فضلك اضغط زر عودة في متصفحك

".وقم بإدخال جميع الحقول المطلوبة

Else



addSQL= " insert into guest_book

(add_dat,name,email,website,link,ranking,comment) values

('"&add_dat&"','"&name&"','"&email&"','"&website&"','"&link&"'

,'"&ranking&"','"&comment&"')"

ADO.execute(addSQL)

response.redirect "guest.asp"

End if

ADO.close

Set ADO=Nothing

%>

للتعبير Request.QueryStringالعبارة نستخدامفإننا GET معرفة بالقيمة البيانات نقل طريقة كانت إن أنه هل تعلم

؟Request.Formفسنستخدم POSTكانت إن أما ،عن المدخالت

) األخرى متغيرات للست ولننظر .اآلن جانبا األول المتغير اترك .متغيرات ٧ لدينا .لدينا التي المتغيرات لنشرح واآلن

name, email, website, link, ranking and comment) الكتابة طريقة نفس في ستةال المتغيرات هذه تشترك.

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

هذه بين كتابتها فتم الصفحة السابقة في الحقول أسماء أما Request.Formبالعبارة وذلك السابقة الصفحة في حقول

.(" ")العالمات

:تعطي اللغة في قيمة ثانية هي القيمة وهذه ()nowب المتغير قيمة تحديد تم add_datوهو األول للمتغير لنرجع ن،واآل

. الحاليتين والتاريخ الوقت

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

ارةإد الدخول لصفحة أجل من صحتهما من والتأكد السري والرقم المستخدم اسم إلدخال صفحات بتصميم سويا سنقوم

..وممتعة سهلة المهمة أن كيف ىوستر .األخبار

.adminsection ،validentry.asp ،admin.asp: كالتالي وهم ملفات ثالث بإنشاء سنقوم النتيجة هذه إلى للوصول

اسم المستخدم إلدخال (Form)نموذج على يحتوي :(admin.asp)السري والرقم المستخدم اسم إدخال نموذج( 1

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

.خاطئة معلومات

والرقم السري، المستخدم اسم إدخال صحة من بالتحقق ستقوم :(validentry.asp)المعلومات من التحقق صفحة( 2

.الموقع في تسجيلهما ومن

إدخال الموقع، بعد إدارة بمهام للقيام إليها بالدخول سيسمح التي الصفحة هي: (adminsection)اإلدارية الصفحة( 3

. صحيح بشكل سري والرقم المستخدم اسم

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

.Textنوع من Pass والحقل Name ، الحقل Autonumber نوع من idالحقل : هي حقول ثالث

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

..حدا

:admin.aspالسري والرقم المستخدم اسم إدخال نموذج



:جزأين إلى الملف هذا ينقسم

:كالتالي السري والرقم المستخدم اسم إلدخال (Form)نموذج على يحتوي :األول الجزء<form method="POST" action="validentry.asp" name="Login">

<p> أدخل اسم المستخدم والرقم السري للدخول لصفحة اإلدارة </p>

<p> اسم المستخدم : <input type="text" name="Name" size="20"> </p>

<p> الرقم السري : <input type="password" name="Password" size="20"> </p>

<p> <input type="submit" value=" دخول " name="submit"> </p> </form>

خاطئة، معلوماتإدخال عند أو السري، الرقم أو المستخدم اسم إدخال عدم عند خطأ رسالة بعرض يقوم: الثاني الجزء

. </form>السابق مباشرة أي بعد Formلنص البرمجي بعد انموذج كتابة ا ويجب

وسوف في النموذج، المعلومات إدخال في خطأ وجود عند validentry.aspملف من قيمة الجزء هذا يستقبل سوف

.القيمة validentry.aspالملف سيرسل كيف الحقا سنرى errorفي يضعها

<%

error=Request.querystring("error")

If error <> "" then

If error = "Name_Null" Then

Response.write "<b><font color='#FF0000 لم تدخل اسم '<

/>المستخدم font></b >"

Else

If error = "Pass_Null" Then

Response.write "<b><font color='#FF0000 لم تدخل الرقم السري '<

</ font></b >"

Else

If error = "Name_Entry" Then

Response.write "<b><font color='#FF0000 لقد أدخل اسم '<

/>مستخدم خطأ font></b >"

Else

If error = "Pass_Entry" Then

Response.write "<b><font color='#FF0000 لقد أدخلت رقم '<

/>سري خطأ font></b >"

End If

End If

End If

End If

End If

%>

المعلومات من التحقق صفحة

المستخدم والرقم اسم إدخال صحة من ستتحقق المشروح سابقا، ثم Admin.aspنموذج في المدخلة القيم باستقبال ستقوم

الصفحة هذه ترسل سوف النموذج، في صحيحة المدخلة المعلومات تكن لم إن .الموقع في تسجيلهما ومن السري،

validentry.asp متغيرا يسمىerror ملف إلىadmin.asp النموذج ليقوم المعلومات إدخال في الخطأ نوع عن ليخبره

فقط ستقوم للمستخدم، شيء أي بعرض تقوم لن validentry.aspالصفحة هذه إذا. للمستخدم المناسبة الخطأ بعرض رسالة

admin.aspللصفحة errorسيرسل صحيحة، غير كانت فإن المعلومات، صحة إدخال قاعدة البيانات حول من بالتحقق

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

.التالي الجزء في سنتحدث عنه

:كالتالي المعلومات في ملف إدخال من التحققالمسؤول عن validentry.aspملف سنكتب نص اآلن <% Name=Request.form("Name") Password=Request.form("Password") If Name = "" Then

response.redirect ("admin.asp?error=Name_Null") Else

If Password = "" Then response.redirect ("admin.asp?error=Pass_Null") Else

%>  <%

SelectSql = "Select * from admin where name = '"& Name &"'" set rs=ADO.execute (SelectSql)

If rs.EOF Then response.Redirect ("admin.asp?error=Name_Entry") Else

If rs("pass") <> password Then response.redirect ("admin.asp?error=Pass_Entry") Else

Name_Cooky= request.cookies("Name") If Name_Cooky <> Name Then response.cookies ("Name") = Name

End IF response.Redirect ("adminsection.asp")

End If

End If End If End If

%>

adminsection.aspاإلدارة صفحة

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

:النص البرمجي هو وهذا. المثال السابق في أنشأناه الذي Cookyسنختبر لذلك .صحيح بشكل السري والرقم االسم

<% Name_Cooky=Request.cookies("Name") If Name_Cooky="" Then response.redirect ("admin.asp") End If

%>

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

االسم إدخال من التحقق كيفية، انهينا دروس قد نكون بذلك. المعلومات تلك لطلب admin.aspصفحة إلى ستنقله الصفحة

.المثال هذا على استخدامه وكيفية Cookyهو ما وتعلمنا .اإلدارة موقع على الدخول عند سريال والرقم

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

أخبار إضافة: o عامة أخبار o تقنية أخبار.

األخبار مسح / تعديل: o عامة أخبار. o تقنية أخبار.

:adminsection.aspالكامل لصفحة مجيوهذا هو النص البر


<% Name_Cooky=Request.cookies("Name") If Name_Cooky="" Then response.redirect ("admin.asp") End If %> <html dir=rtl>  <p align="center"><b>

<font face="Simplified Arabic"> الصفحة اإلدارية</font></b></p> <p align="justify"><b>

<font face="Simplified Arabic"> إضافة أخبار :</font></b></p> <ul> <li> <p align="justify"><b>

<font face="Simplified Arabic">أخبار عامة .</font></b></p> </li> <li> <p align="justify"><b>

<font face="Simplified Arabic">أخبار تقنية .</font></b></p> </li> </ul> <p align="justify"><b>

<font face="Simplified Arabic"> مسح األخبار/ تعديل :</font></b></p>

<ul> <li> <p align="justify"><b>

<font face="Simplified Arabic"> خبار عامةأ .</font></b></p> </li> <li> <p align="justify"><b>

<font face="Simplified Arabic"> أخبار تقنية .</font></b></p> </li> </ul>

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

الصفحة هذه لتصميم الزوار سجل في توقيع إضافة صفحة إنشاء عند هاتعلمت التي المبادئ نفس استخدمم

(add_news.asp) .ليكون الشكل العام للصفحة كما في الشكل التالي:

:اإلجابة

add_news.aspملف

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

<html dir=rtl>




<%

section=request.form("section")

subject=request.form("subject")

body=request.form("body")

%>

<%

Function AddF()

addSQL= " insert into "&section&" (subject,body) values

('"&subject&"','"&body&"')"

ADO.execute(addSQL)



%><p><font face="Simplified Arabic" size=" لقد تم .. الخبر شكرا لك

3" >إضافة

%><font></p/> بنجاح

End Function

%>

<body>

<%

If subject="" or body="" then

response.write " فضلك اضغط زر من .. لم تقم بإدخال جميع الحقول المطلوبة

"عودة في متصفحتك وقم بإدخال جميع الحقول

Else

AddF()

End If

%>

<p align="center"><b> األخبار إضافة </b></p>

<form method="POST" action="add_news.asp">

<p><b> القسم : <select size="1" name="section">

<option value="general_news"> أخبار منوعة </option>

<option value="tech_news"> أخبار تقنية </option>

</select></b></p>

<p><b> العنوان : <input type="text" name="subject"

size="20"></b></p>

<p><b> المحتوى :</b></p>

<p><b> <textarea rows="11" name="body"

cols="78"></textarea></b></p>

<p><input type="submit" value=" إضافة " name="add"></p>

</form>

<%

ADO.close

Set ADO=Nothing

%>


أحدهما خياران كل عنوان وأمام األخبار بعناوين قائمة على تحتوي news_list.aspباسم صفحة المثال هذا في سنصمم

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

.وجدت إن - السابقة األمثلة في لها التطرق يسبق

تحديث البيانات

:news_upd.aspنص ملف تحديث االخبار

<%@Language=VBScript CodePage = "1256"%> <% Name_Cooky=Request.cookies("Name") If Name_Cooky="" Then response.redirect ("admin.asp") End If %> <html dir=rtl>


<% function updatef() updateSQL= " update general_news set subject='"& subject &"',

body='"&body&"' where id="&id ADO.execute(updateSQL) %> <p> <font face"=Simplified Arabic "size 3">

تم تحديث الموضوع بنجاح</font> </p> <% end function id=request.querystring("id") subject=request.form("subject") body=request.form("body") selectSQL="select * from general_news where id="&id set rs=ADO.execute(selectSQL) %> <p align"=center><b><font face="Simplified Arabic" color="#C11111" size="7">

تحرير</font/><b/> <p> <% if subject="" then

response.write "اضغط زر تحديث لتثبيت التغييرات" else updatef() end if %> <form method="POST" action="news_upd.asp?id=<%=id%>">

<p><font face="Simplified Arabic" size="3">العنوان <textarea rows="1" name="subject" cols="53"> <%response.write rs("subject")%> </textarea> </font></p>

<p><font face="Simplified Arabic" size="3">المحتوى </font></p> <p><font face="Simplified Arabic" size="3"> <textarea rows="12" name="body" cols="58"> <%response.write rs("body")%> </textarea></font></p> <p><font face="Simplified Arabic" size="3"><input

type="submit" value ="تحديث" name="start"></font></p> </form> <% ADO.Close Set ADO=Nothing %>

:نص المثالما هو جديد في شرح

:وطريقة استخدامها هو كالتالي updateالصفحة هو استخدام جملة االستعالم ههذنص الجديد في

تحديد الجدول المراد تحديث بياناته -6

تحديد الحقل المراد تحديثه -6

(امام اسم الحقل= بعد عالمة )حديد القيمة الجديدة ت -3

بعد كل حقل وقيمته لكتابة اسم حقل جديد( ,)وضع فاصلة -2

.وذلك لتمييز البيانات عن غيرهافي الجدول idتحديد رقم -5

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

:لكل خبر، ويكون نص الرابط كالتالي news_upd.aspيؤدي إلى صفحة

<a href="news_upd.asp?id=<%=rs("id")%>">تحرير</a>

:وتعديل شكل عرض االخبار داخل جدول بعد إضافة رابط التعديل news.aspاليك عزيزي الطالب نص صفحة

<%@ Language=VBScript CodePage = "1256"%> <html dir=rtl> 

<p align="center">

<font face="Simplified Arabic" size="5">أخبار منوعة </font> </p>  <% selectSQL="select * from general_news" set rs=ADO.execute(selectSQL) do while not rs.eof %> <div align="center"><b> <a href="body.asp?field=general_news&id=<%=rs("id")%>"> <%response.write rs("subject")%></a></b>

<a href="news_upd.asp?id=<%=rs("id")%>">تحر ر</a> </div> <hr color="#DFDFFF" width="90%"> <% rs.movenext loop ADO.close %>

:كما في النص التالي - عرض قائمة االخبار داخل جدول ن بقوم بتحسينما رايك بأ


<html dir=rtl>



<p align="center">

<font face="Simplified Arabic" size="5">أخبار منوعة </font>

</p>


<div align="center">

<table border="1" width="80%">

<tr>

<th>العنوان</th>

<th>التاريخ</th>

<th>روابط</th>

</tr>

<%

selectSQL="select * from general_news"


do while not rs.eof

%>

<tr>

<td><b><%response.write rs("subject")%></b></td>

<td><%response.write rs("add_dat")%></td>

<td>

<a href="body.asp?field=general_news&id=<%=rs("id")%>">استعراض

</a> |

<a href="news_upd.asp?id=<%=rs("id")%>">تحرير

</a> |

<a href="news_del.asp?id=<%=rs("id")%>">حذف

</a>

</td>

</tr>

<%

rs.movenext

loop

ADO.close

%>

</table>

</div>

<hr color="#DFDFFF" width="90%">


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



:وبعد النقر على رابط تحرير ستظهر الصفحة التالية

ثم اعمل على تغيير tech_upd.aspباستخدام محرر النصوص واحفظه باسم news_upd.aspقم بفتح الملف : تدريب

general_news إلىTech_news في كل من جملselect وupdate وتغيير اسم الصفحةnews_upd.asp إلى

tech_upd.asp في النص التالي

<form method="POST" action="news_upd.asp?id=<%=id%>">

.الجديد tech_upd.asp لتحتوي رابطا للمف tech..aspثم عدل على طريقة عرض أخبار تقنية في ملف

حذف البيانات

حيث انه tech_del.aspالتقنية واألخبار news_del.aspالعامة األخبار مسح صفحات بتصميم سنقوم الدرس هذا في

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

أنه يمكنك عمل ملف واحد لغرض حذف سجالت من الجدولين؟ الحل في أن تمرر قيمة اسم الجدول كما مررنا هل تعلم

؟idيمة ق

في لها التطرق يسبق لم التي األوامر الجديدة بشرح ثم سأقوم news_del.aspسأقوم بعرض نص الصفحة واآلن

:السابقة الدروس

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

<%

Name_Cooky=Request.cookies("Name")

If Name_Cooky="" Then

response.redirect ("admin.asp")

End If

%>



<%

id=request.querystring("id")

deleteSQL ="delete * from general_news where id="&id

ADO.execute(deleteSQL)

response.redirect "news.asp"

ADO.Close

Set ADO=Nothing

%>

:شرح ما هو جديد في الملف

للسجل idويكون استخدامه من خالل تحديد اسم الجدول المراد الحذف منه ثم تحديد قيمة deleteد هنا هو االستعالم الجدي

.news.aspهذه يتم ارسالها من الرابط الموجود في صفحة idوقيمة . المراد حذفه

م تغيير اسم على أن يت tech_del.aspباسم هواحفظباستخدام محرر نصوص news_del.aspملف افتح ال: تدريب

.deleteفي جملة tech_newsإلى general_newsالجدول من



XML لغةأمثلة تطبيقية على : القسم الثالث

. Document Type Definition (DTD)تعريف نوع الوثيقة

حيث يتم إصدار رسالة خطأ في ( Validity)بشكل أساسي إلى مساعدتك على كتابة النصوص الصحيحة DTDيهدف

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

:على ما يلي

.DTDتصريح اسم الملف الذي يحتوي على تعريف نوع الوثيقة -

.DTDيجب أن تتوافق بنية الوثيقة مع البنية المعرفة في ملف التعريف -

.تم شرحه في كتاب المقررمثال تطبيق :مثال

:cv.xmlاحفظ الملف باسم (. 6

<?xml version="1.0" encoding="windows-1256"?>

<CV>

<Education>

<University>جامعة القدس المفتوحة</University>

<Major>تكنولوجيا المعلومات واالتصاالت </Major>

<Course_name ID="1266"> تقنية تصميم صفحات الويب</Course_name>

</Education>

</CV>

ليحتوي على تعريف عناصر وثيقة السيرة الذاتية في المثال السابق على النحو cv.xmlاعمل على تعديل الملف ( 6

:التالي


<!DOCTYPE CV

[

<! ELEMENT CV (Education, University, Major, Course_name)>

<! ELEMENT Education (University, Major, Course_name+)>

<! ELEMENT University(#PCDATA | UoQ)>

<! ELEMENT Major (#PCDATA | EMPTY) >

<! ELEMENT IMG EMPTY >

<! ELEMENT Course_name (#PCDATA)>

<!ATTLIST Course_name ID (#PCDATA) >

]

>

<CV>

<Education>

<University>جامعة القدس المفتوحة</University>

<Major>تكنولوجيا المعلومات واالتصاالت </Major>

<Course_name ID="1266"> تقنية تصميم صفحات الويب</Course_name>

</Education>

</CV>



في خطأجود المتصفح رسالة تفيد بوالسابق باستخدام المتصفح يظهر XMLعند استعراض ملف : مشكلة وحل

كما يوجد أخطاء . ELEMENTوذلك بسبب وجود فراغ قبل كلمة ،في الشكل التالي كما التعرف على بيانات الملف

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

:ب تصح ح ألخط ء cv.xmlملف

<?xml version="1.0" encoding="windows-1256"?> <!DOCTYPE CV [ <!ELEMENT CV (Education, University, Major, Course_name)> <!ELEMENT Education (University, Major, Course_name+)> <!ELEMENT University (#PCDATA)> <!ELEMENT Major (#PCDATA) > <!ELEMENT IMG EMPTY > <!ELEMENT Course_name (#PCDATA)> <!ATTLIST Course_name ID CDATA #REQUIRED> ]> <CV> <Education> <University> المفتوحة القدس جامعة </University> <Major> واالتصاالت المعلومات تكنولوجيا </Major> <Course_name ID="1266"> الويب صفحات تصميم تقنية </Course_name> </Education> </CV>

:بعد التعديل هو cv.xmlناتج استعراض الملف



.XSLباستخدام XMLاستعراض مستندات

عند كتابة الحظ أنه . سنقوم في هذا القسم بتطبيق المثال الذي تم شرحه في كتاب المقرر وحل المشاكل التي قد تواجهك أثناء التنفيذ

.تخدام المتصفح فإنه قد يبدو لك بالشكل التاليباس XMLكما وردا ثم حاول فتح ملف XSLو XMLنص ملف

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

:تعديل األخطاء التاليةيكون من خالل والحل. ويظهر بشكل مشابه للصورة السابقة xslاألنماط الموجودة في ملف

.windows-1256إلى ISO-8859-1من XSLوملف XMLجب تغيير نوع ترميز اللغة في كل من ملف ي( 6

<?xml version=”1.0” encoding=”ISO-8859-1” ?>

حذف الجملة ( 6

xmlns="http://www.w3.org/TR/xhtml1/strict"

(.<)مع مراعاة عدم حذف قوس نهاية الوسم . food.xslمن السطر الثاني في الملف

.مع مراعاة تعديل األخطاء المشار إليها: إليك خطوات تنفيذ المثال

.breakfast_menu.xmlاكتب النص التالي في ملف واحفظه باسم ( 6

.وذلك من أجل عرض النصوص العربية "encoding="windows-1256الحظ أن ترميز اللغة يجب أن يكون



<?xml version="1.0" encoding="windows-1256"?> <?xml-stylesheet type="text/xsl" href="food.xsl"?> <breakfast_menu> <food> <name> محمصة كعكة </name> <price>$5.95</price> <description> الشراب مع محمصة كعكة </description> <calories>650</calories> </food> <food> <name> الفراولة بفاكهة كعكة </name> <price>$7.95</price> <description> والكريم الفراولة بفاكهة مغطاة كعكة </description> <calories>900</calories> </food> <food> <name> التوت كعكة </name> <price>$8.95</price> <description> مشكل مع التوت كعكة </description> <calories>900</calories> </food> <food> <name> المحمص الفرنسي خبزال </name> <price>$4.50</price> <description> الجبن شرائح مع المحمص الفرنسي الخبز </description> <calories>600</calories> </food> </breakfast_menu>

.breakfast_menu.xmlفي نفس المجلد الذي يحتوي الملف food.xslاكتب النص التالي في ملف وأحفظه باسم ( 6

:مع مراعاة التأكد من عمل ما يلي

.وذلك من أجل عرض النصوص العربية "encoding="windows-1256سطر ترميز اللغة يجب أن يكون -

.، بمعنى أن تقوم بحذف السطر الرابع في النص التالي(المظلل)إزالة النص المشار إليه -


<html xsl:version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns="http://www.w3.org/TR/xhtml1/strict"> <body style="font-family:Arial, elvetica,sans-serif;font-

size:12pt;background-color:#EEEEEE">

<xsl:for-each select="breakfast_menu/food">

<div style="background-color:teal;color:white;padding:4px">

<span style="font-weight:bold;color:white">

<xsl:value-of select="name" />



</span>

<xsl:value-of select="price" />

</div>

<div style="margin-left:20px;margin-bottom:1em;font-

size:10pt">

<xsl:value-of select="description" />

<span style="font-style:italic">

(<xsl:value-of select="calories" /> سعر حراري)</span>

</div>

</xsl:for-each>

</body>

</html>

:يباستخدام المتصفح ليظهر لك نتيجة مشابهة للشكل التال breakfast_menu.xmlاستعراض ملف ( 3

ASPصفحات من خالل XMLإنشاء ملف

( مثال creatXMLusingASP.aspاحفظه باسم )اكتب النص التالي في ملف و احفظه في مجلد ما ( 2

<%

response.ContentType="text/xml"

response.Write("<?xml version='1.0' encoding='UTF-8'?>")

response.Write("<note>")

response.Write("<from>Jani</from>")

response.Write("<to>Tove</to>")

response.Write("<message>Remember me this weekend</message>")

response.Write("</note>")

%>



ضمن رابط ثم افتحه :app\wwwwroot\inetpub\cانسخ الملف من المجلد إلى ( 6

http://localhost/app/creatXMLusingASP.asp باستخدام المتصفح.

:كما في الشكل التالي XMLولكن المحتوى بيانات ASPملف من نوع ناتج تنفيذ الملف السابق هوالحظ أن

ASPباستخدام على خادم الويب XMLملف انشاء

وذلك من خالل جملة الكتابة XMLعلى خادم الويب دون الحاجة إلى كتابة ملف XMLيمكن إنشاء ملف

Response.write الخاصة ببيئةASP كما في المثال التالي:

في مجلد ما ثم انسخ الملف داخل مجلد Save_as_XML.aspانسخ النص التالي في ملف باسم ( 6

c:\inetpub\wwwroot\app.

<% text="<note>" text=text & "<to>Tove</to>" text=text & "<from>Jani</from>" text=text & "<heading>Reminder</heading>" text=text & "<body>Don't forget me this weekend!</body>" text=text & "</note>" set xmlDoc=Server.CreateObject("Microsoft.XMLDOM") xmlDoc.async=false xmlDoc.loadXML(text) xmlDoc.Save("c:\temp\test.xml") %>

.http://localhost/app/Save_as_XML.aspلمذكور افح رابط الموقع على الملف ا( 1

:كما في الشكل التالي XML، سيظهر لك محتوى ملف c:\tempمن المجلد test.xmlافتح ملف (2

:بياناتمن قواعد ال XML ملفمحتويات استرجاع

.readDBintoXML.aspاكتب النص التالي فس ملف و احفظه في مجلد ما باسم ( 2

<%@Language=VBScript CodePage = "1256"%>  <% response.ContentType = "text/xml" selectSQL="select * from guest_book order by add_dat desc" set rs=ADO.execute(selectSQL) rs.MoveFirst() response.Write("<?xml version='1.0' encoding='windows-1256'?>") response.write("<guestbook>") while (not rs.EOF) response.write("<guest>") response.write("<date>"&rs("add_dat")&"</date>") response.write("<name>"&rs("name")&"</name>") response.write("<email>" & rs("email") & "</email>") response.write("<url>" & rs("website") & "</url>") response.write("<eval>" & rs("ranking") & "</eval>") response.write("<comment>" & rs("comment") & "</comment>") response.write("</guest >") rs.MoveNext() wend rs.close() ADO.close() response.write("</guestbook>") %>

ثم افتح رابط الصفحة من c:\inetpub\wwwroot\appمن مجلد العمل إلى مجلد readDBintoXML.aspقم بنسخ ملف (6

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



رغم XMLقد ال تظهر الصفحة كما في الشكل السابق وذلك نتيجة وجود أخطاء في تركيبة ملف : مشكلة وحل

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

: إذا كانت البيانات المسترجعة من قواعد البيانات تحتوي نصا باللغة العربية، وجب إعالن ذلك في جملة -response.Write("<?xml version='1.0' encoding='windows-1256'?>")

.Writeالناتج عن جملة XMLملف سطورفراغات بين تأكد من عدم وجودال -

تم بحمد هللا

: الدليل، يرجى المراسلة على العنوان حول محتوى هذافي حال وجود اقتراحات أو أخطاء أو مالحظات

[email protected] أو[email protected].



:المراجع

www.w3schools.com

http://notepad-plus-plus.org/

http://webdevetut.blogspot.com/

لمقرر تقنية تصميم صفحات الويب 1266 · 2019. 5. 26. · لاثم( ام...

Documents