Tutorial Menampilkan data di Asp.Net Mvc untuk Pemula

assalamualaikum warahmatullahi wabarakatuh, semoga kita semua selalu dalam lindungan Allah SWT.

Hari ini saya akan melanjutkan Tutorial Membuat Aplikasi Toko online dengan ASP.NET MVC. disesi ini saya akan mengajarkan cara menampilkan data product di page home kita. sebelum saya lanjut menjelaskan tutorial ini, bagi teman-teman yang baru join silahkan selesaikan terlebih dahulu tutorial sebelumnya yang bisa teman-teman baca Tutorial Membuat Database Toko Online Untuk Pemula dan  Tutorial membuat aplikasi toko online Berbasis Website untuk pemula atau jika teman-teman ingin dipandu dengan video silahkan datang ke channel kami Disini.

Mari kita mulai saja tutorial ini, untuk menampilkan data product kita dipage home, komponen yang kita butuhkan adalah Model, Controller, View. Sedikit saya jelaskan tentang 3 komponen tadi

1. Model, Komponen ini berguna untuk menampung data yang akan ditampilkan ke view sesuai dengan apa yang diatur pada controller.
2. Controller, Komponen ini berguna untuk mengatur alur kerja dari reques view ke model, intinya controller adalah jembatan antara Model dan View.
3. View, Komponen ini berguna untuk menampilkan hasil dari Model yang dipanggila dari Controller.

Mari kita mulai Totorial ini. Untuk pertama silahkan buka project yang sudah kita buat sesuai dengan tutorial kita sebelumnya. maka List dari apa yang harus kita lakukan adalah sebagai berikut:

1. Membuat Model
   Klik Kanan Pada pada folder Models klik Add > Class, Ketikan nama class dengan  nama Product.cs setelah itu ketikkan code berikut sesuai dengan Code Dibawah
   
       public class Product
       {
           public int id { get; set; }
           public string Namaproduct { get; set; }
           public string deskripsi { get; set; }
           public string foto { get; set; }
       }
   
   save model ini.
2. Inputkan data Pada model lewat Controller
   Klik HomeController pada folder Controllers, pada action index inputkan data berikut
   
   public ActionResult Index()
           {
               List<Product> products = new List<Product>();
               products.Add(new Product {
                   id = 1,
                   Namaproduct = "Handphone Samsung",
                   deskripsi = "deskripsi ini hanya untuk
                                       percobaan bahwa data sudah
                                       bisa ditampilkan   ke page home toko online",
                   foto = "../Images/fotosamsung.jpg"
               });
               products.Add(new Product {
                   id = 2,
                   Namaproduct = "Handphone Oppo",
                   deskripsi = "deskripsi ini hanya untuk
                                       percobaan bahwa data sudah
                                       bisa ditampilkan ke page home toko online",
                   foto = "../Images/fotooppo.jpg"
               });
               products.Add(new Product
               {
                   id = 3,
                   Namaproduct = "Handphone Apple",
                   deskripsi = "deskripsi ini hanya untuk
                                       percobaan bahwa data sudah
                                       bisa ditampilkan ke page home toko online",
                   foto = "../Images/fotoapple.jpg"
               });
               products.Add(new Product
               {
                   id = 4,
                   Namaproduct = "Handphone Xiaomi",
                   deskripsi = "deskripsi ini hanya untuk
                                       percobaan bahwa data sudah
                                       bisa ditampilkan ke page home toko online",
                   foto = "../Images/fotoxiaomi.jpg"
               });
               products.Add(new Product
               {
                   id = 5,
                   Namaproduct = "Handphone Huawei",
                   deskripsi = "deskripsi ini hanya untuk
                                       percobaan bahwa data sudah
                                       bisa ditampilkan ke page home toko online",
                   foto = "../Images/fotohuawei.jpg"
               });
               products.Add(new Product
               {
                   id = 6,
                   Namaproduct = "Handphone Vivo",
                   deskripsi = "deskripsi ini hanya untuk
                                       percobaan bahwa data sudah
                                       bisa ditampilkan ke page home toko online",
                   foto = "../Images/fotovivo.jpg"
               });
               return View(products);
           }
3. Buat folder Images dengan cara klik kanan Pada nama project kita add > New Folder,
4. cari 6 foto dan berikan nama sesuai nama foto tersebetu sesuai dengan code yang ada diatas pada colom foto.
5. EditView
   Klik kanan pada action index di HomeController dan klik go to view, setelah view terbuka copykan script dibawah ini pada view kita
   
   @model IEnumerable<Belajarmembuattokoonline.Models.Product>
   @{
       ViewBag.Title = "Index";
       Layout = "~/Views/Shared/_Master.cshtml";
   }
   
   <div class="row">
       @foreach (var data in Model)
       {
           <div class="col-lg-4 col-sm-6 portfolio-item">
               <div class="card h-100">
                   <a href="#"><img class="card-img-top" src="@data.foto" alt=""></a>
                   <div class="card-body">
                       <h4 class="card-title">
                           <a href="#">@data.Namaproduct</a>
                       </h4>
                       <p class="card-text">
                           @data.deskripsi
                       </p>
                   </div>
               </div>
           </div>
       }
   </div>
   
   jalankan aplikasi kita, jika teman-teman menjalankan tutorial ini dengan benar maka tampilan aplikasi kita akan seperti gambar dibawah ini.

Jika teman-teman ingin lebih jelas silahkan lihat video dibawah ini
jika memang article dan videonya memberikan nilai positive dan ilmu buat teman-teman jangan lupa subscribe ya