ASP.NET MVC 5: Prepare Model for Data Access Layer | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

ASP.NET MVC 5: Prepare Model for Data Access Layer

Feb 22, 2016 by     17 Comments    Posted under: I am Software Developer

Komponen pertama dari framework MVC adalah Model.  Posting berikut ini menjelaskan bagaimana menyiapkan model sehingga nanti dapat digunakan oleh komponen MVC lainnya yaitu komponen Viewer dan Controller.  Sebagai contoh kasus adalah membuat aplikasi untuk mengelola pegawai. Model yang akan dibuat bertujuan atau berfungsi sebagai Data Access Layer yang secara sederhana mempunyai artinya sebagai model untuk mengakses database dan melakukan operasi pada data yang ada pada tabel-tabel di dalamnya.  Operasi yang umum dilakukan adalah CRUD, create-retrieve-update-delete.

 

{Menyiapkan Database & Table}

Untuk membuat aplikasi untuk mengelola pegawai, maka diperlukan database yang akan menyimpan data. Data yang akan dikelola pada aplikasi ini adalah divisi dan pegawai, sehingga database harus berisi dua tabel untuk menyimpan kedua data tersebut.

Pada aplikasi ini digunakan database SQL Express Edition, maka mesti dipastikan SQL Express Edition telah diinstall sebelum mengikuti langkah ini.  Dengan menggunakan SQL Express Edition sebagai database yang digunakan pada pembangunan aplikasi ini, maka file database dapat disimpan dalam folder yang ada pada project. Sehingga project dalam dijalankan pada mesin lain yang telah memiliki SQL Express Edition.

Langkah pertama yang dilakukan adalah membuat folder untuk menyimpan file database tersebut. Penamaan folder ini harus mengikuti aturan yang dimiliki oleh ASP.NET. Langkah pertama untuk membuat folder ini adalah klik kanan pada project yang telah dibuat di atas, kemudian pilih Add > Add ASP.NET Folder > App_Data. Folder App_Data adalah folder yang umumnya digunakan untuk menyimpan file data dengan format *.mdf (file SQL Server Express) atau *.xml.

Langkah kedua adalah menambahkan SQL Server Database ke dalam folder App_Data dengan cara klik kanan pada folder App_Data kemudian pilih Add > New Item. Pada window Add New Item pilih Visual C# > Data > SQL Server Database dan pada kolom input Name berikan nilai PegawaiDB.mdf sebagai nama database, kemudian klik tombol Add.

image

Maka dapat dilihat file PegawaiDB.mdf pada Solution Explorer seperti pada gambar di bawah ini.

image

Setelah database dibuat maka langkah selanjutnya adalah membuat tabel. Pada Visual Studio telah dilengkapi fitur sebagai tool pengelolaan database. Maka pada langkah ketiga dimulai dengan mengaktifkan tool tersebut dengan cara mengklik double pada file PegawaiDB.mdf. Jika SQL Server Express maka tool ini dapat dilihat pada area Server Explorer seperti gambar di bawah ini.

image

Untuk menambah tabel pada database PegawaiDB.mdf dapat dilakukan dengan cara klik kanan pada folder Tables kemudian pilih Add New Table, maka akan ditampilkan seperti pada gambar berikut.

image

Buat field-field untuk tabel Divisi seperti pada contoh di atas, kemudian pada area T-SQL ubah nama tabel dengan nama Divisi. Untuk membuat tabel sesuai dengan desain yang telah dibuat, klik tombol Update yang ada pada posisi kiri atas.

Setelah tabel Divisi berhasil dibuat, maka dilanjutkan dengan membuat tabel Pegawai dengan nama field seperti pada gambar di bawah ini.

image

Pada tabel ini perlu dibuat foreign key yang menjadi relasi ke tabel Divisi. Foreign key pada tabel Pegawai adalah DivisiID, untuk membuat foreign key ini dapat dilakukan dengan cara klik kanan pada Foreign Key kemudian pilih Add New Foreign Key kemudian pada T-SQL akan ditambahkan baris baru dengan awalan CONSTRAINT. Ubah baris baru tersebut menjadi seperti pada gambar di atas. Setelah nama tabel pada T-SQL diganti dengan nama Pegawai, klik tombol Update.

Jika proses pembuatan kedua tabel itu sukses akan dapat dilihat tabel Divisi dan Pegawai di dalam database PegawaiDB.mdf.

image

Selanjutnya dapat dilakukan pengisian data awal pada kedua tabel tersebut. Untuk tabel Divisi, pengisian data awal dapat dilakukan dengan klik kanan pada tabel Divisi kemudian pilih Show Table Data.

image

Isi record pada tabel ini dengan nilai-nilai seperti pada gambar di bawah ini. Untuk mengisi data ini dapat dilakuan dengan cara seperti mengisi nilai-nilai dengan menggunakan MS Excel.

image

Dengan cara yang sama, lakukan pengisian data pada tabel Pegawai dengan nilai seperti pada gambar berikut.

image

 

{Jenis Model}

Komponen model dapat dibedakan menjadi 2 jenis, yaitu:

  • Model Data Access Layer, class model yang dibuat dengan menggunakan bantuan tool Entity Framework. Komponen model ini juga akan berfungsi sebagai Data Access Layer, yang berisi method-method untuk memudahkan dalam melakukan operasi database seperti melakukan koneksi dan operasi CRUD (create, retrieve, update, delete).
  • Model ViewModel, class model yang dibuat secara manual, class ini akan dibuat untuk membantu membuat antarmuka sesuai dengan kebutuhan.

 

{Model Data Access Layer}

Pada bagian ini akan ditunjukkan membuat model yang akan berfungsi sebagai Data Access Layer dengan bantuan Entity Framework. Sebagai informasi, Data Access Layer yang dibuat dengan Entity Framework dapat dibedakan menjadi dua konsep, yaitu:

  • Code First, konsep ini dimulai dengan membuat class context dan model terlebih dahulu. Saat aplikasi dijalan pertama kali maka akan secara otomatis akan membuat database dan tabel-tabel sesuai dengan model yang telah dibuat.
  • Database First, konsep ini dimulai dengan membuat database dan tabel-tabel yang diperlukan terlebih dahulu. Kemudian class context dan class model akan dibuat secara otomatis dengan bantuan generator pada Entity Framework.

Pada posting ini akan dibahas pembuatan model dengan konsep yang kedua, dimana telah dibuat database dan tabel-tabel untuk keperluan pembuatan aplikasi pengelolaan pegawai.

Seperti class model yang sebelumnya telah dibuat, class model ini juga harus disimpan pada folder Models. Maka langkah pertama yang dilakukan adalah dengan klik kanan pada folder Models kemudian pilih Add > New Item.

image

Pada window Add New Item, pilih Visual C# > Data > ADO.NET Entity Data Model. Kemudian pada kolom input Name isikan nilai PegawaiModel. Kemudian akan ditampilkan window Entity Data Model Wizard..

image

Karena akan digunakan konsep Database First, maka dipilih EF Designer from database kemudian klik tombol Next.

image

Pada window di atas dapat dipilih PegawaiDB.mdf sebagai database yang akan digunakan sebagai acuan membuat class context dan class model. Pada bagian ini, secara otomatis akan dibuatkan connection string dengan nama PegawaiDBEntities pada Web.Config. Kemudian klik tombol Next.

image

Pilih seluruh tabel dengan cara dicentang, kemudian klik tombol Finish. Jika semua proses yang telah dilakukan di atas berhasil, maka akan dapat dilihat hasilnya seperti gambar di bawah ini.

image

Pada gambar di atas dapat dilihat pada folder Models terdapat file hasil pembuatan secara otomatis yaitu PegawaiModel.edmx. Sedangkan setiap tabel yang telah dipilih akan dibuatkan masing-masing sebuah class model. Untuk tabel Divisi akan dibuat class Divisi yang disimpan pada file Divisi.cs. Sedangkan tabel Pegawai akan dibuatkan class Pegawai yang disimpan pada file Pegawai.cs dengan isi sebagai berikut.

Penggunaan class context dan class model akan dijelaskan pada pembahasan tentang komponen controller dan view pada posting selanjutnya.

 

{Model ViewModel}

Istilah view model diberikan kepada class model yang berfungsi sebagai mengatur tampilkan pada halaman view.

Sebagai contoh untuk data Pegawai, telah dibuat class model Pegawai seperti yang dilihat pada diagram berikut.

image

Dengan property-property tersebut maka akan ditampilkan data seperti tabel berikut ini.

image

Pada data tersebut dapat dilihat terdapat field DivisiID dengan nilai untuk masing-masing record yang berisi nilai berupa angka yang sesuai dengan primary key pada data Divisi.

image

Jika pada aplikasi ditampilkan data pegawai seperti pada gambar di atas, maka informasi yang disampaikan kepada pengguna menjadi kurang lengkap. Akan lebih bagus jika data yang ditampilkan pada halaman aplikasi seperti berikut ini.

image

Untuk menampilkan data seperti itu maka perlu dibuat model yang sesuai antarmuka untuk menampilkan data di atas.

Cara untuk membuat class model ini dapat dimulai dengan klik kanna pada folder Models, kemudian pilih Add > Class. Kemudian pilih Visual C# > Class dan pada kolom input Name isikan nilai PegawaiViewModel.cs. Penambahan kata “ViewModel” pada nama class model sering digunakan untuk menandakan bahwa class tersebut berfungsi sebagai sarana untuk mengirimkan data dan tampilan sesuai dengan keinginan.

image

Berikut ini adalah isi dari file PegawaiViewModel.cs, pada class ini terdapat property dengan nama NamaDivisi yang akan berfungsi untuk menyimpan data nama divisi.

image

Nah sekarang terdapat dua jenis model yang telah dibuat dan siap digunakan oleh komponen View dan Controller.  Pembahasan tentang pemanfaatan model-model tersebut akan dibahas pada posting selanjutnya.

17 Comments + Add Comment

  • gan cara buat metode create gmana y ?? pas baca dr database bsa, cma pas mu create bngung koding nya.. nhun..

  • Pak reza, mau tanya
    kalau membatasi new record…berdasarkan master detail
    saya membuat CRUD master order dan order detail..
    pada order detail saya batasi menggunakan create order detail nya berdasarkan value yang sudah saya siapkan di master detail order..
    misal nya : di master detail saya siapkan jumlah 10, maka pada order detail saya hanya bisa create 10

    Terimakasih

    • untuk kasus itu sepertinya bisa dilakukan pengecekan di sisi peprograman, setiap data itu ditampilkan juga dicek jumlah order detailnya. jika jumlah order detailnya = 10 maka tombol tambah order detail dihilangkan/disembunyikan.

      • Terimakasih atas masukannya Pak Reza
        Apakah pak reza ada sample code untuk kasus seperti ini, mohon pencerahannya pak
        Terimakasih

        • belum ada :)

  • Pak Reza, salah satu akun untuk login di aplikasi ini apa ya ?
    Saya masih benar” awam untuk asp.net dan mvc
    Terima Kasih

    • saya lupa nama user dan passwordnya. biasanya saya pakai user admin, password a

      • Pak Reyza, saya sudah beli ebook ini tetapi ada yang penjelasannya kurang lengkap, di view latihan.cshtml
        saat button batal di klik hanya textbox nama yang isinya ke reset.
        textarea, dropdown, listbox, radiobutton, checkbox isinya tidak terkena reset.
        mungkin ada solusi yang bisa pak reyza berikan agar semua isi field bisa di reset saat di klik batal
        Terima kasih

        • buku yg mysql atau postgresql mas?

          • klu saya pakai databasenya MySQL pak
            ini judul buku yang saya maksud
            “Seri Belajar ASP.NET MVC Untuk Pemula”

          • kalau ASP.NET MVC Untuk Pemula saya menggunakan database SQL Server. Nanti akan saya cek ya kodenya. Atau mungkin mas cek contoh di sini https://github.com/rezafaisal/ASPNETCoreMySQL itu menggunakan database MySQL

          • klu untuk mengikuti ebook ini saya menggunakan sqlserver pak,
            belum saya coba ke mysql

            kendalanya yang saya maksud sih sebenarnya cuma di sini pak
            di view latihan.cshtml
            saat button batal di klik hanya textbox nama yang isinya ke reset.
            textarea, dropdown, listbox, radiobutton, checkbox isinya tidak terkena reset.

          • kalau begitu tinggal bikin saja method action untuk tombol reset, yang tugasnya untuk menghilangkan isi dari textarea dll yg telah diisi sebelumnya.

          • oke terima kasih pak
            selain itu masih ada yang mau saya tanyakan lg pak mulai dari hal 143 dst.
            karna penejelasanya tidak sedetail sebelumnya
            klu pak reyza berkenan saya ingin menanyakan lsng lwt email saja pak
            biar saya bisa kasih liat ss nya jg di bagian yang tidak bisa dalam buku tutorial
            Terima Kasih

          • silakan via email. emailnya ada di buku itu :)

  • Pak Reyza untuk halaman 143 di dalam ebook ini “Seri Belajar ASP.NET MVC Untuk Pemula”
    kurang jelas pak letak yang ada
    saya agak kebingungan bagaimana cara menambahkan script tp saya tidak tau letak
    mohon penjelasannya pak
    Terima Kasih

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: