-->

AK Studio

Tutorial Programming Bahasa Indonesia

TUTORIAL CRUD VB.NET Mysql Part#3 : Read Menampilkan data pada Vb.net dan Mysql


selanjutnya pada tutorial part #3 ini kita akan mesuk ke Module Read Pada Serial CRUD Vb.net dengan database Myqsl, kita akan mencoba menampilkan data yang sudah kita input pada form input data di  tutorial part 2 sebelumnya , untuk link part dua dapat di lihat pada link berikut

Tutorial part 2 : Create Input Data pada Vb.net dan Mysq 

jika teman teman menemukan tutorial ini langsung pada part tertentu sebaik nya ikuti tutorial atau langkah dari part pertama sampai dengan selesai.

langsung saja kita buka project sebelumnya, dan pastikan tidak ada eror dan berhasil menambahkan data ke dalam database.

karna kita membuat Input dan display data beda form , kita perlu menambhakan atau membuat sebuah procesudere dalam M_helper dan. memanggil nya dalam form display data.


1.Membuat Fungsi Get data

buka kembali module M_helper dan tambahkan fungsi untuk mengambil data ke dalam database, untuk fungsi nya sperti koding berikut ini:

Procedure / fungsi Get data

  Public Function cm03GetAllDataUser()
      cm01Koneksi()
      pdtResult.Clear()

      cmd = New MySqlCommand("SELECT * FROM USER", conn)
      reader = cmd.ExecuteReader()
      pdtResult.Load(reader)

      conn.Close()
      Return pdtResult
  End Function

Penjelasan:

pada fungsi ini kita membuat procedure yang berupa sebuah function atau fungsi yang menghasilkan sebuah Output berupa Datatabel, pada datatabel ini hasil query get data dari database di tampung dan nanti akan kita gunakan dalam Menampilkan data.

untuk data tabel ini sendiri jika di gambarkan menyerupai atau miroring database kita sebenar nya, tergantung dari query yang kita buat, memiliki column dan Rows, akan tetapi pada databale ini datanya di simpan dan di proses di dalam memory.

2.Memanggil Fungsi Get Data Pada Form Display Data

selanjutnya buka form display data yang sudah kita buat, kita akan mencoba menampilkan data yang sudah kita mabil dari M_helper tadi kedalam Datagridview pada form Display data,

Pada Gridview nya kita akan menambahkan sebuah control checkbox, untuk memilih data, yang nanti kita gunakan pada pungsi hapus, dan pada grid view nya kita akan menapilakn foto dari user yang sudah di simpan dalam folder pacth startup project, yang sudah kita bahas pada part 2.

buka form display data, dan jangan lupa agar koding lebih rapih kita buat region nya untuk mengelopokan koding nya, buat sebuah procedure ini grid seperti berikut ini:

Procedure init Gridview:
jangan lupa panggil fungsi ini di dalam form load pada form display data:
    Private Sub cm01InitColumnGrid()

        ' Menmabahkan Checkbox '
        Dim colCheckBox As New DataGridViewCheckBoxColumn
        colCheckBox.Name = "checked"
        colCheckBox.HeaderText = "#"

        ' Menambahkan Imagecolumn untuk menampilkan photo user'
        Dim ColImage As New DataGridViewImageColumn
        ColImage.Name = "Photo"
        ColImage.HeaderText = "Photo User"

        ' Membuat column Grid Tanpa Melalui proprtis grid nya '
        gvDataUser.Columns.Add(colCheckBox)
        gvDataUser.Columns.Add("id", "ID")
        gvDataUser.Columns.Add("NamaUser", "User")
        gvDataUser.Columns.Add("Tgllahir", "Tgl Lahir")
        gvDataUser.Columns.Add("Alamat", "Alamat")
        gvDataUser.Columns.Add("Nohp", "No HP")
        gvDataUser.Columns.Add("Email", "Email")
        gvDataUser.Columns.Add(ColImage)
        gvDataUser.Columns.Add("JenisKelamin", "J/K")

        ' Untuk Menghilankan Row Kosong di Gridview '
        gvDataUser.AllowUserToAddRows = False
        gvDataUser.Refresh()

    End Sub
Penjelasan:
fungsi init grid ini berfungsi untuk menyeting propertis pada gridview tanpa melalui tab propertis, jadi kita lakukan lewat koding.

pada fungs ini kita mendefinisikan atau membuat coloumnnyang akan ditampikan pada gridview, untuk nama field nya di samakan dengan output dari query , pada query get data kita select * from user , jadi columnya sama seperti column atau field yang ada pada tabel user

Selanjutnya buat fungsi untuk memnaggil procesure yang sudah kita buat dalam module M_helper tadi, dan fungsi ini masih kita simpan di dalam form display data, untuk koding nya sperti berikut ini:

Fungsi Menampilkan data:
 Private Sub cm02TampilDataUser()
    Dim pdtUser As New DataTable
    pdtUser.Clear()

    'Ambil Data USer'
    pdtUser = M_Helper.cm03GetAllDataUser()

    'Variabe Link patch nya'
    Dim prmPATHFolder As String = M_Helper.cm06PatchUploadFoto

    'foto default jiak user tidak meng Upload Photo'
    Dim prmFileName As String

    'Cek Ada Data USer Atau Tidak'
    If pdtUser.Rows.Count > 0 Then

        'Bersihkan data lama ganti dengan data baru'
        gvDataUser.Rows.Clear()

        For i As Integer = 0 To pdtUser.Rows.Count - 1
            'add data kedalam gridview'
            gvDataUser.Rows.Add()
            Dim photoUser As Image

            'isi nama file'
            prmFileName = pdtUser.Rows(i).Item(6)

            'Cek Nama File Photo nya ada Atau tidak'
            If String.IsNullOrEmpty(prmFileName) Then
                prmFileName = "user_default.jpg"
            End If

            'cek Jika File ada Convert Ke byte Array'
            If File.Exists(prmPATHFolder & "\" & prmFileName) Then
                'Buka file sebagai byte array untuk menghindari penguncian'
                Dim imageBytes As Byte() = File.ReadAllBytes(prmPATHFolder & "\" & prmFileName)

                'Muat gambar ke dalam MemoryStream'
                Using ms As New MemoryStream(imageBytes)
                    Dim img As Image = Image.FromStream(ms)
                    photoUser = cm03ResizeImage(img, 45, 45)
                End Using

            End If

            '*********************************************************************************
            'menambahkan Row dan isi cell value berdasarkan hasil data yang di tampilkan'
            'untuk uurutan coulumn nya sesaui dari query select yang di buat di Model helper nya'
            '*********************************************************************************
            gvDataUser.Rows(i).Cells(0).Value = False 'Check'
            gvDataUser.Rows(i).Cells(1).Value = pdtUser.Rows(i).Item(0).ToString 'ID'
            gvDataUser.Rows(i).Cells(2).Value = pdtUser.Rows(i).Item(1).ToString 'Nama User'
            gvDataUser.Rows(i).Cells(3).Value = Format(pdtUser.Rows(i).Item(2), "dd/MM/yyyy")  'Tgl Lahir'
            gvDataUser.Rows(i).Cells(4).Value = pdtUser.Rows(i).Item(3).ToString 'Alamat'
            gvDataUser.Rows(i).Cells(5).Value = pdtUser.Rows(i).Item(4).ToString 'No hp'
            gvDataUser.Rows(i).Cells(6).Value = pdtUser.Rows(i).Item(5).ToString 'Email'
            gvDataUser.Rows(i).Cells(7).Value = photoUser 'Photo'
            gvDataUser.Rows(i).Cells(8).Value = pdtUser.Rows(i).Item(7).ToString 'Jennis Kelamin'

        Next i
    Else
        MsgBox("Tidak Ada Data User yang Di temukan...", MsgBoxStyle.OkOnly + MsgBoxStyle.Critical)
    End If

    'Cara Langsung juga bisa seperti ini'
    'gvDataUser.DataSource = Nothing'
    'gvDataUser.DataSource = pdtUser'

End Sub

Penjelasan:
pada fungsi ini kita menggunakan operator perulangan yaitu for i, yang ada pada vb.net untuk jenis oprator perlungan dapat di lihat pada link berikut ini:


untuk penjelasan nya sudah di bericomment code pada setiap coding nya ,
Line 30: Kita menentukan foto default untuk user jika user tidak menggupload foto saat input data, siapkan gambar default nya dan beri nama "User_default" dengan format gambar Jpg. letakan foto default nya  pada folder path USER_PROFILE:


sesuai kan dengan folder Project sratupt exe dari project nya:saya menyimpan project nya di localdisk D: jadi file pacth nya:

Mode Debug:
D:HelloWorldApp\bin\Debug\net7.0-windows\USER-PROFIL

Mode Realease:
D:HelloWorldApp\bin\Release\net7.0-windows\USER-PROFIL

3. Fungsi Resize Photo User
Pada langkap No 2 di Line 41 : kita menggunakan fungsi rize foto agar ukuran setiap foto user sama saat di tapilkan di dalam grid nya. dan membuat grid lebih rapih. ini hanya fungsi saat di tampilkan saja akan tetapi foto yang di Upload Ukuran nya tidak akan berubah. untuk fungsi Resize fotonya , seperti berikut ini:

Fungsi Resize foro:
fungsi Resize foto kita masih simpan di dalam form display data:
Private Function cm03ResizeImage(ByVal img As Image, ByVal prmLebar As Integer, ByVal prmTinggi As Integer) As Image
        Try
            Dim newImageSize As New Bitmap(prmLebar, prmTinggi)
            Using g As Graphics = Graphics.FromImage(newImageSize)
                g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
                g.DrawImage(img, New Rectangle(0, 0, prmLebar, prmTinggi))
            End Using
            Return newImageSize
        Catch ex As Exception
            MsgBox(ex.ToString)
            Return Nothing
        End Try
    End Function

selanjut nya kita panggil fungsi menampilkan data pada menuitem refresh data yang sudah kita buat, cara nya buka kembali design form display data, dan klik dua kali pad menu refrsh dan tambahkan koding berikut ini:

Memanggil Fungsi display data pada menu Refresh:
Private Sub RefreshToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles RefreshToolStripMenuItem.Click
        cm02TampilDataUser()
End Sub

langkah selanjutnya simpan dan build program nya lalu jalan kan, jika mengikuti step diatas dengan benar maka kita sudah berhasil menapilkan data pada datagridview nya yang sudah kita ambil dari database seperti hasil berikut ini , dan pastikan web server Xampp sudah di nyalakan:

Hasil Runing Program


sampai disini kita telah berhasil menyelesaikan module Read atau menampilkan data pada Vb.net dengan database Mysql

selanjutnya kita akan coba membuat fugsi update data yang nantinya akan di lakukan pada form input data pada tutorial part#4 :


jika ada pertanyaan dan masukan bisa diberikan pada kolom komentar. sekian dan terima kasih

#Happy Coding
Incoming search terms:
  • CRUD Vb.net Database MySQL
  • Koneksi Vb.net MySQL
  • Tutorial CRUD Vb.net dengan MySQL
  • VB.NET MySQL Database Connection
  • Contoh Aplikasi CRUD VB.NET dan MySQL
  • Tutorial Koneksi VB.NET ke MySQL
  • Implementasi CRUD VB.NET Database MySQL
  • Source Code CRUD VB.NET MySQL
  • Panduan CRUD VB.NET dan Database MySQL
  • CRUD VB.NET MySQL Insert Update Delete
  • Upload Photo di Vb.net dan MySQL
  • Upload Photo pada Vb.net
  • Resize Photo Vb.net
  • Menampilkan Photo di Gridview Vb.net
  • Menampilakn Imgae di Gridview Vb.net
  • input Data Beda Form Vb.net
  • Gridview Vb.net
  • Menampilkan Data pada Gridview Vb.net dan MySQL
  • Read Data pada Gridview Vb.net dan MySQL
  • Membuat Checkbox pada Gridview Vb.net

0 Response to "TUTORIAL CRUD VB.NET Mysql Part#3 : Read Menampilkan data pada Vb.net dan Mysql "

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel