Upload File Gambar dengan ASP.NET MVC 5

Pada tutorial berikut akan dibahas cara upload file gambar kedalam folder pada aplikasi asp.net mvc. Nama file yang berhasil di upload juga akan disimpan kedalam database.

Sebelumnya buat model Author dan data context terlebih dahulu, kemudian jalankan perintah migrasi untuk menggenerate table Author di database.

   1: public class Author

   2: {

   3:     public int AuthorID { get; set; }

   4:     public string FullName { get; set; }

   5:     public string Email { get; set; }

   6:     public string PicUrl { get; set; }

   7: }

 

   1: public class SampleContext : DbContext

   2: {

   3:     public DbSet<Author> Authors { get; set; }

   4: }

Jalankan perintah untuk migrasi:

image

Pada solution explorer buat folder Images yang digunakan untuk menyimpan file.

Setelah database berhasil dibuat, tambahkan AuthorController untuk menampilkan data Author, dan menambahkan data Author baru sekaligus mengupload file.

   1: public class AuthorController : Controller

   2: {

   3:     private SampleContext db = new SampleContext();

   4:     // GET: Author

   5:     public ActionResult Index()

   6:     {

   7:         var model = db.Authors.OrderBy(a => a.FullName);

   8:  

   9:         return View(model);

  10:     }

  11:  

  12:     // GET: Author/Create

  13:     public ActionResult Create()

  14:     {

  15:         return View();

  16:     }

  17:  

  18:     // POST: Author/Create

  19:     [HttpPost]

  20:     public ActionResult Create(Author author, HttpPostedFileBase file)

  21:     {

  22:         if (ModelState.IsValid)

  23:         {

  24:             if (file != null)

  25:             {

  26:                 string pic = Path.GetFileName(file.FileName);

  27:                 string path = Path.Combine(Server.MapPath("~/Images"), pic);

  28:                 file.SaveAs(path);

  29:  

  30:                 /*using(MemoryStream ms = new MemoryStream())

  31:                 {

  32:                     file.InputStream.CopyTo(ms);

  33:                     var arr = ms.GetBuffer();

  34:                 }*/

  35:  

  36:                 var newAuthor = new Author

  37:                 {

  38:                     FullName = author.FullName,

  39:                     Email = author.Email,

  40:                     PicUrl = pic

  41:                 };

  42:                 db.Authors.Add(newAuthor);

  43:                 db.SaveChanges();

  44:             }

  45:         }

  46:  

  47:         return RedirectToAction("Index");

  48:     }

  49: }

Tambahkan view Index.cshtml untuk menampilkan data:

   1: @model IEnumerable<SampleUpload.Models.Author>

   2:  

   3: @{

   4:     ViewBag.Title = "Daftar Author";

   5: }

   6:  

   7: <h2>Daftar Author</h2>

   8:  

   9: <p>

  10:     @Html.ActionLink("Create New", "Create")

  11: </p>

  12: <table class="table">

  13:     <tr>

  14:         <th>

  15:             @Html.DisplayNameFor(model => model.FullName)

  16:         </th>

  17:         <th>

  18:             @Html.DisplayNameFor(model => model.Email)

  19:         </th>

  20:         <th>

  21:             @Html.DisplayNameFor(model => model.PicUrl)

  22:         </th>

  23:     </tr>

  24:  

  25: @foreach (var item in Model) {

  26:     <tr>

  27:         <td>

  28:             @Html.DisplayFor(modelItem => item.FullName)

  29:         </td>

  30:         <td>

  31:             @Html.DisplayFor(modelItem => item.Email)

  32:         </td>

  33:         <td>

  34:             <img src="~/Images/@item.PicUrl" alt="pic" width="100"/>

  35:         </td>

  36:     </tr>

  37: }

  38:  

  39: </table>

 

image

Tambahkan juga view Create.cshtml yang digunakan untuk menambahkan data Author baru.

   1: @model SampleUpload.Models.Author

   2:  

   3: @{

   4:     ViewBag.Title = "Create";

   5: }

   6:  

   7: <h2>Tambah Author</h2>

   8:  

   9:  

  10: @using (Html.BeginForm("Create", "Author", FormMethod.Post, new { enctype = "multipart/form-data" }))

  11: {    

  12:     <div class="form-horizontal">

  13:         <hr />

  14:         <div class="form-group">

  15:             @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })

  16:             <div class="col-md-10">

  17:                 @Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } })

  18:             </div>

  19:         </div>

  20:  

  21:         <div class="form-group">

  22:             @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })

  23:             <div class="col-md-10">

  24:                 @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })

  25:             </div>

  26:         </div>

  27:  

  28:         <div class="form-group">

  29:             @Html.LabelFor(model => model.PicUrl, htmlAttributes: new { @class = "control-label col-md-2" })

  30:             <div class="col-md-10">

  31:                 <input type="file" name="file" id="file" />

  32:             </div>

  33:         </div>

  34:  

  35:         <div class="form-group">

  36:             <div class="col-md-offset-2 col-md-10">

  37:                 <input type="submit" value="Create" class="btn btn-default" />

  38:             </div>

  39:         </div>

  40:     </div>

  41: }

  42:  

  43: <div>

  44:     @Html.ActionLink("Back to List", "Index")

  45: </div>

  46:  

  47: @section Scripts {

  48:     @Scripts.Render("~/bundles/jqueryval")

  49: }

image

Setelah data ditambahkan, maka data baru beserta pic akan ditampilkan.

image

Selamat mencoba and Happy Coding Smile

Workshop Web Development Fundamental @AMIKOM

Pada tanggal 23 Januari 2015 telah dilaksanakan workshop dengan tema Web Development Fundamental yang diselenggarakan oleh MIC UGM bekerja sama dengan AMIKOM. Peserta dari workshop ini adalah Dosen dan Asisten dosen dari AMIKOM yang akan mengikuti ujian sertifikasi Microsoft Technology Associate.

WP_20150123_007WP_20150123_008

Menggunakan Azure BLOB Storage untuk menyimpan file

Saya sering menjumpai pertanyaan bagamana cara menyimpan image/file di Azure Website. Pada artikel ini saya ingin mencoba untuk menjawab pertanyaan tersebut, saya akan membuat sebuah aplikasi ASP.NET MVC yang mempunyai fasilitas untuk upload image. Aplikasi tersebut akan saya hosting di Windows Azure Website, dan file image akan disimpan pada Azure Storage.

1. Langkah pertama yang harus dilakukan adalah membuat azure storage baru pada windows azure.

image

2. Kemudian catat access keys yang nanti akan kita gunakan untuk menyimpan data ke azure storage.

image

3. Kemudian buat project ASP.NET MVC dengan nama ‘SampleWebBLOB’

4. Pada HomeController tambahkan satu action method baru dengan nama ‘ViewImage()’

   1: public ActionResult ViewImage()

   2: {

   3:     return View();

   4: }

 

5. Kemudian tambahkan view dengan nama ViewImage.cshtml untuk membuat form upload image

   1: <h2>Upload Gambar</h2>

   2:  

   3: <br />

   4: @using(Html.BeginForm("ImageUpload","Home",FormMethod.Post,

   5:     new{enctype="multipart/form-data"}))

   6: {

   7:     <div>Please Select Image to Upload :</div>

   8:     <input type="file" name="image"/><input type="submit" value="Upload Image"/>

   9: }

6. Tambahkan beberapa referensi library yang digunakan untuk upload ke BLOB storage.

image

7. Untuk proses upload file dan menambahkan ke BLOB storage di Windows Azure tambahkan action method baru pada HomeController.

   1: [HttpPost]

   2: public ActionResult ImageUpload()

   3: {

   4:     

   5:     var image = Request.Files["image"];

   6:     if(image==null)

   7:     {

   8:         ViewBag.UploadMessage = "Gagal upload image";

   9:     }

  10:     else

  11:     {

  12:         ViewBag.UploadMessage = string.Format("Berhasil upload {0}  dengan tipe {1} dan ukuran {2}",

  13:             image.FileName, image.ContentType, image.ContentLength);

  14:  

  15:         //bagian upload ke azure storage

  16:  

  17:         //koneksi

  18:         var storageAccount = CloudStorageAccount.Parse(

  19:             ConfigurationManager.ConnectionStrings["StorageConnection"].ConnectionString);

  20:  

  21:         //membuat container

  22:  

  23:         CloudBlobClient blobStorage = storageAccount.CreateCloudBlobClient();

  24:         CloudBlobContainer container = blobStorage.GetContainerReference("itemimage");

  25:         if(container.CreateIfNotExist())

  26:         {

  27:             var permission = container.GetPermissions();

  28:             permission.PublicAccess = BlobContainerPublicAccessType.Container;

  29:             container.SetPermissions(permission);

  30:         }

  31:  

  32:         //save image to the container

  33:         string uniqueBlobName = string.Format("itemimage/image_{0}{1}",

  34:             Guid.NewGuid().ToString(), Path.GetExtension(image.FileName));

  35:         CloudBlockBlob blob = blobStorage.GetBlockBlobReference(uniqueBlobName);

  36:         blob.Properties.ContentType = image.ContentType;

  37:         blob.UploadFromStream(image.InputStream);

  38:  

  39:         ViewBag.MyImage = blob.Uri.ToString();

  40:     }

  41:     

  42:     return View();

  43: }

 

8. Kemudian tambahkan web.config untuk connection string ke BLOB storage di Windows Azure.

image

9. Kemudian publish aplikasi tersebut ke Windows Azure (cara publish aplikasi ASP.NET MVC ke Windows azure dapat dibaca pada artikel saya berikut.)

10. Hasil dari aplikasi ini ketika sudah diupload ke Windows Azure.

image

11. Anda juga dapat melihat file gambar yang berhasil diupload pada container di azure storage.

image

image

Dari artikel diatas dapat disimpulkan bahwa cukup mudah untuk menyimpan file ke azure blob storage. Pada artikel selanjutnya akan dibahas bagaimana membuat web services REST dengan ASP.NET Web API dan kemudian memasangnya di Windows Azure.

Hosting ASP.NET MVC di Windows Azure (Part 2)

Pada artikel sebelumnya kita telah berhasil membuat project ASP.NET MVC kemudian memasang website tersebut pada Windows Azure. Pada artikel kali ini kita akan menggunakan Entity Framework Code First untuk membuat database di SQL Azure dan kemudian mengakses database tersebut dari Windows Azure.

1. Buka project ActualTraining yang sebelumnya sudah kita buat.

2. Kemudian kita akan menambahkan data baru yang akan ditampilkan. Sebagai contoh kita akan membuat database dengan ‘Course’ untuk menyimpan data mahasiswa.

3. Tambahkan class baru pada table model dengan nama ‘Course’.

public class Course { public int CourseID { get; set; } public string Title { get; set; } public string Description { get; set; } public decimal Prices { get; set; } }

4. Buat Controller baru dengan nama CourseController.

image

image

5. Tambahkan detail berikut pada controller yang anda buat. Jangan lupa untuk memilih model Course yang sudah anda buat sebelumnya, kemudian tambahkan juga class DataContext baru.

image

6. Kemudian pada file ActualTrainingContext tambahkan kode berikut untuk menambahkan data contoh.

public class ActualTrainingContextInitialize : DropCreateDatabaseIfModelChanges<ActualTrainingContext> { protected override void Seed(ActualTrainingContext context) { context.Courses.Add(new Course { Title = "C# Fundamental", Description = "Course ini berisi materi dasar pemrograman C#", Prices = 100000 }); context.Courses.Add(new Course { Title = "ASP.NET MVC", Description = "Course ini berisi materi tentang pemrograman Web berbasis ASP.NET MVC", Prices = 150000 }); } }

7. Tambahkan juga kode berikut pada file global.asax untuk membuat database ketika aplikasi pertama kali dijalankan.

protected void Application_Start() { ………………………………………… Database.SetInitializer<ActualTrainingContext>( new ActualTrainingContextInitializer()); }

8. Jalankan aplikasi anda, maka database akan dibuat secara otomatis.

image

9. Jika anda lihat pada solution explorer di aplikasi anda maka dapat dilihat bahwa ada database yang secara otomatis dibuat yaitu ActualTrainingContext-20140308233949.mdf

image

Membuat Database pada Windows Azure

1. Buka Windows Azure Management untuk membuat database baru.

2. Pilih SQL Database – NEW, untuk membuat database baru.

3. Masukan nama database, pilih new sql database server, dan masukan username dan password untuk mengakses database server tersebut.

image

4. Setelah database selesai dibuat maka hasilnya dapat dilihat pada gambar dibawah sebagai berikut.

image

5. Langkah selanjutnya adalah kita akan mengcopy connection string untuk melakukan koneksi dengan database yang sudah kita buat di windows azure.

image

6. Pada menu dashboard di database pilih ‘Show connection string’. Kemudian copy conn

image

7. Kemudian tambahkan konfigurasi connection string tersebut ke file web.config pada aplikasi anda.

image

8. Kemudian publish kembali aplikasi yang sudah anda buat ke Windows Azure (langkah untuk publish aplikasi ASP.NET MVC ke Windows Azure dapat dilihat pada artikel sebelumnya).

9. Setelah aplikasi anda berhasil dipublish di Windows Azure, coba untuk akses url http://<url_app_anda>/Course untuk menampilkan daftar Course.

image

Pada contoh diatas terlihat bahwa sangat mudah untuk membuat database (SQL Azure) di Windows Azure untuk dapat digunakan di aplikasi ASP.NET MVC anda. Selamat mencoba dan Happy Coding !!