النتائج 1 إلى 3 من 3

الموضوع: الدرس الثالث في ASP.NET 2

  1. #1

    الدرس الثالث في 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


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Jul 2002
    المشاركات
    534


    بارك الله فيك درس مفيد ..

    اتمنى تضع واجبات لكي نظهر لك تفاعلنا معك ، ولنستفيد أكثر.





    __________________
    بداية للمشاريع التجارية

    ASP.NET,ASP 3.0

    المدونة الشخصية : asp2asp.com

    عدنا والعود أحمد...

  3. #3

    تاريخ التسجيل
    Jun 2006
    المشاركات
    1,370


    رائع اخي خليل وكما قال لك اخي asp2asp
    لو تقوم بوضع واجبات نقوم نحن بعملها تطبيقات على الدروس





    __________________
    @_@





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

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