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

Create PHP Application on Microsoft Azure Website

This tutorial will show you how to use PHP language on Azure Website services. In this tutorial I use Azure Management Portal to create new Azure Website instance.

For create a PHP Website do the following step below:

1. You must login to Azure Website and create new azure website.

2. For create azure website choose click New button at the bottom of the page, after that choose Compute – Website – and Quick Create. Provide an URL or name for your azure website (must be unique). For example: AzureWebPHP.

3. Select East Asia for Region (choose the closest region with your users). Finally click button ‘Create Website’.

4. After creating azure website you can change the configuration option and link to other resources, e.g. database.

5. On your website management page, you can choose ‘Configure’. The configure tab has the following section, e.g. general tab that contains framework version (.NET, PHP, Java, Phyton), certificates (for SSL certificates), domain name (custom domain name), etc.

6. You can use webmatrix to edit and publish your PHP code. From Azure Website choose

7. After webmatrix opened, choose ‘Edit local copy’.

8. When prompted to download your site, choose ‘Yes install from the Template Gallery’.

9. From the available templates choose PHP, and then select ‘Empty Site’, and click ‘Next’.

10. Right click on AzureWebPHP node, and select ‘New File’.

11. You can type ‘PHP’ to the search box for searching PHP templates. Add ‘index.php’ to your project.

12. Open ‘index.php’ and write this following code.

13. Save file index.php. If you choose save button then your file will be saved automatically on azure website.

14. Choose ‘Run’ to open your PHP application on browser.

From the tutorial above you have seen it’s pretty simple to create PHP application on Azure Website.

Ming Library dengan PHP (Part2)

ditulis oleh mahasiswa saya : Erwin (TI UKDW 03)

Mengisi Obyek Dengan Ming

Ming menyediakan tiga cara untuk melakukan pengisian obyek, yaitu pengisian obyek dengan warna, mengisi obyek dengan gradient, dan mengisi obyek dengan gambar. Kelas SWFShape() menyediakan dua fungsi untuk mengisi obyek yaitu fungsi setLeftFill() dan fungsi setRightFill(). Untuk menggunakan keduanya, perlu menggunakan SWFFill() sebagai argument. SWFFill() dapat dipanggil dengan menggunakan fungsi addFill() yang merupakan bagian dari SWFShape(). Fungsi addFill() ini mempunyai argument warna RGB. Fungsi setRigthFill() digunakan jika ingin mengisi searah dengan jarum jam, sedangkan fungsi setLeftFill() digunakan untuk mengisi berlawanan dengan arah jarum jam.

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru dan mengisi obyek
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: $fill = $square->addFill(0, 255, 0);
  10: $square->setRightFill($fill);
  11: // Menggambar kotak
  12: $square->movePenTo(40, 20);
  13: $square->drawLineTo(140, 20);
  14: $square->drawLineTo(140, 120);
  15: $square->drawLineTo(40, 120);
  16: $square->drawLineTo(40, 20);
  17: // Menambahkan shape ke movie
  18: $myMovie->add($square);
  19: // Menampilkan movie
  20: header('Content-type:application/x-shockwave-flash');
  21: $myMovie->output();
  22: ?> 

clip_image002

Cara kedua yang dapat digunakan untuk mengisi obyek adalah dengan menggunakan kelas SWFGradient(). Kelas ini dapat digunakan untuk mengisi obyek dengan efek gradasi dari dua warna atau gradient. Untuk menambah warna yang akan digunakan untuk gradasi dapat dengan menggunakan fungsi addEntry(). Fungsi ini memiliki lima argument, pertama adalah ratio yang berisikan antara 0.0 dan 1.0. Ratio ini digunakan untuk menentukan seberapa banyak warna yang ditampilkan dalam satu sisi. Argument berikutnya adalah warna RGB. Untuk argument kelima bersifat opsional, yaitu chanel alpha dari warna.

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru and mengatur line style
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: // Membuat gradient fill
  10: $gradient = new SWFGradient();
  11: $gradient->addEntry(0.0, 255, 0, 0);
  12: $gradient->addEntry(0.5, 255, 255, 255);
  13: // Menambah fill ke shape
  14: $fill=$square->addFill($gradient, SWFFILL_RADIAL_GRADIENT);
  15: $square->setRightFill($fill);
  16: // Menggambar kotak persegi
  17: $square->movePenTo(40, 20);
  18: $square->drawLineTo(340, 20);
  19: $square->drawLineTo(340, 220);
  20: $square->drawLineTo(40, 220);
  21: $square->drawLineTo(40, 20);
  22: // Menambahkan shapes ke movie
  23: $myMovie->add($square);
  24: // Menampilkan movie
  25: header('Content-type:application/x-shockwave-flash');
  26: $myMovie->output();
  27: ?>

clip_image002[4]

Pengisian obyek yang terakhir adalah dengan gambar. Gambar dengan format .jpg dan Define Bit Lossless (*.dbl) yang dapat dibuat dari file gambar dengan format Graphic Interchange Format (*.gif) dan Portable Network Graphic (*.png), dapat digunakan untuk mengisi obyek. Developer Ming menyediakan perangkat lunak png2dbl yang terdapat di alamat http://www.opaque.net/ming/ming-winutils.zip. Perangkat lunak ini dapat mengkonversi *.gif ke format *.dbl. Gambar perlu dipanggil ke buffer menggunakan fungsi yang disediakan PHP. Fungsi tersebut adalah fopen() dan fread(). Berikut ini adalah contoh penggunaanya:

$fp = fopen(“somefile.jpg”, “rb”);

$data = fread($fp, filesize(“somefile.jpg”));

Setelah itu data perlu dipindahkan dari buffer ke kelas SWFBitmap(). Kelas SWFBitmap() adalah kelas untuk mengisi obyek dengan gambar.

$bitmap = SWFBitmap($data);

Kelas SWFBitmap() memiliki fungsi addFill() yang digunakan untuk mengisikan data ke dalam obyek. Dalam penggunaanya memerlukan salah satu dari dua flag dibawah ini:

· SWFFILL_CLIPPED_BITMAP. Flag ini digunakan untuk memasukkan gambar ke obyek sesuai dengan ukuran gambar tersebut.

· SWFFILL_TILED_BITMAP. Flag ini digunakan untuk menyesuaikan gambar sesuai dengan ukuran dari obyek.

Berikut ini adalah contoh script untuk mengisi sebuah obyek dengan gambar yang diambil dari suatu folder dan akan menghasilkan tampilan seperti pada gambar

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru and mengatur line style
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: // Membuka gambar and membaca data ke buffer
  10: $fp = fopen("dog.jpg", "rb");
  11: $data = fread($fp, filesize("dog.jpg"));
  12: // Membuat gambar bitmap baru
  13: $bitmap = new SWFBitmap($data);
  14: // mengisikannya ke shape
  15: $fill = $square->addFill($bitmap, SWFFILL_TILED_BITMAP);
  16: $square->setRightFill($fill);
  17: // Menggambar square
  18: $square->movePenTo(40, 20);
  19: $square->drawLineTo(340, 20);
  20: $square->drawLineTo(340, 220);
  21: $square->drawLineTo(40, 220);
  22: $square->drawLineTo(40, 20);
  23: // Menambah shapes ke movie
  24: $myMovie->add($square);
  25: // Menampilkan movie
  26: header('Content-type:application/x-shockwave-flash');
  27: $myMovie->output();
  28: ?>
  29:  

clip_image002[6]

Penggunaan Text Dan Font Dengan Ming

Ming menyediakan kelas SWFFont() yang berguna untuk menambahkan bentuk teks pada file movie Flash yang dibuat.

$font = new SWFFont( '_sans' );

Font yang digunakan dapat berasal dari web browser atau font yang disimpan dalam sebuah folder. Untuk font yang disimpan dalam sebuah folder memerlukan format Font Definition Block (*.fdb). Font ini adalah font yang dapat dibuat dengan mengkonversi font dengan format True Type File (*.ttf). Ming tidak dapat mengkonversikan font tersebut secara langsung secara langsung. Sehingga memerlukan sebuah perangkat lunak tambahan untuk mengkonversinya. Perangkat lunak tersebut adalah ttf2fdb yang salah satunya bisa didapat dari alamat situs http://www.amarasoftware.com/downloaddemo/makefdb.zip. Setelah membuat obyek font baru, diperlukan tempat untuk menampung font tersebut. Sehingga diperlukan kelas SWFText() atau SWFTextField().

$text = new SWFTextField();

Kemudian font dipindahkan ke dalam area teks dengan menggunakan fungsi dari kelas SWFTextField() yaitu setFont().

$text->setFont( $font );

Kelas SWFTextField() atau SWFText() memiliki dua fungsi yang digunakan untuk mengatur teks. Pertama adalah setColor() yang memiliki tiga argument warna RGB, kedua adalah setHeight() untuk mengatur tinggi atau besarnya teks, fungsi ini mempunyai satu argument yaitu tinggi teks dalam pixel. Untuk menambahkan string yang akan dimuat, dapat dengan menggunakan fungsi addString() yang diisi dengan argument string dalam tanda kutip.

   1: <?php
   2: $font = new SWFFont( '_sans' );
   3: $text = new SWFTextField();
   4: //Memuat font ke dalam teks area
   5: $text->setFont( $font );
   6: $text->setColor( 0, 0, 0 );
   7: $text->setHeight( 400 );
   8: //Menambahkan string 'Hello World'
   9: $text->addString( 'Hello World' );
  10: //Membuat movie baru
  11: $myMovie = new SWFMovie();
  12: $myMovie->setDimension( 2500, 800 );
  13: //Menambahkan teks ke dalam movie
  14: $myMovie->add( $text );
  15: //Menampilkan Movie
  16: header( 'Content-type: application/x-shockwave-flash' );
  17: $m->output( );
  18: ?>

clip_image002[8]

Menambahkan Animasi Pada Movie Flash

Pada dasarnya obyek bentuk geometri yang ditambahkan ke movie hanya ditampilkan saja dan tidak dianimasikan.

$movie->add($shape);

Untuk menambahkan animasi pada Flash dengan menggunakan Ming, memerlukan manipulasi dari penambahan obyek dengan fungsi add() yang merupakan fungsi dari kelas SWFMovie().

$shapeHandle = $movie->add($shape);

Manipulasi ini mengakibatkan pengembalian obyek SWFDisplayItem() untuk menganimasikan obyek bentuk geometri ke dalam movie Flash. Hal ini sama artinya dengan mempunyai obyek SWFDisplayItem() baru. Kelas SWFDisplayItem() mempunyai fungsi yang dapat digunakan untuk menggerakan obyek, yang pertama adalah fungsi move() yang memiliki dua argument, yaitu koordinat x dan koordinat y, yang kedua adalah fungsi moveTo() yang memiliki argument sama dengan move(). Selain itu dapat juga membuat obyek berputar dengan menggunakan fungsi rotate() yang hanya memiliki satu argument, yaitu derajat perputaran obyek yang diinginkan.

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(30);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat shape baru and mengatur line style
   7: $square = new SWFShape();
   8: $square->setLine(5, 0, 0, 0, 255);
   9: // Menggambar kotak
  10: $square->movePenTo(1, 1);
  11: $square->drawLineTo(61, 1);
  12: $square->drawLineTo(61, 61);
  13: $square->drawLineTo(1, 61);
  14: $square->drawLineTo(1, 1);
  15: // Menambahkan shapes ke dalam movie
  16: $squareHandle = $myMovie->add($square);
  17: // Menggerakan shape
  18: $squareHandle->moveTo(30, 100);
  19: // Memutar shape 45 derajat
  20: $squareHandle->rotate(45);
  21:  
  22: // Tampilan dari movie
  23: header('Content-type:application/x-shockwave-flash');
  24: $myMovie->output();
  25: ?> 

clip_image002[10]

Agar pergerakannya kelihatan, maka perlu untuk melakukan perubahan pada obyek secara bertahap pada tiap frame. Untuk menggeser ke frame berikutnya dapat dengan menggunakan fungsi nextFrame() yang merupakan fungsi dari kelas SWFMovie(). Ming juga dapat melakukan animasi morphing. Animasi ini mengubah bentuk sebuah obyek ke bentuk lain. Kelas yang digunakan adalah SWFMorph() yang memiliki dua fungsi, yaitu getShape1() dan getShape2(). Keduanya tidak memiliki argument.

$morph = new SWFMorph();

$shape1 = $morph->getShape1();

$shape2 = $morph->getShape2();

Contoh penggunaanya adalah sebagai berikut:

   1: <?php
   2: $myMovie = new SWFMovie();
   3: $myMovie->setDimension(400, 300);
   4: $myMovie->setRate(5);
   5: $myMovie->setBackground(200, 200, 200);
   6: // Membuat obyek morph baru
   7: $morph = new SWFMorph();
   8: // Membuat shape baru and mengatur line style
   9: $square = new SWFShape();
  10: $rectangle = new SWFShape();
  11: $square = $morph->getShape1();
  12: $square->setLine(5, 0, 0, 0, 255);
  13: $rectangle = $morph->getShape2();
  14: $rectangle->setLine(5, 0, 0, 0, 255);
  15: // Menggambar kotak persegi
  16: $square->movePenTo(1, 1);
  17: $square->drawLineTo(61, 1);
  18: $square->drawLineTo(61, 61);
  19: $square->drawLineTo(1, 61);
  20: $square->drawLineTo(1, 1);
  21: // Menggambar persegi panjang
  22: $rectangle->movePenTo(1, 1);
  23: $rectangle->drawLineTo(161, 1);
  24: $rectangle->drawLineTo(161, 61);
  25: $rectangle->drawLineTo(1, 61);
  26: $rectangle->drawLineTo(1, 1);
  27: $morphHandle = $myMovie->add($morph);
  28: $morphHandle->moveTo(100, 100);
  29: //Melakukan animasi secara bertahap
  30: for($i = 0.0; $i < 1.0; $i += 0.1)
  31: {
  32: $morphHandle->setRatio($i);
  33: $myMovie->nextFrame();
  34: }
  35: // Tampilan movie
  36: header('Content-type:application/x-shockwave-flash');
  37: $myMovie->output();
  38: ?>

Masih banyak lagi animasi yang dapat dilakukan oleh Ming Library, seperti skew, scale, dan lain sebagainya. Selain itu Ming Library juga mendukung action script. Untuk lebih jelasnya dapat dilihat pada http://phpbuilder.com/manual/en/book.ming.php

Link Ming Library:

Basic:

· http://jerryscript.hostrocket.com/php/ming/lessons/

Contoh:

· http://www.gazbming.com/

· http://redhot.pepper.jp/ming_php/

Ming untuk desain:

· http://www.thatmingthing.com/

Ming pada bahasa pemrograman lain:

· http://kumamushi.org/~k/ming/examples/examples.html à pada Ruby

· http://todbot.com/ming/ à Perl

Reference:

· Php manual.

· Rutledge, Matt, 2004, “PHP Game Programing” cetakan pertama, Premier.