بسم الله الرحمن الرحيم
الكاتب :Sonu Kapoor
وصلة المقالة: http://www.devarticles.com/content.php?articleId=582
ترجمة : محمد سمير
ملاحظة :الموضوع يتضمن صور يمكنك مراجعتها من الموقع الأصلي
إصنع سجل زوار بنفسك مع c# - asp.net :
المقدمة :
من السهل أن تصنع سجل زوار بنفسك , لفهم المقالة نفترض أنك على دراية بأساسيات asp.net , و بعض مهارات xml , xsl .
إذاً ما الذي نحتاجه لبرمجة سجل زوار ؟ نحتاج لنموذجي ويب two web forms , أحدهما لإدخال الإسم , البريد الإليكتروني , التعليق.... إلخ , و الآخر لعرض التعليقات . بالطبع بالطبع يمكن عمل ذلك في نموذج واحد لكننا سنعمل على نموذجين لضمان تنظيم الكود و ذلك مع العديد من ملفات الكود المخفية code behinde files .
نحتاج بجانب ذلك إلى قاعدة بيانات . لأجل عرض XML نستخدم أيضاً تقنيات XSL .
ملخص ما نحتاجه :
- نموذجي ويب
- أكواد مخفية
- قاعدة بيانات
- XSL
يؤدي سجل الزوار دوره إذا إستطاع تخزين الإسم , المدينة , البريد الإليكتروني , الموقع و بعض السطور كتعليق . بالطبع يمكنك أن تضيف حقول أكثر لكن هذه التي إخترناها كافية . تخزن تلك المعلومات في ملف XML لذلك سيكون كود XML مشابه للآتي :
01: <?xml version="1.0" encoding="ISO-8859-1"?> 02: <guestbook> 03: <guest> 04: <name>Sonu Kapoor</name> 05: <location>Germany</location> 06: <email>sonu@codefinger.de</email> 07: <website>www.codefinger.de</website> 08: <comment>This guestbook is written by Sonu Kapoor. 09: I hope you like it. To learn how to create such a guestbook, 10: read the whole story on my website.</comment> 11: </guest> 12: </guestbook>
نماذج ويب web forms - التوقيع في سجل الزوار :
للتوقيع في سجل الزوار سوف نسمح للمستخدم بإدخال بعض المعلومات . يمكن عمل ذلك بنموذج ويب بسيط . في مثالنا guestbook.aspx نستخدم فيه الحقول التالية :
- الإسم
- المدينة
- البريد الإليكتروني
- الموقع
- التعليق
النموذج الأول - guestbook.aspx :
01: <% @Page Language="C#" Debug="true" Src="Guestbook.cs" Inherits="Guestbook" 02: %> 03: <form runat="server"> 04: ... 05: ...doing some visualisation stuff 06: ... 07: <ASP:Textbox id="name" size="64" runat="server"/> 08: <asp:RequiredFieldValidator id="nameRequired" runat="server" 09: ControlToValidate="name" ErrorMessage="You must enter a value into textbox1" 10: Display="dynamic">Enter name </asp:RequiredFieldValidator> 11: <ASP:Textbox id="location" size="64" runat="server"/> 12: <asp:RequiredFieldValidator id="locationRequired" runat="server" 13: ControlToValidate="location" ErrorMessage="You must enter a value into textbox1" 14: Display="dynamic">Enter location </asp:RequiredFieldValidator> 15: <ASP:Textbox id="website" size="64" runat="server"/> 16: <ASP:Textbox id="email" size="64" runat="server"/> 17: <ASP:Textbox id="comment" TextMode="Multiline" columns="50" rows="10" 18: wrap="true" runat="server"/> 19: <asp:RequiredFieldValidator id="commentRequired" runat="server" 20: ControlToValidate="comment" ErrorMessage="You must enter a value into textbox1" 21: Display="dynamic">Enter comment </asp:RequiredFieldValidator> 22: <ASP:Button id="submit" runat="server" Text="Submit" OnClick="Save_Comment"/> 23: <ASP:Button id="reset" runat="server" Text="Reset"/> 24: ... 25: ...doing some visualisation stuff 26: ... 27: </script> 28: </form>
و حتى لا تربكك الأكواد الغير ضرورية للشرح فقد حذفت أكواد الأشكال المرئية مثل table header ..الخ .
أنا أفترض أنك تعرف تقنية الكود المخفي code behinde . في السطر الأول وضعنا SRC attribute لكي يعرف ملف asp.net أننا نستخدم الكود المخفي guestbook.cs وقد جعلنا أيضاً تلك الخصيصة attribute تورث مع ال class name المكافئ . تلك الخصيصة لكي يعرف الملف أي class يجب أن يورَث .
في السطور 7, 11 و 15 إلى 17 أنجزنا الحقول المطلوبة , تذكر أنه إذا أردت إستخدام نفس المتغيرات في الكود المخفي فستحتاج المتغيرات نفس ال ID في كلا الملفين و يجب أن تعلن ك public .
في السطور 8 , 12 و 19 إستخدمنا ASP.NET validator controls .
هذه ال validator controls تحقق في ما إذا كان المستخدم قد أدخل أي قيمة في الحقول text fields بدون عمل أي round-trip للخادم .
هذا الكود يترجم executed في جانب العميل client .
في السطر 22 و ضعنا زر تسجيل مع حدث OnClick يسمى Save_Comment .
هذا الحدث يستخدم لتخزين المعلومات الدخلة بواسطة المستخدم في ملف XML . عمل هذا الحدث متاح في Guestbook.cs .
في السطر 23 قمنا فقط بعمل زر reset .
للآن فقد رأيت كيف تعرض نموذج ويب , لكنك لم ترى الكود الذي يتعامل مع الحدث في guestbook.cs .
الكود المخفي -guestbook.cs :
01: using System;
02: using System.Web;
03: using System.Web.UI;
04: using System.Web.UI.WebControls;
05: using System.Xml;
06: public class Guestbook : Page
07: {
08: // Create the required webcontrols with the same name as in the guestbook.aspx 09: //file.
10: public TextBox name;
11: public TextBox location;
12: public TextBox email;
13: public TextBox website;
14: public TextBox comment;
15: public void Save_Comment(object sender, EventArgs e)
16: {
17: // Everything is all right, so let us save the data into the XML file
18: SaveXMLData();
19: // Remove the values of the textboxes
20: name.Text="";
21: location.Text="";
22: website.Text="";
23: email.Text="";
24: comment.Text="";
25: }
26: }
27: private void SaveXMLData()
28: {
29: // Load the xml file
30: XmlDocument xmldoc = new XmlDocument();
31: xmldoc.Load( Server.MapPath("guestbook.xml") );
32: //Create a new guest element and add it to the root node
33: XmlElement parentNode = xmldoc.CreateElement("guest");
34: xmldoc.DocumentElement.PrependChild(parentNode);
35: // Create the required nodes
36: XmlElement nameNode = xmldoc.CreateElement("name");
37: XmlElement locationNode = xmldoc.CreateElement("location");
38: XmlElement emailNode = xmldoc.CreateElement("email");
39: XmlElement websiteNode = xmldoc.CreateElement("website");
40: XmlElement commentNode = xmldoc.CreateElement("comment");
41: // retrieve the text
42: XmlText nameText = xmldoc.CreateTextNode(name.Text);
43: XmlText locationText = xmldoc.CreateTextNode(location.Text);
44: XmlText emailText = xmldoc.CreateTextNode(email.Text);
45: XmlText websiteText = xmldoc.CreateTextNode(website.Text);
46: XmlText commentText = xmldoc.CreateTextNode(comment.Text);
47: // append the nodes to the parentNode without the value
48: parentNode.AppendChild(nameNode);
49: parentNode.AppendChild(locationNode);
50: parentNode.AppendChild(emailNode);
51: parentNode.AppendChild(websiteNode);
52: parentNode.AppendChild(commentNode);
53: // save the value of the fields into the nodes
54: nameNode.AppendChild(nameText);
55: locationNode.AppendChild(locationText);
56: emailNode.AppendChild(emailText);
57: websiteNode.AppendChild(websiteText);
58: commentNode.AppendChild(commentText);
59: // Save to the XML file
60: xmldoc.Save( Server.MapPath("guestbook.xml") );
61: // Display the user the signed guestbook
62: Response.Redirect("viewguestbook.aspx");
63: }
64: }لن تصدق لكن من السطر الأول و حتى السطر الخامس فقد وضعنا الحد الأدنى من ال namespaces المطلوبة للدخول لعدة وظائف .
في السطر السادس أنشأنا class جديد أسميناه guestbook , من فضلكم لاحظوا أن هذا ال class المورث بواسطة guestbook.aspx .
الأسطر من 10 إلى 14 تعلن عن خمسة متغيرات public variables من النوع textbox , تذكروا أيضاً أن هذه الأسماء يجب أن تكون مطابقة لأسماء ال text boxes في guestbook.aspx .
في السطر 15 تستطيع أن ترى الحدث Save_Comment و الذي يتم عن طريق الزر submit في ملف guestbook.aspx ,هذا الحدث يتم لحفظ المعلومات .
عملية الحفظ :
الذي يقوم بحفظ المعلومات لنا هو function SaveXMLData() . لأننا نستخدم قاعدة بيانات XML لتخزين المعلومات لذا نستخدم XmlDocument, XmlElement and XmlText classes . هذه ال classses تمدنا بالوظائف الضرورية التي نحتاجها .
السطران 30 و 31 يصنعان XMLDocument class object جديد و بهما يتم تحميل ملف guestbook.xml .
في الأسطر من 36 و حتى 40 نقط اللقاء المطلوبة nodes تصنع عن طريق function CreateElement .
الأسطر من 42 و حتى 46 تسترجع المعلومات المدخلة بواسطة المستخدم و تخزنها في object of XmlText .
في الأسطر من 48 و حتى 52 إستخدمنا وظيفة AppendChild مع XmlDocument object الرئيسي , هذه الوظيفة تخزن نقاط اللقاء الموضوعة بدون قيم .
أخيراً في الأسطر من 54 و حتى 88 تخزن القيم في نقاط اللقاء التي صنعناها .
في السطر 60 تحفظ كل التغييرات في guestbook.xml .
السطر 62 يعيد توجيه الصفحة لعرض guestbook.aspx مع التعليق المخزَّن.
نموذج ويب - عرض سجل الزوار :
ViewGuestbook.aspx:
01: <% @Page Language="C#" Debug="true" Src="ViewGuestbook.cs" Inherits="ViewGuestbook" %>
كما نرى فنحن لا نحتاج أكثر من إستدعاء ملف الكود المخفي ViewGuestbook.cs .
ملف ViewGuestbook.cs :
01: using System;
02: using System.Web;
03: using System.Web.UI;
04: using System.Web.UI.WebControls;
05: using System.Xml;
06: using System.Xml.Xsl;
07: using System.IO;
08: public class ViewGuestbook : Page
09: {
10: private void Page_Load(object sender, System.EventArgs e)
11: {
12: //Load the XML file
13: XmlDocument doc = new XmlDocument( );
14: doc.Load( Server.MapPath("guestbook.xml") );
15: //Load the XSL file
16: XslTransform xslt = new XslTransform();
17: xslt.Load( Server.MapPath("guestbook.xsl") );
18: string xmlQuery="//guestbook";
19: XmlNodeList nodeList=doc.DocumentElement.SelectNodes(xmlQuery);
20: MemoryStream ms=new MemoryStream();
21: xslt.Transform( doc, null, ms);
22: ms.Seek( 0, SeekOrigin.Begin );
23: StreamReader sr = new StreamReader(ms);
24: //Print out the result
25: Response.Write(sr.ReadToEnd());
26: }
27:}لقد صنعنا هذا ال class لعرض كل التعليقات للمستخدم .
الأسطر من 1 ل 7 لإستدعاء ال namespaces المطلوبة .
بما أننا نستخدم XSL للعرض فيجب علينا إستدعاء the namespace System.Xml.Xsl .
السطر 8 يصنع class جديد يسمى viewguestbook , مع وظيفة خاصة تسمى page_load , هذه الوظيفة تستدعى دائماً عند تحميل الصفحة أو عند عمل refresh , تعيد الوظيفة function التحميل مرة أخرى عن طريق السطر 14 .
ال XslTranform class يستخدم لتحويل عناصر XML إلى HTML .
في السطرين 16 و 17 نحمل guestbook.xsl بمساعدة XslTransform object .
السطر 19 يصنع new object of class XmlNodeList , بمساعدة هذا ال class نستطيع أن نختار نقط اللقاء المطلوبة .
في السطر 20 نستخدم the class MemoryStream و المتوفر عن طريق ال namespace --> System.IO
This class is used to create a stream that has memory as a backing store
بإستخدام function Transform في السطر 21 فقد حددنا معلومات XML لالmemorystream .
الوظيفة Seek في السطر 22 تسجل الوضع الحالي بصفر .
في السطر 23 صنعنا object of the class StreamReader , هذا الclass يستخدم لقراءة الstream .
يقوم السطر 25 بطبع النتائج بمساعدة function ReadToEnd() , هذه الوظيفة تقرأ الstream من الموضع الحالي و حتى النهاية .
XSL :
كما ذكرنا نحن نستدم xsl للتحويل من xml إلى html
01:<xsl:for-each select="//guest"> 02:<xsl:apply-templates select="name"/> 03:</xsl:for-each> في الloop نحن نستدعي xml template و الذي يبدو مثل هذا : 01:<xsl:template match="name"> 02:<xsl:value-of select='.'/> 03:</xsl:template>
يمكنك تحميل الموضوع على هيئة ملف txt
الأرقام في الأكواد للتوضيح فقط
سبحانك اللهم وبحمدك , نشهد أن لا إله إلا أنت , نستغفرك ربنا و نتوب إليك