الدرس الثالث في ASP.NET 2
السلام عليكم
آمل أن تكونوا مستعدين لدرس اليوم فهو جاف قليلا .
نعلم أن لغة HTML هي اللغة الأساسية في برمجة المواقع ;
ونعلم أيضا
أنها استبدلت حاليا أو بدأت بالاستبدال ب XHTML
ولن أقوم بتوضيح أساسياتها وعليكم الرجوع للكتب
ولنقم الآن بالنظر إلى مصدر شفرات التصميم من خلال التاب الموجود بأسفل الصفحة باسم source أو عن طريق النقر على ctrl + page up
[IMG]www.khalilme.net/L/l3/1.jpg[/IMG]
لننظر إلى الشفرات وسنرى التالي
أهم سطر هو أول سطر وسنقوم بالنظر إله وشرحه
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
وبالمنطق فإن أهم ما يخص صفحتنا الحالية هو صفحتنا الحالية .
وهذا السطر خاص بالصفحة الحالية حيث يبين التالي
اللغة لمستخدمة في برمجة الصفحة
وملف الفيجوال بيسك < السي شارب > المستخدم في الصفحة
وهنالك الكثير من الخصائص تستطيع إظهارها بالضغط على المسافة من لوحة المفاتيح خلف كل خاصية ولكن أهمها
[IMG]www.khalilme.net/L/l3/2.jpg[/IMG]
MaintainScrollPositionOnPostback="true"
والتي نحدد فيها بقاء شريط تحريك المتصفح في مكانه حتى بعد طلب الصفحة
بمعنى
أنه لو كانت لدينا صفحة طويلة وفي نهايتها مثلا صندوق وزر وعند النقر عليه يطلب الصفحة من جديد
فإن المتصفح سيعيد الشريط لأول الصفحة
وهذه الخصية بامكاننا أن نحدد ذلك من خلالها .
intelisence
هو اسم القائمة المنسدلة التي تظهر هتا وفي معظم أماكن كتابة الشفرات بالفيجوال بيسك وهي لتسهيل العمل.
ثم لننزل إلى الأسفل ولننظر نرى كودXHTML ( شبيه ب HTML )
بداية الوسم
<html xmlns="http://www.w3.org/1999/xhtml" >
ثم عنوان الصفحة
<title>Untitled Page</title>
وثم وسوم بداية العمل ونحن نكتب كل شفراتنا في الوسم <div> وأنا أقصد هنا وسم بداية ونهاية العمل .
ولنفترض أننا نريداستخدم كود HTML في صفحتنا .
فنحن نعلم أنه بإمكانننا إنشاء أزرار وصناديق نص HTML بواسطة المفكرة وأيضا عن طريق الفرونت بيج نفس الكود أو حتى عن طريق الفيجوال ستوديو كالتالي
زر
كود:
<input id="Button1" type="button" value="button" />
ومع هذا يمكن عن طريق الفرونت بيج مثلا سحب الزر وإفلاته بدلا من كتابة هذه السطور ولكن لو ذهبت إلى الشفرة البرمجية للزر الذي قمت بسحبه فإنك ستجد نفس الكود السابق
وهذا هو دور الفرونت بيج مجرد توفير وتنسيق كنابة الشفرة لا أكثر ولا أقل فكل ما يعمله الفرونت بيج يمكن عمله بالمفكرة
وهذا ما قمنا بعمله في الدرسين السابقين مجرد أن سحبنا الأدوات وأفلتناها دون كتابة الشفرة.
لنقم الآن بسحب زر من قائمة الأدوات
ولنقم بعرض الكود الخاص بالصفحة من View Source
سنجد إضافة التالي بين وسم ديف
<asp:Button ID="Button1" runat="server" Text="Button" />
نلاحظ التالي
asp: حيث نحدد بأننا سنضع إحدى أدوات الأي أس بي الخاصة بها والتي سيقوم الخادم بترجمتها وإرسالها للمتصفح ككود هتمل
بعد النقطتين نوع الأداة وهو زر button
وبعدها معرف الأداة ( الاسم البرمجي ) وثم وأهم خاصية runat="server" حيث نحدد بأن الأداة سيقوم السيرفر بتحويلها إلى كود هتمل وإرساله والخادوم فقط من سفهمها وليس المتصفح ولو حذفناها راح تصير عندنا مشكلة .
وثم باقي خصائص الزر مثلا نص الزر ولو قمنا بتعديل خصائص الزر من قائمة خصائص الزر سنلاحظ أن التعديلات ستضاف في هذا السطر
وكما قلت سابقا فإن كل أكوادنا ستتحول إلى كود HTML وسيتم إرسلها للمتصفح
فبالتالي يمكننا من وضع أكواد HTML بكل بساطة مثل الشريط المتحرك وذلك بالنسخ واللصق من القرونت بيج مثلا
لنفم الآن بنسخ هذا الكود ولصقه في الوسم <div> كالتالي
<div style="text-align: center">
<table>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:Button ID="Button1" runat="server" Text="مرحبا" /></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
</div>
ولنعد إلى واجهة العمل سنلاحظ .............
سنلاحظ أن الفيجوال استوديو حولها إلى واجهة مرئية ولذلك فأنني في الدروس القادمة قد أقول لكم اسنخوا هذا الكود والصقوه وبالتالي تحصلون على الواجهة
لهنا بيكفي جفاف وشرح نظري وسأقوم بإكمال الجفاف للدروس القادمة إن شاء الله
وسأبدأ في ما تحبونه وأحبه ألا وهو العمل الحقيقي
سنقوم اليوم بنقل البيانات بين الصفحات وهتالك العديد من الطرق لنقل البيانات في المشروع
لنفرض أن مستخدما قام بالتسجيل في الموقع وقام بالنقر على زر تسجيل وبعد ذلك سيقوم بالإنتقال تلقائيا إلى صفحة تقول له شكرا تسجيلك الدخول يا يا يا يا ________
نحن لا نعرف الاسم الكريم للمستخدم ، طيب وشو العمل .
فكيف سيأخذ موقعنا محتوى الصندوق النصي من الصفحة السابقة ويظهره في أداة العنوان في الصفحة الجديدة.
الآن لنقم بعمل التالي
أو لننسخ الكود هذا ونلصقه بين الوسم <div> والذي سبق وتحدثنا عنه
لأنه احنا كبرنا خلاص
كود:
<div style="text-align: center">
<table style="direction: rtl">
<tr>
<td style="width: 100px">
الاسم:</td>
<td style="width: 100px">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px; height: 18px">
البريد الإلكتروني:</td>
<td style="width: 100px; height: 18px">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
<td style="width: 100px; height: 18px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:Button ID="btnsub" runat="server" Text="تسجيل" /></td>
</tr>
</table>
</div>
لننسخ هذا الكود في الوسم
وأريد أن أنوه لأمر وهو
غدأ عندما تكبر المشاريع ضروري جدا تسمية أسماء الأدوات بأفعالها.
بمعنى آخر ما نجعل الزر اسمه زر1 بل نسميه زر التسجيل مثل ما عملت غيرت الاسم من button إلى btnsub يعني submit وهكذا.
الآن سننشئ الصفحة الثانية وسنقوم باضافة صفحة جديدة كالتالي
نضغط على اسم المشروع بالزر الأيمن ونختار add new item
[IMG]www.khalilme.net/L/l3/3.jpg[/IMG]
وسأقوم بشرح الأرقام المذكورة في الصورة الآن (معلش استحملوني )
1- نبني المشروع أي يقوم المترجم بالتأكد من سلامة جميع الشفرات البرمجية يعني المشروع لا يحتوي أية خطأ برمجي
2- نشر الموقع بعد الانتهاء منه .
3- إضافة عنصر منشأ أي إذا أردت أن تضيف صورة للمشروع لاستخدامها أو صفحة ويب عادية أو ملف فلاشي أو أية ملف آخر يجب أن تختار الخيار هذا وتحدد مكان الملف
4- إضافة مجلد إلى المشروع لتنظيم العمل
5- عرض المشروع في المتصفح الذي تختاره
نعود الآن ونختار الخيار المحدد Web Form ونكتب اسم الصفحة بالأسفل
[IMG]www.khalilme.net/L/l3/4.jpg[/IMG]
الآن نفتح الصفحة ونضع فيها الكود التالي
كود:
<div style="text-align: right">
<span style="font-size: 32pt">شكرا لتسجيلك الدخول يا<br />
<asp:Label ID="Label1" runat="server" BackColor="White" BorderColor="White" ForeColor="Red"
Text="Label"></asp:Label></span></div>
الآن لننقر نقرتين في أي منطقة فارغة في الصفحة الثانية لنذهب إلى الكود الخلفي لنكتب التالي
كود:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Label1.Text = Request.Form("txtname").ToString
End Sub
الكود مفهوم وبسيط وشرحه كالتالي
أداة العوان سيكون نصها =
ريجويست هذا الكائن تطرقت له باختصار سابقا ولنا وقفة طويلة معه وهو يحتوى على الخاصية form حيث نكتب اسم الأداة من الصفحة السابقة لجلب محتواها المرسل وهنا نأخذ محتوى الصندوق النصي ونضعه في الليبل.
ونذهب إلى الزر ونجعله يحولنا إلى الصفحة المؤقتة بعد النقر عليه ومن خاصية PostBackUrl في قائمة الخصائص من المبرع الصغير الذي يظهر عند النقر على الخاصية نحدد اسم الصفحة
الآن صفحتنا جاهزة
ونقوم الآن بتشغيل المشروع.
لمستخدمي السي شارب بامكانهم تشغيل صفحاتهم بجعلها الصفحة الرئيسية وذلك بالنقر بالزر الأيمن على الصفحة واختيار الخيار Set as start up page
أو عن طريق
view in browser
وهي رابط الدرس
الدرس الثالث
www.khalilme.net/L/l3/13.zip
والآن قد أنهيت المقدمة البيسطة والمشجعة لكم
وابتداءا من الدروس القادمة سأدخل بالعمل الرسمي والصحيح وأمشي حسب القواعد إن شاء الله
أخوكم خليل
__________________
بريدي :khalilme (at) hotmail.com
مطور: ASP.NET, Windows Phone , Desktop Applications