{"id":1079,"date":"2014-03-19T12:36:16","date_gmt":"2014-03-19T12:36:16","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1079"},"modified":"2014-03-22T01:50:32","modified_gmt":"2014-03-22T01:50:32","slug":"asp-net-single-page-application-template","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=1079","title":{"rendered":"ASP.NET : Single Page Application Template"},"content":{"rendered":"

Pada aplikasi web yang sudah biasa kita temui biasanya kita dapat lihat terdapat perubahan pada address bar pada web browser.\u00a0 Biasanya perubahan tersebut karena link\/tombol yang diklik mengantarkan ke suaatu halaman yang lain atau mengirimkan suatu parameter.\u00a0 Perubahan halaman atau parameter tentu saja akan membuat perubahan antarmuka yang kita lihat pada web browser.<\/p>\n

Baik ASP.NET Web Form atau ASP.NET MVC biasanya mempunyai \u201cprilaku\u201d seperti itu, yaitu antarmuka atau halaman akan dapat berubah karena perubahan alamat pada address bar pada web browser.\u00a0 Hal ini sesuai dengan life cycle yang terlihat pada gambar di bawah ini.<\/p>\n

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

Nah pada perkembangannya terdapat istilah baru dalam teknologi yaitu Single Page Application (SPA). Apa bedanya antara aplikasi web yang telah disebutkan sebelumnya dengan SPA? Secara kasat mata atau apa yang dilihat oleh mata, maka perbedaannya terletak pada address bar pada browser dan antarmuka yang ditampilkan pada layar web browser. Sebagai ilustrasi maka bisa dilihat pada gambar di bawah ini :<\/p>\n

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

Pada gambar di atas alamat pada address bar adalah http:\/\/localhost:2191<\/a> dengan antarmuka yang menampilkan form login. Kemudian jika diklik link Register maka akan ditampilkan halaman seperti berikut :<\/p>\n

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

Dapat diperhatikan alamat pada address bar tetap sama, tapi antarmuka yang ditampilkan berbeda dengan sebelumnya. Dan berikut ini adalah tampilan setelah login.<\/p>\n

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

Nah setelah melihat contoh di atas maka kita sudah mengetahui perbedaan secara kasat mata antara SPA dan aplikasi web sebelumnya. Pada SPA, dianggap terdapat 1 halaman saja (dilihat pada address bar) tetapi satu halaman tersebut bisa mempunyai banyak antarmuka sesuai dengan request yang dilakukan oleh user (sebagai contoh saat klik link register).<\/p>\n

Perbedaan lain SPA dengan aplikasi web sebelumnya jika dilihat dari life cycle dapat digambarkan di bawah ini :<\/p>\n

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

Bisa dilihat berbedaannya, jika pada aplikasi web sebelumnya yang dipertukarkan adalah kode HTML dari saat inisial request dan proses-proses selanjutnya. Sedangkan pada SPA, proses penerimaan kode HTML hanya terjadi diawal inisial request saja, dan selanjutnya cukup melakukan pertukaran data dalam bentuk JSON dengan bantuan AJAX. Untuk komunikasi antara HTML dan JSON, digunakan framework Javascript yang bermana Knockout.js.\u00a0 Hal ini bisa dilihat pada gambar arsitektur SPA Template di bawah ini :<\/p>\n

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

Pada posting selanjutkan akan di bahas lebih jaun mengenai SPA.<\/p>\n","protected":false},"excerpt":{"rendered":"

Pada aplikasi web yang sudah biasa kita temui biasanya kita dapat lihat terdapat perubahan pada address bar pada web browser.\u00a0 Biasanya perubahan tersebut karena link\/tombol yang diklik mengantarkan ke suaatu halaman yang lain atau mengirimkan suatu parameter.\u00a0 Perubahan halaman atau…<\/p>\n","protected":false},"author":1,"featured_media":1076,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[68,96],"class_list":["post-1079","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-asp-net","tag-vs-2013"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2014\/03\/blog5_thumb1.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-hp","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1079"}],"version-history":[{"count":3,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1079\/revisions"}],"predecessor-version":[{"id":1096,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1079\/revisions\/1096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/1076"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}