Artikel ini menjelaskan cara menggunakan INNER JOIN untuk menggabungkan hasil dari dua tabel di database SQL Server dan menampilkannya dalam tabel HTML5 di dalam formulir web ASP.NET. Selain itu, ini menyentuh pertanyaan tentang penggunaan CSS3 (cascading style sheets) untuk menerapkan gaya ke tabel HTML5 dalam formulir web ASP.NET.
Mari kita mulai.
Membuat Data Dummy
Sebelum meminta database SQL server untuk menampilkan hasil di tabel HTML5, kita perlu memiliki beberapa data di database itu. Jadi, kita harus membuat beberapa data dummy. Di sini, kita akan bekerja dengan database perpustakaan yang berisi dua tabel, Penulis dan Buku .
Penulis dan Buku akan berhubungan sebagai "satu-ke-banyak" - kami berasumsi bahwa satu penulis dapat menulis beberapa buku, tetapi sebuah buku hanya dapat memiliki satu penulis. Tentu saja, pada kenyataannya, satu buku dapat memiliki beberapa penulis bersama, tetapi kami tidak akan membahas kasus ini di sini.
Jalankan script berikut untuk membuat database dummy bernama Library :
CREATE DATABASE LibrarySkrip berikutnya menambahkan Penulis dan Buku tabel ke Perpustakaan basis data. Perhatikan bahwa Buku tabel memiliki kolom AuthorIdF . Kami akan menggunakan kolom ini sebagai kolom kunci asing untuk menyimpan ID Penulis dari Penulis tabel.
USE Library
CREATE TABLE Authors
(
AuthorId INT PRIMARY KEY,
AuthorName VARCHAR (50) NOT NULL,
AuthorGender VARCHAR (50) NOT NULL,
AuthorNationality VARCHAR (50) NOT NULL
)
USE Library
CREATE TABLE Books
(
BookId INT PRIMARY KEY IDENTITY(1,1),
BookName VARCHAR (50) NOT NULL,
BookPrice INT,
AuthorIdF INT,
)
Skrip berikut menambahkan catatan dummy ke dataset kami:
INSERT INTO Authors
VALUES (1, 'Author-XYZ', 'Male', 'UK'),
(2, 'Author-WXY','Female', 'USA'),
(5, 'Author-VWX','Female', 'FRANCE'),
(20, 'Author-UVW','Female', 'USA'),
(25, 'Author-TUV','Male', 'UK')
INSERT INTO Books
VALUES ( 'Book-ABC', 100, 20),
( 'Book-BCD', 200, 20),
( 'Book-CDE', 150, 1),
( 'Book-EFG', 100,1),
( 'Book-FGH', 200, 8),
( 'Book-GHI', 150, 9),
( 'Book-HIJ', 100, 1),
( 'Book-JKL', 200, 10),
('Book-KLM', 150, 8)
Bagaimana SQL Server Pekerjaan Kueri INNER JOIN?
Kueri SQL INNER JOIN mengembalikan baris dari tabel berbeda yang memiliki nilai umum tertentu yang cocok di beberapa kolom tempat kami menerapkan kueri GABUNG. Ini mungkin terdengar rumit tetapi tidak. Anda akan melihatnya sendiri saat mengamati hasil query INNER JOIN.
Selanjutnya, kami akan membuat formulir web ASP.NET yang akan menampilkan hasil kueri gabungan INNER, menggabungkan data dari Penulis dan Buku tabel. Namun, pertama-tama kita harus menulis kueri INNER JOIN dan melihat hasil yang diberikannya.
Jalankan script berikut:
USE Library
SELECT Books.BookName, Books.BookPrice, Authors.AuthorName, Authors.AuthorId
FROM Books
INNER JOIN Authors
ON Books.AuthorIdF = Authors.AuthorId
Skrip ini mengimplementasikan kueri INNER JOIN pada dua kolom:AuthorId kolom dari Penulis tabel dan AuthorIdF kolom dari Buku meja. Ini hasilnya:
Seperti yang Anda lihat, kueri mengembalikan baris tersebut hanya di mana Buku dan Penulis tabel memiliki nilai yang sama. Itu ada di AuthorIdF kolom (Buku tabel) dan Id Penulis kolom (Penulis tabel).
Catatan:Buku asli tabel berisi Id Penulis such seperti 8,9, dan 10. Namun, tidak ada penulis dengan ID seperti itu di Penulis meja. Oleh karena itu, kueri tidak mengembalikan hasil untuk buku yang sesuai.
Demikian pula, Penulis tabel menyertakan ID Penulis seperti 1, 2, dan 25. Namun, ID ini tidak ada di AuthorIdF kolom Buku meja. Jadi, kueri INNER JOIN tidak mengembalikan baris yang sesuai dari Penulis tabel.
Sekarang setelah kita mengklarifikasi apa itu INNER JOIN dan cara kerjanya, mari kita buat aplikasi ASP.NET. Ini akan terhubung ke database SQL Server dan menampilkan tabel HTML5 dengan hasil kueri INNER JOIN kami.
Menampilkan Hasil INNER JOIN pada Tabel HTML5 dengan ASP.NET Webform
Kami akan membuat aplikasi webforms ASP.NET dengan Microsoft Visual Studio IDE.
Buka proyek baru di Visual Studio dan pilih ASP.NET Web Application (.NET Framework) dengan C# templat dari daftar:
Selanjutnya, beri proyek Anda nama khusus dan klik Buat :
Anda akan melihat beberapa opsi untuk Aplikasi Web ASP.NET Anda:
Pilih Kosong dari daftar template dan klik Buat :
Menghubungkan SQL Server dengan Visual Studio
Data dummy yang kita buat sebelumnya disimpan dalam contoh SQL Server. Oleh karena itu, untuk mengeksekusi kueri melalui aplikasi Visual Studio, kita perlu menghubungkan aplikasi tersebut ke instance SQL Server yang menyimpan data dummy.
Untuk melakukannya, klik Penjelajah Server > klik kanan pada Koneksi Data untuk masuk ke menu:
Di Tambahkan Koneksi jendela, isi data yang diperlukan:
- Sumber data – Microsoft SQL Server (SqlClient).
- Nama server – masukkan nama instance SQL Server Anda.
Segera setelah Anda memasukkan nama instance SQL Server yang berisi catatan dummy Library database, database tersebut akan muncul secara otomatis dalam daftar.
Pilih dan klik Uji Koneksi . Jika berhasil, Anda akan melihat Tes koneksi berhasil pesan:
Menambahkan dan Mendesain Formulir Web ASP.NET
Setelah membuat koneksi dengan database SQL Server dari Visual Studio, kita perlu menambahkan formulir web ke aplikasi. Formulir web akan menampilkan hasil kueri INNER JOIN di dalam tabel HTML 5.
Untuk menambahkan formulir web, klik kanan pada nama proyek> Tambah> Item Baru :
Dari daftar item, klik Formulir Web> Tambahkan . Formulir web bernama WebForm1.aspx secara default akan ditambahkan ke aplikasi Anda:
Buka formulir web ASP.NET yang baru saja Anda tambahkan. Gunakan tampilan desain dan seret dan lepas tombol dan placeholder dari Toolbox ke Webform seperti yang ditunjukkan pada tangkapan layar berikut.
Ganti nama teks tombol menjadi Show Records . Saat Anda mengklik tombol, tabel HTML yang berisi hasil kueri INNER JOIN akan ditampilkan di placeholder.
Membuat Tabel HTML dengan Cepat
Klik dua kali tombol yang Anda tambahkan ke formulir Web di langkah sebelumnya. Sebuah C# berkas akan terbuka. Perbarui detail yang diimpor di bagian atas file sehingga cocok dengan skrip berikut dengan tepat :
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
Satu-satunya tombol di formulir web adalah protected void Button1_Click . Saat Anda mengkliknya, pengendali acara akan mulai. Di dalam metode untuk event handler, tambahkan logika yang mengambil hasil dari Library tabel Instans SQL Server Anda.
Pertama, buat string koneksi ke instance SQL Server Anda. Selanjutnya, berikan string ke SqlConnection objek kelas yaitu samb. Terakhir, koneksi dibuka melalui metode Open().
Langkah selanjutnya adalah mengeksekusi query INNER JOIN.
Tulis kueri dalam format string dan tetapkan ke variabel "kueri". String dan koneksi kemudian diteruskan ke objek kelas “SqlCommand”.
Untuk membaca catatan, ia memanggil metode ExecuteReader() dari objek SqlCommand. Metode ini mengembalikan objek tipe SqlDataReader. Kita dapat menggunakan objek kelas SqlDataReader untuk mengulang secara iteratif melalui setiap record baris demi baris.
Perhatikan script berikut:
// Create Connection with the SQL Server
String conn_str = @"Data Source=DESKTOP-XXXXXXXXXXXXX;Initial Catalog=Library;Integrated Security=True";
SqlConnection conn = new SqlConnection(conn_str);
conn.Open();
// Query for INNER Join
string query = "SELECT Books.BookName, Books.BookPrice, Authors.AuthorName, Authors.AuthorId" +
" FROM Books" +
" INNER JOIN Authors" +
" ON Books.AuthorIdF = Authors.AuthorId";
// SQL Command Reader for reading results
SqlCommand comm = new SqlCommand(query, conn);
SqlDataReader reader = comm.ExecuteReader();
StringBuilder table = new StringBuilder();
Anda bisa mendapatkan string koneksi dengan mengklik instance SQL Server dan membuka Properties bagian:
Selanjutnya, kita perlu menulis kode HTML untuk tabel HTML5 yang akan berisi hasil query INNER JOIN. Anda dapat menggunakan objek StringBuilder untuk tujuan itu.
Skrip berikut membuat tabel HTML5 dengan 4 kolom:Nama Buku, Harga Buku, Nama Penulis, dan Id Penulis.
// Creating HTML5 Table on the Fly
table.Append("<table border=1><tr>");
table.Append("<th>Book Name</th><th>Book Price</th><th>Author Name</th><th>Author Id</th></tr>");
while (reader.Read())
{
table.Append("<tr>");
table.Append("<td>" + reader.GetString(0) + "</td>");
table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
table.Append("<td>" + reader.GetString(2) + "</td>");
table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
table.Append("</tr>");
}
table.Append("</table");
conn.Close();
// Binding Table with the Placeholder
PlaceHolder1.Controls.Add(new Literal { Text = table.ToString() });
SqlDataReader akan mengembalikan setiap record dari kueri INNER JOIN hingga Read() metode mengembalikan benar .
Selama setiap iterasi dari loop while, setiap nilai kolom data diekstraksi melalui GetString() dan GetInt32() metode tergantung pada jenis kolom.
Terakhir, tabel ditetapkan ke atribut Teks dari objek Literal dari placeholder yang ditambahkan ke formulir.
Kode lengkap untuk event handler Button1 adalah sebagai berikut:
protected void Button1_Click(object sender, EventArgs e)
{
// Create Connection with the SQL Server
String conn_str = @"Data Source=DESKTOP-IIBLKH1\SQLEXPRESS;Initial Catalog=Library;Integrated Security=True";
SqlConnection conn = new SqlConnection(conn_str);
conn.Open();
// Query for Join
string query = "SELECT Books.BookName, Books.BookPrice, Authors.AuthorName, Authors.AuthorId" +
" FROM Books" +
" INNER JOIN Authors" +
" ON Books.AuthorIdF = Authors.AuthorId";
// SQL Command Reader for reading results
SqlCommand comm = new SqlCommand(query, conn);
SqlDataReader reader = comm.ExecuteReader();
StringBuilder table = new StringBuilder();
// Creating HTML5 Table on the Fly
table.Append("<table border=1><tr>");
table.Append("<th>Book Name</th><th>Book Price</th><th>Author Name</th><th>Author Id</th></tr>");
while (reader.Read())
{
table.Append("<tr>");
table.Append("<td>" + reader.GetString(0) + "</td>");
table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
table.Append("<td>" + reader.GetString(2) + "</td>");
table.Append("<td>" + reader.GetInt32(1).ToString() + "</td>");
table.Append("</tr>");
}
table.Append("</table");
conn.Close();
// Binding Table with the Placeholder
PlaceHolder1.Controls.Add(new Literal { Text = table.ToString() });
}
Sekarang, jika Anda menjalankan proyek, Anda akan melihat halaman web dengan satu tombol yang berisi Show Records teks. Setelah mengklik tombol tersebut, kita melihat hasil query INNER JOIN seperti gambar di bawah ini:
Penataan CSS3 dari Tabel HTML5
Meja kami terlihat sedikit kering. Kita dapat meningkatkan tampilan dan gayanya dengan bantuan CSS3 (Cascading Style Sheet 3). Ini berfungsi untuk menambahkan gaya ke objek HTML di halaman web.
Untuk menambahkan file CSS3 di Visual Studio, klik kanan pada nama proyek> Tambah> Item Baru :
Dari daftar item, klik Style Sheet . Ganti nama stylesheet main_stylesheet.css dan klik Tambahkan .
Untuk menghubungkan lembar gaya ke formulir web, seret lembar gaya dan letakkan di head bagian formulir web. Juga, tambahkan class=mybtn ke skrip untuk Button1 . Kelas ini akan memodifikasi gaya tombol dari dalam lembar gaya.
Sekarang, buka lembar gaya dan tambahkan gaya berikut ke lembar gaya Anda.
body {
}
#form1 {
width: 600px;
height: 600px;
background-color: darkkhaki;
margin: auto;
}
.mybtn {
width: 100%;
background-color: cornflowerblue;
font-size: 15px;
}
table {
width: 100%;
border-collapse: collapse;
}
Gaya ini memperbarui lebar, tinggi, warna latar belakang, dan margin. Mereka juga memperbarui lebar tombol sehingga diperluas hingga 100% dari wadah induk. Warna latar belakang tombol juga diperbarui, dan tabel diperluas hingga 100%.
Jika kami menjalankan formulir web lagi, Anda akan melihat halaman web berikut dengan tombol dan gaya formulir yang diperbarui di sana:
Jika Anda mengeklik Tampilkan Catatan , Anda akan melihat hasil kueri INNER JOIN dalam tabel HTML5, ditata melalui skrip CSS3.
Kesimpulan
Artikel tersebut mengklarifikasi esensi dan tujuan dari kueri SQL Server INNER JOIN. Kami belajar menerapkan kueri ini untuk mendapatkan dan menggabungkan hasil dari tabel berbeda yang memiliki nilai yang sama.
Menggunakan formulir web ASP.NET memungkinkan kami memvisualisasikan hasil kueri, jadi kami belajar membuat aplikasi khusus untuk kebutuhan kami. Terakhir, kami belajar menyesuaikan tampilan hasil dengan bantuan CSS sesuai preferensi kami.
Baca juga
Panduan Utama Anda untuk Bergabung dengan SQL:INNER JOIN – Bagian 1
Dasar-dasar Gabung Dalam SQL Server dengan Contoh
