tag:blogger.com,1999:blog-14348758829801743212024-03-09T04:18:06.026+07:00.Net Tutorial & SolutionMari berbagi Ilmu dengan memberikan solusiJunindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.comBlogger193125tag:blogger.com,1999:blog-1434875882980174321.post-25695459949996281412024-02-29T15:16:00.007+07:002024-02-29T15:17:08.900+07:00Ebook - Telegram ChatBot : Membangun Chatbot Dengan .Net 8 dan Visual Studio 2022 <p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLfTtbPxhHbxPxCQrLFIE6xoYRlMS34zi7-sGiiq7MIX6nfF0Km55gJQq06iYwkeB9Kntk1UtDAAzZ13eDn8B-Nl70J9L8HAoPRg0Dktonms6pDydrOXZjP8gUhXEi4t1o5REG-gTIVYLCbFOzPgONNGiumntL4apKbk4B8MyDWAsOyZIylKtRf4olnrs/s2000/cover.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2000" data-original-width="1414" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLfTtbPxhHbxPxCQrLFIE6xoYRlMS34zi7-sGiiq7MIX6nfF0Km55gJQq06iYwkeB9Kntk1UtDAAzZ13eDn8B-Nl70J9L8HAoPRg0Dktonms6pDydrOXZjP8gUhXEi4t1o5REG-gTIVYLCbFOzPgONNGiumntL4apKbk4B8MyDWAsOyZIylKtRf4olnrs/w283-h400/cover.jpg" width="283" /></a></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><p></p><div class="separator" style="clear: both; text-align: justify;">Chatbot atau chatterbot adalah sebuah layanan obrolan robot/tokoh virtual dengan kecerdasan buatan atau AI (Artificial Intelligent) yang menirukan percakapan manusia melalui pesan suara, obrolan teks ataupun keduanya.</div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;">Pada dasarnya bots bekerja dengan cara melihat kata kunci dalam data yang masuk dan membalasnya dengan kata kunci yang paling cocok, atau pola kata-kata yang paling mirip dari basis data tekstual. Artinya, jika pengguna mengirim suatu permintaan maka bots akan membalasnya dengan respon yang spesifik sesuai dengan kata kunci yang dikirim.</div><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Buku ini membahas bagaimana membangun aplikasi ChatBot dengan menggunakan Telegram.Bot Library dan C# sebagai Bahasa pemogramannya. Dimana metode yang digunakan untuk menjelaskan pembahasan pada setiap bagian disertakan file pendukung untuk memudahkan dalam pemahaman para pembaca</div><div class="separator" style="clear: both;">Topik-topik yang dipilih dalam pembahasan, cocok baik untuk pemula maupun yang sudah berkecimpung lama dalam dunia pemograman. Penjelasan meliputi dari awal dimulai dari pengenalan Telegram ChatBot, Telegram.Bot Library, TelegramBot Framework dan bagaimana cara berkomunikasi dengan beberapa Azure Service, Seperti Azure AI Translator dan Azure Open AI.</div><div><div>Salah satu kelebihan buku ini adalah, setiap topik akan disertai dengan latihan, sehingga pembaca akan seperti dibimbing secara langsung oleh seorang Trainner. </div><div><br /></div><div>Buku ini bisa didapatkan <a href="https://play.google.com/store/books/details/Junindar_Tasripin_Telegram_ChatBot_Belajar_Membang?id=Xc73EAAAQBAJ" target="_blank">disini </a></div><div>Terima kasih</div><div>Wassalam</div></div></div></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-40228625291221481842024-02-19T17:47:00.003+07:002024-02-19T17:53:04.778+07:00Telegram Bot Framework dan Azure Open AI<p> Azure OpenAI Services adalah sejumlah layanan yang disediakan oleh Microsoft Azure yang memungkinkan pengembang untuk mengintegrasikan teknologi kecerdasan buatan yang dikembangkan oleh OpenAI ke dalam aplikasi mereka. Ini mencakup layanan seperti Azure Cognitive Services, yang menyediakan berbagai fitur AI dan Machine Learning, serta integrasi khusus dengan model-model canggih yang dikembangkan oleh OpenAI untuk tugas-tugas seperti pemrosesan bahasa alami, pengenalan gambar, dan lainnya.</p><p>Dengan menggunakan Azure OpenAI Services, pengembang dapat dengan mudah memanfaatkan kemampuan AI dan Machine Learning tanpa perlu mengembangkan model mereka sendiri dari awal. Ini mempercepat proses pengembangan aplikasi yang cerdas dan membantu dalam menciptakan solusi yang lebih canggih untuk berbagai macam masalah bisnis dan teknis.</p><p>Azure OpenAI Service menyediakan akses REST API ke model OpenAI yang powerfull termasuk seri model GPT-4, GPT-4 Turbo dengan Vision, GPT-3.5-Turbo. Selain itu, seri model GPT-4 dan GPT-3.5-Turbo baru kini telah tersedia secara umum. Model ini dapat dengan mudah disesuaikan dengan tugas spesifik namun tidak terbatas pada pembuatan konten, ringkasan, pemahaman gambar, pencarian semantik, dan terjemahan natural language ke kode. Pengguna dapat mengakses layanan melalui REST API, Python SDK, atau antarmuka berbasis web kami di Azure OpenAI Studio.</p><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhKoh_9AAFsZ-nqZDv_q4yAHRnDs1axzuBgzwIjBq01tHtwazNuT4pRxX7lVvCb0vLnqsj83yrLOEYigeWOJEdfQC7BydGC0D0UqSujWs3nel1v-oEA8SecaLMeF9zdIY6NDUt7SJKRL39ZWgdR5SCNaOqmzzJOSQeZN9BSQQJllzbt136pSomUaii44pg" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="207" data-original-width="486" height="170" src="https://blogger.googleusercontent.com/img/a/AVvXsEhKoh_9AAFsZ-nqZDv_q4yAHRnDs1axzuBgzwIjBq01tHtwazNuT4pRxX7lVvCb0vLnqsj83yrLOEYigeWOJEdfQC7BydGC0D0UqSujWs3nel1v-oEA8SecaLMeF9zdIY6NDUt7SJKRL39ZWgdR5SCNaOqmzzJOSQeZN9BSQQJllzbt136pSomUaii44pg=w400-h170" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgPsSQOUYkbtX7r1gRz4N1N1mLz1fnazTfQd92ykKyRIt9kAskYKyBnu4_xi09pQvB96LEFK-1o8s_2v2FnADRj21YIdhF0-cVu3K3sjHNmXgj0crhEKGs7KHu8G_JtiuzBCUgZOI8YmarXsa73Gfg3IrYNuSX0qFF6gFhQdWTZQpW5eEVz6KzLa-Uvo7o" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="425" data-original-width="251" height="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEgPsSQOUYkbtX7r1gRz4N1N1mLz1fnazTfQd92ykKyRIt9kAskYKyBnu4_xi09pQvB96LEFK-1o8s_2v2FnADRj21YIdhF0-cVu3K3sjHNmXgj0crhEKGs7KHu8G_JtiuzBCUgZOI8YmarXsa73Gfg3IrYNuSX0qFF6gFhQdWTZQpW5eEVz6KzLa-Uvo7o=w237-h400" width="237" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2024/02/19/telegram-bot-framework-dan-azure-open-ai/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.ChatGPT" target="_blank">disini</a>.</div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Wassalam</div></div></div><br /></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-36313067735150200932024-01-18T10:56:00.006+07:002024-01-18T11:01:08.671+07:00Telegram Bot Framework dan Azure AI Translator<p>Azure AI Translator adalah layanan terjemahan otomatis yang disediakan oleh Microsoft Azure. Layanan ini menggunakan kecerdasan buatan (AI) untuk menerjemahkan teks dan ucapan dari satu bahasa ke bahasa lain secara otomatis. Ini dapat digunakan untuk menerjemahkan teks pada aplikasi, situs web, atau platform lainnya secara real-time.</p><p>Azure AI Translator menggunakan teknologi terbaru dalam pemrosesan bahasa alami dan jaringan saraf untuk meningkatkan akurasi terjemahan antar bahasa. Layanan ini mendukung sejumlah besar bahasa dan dapat diintegrasikan dengan mudah ke dalam berbagai aplikasi dan platform melalui API (Antarmuka Pemrograman Aplikasi) yang disediakan oleh Azure.</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEikTLaciAQjqcmX9bPaI2y0aTgVZZ4MnSLHuO_IarLpx2Vrybd4BgGRmSyRBBB1Qp0F8KD8CJUe-bkurGsP_RcAXf52ZG9yoOh13P-puAC_CeJnvI_sMpVweCBq_Zdr9Z8UT9Gv_FpLDDslSY2D5PS8sjiqCUY8aRd32RYS9-gYJhdeKcorjNOGmFlaxlY" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="516" data-original-width="547" height="378" src="https://blogger.googleusercontent.com/img/a/AVvXsEikTLaciAQjqcmX9bPaI2y0aTgVZZ4MnSLHuO_IarLpx2Vrybd4BgGRmSyRBBB1Qp0F8KD8CJUe-bkurGsP_RcAXf52ZG9yoOh13P-puAC_CeJnvI_sMpVweCBq_Zdr9Z8UT9Gv_FpLDDslSY2D5PS8sjiqCUY8aRd32RYS9-gYJhdeKcorjNOGmFlaxlY=w400-h378" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiozRxuin_nSOYGforTiMWhBIN2AcYM31gHO0p3uaIVOohBmTwMfyPpTpPnNaThrQUaGJds_4ujwNAgJ99N_ChScyApskD_AOrluAh0rzbkfY8b83HYIawXoTbHhd6PJwz_vBwFBfvk1kocyE2zOARFs38_Iwd2E_SI3gsK4m7MufQG2PQpo_kZJgMkKuI" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="447" data-original-width="275" height="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEiozRxuin_nSOYGforTiMWhBIN2AcYM31gHO0p3uaIVOohBmTwMfyPpTpPnNaThrQUaGJds_4ujwNAgJ99N_ChScyApskD_AOrluAh0rzbkfY8b83HYIawXoTbHhd6PJwz_vBwFBfvk1kocyE2zOARFs38_Iwd2E_SI3gsK4m7MufQG2PQpo_kZJgMkKuI=w247-h400" width="247" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2024/01/18/telegram-bot-framework-dan-azure-ai-translator/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.Translator" target="_blank">disini</a>.</div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Wassalam</div></div></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-20175996105207807022024-01-02T10:50:00.004+07:002024-01-02T10:52:54.665+07:00Telegram Bot Framework Custom Control Part II<p>Pada latihan sebelumnya kita telah membuat chatbot sederhana dengan menggunakan beberapa control seperti Button, Progressbar, CalendarPicker, MonthPicker dan ToggleButton dengan menggunakan Telegram Bot Framework. Untuk latihan ini kita lanjutkan dengan bekerja menggunakan beberapa control lagi seperti MultiToggleButton, ButtonGrid/Paging, CheckedButtonL dan Notification. </p><p>Disarankan untuk membaca dan mengikuti latihan-latihan yang ada pada artikel sebelumnya disini <a href="https://junindar.blogspot.com/2023/12/telegram-bot-framework-custom-control.html">https://junindar.blogspot.com/2023/12/telegram-bot-framework-custom-control.html</a></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjfz-40Qzs49LepYJS7x_Q3d1ujVR8z4PAQgjo21LIHJFtwyV0tfixXloRxf4BiAaLhuWXwb539DGFDS9Y6oEJI7SePG9v0Us1f5aDkR1ycdLyRCyJ4DaYsLeIQFZN_NvF2mhuY9tce4RthpndIJ7NSD0DBBu-zt36AQvDuQqtkrrzggVRhcxZNus02tOY" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="611" data-original-width="825" height="237" src="https://blogger.googleusercontent.com/img/a/AVvXsEjfz-40Qzs49LepYJS7x_Q3d1ujVR8z4PAQgjo21LIHJFtwyV0tfixXloRxf4BiAaLhuWXwb539DGFDS9Y6oEJI7SePG9v0Us1f5aDkR1ycdLyRCyJ4DaYsLeIQFZN_NvF2mhuY9tce4RthpndIJ7NSD0DBBu-zt36AQvDuQqtkrrzggVRhcxZNus02tOY" width="320" /></a></div><br />Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2024/01/02/telegram-bot-framework-custom-control-part-ii/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.ControlPart2" target="_blank">disini</a>.<p></p><p>Terima kasih</p><p><br /></p><p>Wassalam</p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-50619219891805842622023-12-31T11:13:00.008+07:002023-12-31T11:33:04.375+07:00Telegram Bot Framework Custom Control Part I<p style="text-align: center;"></p><div style="text-align: justify;">Pada latihan sebelumnya kita telah membuat chatbot sederhana dengan memiliki beberapa command pada menu dengan menggunakan Telegram Bot Framework. Untuk latihan ini kita lanjutkan dengan membuat chatbot dengan menggunakan control basic seperti button, maupun custom control. Disarankan untuk membaca dan mengikuti latihan-latihan yang ada pada artikel sebelumnya disini <a href="https://junindar.blogspot.com/2023/12/pengenalan-telegram-bot-framework-pada-c.html">https://junindar.blogspot.com/2023/12/pengenalan-telegram-bot-framework-pada-c.html</a><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhgY5DRSeET06gA6ibeSSzM6JKoC1v75YfygQJpVB23ORYs30zp_JnoJRox4k2YtU8KzcI1e2JLQd6iLxTeszKR3RNvvUr9EErcx0X9F1QUpZoNL0aWNxB7CW7XyunzGN2tUTX3JHXk9dcqQmhL359knCNF23LLOc-nQjxaX-NfVRc6y1te0YCMo15bd9o" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="582" data-original-width="765" height="305" src="https://blogger.googleusercontent.com/img/a/AVvXsEhgY5DRSeET06gA6ibeSSzM6JKoC1v75YfygQJpVB23ORYs30zp_JnoJRox4k2YtU8KzcI1e2JLQd6iLxTeszKR3RNvvUr9EErcx0X9F1QUpZoNL0aWNxB7CW7XyunzGN2tUTX3JHXk9dcqQmhL359knCNF23LLOc-nQjxaX-NfVRc6y1te0YCMo15bd9o=w400-h305" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div><p></p><div class="separator" style="clear: both; text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/12/31/telegram-bot-framework-custom-control-part-i/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.Control" target="_blank">disini</a>.</div><div style="text-align: justify;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Wassalam</div></div></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-89245582378220758172023-12-20T10:30:00.004+07:002023-12-20T10:39:41.930+07:00Pengenalan Telegram Bot Framework Pada C#<p>Telegram Bot Framework adalah sebuah framework yang memungkinkan para programmer untuk membuat bot pada Telegram denagn menggunakan platform .NET. Framework ini menyediakan tool dan fitur yang mempermudah pembuatan dan implementasi bot Telegram menggunakan bahasa pemrograman seperti C#.</p><p>Dengan menggunakan Telegram Bot Framework, kita dapat mengakses API Telegram, memproses pesan, menjawab permintaan dari pengguna, dan mengelola berbagai fungsi bot, seperti mengirim pesan teks, media, menangani perintah, dan banyak lagi.</p><p>Terdapat banyak fasilitas pada framework ini, sehingga kita dapat mengembangkan bot yang powerfull dan fleksibel dengan menyediakan berbagai fungsi yang dapat digunakan untuk membuat bot yang sesuai dengan kebutuhan penggunaannya.</p><p>Telegram Bot Framework menggunakan beberapa library atau pustaka tertentu untuk memudahkan interaksi dengan API Telegram dan menyediakan berbagai fitur bagi para programmer. salah satunya adalah Telegram.Bot. Telegram.Bot adalah library utama yang digunakan dalam framework ini. Telegram.Bot merupakan library resmi dari Telegram untuk C#/.NET yang menyediakan akses ke API Telegram. library ini memungkinkan pengembang untuk membuat, mengelola, dan berinteraksi dengan bot Telegram menggunakan berbagai fitur yang disediakan oleh Telegram.</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEihJpKGP0Hic7SNWlEDq_ASd2TIMzQ2p2axn4PXKSVQAUBaHfNeQ3jU1diZo8QBN4n_jUw2y-cvbrolx6aqRb_hJ3iGv0_bw26xFKHEc0VRSiMSOJxr4-1XLT9f7aWr3YyPxrtmgWeLxVU-Vq1Q_QkmVgN9EEj_FcaM-nw1fB19J4ok5voNEmMYaHaz5-o" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="330" data-original-width="693" height="152" src="https://blogger.googleusercontent.com/img/a/AVvXsEihJpKGP0Hic7SNWlEDq_ASd2TIMzQ2p2axn4PXKSVQAUBaHfNeQ3jU1diZo8QBN4n_jUw2y-cvbrolx6aqRb_hJ3iGv0_bw26xFKHEc0VRSiMSOJxr4-1XLT9f7aWr3YyPxrtmgWeLxVU-Vq1Q_QkmVgN9EEj_FcaM-nw1fB19J4ok5voNEmMYaHaz5-o" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p></p><div class="separator" style="clear: both; text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/12/20/pengenalan-telegram-bot-framework-pada-c/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.Command" target="_blank">disini</a>.</div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Wassalam</div></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-82794432522708515682023-10-21T14:16:00.001+07:002023-10-21T14:22:44.484+07:00Telegram.Bot Pada C# : Send Message Part II<div style="text-align: justify;">Pada artikel sebelumnya telah dijelaskan bagaimana cara mengirimkan pesan teks, gambar, sticker maupun audio. Artikel ini akan menyambung dari artikel sebelumnya, dimana disini akan dijelaskan bagaimana mengirim pesan berupa MediaGroup, dokumen, animasi, kontak dan lokasi.
Untuk memudahkan dalam memahami artikel ini, disarankan untuk membaca artikel sebelumnya <a href="https://junindar.blogspot.com/2023/09/telegrambot-pada-c-send-message-part-i.html" target="_blank">disini</a>.</div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiBavssW5A8wx2HlcXDh9aUY_laZb3sgthENBOq_7CWwMzGKU8f2Tzw1g0q-lIIj7rr9qR0r54peTmgOaJOOWyvhipvmmiFFUn4id_6Lr1yV7nh4BcpvIvzL-9nrt5q7_pgc0pxvlRI8inp8nd66UfxYWSQNKMHaEw_10p5q4HnhUMYzlXfLUIZc7hYRI8" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="360" data-original-width="282" height="240" src="https://blogger.googleusercontent.com/img/a/AVvXsEiBavssW5A8wx2HlcXDh9aUY_laZb3sgthENBOq_7CWwMzGKU8f2Tzw1g0q-lIIj7rr9qR0r54peTmgOaJOOWyvhipvmmiFFUn4id_6Lr1yV7nh4BcpvIvzL-9nrt5q7_pgc0pxvlRI8inp8nd66UfxYWSQNKMHaEw_10p5q4HnhUMYzlXfLUIZc7hYRI8" width="188" /></a></div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhIDZ1p5a-oDkdar5XtggUp-kWagnutONwiL9dJYNDs9eOuGXxN5cCaE6mEBbm5Sv4NvYo3eH5alQfWZxWDYSeY-UnRxmtmf1KnX5Mpgu7MSzhgFHJ3OHguXEsVeiDfrKra2GIYtz0H5EgKUONBiPqV4nUK1Zmcjo28-lne2QX3QjGyVfCNaA6zAJ79Cx0" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="415" data-original-width="317" height="240" src="https://blogger.googleusercontent.com/img/a/AVvXsEhIDZ1p5a-oDkdar5XtggUp-kWagnutONwiL9dJYNDs9eOuGXxN5cCaE6mEBbm5Sv4NvYo3eH5alQfWZxWDYSeY-UnRxmtmf1KnX5Mpgu7MSzhgFHJ3OHguXEsVeiDfrKra2GIYtz0H5EgKUONBiPqV4nUK1Zmcjo28-lne2QX3QjGyVfCNaA6zAJ79Cx0" width="183" /></a></div><br /><div style="text-align: justify;"><br /></div></div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/10/21/telegram-bot-pada-c-send-message-part-ii/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.SendMessagePart2" target="_blank">disini</a>.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Terima kasih</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Wassalam</div></div><br /><br /></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-48442416357731678762023-09-25T09:32:00.006+07:002023-09-30T11:23:15.423+07:00Telegram.Bot Pada C# : Send Message Part I<p><span style="text-align: justify;">Pada latihan sebelumnya kita telah membuat
aplikasi chatbot sederhana menggunakan Telegram.Bot library. Dimana kita sudah
bisa melakukan percakapan dengan bot tersebut. Pada artikel ini akan dibahas
bagaimana mengirimkan pesan teks, photo, sticker dan audio pada chatbot.</span></p><p><span style="text-align: justify;">Disarankan untuk membaca dan mengikuti latihan-latihan yang ada pada artikel sebelumnya disini <a href="https://junindar.blogspot.com/2023/09/pengenalan-telegrambot-pada-c.html">https://junindar.blogspot.com/2023/09/pengenalan-telegrambot-pada-c.html</a></span></p><p><span style="text-align: justify;"></span></p><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgTKSQjQ_Ka7noh4fTyhiqNnDA3GZhKDbk5-gKSZ6gfQw48HskonxImWvQWbBD1pM3BQhPuHPCLSfShe_ysc_i0M-tzIBs-rV7eCdl1FwMpMgkNyoeNleERrzSBDd8kaqQ48-l9QqBA5EABKOAqpMWsDXqPcK1aGfLmPkfZk5vyd5aBA-BBrAJrDF6WwWc" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="485" data-original-width="772" height="251" src="https://blogger.googleusercontent.com/img/a/AVvXsEgTKSQjQ_Ka7noh4fTyhiqNnDA3GZhKDbk5-gKSZ6gfQw48HskonxImWvQWbBD1pM3BQhPuHPCLSfShe_ysc_i0M-tzIBs-rV7eCdl1FwMpMgkNyoeNleERrzSBDd8kaqQ48-l9QqBA5EABKOAqpMWsDXqPcK1aGfLmPkfZk5vyd5aBA-BBrAJrDF6WwWc=w400-h251" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p></p><p style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/09/25/telegram-bot-pada-c-send-message-part-i/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.SendMessage" target="_blank">disini</a>.</p><p style="text-align: justify;">Terima kasih</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Wassalam</p><p><span style="text-align: justify;"><br /></span></p>
Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-61617668084585002602023-09-16T09:54:00.005+07:002023-09-16T11:34:16.384+07:00Pengenalan Telegram.Bot Pada C#<p>Chatbot atau chatterbot adalah sebuah layanan obrolan robot/tokoh virtual dengan kecerdasan buatan atau AI (Artificial Intelligent) yang menirukan percakapan manusia melalui pesan suara, obrolan teks ataupun keduanya.</p><p>Pada dasarnya bots bekerja dengan cara melihat kata kunci dalam data yang masuk dan membalasnya dengan kata kunci yang paling cocok, atau pola kata-kata yang paling mirip dari basis data tekstual. Artinya, jika pengguna mengirim suatu permintaan maka bots akan membalasnya dengan respon yang spesifik sesuai dengan kata kunci yang dikirim.<br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAo_Bk5qj6L7isHXyGzg4EkwKTMKlLn4E5updtsN9N5PWcym4Pw2Ck67CmSx0XqXS6P98vuk5-LRDmjvqUb91aRc9nq1kFHIkRhj2x0hzNWeD2fkqS0wFBYMZX0vj4u07IpP6oWxGsXscu8hmmAw1RPOar0O5bNxPzoxJaSF37_pW9SEhR4KsKV7-gRew/s225/telegram%20logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="225" data-original-width="225" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAo_Bk5qj6L7isHXyGzg4EkwKTMKlLn4E5updtsN9N5PWcym4Pw2Ck67CmSx0XqXS6P98vuk5-LRDmjvqUb91aRc9nq1kFHIkRhj2x0hzNWeD2fkqS0wFBYMZX0vj4u07IpP6oWxGsXscu8hmmAw1RPOar0O5bNxPzoxJaSF37_pW9SEhR4KsKV7-gRew/s1600/telegram%20logo.png" width="225" /></a></div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEj3Wdtg54Jws4WKo20wwffJW3ZHoX4gTC3uUPVMZR_6qhXRqMcgLHdwQE7ZaD5p5yzB58_aqcCqaPmMCCZA9iz3p7_TPlCN09uaiNqugM1OFACblgyNtHJ0c6_4ss2CetOXgfgxzUZ7N8ZqEcZPTQAWiSTP_zME_6s1PcxE-AeeYg9cFT8VT6f1kwFANhE" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="670" data-original-width="606" height="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEj3Wdtg54Jws4WKo20wwffJW3ZHoX4gTC3uUPVMZR_6qhXRqMcgLHdwQE7ZaD5p5yzB58_aqcCqaPmMCCZA9iz3p7_TPlCN09uaiNqugM1OFACblgyNtHJ0c6_4ss2CetOXgfgxzUZ7N8ZqEcZPTQAWiSTP_zME_6s1PcxE-AeeYg9cFT8VT6f1kwFANhE=w362-h400" width="362" /></a></div><br /><br /></div><p></p><p>Dilansir dari BT, Telegram adalah aplikasi pesan instan yang dapat digunakan secara gratis dengan menggunakan Wi-Fi atau kuota internet.</p><p>Pada dasarnya aplikasi ini memang tidak berbeda jauh dengan WhatsApp atau Facebook Messenger. Meski dua aplikasi itu populer, saat ini banyak sekali yang menggunakan Telegram.</p><p>Artikel ini akan membahas pengenalan Telegram.Bot Library dengan menggunakan C#.</p><div><div>Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/09/16/pengenalan-telegram-bot-pada-c/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/TelegramBot/TelegramBot.SendMessage" target="_blank">disini</a>.</div><div><br /></div><div>Terima kasih</div><div><br /></div><div>Wassalam</div></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-47752711721534254982023-07-24T14:04:00.004+07:002023-07-24T17:55:21.179+07:00MudBlazor Dialog dan Snackbar Pada Blazor<p style="text-align: justify;">Dialog adalah jendela kecil yang meminta pengguna untuk membuat keputusan atau memasukkan informasi tambahan. Dialog biasanya tidak memenuhi layar dan digunakan untuk mengharuskan pengguna untuk melakukan tindakan sebelum bisa melanjutkan. Pada MudBlazor untuk menggunakan dialog pada aplikasi, kita dapat menggunakan komponen MudDialog. Sebelumnya kita harus melakukan beberapa langkah sebelum menggunakan MudDialog. Tambahkan “<MudDialogProvider />“ pada MainLayout.razor (dibawah MudLayout element). </p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgvUoUMaqGV0Qn4_jCn1IsJjmnyIz1Jc2llg6XeK3UsHCtngYHY3xlJoy50iCTn6emHRHRoD6bcvH2oULY_rRxEBQ0x62b7KuQZ6UJND0KNFscxZlVghj46rQ0EG9uKGzZ_ASEiCZ5JvGUaEWNGWuXNj4ro_hZteBRxPm6wJC5Ss7G_sBtj-hH_SxB7MnQ" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="131" data-original-width="500" height="84" src="https://blogger.googleusercontent.com/img/a/AVvXsEgvUoUMaqGV0Qn4_jCn1IsJjmnyIz1Jc2llg6XeK3UsHCtngYHY3xlJoy50iCTn6emHRHRoD6bcvH2oULY_rRxEBQ0x62b7KuQZ6UJND0KNFscxZlVghj46rQ0EG9uKGzZ_ASEiCZ5JvGUaEWNGWuXNj4ro_hZteBRxPm6wJC5Ss7G_sBtj-hH_SxB7MnQ" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p></p><div class="separator" style="clear: both; text-align: justify;">Snackbar atau biasa juga disebut dengan Toast adalah sebuah alert untuk menampilkan sebuah pesan secara dinamik pada pengguna didalam aplikasi web.</div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: justify;">Snackbar pada MudBlazor menggunakan Isnackbar Service dan “MudSnackbarProvider“, Sebelumnya kita harus melakukan beberapa langkah sebelum menggunakan Snackbar. Tambahkan “<MudSnackbarProvider/>“ pada MainLayout.razor (dibawah MudLayout element).</div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjvv8a5yDjGVm3L2lGO2dRC44pQ7ESyRtwAjm2TZ-18HknIBrp_Dehtrfs67AlDtWgWgQZchAeaDtZQs-YMctk1RF1bsn2VsoUFoB9nkVtKoWWwVkVHqnvoGot1ANKqn02VchZ2DK8QZfFJiC5A1fIi4RzZ8aOaQguge5xuvORvib9b_-VV1dY8YJVbOi8" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="253" data-original-width="285" height="240" src="https://blogger.googleusercontent.com/img/a/AVvXsEjvv8a5yDjGVm3L2lGO2dRC44pQ7ESyRtwAjm2TZ-18HknIBrp_Dehtrfs67AlDtWgWgQZchAeaDtZQs-YMctk1RF1bsn2VsoUFoB9nkVtKoWWwVkVHqnvoGot1ANKqn02VchZ2DK8QZfFJiC5A1fIi4RzZ8aOaQguge5xuvORvib9b_-VV1dY8YJVbOi8" width="270" /></a></div><br />Artikel ini melanjutkan dari artikel sebelumnya, yang membahas komponen-komponen yang terdapat pada MudBlazor. Komponen-komponen tersebut sering digunakan dalam sebuah aplikasi web. Beberapa komponen yang akan dijelaskan pada artikel ini adalah Dialog dan Snackbar. Dikarenakan artikel ini masih melanjutkan fitur-fitur yang ada pada MudBlazor, maka sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini. <a href="https://junindar.blogspot.com/2022/12/mudblazor-input-component-picker-pada.html">https://junindar.blogspot.com/2022/12/mudblazor-input-component-picker-pada.html</a> dan <a href="https://junindar.blogspot.com/2023/01/mudblazor-chart-component-pada-blazor.html">https://junindar.blogspot.com/2023/01/mudblazor-chart-component-pada-blazor.html</a> . </div></div><p style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/07/24/mudblazor-dialog-dan-snackbar-pada-blazor/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Dialog" target="_blank">disini</a>.</p><p style="text-align: justify;">Terima kasih</p><p style="text-align: justify;">Wassalam</p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-81455741956907510972023-03-07T07:57:00.005+07:002023-03-07T07:59:29.883+07:00Ebook - Microsoft Blazor : Mudah Membangun Web Aplikasi Dengan MudBlazor<p style="text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmd1y4fXQ44XawjC3BwSf_QQlyRh_m6htbO0gtXxnMNbw786AK8ajWZgzJLv_a9VUU2NjbgoKGld1x5Pk7HQagU-_NgH-gk7AzUlqKRdRUoqFgbr7pxzREKRNHlWrvKWS7W7kh0e61rcye4pnsuYxjOKCkeAnpZJiZeI27aCaHzev2aFjLqjKhEESP/s2245/Cover%20MudBlazor.jpg" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="2245" data-original-width="1587" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmd1y4fXQ44XawjC3BwSf_QQlyRh_m6htbO0gtXxnMNbw786AK8ajWZgzJLv_a9VUU2NjbgoKGld1x5Pk7HQagU-_NgH-gk7AzUlqKRdRUoqFgbr7pxzREKRNHlWrvKWS7W7kh0e61rcye4pnsuYxjOKCkeAnpZJiZeI27aCaHzev2aFjLqjKhEESP/w283-h400/Cover%20MudBlazor.jpg" width="283" /></a></p><p style="text-align: left;"><span style="text-align: justify;">MudBlazor adalah sebuah material design component framework yang dibangun khusus untuk Blazor (https://mudblazor.com/ ). Terdapat banyak komponen pada MudBlazor seperti chart, grid dan lain-lain untuk membantu dalam membangun aplikasi web dengan menggunakan blazor. Seluruh komponen pada MudBlazor dibangun dengan menggunakan C# tanpa javascript kecuali jika sangat diperlukan. </span></p><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;">Buku ini membahas bagaimana membangun aplikasi Web dengan menggunakan Microsoft Blazor. Dimana metode yang digunakan untuk menjelaskan pembahasan pada setiap bagian disertakan file pendukung untuk memudahkan dalam pemahaman para pembaca</div><div class="separator" style="clear: both;">Topik-topik yang dipilih dalam pembahasan, cocok baik untuk pemula maupun yang sudah berkecimpung lama dalam dunia pemograman. Penjelasan meliputi dari awal dimulai dari pengenalan Blazor, MudBlazor dan cara penggunaan komponen-komponen yang terdapat pada MudBlazor, sehinggal lebih mudah dalam membagun aplikasi menggunakan Blazor. </div><div class="separator" style="clear: both;">Salah satu kelebihan buku ini adalah, setiap topik akan disertai dengan latihan, sehingga pembaca akan seperti dibimbing secara langsung oleh seorang Trainner. </div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Buku ini bisa didapatkan <a href="https://play.google.com/store/books/details?id=q9usEAAAQBAJ&pli=1" target="_blank">disini </a></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;">Wassalam</div></div><p><br /></p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-20974342171813251072023-01-06T09:51:00.009+07:002023-07-24T14:04:41.554+07:00MudBlazor Chart Component Pada Blazor<p style="text-align: justify;">Chart atau grafik adalah representasi grafis untuk visualisasi data, di mana data diwakili oleh simbol, seperti batang dalam bagan batang, garis dalam bagan garis, atau irisan dalam bagan pai. Chart sering digunakan untuk memudahkan pemahaman tentang sejumlah besar data dan hubungan antara bagian-bagian data. </p><p style="text-align: justify;">Grafik biasanya dapat dibaca lebih cepat daripada data mentah. Mereka digunakan dalam berbagai bidang, dan dapat dibuat dengan tangan (seringkali di atas kertas grafik) atau dengan komputer menggunakan aplikasi charting. </p><p style="text-align: justify;">Jenis chart tertentu lebih berguna untuk menyajikan kumpulan data tertentu daripada yang lain. Misalnya, data yang menyajikan persentase dalam kelompok yang berbeda (seperti "puas, tidak puas, tidak yakin") sering ditampilkan dalam diagram lingkaran, tetapi mungkin lebih mudah dipahami jika disajikan dalam diagram batang horizontal.</p><p style="text-align: justify;">Pada MudBlazor komponen chart disebut dengan nama “MudChart“. Terdapat 4 jenis chart yang tersedia pada MudBlazor, yaitu Bar, Donut, Line dan Pie chart.</p><p style="text-align: justify;">Sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini (<a href="http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html">http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html</a>), (<a href="http://junindar.blogspot.com/2022/12/mudblazor-input-component-pada-blazor.html">http://junindar.blogspot.com/2022/12/mudblazor-input-component-pada-blazor.html</a>) dan (<a href="http://junindar.blogspot.com/2022/12/mudblazor-input-component-picker-pada.html">http://junindar.blogspot.com/2022/12/mudblazor-input-component-picker-pada.html</a>).</p><p></p><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiXkj5NsNk_Xl2eLWwDXK0HxPPY-Molaw2UzV0qbdbbJ4h-yUdEZy0GKjHSc-Ses8r6LkNaZntYUIaSaqNAnCLTq1X7Ro_ywGT98zjPtvgNN9aMrRNXkOsqSHsyQRVA5zztRphAEHWjD7uHWaWPIstUTyXoxDp04sY4YwO6gIySj3-xzdmItBqf8GdZ" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="782" data-original-width="1024" height="240" src="https://blogger.googleusercontent.com/img/a/AVvXsEiXkj5NsNk_Xl2eLWwDXK0HxPPY-Molaw2UzV0qbdbbJ4h-yUdEZy0GKjHSc-Ses8r6LkNaZntYUIaSaqNAnCLTq1X7Ro_ywGT98zjPtvgNN9aMrRNXkOsqSHsyQRVA5zztRphAEHWjD7uHWaWPIstUTyXoxDp04sY4YwO6gIySj3-xzdmItBqf8GdZ" width="314" /></a></div><br /><br /></div><p></p><p style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-chart-component-pada-blazor/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Chart" target="_blank">disini</a>.</p><p>Terima kasih</p><p>Wassalam</p><div><br /></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-5308635788768076882022-12-12T11:49:00.007+07:002023-06-02T16:36:35.699+07:00MudBlazor Input Component (Picker) Pada Blazor – Part 3<p style="text-align: justify;"> Artikel ini melanjutkan dari artikel sebelumnya, yang membahas komponen-komponen yang terdapat pada MudBlazor. Komponen-komponen tersebut sering digunakan dalam sebuah aplikasi web. Beberapa komponen yang akan dijelaskan pada artikel ini adalah Color Picker, Date Picker dan Time Picker. Dikarenakan artikel ini masih melanjutkan fitur-fitur yang ada pada MudBlazor, maka sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini. <a href="http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html">http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html</a> dan <a href="http://junindar.blogspot.com/2022/12/mudblazor-input-component-pada-blazor.html">http://junindar.blogspot.com/2022/12/mudblazor-input-component-pada-blazor.html</a> . </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmjos0RzOHLQ5Kz9-Waff-l-LFFJkRmByaSrHpjHaX77rPrcQcubDbLMND57_bc4Q1w8TpTaeaon9flJCa-o47zmxJ_hAcBwwIiiMZWF1TtY6Q4TP8kJ5s8K0TS1BYAoSrKUvfkG6ZBbyG5Y8DoE5eAOzDqm9O6WwuGQrhmOz8m-_OjlspY40FVhV/s1125/Blazor-ColorPicker.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="555" data-original-width="1125" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmjos0RzOHLQ5Kz9-Waff-l-LFFJkRmByaSrHpjHaX77rPrcQcubDbLMND57_bc4Q1w8TpTaeaon9flJCa-o47zmxJ_hAcBwwIiiMZWF1TtY6Q4TP8kJ5s8K0TS1BYAoSrKUvfkG6ZBbyG5Y8DoE5eAOzDqm9O6WwuGQrhmOz8m-_OjlspY40FVhV/s320/Blazor-ColorPicker.PNG" width="320" /></a></div><p style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-input-component-picker-pada-blazor-part-3/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Picker" target="_blank">disini</a>.</p><p style="text-align: justify;">Terima kasih</p><p style="text-align: justify;">Wassalam</p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-9592218935015132622022-12-05T14:17:00.004+07:002023-06-02T16:36:11.128+07:00MudBlazor Input Component Pada Blazor – Part 2<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipoRS1aalKAD6PfY7eUv6rMkIKhwM_1wQSm_gIZsc4rMLPAk6HjhE6Q0Sw6qGificcvGC2OQJseD5yfXUd7qmZBvXJyZhAezS-BaexwV1Dq2_YhRrYEy7TP6nUOX6py6LANIxs0apDTHrikLW7GsbowBDovhKjW_agERMLBqJxNt4Uu1usJ6Kt-6mz/s1152/Blazor-Compenent2.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="610" data-original-width="1152" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipoRS1aalKAD6PfY7eUv6rMkIKhwM_1wQSm_gIZsc4rMLPAk6HjhE6Q0Sw6qGificcvGC2OQJseD5yfXUd7qmZBvXJyZhAezS-BaexwV1Dq2_YhRrYEy7TP6nUOX6py6LANIxs0apDTHrikLW7GsbowBDovhKjW_agERMLBqJxNt4Uu1usJ6Kt-6mz/w400-h211/Blazor-Compenent2.PNG" width="400" /></a></div><p style="text-align: justify;">Artikel ini melanjutkan dari artikel sebelumnya, yang membahas komponen-komponen Input yang terdapat pada MudBlazor. Komponen-komponen tersebut sering digunakan dalam sebuah aplikasi web. Beberapa komponen yang akan dijelaskan pada artikel ini adalah Radio Button, Switch, CheckBox dan AutoComplete. Dikarenakan artikel ini masih melanjutkan fitur-fitur yang ada pada MudBlazor, maka sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini. <a href="http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html">http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html</a> . Perlu diketahui, untuk artikel ini masih akan menggunakan blazor project yang telah kita buat pada artikel sebelumnya.</p><p style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-input-component-pada-blazor-part-2/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/Blazor_Component" target="_blank">disini</a>.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Terima kasih</p><p style="text-align: justify;">Wassalam</p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-34775065202232897682022-10-28T10:51:00.005+07:002023-06-02T16:35:49.725+07:00MudBlazor Input Component Pada Blazor – Part 1<p> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRv-mbPCqwl_50AVvAsFdBQ--HVaJGuT-J2Dz4zrlMPYvtCtplxnss1efbcsEFFIsR39QrHX2PPG8oG7fp7s3a7-Nkp4E-JFI0Yq1EH_wZ200ep91fwSEqFrzHea1ASWKK2JdjWO_kjZdzNjDZeU790rAOU20Ow5JfwrcE6SJ5SXFlYW8p2_y7jwf/s1161/MudBlazorInput.PNG" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="339" data-original-width="1161" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRv-mbPCqwl_50AVvAsFdBQ--HVaJGuT-J2Dz4zrlMPYvtCtplxnss1efbcsEFFIsR39QrHX2PPG8oG7fp7s3a7-Nkp4E-JFI0Yq1EH_wZ200ep91fwSEqFrzHea1ASWKK2JdjWO_kjZdzNjDZeU790rAOU20Ow5JfwrcE6SJ5SXFlYW8p2_y7jwf/w400-h116/MudBlazorInput.PNG" width="400" /></a></p><div class="separator" style="clear: both; text-align: justify;">Artikel ini membahas komponen-komponen Input yang terdapat pada MudBlazor. Komponen-komponen tersebut sering digunakan dalam sebuah aplikasi web. Beberapa komponen yang akan dijelaskan pada artikel ini adalah Text Field, Numeric Field dan Select. Dikarenakan artikel ini masih melanjutkan fitur-fitur yang ada pada MudBlazor, maka sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini (<a href="http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html">http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html</a>), (<a href="http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-1.html">http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-1.html</a>), (<a href="http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-2.html">http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-2.html</a>) dan (<a href="http://junindar.blogspot.com/2022/08/mudblazor-table-pada-blazor-part-3.html">http://junindar.blogspot.com/2022/08/mudblazor-table-pada-blazor-part-3.html</a>).</div><p></p><div class="separator" style="clear: both; text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-input-component-pada-blazor-part-1/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Input" target="_blank">disini</a>.</div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;">Wassalam</div></div><br />Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-27133402725419464852022-08-22T11:00:00.006+07:002023-06-02T16:35:27.654+07:00MudBlazor Table Pada Blazor – Part 3<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD2Rq-ZE67AMByoXFgtCjv657DKaqPPt0SgsRFdgGMbAdvYzcHJntu7s2Yn6TzLywEK0amZLSQyOZ8UO2G_SRzvtrYRdvcO1IF3TGD9XJDxochqF41qKJrk5zxzT6hX5641PxbUmKdJoaqip4KnRAQzPdjCzGQmNCPcAqzlU63es_WrxnijoRGQPXO/s1042/blazor-component3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="544" data-original-width="1042" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD2Rq-ZE67AMByoXFgtCjv657DKaqPPt0SgsRFdgGMbAdvYzcHJntu7s2Yn6TzLywEK0amZLSQyOZ8UO2G_SRzvtrYRdvcO1IF3TGD9XJDxochqF41qKJrk5zxzT6hX5641PxbUmKdJoaqip4KnRAQzPdjCzGQmNCPcAqzlU63es_WrxnijoRGQPXO/w400-h209/blazor-component3.png" width="400" /></a></div><p style="text-align: justify;">Artikel ini melanjutkan dari artikel sebelumnya, yang membahas fungsi-fungsi yang ada pada MudBlazor Table (MudTable). Oleh karena itu sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini (<a href="http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html">http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html</a>) dan (<a href="http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-2.html">http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-2.html</a>). Perlu diketahui, untuk artikel ini masih akan menggunakan blazor project yang telah kita buat pada artikel sebelumnya.</p><p style="text-align: justify;">Pada dua artikel sebelumnya telah dibahas bagaimana cara menampilkan pada MudTable berikut dengan fungsi filter, sort maupun pagination, tetapi semua fitur tersebut menggunakan method Client Side. Dimana seluruh data akan diload terlebih dahulu, sehingga jika kita memiliki data yang sangat besar, maka proses loading data akan sangat lama sekali. </p><p style="text-align: justify;">Sedangkan untuk artikel ini kita akan menggunakan method Server Side, sehingga proses filter, sorting dan paging akan dilakukan pada backend. Dengan menggunakan method ini kita tidak perlu lagi menggunakan property “Items“ dan “Filter“ pada MudTable.</p><p style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-table-pada-blazor-part-3/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Table" target="_blank">disini</a>.</p><p style="text-align: justify;">Terima kasih</p><p style="text-align: justify;">Wassalam</p><div style="text-align: justify;"><br /></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-50177897594444212252022-07-21T14:36:00.008+07:002023-06-02T16:35:07.654+07:00MudBlazor Table Pada Blazor – Part 2<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIlpggl4_NXMFrDGV6oSSls4v1niAQMidknK3heHHNdidRqQVIz8iVaWnbJqkCl5mtVTqeT8Dt1x1bTlbvvk8njDqDNKQlXs-btTdb8VmZWECW-8wHuJVd-kkn3QjfJj4Mg_Zgt23M_aB7tjDfYm0kjoor8Qy0tORyZa34J4foMf-GBWz1Tz0j-sr/s1171/Blazor-Table2.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="762" data-original-width="1171" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIlpggl4_NXMFrDGV6oSSls4v1niAQMidknK3heHHNdidRqQVIz8iVaWnbJqkCl5mtVTqeT8Dt1x1bTlbvvk8njDqDNKQlXs-btTdb8VmZWECW-8wHuJVd-kkn3QjfJj4Mg_Zgt23M_aB7tjDfYm0kjoor8Qy0tORyZa34J4foMf-GBWz1Tz0j-sr/w400-h260/Blazor-Table2.PNG" width="400" /></a></div><p></p><div class="separator" style="clear: both; text-align: justify;">Artikel ini melanjutkan dari artikel sebelumnya, yang membahas fungsi-fungsi yang ada pada MudBlazor Table (MudTable). Oleh karena itu sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini (<a href="http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html">http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html</a> dan <a href="http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-1.html">http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-1.html</a> ). </div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;">Pada artikel sebelumnya telah dibahas bagaimana membuat fungsi Filtering, paging dan multi selection pada MudTable. Sedangkan untuk artikel ini kita akan membahas beberapa fitur lagi yang terdapat pada MudBlazor seperti Grouping dan kustomisasi header-footer. Perlu diketahui, pada artikel ini kita masih akan menggunakan blazor project yang telah kita buat pada artikel sebelumnya.</div><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-table-pada-blazor-part-2/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Table" target="_blank">disini</a>.</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;">Wassalam</div></div></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-51025709161156452772022-07-12T10:20:00.005+07:002023-06-02T16:34:43.094+07:00MudBlazor Table Pada Blazor – Part 1<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUeLcBqG8wPW4f7e5794ze7ObPnW5SjzALNoucvsbC_8AHptYX7E55PZ4a2kh97Yfj65DjXhlboLZfpoeqPs6Cp2nbx-iSwuomL2Z-92mRQmsHxYlDHAQcsYDkUzAbjsNoxbnOvRi26wf-3HcN1YuZtY7zD7ebYdP5WO49LBSzXZ2_27RPd0Qd8wL/s1135/Blazor-Table1.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="649" data-original-width="1135" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUeLcBqG8wPW4f7e5794ze7ObPnW5SjzALNoucvsbC_8AHptYX7E55PZ4a2kh97Yfj65DjXhlboLZfpoeqPs6Cp2nbx-iSwuomL2Z-92mRQmsHxYlDHAQcsYDkUzAbjsNoxbnOvRi26wf-3HcN1YuZtY7zD7ebYdP5WO49LBSzXZ2_27RPd0Qd8wL/w400-h229/Blazor-Table1.PNG" width="400" /></a></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE" style="mso-ansi-language: DE;">Untuk artikel ini akan dijelaskan bagaimana
menggunakan MudBlazor Table <span style="mso-spacerun: yes;"> </span>pada sebuah
project, sebelum melanjutkan artikel ini pastikan telah mengikuti artikel
sebelumnya disini <span class="MsoHyperlink"><a href="http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html">http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html</a></span>
. Pada artikel sebelumnya telah dijelaskan bagaimana menambahkan dan melakukan
konfigurasi MudBlazor<span style="mso-spacerun: yes;"> </span>pada project.
Sehingga pada artikel ini pembahasan hanya fokus bagaimana menggunakan
MudBlazor Table beserta fungsi-fungsinya.<o:p></o:p></span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE" style="mso-ansi-language: DE;"></span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-table-pada-blazor-part-1/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Table" target="_blank">disini</a>.</p><div style="text-align: justify;"><div>Terima kasih</div><div>Wassalam</div></div><br /><p></p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-85096593781162847302022-03-02T09:34:00.007+07:002022-03-02T09:34:55.468+07:00Ebook - Microsoft Blazor: Membangun Aplikasi Web Dengan Mudah dan Cepat<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgU0qgMfIeaWOg7fy0Lihooi1ewYcZOX9ny3eauBbNKEsaWgpsy1wIMu9b3ywU4NebnrqeguapJwWwXHFv9BsS1nO-xdlxXSIFLbRv6kjsbsbvHwqIIIDAm-d9Lqoq-Lmy7EGaAbqFZj7yw7cWJ-KqvXnY99naSj9SWVWVYfH2Y4WcPDXBKVxYBilkj=s2245" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2245" data-original-width="1587" height="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEgU0qgMfIeaWOg7fy0Lihooi1ewYcZOX9ny3eauBbNKEsaWgpsy1wIMu9b3ywU4NebnrqeguapJwWwXHFv9BsS1nO-xdlxXSIFLbRv6kjsbsbvHwqIIIDAm-d9Lqoq-Lmy7EGaAbqFZj7yw7cWJ-KqvXnY99naSj9SWVWVYfH2Y4WcPDXBKVxYBilkj=w283-h400" width="283" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p></p><div class="separator" style="clear: both; text-align: justify;">Buku ini membahas bagaimana membangun aplikasi Web dengan menggunakan Microsoft Blazor. Dimana metode yang digunakan untuk menjelaskan pembahasan pada setiap bagian disertakan file pendukung untuk memudahkan dalam pemahaman para pembaca</div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;">Topik-topik yang dipilih dalam pembahasan, cocok baik untuk pemula maupun yang sudah berkecimpung lama dalam dunia pemograman. Penjelasan meliputi dari awal dimulai dari pengenalan ASP.NET Core, Entity Framework Core (EF Core), Blazor Server App dan cara membangun aplikasi web. </div><div class="separator" style="clear: both;">Salah satu kelebihan buku ini adalah, setiap topik akan disertai dengan latihan, sehingga pembaca akan seperti dibimbing secara langsung oleh seorang Trainner.</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Buku ini bisa didapatkan <a href="https://play.google.com/store/books/details?id=HKZhEAAAQBAJ" target="_blank">disini </a></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;">Wassalam</div></div></div><p><br /></p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-88247983525014082762021-12-28T08:58:00.006+07:002023-06-02T16:33:58.567+07:00MudBlazor Component Pada Blazor – Part 1<p><span style="text-align: justify;">MudBlazor adalah sebuah material design component framework yang dibangun khusus untuk Blazor (https://mudblazor.com/ ). Terdapat banyak komponen pada MudBlazor seperti chart, grid dan lain-lain untuk membantu dalam membangun aplikasi web dengan menggunakan blazor. Seluruh komponen pada MudBlazor dibangun dengan menggunakan C# tanpa javascript kecuali jika sangat diperlukan. Dan dokumentasi untuk penggunaan MudBlazor ini sangat lengkap sehingga membantu para developer untuk menggunakannya.</span></p><div class="separator" style="clear: both; text-align: justify;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVC8l-DEua9u0hzf1S5eZhx1k_epIs5lSAkQWR6iSPAxOheY32gLTNw75eKDtZQviz1FhILl6j04HnWzGPrNFl0Cml8mzTmyVT5piKMnJ-Bx7mjK0Agy3RmYcKKNMGbnL3Nzpaqt5Yyo/" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="219" data-original-width="404" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVC8l-DEua9u0hzf1S5eZhx1k_epIs5lSAkQWR6iSPAxOheY32gLTNw75eKDtZQviz1FhILl6j04HnWzGPrNFl0Cml8mzTmyVT5piKMnJ-Bx7mjK0Agy3RmYcKKNMGbnL3Nzpaqt5Yyo/" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div><div class="separator" style="clear: both; text-align: justify;">Pada artikel ini akan dijelaskan bagaimana menggunakan MudBlazor pada sebuah project, dari bagaimana cara install MudBlazor sampai dengan melakukan kustomisasi MudBlazor Theme (MudTheme). </div><p></p><div class="separator" style="clear: both; text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2023/06/02/mudblazor-component-pada-blazor-part-1/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/MudBlazor.Intro" target="_blank">disini</a>.</div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Wassalam</div></div><p><br /></p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-72829185507376516942021-11-15T10:27:00.006+07:002021-11-15T13:41:08.435+07:00JavaScript Interop Pada Aplikasi Blazor – Part 5<p style="text-align: justify;">Pada artikel sebelumnya telah kita bahas bagaimana melakukan invoke baik dari .Net maupun Javascript, dan dilanjutkan dengan menggunakan API pada browser. Semuanya dilakukan didalam satu project. Pada pembahasan kali ini kita akan membuat Razor Class Library dimana pada Class Library ini kita gunakan invoke pada .Net Method. Sebelumnya pastikan untuk menyelesaikan latihan-latihan pada artikel sebelumnya (Part 1-4). Razor Class Library adalah ASP.NET Core Library yang berisi page, view, view component dan fungsi-fungsi web application lainnya dengan kode nya masing-masing. Seperti library pada umumnya, library tidak berjalan secara independen tetapi digunakan oleh aplikasi lainya untuk memanfaatkan fungsi-fungsi pada library tersebut. Razor Class Library memudahkan dalam berbagi funsgi code pada web aplikasi dengan element UI. Selain itu manfaat dari Razor Class Library kita dapat menggunakannya pada multiple project, tanpa harus membuat ulang fungsi-fungsinya (Reusable). </p><p style="text-align: justify;">Pada artikel ini kita akan membuat sebuah komponen yang berfungsi untuk menampilkan indikator apakah browser online atau offline, seperti pada gambar dibawah ini.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Wbj-fcCAlcA9mbi0Cy56hH_Hrys2wMdHQ-lgnTsnKWQbdbUd0-0yvU9UbY7RTy0B6y4H7Y4N3gILtWItf2Yq-AeO16zJE-lTe0aiYqO2ORkSk94HwTgrzpvq3EEr9_phjjJjSgJvlgY/s367/blazor+online-offline.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="260" data-original-width="367" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Wbj-fcCAlcA9mbi0Cy56hH_Hrys2wMdHQ-lgnTsnKWQbdbUd0-0yvU9UbY7RTy0B6y4H7Y4N3gILtWItf2Yq-AeO16zJE-lTe0aiYqO2ORkSk94HwTgrzpvq3EEr9_phjjJjSgJvlgY/w400-h284/blazor+online-offline.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><div class="separator" style="clear: both;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2021/11/15/javascript-interop-pada-aplikasi-blazor-part-5/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/Blazor_JavascriptPart5" target="_blank">disini</a>.</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Terima kasih</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Wassalam</div></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-77359204252281731812021-11-09T08:49:00.003+07:002021-11-09T09:03:19.151+07:00JavaScript Interop Pada Aplikasi Blazor – Part 4<p style="text-align: justify;">Pada artikel sebelumnya telah dibahas bagaimana melakukan invoke .Net method dari javascript. Untuk artikel ini akan dilanjutkan dengan integrasi browser API pada Blazor APP. Salah satu browser API yang akan menjadi studi kasus kita adalah web storage.</p><p style="text-align: justify;">Apa itu web storage? Web Storage adalah tempat penyimpanan data pada local browser. Sebelum adanya HTML5, data pada aplikasi yang disimpan pada local browser menggunakan cookie. Dengan menggunkan Web Storage, kita dapat menyimpan data lebih besar dan lebih aman tanpa mempengaruhi kinerja dari aplikasi. Terdapat dua tipe dari web storage, yang pertama localStorage dan yang kedua adalah sessionStorage.</p><p style="text-align: justify;">Untuk localStorage data yang disimpan tidak memiliki expiry date, dan data tidak akan dihapus walaupun browser telah ditutup. </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_yqj4VYBix1oEXiJY4m9stsipWyVi6x0GZZBzu5sY-eJWX-q5d0VoH7WInuL9CNyJMB7v9QHwnFWR2GLd51sWwUoEdvQdG8wW2_zyTI27dgDLV-H-fXjH3ik1Ux3oIA_-InT0vp3gf1g/s576/web-storage.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="309" data-original-width="576" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_yqj4VYBix1oEXiJY4m9stsipWyVi6x0GZZBzu5sY-eJWX-q5d0VoH7WInuL9CNyJMB7v9QHwnFWR2GLd51sWwUoEdvQdG8wW2_zyTI27dgDLV-H-fXjH3ik1Ux3oIA_-InT0vp3gf1g/w400-h215/web-storage.png" width="400" /></a></div><br /><p style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2021/11/09/javascript-interop-pada-aplikasi-blazor-part-4/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/Blazor_JavascriptPart4" target="_blank">disini</a>.</p><p style="text-align: justify;">Terima kasih</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Wassalam</p><p><br /></p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-45431002198505624882021-10-16T08:59:00.010+07:002021-10-16T09:11:11.054+07:00Invoking JavaScript Dari .NET Pada Blazor – Part 3<p><span style="font-family: inherit;">Pada dua artikel sebelumnya telah kita bahas bagaimana memanggil fungsi pada javascript dari .Net. Lalu bagaimana jika dibalik yaitu memanggil .Net Method dari Javascript, apakah bisa ? Nah, artikel kali ini akan membahas pertanyaan tersebut.</span></p><p><span style="font-family: inherit;">Terdapat dua pembahasan pada artikel ini, yang pertama adalah cara memanggil .Net static method sedangkan yang kedua memanggil .Net Instance method dari JavaScript.</span></p><p class="MsoListParagraphCxSpFirst" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -0.25in;"><span style="font-family: inherit;"><!--[if !supportLists]-->-<span style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Memanggil .Net
Static Method<o:p></o:p></span></p><p>
</p><p class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; text-align: justify;"><span style="font-family: inherit;">Untuk
memanggil static method dari javascript, kita gunakan fungsi DotNet.invokeMethod
atau DotNet.invokeMethodAsync. Nilai dari
DotNet.invokeMethod adalah hasil dari operasi pada static method.
Sedangkan nilai dari DotNet.invokeMethodAsync adalah JavaScript Promise yang
merepresentasikan hasil dari operasi.<o:p></o:p></span></p><p class="MsoListParagraph" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -0.25in;"><span style="font-family: inherit;"><!--[if !supportLists]-->-<span style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;">
</span><!--[endif]-->Memanggil .Net Instance
Method<o:p></o:p></span></p><p class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; text-align: justify;">
<span style="font-family: inherit; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; mso-no-proof: yes;">Apa itu instance method? Instance
method biasa juga dikenal dengan non-static method. </span></p><p class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; text-align: justify;"><span style="font-family: inherit;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2021/10/16/javascript-interop-pada-aplikasi-blazor-part-3/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/Blazor_JavascriptPart3" target="_blank">disini</a>.</span></p><p class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; text-align: justify;"><span style="font-family: inherit;">Terima kasih</span></p><p class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; text-align: justify;"><span style="font-family: inherit;"><br /></span></p><p class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; text-align: justify;"><span style="font-family: inherit; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; mso-no-proof: yes;"></span></p><p class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-left: 0.25in; mso-add-space: auto; text-align: justify;"><span style="font-family: inherit;">Wassalam</span></p><div><br /></div>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-10200248623603691722021-10-04T07:27:00.002+07:002021-10-04T08:48:04.182+07:00Invoking JavaScript Dari .NET Pada Blazor – Part 2<p style="text-align: justify;">Pada artikel sebelumnya telah dibahas, bagaimana memanggil fungsi pada javascript baik yang memiliki return value maupun yang tidak memilikinya. Artikel ini akan melanjutkan beberapa latihan bagaimana melakukan Invoke JavaScript dari .Net. Pastikan selesaikan latihan-latihan pada artikel sebelumnya sebelum melanjutkan latihan-latihan pada artikel ini.</p><p style="text-align: justify;">Pada latihan pertama kita akan membuat fungsi untuk mengirimkan HTML Element ke Javascript. Sebagai contoh bagaimana jika sebuah button di klik, maka salah satu textbox pada halaman web menjadi focus. </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXqmPDb-9-eCocgO-VYz8dtWNhzRrC_tfaRYi_PRmJITpDIzGXPlp-nFUuT2Dj9taDzO65RdDPoyy-17aJYpJAGu-QjIPX-tjGL7cwn9G8h5sxlu0ixTKN_gt49r9NM2t6a6srha71O_Y/s576/Untitled.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="309" data-original-width="576" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXqmPDb-9-eCocgO-VYz8dtWNhzRrC_tfaRYi_PRmJITpDIzGXPlp-nFUuT2Dj9taDzO65RdDPoyy-17aJYpJAGu-QjIPX-tjGL7cwn9G8h5sxlu0ixTKN_gt49r9NM2t6a6srha71O_Y/w400-h215/Untitled.png" width="400" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2021/10/04/javascript-interop-pada-aplikasi-blazor-part-2/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/Blazor_JavascriptPart2" target="_blank">disini</a>.</div><div style="text-align: justify;">Terima kasih</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Wassalam</div><p style="text-align: justify;"><br /></p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com0tag:blogger.com,1999:blog-1434875882980174321.post-36020464064819323282021-08-31T12:18:00.005+07:002021-10-04T08:47:49.679+07:00Invoking JavaScript Dari .NET Pada Blazor – Part 1<p><span style="text-align: justify;">Untuk membuat aplikasi pada Blazor, kita
menggunakan C# dan Razor. Razor merupakan kombinasi dari HTML dan C#. Dan
output dari blazor aplikasi di eksekusi oleh .Net runtime.</span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0m8UgqCYduHRnygw5QnLbSwjAg5U2ROvEkHcarvbpy57jRGj1HqhZz04eCslU49YEdZb_pMr_1QFXYE77f2eCgXfF1iSdMZBe9Mwn01uNEKlK7dOMrvHOTbfXNDkAsv0Yw551Z5v70k/s272/blazor+app.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="236" data-original-width="272" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0m8UgqCYduHRnygw5QnLbSwjAg5U2ROvEkHcarvbpy57jRGj1HqhZz04eCslU49YEdZb_pMr_1QFXYE77f2eCgXfF1iSdMZBe9Mwn01uNEKlK7dOMrvHOTbfXNDkAsv0Yw551Z5v70k/s0/blazor+app.png" width="272" /></a></div><br /><span lang="DE" style="mso-ansi-language: DE;"><br /></span><p></p>
<p align="center" class="MsoNormal" style="line-height: 150%; text-align: center;"><span lang="DE" style="mso-ansi-language: DE; mso-no-proof: yes;"><v:shapetype coordsize="21600,21600" filled="f" id="_x0000_t75" o:preferrelative="t" o:spt="75" path="m@4@5l@4@11@9@11@9@5xe" stroked="f">
<v:stroke joinstyle="miter">
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0">
<v:f eqn="sum @0 1 0">
<v:f eqn="sum 0 0 @1">
<v:f eqn="prod @2 1 2">
<v:f eqn="prod @3 21600 pixelWidth">
<v:f eqn="prod @3 21600 pixelHeight">
<v:f eqn="sum @0 0 1">
<v:f eqn="prod @6 1 2">
<v:f eqn="prod @7 21600 pixelWidth">
<v:f eqn="sum @8 21600 0">
<v:f eqn="prod @7 21600 pixelHeight">
<v:f eqn="sum @10 21600 0">
</v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:formulas>
<v:path gradientshapeok="t" o:connecttype="rect" o:extrusionok="f">
<o:lock aspectratio="t" v:ext="edit">
</o:lock></v:path></v:stroke></v:shapetype><v:shape id="Picture_x0020_8" o:spid="_x0000_i1025" style="height: 176.4pt; mso-wrap-style: square; visibility: visible; width: 204pt;" type="#_x0000_t75">
<v:imagedata o:title="" src="file:///C:/Users/Junindar/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png">
</v:imagedata></v:shape></span><span lang="DE" style="mso-ansi-language: DE;"><o:p></o:p></span></p>
<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE" style="mso-ansi-language: DE;">Seperti kita ketahui, terdapat dua model hosting
pada aplikasi blazor, yang pertama WebAssembly dan yang kedua adalah Server. <o:p></o:p></span></p>
<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE" style="mso-ansi-language: DE;">Untuk WebAssembly aplikasi dan .Net runtime
berjalan pada sisi client didalam web browser. .Net runtime yang digunakan pada
browser berdasarkan WebAssembly atau yang biasa disebut WASM. WASM adalah
instruksi berformat binary yang dieksekusi Javascript runtime didalam browser. Jadi
ini merupakan cara kerja dari Client Side hosting model pada blazor.<o:p></o:p></span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE" style="mso-ansi-language: DE;"></span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE">Browser juga memiliki browser API yang
berbeda-beda, seperti Document Object Model (DOM). Dengan menggunkan DOM kita
dapat mengkases dan mengganti elemen HTML pada aplikasi web. Browser API,
seperti DOM ini dapat diakses dengan menggunakan JavaScript Runtime. Yang perlu
diketahui, tanpa JavaScript Interop kita hanya dapat menggunakan fungsi yang
hanya disediakan oleh Blazor Framework dan .Net. Lalu bagaimana jika kita ingin mengakses
browser API dari code yang tidak disediakan oleh Blazor Framework? Untuk hal
ini kita perlu memanggil code pada JavaScript yang akan mengakses Browser Api.</span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE">Blazor mendukung JavaScript Interoperabality
(JavaScript Interop), dimana kita dapat mengakses code pada JavaScript. Dari
sini dapat kita ketahui, kapan kita harus menggunakan JavaScript pada aplikasi
Blazor. Dimana jika aplikasi kita menggunakan fungsi-fungsi Browser API seperti
DOM, Local Storage, Online Status yang tidak disediakan oleh Blazor Framework. <o:p></o:p></span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHwsFknnqBaxiGZUKhMcIAU1tzvDWb-Z2vP196C30-f-uk9JrHb5VHwJ9UgkeJAwPEI_JevzgPNUktPRPVgbl6duOxBE6KLV3Sooh_X-Ym1ggBp0pylzD1nYcf_ir_1mjEO6QT5mtTxU/s378/blazor+app2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="378" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHwsFknnqBaxiGZUKhMcIAU1tzvDWb-Z2vP196C30-f-uk9JrHb5VHwJ9UgkeJAwPEI_JevzgPNUktPRPVgbl6duOxBE6KLV3Sooh_X-Ym1ggBp0pylzD1nYcf_ir_1mjEO6QT5mtTxU/w400-h164/blazor+app2.png" width="400" /></a></div><p class="MsoNormal" style="line-height: 150%; text-align: justify;"><br /></p>Untuk artikel selengkapnya dapat di download <a href="https://ilmukomputer.org/2021/09/10/invoking-javascript-dari-net-pada-blazor-part-1/" target="_blank">disini</a>. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download <a href="https://github.com/junindar/ilkom/tree/master/LatihanBlazor/Blazor_JavascriptPart1" target="_blank">disini</a>.<p></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;">Terima kasih</p><p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="DE"></span></p><p class="MsoNormal" style="line-height: 150%; text-align: justify;">Wassalam</p>Junindar, MVPhttp://www.blogger.com/profile/03221343212883759254noreply@blogger.com2