Belajar Membuat Input Form dengan MVC Razor

Berikut merupakan tutorial sederhana cara membuat halaman komentar dengan menggunakan ASP.Net MVC 4 dengan engine Razor.  Untuk SMBD nya menggunakan Microsoft  SQL Server.  Aplikasi ini ceritanya user akan menginputkan komentar dan nanti akan dimasukkan ke dalam sebuah database.

Sebelum kita membuat aplikasinya hal yang pertama dilakukan adalah membuat databasenya terlebih dahulu, dengan cara berikut ini :

buat database dengan nama “sample”

buat table dengan script sebagai berikut :

CREATE TABLE [dbo].[komentar](
	[nomor] [INT] IDENTITY(1,1) NOT NULL,
	[nama] [VARCHAR](50) NULL,
	[url] [VARCHAR](50) NULL,
	[pesan] [VARCHAR](50) NULL,
 CONSTRAINT [PK_komentar] PRIMARY KEY CLUSTERED 
(
	[nomor] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
 
GO

Setelah selesai mari kita membuat projectnya ( jika yang belum tau bisa baca dimari dulu )

kemudian langkah pertama kita bikin class database dulu, caranya klik kanan model pilih add new, pilih class
terus tambahkan fungsi dan prosedur seperti ini dalam class nya

private SqlConnection koneksi;
        public namaclassnya()
        {
            koneksi = new SqlConnection(@"Data Source=namaserverdatabase;Initial Catalog=sample;Integrated Security=False;User ID=sa;Password=passwordnya;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False");
            koneksi.Open();
        }
        public void closeKoneksi()
        {
            koneksi.Close();
        }
        public Boolean insertKomentar(String nama, String url, String pesan)
        {
            try
            {
                SqlCommand komen = new SqlCommand();
                komen.Connection = koneksi;
                komen.CommandText = "insert into komentar (nama, url, pesan) values (@nama, @url, @pesan);";
                komen.Parameters.AddWithValue("@nama", nama);
                komen.Parameters.AddWithValue("@url", url);
                komen.Parameters.AddWithValue("@pesan", pesan);
                int isSukses = komen.ExecuteNonQuery();
                if (isSukses > 0)
                {
                    return true;
                }
                else
                {
                    return false;
                }
 
            }
            catch (Exception ex)
            {
                throw ex;
            }
 
        }

namaclassnya : ganti dengan nama class yang kamu bikin
namaserverdatabase : ganti dengan nama server databasenya
passwordnya : ganti password untuk sa ( jika tidak ingin menggunakan username dan password maka hapus baris user id dan password (User ID=sa;Password=passwordnya;) lalu ganti Integrated Security = true; )

Setelah itu bikin controller baru ( kalau dari tutorial ini melanjutkan tutorial kemarin jadi langsung ditambah script berikut ini )

public ActionResult Komentar()
        {
try
            {
                if (Request.Form["btnSubmit"] != null)
                {
                    try
                    {
                        String nama = Request.Form["txtNama"].ToString();
                        String url = Request.Form["txtUrl"].ToString();
                        String pesan = Request.Form["txtPesan"].ToString();
                        Models.DAO dbase = new Models.DAO();
                        Boolean isBerhasil = dbase.insertKomentar(nama, url, pesan);
                        if (isBerhasil)
                        {
                            ViewData["hasil"] = "berhasil menambah komentar";
                        }
                        else
                        {
                            ViewData["hasil"] = "gagal menambah komentar";
                        }
 
                    }
                    catch (Exception ex)
                    {
                        ViewData["hasil"] = "isi data dengan lengkap ya !";
                    }
                }
            }
            catch (Exception ex)
            {
                ViewData["hasil"] = ex.Message;
            }
            return View();
}

klik kanan pada komentar pilih add view

komentarcontrol

bikin tampilannya dengan script seperti ini :

<form method="post" action="">
            <table>
                <tr>
                    <td>Nama</td>
                    <td><input type="text" required name="txtNama" /></td>
                </tr>
                <tr>
                    <td>Website</td>
                    <td><input type="url" name="txtUrl" required /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        Pesan :
                        <br />
                        <textarea name="txtPesan" cols="10" rows="5" required>
 
                        </textarea>
                        <br />
                        <input type="submit" value="Kirim" name="btnSubmit" />
                        <br />
                        @ViewData["hasil"]
                    </td>
 
                </tr>
            </table>
        </form>

Hasilnya seperti ini

desainkomentar

1 thought on “Belajar Membuat Input Form dengan MVC Razor

Leave a Comment

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