suryamsj
Mode

Blog

Membuat CRUD Dengan C# Winforms

  • 😎 Muhammad Surya J
  • 📅 Sep 14, 2022

Overview

CRUD merupakan singkatan dari CREATE (Menambah data), READ (Membaca, Menampilkan dan Mencari Data), UPDATE (Mengubah data) dan DELETE (Menghapus data) yang dimana CRUD sendiri merupakan operasi dasar dalam mengelola sebuah database menggunakan aplikasi.

Dalam artikel ini, kita akan belajar proses membuat CRUD dengan menggunakan C# Winforms.

Tools

Sebelum kita memulai tutorial ini, pastikan bahwa Anda sudah menginstall :

Getting Started

Kalau sudah menginstall tools-tools diatas, mari kita lanjutkan ke proses selanjutnya.

Pembuatan Database

Database

Buatlah sebuah database dengan nama Kontak. Lalu, buat table baru dengan nama dan ketentuan sebagai berikut :

  • id (INT, AUTOINCREMENT, PRIMARY KEY)
  • nama (varchar 250)
  • no_hp (varchar 15)
  • status (varchar 50)

Winforms Design

New Project

Buatlah sebuah project baru winfroms di visual studio Anda. Dan ketika sudah selesai membuat project baru tersebut, Anda akan melihat sebuah form yang kosong. Disitulah kita bisa mendesain form sesuai dengan yang kita mau. Namun kali ini, saya akan mendesain form dengan ketentuan :

  • 2 Textbox
  • 3 Label
  • 1 Combobox
  • 3 Tombol / Button (Tambah, Ubah dan Hapus)
  • DataGridView
Form

Selain itu, setiap komponen yang kita gunakan memiliki sebuah property sendiri-sendiri. Supaya kita tidak bingung nanti, langkah selsanjutnya adalah mengganti property dari name masing-masing komponen. Tidak semua komponen perlu kita ganti, cukup tombol, textbox, combobox dan datagridview.

Create a Function

Dalam fungsi ini saya akan bagi menjadi tiga tahap supaya Anda tidak bingung. Fungsi ini yang memiliki peran penting di dalam proses CRUD kita kali ini. Untuk tahapannya adalah

  • Membuat koneksi
  • Membuat model
  • Membuat CRUD

Sebelum saya melanjutkan, harap pastikan Anda sudah minginstall sebuah library yang bernama mysql.data yang bisa Anda cari di bagian Nuget Package.

Connection

Silahkan Anda buat file class baru dengan nama Connection, yang isi dari file tersebut adalah sebagai berikut

csharp
/*
* database : Nama database yang sudah dibuat
* uid : Username
* pwd : Password
*/

// ConnectionString, bisa diubah-ubah sesuai dengan database yang dipakai
// Untuk lengkapnya bisa kesini https://www.connectionstrings.com/
string ConnectionString = "server=localhost;database=kontak;uid=root;pwd='';";
MySqlConnection con;

// Untuk membuka koneksi
public void OpenConection()
{
    con = new MySqlConnection(ConnectionString);
    con.Open();
}

// Untuk menutup koneksi setelah melakukan aktifitas terhadap database
public void CloseConnection()
{
    con.Close();
}

// Untuk eksekusi query INSERT, UPDATE dan DELETE
public void ExecuteQueries(string Query_)
{
    MySqlCommand cmd = new MySqlCommand(Query_, con);
    cmd.ExecuteNonQuery();
}

// Untuk eksekusi query
public MySqlDataReader DataReader(string Query_)
{
    MySqlCommand cmd = new MySqlCommand(Query_, con);
    MySqlDataReader dr = cmd.ExecuteReader();
    return dr;
}

// Untuk eksekusi query SELECT dan menampilkannya ke Datagridview
public object ShowDataInGridView(string Query_)
{
    MySqlDataAdapter dr = new MySqlDataAdapter(Query_, ConnectionString);
    DataSet ds = new DataSet();
    dr.Fill(ds);
    object dataum = ds.Tables[0];
    return dataum;
}

Tambahkan code berikut dibagain atas file

csharp
using System.Data;
using MySql.Data.MySqlClient;

Model

Sama seperti koneksi, silahkan Anda membuat file class baru dengan nama Kontak_M. Untuk sisi dari file tersebut adalah sebagai berikut

csharp
// Field
string nama, no_hp, status;

// Constructor Kosong
public Kontak_M() { }

// Constructor Isi
public Kontak_M(string nama, string no_hp, string status)
{
    this.Nama = nama;
    this.No_hp = no_hp;
    this.Status = status;
}

// Accessor Mutator
public string Nama { get => nama; set => nama = value; }
public string No_hp { get => no_hp; set => no_hp = value; }
public string Status { get => status; set => status = value; }

CRUD

Tahap ini merupakan tahap akhir dari pembuatan fungsi. Sama seperti sebelumnya, silahkan Anda membuat file class baru dengan nama Kontak. Yang file tersebut berisikan code sebagai berikut

csharp
// Memanggil class Connection
Connection connection = new Connection();

// Method Tambah Data
public bool TambahData(Kontak_M kontak)
{
    try
    {
        connection.OpenConection();
        connection.ExecuteQueries("INSERT INTO user (nama, no_hp, status) VALUES ('" kontak.Nama + "', '" 
            + kontak.No_hp + "','" 
            + kontak.Status + "')");
        status = true;
        MessageBox.Show("Tambah Data berhasil dilakukan", InformasiMessageBoxButtons.OK, MessageBoxIcon.Information);
        connection.CloseConnection();
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "Gagal", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
    return status;
}

// Method Ubah Data
public bool UbahData(Kontak_M kontak, string id)
{
    Boolean status = false;
    try
    {
        connection.OpenConection();
        connection.ExecuteQueries("UPDATE user SET nama='" + kontak.Nama + "'," + "no_hp='" + kontak.No_hp + "'," + "status='" + kontak.Status + "' WHERE id='" + id + "'");
        status = true;
        MessageBox.Show("Ubah Data berhasil dilakukan", "Informasi", MessageBoxButtons.OK, MessageBoxIcon.Information);
        connection.CloseConnection();
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "Gagal", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
    return status;
}

// Method Hapus Data
public bool HapusData(string id)
{
    Boolean status = false;
    try
    {
        connection.OpenConection();
        connection.ExecuteQueries("DELETE FROM user WHERE id='" + id + "'");
        status = true;
        MessageBox.Show("Data berhasil dihapus", "Informasi", MessageBoxButtons.OK,MessageBoxIcon.Information);
        connection.CloseConnection();
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "Gagal", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
    return status;
}

Implementation

Pada tahap ini, Anda akan diminta untuk kembali lagi ke form yang sudah Anda buat di tahap Design Winform. Kali ini Anda tidak perlu men-desain winforms lagi, akan tetapi Anda akan diminta untuk menggunakan events yang terdapat pada komponen yang sudah ada di form Anda.

Tahap ini akan saya bagi menjadi beberapa tahapan supaya Anda tidak bingung ketika Anda mencoba untuk mengimplementasikan artikel ini.

Showing Data

Pada tahap pertama Anda akan belajar bagaimana menampilkan data dari database kedalam sebuah Datagridview. Tahap ini menggunakan sebuah event _Load, cara untuk membuka event ini Anda cukup double click pada form yang sudah Anda buat sehingga akan membuka event tersebut.

csharp
// Form1 adalah nama Form saya
private void Form1_Load(object sender, EventArgs e)
{
    //Code disini
}

Kira-kira seperti itu nanti code form dengan event _Load. Selanjutnya copy code berikut kedalam event _Load.

csharp
// Memanggil class dan Membuat objek baru
Connection connection = new Connection();
Kontak kontak = new Kontak();
Kontak_M kontak_ = new Kontak_M();

// Menambahkan field id untuk menampung data id pada database
string id;

// Menambahkan item ke combobox, dengan Status sebagai name dari Combobox
// Sesuaikan Status dengan name yang teman-teman ganti
Status.Items.Add("Teman");
Status.Items.Add("Keluarga");
Status.Items.Add("Mantan");
Status.Items.Add("Gebetan");
Status.Items.Add("Pacar");

// Memanggil method ShowData untuk menampilkan data dari database ke Datagridview
ShowData();

Dan tambahkan code berikut ini, diluar event _Load. Sehingga code akan menjadi seperti ini

csharp
private void ShowData()
{
    // DataKontak adalah name dari Datagridview
    // connection adalah nama objek yang kita buat untuk class Connection
    DataKontak.DataSource = connection.ShowDataInGridView("SELECT * FROM user");
}

private void Form1_Load(object sender, EventArgs e) {}

Sampai sini tahap untuk menampilkan data sudah selesai. Ketika Anda menjalankan project, seharusnya data yang berada didalam database sudah muncul (tambah data secara manual terlebih dahulu di proses pembuatan database).

Form Data

Create Data

Tahap selanjutnya adalah menambahkan data lewat form yang sudah Anda buat sebelumnya. Tahap ini memanfaatkan event click pada tombol tambah untuk mengirimkan data textbox yang sudah di isi ke database. Untuk bisa membuka event click pada tombol, Anda harus double click pada tombol tambah sehingga akan membuka sebuah event click.

Untuk code dari event click tersebut adalah seperti ini

csharp
// Memanggil field nama, dari class Kontak_.
// Untuk kontak_ adalah nama objek yang kita buat untuk class Kontak_M
kontak_.Nama = Nama.Text;
kontak_.No_hp = NoHp.Text;
kontak_.Status = Status.Text;

// Memanggil method TambahData dan mengirimkan data yang berada pada objek kontak_
// kontak adalah nama objek yang kita buat untuk class Kontak
kontak.TambahData(kontak_);

// Ketika telah selesai input data, form akan kosong
Nama.Text = NoHp.Text = Status.Text = "";

// kita memanggil kembali method ShowData untuk refresh Datagridview
ShowData();

Update Data

Pada tahap ini akan memanfaatkan dua event dari komponen yang berbeda. Event tersebut adalah event click dan event cell_click, event click dari tombol dan event cell_click dari Datagridview. Tahap ini saya bagi menjadi 2 tahap berdasarkan komponen yang akan dipakai pada fungsi update data ini.

Event Cell Click

Untuk membuka event ini, Anda bisa pergi ke tab menu properties pada komponen Datagridview dan silahkan Anda cari logo âš¡ atau logo petir dan pilih cell_click. Anda akan membuka event tersebut, dan copy code berikut kedalam event cell_click tersebut.

csharp
// Ketika cell di click, data yang berada pada cell akan tampil ke textbox dan combobox
id = DataKontak.Rows[e.RowIndex].Cells[0].Value.ToString();
Nama.Text = DataKontak.Rows[e.RowIndex].Cells[1].Value.ToString();
NoHp.Text = DataKontak.Rows[e.RowIndex].Cells[2].Value.ToString();
Status.SelectedItem = DataKontak.Rows[e.RowIndex].Cells[3].Value.ToString();
Event Click

Untuk event ini, sama seperti event click pada fungsi tambah data namun dengan tombol yang berbeda. Event ini menggunakan tombol Update yang sudah Anda buat sebelumnya dan copy code berikut kedalam event click pada tombol update. Event ini aktif ketika Anda menjalankan projectnya dan klik slah satu data cell untuk mendapatkan data.

csharp
// Memanggil field nama, dari class Kontak_.
// Untuk kontak_ adalah nama objek yang kita buat untuk class Kontak_M
kontak_.Nama = Nama.Text;
kontak_.No_hp = NoHp.Text;
kontak_.Status = Status.Text;

// Memanggil method Ubah dan mengirimkan data yang berada pada objek kontak_ dan id
// kontak adalah nama objek yang kita buat untuk class Kontak
kontak.UbahData(kontak_,id);

// Ketika telah selesai ubah data,form akan kosong
Nama.Text = NoHp.Text = Status.Text = "";

// kita memanggil kembali method ShowData untuk refresh Datagridview
ShowData();

Delete Data

Tahap ini merupakan tahap terakhir yang dimana tahap ini berfungsi untuk menghapus data. Tahap ini sebenernya menggunakan dua event namun perlakuannya berbeda. Event tersebut merupakan event cell click pada Datagridview dan click pada tombol hapus, namun perlu Anda ketahui untuk dua event tersebut dijalankan pada mode yang berbeda. Mungkin Anda sedikit bingung dengan penjelasan dari Saya, beikut ini adalah cara kerja dan mode penggunaan dari dua event tersebut.

Event Cell Click

Event ini dijalankan ketika Anda menjalankan aplikasi, jadi untuk memilih data yang ingin dihapus Anda cukup pilih data cell nya saja dan ketika ingin menghapus barulah Anda klik tombol hapus.

Event Click

Baru untuk event ini, Anda harus membuat fungsi hapus agar ketika data cell sudah dipilih dan tombol hapus yang Anda klik data akan terhapus. Berikut kode untuk event click pada tombol hapus.

csharp
// Menampilkan pesan konfirmasi hapus data
DialogResult pesan = MessageBox.Show("Yakin mau hapus data ini?", "Info", MessageBoxButtons.YesNo, MessageBoxIcon.Question);

// Jika tombol yes, di klik maka data akan terhapus
if (pesan == DialogResult.Yes)
{
    // Memanggil method Ubah dan mengirimkan data yang berada pada id
    // kontak adalah nama objek yang kita buat untuk class Kontak
    kontak.HapusData(id);

    // kita memanggil kembali method ShowData untuk refresh Datagridview
    ShowData();
}

Conclusion

Setelah mengikuti tutoria ini saya harap Anda bisa membuat sebuah aplikasi yang lain berdasarkan dari kode yang sudah saya jelaskan pada artikel ini. Untuk Anda yang ingin melihat tutorial ini dengan versi vidio, saya juga sudah membuatkannya silahkan pilih playlist berikut karena saya membuat tutorial ini dalam dua database yang berbeda yaitu Mysql dan SQLite.