Menampilkan data pada table menggunakan DataGridView – Visual C++

Posted: April 29, 2012 in Belajar Bahasa Pemrograman, Belajar C++
Tags: , , , , , , , , , , , , , , ,

Menampilkan sebuah data merupakan salah satu fungsi dari sebuah aplikasi. Tampilan data tersebut banyak macamnya, terutama data teks. contohnya saja, menampilkan data mahasiswa pada sebuah tabel. Untuk menampilkan data pada sebuah tabel bisa digunakan berbagai mecam tool, seperti kombinasi label yang disusun pada sebuah tableLayoutEditor ataupun langsung menggunakan tool yang dikhususkan untuk menampilkan data pada sebuah tabel yaitu DataGridView. DataGridView ini bisa digunakan untuk menampilkan data yang berasal dari inputan maupun data yang berasal dari sebuah data base.

Pada postingan kali ini, akan dibahas mengenai penggunaan DataGridView untuk menampilkan data yang dimasukkan oleh pengguna aplikasi. Data tersebut diinputkan melalui beberapa textbox yang kemudian akan ditampilkan kembali pada sebuah tabel yang merupakan DataGridView.

Untuk menampilkan data kedalam bentuk tabel menggunakan dataGridView, kita harus menambahkan dan mengatur kolom yang akan ditampilkan pada dataGridView tersebut. Saat pertama kali kita meletakkan dataGridView di jendela design (form.design), tampilan dataGridView masih polos dan belum terdapat kolom serta barisnya. Agar bisa digunakan kita harus membuat dahulu kolomnya dengan cara menekan tombol panah kecil yang terletak di sebelah kanan atas dataGridView yang telah kita letakkan di form design. Setelah itu akan muncul menu view, lalu pilih “add column”.

Setelah itu akan muncul window add column, yang digunakan untuk menambahkan dan mengatur kolom yang akan kita tambahkan. Pada window tersebut kita diminta memasukkan nama dari kolom dan tampilan nama yang ada di header kolom yang akan kita buat serta tipe kolomnya.

Setelah menambahkan dataGridView dan beberapa tool seperti textbox, label dan button, maka desain tampilan yang dibuat adalah sebagai berikut :

Setelah membuat design tampilan seperti gambar diatas, klik 2 kali pada button1 sehingga tampilan akan berpindah ke tampilan form.cs yang menampilkan jendela dimana kita akan membuat program.

Pada saat berpindah ke jendela program dengan meng-klik 2 kali pada button, kita akan langsung diarahkan pada fungsi button1_Click yang mana fungsi ini akan menangani event button click, yaitu event yang akan dijalankan jika button1 ditekan.

Pada fungsi button1_Click tersebut ketikkan program dibawah ini :

//pencabangan, untuk mengecek isi textBox apakah kosong atau tidak
if(textBox1->Text!="" && textBox2->Text!="" && textBox3->Text!=""){
//menambahkan data kedalam tabel (dataGridView)
dataGridView1->Rows[i]->Cells[0]->Value=j.ToString();
dataGridView1->Rows[i]->Cells[1]->Value=textBox1->Text;
dataGridView1->Rows[i]->Cells[2]->Value=textBox2->Text;
dataGridView1->Rows[i]->Cells[3]->Value=textBox3->Text;

//increment nilai i dan j
i++;
j++;
}
else{
//menampilkan messageBox
MessageBox::Show("Isi textBox terlebih dahulu", "Error");
}

Program tersebut merupakan program yang digunakan untuk mengisi data kedalam baris ke-I dan kolom ke 0, ke 1, ke 2 dan ke 3 yang ada pada dataGridView, dimana i merupakan sebuah variabel global.

Sebelum program dijalankan, terlebih dahulu deklarasikan variabel global i dan j bertipe static integer dengan nilai awal i=0 dan j=1. Nilai i digunakan untuk mengisi data ke row/baris berikutnya, sedangkan j merupakan nilai yang digunakan untuk mengisi kolom “No”.

Kemudian tambahkan sebuah event form_load, dengan cara klik 2 kali pada tampilan form di jendela form.design. pada fungsi form_Load, tambahkan program untuk menginisialisasikan jumlah baris dataGridView/tabel, dengan cara menambahkan program seperti berikut ini :

//mendefinisikan jumlah baris pada tabel (dataGridView)
dataGridView1->RowCount=5;

setelah itu, coba jalankan aplikasi dan silahkan isi textbox kemudian tekan button/tombol simpan data. Setelah penekanan tombol, maka data pada textbox yang telah diisikan tadi akan ditampilkan pada dataGridView.

Contoh hasil output aplikasi :

Silahkan download contoh penggunaan dataGridView disini….

Semoga bermanfaat… :)

About these ads

Terimakasih telah singgah di blog ini. Silahkan berikan komentar, saya membutuhkan kritik, saran serta masukan yang membangun guna perbaikan tulisan pada blog ini kedepannya.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s