السلام عليكم اليوم ان شاء الله هنتعلم ازاى نقوم بتصميم موقع فى اقل من ساعة مع قاعدة بيانات سيكوال
نقول باسم الله الرحمن الرحيم و نبدا
اول حاجة هنعمل موفع ازاى ما فى الصوره دى


اول حاجة نفتح الفيجوال و نعمل انشاء مشروع جديد من نوع aspx مع تحديد الغة vb.net

و بعد ذلك نقوم باضافة صحفة جديد من نوع aspx

و بعد ذلك نقوم باضافة ملف التنسيق css

و بعد كده هنبدء بكتابة كود التنسيق الاول
باضافة صورة الخلفية ادخل الـ body
عن طريق الكود التالى

كود :

{
    background-image: url('../img/back.jpg');
    background-repeat: no-repeat;
}

شرح الكود
قومت باضافة صور خلفية و هى بدخل المجلد لى اصور img
و بعد ذلك قومت باظبط خصائص الصور علشان تكون بكامل الصفحة
و على فاكر مقاسات الصور هى
1103*1000

و نفتح الصفخة aspx لى قومت باضافة قبل ذلك امامك
و نقوم بسحب ملف التنسيق css عن طريق الضغط بالموس عليه و تركو فوق الصفحة
و كده تم اظهر الخلفية الحمد الله
بعد كده نقوم بسحب الاداه ScriptManager من صندوق الاودات ادخل الصفحة
علشان نقدر نعمل اعلانات متحركة بقى
و الاداه دى تساوى الفلاش بختصر
نجبى بقى و نعمل التنسيق بتع القائمة ازاى ما فى الصور
نفتح ملف التنسيق css
ونكتب الكود التالى

كود :

.rtop
{
    width: 311px;
    height: 90px;
    background-color: #0A0A0A;
        position: absolute;
         filter: alpha(opacity=90);
    opacity: 0.9;
      float:right;
    margin-left:50px;
     text-align: center;
}

شرح الكود
اول حاجة انا عملت متغير اسمو rtop
علشان اقدر جيب كل حاجة جوه
و بعد كده تحداد الطول و العرض مع الخلفية و الشفافية مع تحدت النص فى الوسط مع البعد عن اليسار بمقدر 50باكسل
و اهم حاجة هى position: absolute;
و الشرح هذى الاده لسه منى انا و لكن من شخص اخر
خاصية position من أهم الخواص في CSS وعن طريقها تستطيع عمل حيل رائعة وخاصةً بإستخدام الجافاسكربت وأيضاً عمل تصاميم رائعة الشكل وبتأثيرات هذه الخاصية كما نشاهدها في بعض التصاميم الموجودة ضمن معارض CSS المنتشرة وأيضاً إستخدامها مع لغة Javascript ومكتباتها مثل jQuery ، MooTools ، وغيره .. ، وكما وعدكم سابقاً بكتابة هذا الدرس والذي سيشرح بشكل بسيطة طريقة عملها والخواص الأخرى المتعلقة بها مثل z-index الموجودة في CSS ، وسننتقل بعدها لبعض الأمثلة العملية في إستخدام هذه الخاصية.

قيم الخاصية position

تحتوي خاصية position على أربع قيم رئيسية بصفات مختلفة فلو قلنا أن لدينا عنصر من التصميم نريد تحديد موقعه في الصفحة سيكون موقع هذا العنصر بالنسبة لإستخدامنا خاصية position إذا حمل أحد هذه القيم:

Static: وتعني أن موقع العنصر ساكن أي سيكون في مكانه لا تستطيع إستخدام الخواص الأخرى في تحريكه لأربع إتجاهات سواء Top ، Left ، Bottom ، Right.
Relative: وتعني أن موقع العنصر يتغير بالنسبة لموقعه بدون إستخدام خاصية position أي نسبةً للعناصر الأخرى حوله.
Absolute: وتعني أن موقع العنصر يتغير بالنسبة للصفحة (قياس الصفحة كاملة) أي لا يتأثر بالعناصر الآخرى ولكن يتأثر بقياس الصفحة عند التصغير أو التكبير ويتأثر في حال كان ضمن عنصر آخر يحمل قيمة Relative.
Fixed: وتعني أن موقع العنصر ثابت لا يتأثر في حال تغير قياس الصفحة ولا يتأثر إذا وصعته ضمن عنصر آخر يحمل أي قيمة من القيم التي ذكرتها. (يعمل على الإصدار السابع من متصفح الإكسبلورر)

هذا بالنسبة لقيم خاصية position ولكن هناك خواص آخرى لا تعمل إلا بوجوده مثل Top ، Left ، Bottom ، Right ، … بالتأكيد هناك خواص أخرى ، وسنشرح أولاً هذه الخواص الأربع ، كما هي واضحة من أسمائها فتعني بعد العنصر في الصفحة سواء من إتجاه اليمين أو الأعلى أو اليسار أو الأسفل.
و بعد كده نفتح صفحة الويب aspx

كود :

<div class="ltop"></div>

و نقوم باضافة عن طريف عمل div جديد
و كده تم اضافة المتغير الجديد و ظهر فى الصحفة الموقع
و بعد كده افق بالموس عالمربع حتى يتحول الماوس و تظهر الصورة التالى


و بعد كده قوم بسحب المربع فى ايه مكان ترويد ادخل الصحفة و يمكن اعادة او تغير المقاسات عن طريق الماوس و الفيجوال سوف يقوم بنفسو بتعديل الارقام ادخل ملف التنسيق css
و بعد كده نقوم بسحب الاداه Menu من صندوق الاوادت و ادخل المربع و تركه و سوف يظهر امامك القائمة و عن طريق الخائص نقوم بتغير الى وضع الجدوال و طريق العرض من عمودى الى افقى
Orientation=Horizontal
RenderingMode=Table
و بعد كده نعمل div جديد و نعمل ما فعل قبل ذلك

كود :

.rtop
{
    width: 311px;
    height: 90px;
    background-color: #0A0A0A;
        position: absolute;
         filter: alpha(opacity=90);
    opacity: 0.9;

    float:right;
    margin-left:50px;
     text-align: center;
}

و ده علشان نقوم بعمل شعار او اسم الشركة
و بعد تعديل المربع فى الجانب اليمين من الصحفة امام المربع الاخر نقوم باضافة الاداه
Image و نقوم باضافة شعار او اسم الشركة بدخله
و يكون شكل الكود aspx

كود :

<div class="rtop">
      <asp:Image ID="Image1" runat="server" ImageUrl="~/img/nameco.png" />
    </div>

و بعد ذلك هقوم بعمل متغير جديد اسمو ad ادخل ملف التنسيق css
لعمل مربع جديد فى تقسيم الصفحة
لعمل اعلاانات فى جانب الصفحة اليسار من الموقع و سوف يكون هذا شكل الكود

كود :

.ad
{
    border: 1px double #4C3810;
    position: absolute;
    top: 169px;
    left: 19px;
    width: 244px;
    height: 411px;
    text-align: center;
}

و ده شكل كود div بتعو

كود :

<div class="ad"></div>

و بعد كده هنقوم باصافة الاداه UpdatePanel1 من صندوق الاودات
و نقوم باضافة داخله الادوات الاتية تحت بعض بالترتيب
LinkButton1 و بعد ذلك Image2 و بعد ذلك LinkButton2 و بعد ذلك Image3
و ده علشان نعرض اتنين اعلان فى نفس الوقت لى هو اسم الربط لى هنعل عليه تحويل مع صور للاعلان بس كده
و بعد كده نقوم باضافة الاداه Timer ادخل الاداه UpdatePanel1 و ده علشان نعمل اعلان متحرك كل شوية يتير باعلان جديد ولا ايه
و بعد كده نجيب خصائص الاداه UpdatePanel1 و نختار Triggers
و نقوم بعمل اضافة
اول حاجة قدم ال ControlID هنختار Timer و قدم ال EventName هنختار Tick ونعمل اضافة تانى
اول حاجة قدم ال ControlID هنختار LinkButton1 و قدم ال EventName هنختار Clickونعمل اضافة تانى
اول حاجة قدم ال ControlID هنختار LinkButton2 و قدم ال EventName هنختار Clickونعمل اضافة تانى
و بعد كده نضغط عالموفق
طبع شرح الكلام لى حصل ده كلو هو ان الاداه تقوم UpdatePanel1 باعادة تحميل جزء من البيانات من اسيرفر بدون اعادة تحميل الموقع كامل و ده بيوفر وقت و تحميل عالسيرفر و فى نفس الوقت بيقل سحب سرعة الانترنت للتحميل
و بعد كده هنعمل متيغير جديد اسمو con ادخل ملق التنسيق فى الجانب الايمين للصفحة علشان تعرض البيانات و ده الكود و لا دعى للشرح مره اخرى

كود :

.con
    {
        position:absolute;
    top: 172px;
    left: 274px;
    width: 717px;
    height: 456px;
}

وده شكل ال div

كود :

<div class="con">  </div>

و نقوم باضافة الاداه UpdatePanel2 ادخل المربع الجديد و نقوم باضافة الاداوت التالية ادخلها
Label1 و Label2 و Label3 و Image4
و ده الكود كامل aspx

كود :

<div class="con">
      <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
        <asp:Label ID="Label1" runat="server" CssClass="text" Text="Label"></asp:Label>
        <asp:Image ID="Image4" runat="server" BorderStyle="Double" CssClass="img" />
        <asp:Label ID="Label2" runat="server" CssClass="text2" Text="Label"></asp:Label>
        <asp:Label ID="Label3" runat="server" CssClass="text3" style="bottom: 55px"
            Text="Label"></asp:Label>
            </ContentTemplate>
          
        </asp:UpdatePanel>
    </div>

و بالطبع عايز احط كل ال Label فى الجاني اليمين ازاى ما فى الصور الاول فوق خالص و مربع الصور فى الجانب اليسار من الصحفة
و هيكون ده شكل كود ملق التنسيق

كود :

.text
{
  
    position: absolute;
    top: 11px;
    left: 310px;
    height: 26px;
    width: 396px;
    text-align: center;
    font-size: large;
    font-weight: bold;
    background-color: #000000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    color: #FFFFFF;
    
}
.text2
{
    position: absolute;
    top: 54px;
    left: 313px;
    width: 391px;
    height: 222px;
    text-align: right;
    font-weight: normal;
    font-size: large;
    background-color: #000000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    color: #FFFFFF;
}
.text3
{
    position: absolute;
    top: 286px;
    left: 23px;
    width: 681px;
    text-align: right;
    font-weight: normal;
    font-size: large;
        background-color: #000000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    color: #FFFFFF;
}

و بعد يكون جز الموقع بتع التصميم صفحة aspx و ملف التنسيق css الحمد الله خلاص
و ده الكود عامل لملف التنسيق css

كود :

body
{
    background-image: url('../img/back.png');
    background-repeat: no-repeat;
}
.rtop
{
    width: 311px;
    height: 90px;
    background-color: #0A0A0A;
        position: absolute;
         filter: alpha(opacity=90);
    opacity: 0.9;
    top: 36px;
    left: 646px;
    float:right;
    margin-left:50px;
     text-align: center;
}
.ltop
{
    width: 677px;
    height: 90px;
    background-color: #333333;
    position: absolute;
     top: 36px;
    left: 2px;
   filter: alpha(opacity=60);
    opacity: 0.6;
    float:left;
    margin-left:20px;
     }
     .ad
{
    border: 1px double #4C3810;
    position: absolute;
    top: 169px;
    left: 19px;
    width: 244px;
    height: 411px;
    text-align: center;
}
.ddsmoothmenu {
    z-index: 100;
    font: bold 12px Verdana;
    }
    .con
    {
        position:absolute;
    top: 172px;
    left: 274px;
    width: 717px;
    height: 456px;
}
.img
{
    position:absolute;
    top: 5px;
    left: 29px;
    width: 269px;
    height: 269px;
}
.text
{
  
    position: absolute;
    top: 11px;
    left: 310px;
    height: 26px;
    width: 396px;
    text-align: center;
    font-size: large;
    font-weight: bold;
    background-color: #000000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    color: #FFFFFF;
    
}
.text2
{
    position: absolute;
    top: 54px;
    left: 313px;
    width: 391px;
    height: 222px;
    text-align: right;
    font-weight: normal;
    font-size: large;
    background-color: #000000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    color: #FFFFFF;
}
.text3
{
    position: absolute;
    top: 286px;
    left: 23px;
    width: 681px;
    text-align: right;
    font-weight: normal;
    font-size: large;
        background-color: #000000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    color: #FFFFFF;
}

وده الكود الكامل لملف aspx

كود :

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="WebApplication_Senbisi._default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .mune
        {
            text-align: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" title="شركة السنبسى للتجارة و الخدمات الصناعية">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div></div>
      <div class="ltop">
          <asp:Menu ID="Menu1" runat="server" CssClass="ddsmoothmenu" Font-Bold="True"
              Font-Italic="False" Font-Size="Medium" ForeColor="White" Height="87px"
              Orientation="Horizontal" RenderingMode="Table" Width="673px">
              <DynamicHoverStyle BackColor="Black" BorderColor="Black" />
              <DynamicMenuItemStyle BackColor="Black" BorderColor="Black" Font-Bold="True"
                  Font-Size="Large" />
              <DynamicMenuStyle BackColor="Black" BorderColor="Black"
                  HorizontalPadding="40px" />
              <StaticMenuStyle BackColor="Black" />
          </asp:Menu>
    </div>
  <div class="rtop">
      <asp:Image ID="Image1" runat="server" ImageUrl="~/img/nameco.png" />
    </div>
    <div class="ad">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" Font-Bold="True"
                    Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                    Font-Underline="False" style="color: #FFFFFF">LinkButton</asp:LinkButton>
                <br />
                <br />
                <asp:Timer ID="Timer1" runat="server" Interval="8888">
                </asp:Timer>
                <asp:Image ID="Image2" runat="server" Height="130px" Width="143px" />
                <br />
                <br />
                <asp:LinkButton ID="LinkButton2" runat="server" Font-Bold="True"
                    Font-Strikeout="False" Font-Underline="False" style="color: #FFFFFF"
                    Font-Italic="False">LinkButton</asp:LinkButton>
                <br />
                <br />
                <asp:Image ID="Image3" runat="server" Height="130px" Width="143px" />
        
    </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                <asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    <div class="con">
      <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
        <asp:Label ID="Label1" runat="server" CssClass="text" Text="Label"></asp:Label>
        <asp:Image ID="Image4" runat="server" BorderStyle="Double" CssClass="img" />
        <asp:Label ID="Label2" runat="server" CssClass="text2" Text="Label"></asp:Label>
        <asp:Label ID="Label3" runat="server" CssClass="text3" style="bottom: 55px"
            Text="Label"></asp:Label>
            </ContentTemplate>
          
        </asp:UpdatePanel>
    </div>
    
    
    </form>
</body>
</html>

يتبــــــــع

سوف ناكمل طريق الربط مع قاعدة بيانات اسكوال

اول حاجة نقوم بعرض صحفة الاكود vb.net
و نقوم بجلب المكتبة Imports System.Data.SqlClient

نقوم بانشاء قاعدة بيانات عبارة عن اتنين جداول
الاول اسمو Home_List
و ده علشان القائمة Menu الرئيسية
و يتكون من
id bigint
Home_List nvarchar(MAX)
و طبع الترقين تلقائى و يكون مفتاح لعدم التكرار
الجدوال التانى اسمو
id bigint
Sub_List nvarchar(MAX)
subject nvarchar(MAX)
Notes nvarchar(MAX)
img nvarchar(MAX)
و هنا لا يكون مفتاح ولا ترقيم
و بعد كده هنفتح الملف Web.config علشان نكت نص الاتصال بقاعدة البياانات و نخلص منو
هنقوم باضافة النص هذا مع نص الاتصال و نحفظ بس كده

كود :

<connectionStrings>
    <add name="ConnectionString" connectionString="نص الاتصال"/>
  </connectionStrings>

و طبع اول حاجة هنعمل هى انشاء Function علشان القائمة Menu

كود :

Function GetMenuData() As DataSet
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString
        Dim con As New SqlConnection(strConnString)
        If ConnectionState.Open Then con.Close()
        con.Open()
        Dim dadCats As New  _
        SqlDataAdapter("SELECT * FROM Home_List ORDER BY id DESC", con)
        Dim dadProducts As New  _
        SqlDataAdapter("SELECT * FROM Sub_List", con)
        Dim dst As New DataSet()
        dadCats.Fill(dst, "Home_List")
        dadProducts.Fill(dst, "Sub_List")
        dst.Relations.Add("Children", _
        dst.Tables("Home_List").Columns("ID"), _
        dst.Tables("Sub_List").Columns("ID"))
        Return dst
    End Function

كود :

Sub PopulateMenu()
        Dim dst As DataSet = GetMenuData()
        For Each masterRow As DataRow In
        dst.Tables("Home_List").Rows
            Dim masterItem As New MenuItem(masterRow("Home_List").ToString())
            Menu1.Items.Add(masterItem)
            For Each childRow As DataRow In
            masterRow.GetChildRows("Children")
                Dim childItem As New MenuItem(childRow("Sub_List").ToString())
                masterItem.ChildItems.Add(childItem)
            Next
        Next
    End Sub

فاكر الكود هى عبارة عن جلب كل البيانات من الجدولين عاساس ID لكل جدوال فيهم و بعد كده نقوم بانشاء مع عرض القوائم الفرعية

و بعد كده هنقوم بجلب الحدث Menu1_MenuItemClick من الادا ه Menu
و كتاب الكود التالى

كود :

Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
        If ConnectionState.Open Then con.Close()
        Dim str As String = "SELECT * from Sub_List WHERE (Sub_List=N'" + Menu1.SelectedItem.Text + "')"
        Dim cmd As SqlCommand = New SqlCommand(str, con)
        cmd.Connection = con
        Label1.Text = ""
        Label2.Text = ""
        Label3.Text = ""
        Image4.ImageUrl = ""
        con.Open()
        Dim drr As SqlDataReader = cmd.ExecuteReader()
        While (drr.Read())
            Label1.Text = drr("Sub_List")
            Label2.Text = drr("subject")
            Label3.Text = drr("Notes")
            Image4.ImageUrl = "~/img/" + drr("img")


        End While
        If ConnectionState.Open Then con.Close()

مهمة هذا الكود هى جلب اسم النص الذى قام المستخدم بالضغط عليه و بعمل بحث عن
و عرض البيانات من الجدوال ادخل Label1 و ال Image4

و بعد ذلك نقوم بجلب الحدث LinkButton1_Click من الاداه LinkButton1

و كتابة الكود التالى

كود :

Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
        If ConnectionState.Open Then con.Close()
        Dim str As String = "SELECT * from Sub_List WHERE (Sub_List=N'" + LinkButton1.Text + "')"
        Dim cmd As SqlCommand = New SqlCommand(str, con)
        cmd.Connection = con
        Label1.Text = ""
        Label2.Text = ""
        Label3.Text = ""
        Image4.ImageUrl = ""
        con.Open()
        Dim drr As SqlDataReader = cmd.ExecuteReader()
        While (drr.Read())
            Label1.Text = drr("Sub_List")
            Label2.Text = drr("subject")
            Label3.Text = drr("Notes")
            Image4.ImageUrl = "~/img/" + drr("img")
        End While
        If ConnectionState.Open Then con.Close()
    End Sub

و مهمة هذا الكود نفس الكود السابق و ال LinkButton2 يقوم بنفس الفعل

كود :

Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
        If ConnectionState.Open Then con.Close()
        Dim str As String = "SELECT * from Sub_List WHERE (Sub_List=N'" + LinkButton2.Text + "')"
        Dim cmd As SqlCommand = New SqlCommand(str, con)
        cmd.Connection = con
        Label1.Text = ""
        Label2.Text = ""
        Label3.Text = ""
        Image4.ImageUrl = ""
        con.Open()
        Dim drr As SqlDataReader = cmd.ExecuteReader()
        While (drr.Read())
            Label1.Text = drr("Sub_List")
            Label2.Text = drr("subject")
            Label3.Text = drr("Notes")
            Image4.ImageUrl = "~/img/" + drr("img")
        End While
        If ConnectionState.Open Then con.Close()

مهمة هذا الكود نفس الكود السابق
نجبى بقى للكود التيمر و هو

كود :

Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
        If ConnectionState.Open Then con.Close()
        Dim str As String = "SELECT * from Sub_List ORDER BY NEWID()"
        Dim cmd As SqlCommand = New SqlCommand(str, con)
        cmd.Connection = con
        con.Open()
        Dim drr As SqlDataReader = cmd.ExecuteReader()
        While (drr.Read())
            LinkButton1.Text = ""
            Image2.ImageUrl = ""
            Image2.ImageUrl = "~/img/" + drr("img")
            LinkButton1.Text = drr("Sub_List")
        End While
        If ConnectionState.Open Then con.Close()
        Dim strr As String = "SELECT * from Sub_List WHERE (Sub_List <> '" & LinkButton1.Text.ToString & "')"
        Dim cmdd As SqlCommand = New SqlCommand(strr, con)
        cmdd.Connection = con
        con.Open()
        Dim drrr As SqlDataReader = cmd.ExecuteReader()
        While (drrr.Read())
            LinkButton2.Text = ""
            Image3.ImageUrl = ""
            Image3.ImageUrl = "~/img/" + drrr("img")
            LinkButton2.Text = drrr("Sub_List")
        End While
        If ConnectionState.Open Then con.Close()

مهمة هذا الكود ان يقوم بعمل بيانات جديد كل فترة زمانية معية ادخل ال
LinkButton1 و LinkButton2 بشرط ان قوم فى الاول بعرض بيانات بطريقة عشوائى ادخل ال LinkButton1 و بعد كده اعمل نفس الاستعلام للاده LinkButton2 مع اختلف بيسط و هو ان النائج لا يساوى LinkButton1
و نجبى بقى للكود الاهم لى هيشغل كل الاكود دى و هو كود التحميل
Page_Load

كود :

If Not IsPostBack Then
            PopulateMenu()
            LinkButton1.Text = ""
            LinkButton2.Text = ""
            Label1.Text = ""
            Label2.Text = ""
            Label3.Text = ""
            Image4.ImageUrl = ""
            Me.Title = "شركة السنبسى للتجارة و الخدمات الصناعية".ToString
            Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
            If ConnectionState.Open Then con.Close()
            Dim str As String = "SELECT * from Sub_List WHERE (Sub_List=N'الرئيسية')"
            Dim cmd As SqlCommand = New SqlCommand(str, con)
            cmd.Connection = con
            Label1.Text = ""
            Label2.Text = ""
            Label3.Text = ""
            Image4.ImageUrl = ""
            con.Open()
            Dim drr As SqlDataReader = cmd.ExecuteReader()
            While (drr.Read())
                Label1.Text = drr("Sub_List")
                Label2.Text = drr("subject")
                Label3.Text = drr("Notes")
                Image4.ImageUrl = "~/img/" + drr("img")
            End While
            If ConnectionState.Open Then con.Close()
        End If

مهمة هذا الكود هو تشغيل الكود الخاص با قائمة و عرض اسم الموقع او الشركة
مع عمل استعلام الاول عند فتح الموقع و و عرض الرئيسية للموقع من قاعدة البيانات
و كده شرح تصميم موقع انتهى و الحمد الله

يا رب اكون قدرت اشرح بطريقة سهل و تكونى فكرتى وصلت للناس