{"id":3193,"date":"2017-02-12T23:39:14","date_gmt":"2017-02-12T23:39:14","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=3193"},"modified":"2017-02-13T13:59:14","modified_gmt":"2017-02-13T13:59:14","slug":"visual-studio-code-and-asp-net-file-generator","status":"publish","type":"post","link":"http:\/\/www.rezafaisal.net\/?p=3193","title":{"rendered":"Visual Studio Code and ASP.NET File Generator"},"content":{"rendered":"

Visual Studio (bukan Visual Studio Code) memiliki banyak kemudahan yang dapat digunakan oleh software developer dalam menulis kode program.\u00a0 Kemudahan yang paling sering digunakan adalah template file, yang dapat digunakan untuk membuat file class, file konfigurasi dan file antarmuka seperti pada gambar di bawah ini.<\/p>\n

\"01\"<\/a><\/p>\n

Misal untuk membuat class Startup maka cukup memilih template yang sudah disediakan. Begitu juga jika ingin membuat file konfigurasi dan file komponen view.\u00a0 Kemudahan ini membuat software developer dapat dengan cepat membuat file yang dibutuhkan dengan cepat.<\/p>\n

Lalu bagaimana dengan Visual Studio Code?\u00a0 Secara default, Visual Studio Code tidak memiliki fitur seperti itu.\u00a0 Tetapi fitur tersebut dapat tersedia pada Visual Studio Code jika menambahkan extension.\u00a0 Sebagai contoh, untuk mengembangkan aplikasi web dengan ASP.NET Core framework, maka dapat digunakan extension Yeoman & Generator ASP.NET.\u00a0 Pada posting sebelumnya di sini http:\/\/www.rezafaisal.net\/?p=3113<\/a>, telah dibahas bagaimana menyiapkan project ASP.NET Core dengan generator tersebut.\u00a0 Tetapi pada posting tersebut belum dijelaskan fitur lain dari extesion ini yang dapat digunakan untuk membuat file class, file komponen view seperti yang dimiliki oleh Visual Studio Code.<\/p>\n

Fitur generator file dari Yeoman ini dapat dilakukan dengan menggunakan penulisan perintah pada Integrated Terminal pada Visual Studio Code.\u00a0 Jadi langkah yang harus dilakukan adalah mengaktifkan Terminal dengan memilih menu View > Integrated Terminal.\u00a0 Untuk mengetahui perintah-perintah dan file apa saja yang dapat dibuat oleh generator ini maka dapat diketikan perintah berikut pada terminal.<\/p>\n

\n
yo aspnet --help<\/pre>\n
 <\/p>\n<\/div>\n
Maka akan dapat dilihat output seperti berikut ini.<\/p>\n
\n
Usage:\r\n  yo aspnet:app [options] [<type>] [<applicationName>] [<ui>]<\/pre>\n
Options:
\n-h, –help # Print the generator’s options and usage
\n–skip-cache # Do not remember prompt answers Default: false<\/span><\/p>\n
Arguments:
\ntype # the project type to create Type: String Required: false<\/span>
\napplicationName # the name of the application Type: String Required: false<\/span>
\nui # the ui library to use (bootstrap OR semantic) Type: String Required: false<\/span><\/p>\n
Description:<\/p>\n
Creates a basic ASP.NET Core application
\nSubgenerators:<\/p>\n
yo aspnet:angularcontroller [options] <name>
\nyo aspnet:angularcontrolleras [options] <name>
\nyo aspnet:angulardirective [options] <name>
\nyo aspnet:angularfactory [options] <name>
\nyo aspnet:angularmodule [options] <name>
\nyo aspnet:appsettings [options]
\nyo aspnet:bowerjson [options]
\nyo aspnet:class<\/span> [options] <name>
\nyo aspnet:coffeescript [options] <name>
\nyo aspnet:dockerfile [options]
\nyo aspnet:gitignore [options]
\nyo aspnet:gruntfile [options]
\nyo aspnet:gulpfile [options] <name>
\nyo aspnet:htmlpage [options] <name>
\nyo aspnet:interface<\/span> [options] <name>
\nyo aspnet:javascript [options] <name>
\nyo aspnet:json [options] <name>
\nyo aspnet:jsonschema [options] <name>
\nyo aspnet:middleware [options] <name>
\nyo aspnet:mvccontroller [options] <name>
\nyo aspnet:mvcview [options] <name>
\nyo aspnet:nuget [options]
\nyo aspnet:packagejson [options]
\nyo aspnet:program [options]
\nyo aspnet:startup [options]
\nyo aspnet:stylesheet [options] <name>
\nyo aspnet:stylesheetless [options] <name>
\nyo aspnet:stylesheetscss [options] <name>
\nyo aspnet:taghelper [options] <name>
\nyo aspnet:textfile [options] <name>
\nyo aspnet:tfignore [options]
\nyo aspnet:typescript [options] <name>
\nyo aspnet:typescriptconfig [options] <name>
\nyo aspnet:typescriptjsx [options] <name>
\nyo aspnet:usersecrets [options] <name>
\nyo aspnet:webapicontroller [options] <name><\/p>\n
 <\/p>\n<\/div>\n
Sedangkan jika ingin mendapatkan informasi bantuan tentang spesifik suatu perintah pembuatan file template (misal untuk membuat file mvcview) dapat digunakan perintah berikut ini.<\/p>\n
\n
yo aspnet:mvcview --help<\/pre>\n
 <\/p>\n<\/div>\n
Dan berikut adalah output dari perintah di atas.<\/p>\n
\n
Usage:\r\n  yo aspnet:mvcview [options] <<\/span>name><\/span><\/pre>\n
Options:
\n-h, –help # Print the generator’s options and usage<\/span>
\n–skip-cache # Do not remember prompt answers Default: false<\/span><\/p>\n
Arguments:
\nname Type: String Required: true<\/p>\n
 <\/p>\n<\/div>\n
Untuk mengembangkan aplikasi web dengan ASP.NET Core ada beberapa file yang sering dibuat adalah:<\/p>\n
    \n
  • File appsettings.json untuk menyimpan file konfigurasi.<\/li>\n
  • File class.<\/li>\n
  • File mvccontroller, file class komponen controller.<\/li>\n
  • File mvcview, file komponen view.<\/li>\n
  • File webapicontroller, file controller Web API.<\/li>\n
  • File stylesheet, file CSS.<\/li>\n
  • file htmlpage, file HTML.<\/li>\n<\/ul>\n
    {appsettings.json<\/em><\/strong>}<\/p>\n
    Untuk membuat file ini digunakan perintah berikut.<\/p>\n
    \n
    yo aspnet:appsettings<\/pre>\n
     <\/p>\n<\/div>\n
    Hasilnya adalah file dengan nama appsettings.json dengan isi sebagai berikut.<\/p>\n
    {htmlpage<\/em><\/strong>}<\/p>\n
    Untuk membuat file HTML dengan nama Index.html digunakan perintah berikut.<\/p>\n
    \n
    yo aspnet:htmlpage Index.<\/span>html<\/pre>\n
     <\/p>\n<\/div>\n
    Hasilnya adalah file Index.html dengan isi sebagai berikut.<\/p>\n
    \n
    <<\/span>!doctype html><\/span>\r\n<<\/span>html lang=\"\"><\/span>\r\n  <<\/span>head><\/span>\r\n      <<\/span>meta charset=\"utf-8\" \/><\/span>\r\n      <<\/span>title><\/span><<\/span>\/title><\/span>\r\n      <<\/span>meta name=\"description\" content=\"\" \/><\/span>\r\n      <<\/span>meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/><\/span>\r\n      <<\/span>!-- Place favicon.<\/span>ico in the root directory --><\/span>\r\n  <<\/span>\/head><\/span>\r\n  <<\/span>body><\/span><\/pre>\n
    <<\/span>\/body><\/span>
    \n<<\/span>\/html><\/span><\/p>\n
     <\/p>\n<\/div>\n
    {stylesheetcss<\/em><\/strong>}<\/p>\n
    Untuk membuat file CSS dengan nama default.css maka digunakan perintah berikut ini.<\/p>\n
    \n
    yo aspnet:stylesheet default<\/pre>\n
     <\/p>\n<\/div>\n
    {class<\/em><\/strong>}<\/p>\n
    Untuk membuat class HelloWorld maka digunakan perintah berikut ini.<\/p>\n
    \n
    yo aspnet:class HelloWorld<\/pre>\n
     <\/p>\n<\/div>\n
    Dan berikut adalah file class HelloWorld.css sebagai berikut.<\/p>\n
    \n
    using<\/span> System;\r\nusing<\/span> System.Collections.Generic;\r\nusing<\/span> System.Linq;\r\nusing<\/span> System.Threading.Tasks;<\/pre>\n
    namespace<\/span> HelloWorldASPNETCore
    \n{
    \npublic<\/span> class<\/span> HelloWorld
    \n{
    \npublic<\/span> HelloWorld()
    \n{
    \n}
    \n}
    \n}<\/p>\n
     <\/p>\n<\/div>\n
    {mvccontroller<\/em><\/strong>}<\/p>\n
    Untuk membuat class controller HomeController digunakan perintah berikut ini.<\/p>\n
    \n
    yo aspnet:mvccontroller HomeController<\/pre>\n
     <\/p>\n<\/div>\n
    Hasilnya adalah sebagai berikut.<\/p>\n
    \n
    using<\/span> System;\r\nusing<\/span> System.Collections.Generic;\r\nusing<\/span> System.Linq;\r\nusing<\/span> System.Threading.Tasks;\r\nusing<\/span> Microsoft.AspNetCore.Mvc;<\/pre>\n
    \/\/ For more information on enabling MVC for empty projects, visit https:\/\/go.microsoft.com\/fwlink\/?LinkID=397860<\/span><\/p>\n
    namespace<\/span> HelloWorldASPNETCore
    \n{
    \npublic<\/span> class<\/span> HomeController : Controller
    \n{
    \n\/\/ GET: \/<controller>\/<\/span>
    \npublic<\/span> IActionResult Index()
    \n{
    \nreturn<\/span> View();
    \n}
    \n}
    \n}<\/p>\n
     <\/p>\n<\/div>\n
    {mvcview<\/em><\/strong>}<\/p>\n
    Untuk membuat file view komponen dengan nama Index.chtml digunakan perintah berikut ini.<\/p>\n
    \n
    yo aspnet:mvcview Index.cshtml<\/pre>\n
     <\/p>\n<\/div>\n
    Hasilnya adalah sebagai berikut.<\/p>\n
    \n
    @*\r\n    For more information on enabling MVC for empty projects, visit https:\/\/go.microsoft.com\/fwlink\/?LinkID=397860\r\n*@\r\n@{\r\n    \/\/ ViewBag.Title = \"Index Page\";\r\n}<\/pre>\n
     <\/p>\n<\/div>\n
    Dengan adanya fitur ini maka pembangunan aplikasi web ASP.NET Core akan lebih mudah dan cepat.<\/p>\n
    Semoga posting ini bermanfaat \"Smile\"<\/p>\n","protected":false},"excerpt":{"rendered":"
    Visual Studio (bukan Visual Studio Code) memiliki banyak kemudahan yang dapat digunakan oleh software developer dalam menulis kode program.\u00a0 Kemudahan yang paling sering digunakan adalah template file, yang dapat digunakan untuk membuat file class, file konfigurasi dan file antarmuka seperti…<\/p>\n","protected":false},"author":1,"featured_media":3191,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[160,161],"class_list":["post-3193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-asp-net-core","tag-visual-studio-code"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2017\/02\/01_thumb-2.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-Pv","_links":{"self":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3193"}],"version-history":[{"count":3,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3193\/revisions"}],"predecessor-version":[{"id":3198,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3193\/revisions\/3198"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/3191"}],"wp:attachment":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3193"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}