الدرس الثالث والسبعون : مقدمة إلى تطوير المواقع - دورة .net 2008

[khaledbelal]

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

الآن نبدا في مجموعة من الدروس عن موضوعنا الاخير لهذه السلسلة ، وهو الموضوع الخاص بتطوير مواقع الإنترنت باستخدام ASP.net .
فيما مضى من الدروس ، كنا نتحدث في عالم ال Console وال Desktop Applications ، وخلال هذه المراحل كنا نعتمد على وجود جهاز واحد للتنفيذ ، وحتى في حالة وجود شبكة فقد كان الوضع يعتمد على عمليات ارسال واستقبال بيانات بين الجهازين او المشاركة في المصادر او الاتصال ب web service كما رأينا ، اما مع عالم ال ASP.net او عالم ال server side ********s عموماً فالوضع مختلف نسبياً ، ولذا قبل البداية نحب ان نتعرف على انواع مواقع الإنترنت :

- مواقع ثابتة : هذه المواقع عبارة عن مجموعة من التوصيفات باستخدام HTML ، يمكن استخدام صور وفلاشات وخلافه ولكن لا يوجد اي نوع من انواع المعالجة في هذا الموقع .
- موقع ديناميكية عند العميل : هذا النوع من المواقع يتمتع ببعض انواع المعالجة ولكنها تظل في جانب العميل فقط ، يتم في هذه المواقع استخدام ******s مثل **** و VB****** ، لكن الصفحة التي تراها امامك تعمل عندك انت فقط .
- مواقع دينامكية : هذا النوع يتم عمل معالجة لبياناته في السيرفر وتحصل انت فقط على الناتج الذي يمكن ان يكون من النوع الأول والثاني ، في هذه الحالة يسمى تطبيق انترنت وليس موقع انترنت .

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

دورة حياة تطبيق الإنترنت :

بمجرد ادخالك لعنوان موقع ما يبتدأ ب http:// - وهو ما يعني انك ستستخدم بروتوكول http - يقوم البروتوكول بارسال هذا العنوان إلى ما يعرف ب Domain Name Server واختصاراً باسم DNS ، يقوم هذا ال DNS بتحويل الكتابة التي قمت بكتابتها لعنوان Physical على الإنترنت خاص بال IP صاحب الموقع ، شكل ال DNS يكون بالشكل التالي كمثال :

http://vb4arab.com/vb/uploaded/3/01219662640.jpg

الآن اصبح بالامكان معرفة IP المميز لهذا الموقع ، الآن يتم فتح port - غالباً ما يكون 80 - ويتم ارسال طلب المعالجة إلى هذا الموقع وهو ما نطلق عليه http Request .
في حالة كون الموقع static ، يتم الرد بالصفحة المطلوبة فقط ، اما في حالة كون الصفحة dynamic يتم معالجة البيانات المطلوبة وارسال صفحة النتائج إلى المستخدم وهو ما نطلق عليه http Response .

- لكل بروتوكل دورة عمل ، وما يهمنا هنا هو http فقط .

مواقع العميل Client Side Web Sites :

يستلزم هذا النوع بداية معرفة ب HTML ، وهي لغة سهلة جداً يمكنك التعرف عليها خلال اقل من نصف ساعة عن طريق هذا الرابط مثلاً :
www.html4arab.com

ومع ظهور برامج ابتداء ب Front Page وانتهاء ب Dream Waver ، اصبح بامكانك عمل الموقع دون اي معرفة بال HTML عن طريق الادوات فقط .
ايضاً تحتاج ل **** او vb****** لبرمجة بعض الخصائص ، ايضاً ضمن ال HTML تجد عالم ال Forms الذي سيمكنك من التواصل مع العالم الخارجي ، وتحتاج لبعض المعرفة في هذا الموضوع ، يمكنك مراجعة الدرس التالي كبداية لل vb****** :
http://www.vb4arab.com/vb/showthread.php?t=4
والدرس التالي كبداية لل ********** :
http://www.epal.ps/vb/showthread.php?t=276

والآن اتوقع انك ملم بالاساسيات فقط ، لا اطلب منك الكثير في هذا المجال حالياً ...

الفرق بين تطبيق الويب Web Application وخدمة الويب Web Service :

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


ال IIS :
هو السيرفر الخاص ببرمجيات ASP و ASP.net ، ووجوده شرط اساسي ليعمل كودك ال ASP.net سواء على جهازك الشخصي أو على السيرفر الذي ستسضيف عليه موقعك لاحقاً .
كونك قمت بعمل setup لل visual studio يعني انك قمت بتحميل ال IIS او للدقة فأنت قمت بتحميل WebDev.WebServer.exe والذي يشمل ال IIS ، اما إذا كنت تود البرمجة على المفكرة Notepad مثلاً فلا بد من عمل setup له ، وذلك عن طريق اختيار لوحة التحكم Control Panel - اضافة وازالة برامج Add And Remove Programmes واختر اضافة مكونات ويندوز Add Windows Compomnent ، ستجد من ضمنها Internet Inforamtion Services وهو ال IIS .

** الطريقة السابقة كل حسب نظام التشغيل الذي يعمل عليه .

تجارب بسيطة :

قم بفتح Notepad جديد ، قم بتسميتها لتكون index.html مثلاً ثم قم بكتابة المحتويات التالية فيها :

<html>
<head>
<title>My First Pgae</title>
</head>
<****>
<center><img src="http://l.yimg.com/a/i/ww/beta/y3.gif"></centeR>
<br>
<font color=red size=3>Yahoo!</font>
<br>
<a href="http://www.yahoo.com">Link Here</a>
</****>
</html>


جرب تشغيلها مباشرة بالضغط المزدوج عليها ، مبروك ، هذه اول صفحة انترنت لك .

الآن سنقوم برسم الفورم التالي لادخال البيانات :

http://vb4arab.com/vb/uploaded/3/11219662640.jpg

الكود الخاص بهذا الفورم كالتالي :

<html>
<head>
<title>My First Pgae</title>
</head>
<****>
<h2>Welcome !!</h2>
<br>
<form name="form1">
<table border=0>
<tr>
<td>
Name
</td>
<td>
<input type=text name=textname size=10>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type=password name=textpass size=10>
</td>
</tr>
</table>
<br>
<input name="button1" type=button value="do anything"();">
&nbsp;&nbsp;&nbsp;
<input type=reset value="Clear">
</form>
</****>
</html>


والآن نريد ان نقوم بالتأكد من أن المستخدم قام بادخال بيانات في الفورم ، لو قام بادخال بيانات فسوف نظهرها له في رسالة نصية وعلى الشاشة ايضاً ، لذا سنذهب للزر Button1 ونغيره ليصبح بالشكل التالي :


<input name="button1" type=button value="do anything" onClick="doCheck();">


ومن ثم في آخر الصفحة سوف نقوم بكتابة ال ****** التالي :

<****** ********="**********">
function doCheck()
{
if(form1.textname.value!="" || form1.textpass.value!="")
{
*****(form1.textname.value);
********.write(form1.textpass.value);
}
else
*****("enter data first !");
}
</******>

استخدام Visual Studio :
سننقل نفس هذه التجربة البسيطة ولكن باستخدام ASP.net من خلال Visual Studio ، قم بفتح الفيجوال ستوديو وقم باختيار ويب جديد Website ثم اختر ASP.net Web Site :

http://vb4arab.com/vb/uploaded/3/21219662640.jpg

الآن قم برسم نفس الفورم ولكن من الادوات الجانبية :

http://vb4arab.com/vb/uploaded/3/31219662640.jpg

لا تنس اننا حتى اللحظة نتعامل مع ادوات HTML وليست ادوات ASP.net .

وعندما تقوم بوضع الكود ، قم بالضغط المزدوج على Button وقم بكتابة الأوامر مباشرة :

http://vb4arab.com/vb/uploaded/3/41219662640.jpg

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

http://vb4arab.com/vb/uploaded/3/51219662640.jpg

فقط ... كانت هذه هي تجربتنا البسيطة ، في الدرس القادم سنبدأ بالتعامل مع ASP.net .

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