ASP.NET Core MVC & MySQL Data Core

Pada posting ini akan diberikan langkah-langkah pembuatan aplikasi web dengan framework ASP.NET Core MVC dengan menggunakan database MySQL.  Sebelumnya telah dibuat beberapa posting tentang ASP.NET Core yang dapat dilihat pada website ini.  Seperti posting sebelumnya, posting ini juga aka menggunakan Visual Studio Code sebagai source code editor.

{Membuat Project}

Langkah pertama adalah membuat ASP.NET Core MVC project kosong.  Maksud pembuatan project kosong ini agar pembaca dapat mengetahui langkah-langkah pembuatan aplikasi web ASP.NET Core MVC langkah demi langkah.

Jalankan Visual Studio Code. Kemudian pilih menu View > Integrated Terminal. Kemudian pada terminal akan dilakukan pembuatan folder untuk menyimpan project.  Pada contoh ini dibuat folder ASPNETCore pada drive D. Kemudian masuk ke folder ASPNETCore tersebut.

01

Kemudian ketikkan perintah berikut pada terminal.

yo aspnet

 

02

Pada menu pilih “Empty Web Application”, kemudian ketikkan nama project yaitu ASPNETCoreMySQL kemudian tekan tombol Enter. Hasilnya dapat dilihat pada gambar di bawah ini.

04

Kemudian pilih menu File > Open Folder pada Visual Studio Code dan pilih folder D:\ASPNETCore\ASPNETCoreMySQL. Akan dapat dilihat ada dua konfirmasi pilih “Yes” dan “Restore”.

05

Dan proses pembuatan project selesai.

{Membuat Table GuestBook}

Sebagai latihan akan dibuat aplikasi web super sangat sederhana (hehe) untuk menampilkan daftar buku tamu dan input data buku tamu.  Untuk itu terlebih dahulu akan dibuat tabel pada database MySQL.  Untuk membuat database dan tabel pada database MySQL dengan menggunakan Visual Studio Code dapat dilihat pada posting berikut http://www.rezafaisal.net/?p=3167.

Sedangkan query SQL yang digunakan untuk membuat tabel guestbook dapat dilihat pada script berikut.

create table guestbook(
  guestbook_id INT NOT NULL AUTO_INCREMENT,
  guest_name VARCHAR(100) NOT NULL,
  guest_email VARCHAR(100) NOT NULL,
  message VARCHAR(256) NOT NULL,
  PRIMARY KEY ( guestbook_id )
);

 

{Modifikasi File project.json}

Tujuan modifikasi file project.json adalah untuk menambahkan library atau paket agar project ini dapat menggunakan framework ASP.NET Core dan menggunakan provider MySQL.

"Microsoft.AspNetCore.Mvc": "1.1.0",
"Microsoft.AspNetCore.StaticFiles": "1.1.0",
"MySql.Data.Core": "7.0.4-IR-191"

 

Baris pertama adalah library untuk implementasi framework ASP.NET Core MVC.  Baris kedua adalah library untuk menangani file statik web seperti file image, file CSS dan file script Javascript.  Sedangkan baris ketiga untuk penggunaan provider MySQL, sehingga dapat digunakan class dan method untuk mengakses database MySQL.

Berikut adalah kode lengkap file project.json.

{
  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.1.0",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Diagnostics": "1.1.0",
    "Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
    "Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
    "Microsoft.Extensions.Logging.Console": "1.1.0",
    "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.1.0",
    "Microsoft.Extensions.Configuration.FileExtensions": "1.1.0",
    "Microsoft.Extensions.Configuration.Json": "1.1.0",
    "Microsoft.Extensions.Configuration.CommandLine": "1.1.0",
    "Microsoft.AspNetCore.Mvc": "1.1.0",
    "Microsoft.AspNetCore.StaticFiles": "1.1.0",
    "MySql.Data.Core": "7.0.4-IR-191"
  },

“tools”: {
“Microsoft.AspNetCore.Server.IISIntegration.Tools”: “1.1.0-preview4-final”
},

“frameworks”: {
“netcoreapp1.1”: {
“imports”: [
“dotnet5.6”,
“portable-net45+win8”
]
}
},

“buildOptions”: {
“emitEntryPoint”: true,
“preserveCompilationContext”: true
},

“runtimeOptions”: {
“configProperties”: {
“System.GC.Server”: true
}
},

“publishOptions”: {
“include”: [
“wwwroot”,
“web.config”
]
},

“scripts”: {
“postpublish”: [ “dotnet publish-iis –publish-folder %publish:OutputPath% –framework %publish:FullTargetFramework%” ]
},

“tooling”: {
“defaultNamespace”: “ASPNETCoreMySQL”
}
}

 

Setelah file project.json disimpan, maka Visual Studio Code akan melakukan proses restore project.

{Membuat File appsettings.json}

File ini dapat digunakan untuk menyimpan nilai-nilai setting yang akan digunakan pada aplikasi.  Pada kasus ini, file ini akan digunakan untuk menyimpan connection string ke database.  Karena file ini belum ada pada project, maka file ini harus dibuat dahulu.  Kemudian digunakan contoh kode di bawah ini sebagai isi file appsettings.json.  Dari file di bawah ini dapat dilihat nama database yang akan digunakan ada elibrary.  Nama database ini dapat diubah sesuai dengan nama database yang digunakan.

{
    "ConnectionStrings":
    {
        "Default": "server=localhost; userid=root; password=rahasia; database=elibrary;SslMode=None"
    }
}

 

{Modifikasi File Startup.cs}

Class Startup.cs merupakan class penting pada project aplikasi web ASP.NET Core.  Class ini dapat digunakan untuk melakukan hal-hal sebelum halaman web yang kita buat dijalankan. Berikut ini adalah isi file class Startup.cs yang telah dimodifikasi.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Configuration;

namespace ASPNETCoreMySQL
{
public class Startup
{
public static string ConnectionString {get; private set;}
public static IConfigurationRoot Configuration { get; set; }

public Startup(IHostingEnvironment env)
{
var builder = new ConfigurationBuilder()
.SetBasePath(env.ContentRootPath)
.AddJsonFile(“appsettings.json”, optional: true, reloadOnChange: true)
.AddEnvironmentVariables();

Configuration = builder.Build();

ConnectionString = Configuration[“ConnectionStrings:Default”];
}

// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole();

if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler(“/Home/Error”);
}

app.UseStaticFiles();

app.UseMvc(routes =>
{
routes.MapRoute(
name: “default”,
template: “{controller=Home}/{action=Index}/{id?}”);
});
}
}
}

 

Untuk implementasi framework ASP.NET Core MVC adalah penambahan services.AddMvc(); pada method ConfigureServices.  Kemudian untuk aturan routing dapat dilihat pada method Configure.  Sedangkan untuk keperluan membaca file konfigurasi pada file appsettings.json dilakukan dua langkah yaitu menambahkan property ConnectionString dan Configuration.  Kemudian menambahkan method Startup yang berisi untuk menentukan nama file konfigurasi yang akan dibaca.  Dilanjutkan dengan mengisi nilai pada property ConnectionString dengan nilai ConnectionString:Default.

{Models}

Langkah selanjutnya adalah membuat folder Models pada project.  Kemudian dibuat class model dengan nama GuestBook.cs dengan isi sebagai berikut.

using System;

namespace ASPNETCoreMySQL.Models
{
public class GuestBook{
public String Email {set; get;}
public String Name {set; get;}
public String Message {set; get;}
}
}

 

Class ini dibuat dengan property sesuai dengan tabel guestbook yang telah dibuat sebelumnya.

{Controllers}

Setelah langkah di atas selesai, dengan membuat folder Controllers.  Kemudian membuat class controller dengan isi sebagai berikut.

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ASPNETCoreMySQL.Models;

using MySql.Data.MySqlClient;

namespace ASPNETCoreMySQL.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public IActionResult Index()
{
IList<GuestBook> items = new List<GuestBook>();

// koneksi database
MySqlConnection conn = new MySqlConnection{
ConnectionString = Startup.ConnectionString
};
conn.Open();

// menyiapkan query
MySqlCommand cmd = new MySqlCommand(“SELECT * FROM guestbook;”, conn);

// membaca data
MySqlDataReader dataReader = cmd.ExecuteReader();
while (dataReader.Read()){
// menyimpan record ke object model
GuestBook item = new GuestBook();
item.Email = Convert.ToString(dataReader[“guest_email”]);
item.Name = Convert.ToString(dataReader[“guest_name”]);
item.Message = Convert.ToString(dataReader[“message”]);

// menyimpan object model ke collection
items.Add(item);
}
dataReader.Close();

return View(items);
}

[HttpGet]
public IActionResult Create(){
return View();
}

[HttpPost]
public IActionResult Create(GuestBook item){
if(ModelState.IsValid){
MySqlConnection conn = new MySqlConnection{
ConnectionString = Startup.ConnectionString
};
conn.Open();

MySqlCommand command = conn.CreateCommand();
command.CommandText = “INSERT INTO guestbook (guest_name, guest_email, message) VALUES (?name, ?email, ?message)”;
command.Parameters.AddWithValue(“?name”, item.Name);
command.Parameters.AddWithValue(“?email”, item.Email);
command.Parameters.AddWithValue(“?message”, item.Message);
command.ExecuteNonQuery();

conn.Close();

return RedirectToAction(“Index”);
}
return View();
}

[HttpGet]
public IActionResult Error()
{
return View();
}
}
}

 

Pada HomeController.cs dapat dilihat bagaimana melakukan operasi data ke database MySQL.  Untuk menggunakan class dan method pada library MySQL.Data.Core maka perlu ditambahkan baris berikut.

using MySql.Data.MySqlClient;

 

Selanjutnya untuk menggunakan object dari class model maka perlu ditambahkan baris berikut.

using ASPNETCoreMySQL.Models;

 

Selanjutnya dapat dilihat bagaimana cara melakukan koneksi dan menampilkan data pada method action Index.  Dan cara mengeksekusi query SQL untuk insert data pada method action Create.

{Views}

Berikutnya adalah membuat komponen view. Langkah pertama adalah membuat folder Views.  Untuk membuat komponen view untuk controller HomeController maka perlu dibuat folder Home di folder Views.  Kemudian akan ditambahkan file Index.cshtml yang akan digunakan oleh method action Index.  Berikut isi dari file Index.cshtml.

@{
    Layout = null;
}

@model IList<ASPNETCoreMySQL.Models.GuestBook>

<html>
<head>
<title>ASP.NET Core MVC – MySQL: GuestBook</title>
</head>

<body>
<h1>Daftar GuestBook</h1>
<div>
<p>@Html.ActionLink(“Tambah data”, “Create”)</p>
<table style=”width:100%; border: solid 1px #000″>
<tr>
<td>Nama</td>
<td>Email</td>
<td>Message</td>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.Name)</td>
<td>@Html.DisplayFor(modelItem => item.Email)</td>
<td>@Html.DisplayFor(modelItem => item.Message)</td>
</tr>
}
</div>
</body>
</html>

 

Sedangkan untuk method action Create akan dibuat file Create.cshtml dengan isi sebagai berikut.

@{
    Layout = null;
}

@model ASPNETCoreMySQL.Models.GuestBook

<html>
<head>
<title>ASP.NET Core MVC – MySQL: GuestBook</title>
</head>

<body>
<h1>Form GuestBook</h1>
<div>
@using (Html.BeginForm())
{
<p>
@Html.LabelFor(m=>m.Name)
@Html.TextBoxFor(m=>m.Name)
</p>
<p>
@Html.LabelFor(m=>m.Email)
@Html.TextBoxFor(m=>m.Email)
</p>
<p>
@Html.LabelFor(m=>m.Message)
@Html.TextBoxFor(m=>m.Message)
</p>
<p>
@ViewBag.GuestBookMessage
</p>
<p>
<input type=”submit” value=”Send” />
</p>
}
</div>
</body>
</html>

 

{Menjalankan Project}

Untuk menjalankan project ini pada Visual Studio Code, klik tombol terdapat method action Index yang akan menampilkan data dari tabel guestbook.

06

Hasilnya dapat dilihat pada gambar di bawah ini.  Gambar di bawah ini adalah view Index.cshtml.

07

Kemudian gambar di bawah ini adalah view Create.cshtml.

08

{Source Code}

Source code lengkap dari posting ini dapat dilihat pada link berikut: https://github.com/rezafaisal/ASPNETCoreMySQL

{Penutup}

Posting di atas tidak menjelaskan detail tentang ASP.NET MVC dan Sintaks Razor yang digunakan. Jika ingin mengenal lebih jauh tentang ASP.NET MVC dan sintaks Razor dapat membaca ebook berikut ini: https://play.google.com/store/books/details/M_Reza_Faisal_Seri_Belajar_ASP_NET_ASP_NET_MVC_Unt?id=4vPzDQAAQBAJ.

Tetapi ebook tersebut bukan tentang ASP.NET Core MVC jadi ada perbedaan dengan bahasan pada posting ini. Untuk pembahasan khusus dan detail tentang ASP.NET Core MVC dan MySQL akan dibahas pada buku ini yang sedang dalam tahap penulisan.

09

5 thoughts on “ASP.NET Core MVC & MySQL Data Core”

    1. untuk yo harus install plugin dulu. tapi kalau sudah pakai asp.net core atau .net core terbaru, sebaiknya tidak menggunakan yo lagi. karena perintah dotnet untuk create project by template sudah lengkap

Leave a Reply to reyzaCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.