ASP.NET MVC 5 - [Part 07] Input Data Kedalam Database

Pada tutorial kali ini kita akan mencoba membuat formulir dan memasukan data kedalam database. Agar kita dapat menjalankan tutorial ini dengan mudah, kita sebaiknya memahami dengan bernar proses bisnis MVC
menggunakan ASP.NET MVC 5 sehingga dalam mencoba tutorial ini anda dapat menajalankan dengan mudah. Namun jika dirasa anda masih belum memahami proses bisnis MVC di ASP.NET MVC 5 maka anda dapat mengulang kembali tutorial-tutorial sebelumnya.

Agar anda mudah menjalankan tutorial ini, anda harus sudah mempunyai RDBMS SQL Server yang sudah terinstall dikomputer anda. anda dapat mengunduhnya langsung disini.  Selain RDBMS SQL Server, anda juga harus menginstall SQL Server Management Studio sebagai client editor untuk meremote database SQL Server dan mengatur managerial dari database yang akan kita buat. Anda dapat mengunduh SQL Server Management Studio disini. Pada contoh-contoh yang ada ditutorial ini, kita akan menggunakan RDBMS SQL Server Express 2014.

Berikut ini langkah-langkah untuk mengmasukan data kedalam database menggunakan ASP.NET MVC 5.

1. Membuat Database dan Tabel.
Sebelum kita memasukan data kedalam database, maka kita harus menyiapkan terlebih dahulu database yang akan kita gunakan.

a.. Buka SQL Server Management Studio 



b. Masuk Ke Server Local. 



Agar kita terhubung dengan database server, maka kita masukan nama Server yang akan kita hubungkan. Pada contoh diatas Server name saya isi (local)\SQLE2014, itu artinya bahwa (local) adalah Nama Server dan nama Instance Database saya adalah SQLE2014. Pada kolom Authentication saya pilih Windows Authentication karena saya menggunakan windows login untuk login ke server database. Jika sudah terisi semua makan kita klik tombol Connect untuk terhubung kedatabase.

c. Membuat Database
Setelah berhasil masuk ke Server Database, maka langkah selanjutnya adalah kita membuat database. Klik kanan pada menu Database, kemudian pilih menu New Database ..



d. Menentukan Nama Database.
Menu New Database akan menampilkan nama database yang kita buat. Pada tutorial ini kita menggunakan nama database Siakad. Klik tombol OK untuk membuat database.



e. Membuat Tabel Baru.
Setelah berhasil membuat database, maka kita expand database Siakad yang sudah kita buat. Klik kanan pada menu Tables dan pilih menu Table untuk membuat tabel yang baru.



f. Tabel Fakultas.
Pada tutorial kali ini kita akan mencoba membuat tabel Fakultas. Berikut ini adalah kolom dan tipe data yang ada ditabel Fakultas. Klik tombol Save untuk menyimpan tabel.



2. Membuat Solution ASP.NET 5 
Setelah kita berhasil membuat database Siakad dan tabel Fakultas, langkah selanjutnya adalah kita akan membuat solution yang baru dengan template ASP.NET MVC 5 dengan nama solution Siakad. Jika anda lupa bagaimana cara membuat solution baru dengan template ASP.NET MVC 5, anda dapat membaca tutorial ini sebelumnya.



3. Membuat Entity Data Model.
Setelah kita berhasil membuat solution dengan nama Siakad, maka langkah selanjutnya adalah membuat Entity Data Model. Entity Data Model adalah salah satu komponent yang disediakan .Net Framework untuk menghubungkan aplikasi dengan database. Agar lebih jelas bagaimana cara menambahkan Entity Data Model anda dapat mengikuti langkah-langkah berikut ini.

a. Menambahkan Entity Data Model ke folder Models.
Untuk menambahkan Entity Data Model, klik kanan pada folder Models, pilih menu Add New Items.



b. Menambahkan SiakadModel.
Pada dialog Add New Item, kita pilih template Data, Kemudian Pilih ADO.NET Entity Data Model. Nama item kita isi dengan SiakadModel. Klik tombol Add untuk ke langkah berikutnya.



Setelah muncul dialog Entity Data Model Wizard, pilih EF Designer Form database, kemudian klik tombol Next.



Kemudian akan muncul dialog Entity Data Model Wizard untuk melilih koneksi. Klik tombol New Connecktion.



Kemudian kita akan masuk ke dialog Connection Properties. Pada dialog Connection Property, kolom Server name kita isi dengan nama server seperti kita connect dengan SQL Server Management Studio yaitu (local)\SQLE2014, Log on to server kita pilih Use Windows Authentication, kemudian kolom Connect to a database kita pilih Siakad. Klik tombol Test Connection untuk memastikan ASP.Net MVC 5 terhubung dengan database. Klik tombol OK untuk menuntup dialog Connection Properti.


Setelah kita menutup dialog Connection Propeties, Kita rubah Save Connection Setting in Web.Config as dengan nama SiakadConnection. Klik tombol Next untuk melanjutkan konfigurasi berikutnya.


Pada kolom Choose Your Database Object and Setting kita pilih tabel Fakultas. Pada gambar berikut ini terlihat banyak tabel yang pada list, hal ini terjadi karena penulis telah membuat database Siakad dengan tabel-tabel lebih dari satu. Pilihan Pluralize of singularize generated object names tidak perlu di check list. Pada kolom Model Namespace kita isi dengan Siakad.Models karena kita akan menyimpan SikadModel kedalam folder Models yang terdapat pada project Siakad. Klik tombol Finish untuk mengakhiri konfigurasi.



Dapat kita lihat pada gambar dibawah ini, sudah terdapat SiakadModel dengan Object Fakultas didalamnya. Sedangkan didalam SiakadModel.tt terdapat Fakultas.cs. Agar lebih jelas anda juga dapat melihat class Fakultas.cs yang digenerate oleh SiakadModel.



Fakultas.cs


Web.Config


Mari lihat References di project Siakad. Terdapat EntityFramework dan EntityFramewrok.SqlServer yang sudah ditambahkan kedalam project Siakad yang sudah kita buat. Secara tidak langsung proses penambahan Entity Data Model pada Project ASP.NET MVC 5 sekaligus menambahkan reference Entity Framework kedalam project kita. Sehinga pada tahap selanjutnya secara tidak langsung nanti kita sudah mempelajari bagaimana cara menggunakan Entity Framework didalam ASP.NET MVC 5.



Langkah terakhir pada tahap ini adalah Rebuild. Langkah ini digunakan untuk mengenali project jika ada penambahan Reference baru. Perlu di ingat, setiap anda melakukan perubahan pada project jangan lupa lakukan Rebuild.


4. Membuat Controller.
Tambahkan controller dengan nama FakultasController. Pada tahap ini kita tidak akan membahas bagaimana cara membuat controller. Untuk membuat Controller pada ASP.NET MVC 5 dapat anda baca kembali disini.



5. Menambahkan Action Index.
Setelah kita berhasil menambahkan FakultasController, mari kita tambahkan Action Index untuk menampilkan data dari database dengan Entity Data Model yang sudah kita buat. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.



6. Menambahkan View Index.
Setelah merubah action Index seperti pada gambar diatas, mari kita tambahkan view Index untuk menampung data yang akan dikirim oleh Action Index. Mari kita tambahkan view Index dengan template List, dan Model class dari Fakultas(Siakad.Models). Kemudian klik tombol Add.


Kemudian kita ubah link untuk Create menjad ke action Add.


7. Menambahkan Action Add.
Pada tutorial sebelumnya kita sudah pernah menabahkan data lewat formulir di ASP.NET MVC. pada tahap ini kita juga akan menambahkan action Add yang digunakan untuk menerima request HTTP Get dan HTTP Post. Action Add kali ini tidak hanya menerika data namun sekaligus akan memasukan data kedalam database. Silahkan tambah Action Add seperti gambar berikut ini.



8. Menambahkan View Add.
Setelah kita menambahkan Action Add, maka selanjutnya adalah kita akan menambahkan view Add. View Add digunakan untuk memasukan data yang berupa formulir, oleh karena itu template view Add adalah Create dan Model class nya adalah Fakultas(Siakad.Models). Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.



Berikut contoh sebagian view Add.cshtml.


9. Running Applikasi.
Setelah selesai menambahkan View Add, maka langkah selanjutnya adalah menjalankan aplikasi lewat web browser. Klik tombol Run untuk menjalankan aplikasi ASP.NET MVC 5 yang sudah anda buat.
Fakultas/Index


Fakultas/Add


Fakultas/Index hasil input.


Check ke database lewat SQL Server Management Studio.


Hasil Query.


Bagimana mudah bukan membuat aplikasi web dengan ASP.NET MVC 5 untuk memasukan data kedalam database SQL Server. Semoga anda dapat mengambil manfaat dari tutorial ini.

Terimakasih telah bersedia membaca tutorial ini, silahkan beri pendapat anda tentang tutorial ini dengan menulis komentar dibawah ini. ^_^