بالنسبة للسؤال الأول تم استخدام createPortal حتى تستطيع الإبقاء على هيكل DOM منفصل لمكون التحميل. باستخدام createPortal ، يتم إضافة عناصر التحميل إلى عقدة DOM مختلفة بدلاً من تضمينها في هيكل المكونات الأساسي.يمكنك الإطلاع على المزيد من التفاصيل من هذا الرابط
ثانياً تستخدم المتغيرات خارج المكون إذا كانت ثابتة ولا تتغير قيمتها أثناء عملية التنفيذ.
ويمكن أيضا استخدام متغير خارجي حتى لو كان قابلاً للتغيير، ولكن بشرط أن لا يحدث تغيير في قيمته أثناء عملية ال render للمكون.
فمثلا لو كان المتغير يعبر عن بيانات تغيرت قبل عملية ال render ، لكن لا تتغير خلالها، فيمكن استخدامه خارج المكون.
بشكل عام، نحن نبتعد عن استخدام المتغيرات القابلة للتغيير داخل عملية ال render ، لتجنب مشاكل إعادة ال render غير الضرورية.
على إعتبار أنك تريد أن تصبح مطور واجهات أمامية Fron-End developer، فبشكل بسيط جدًا أنت بحاجة أولاً إلى دراسة اللغات الأساسية لتطوير الويب وهي HTML, CSS, JS وذلك ما يتم دراسته في دورة تطوير واجهات المستخدم.
أيضًا ستجد شرح لمكتبات لتسهيل عملية التطوير مثل Bootstrap الخاصة بإنشاء واجهات مستخدم بشكل أسرع عن طريق كلاسات CSS، أيضًا مكتبة jQuery الخاصة بالتلاعب للواجهة وهي قائمة على جافاسكريبت حيث توفر عليك كتابة الكثير من أكواد جافاسكريبت عن طريق استخدام دوال تقوم بوظائف معينة مباشرًة.
لكن لا تعتمد على أي مكتبة قبل أن تشعر بأريحية في استخدام اللغات الأساسية وهم HTML, CSS, JS والتطبيق على ما تعلمته من خلال مشاريع حيث تستطيع البحث على اليوتيوب عن مشاريع HTML, CSS ثم ابحث عن مشاريع "جافاسكريبت للمبتدئين" وقم بالتطبيق ولا تقلق في حال واجهت أمور جديدة تعلمها وتجاهل الخوف من رؤية شيء جديد.
الأمر يصبح أسهل مع المرور الوقت تذكر ذلك.
بعد ما سبق، سيتعين عليك تعلم إطار أو مكتبة للواجهة الأمامية مثل React وVue.js أو Angular، ولكن لا تشغل بالك بذلك حاليًا ركز على ما سبق أولاً.
وستجد تفصيل هنا:
لا يمكن ربط صفحة HTML بقاعدة بيانات SQL Server باستخدام لغة CSS وحدها.
لغة CSS (Cascading Style Sheets) هي لغة تقديم وتنسيق المحتوى على الويب، وهي مسؤولة عن جانب التصميم والمظهر البصري للصفحة، أما وظيفة الربط بين الصفحة وقاعدة البيانات فتتطلب استخدام لغة برمجة أخرى تتيح الاتصال بقاعدة البيانات وإجراء الاستعلامات.
الطرق التي شرحتها سابقاً باستخدام لغات برمجة مثل PHP أو ASP.NET أو واجهة برمجة تطبيقات هي الأنسب لغرض الربط، بينما لا يمكن لـ CSS القيام بهذا الدور.
فال CSS يستخدم عن طريق يتم إنشاء صفحة HTML عادية مع تضمينها لملف CSS لتنسيق المحتوى على الويب.
هناك طرق عديده لربط صفحة HTML بقاعدة بيانات SQL Server منها:
1- استخدام لغة PHP:
- يتم إنشاء ملف PHP ويتضمن الأكواد التي تربط بقاعدة البيانات (استخدام mysql_connect)
- يتم استدعاء طلبات SQL لاسترجاع أو إدخال البيانات
- يتم عرض النتائج داخل ترميز HTML
2- استخدام لغة ASP.NET:
- يتم إنشاء ملف ASPX ويتضمن الأكواد التي تربط بقاعدة البيانات (استخدام SqlConnection)
- يتم استدعاء طلبات SQL لاسترجاع أو إدخال البيانات
- يتم عرض النتائج داخل ترميز HTML
3- استخدام خدمة ويب (RESTful API):
- يتم برمجة واجهة برمجة التطبيقات للوصول لقاعدة البيانات
- تتم طلبات HTTP من الصفحة HTML للحصول على البيانات
- يتم تحويل البيانات لتنسيق JSON أو XML
لن تتمكن من فعل ذلك بالاعتماد على Html لوحدها، حيث أنها لغة عرض محتوى فقط، ستحتاج إلى استعمال لغة برمجة تمكنك من التواصل مع MS access وجلب البيانات وبالتالي عرضها على صفحة html، سنتعمل في المثال التالي برنامجVisual Studio الذي يتيح إنشاء تطبيقات Asp.net وبالتالي ربطه مع قاعدة بيانات من نوع access:
إنشاء اتصال مع قاعدة البيانات:
northwind.mdb : هو اسم قاعدة البيانات
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
dim dbconn
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
end sub
</script>
ربط البيانات القادمة من قاعدة البيانات مع أداة Repeater للعرض:
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
dim dbconn,sql,dbcomm,dbread
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
sql="SELECT * FROM customers"
dbcomm=New OleDbCommand(sql,dbconn)
dbread=dbcomm.ExecuteReader()
customers.DataSource=dbread
customers.DataBind()
dbread.Close()
dbconn.Close()
end sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="customers" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Companyname</th>
<th>Contactname</th>
<th>Address</th>
<th>City</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("companyname")%></td>
<td><%#Container.DataItem("contactname")%></td>
<td><%#Container.DataItem("address")%></td>
<td><%#Container.DataItem("city")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
غلق الاتصال مع قاعدة access:
dbread.Close()
dbconn.Close()