banner



Home  ›  How To Add Script Src To Body Asp.net

How To Add Script Src To Body Asp.net

Written By Tuesday, May 31, 2022 Add Comment Edit
  • Updated date Apr 26, 2018
  • 132k
  • 18

In this article, I will exist explaining how to integrate chart.js with your Asp.Cyberspace Core application with 4 different types of charts.

In this article, I volition exist explaining how to integrate chart.js with your Asp.Internet Cadre awarding with four different types of charts, which are:

  1. Pie
  2. Bar
  3. Line
  4. Stacked Bar

Creation and usage of the Pie, Bar and Line Charts are very similar only the stacked nautical chart is a bit more complex. Basically, a chart is a key-value listing grouped in an blithe style making it easier to empathise and see the numbers, except for the stacked chart which has two keys and a value. A more detailed explanation will be placed with each case.

What is chart.js?"Elementary, clean and engaging HTML5 based JavaScript charts. Chart.js is an piece of cake way to include animated, interactive graphs on your website for free."  https://world wide web.chartjs.org/ Pre-requisite?We have two prerequisites that must be loaded at every each view with a chart equally content, and they are the Jquery and Chart.js libraries:

  1. <script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" ></script>
  2. <script src="https://code.jquery.com/jquery-three.3.1.min.js" ></script>

Models used here
SimpleReportViewModel

  1. public class  SimpleReportViewModel
  2.    {
  3. public string  DimensionOne { get ; gear up ; }
  4. public int  Quantity { get ; set ; }
  5.    }

StackedViewModel

  1. public class  StackedViewModel
  2. {
  3. public string  StackedDimensionOne { go ; fix ; }
  4. public  List<SimpleReportViewModel> LstData { get ; set ; }
  5. }

Bar Chart
Controller Action

  1. public  IActionResult Bar()
  2.         {
  3. individual  Random rnd = new  Random();
  5.             var lstModel =new  List<SimpleReportViewModel>();
  6.             lstModel.Add together(new  SimpleReportViewModel
  7.             {
  8.                 DimensionOne ="Technology" ,
  9.                 Quantity = rnd.Next( ten )
  10.             } );
  11.             lstModel.Add together(new  SimpleReportViewModel
  12.             {
  13.                 DimensionOne ="Sales" ,
  14.                 Quantity = rnd.Next( 10 )
  15.             } );
  16.             lstModel.Add(new  SimpleReportViewModel
  17.             {
  18.                 DimensionOne ="Marketing" ,
  19.                 Quantity = rnd.Next( ten )
  20.             } );
  21.             lstModel.Add(new  SimpleReportViewModel
  22.             {
  23.                 DimensionOne ="Human Resources" ,
  24.                 Quantity = rnd.Next( 10 )
  25.             } );
  26.             lstModel.Add(new  SimpleReportViewModel
  27.             {
  28.                 DimensionOne ="Research and Development" ,
  29.                 Quantity = rnd.Next( 10 )
  30.             } );
  31.             lstModel.Add(new  SimpleReportViewModel
  32.             {
  33.                 DimensionOne ="Acconting" ,
  34.                 Quantity = rnd.Adjacent( 10 )
  35.             } );
  36.             lstModel.Add(new  SimpleReportViewModel
  37.             {
  38.                 DimensionOne ="Support" ,
  39.                 Quantity = rnd.Adjacent( 10 )
  40.             } );
  41.             lstModel.Add(new  SimpleReportViewModel
  42.             {
  43.                 DimensionOne ="Logistics" ,
  44.                 Quantity = rnd.Adjacent( ten )
  45.             } );
  46. return  View( lstModel );
  47.         }

View

  1. @model List<SimpleReportViewModel>
  2. @{
  3.     var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( 10 => x.DimensionOne ).ToList() );
  4.     var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => 10.Quantity ).ToList() );
  5.     ViewData["Title" ] = "Bar Nautical chart" ;
  6. }
  8. <!DOCTYPE html>
  10. <html>
  11. <caput>
  12.     <meta proper name="viewport"  content= "width=device-width"  />
  13.     <title>Bar</championship>
  14. </caput>
  15. <trunk>
  16.     <divcourse = "box-body" >
  18.         <divform = "chart-container" >
  19.             <canvas id="chart"  fashion= "width:100%; height:500px" ></sheet>
  20.         </div>
  21.     </div>
  22. </body>
  23. </html>
  25. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.seven.2/Nautical chart.bundle.min.js" ></script>
  26. <script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
  28. <script type="text/javascript" >
  29.         $(function () {
  30.     var chartName ="nautical chart" ;
  31.         var ctx = document.getElementById(chartName).getContext('2d' );
  32.         var information = {
  33.                 labels: @Html.Raw(XLabels),
  34.                 datasets: [{
  35.                     label:"Departments Nautical chart" ,
  36.                     backgroundColor: [
  37. 'rgba(255, 99, 132, 0.2)' ,
  38. 'rgba(54, 162, 235, 0.ii)' ,
  39. 'rgba(255, 206, 86, 0.2)' ,
  40. 'rgba(75, 192, 192, 0.two)' ,
  41. 'rgba(153, 102, 255, 0.2)' ,
  42. 'rgba(255, 159, 64, 0.2)' ,
  43. 'rgba(255, 0, 0)' ,
  44. 'rgba(0, 255, 0)' ,
  45. 'rgba(0, 0, 255)' ,
  46. 'rgba(192, 192, 192)' ,
  47. 'rgba(255, 255, 0)' ,
  48. 'rgba(255, 0, 255)'
  49.                     ],
  50.                     borderColor: [
  51. 'rgba(255,99,132,1)' ,
  52. 'rgba(54, 162, 235, 1)' ,
  53. 'rgba(255, 206, 86, ane)' ,
  54. 'rgba(75, 192, 192, 1)' ,
  55. 'rgba(153, 102, 255, ane)' ,
  56. 'rgba(255, 159, 64, 1)' ,
  57. 'rgba(255, 0, 0)' ,
  58. 'rgba(0, 255, 0)' ,
  59. 'rgba(0, 0, 255)' ,
  60. 'rgba(192, 192, 192)' ,
  61. 'rgba(255, 255, 0)' ,
  62. 'rgba(255, 0, 255)'
  63.                     ],
  64.                     borderWidth: 1,
  65.                     data: @Html.Raw(YValues)
  66.     }]
  67.             };
  69. var options = {
  70.                 maintainAspectRatio:faux ,
  71.                 scales: {
  72.                     yAxes: [{
  73.                         ticks: {
  74.                             min: 0,
  75.                             beginAtZero:true
  76.                         },
  77.                         gridLines: {
  78.                             display:true ,
  79.                             color:"rgba(255,99,164,0.2)"
  80.                         }
  81. }],
  82.                     xAxes: [{
  83.                         ticks: {
  84.                             min: 0,
  85.                             beginAtZero:true
  86.                         },
  87.                         gridLines: {
  88.                             display:false
  89.                         }
  90.                     }]
  91.                 }
  92.             };
  94.        var myChart =new   Chart(ctx, {
  95.                 options: options,
  96.                 data: data,
  97.                 type:'bar'
  99.             });
  100.         });
  101. </script>

 Consequence

Result

ExplanationHere nosotros utilize the SimpleReportViewModel considering we accept a simple bar chart with a department list and their head number

Pie ChartController Action

  1. public  IActionResult Pie()
  2.         {
  3. individual  Random rnd = new  Random();
  5.             var lstModel =new  List<SimpleReportViewModel>();
  6.             lstModel.Add(new  SimpleReportViewModel
  7.             {
  8.                 DimensionOne ="Beer" ,
  9.                 Quantity = rnd.Next( 10 )
  10.             } );
  11.             lstModel.Add(new  SimpleReportViewModel
  12.             {
  13.                 DimensionOne ="Wine" ,
  14.                 Quantity = rnd.Side by side( ten )
  15.             } );
  16.             lstModel.Add(new  SimpleReportViewModel
  17.             {
  18.                 DimensionOne ="Whisky" ,
  19.                 Quantity = rnd.Side by side( 10 )
  20.             } );
  21.             lstModel.Add(new  SimpleReportViewModel
  22.             {
  23.                 DimensionOne ="Water" ,
  24.                 Quantity = rnd.Side by side( 10 )
  25.             } );
  26. render  View( lstModel );
  27.         }

View

  1. @ using  System.Linq;
  2. @model Listing<SimpleReportViewModel>
  3. @{
  4.     var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.DimensionOne ).ToList() );
  5.     var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.Quantity ).ToList() );
  6.     ViewData["Title" ] = "Pie Chart" ;
  7. }
  9. <!DOCTYPE html>
  11. <html>
  12. <head>
  13.     <meta proper noun="viewport"  content= "width=device-width"  />
  14.     <championship>Pie</championship>
  15. </head>
  16. <torso>
  17.     <divclass = "box-body" >
  19.         <divclass = "chart-container" >
  20.             <canvas id="chart"  style= "width:100%; peak:500px" ></sheet>
  21.         </div>
  22.     </div>
  23. </trunk>
  24. </html>
  26. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Nautical chart.packet.min.js" ></script>
  27. <script src="https://code.jquery.com/jquery-3.three.1.min.js" ></script>
  29. <script type="text/javascript" >
  30.         $(function () {
  31.     var chartName ="nautical chart" ;
  32.         var ctx = certificate.getElementById(chartName).getContext('2d' );
  33.         var information = {
  34.                 labels: @Html.Raw(XLabels),
  35.                 datasets: [{
  36.                     label:"Drinks Nautical chart" ,
  37.                     backgroundColor: [
  38. 'rgba(255, 99, 132, 0.2)' ,
  39. 'rgba(54, 162, 235, 0.2)' ,
  40. 'rgba(255, 206, 86, 0.2)' ,
  41. 'rgba(75, 192, 192, 0.2)' ,
  42. 'rgba(153, 102, 255, 0.2)' ,
  43. 'rgba(255, 159, 64, 0.ii)' ,
  44. 'rgba(255, 0, 0)' ,
  45. 'rgba(0, 255, 0)' ,
  46. 'rgba(0, 0, 255)' ,
  47. 'rgba(192, 192, 192)' ,
  48. 'rgba(255, 255, 0)' ,
  49. 'rgba(255, 0, 255)'
  50.                     ],
  51.                     borderColor: [
  52. 'rgba(255,99,132,1)' ,
  53. 'rgba(54, 162, 235, one)' ,
  54. 'rgba(255, 206, 86, 1)' ,
  55. 'rgba(75, 192, 192, 1)' ,
  56. 'rgba(153, 102, 255, 1)' ,
  57. 'rgba(255, 159, 64, i)' ,
  58. 'rgba(255, 0, 0)' ,
  59. 'rgba(0, 255, 0)' ,
  60. 'rgba(0, 0, 255)' ,
  61. 'rgba(192, 192, 192)' ,
  62. 'rgba(255, 255, 0)' ,
  63. 'rgba(255, 0, 255)'
  64.                     ],
  65.                     borderWidth: 1,
  66.                     information: @Html.Raw(YValues)
  67.     }]
  68.             };
  70. var options = {
  71.                 maintainAspectRatio:false ,
  72.                 scales: {
  73.                     yAxes: [{
  74.                         ticks: {
  75.                             min: 0,
  76.                             beginAtZero:true
  77.                         },
  78.                         gridLines: {
  79.                             brandish:true ,
  80.                             color:"rgba(255,99,164,0.2)"
  81.                         }
  82. }],
  83.                     xAxes: [{
  84.                         ticks: {
  85.                             min: 0,
  86.                             beginAtZero:true
  87.                         },
  88.                         gridLines: {
  89.                             display:false
  90.                         }
  91.                     }]
  92.                 }
  93.             };
  95.        var myChart =new   Nautical chart(ctx, {
  96.                 options: options,
  97.                 information: data,
  98.                 type:'pie'
  100.             });
  101.         });
  102. </script>

Result

Result

Explanation

Here we besides employ the SimpleReportViewModel because we have a simple pie chart with a drinkable listing and their quantity number.

Line ChartController Action

  1. public  IActionResult Line()
  2.        {
  3. private  Random rnd = new  Random();
  5.            var lstModel =new  List<SimpleReportViewModel>();
  6.            lstModel.Add(new  SimpleReportViewModel
  7.            {
  8.                DimensionOne ="Brazil" ,
  9.                Quantity = rnd.Next( 10 )
  10.            } );
  11.            lstModel.Add together(new  SimpleReportViewModel
  12.            {
  13.                DimensionOne ="Usa" ,
  14.                Quantity = rnd.Side by side( 10 )
  15.            } );
  16.            lstModel.Add(new  SimpleReportViewModel
  17.            {
  18.                DimensionOne ="Portugal" ,
  19.                Quantity = rnd.Side by side( 10 )
  20.            } );
  21.            lstModel.Add together(new  SimpleReportViewModel
  22.            {
  23.                DimensionOne ="Russia" ,
  24.                Quantity = rnd.Next( 10 )
  25.            } );
  26.            lstModel.Add together(new  SimpleReportViewModel
  27.            {
  28.                DimensionOne ="Ireland" ,
  29.                Quantity = rnd.Next( 10 )
  30.            } );
  31.            lstModel.Add together(new  SimpleReportViewModel
  32.            {
  33.                DimensionOne ="Germany" ,
  34.                Quantity = rnd.Adjacent( 10 )
  35.            } );
  36. render  View( lstModel );
  37.        }

View

  1. @model List<SimpleReportViewModel>
  2. @{
  3.     var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.DimensionOne ).ToList() );
  4.     var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( ten => x.Quantity ).ToList() );
  5.     ViewData["Title" ] = "Line Chart" ;
  6. }
  8. <!DOCTYPE html>
  10. <html>
  11. <caput>
  12.     <meta proper noun="viewport"  content= "width=device-width"  />
  13.     <championship>Line</championship>
  14. </head>
  15. <body>
  16.     <divform = "box-torso" >
  18.         <divclass = "chart-container" >
  19.             <canvas id="chart"  style= "width:100%; height:500px" ></sheet>
  20.         </div>
  21.     </div>
  22. </body>
  23. </html>
  24. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.two/Chart.bundle.min.js" ></script>
  25. <script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
  27. <script type="text/javascript" >
  28.         $(function () {
  29.     var chartName ="nautical chart" ;
  30.         var ctx = document.getElementById(chartName).getContext('2d' );
  31.         var data = {
  32.                 labels: @Html.Raw(XLabels),
  33.                 datasets: [{
  34.                     label:"Countries Chart" ,
  35.                     backgroundColor: [
  36. 'rgba(255, 99, 132, 0.two)' ,
  37. 'rgba(54, 162, 235, 0.2)' ,
  38. 'rgba(255, 206, 86, 0.ii)' ,
  39. 'rgba(75, 192, 192, 0.2)' ,
  40. 'rgba(153, 102, 255, 0.ii)' ,
  41. 'rgba(255, 159, 64, 0.2)' ,
  42. 'rgba(255, 0, 0)' ,
  43. 'rgba(0, 255, 0)' ,
  44. 'rgba(0, 0, 255)' ,
  45. 'rgba(192, 192, 192)' ,
  46. 'rgba(255, 255, 0)' ,
  47. 'rgba(255, 0, 255)'
  48.                     ],
  49.                     borderColor: [
  50. 'rgba(255,99,132,1)' ,
  51. 'rgba(54, 162, 235, 1)' ,
  52. 'rgba(255, 206, 86, 1)' ,
  53. 'rgba(75, 192, 192, 1)' ,
  54. 'rgba(153, 102, 255, 1)' ,
  55. 'rgba(255, 159, 64, 1)' ,
  56. 'rgba(255, 0, 0)' ,
  57. 'rgba(0, 255, 0)' ,
  58. 'rgba(0, 0, 255)' ,
  59. 'rgba(192, 192, 192)' ,
  60. 'rgba(255, 255, 0)' ,
  61. 'rgba(255, 0, 255)'
  62.                     ],
  63.                     borderWidth: 1,
  64.                     data: @Html.Raw(YValues)
  65.     }]
  66.             };
  68. var options = {
  69.                 maintainAspectRatio:fake ,
  70.                 scales: {
  71.                     yAxes: [{
  72.                         ticks: {
  73.                             min: 0,
  74.                             beginAtZero:true
  75.                         },
  76.                         gridLines: {
  77.                             display:true ,
  78.                             color:"rgba(255,99,164,0.ii)"
  79.                         }
  80. }],
  81.                     xAxes: [{
  82.                         ticks: {
  83.                             min: 0,
  84.                             beginAtZero:true
  85.                         },
  86.                         gridLines: {
  87.                             display:false
  88.                         }
  89.                     }]
  90.                 }
  91.             };
  93.        var myChart =new   Chart(ctx, {
  94.                 options: options,
  95.                 data: data,
  96.                 type:'line'
  98.             });
  99.         });
  100. </script>

Effect

Result

Caption

Here we likewise utilize the SimpleReportViewModel considering we take a simple line chart with a state list and their quantity number.

Stacked ChartController Activeness

  1. public  IActionResult Stacked()
  2.        {
  3. private  Random rnd = new  Random();
  4.            var lstModel =new  List<StackedViewModel>();
  6.            lstModel.Add(new  StackedViewModel
  7.            {
  8.                StackedDimensionOne ="First Quarter" ,
  9.                LstData =new  List<SimpleReportViewModel>()
  10.                {
  11. new  SimpleReportViewModel()
  12.                    {
  13.                        DimensionOne="Idiot box" ,
  14.                        Quantity = rnd.Side by side(10)
  15.                    },
  16. new  SimpleReportViewModel()
  17.                    {
  18.                        DimensionOne="Games" ,
  19.                        Quantity = rnd.Next(10)
  20.                    },
  21. new  SimpleReportViewModel()
  22.                    {
  23.                        DimensionOne="Books" ,
  24.                        Quantity = rnd.Next(10)
  25.                    }
  26.                }
  27.            } );
  28.            lstModel.Add together(new  StackedViewModel
  29.            {
  30.                StackedDimensionOne ="2d Quarter" ,
  31.                LstData =new  List<SimpleReportViewModel>()
  32.                {
  33. new  SimpleReportViewModel()
  34.                    {
  35.                        DimensionOne="TV" ,
  36.                        Quantity = rnd.Next(10)
  37.                    },
  38. new  SimpleReportViewModel()
  39.                    {
  40.                        DimensionOne="Games" ,
  41.                        Quantity = rnd.Next(ten)
  42.                    },
  43. new  SimpleReportViewModel()
  44.                    {
  45.                        DimensionOne="Books" ,
  46.                        Quantity = rnd.Side by side(ten)
  47.                    }
  48.                }
  49.            } );
  50.            lstModel.Add(new  StackedViewModel
  51.            {
  52.                StackedDimensionOne ="Third Quarter" ,
  53.                LstData =new  List<SimpleReportViewModel>()
  54.                {
  55. new  SimpleReportViewModel()
  56.                    {
  57.                        DimensionOne="TV" ,
  58.                        Quantity = rnd.Next(10)
  59.                    },
  60. new  SimpleReportViewModel()
  61.                    {
  62.                        DimensionOne="Games" ,
  63.                        Quantity = rnd.Next(ten)
  64.                    },
  65. new  SimpleReportViewModel()
  66.                    {
  67.                        DimensionOne="Books" ,
  68.                        Quantity = rnd.Next(10)
  69.                    }
  70.                }
  71.            } );
  72.            lstModel.Add(new  StackedViewModel
  73.            {
  74.                StackedDimensionOne ="Fourth Quarter" ,
  75.                LstData =new  List<SimpleReportViewModel>()
  76.                {
  77. new  SimpleReportViewModel()
  78.                    {
  79.                        DimensionOne="TV" ,
  80.                        Quantity = rnd.Next(10)
  81.                    },
  82. new  SimpleReportViewModel()
  83.                    {
  84.                        DimensionOne="Games" ,
  85.                        Quantity = rnd.Side by side(10)
  86.                    },
  87. new  SimpleReportViewModel()
  88.                    {
  89.                        DimensionOne="Books" ,
  90.                        Quantity = rnd.Next(10)
  91.                    }
  92.                }
  93.            } );
  94. return  View( lstModel );
  95.        }

View

  1. @model List < StackedViewModel > @ {
  2. var  XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.FirstOrDefault().LstData.Select(x => x.DimensionOne).ToList());
  3. var  YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(10 => x.LstData.Select(w => west.Quantity)).ToList());
  4. var  label2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.StackedDimensionOne).ToList());
  5.     ViewData["Title" ] = "Stacked Chart" ;
  6. } < !DOCTYPE html > < html > < head > < meta name ="viewport"
  7. content ="width=device-width"  / > < title > Stacked < /championship> < /caput> < body > < div class  = "box-torso"  > < div form  = "nautical chart-container"  > < canvas id = "chartStacked"
  8. style ="width:100%; height:500px"  > < /canvas> < /div> < /div> < /trunk> < /html> < script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.two/Chart.bundle.min.js"  > < /script> < script src = "https://code.jquery.com/jquery-3.three.ane.min.js"  > < /script> < script type = "text/javascript"  > $( function () {
  9. var  chartName = "chartStacked" ;
  10. var  ctx = document.getElementById(chartName).getContext( '2d' );
  11. var  XLabels = @Html.Raw(XLabels);
  12. var  YValues = @Html.Raw(YValues);
  13. var  characterization = @Html.Raw(label2);
  14. var  aux = 0;
  15. var  barChartData = {
  16.         labels: @Html.Raw(label2),
  17.         datasets: []
  18.     }
  19.     XLabels.forEach(function (a, i) {
  20. var  data = [];
  21.         YValues.forEach(function (a, i) {
  22.             information.push button(a[aux]);
  23.         });
  24.         barChartData.datasets.button({
  25.             label: XLabels[aux],
  26.             backgroundColor: random_rgba(),
  27.             data: data
  28.         });
  29.         aux++;
  30.     });
  31. var  options = {
  32.         maintainAspectRatio:false ,
  33.         scales: {
  34.             yAxes: [{
  35.                 ticks: {
  36.                     min: 0,
  37.                     beginAtZero:truthful
  38.                 },
  39.                 stacked:true ,
  40.                 gridLines: {
  41.                     display:truthful ,
  42.                     colour:"rgba(255,99,164,0.two)"
  43.                 }
  44.             }],
  45.             xAxes: [{
  46.                 stacked:true ,
  47.                 gridLines: {
  48.                     display:false
  49.                 }
  50.             }]
  51.         }
  52.     };
  54. function  random_rgba() {
  55. var  o = Math.round,
  56.             r = Math.random,
  57.             s = 255;
  58. render 'rgba('  + o(r() * s) + ','  + o(r() * s) + ','  + o(r() * s) + ','  + r().toFixed(ane) + ')' ;
  59.     }
  60. var  myChart = new  Chart(ctx, {
  61.         options: options,
  62.         data: barChartData,
  63.         type:'bar'
  64.     });
  65. }); < /script>

Event

Result

Explanation
Hither we use the StackedViewModel because we have a stacked nautical chart with the number of product sales by quarter.

Ps.: Javascript is needed here to order the data from the model to nautical chart.js dataset.

Congratulations, you take successfully integrated Chart.Js with your Asp.cyberspace Core application.

  • Project on GitHub

How To Add Script Src To Body Asp.net,

Source: https://www.c-sharpcorner.com/article/creating-charts-with-asp-net-core/

Posted by: kellsknours00.blogspot.com

0 Response to "How To Add Script Src To Body Asp.net"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel