22 - 23 | View Students Infromation from Database to Datagridview

اولاً : عرض قائمة الطلاب في dgvStudents.

في هذا الكود، يتم جلب بيانات الطلاب من قاعدة بيانات باستخدام استعلام SQL، ثم عرضها في DataGridView. الأدوات الرئيسية التي يتم استخدامها هي SqlConnection للاتصال بقاعدة البيانات، SqlCommand لتنفيذ الاستعلامات، وDataTable لتخزين البيانات قبل عرضها في واجهة المستخدم باستخدام DataGridView.

شرح الكود:

دالة load_st_info_to_dgv تقوم بتحميل بيانات الطلاب من قاعدة البيانات إلى DataGridView في واجهة المستخدم.

١. إنشاء الاتصال بقاعدة البيانات:

يتم إنشاء كائن اتصال SqlConnection باستخدام السلسلة conString، التي تحتوي على تفاصيل الاتصال بقاعدة البيانات.

Dim con As New SqlConnection(conString)

٢. إعداد DataTable:

يتم إنشاء كائن DataTable جديد لتخزين البيانات التي سيتم تحميلها من قاعدة البيانات.

Dim dt As New DataTable
dt.Clear

٣. إعداد وتنفيذ الاستعلام:

يتم استخدام SqlCommand لتنفيذ استعلام SQL على قاعدة البيانات. يقوم الاستعلام بتحديد الأعمدة المطلوبة من العرض View_st_info وترتيبها حسب stage_id.

Using cmd As New SqlCommand("SELECT ID, st_name, stage, stage_group, registration_date, discount, discount_type, study_fee, study_fee_after_discount, notes from View_st_info order by stage_id", con)

CommandTimeout تم تحديده ليكون 420 ثانية (7 دقائق) لانتظار تنفيذ الاستعلام إذا استغرق وقتًا طويلاً.

cmd.CommandType = CommandType.Text
cmd.CommandTimeout = 420

يتم فتح الاتصال بقاعدة البيانات عبر con.Open().
يتم تحميل البيانات من خلال dt.Load(cmd.ExecuteReader())، حيث يتم تنفيذ الاستعلام باستخدام ExecuteReader وتحميل النتائج إلى DataTable.

con.Open()
dt.Load(cmd.ExecuteReader())

٤. التحقق من وجود البيانات:

إذا كانت هناك بيانات في dt.Rows.Count (أي إذا كانت قاعدة البيانات تحتوي على سجلات)، يتم تعيين DataGridView dgv_students كمصدر بيانات DataSource للـ DataTable.

If dt.Rows.Count <> 0 Then
dgv_students.DataSource = dt
End If

٥ .إضافة أعمدة الأزرار (الملف الشخصي ، تعديل، حذف ):

بعد إضافة البيانات إلى DataGridView، يتم إضافة أعمدة جديدة من نوع DataGridViewButtonColumn لعرض الأزرار مثل "الملف الشخصي"، "التعديل"، و**"الحذف"**.
يتم تخصيص النص لكل زر باستخدام خاصية Text. على سبيل المثال، يتم تعيين النص 📝 لزر التعديل.

زر "الملف الشخصي":

يعرض الأيقونة 🙍 لتمثيل الملف الشخصي.
يتم تخصيص العمود ليكون من نوع DataGridViewButtonColumn وتحديد النص والأيقونة.

Dim clmn_profile As New DataGridViewButtonColumn
clmn_profile.Name = "profile"
clmn_profile.Text = "🙍"
clmn_profile.FlatStyle =FlatStyle.Flat               
clmn_profile.UseColumnTextForButtonValue = True           
dgv_students.Columns.Add(clmn_profile)

زر "التعديل":

يعرض الأيقونة 📝 لتمثيل التعديل.

Dim clmn_edit As New DataGridViewButtonColumn
clmn_edit.Name = "edit"
clmn_edit.Text = "📝"
clmn_edit.FlatStyle = FlatStyle.Flat              
clmn_edit.UseColumnTextForButtonValue = True              
dgv_students.Columns.Add(clmn_edit)

زر "الحذف":

يعرض الأيقونة ✘ لتمثيل الحذف.

Dim clmn_delete As New DataGridViewButtonColumn
clmn_delete.Name = "delete"
clmn_delete.Text = "✘"
clmn_delete.FlatStyle = FlatStyle.Flat
clmn_delete.UseColumnTextForButtonValue = True
dgv_students.Columns.Add(clmn_delete)

زر "حذف 1":

يضيف عمود آخر لزر الحذف يستخدم ✘.

Dim clmn_delete1 As New DataGridViewButtonColumn
clmn_delete1.Name = "delete1"
clmn_delete1.Text = "✘"
clmn_delete1.FlatStyle = FlatStyle.Flat
clmn_delete1.UseColumnTextForButtonValue = True              
dgv_students.Columns.Add(clmn_delete1)

٦. إغلاق الاتصال:

بعد الانتهاء من تنفيذ الاستعلام وملء الجدول، يتم إغلاق الاتصال بقاعدة البيانات باستخدام con.Close().

الخلاصة:

تحميل بيانات الطلاب من قاعدة البيانات (من عرض View_st_info)، ثم عرضها في DataGridView مع ترتيب البيانات حسب stage_id.

الكود كاملا داخل دالة - load_st_info_to_dgv

Sub load_st_info_to_dgv()
        Dim con As New SqlConnection(conString)
        Dim dt As New DataTable
        dt.Clear()

        Using cmd As New SqlCommand("SELECT ID, st_name, stage, stage_group, registration_date, discount, discount_type, study_fee, study_fee_after_discount, notes from View_st_info order by stage_id", con)
            cmd.CommandType = CommandType.Text
            cmd.CommandTimeout = 420
            con.Open()
            dt.Load(cmd.ExecuteReader())
            If dt.Rows.Count <> 0 Then
                dgv_students.DataSource = dt

                Dim clmn_profile As New DataGridViewButtonColumn
                clmn_profile.Name = "profile"
                clmn_profile.Text = "🙍"
                clmn_profile.FlatStyle = FlatStyle.Flat
                clmn_profile.UseColumnTextForButtonValue = True
                dgv_students.Columns.Add(clmn_profile)

                Dim clmn_edit As New DataGridViewButtonColumn
                clmn_edit.Name = "edit"
                clmn_edit.Text = "📝"
                clmn_edit.FlatStyle = FlatStyle.Flat
                clmn_edit.UseColumnTextForButtonValue = True
                dgv_students.Columns.Add(clmn_edit)

                Dim clmn_delete As New DataGridViewButtonColumn
                clmn_delete.Name = "delete"
                clmn_delete.Text = "✘"
                clmn_delete.FlatStyle = FlatStyle.Flat
                clmn_delete.UseColumnTextForButtonValue = True
                dgv_students.Columns.Add(clmn_delete)

                Dim clmn_delete1 As New DataGridViewButtonColumn
                clmn_delete1.Name = "delete1"
                clmn_delete1.Text = "✘"
                clmn_delete1.FlatStyle = FlatStyle.Flat
                clmn_delete1.UseColumnTextForButtonValue = True
                dgv_students.Columns.Add(clmn_delete1)

            End If
            con.Close()

        End Using
    End Sub

ثانياً:تنسيق مظهر جدول البيانات في dgvStudents.

الكود يقوم بتنسيق جدول البيانات (DataGridView) من خلال إخفاء عمود "ID"، وتغيير عناوين الأعمدة إلى نصوص باللغة العربية مثل "اسم الطالب" و "الصف". كما يتم تطبيق تنسيق العملة على الأعمدة التي تحتوي على مبالغ مالية، مثل "مبلغ الدراسة" و "مبلغ الدراسة بعد الخصم"، مع تعيين ثقافة العراق (ar-IQ) لعرض الأرقام بشكل مناسب. بالإضافة إلى ذلك، يتم تحديد عرض الأعمدة كنسب مئوية من عرض الجدول.

شرح الكود:

١. إخفاء عمود "ID":

.Columns("ID").Visible = False

هذا السطر يقوم بإخفاء عمود الـ "ID" في الجدول، بحيث لا يظهر للمستخدم.

٢. تغيير عناوين الأعمدة:

.Columns("st_name").HeaderText = "اسم الطالب"
            .Columns("stage").HeaderText = "الصف"
            .Columns("stage_group").HeaderText = "الشعبة"
            .Columns("registration_date").HeaderText = "تأريخ التسجيل"
            .Columns("discount").HeaderText = "الخصم%"
            .Columns("discount_type").HeaderText = "نوع الخصم"

            .Columns("study_fee").HeaderText = "مبلغ الدراسة"
.Columns("study_fee").DefaultCellStyle.FormatProvider = CultureInfo.GetCultureInfo("ar-IQ")

            .Columns("study_fee_after_discount").HeaderText = "مبلغ الدراسة بعد الخصم"
.Columns("study_fee_after_discount").DefaultCellStyle.FormatProvider = CultureInfo.GetCultureInfo("ar-IQ")
            .Columns("notes").HeaderText = "الملاحظات"

هنا، يتم تغيير النصوص التي تظهر كعناوين للأعمدة إلى النصوص المطلوبة باللغة العربية. على سبيل المثال، يتم تغيير العنوان الخاص بعمود "st_name" إلى "اسم الطالب" وهكذا.

٣. تحديد تنسيق الأعمدة المالية:

.Columns("study_fee").DefaultCellStyle.Format = "c0"
.Columns("study_fee_after_discount").DefaultCellStyle.Format = "c0"

يتم تنسيق الأعمدة "study_fee" و "study_fee_after_discount" بحيث تعرض المبالغ المالية بتنسيق العملة (على سبيل المثال، ١٢٣٤٥ د.ع).

٤. تعيين عملة العراق لتنسيق الأرقام:

.Columns("study_fee").DefaultCellStyle.FormatProvider = CultureInfo.GetCultureInfo("ar-IQ")
.Columns("study_fee_after_discount").DefaultCellStyle.FormatProvider = CultureInfo.GetCultureInfo("ar-IQ")

يتم تحديد العملة العراقية "ar-IQ" بحيث يعرض الجدول الأرقام والعملة وفقًا للعملة العراقية.

٥. تحديد عرض الأعمدة:

.Columns("st_name").Width = 13%
            .Columns("stage").Width = 10%
            .Columns("stage_group").Width = 4%
            .Columns("registration_date").Width = 8%
            .Columns("discount").Width = 4%
            .Columns("discount_type").Width = 9%
            .Columns("study_fee").Width = 9%
            .Columns("study_fee_after_discount").Width = 9%
            .Columns("notes").Width = 14%

            .Columns("profile").Width = 4%
            .Columns("edit").Width = 4%
            .Columns("delete").Width = 4%

            .Columns("delete1").Width = 4%

يتم تحديد عرض كل عمود كنسبة مئوية من عرض الجدول الكلي. على سبيل المثال، عمود "st_name" سيأخذ 13% من عرض الجدول.

٦. تغيير ألوان الخلايا في الأعمدة "delete"، "edit"، و "profile"

For rw As Integer = 0 To dgv_students.RowCount - 1

dgv_students.Rows(rw).Cells("delete").Style.ForeColor = Color.Red

dgv_students.Rows(rw).Cells("edit").Style.ForeColor = Color.Orange

dgv_students.Rows(rw).Cells("profile").Style.ForeColor = Color.FromArgb(53, 73, 148)

Next

يتم تخصيص ألوان النصوص داخل الأعمدة "delete" و "edit" و "profile". يتم تعيين:

اللون الأحمر لخلايا العمود "delete".

اللون البرتقالي لخلايا العمود "edit".

اللون الأزرق الداكن لخلايا العمود "profile".

٧. إخفاء عمود "delete1":

.Columns("delete1").Visible = False

يتم إخفاء العمود الذي يحمل اسم "delete1" بحيث لا يظهر في الجدول.

الخلاصة:

العمود "ID" تم إخفاؤه.

عناوين الأعمدة تم تعديلها لتكون باللغة العربية.

تنسيق الأعمدة المالية تم لتعرض الأرقام بتنسيق العملة مع الثقافة العراقية.

عرض الأعمدة تم تحديده كنسب مئوية.

ألوان النصوص تم تخصيصها للأعمدة "delete"، "edit"، و "profile".

إخفاء العمود "delete1" من الجدول.

الكود كاملا داخل دالة - dgv_students_format

Sub dgv_students_format()

        With dgv_students

            .Columns("ID").Visible = False

            .Columns("st_name").HeaderText = "اسم الطالب"

            .Columns("stage").HeaderText = "الصف"

            .Columns("stage_group").HeaderText = "الشعبة"

            .Columns("registration_date").HeaderText = "تأريخ التسجيل"

            .Columns("discount").HeaderText = "الخصم%"

            .Columns("discount_type").HeaderText = "نوع الخصم"

            .Columns("study_fee").HeaderText = "مبلغ الدراسة"

            .Columns("study_fee").DefaultCellStyle.Format = "c0"

            .Columns("study_fee").DefaultCellStyle.FormatProvider = CultureInfo.GetCultureInfo("ar-IQ")

           .Columns("study_fee_after_discount").HeaderText = "مبلغ الدراسة بعد الخصم"

            .Columns("study_fee_after_discount").DefaultCellStyle.Format = "c0"

            .Columns("study_fee_after_discount").DefaultCellStyle.FormatProvider = CultureInfo.GetCultureInfo("ar-IQ")

            .Columns("notes").HeaderText = "الملاحظات"

            .Columns("profile").HeaderText = "ملف الطالب"

            .Columns("edit").HeaderText = "تعديل"

            .Columns("delete").HeaderText = "حذف"

            .Columns("st_name").Width = 13%

            .Columns("stage").Width = 10%

            .Columns("stage_group").Width = 4%

            .Columns("registration_date").Width = 8%

            .Columns("discount").Width = 4%

            .Columns("discount_type").Width = 9%

            .Columns("study_fee").Width = 9%

            .Columns("study_fee_after_discount").Width = 9%

            .Columns("notes").Width = 14%

            .Columns("profile").Width = 4%

            .Columns("edit").Width = 4%

            .Columns("delete").Width = 4%

            .Columns("delete1").Width = 4%

            For rw As Integer = 0 To dgv_students.RowCount - 1

                dgv_students.Rows(rw).Cells("delete").Style.ForeColor = Color.Red

                dgv_students.Rows(rw).Cells("edit").Style.ForeColor = Color.Orange

                dgv_students.Rows(rw).Cells("profile").Style.ForeColor = Color.FromArgb(53, 73, 148)

            Next

            .Columns("delete1").Visible = False

        End With

    End Sub

ملاحضة: يتم استدعاء الدالتين ( dgv_students_format و load_st_info_to_dgv) داخل حدث Load لنموذج frm_student_list. عندما يتم تحميل النموذج، سيتم تنفيذ الكود داخل هذا الحدث.

الكود داخل حدث frm_student_list

Private Sub frm_student_list_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Try
            load_st_info_to_dgv()
            dgv_students_format()
        Catch ex As Exception
        End Try
    End Sub

إذا كان لديك أي أسئلة أخرى أو تحتاج إلى مزيد من التوضيح، فلا تتردد في طرحها!

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

للتواصل https://www.facebook.com/Info.AliAlhadithy

بحث هذه المدونة الإلكترونية

FreeCodeLesson