January 6, 2023

MudBlazor Chart Component Pada Blazor

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. 

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. 

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.

Pada MudBlazor komponen chart disebut dengan nama “MudChart“. Terdapat 4 jenis chart yang tersedia pada MudBlazor, yaitu Bar, Donut, Line dan Pie chart.

Sebelum memulai latihan-latihan pada artikel ini, pastikan telah menyelesaikan latihan-latihan pada artikel sebelumnya yang dapat dilihat disini (http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html), (http://junindar.blogspot.com/2022/12/mudblazor-input-component-pada-blazor.html) dan (http://junindar.blogspot.com/2022/12/mudblazor-input-component-picker-pada.html).



Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam


December 12, 2022

MudBlazor Input Component (Picker) Pada Blazor – Part 3

 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. http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html dan http://junindar.blogspot.com/2022/12/mudblazor-input-component-pada-blazor.html . 

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam

December 5, 2022

MudBlazor Input Component Pada Blazor – Part 2

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. http://junindar.blogspot.com/2022/10/mudblazor-input-component-pada-blazor.html . Perlu diketahui, untuk artikel ini masih akan menggunakan blazor project yang telah kita buat pada artikel sebelumnya.

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.


Terima kasih

Wassalam

October 28, 2022

MudBlazor Input Component Pada Blazor – Part 1

 

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 (http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html), (http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-1.html), (http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-2.html) dan (http://junindar.blogspot.com/2022/08/mudblazor-table-pada-blazor-part-3.html).

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih
Wassalam

August 22, 2022

MudBlazor Table Pada Blazor – Part 3

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 (http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html) dan (http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-2.html).  Perlu diketahui, untuk artikel ini masih akan menggunakan blazor project yang telah kita buat pada artikel sebelumnya.

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. 

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.

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam


July 21, 2022

MudBlazor Table Pada Blazor – Part 2

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 (http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html dan http://junindar.blogspot.com/2022/07/mudblazor-table-pada-blazor-part-1.html ).  
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.
Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih
Wassalam

July 12, 2022

MudBlazor Table Pada Blazor – Part 1


Untuk artikel ini akan dijelaskan bagaimana menggunakan MudBlazor Table  pada sebuah project, sebelum melanjutkan artikel ini pastikan telah mengikuti artikel sebelumnya disini http://junindar.blogspot.com/2021/12/mudblazor-component-pada-blazor-part-1.html . Pada artikel sebelumnya telah dijelaskan bagaimana menambahkan dan melakukan konfigurasi MudBlazor  pada project. Sehingga pada artikel ini pembahasan hanya fokus bagaimana menggunakan MudBlazor Table beserta fungsi-fungsinya.

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih
Wassalam