Futorial

Input data lewat Web Site, InfoPath, Excel

Zaman sekarang udah canggih yah… Pusat data (baca: database) cukup satu, supaya data utuh, terorganisir, mudah dijaga, dan lain sebagainya. Tapi karena kecanggihan teknologi informasi, yang namanya mengakses data (retrieve, insert, edit, delete) bisa melalui berbagai cara (dan berbagai user interface tentunya). Bisa lewat web site, bisa lewat desktop application, bisa lewat SMS, daaaaaan lain sebagainya.

Nah, di Futorial kali ini, saya akan menunjukkan step-by-step untuk membuat tiga cara meng-input data ke satu database yang sama. Secara garis besar, kita akan membuat sebuah tabel di database, kemudian kita buat website dan web service, kemudian kita buat InfoPath Form, baru setelah itu kita buat Excel Workbook. Web service yang akan kita buat sebenarnya hanya pilihan saja, yaitu baik melalui InfoPath maupun Excel, nantinya akan memanggil fungsi di web service untuk input data. Sebenarnya bisa saja dari InfoPath atau Excel langsung tembak ke database. Namun alangkah baiknya jika ada “penengah” antara User Interface dengan database, salah satunya melalui Web Service.

Oke, tanpa banyak basa-basi, kita langsung saja.

Langkah 0 : Membuat database di SQL Server 2005 Express Edition

Di SQL Server Management Studio, expand database engine, klik kanan Databases, kemudian pilih New Database…

Misalkan kita beri nama SatuData, kemudian klik tombol OK.

Expand Databases, expand database SatuData. Klik kanan Tables, pilih New Table…

Berikut adalah spesifikasi untuk kolom-kolomnya:

Agar nilai kolom ID auto-increment, maka set properti IsIdentity menjadi Yes. Caranya, klik kiri kolom ID, kemudian di window Column Properties (ada di bagian bawah), expand pilihan Identity Specification. Ubah properti (Is Identity) menjadi Yes.

Simpan tabel ini sebagai tabel Products. Beginilah tampilan tabel Products di SQL Server Management Studio.

Nah, urusan bikin database sudah selesai sampai sini.

Langkah 0.5 : Membuat Blank Solution

Untuk keperluan proyek kecil-kecilan kita, kita buat sebuah blank Solution yang nantinya akan ada tiga buah project.

Buka Visual Studio, kemudian pilih File > New > Project…

Setelah klik OK, nanti di window Solution Explorer (biasanya ada di kanan, short-cut nya Ctrl+Alt+L) akan ada sebuah Solution tanpa ada project apapun.

Dalam solution ini, kita butuh koneksi ke database yang telah kita buat pada langkah sebelumnya. Caranya, pada window Server Explorer (Ctrl+Alt+S), klik icon . Akan muncul window Add Connection. Isi server name dengan instance database kita (dalam hal ini saya pakai SQL Server Express), dan isi Select or enter a database name dengan SatuData (nama database yang telah kita buat sebelumnya). Klik OK untuk connect.

Kalau berhasil, di window Server Explorer akan muncul database SatuData.

Selanjutnya, kita akan membuat web site sebagai salah satu cara menginput data.

Langkah 1 : Membuat ASP.NET Dynamic Data Web Site

Di window Solution Explorer, klik kanan Solution ‘SatuDataTigaCara’, kemudian pilih Add > New Web Site…

Pilih ASP.NET Dynamic Data Web Site. Pilih C# sebagai Labguage, dan beri nama web site yang akan kita buat ini sebagai WebSiteCaraPertama dengan mengganti path di sebelah kiri tombol Browse…

Setelah itu, klik tombol OK.

Setelah itu, akan muncul web site WebSiteCaraPertama di Solution Explorer. Klik kanan web site tersebut (root-nya yang di-klik kanan), kemudian pilih Add New Item…

Pilih LINQ to SQL Classes sebagai template dan beri nama sebagai SatuData.dbml. Klik Add.

Klik Yes agar file SatuData.dbml ini ditempatkan di folder khusus bernama App_Code.

Secara visual, file SatuData.dbml akan terbagi menjadi dua Pane. Pane yang kiri untuk menempatkan Tables dan Views di database untuk akhirnya akan dibuatkan Class untuk masing-masing Table dan View. Pane yang kanan untuk menempatkan Stored Procedures untuk akhirnya akan dibuatkan Method untuk masing-masing Stored Procedure.

Dari Server Explorer, drag-and-drop tabel Products ke Pane yang kiri. Simpan file ini dengan Ctrl+S atau klik icon .

Buka file Global.asax. Uncomment code pada baris ke 17, dan ganti menjadi seperti berikut:

model.RegisterContext(typeof(SatuDataDataContext), new ContextConfiguration() { ScaffoldAllTables = true });

Klik kanan Default.aspx, kemudian pilih View in Browser. Yup, kita telah selesai membuat web site. di halaman depan web site ini, klik link Products, akan tampil isi tabel Products (yang saat ini tentunya belum ada isinya). Klik link Insert new item untuk mengisi tabel Products. Isi dengan data berikut, kemudian klik tombol Insert.

Kalau berhasil, tabel Products kita sekarang ada satu record.

Dan ini benar-benar ter-insert ke database lho. Coba aja cek lagi ke SQL Server Management Studio kalo nggak percaya.

Nah, cara pertama sudah selesai. Sekarang kita beralih ke cara ke-2. Namun sebelum itu, kita buat sebuah penengah, yaitu si Web Service.

Langkah 1.5 : Membuat Web Service untuk insert new product

Kembali ke Visual Studio. Di window Solution Explorer, klik kanan root website kita, kemudian pilih Add New Item… Pilih Web Service sebagai template. Beri nama InsertNewProductWebService.asmx.

Ganti method HelloWorld menjadi seperti berikut

[WebMethod]
public void InsertNewProduct(string name, decimal price, DateTime productionDate, bool isDiscontinued)
{
    Product produkBaru = new Product();
    produkBaru.Name = name;
    produkBaru.Price = price;
    produkBaru.ProductionDate = productionDate;
    produkBaru.IsDiscontinued = isDiscontinued;

    SatuDataDataContext database = new SatuDataDataContext();
    database.Products.InsertOnSubmit(produkBaru);
    database.SubmitChanges();
}

Sekarang, di window Solution Explorer, klik kiri root web site. Perhatikan window Properties. Ganti nilai pada properti Use dynamic ports menjadi False.

Hal ini dilakukan agar port dari web site ini statis (tidak ganti-ganti), sehingga pemanggil web service ini nggak perlu khawatir akan lokasi web service ini. Kalau dinamis, bisa saja port nya ganti, sehingga begitu ingin memanggil fungsi InsertNewProduct, terjadi error karena ya jelas.. lha wong alamatnya bisa gonta-ganti.

Oke, sekarang kita coba apakah fungsi di web service kita sudah berjalan. Klik kanan InsertNewProductWebService.asmx, kemudian pilih View in Browser. Klik link InsertNewProduct. Isi dengan data berikut, kemudian klik tombol Invoke.

Cek apakah data yang kita kirim barusan telah masuk ke database. Kalau berhasil, pasti masuk.

OK, selanjutnya baru benar-benar langkah ke dua, yaitu melalui InfoPath.

Langkah 2 : Membuat form di InfoPath melalui Visual Studio

Klik kanan solution ‘SatuDataTigaCara’ kita, kemudian pilih New Project. Pilih Office di Project types, dan pilih InfoPath 2007 Form Template sebagai Templates. Beri nama sebagai InfoPathFormTemplateCaraKedua, kemudian klik tombol OK.

Pilih Web Service pada pilihan Based on. Klik OK.

Pilih Submit data kemudian klik Next.

Masukkan lokasi web service yang tadi kita buat (bisa diperoleh dari aksi klik kanan View in Browser file asmx yang tadi). Jangan lupa tambahkan string ?WSDL setelah huruf x pada asmx. Klik Next.

Pilih sebuah fungsi (memang hanya ada satu yang kita buat). Klik Next.

Biarkan nama koneksi sebagai Main submit. Klik Finish.

Setelah project dibuatkan. Pilih menu View > Data Source. Akan muncul window Data Source.

Drag-and-drop grup tns:InsertNewProduct ke area “Drag data fields here”. Pilih Controls in Layout Table.

Ganti tulisan “Click to add a title” menjadi Insert new product. Drag-and-drop sebuah button dari toolbox.

Klik kanan Button tersebut, kemudian pilih Button Properties… Pada window Button Properties, ganti properti Action menjadi Submit kemudian klik tombol OK.

Selesai! Yuk kita coba hasilnya. Di window Solution Explorer, klik kanan proyek InfoPathFormTemplateCaraKedua, kemudian pilih Set as StartUp Project. Setelah itu, tekan Ctrl+F5.

Sebuah form InfoPath akan terbuka. Isi data seperti berikut, kemudian klik tombol Submit.

Pilih Yes pada window Microsoft Office InfoPath Security Notice.

Yuk kita lihat hasilnya.

Nahh, dengan begini, input data lewat InfoPath udah beres. Sekarang mari kita coba pakai Excel.

Langkah 3 : Membuat Excel Workbook melalui Visual Studio

Dengan cara yang nyaris sama dengan cara membuat form InfoPath, kita buat Excel Workbook. Klik kanan Solution ‘SatuDataTigaCara’ kemudian pilih Add > New Project… Pilih Office sebagai Project types dan Excel 2007 Workbook sebagai Templates. Beri nama ExcelWorkbookCaraKetiga kemudian klik tombol OK.

Biarkan nama file Excel sebagai ExcelWorkbookCaraKetiga dan format xlsx. Klik OK.

Nahh.. sekarang Excel ada di dalam Visual Studio. Di Excel ini, kita bisa tambahkan control yang dimiliki oleh Windows Form, sepert TextBox, Button, DateTimePicker, CheckBox, dan lain sebagainya. Sekarang, ubah tampilan isi Excel tersebut menjadi seperti berikut:

Saya telah menambahkan beberapa tulisan dan beberapa control, yaitu

Sebelum otak-atik lebih lanjut, kita add service reference ke Web Service. Caranya, klik kanan project ExcelWorkbookCaraKetiga, kemudian pilih Add Service Reference… Tuliskan alamat web service yang telah kita buat (atau bisa juga melalui tombol Discover), kemudian expand Services hingga menemukan service InsertNewProductWebService. Ubah Namespace menjadi InsertNewProductServiceReference kemudian klik OK.

Kembali ke Excel yang ada di Visual Studio. Double-click buttonSubmit. Kita akan beralih ke “code behind”. Perlu diketahui bahwa dalam kasus ini, kita akan meng-insert sebuah record ke tabel product di mana datanya diisi melalui Excel. Kolom Name didapat melalui sebuah Cell (yaitu C3), kolom Price didapat dari textBoxPrice, kolom ProductionDate didapat dari dateTimePickerProductionDate, kolom IsDiscontinued didapat dari checkBoxDiscontinued.

Ubah isi method buttonSubmit_Click menjadi seperti berikut:

private void buttonSubmit_Click(object sender, EventArgs e)
{
    Excel.Range rangeStart = Application.ActiveCell;
    Excel.Worksheet worksheet = rangeStart.Parent as Excel.Worksheet;

    string name = worksheet.get_Range("C3", "C3").Value2.ToString();
    decimal price = Convert.ToDecimal(textBoxPrice.Text);
    DateTime productionDate = dateTimePickerProductionDate.Value;
    bool isDiscontinued = checkBoxDiscontinued.Checked;

    InsertNewProductServiceReference.InsertNewProductWebServiceSoapClient service = new ExcelWorkbookCaraKetiga.InsertNewProductServiceReference.InsertNewProductWebServiceSoapClient();
    service.InsertNewProduct(name, price, productionDate, isDiscontinued);

    MessageBox.Show("Insert new product succeed");
}

Finish! Untuk mencobanya,pada window Solution Explorer, klik kanan proyek ExcelWorkbookCaraKetiga, kemudian pilih Set as StartUp Project. Setelah itu, tekan Ctrl+F5. Sebuah file Excel akan terbuka. Isi dengan data berikut, kemudian klik tombol Submit.

Sekarang kita lihat hasilnyaaa… Tadaaaaa…. sukses besar!!!

Huuffhhh… panjang juga yah post saya yang satu ini… :D

Selamat mencoba!

Share this post: | | | |