Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ASP.NET
Code

خصوصيات وعموميات WebMatrix: مقدمة

by
Length:LongLanguages:
This post is part of a series called The Ins and Outs of WebMatrix.
The Ins and Outs of WebMatrix: .NET Programming Using the Razor Syntax

Arabic (العربية/عربي) translation by miahood (you can also view the original English article)

يقدم هذا البرنامج التعليمي Microsoft WebMatrix ، وهي تقنية مجانية لتطوير الويب توفر واحدة من أفضل التجارب لمطوري الويب. 

ماذا ستتعلم

  •  ما هو WebMatrix؟
  •  كيفية تثبيت WebMatrix.
  •  كيف تبدأ إنشاء موقع ويب بسيط باستخدام WebMatrix.
  •  كيفية إنشاء صفحة الويب الديناميكية باستخدام WebMatrix.
  • كيفية برمجة صفحات الويب الخاصة بك في Visual Studio للاستفادة من الميزات الأكثر تقدمًا. 



ما هو WebMatrix؟ 

WebMatrix عبارة عن مجموعة مجانية خفيفة الوزن من أدوات تطوير الويب التي توفر أسهل طريقة لإنشاء مواقع الويب. 

. يتضمن IIS Express (خادم ويب تطوير) و ASP.NET (إطار ويب) و SQL Server Compact (قاعدة بيانات مضمنة).  ويتضمن أيضًا أداة بسيطة تعمل على تبسيط تطوير موقع الويب وتسهّل بدء مواقع الويب من تطبيقات مفتوحة المصدر شائعة. المهارات والتعليمات البرمجية التي تطورها مع WebMatrix الانتقال بسلاسة إلى Visual Studio و SQL Server. 

يمكن لصفحات الويب التي تقوم بإنشائها باستخدام WebMatrix أن تكون ديناميكية — أي ، يمكنها تغيير محتواها أو نمطها بناءً على إدخال المستخدم أو المعلومات الأخرى ، مثل معلومات قاعدة البيانات. لبرمجة صفحات الويب الديناميكية ، تستخدم ASP.NET مع صيغة Razor ومع لغات برمجة C # أو Visual Basic. 

إذا كان لديك بالفعل أدوات البرمجة التي تريدها ، يمكنك تجربة أدوات WebMatrix أو يمكنك استخدام الأدوات الخاصة بك لإنشاء مواقع ويب تستخدم ASP.NET. 

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


تثبيت WebMatrix 

لتثبيت WebMatrix ، يمكنك استخدام Microsoft Platform Web Platform المثبت ، وهو تطبيق مجاني يجعل من السهل تثبيت وتكوين تقنيات الويب. 

  1. إذا لم يكن لديك مثبت منصة الويب بالفعل ، قم بتنزيله من عنوان URL التالي: 

    http://go.microsoft.com/fwlink/?LinkID=205867 

  2. قم بتشغيل Web Platform Installer ، وحدد Spotlight ، ثم انقر فوق Addto install WebMatrix. 
    Install WebMatrix

     ملاحظة إذا كان لديك إصدار WebMatrix Beta مثبت بالفعل ، يقوم Web Platform Installer بترقية التثبيت إلى WebMatrix 1.0. ومع ذلك ، قد لا تظهر المواقع التي قمت بإنشائها باستخدام إصدارات Beta السابقة في قائمة " المواقع الخاصة بي" عند فتح WebMatrix لأول مرة.  .


الابتداء مع WebMatrix 

للبدء ، ستنشئ موقعًا إلكترونيًا جديدًا وصفحة ويب بسيطة. 

  1. ابدأ WebMatrix.  
    Start WebMatrix
  2. انقر فوق الموقع من قالب . تتضمن القوالب ملفات و صفحات تم إنشاؤها مسبقًا لأنواع مختلفة من مواقع الويب.  
    Create a Site
  3. حدد Empty Site واسم الموقع الجديد Hello World . 
  4. انقر فوق موافق . WebMatrix يخلق ويفتح الموقع الجديد. 

    في الجزء العلوي ، سترى شريط أدوات الوصول السريع وشريطًا ، كما هو الحال في Microsoft Office 2010. في أسفل اليمين ، سترى محدد مساحة العمل ، والذي يحتوي على أزرار تحدد ما يظهر فوقها في الجزء الأيمن.  على اليمين ، جزء المحتوى ، وهو المكان الذي تعرض فيه التقارير ، وتحرير الملفات ، وما إلى ذلك. وأخيرًا ، يظهر شريط الإشعارات عبر الجزء السفلي من الرسائل ، حيث يعرض الرسائل حسب الحاجة. 

    [image]

إنشاء صفحة ويب 

  1. في WebMatrix ، حدد مساحة عمل الملفات . تتيح لك مساحة العمل هذه العمل مع الملفات والمجلدات. يعرض الجزء الأيسر بنية ملف موقعك. 
    [image]
  2. في الشريط ، انقر فوق جديد ، ثم انقر فوق ملف جديد .  
    [image]

     يعرض WebMatrix قائمة بأنواع الملفات.

    [image]
  3. حدد CSHTML ، وفي المربع الاسم ، اكتب default.cshtml .  صفحة CSHTML عبارة عن نوع خاص من الصفحات في WebMatrix يمكن أن يحتوي على المحتويات المعتادة لصفحة الويب ، مثل HTML وشفرة JavaScript ، والتي يمكن أن تحتوي أيضًا على تعليمات برمجية لبرمجة صفحات الويب. (ستعرف المزيد عن ملفات CSHTML في وقت لاحق.) 
  4. انقر فوق موافق . يقوم WebMatrix بإنشاء الصفحة وفتحها في المحرر.  
    [image]

    كما ترون ، هذا هو ترميز HTML العادي. 

  5. أضف العنوان التالي ، العنوان ، ومحتوى الفقرة إلى الصفحة: 
  6. في شريط أدوات الوصول السريع ، انقر فوق حفظ . 
    [image]
  7. في الشريط ، انقر فوق " تشغيل" . 
    [image]

    ملاحظة قبل النقر فوق تشغيل ، تأكد من تحديد صفحة الويب التي تريد تشغيلها في جزء التنقل في مساحة عمل الملفات . يقوم WebMatrix بتشغيل الصفحة المحددة ، حتى إذا كنت تقوم حاليًا بتحرير صفحة مختلفة.  إذا لم يتم تحديد أي صفحة ، يحاول WebMatrix تشغيل الصفحة الافتراضية للموقع (default.cshtml ) ، وإذا لم تكن هناك صفحة افتراضية ، فسوف يعرض المتصفح خطأ. 

    WebMatrix يبدأ خادم الويب (IIS Express) التي يمكنك استخدامها لاختبار الصفحات على جهاز الكمبيوتر الخاص بك. يتم عرض الصفحة في المتصفح الافتراضي الخاص بك. 

    [image]

تثبيت المساعدين باستخدام أداة الإدارة 

الآن بعد تثبيت WebMatrix وإنشاء موقع ، من المستحسن معرفة كيفية استخدام أداة إدارة صفحات الويب لـ ASP.NET ومدير الحزم لتثبيت المساعدين. يحتوي WebMatrix على مساعدين (مكونات) يقومان بتبسيط مهام البرمجة الشائعة والتي ستستخدمها خلال هذه البرامج التعليمية.  (يتم تضمين بعض المساعدين بالفعل مع WebMatrix ، ولكن يمكنك تثبيت الآخرين أيضًا.) في الملحق يمكنك العثور على مرجع سريع للمساعدين المُضمنين وللمساعدينالآخرين الذين يمكنك تثبيته كجزء من حزمة تسمى ASP.NET على الويب مكتبة المساعدين.  يوضح الإجراء التالي كيفية استخدام أداة الإدارة لتثبيت مكتبة "تعليمات ويب ASP.NET". سوف تستخدم بعض هؤلاء المساعدين في هذا البرنامج التعليمي والبرامج التعليمية الأخرى في هذه السلسلة. 

  1. في WebMatrix ، انقر فوق مساحة عمل الموقع . 
  2. في جزء المحتويات ، انقر فوق إدارة صفحات الويب ASP.NET . هذا يحمّل صفحة الإدارة إلى المستعرض الخاص بك. نظرًا لأن هذه هي المرة الأولى التي تقوم فيها بتسجيل الدخول إلى صفحة الإدارة ، فإنها تطالبك بإنشاء كلمة مرور. 
  3. أنشئ كلمة مرور.  
    Package Manager

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

    Rename password file
  4. اترك المتصفح مفتوحًا على صفحة فحص الأمان ، ثم عد إلى WebMatrix ، وانقر فوق مساحة عمل الملفات . 
  5. انقر بزر الماوس الأيمن فوق المجلد Hello World لموقعك ، ثم انقر فوق تحديث .تعرض قائمة الملفات والمجلدات الآن مجلد App_Data . افتح ذلك ورؤية مجلدAdmin .  يتم عرض ملف كلمة المرور الذي تم إنشاؤه حديثًا ( _Password.config ) فيالمجلد ./App_Data/Admin/ . يعرض الرسم التوضيحي التالي بنية الملف المحدثة مع ملف كلمة المرور المحدد: 
  6. Rename password file
  7. إعادة تسمية الملف إلى Password.config بإزالة حرف تسطير أسفل السطر (_). 
  8. ارجع إلى صفحة فحص الأمان في المستعرض ، وانقر فوق الرابط انقر هنا بالقرب من نهاية الرسالة حول إعادة تسمية ملف كلمة المرور. 
  9. سجل الدخول إلى صفحة الإدارة باستخدام كلمة المرور التي أنشأتها. تعرض الصفحة مدير الحزم ، الذي يحتوي على قائمة من الحزم الإضافية.  
    ch01_learnweb-14a

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

  10. ابحث عن حزمة مكتبة ASP.NET Web Helpers. لتضييق نطاق القائمة ، ابحث عن المساعدين الذين يستخدمون حقل البحث . تظهر الصورة التالية نتيجة البحث عن المساعدين . لاحظ أن العديد من إصدارات هذه الحزمة متوفرة. 
    ch01_learnweb-14b
  11. حدد الإصدار الذي تريده ، ثم انقر فوق الزر تثبيت ، ثم قم بتثبيت الحزمة حسب التوجيهات. بعد تثبيت الحزمة ، يعرض مدير الحزم النتيجة.  
    ch01_learnweb-15

    . تسمح لك هذه الصفحة أيضًا بإلغاء تثبيت الحزم ، ويمكنك استخدام الصفحة لتحديث الحزم عند توفر إصدارات أحدث. يمكنك الانتقال إلى القائمة المنسدلة إظهار والنقر فوق تثبيت لعرض الحزم التي قمت بتثبيتها ، أو النقر فوق تحديثات لعرض التحديثات المتوفرة للحزم المثبتة. 

    ملاحظة قوالب الموقع الافتراضي ( المخابز ، التقويم ، معرض الصور ، و كاتب الموقع ) متوفرة في C # و إصدارات Visual Basic. يمكنك تثبيت قوالب Visual Basic باستخدام أداة إدارة صفحات ويب ASP.NET في WebMatrix.  افتح أداة الإدارة كما هو موضح في هذا القسم وابحث عن VB ، ثم قم بتثبيت القوالب التي تحتاج إليها. يتم تثبيت قوالب موقع الويب في المجلد الجذر لموقعك في مجلد باسم Microsoft Templates . 

    في القسم التالي ، سترى مدى سهولة إضافة شفرة إلى صفحة default.cshtml منأجل إنشاء صفحة ديناميكية. 


استخدام شفرة صفحات الويب ASP.NET 

في هذا الإجراء ، ستقوم بإنشاء صفحة تستخدم رمزًا بسيطًا لعرض تاريخ الخادم ووقته على الصفحة. سوف يقدم لك المثال هنا إلى بنية Razor التي تسمح لك بتضمين التعليمات البرمجية في HTML على صفحات ويب ASP.NET.   (يمكنك قراءة المزيد عن هذا في البرنامج التعليمي التالي.) يقدم التعليمة البرمجية أحد المساعدين الذي تقرأه حول البرنامج التعليمي في وقت سابق. 

  1. افتح ملف default.cshtml الخاص بك . 
  2. أضف ترميزًا إلى الصفحة بحيث يبدو مثل المثال التالي: 

    تحتوي الصفحة على ترميز HTML عادي ، مع إضافة واحدة: الحرف @ يرمز إلى رمز برنامج ASP.NET. 

  3. قم بحفظ الصفحة وتشغيلها في المستعرض. سترى الآن التاريخ والوقت الحاليين على الصفحة.  
    Hello world with time

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

افترض أنك تريد القيام بشيء أكثر تعقيدًا ، مثل عرض قائمة التمرير من التغريدات من مستخدم Twitter الذي تحدده.  يمكنك استخدام مساعد لذلك ؛ كما ذكرنا سابقًا ، المساعد هو أحد المكونات التي تبسط المهام المشتركة. في هذه الحالة ، كل العمل الذي يتعين عليك القيام به جلب وعرض موجز تويتر. 

  1. قم بإنشاء ملف CSHTML جديد وأطلق عليه TwitterFeed.cshtml . 
  2. في الصفحة ، استبدل الشفرة الحالية بالكود التالي: 

    ينشئ HTML هذا نموذجًا يعرض مربع نص لإدخال اسم مستخدم ، بالإضافة إلى زرإرسال . هذه هي المجموعة الأولى من علامات <div> . 

    بين المجموعة الثانية من علامات <div> هناك بعض التعليمات البرمجية. (كما لاحظت سابقًا ، لتعليم التعليمة البرمجية في صفحات ويب ASP.NET ، يمكنك استخدام الحرف @ .) في المرة الأولى التي يتم فيها عرض هذه الصفحة ، أو إذا قام المستخدم بالنقر فوق " إرسال" ولكن يترك مربع النص فارغًا ، فسيتم طلب التعبير الشرطي [" TwitterUser "]. IsEmpty سيكون صحيحًا.  في هذه الحالة ، تعرض الصفحة موجزًا ​​على Twitter يبحث عن المصطلح "microsoft".بخلاف ذلك ، تعرض الصفحة خلاصة Twitter لاسم المستخدم الذي أدخلته في مربع النص. 

  3. قم بتشغيل الصفحة في المستعرض. يعرض موجز Twitter تغريدات على "microsoft" بها.  
    Twitter page
  4. أدخل اسم مستخدم Twitter ، ثم انقر فوق إرسال . يتم عرض موجز جديد. (إذا قمت بإدخال اسم غير موجود ، فلا يزال يتم عرض موجز Twitter ، فإنه فارغ فقط.) 

    يوضح هذا المثال بعض المعلومات عن كيفية استخدام WebMatrix وكيفية برمجة صفحات الويب الديناميكية باستخدام رمز ASP.NET بسيط باستخدام بنية Razor.  البرنامج التعليمي التالي بفحص الكود بمزيد من العمق. ستعرض لك البرامج التعليمية اللاحقة كيفية استخدام الشفرة للعديد من أنواع مهام مواقع الويب المختلفة. 


برمجة ASP.NET Razor Pages في Visual Studio 

بالإضافة إلى استخدام WebMatrix لبرمجة صفحات ASP.NET Razor ، يمكنك أيضًا استخدام Visual Studio 2010 ، إما بإحدى الطبعات الكاملة أو إصدار Visual Web Developer Express المجاني.  إذا كنت تستخدم Visual Studio أو Visual Web Developer لتحرير صفحات ASP.NET Razor ، فستحصل على جهازي برمجة يمكنهما تحسين الإنتاجية - IntelliSense و المصحح. يعمل IntelliSense في المحرر بعرض اختيارات ملائمة للسياق.   على سبيل المثال ، عند إدخال عنصر HTML ، يعرض لك IntelliSense قائمة بالسمات التي يمكن أن يحتوي عليها العنصر ، ويمكنه أيضًا عرض القيم التي يمكنك تعيينها لتلك السمات.   تعمل IntelliSense لـ HTML و JavaScript و C # و Visual Basic (لغات البرمجة التي تستخدمها لصفحات ASP.NET Razor.) 

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

للعمل مع ASP.NET Razor Pages في Visual Studio ، تحتاج إلى تثبيت البرنامج التالي على جهاز الكمبيوتر الخاص بك: 

  • Visual Studio 2010 أو Visual Web Developer 2010 Express 
  • ASP.NET MVC 3 RTM. 

ملاحظة يمكنك تثبيت كل من Visual Web Developer 2010 Express و ASP.NET MVC 3 باستخدام Web Platform Installer. 

إذا كان لديك Visual Studio مثبتًا ، عند قيامك بتحرير موقع ويب في WebMatrix ، يمكنك تشغيل الموقع في Visual Studio للاستفادة من IntelliSense و المصحح. 

  1. افتح الموقع الذي قمت بإنشائه في هذا البرنامج التعليمي ، ثم انقر فوق مساحة عملالملفات . 
  2. في الشريط ، انقر فوق الزر Visual Studio Launch .  
    Twitter page

    بعد فتح الموقع في Visual Studio ، يمكنك مشاهدة بنية الموقع في Visual Studio في جزء Explorer Solution . يعرض الرسم التوضيحي التالي موقع الويب الذي تم فتحه في Visual Web Developer 2010 Express: 

    Twitter page

    للحصول على نظرة عامة حول كيفية استخدام IntelliSense و مصحح الأخطاء مع صفحات ASP.NET Razor في Visual Studio ، راجع العنصر التذييلASP.NET Web Pages Visual Studio . 


إنشاء واختبار صفحات ASP.NET باستخدام محرر النصوص الخاصة بك 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.