Bilindiği gibi, Mart 2024 yılında yerel seçimler yapılacaktır. Vatandaşların seçimlerde oylarını kullanarak yaşadıkları illerde yöneticileri seçmesi demokrasinin olmazsa olmazıdır. Bu uygulamada her hangi bir ile ait yerel seçim sonuçlarını baklava grafikle gösteren uygulama yapacağız.
Bu web projesinde neler öğreneceğiz.
1. Yeni bir core web projesi oluşturma
2. Projeyi Core Mvc teknolojisi olarak tasarlama
3. jquery kütüphanesini web sayfasına ekleme
4. Grafikleri web sayfasına ekleme
5. Verileri baklava grafikle gösterme
6. Projeyi çalıştırıp grafiği web sayfasında gösterme
7. Css dilini web sayfasına dahil etme
8. Combobox nesnesini kullanma
9. jquery dilinde kod yazmak için gerekli tanımlamayı yapma
10. jquery dilinde bağlangıç metodunu tanımlama
11. Rastgele sayılar üretme
12. Kodla rastgele sayıları değişkenlere aktarma
13. Oy sayılarını oranlayarak gösterme
14. Grafikle ilgili css özelliklerini belirleme
15. Combobox ile değerleri listeleyip içlerinden birini seçme
16. Terminal tabanlı uygulamayı düzenleme
17. Grafiklerin başlıklarını belirleme
18. Projeyi çalıştırıp sonucu görme
19. Projeyi yayınlayıp internet sayfasında görüntüleme
Şimdi bu işlemleri gerçekleştirelim. Öncelikle Visual Studio programını açalım. Ben 2022 versiyonunu kullanıyorum. Başlat menüsünde devenv yazıp Enter tuşuna bastığınızda program açılacaktır. Program açıldığında Create A New Project diyerek yeni bir proje oluşturalım. Şablonlardan Asp.Net Core Empty seçelim. Projenin ismini YerelSecimler olarak verelim. Create diyerek projeyi oluşturalım.
Projenin bel kemiği olan program.js dosyasını düzenleyelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Secimler}/{action=Sonuclar}"
);
app.Run();
Projemizi Mvc teknolojisine göre düzenlemek için gerekli klasörleri oluşturalım. Secimler isminde bir controller dosyası oluşturalım. Daha sonra Sonuclar isminde bir view dosyası oluşturalım. Web sayfasının başlığına Yerel Seçim Sonuçları ismini verelim. Web sayfamız aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Yerel Seçim Sonuçları</title>
</head>
<body>
</body>
</html>
Projeyi kaydedip çalıştıralım. Hatasız bir şekilde projenin çalıştığını görürsünüz. Projeye bootstrap ve jquery kütüphanelerini yükleyelim. Daha sonra web sayfasında head etiketi arasında en üste bu kütüphaneleri ekleyelim. Web sayfamız aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Yerel Seçim Sonuçları</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
Seçimlere ait bu uygulamayı terminal ve sunucu tabanlı olarak gerçekleştireceğiz. Her iki yöntem, kullanarak web sayfalarında neler değiştiğini gözlemleyebilirsiniz. Terminal tabanlı olarak web sayfasının tasarım kısmını yapmaya başlayalım. Form sayfası bilgilerin istendiği ve bilgilerin işlenip görüntülendiği iki bölümden oluşacaktır. Bilgilerin girişinin yapıldığı formun başlığını belirleyelim.
<div class="col-sm-6 m-auto" id="giris">
<div class="p-3 bg-primary text-white text-center">
<h3>31 Mart 2024 Yerel Seçim Bilgileri</h3>
<p>Yerel seçime ait il ve seçmen sayısını belirleyin.</p>
</div>
</div>
Projeyi kaydedip çalıştıralım. Başlığın ekranın ortasında ve üst tarafta olduğunu göreceksiniz. Şimdi seçim bölgesine ait ilin seçimini yapalım. Ben sadece 5 il için seçim yaptıracağım.
<div class="mt-3">
<label for="iller" class="form-label">İl Seçiniz:</label>
<select class="form-select form-control" id="iller" name="iller">
<option>Ankara</option>
<option>İzmir</option>
<option>İstanbul</option>
<option>Konya</option>
<option>Trabzon</option>
</select>
</div>
Projeyi kaydedip çalıştıralım. İllerin açılır kutuda listelendiğini görürsünüz. Seçmen sayısını gireceğimiz metin kutusunu oluşturalım.
<div class="mb-3 mt-3">
<label for="secmen" class="form-label">Seçmen Sayısı:</label>
<input type="number" class="form-control" id="secmen"
placeholder="Seçmen sayısı gir" name="secmen">
</div>
Projeyi kaydedip çalıştıralım. Seçmen sayısını sayısal olarak metin kutusuna girebilirsiniz. Şimdi belirtilen ilde kaç partinin seçime katılacağını belirleyen metin kutusunu tanımlayalım.
<div class="mb-3 mt-3">
<label for="parti" class="form-label">Katılan Parti Sayısı:</label>
<input type="number" class="form-control" id="parti"
placeholder="Katılan parti sayısını gir" name="parti">
</div>
Projeyi kaydedip çalıştıralım. Katılacak parti sayısını sayısal olarak metin kutusuna girebilirsiniz. Giriş sayfasına ait bilgiler bu kadar olacaktır. Verilen bilgilere göre işlemlerin gerçekleştirilmesi için button nesnemizi tanımlayalım.
<button type="button" class="btn btn-success" id="olustur">Oluştur</button>
Projeyi kaydedip çalıştıralım. Kullanıcıdan alınacak bilgilerin yer aldığı giriş formunu bitirmiş olduk. Şimdi verilen bilgilere göre gerekli işlemlerin yapıldıktan sonra elde edilen sonuçların görüntüleneceği listeleme tasarımını yapalım.
<div class="col-sm-6 m-auto" id="liste">
<div class="p-3 bg-success text-white text-center">
<h3 id="baslik"></h3>
</div>
<div id="genel">
</div>
<div id="grafik" style="width: 100%; height:100%;">
</div>
<div id="ozel">
</div>
</div>
Projeyi kaydedip çalıştıralım. Kullanıcıdan alınan bilgiye göre şekillenecek form sayfasında birşey görüntülenmez. Çünkü bu işlemleri dinamik olarak gerçekleştirip görüntüleyeceğiz. Kodların yazımı için wwwroot klasöründe js isimli bir klasör oluşturalım. Bu klasörün içinde ismi hesapla.js olan bir script dosyası oluşturalım. Oluşturduğumuz bu dosyayı farenin sol tuşuna basılı tutarak web sayfasının head etiketi arasına sürükleyip bırakalım. Aşağıdaki kod otomatik olarak eklenecektir.
<script src="~/js/hesapla.js"></script>
Projeyi kaydedip çalıştıralım. Web sayfasında herhangi bir değişiklik olmayacaktır. Henüz kod yazımı işine başlamadık. Öncelikle parti isimlerinin tutulduğu partiler isminde bir dizi oluşturalım. Ben burada 10 parti ismi tanımlayacağım.
var partiler = ["A Patisi", "B Partisi", "C Partisi", "D Partisi",
"E Partisi", "G Partisi", "H Partisi", "I Partisi", "J Partisi",
"K Partisi"];
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Kullanıcıdan alınan bilgiye göre saklanacak veriler için gerekli değişkenleri tanımlayalım.
var iladi = "";
var secmensayisi = 0;
var partisayisi = 0;
var kullanilanoy = 0;
var oyorani = 0;
var genel = "";
var ozel = "";
var x = 0;
var sec = 0;
var partioyu = 0;
var partiorani = 0;
var kalanoy = 0;
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Web sayfası açılır açılmaz kdoların çalıştırılacağı metodu tanımlayalım.
$(function () {
});
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Kodların hatasız çalışıp çalışmadığını test etmek için alert() metoduyla ekrana mesaj yazdırabilirsiniz. Başlangıçta kullanıcıdan bilgi alınacağı için listelemenin yapılacağı bölümü gizleyelim.
$("#liste").css("display", "none");
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Kodların hatasız çalışıp çalışmadığını test etmek için alert() metoduyla ekrana mesaj yazdırabilirsiniz. Kullanıcıdan alınan bilgileri işlemek amacıyla buttonun click olayını tanımlayalım.
$("#olustur").on("click", function () {
});
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Kodların hatasız çalışıp çalışmadığını test etmek için alert() metoduyla ekrana mesaj yazdırabilirsiniz. Kullanıcıdan alınan bilgileri sırasıyla tanımladığımız değişkenlere atayalım.
iladi = $('select[name=iller] option').filter(':selected').val();
secmensayisi = parseInt($("#secmen").val());
partisayisi = parseInt($("#parti").val());
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Kodların hatasız çalışıp çalışmadığını test etmek için alert() metoduyla ekrana mesaj yazdırabilirsiniz. Belirtilen ilde seçime katılacak parti sayısının en az 2 , en fazla 10 olup olmadığını kontrol eden kodu yazalım.
if (partisayisi < 2 || partisayisi > 10) {
$("#parti").focus();
return;
}
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Parti sayısını ikiden küçük girdiğimizde sonucu görün. Şimdi giriş işleminin yapıldığı ekranı gizleyelim. Listeleme ekranını görünür yapalım. Listeleme işleminde formun başlığını seçilen ile göre düzenleyelim.
$("#giris").css("display", "none");
$("#liste").css("display", "block");
$("#baslik").html(iladi + " İline Ait Seçim Sonuçları");
Projeyi kaydedip çalıştıralım. Oluştur butonuna bastığımızda seçilen ile göre başlığın şekillendiğini görürsünüz. Seçmen sayısına göre kullanılan oyu ve oy oranını rastgele değerler seçerek belirleyelim.
kullanilanoy = Math.floor((Math.random() * secmensayisi) + 1);
oyorani = (kullanilanoy / secmensayisi) * 100;
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Kodların hatasız çalışıp çalışmadığını test etmek için alert() metoduyla ekrana mesaj yazdırabilirsiniz. Elde edilen değerleri sonuçların görüntülendiği genel başlığı altında bir tablo ile listeleyelim. Tablomuzu dinamik olarak gerçekleştireceğiz.
genel = "<table class='table table-striped caption-top'>";
genel += "<caption>";
genel += "<h4 class='text-center'>Seçimlere Ait Genel Tablo</h4>";
genel += "</caption>";
genel += "<tbody>";
genel += "<tr><td>Seçmen Sayısı : </td><td>" +
secmensayisi + "</td></tr>";
genel += "<tr><td>Kullanılan Oy : </td><td>" +
kullanilanoy + "</td></tr>";
genel += "<tr><td>Katılım Oranı : </td><td> % " +
oyorani.toFixed(2) + "</td></tr>";
genel += "</tbody>";
genel += "</table>";
$("#genel").html(genel);
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Tablonun oluştuğunu ve gerekli bilgilerin dinamik bir şekilde satırlarda listelendiğini görürsünüz. Şimdi partilerin aldığı oyları ve oy oranlarını katılan parti sayısına göre rastgele değerler belirleyerek dinamik bir tabloda listeleyelim. Burada kullanılan tablo önemli olduğu için basamak basamak yapalım. Öncelikle tablonun başlığını belrileyelim ve görüntüleyelim.
ozel = "<table class='table table-hover caption-top'>";
ozel += "<caption>";
ozel += "<h4 class='text-center'>Oyların Partilere Göre Dağılımı</h4>";
ozel += "</caption>";
ozel += "</table>";
$("#ozel").html(ozel);
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Tablonun başlığının listelendiğini görürsünüz. Şimdi alt başlıkları listeleyelim.
ozel = "<table class='table table-hover caption-top'>";
ozel += "<caption>";
ozel += "<h4 class='text-center'>Oyların Partilere Göre Dağılımı</h4>";
ozel += "</caption>";
ozel += "<thead class='table-dark'>";
ozel += "<tr><th>Parti Adı</th><th>Oy Sayısı</th><th>Oy Oranı</th></tr>";
ozel += "</thead>";
ozel += "</table>";
$("#ozel").html(ozel);
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Tablonun başlığının ve alt başlığının listelendiğini görürsünüz. Tablomuza ait verileri parti sayısına göre rastgele değerler üreterek tablonun içinde görüntüleyelim. Burada tablonun satır sayısı seçime katılacak olan parti sayısı kadar olacaktır.
ozel = "<table class='table table-hover caption-top'>";
ozel += "<caption>";
ozel += "<h4 class='text-center'>Oyların Partilere Göre Dağılımı</h4>";
ozel += "</caption>";
ozel += "<thead class='table-dark'>";
ozel += "<tr><th>Parti Adı</th><th>Oy Sayısı</th><th>Oy Oranı</th></tr>";
ozel += "</thead>";
ozel += "<tbody>";
for (var i = 0; i < partisayisi; i++) {
sec = Math.floor(Math.random() * partiler.length);
if ((kullanilanoy - kalanoy) > 0)
partioyu = Math.floor(Math.random() * (kullanilanoy - kalanoy)) + 1;
else
partioyu = 0;
partiorani = (partioyu / kullanilanoy) * 100;
ozel += "<tr><td>" + partiler[sec] + "</td>";
ozel += "<td>" + partioyu + "</td>";
ozel += "<td>% " + partiorani.toFixed(2) + "</td></tr>";
kalanoy += partioyu;
x++;
}
kalanoy = kullanilanoy - kalanoy;
ozel += "</tbody>";
ozel += "</table>";
$("#ozel").html(ozel);
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Tablonun başlığının, alt başlığının ve partilerin aldığı oyların listelendiğini görürsünüz. Seçimlerde kullanılan tüm oylar geçerli olmamaktadır. Geçersiz oylar her zaman çıkmaktadır. Biz burada geçersiz oyları tablonun dipnotu olarak göstereceğiz.
ozel = "<table class='table table-hover caption-top'>";
ozel += "<caption>";
ozel += "<h4 class='text-center'>Oyların Partilere Göre Dağılımı</h4>";
ozel += "</caption>";
ozel += "<thead class='table-dark'>";
ozel += "<tr><th>Parti Adı</th><th>Oy Sayısı</th><th>Oy Oranı</th></tr>";
ozel += "</thead>";
ozel += "<tbody>"
for (var i = 0; i < partisayisi; i++) {
sec = Math.floor(Math.random() * partiler.length);
if ((kullanilanoy - kalanoy) > 0)
partioyu = Math.floor(Math.random() * (kullanilanoy - kalanoy)) + 1;
else
partioyu = 0;
partiorani = (partioyu / kullanilanoy) * 100;
ozel += "<tr><td>" + partiler[sec] + "</td>";
ozel += "<td>" + partioyu + "</td>";
ozel += "<td>% " + partiorani.toFixed(2) + "</td></tr>";
kalanoy += partioyu;
x++;
}
kalanoy = kullanilanoy - kalanoy;
ozel += "</tbody>"
ozel += "<tfoot class='table-warning'><tr>";
ozel += "<td>Geçersiz Oy Sayısı : </td>";
ozel += "<td>" + kalanoy + "</td>";
ozel += "<td>% " + ((kalanoy / kullanilanoy) * 100).toFixed(2) + "</td>";
ozel += "</tr></tfoot>";
ozel += "</table>";
$("#ozel").html(ozel);
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Tabloya ait tüm değerlerin ekranda listelendiğini gürürsünüz. Elde edilen değerleri hesaplayarak kontrol edebilirsiniz. Uygulamaya ait grafik işlemine geldi sıra. Ben bu işlem için google tarafından piyasaya sürülen grafik api dosyasını kullanacağım. Öncelikle bu api dosyasını web sayfasına eklemekle işe başlayalım.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Grafik çizimi için oluşturacağımız metodu ve grafik dosyalarını yüklemek için aşağıdaki kodları yazalım.
google.load('visualization', '1', { packages: ['corechart'] });
Projeyi kaydedip çalıştıralım. Web sayfasını çalıştırdığımızda hata verecektir. Çünkü grafikCiz() metodunu henüz tanımalamdık. Metodun tanımını yapalım.
function grafikCiz() {
}
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Ben grafik çiziminde baklava şeklini kullanacağım. Bunun için partinin adına ve aldığı oya ihtiyacım olacaktır. Bu bilgileri tutacak dizi elemanını tanımlayalım.
const m = partisayisi + 1;
const n = 2;
let sonuclar = Array.from(Array(m), () => new Array(n));
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Tanımladığımız bu liste elemanına gerekli bilgileri alalım.
for (var i = 0; i < partisayisi; i++) {
sec = Math.floor(Math.random() * partiler.length);
if ((kullanilanoy - kalanoy) > 0)
partioyu = Math.floor(Math.random() * (kullanilanoy - kalanoy)) + 1;
else
partioyu = 0;
partiorani = (partioyu / kullanilanoy) * 100;
ozel += "<tr><td>" + partiler[sec] + "</td>";
ozel += "<td>" + partioyu + "</td>";
ozel += "<td>% " + partiorani.toFixed(2) + "</td></tr>";
sonuclar[x][0] = partiler.splice(sec, 1);
sonuclar[x][1] = partioyu;
kalanoy += partioyu;
x++;
}
kalanoy = kullanilanoy - kalanoy;
sonuclar[x][0] = "Geçersiz Oy";
sonuclar[x][1] = kalanoy;
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Elde ettiğimiz verilerin kullanılması için grafikCiz() metoduna sonuclar liste elemanını parametre olarak verelim. Buna göre grafikCiz() metodunu grafikCiz(sonuclar) olarak değiştirelim. Tanımladığımız fonksiyonu grafikCiz(liste) olarak tanımlayalım. Yapılan işlemlerin doğru olup olmadığını kontrol etmek için alert() mesajını kullanabilirsiniz. Fonksiyonu çağırdığımızda liste elemanının içinin dolu olup olamdığını kontrol edelim.
if (liste.length > 0) {
}
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığından emin olalım. Yapılan işlemlerin doğru olup olmadığını kontrol etmek için alert() mesajını kullanabilirsiniz. Grafik çizimi için data elemanı oluşturalım. İçine gerekli bilgileri ve grafiğin başlığını aktaralım.
var data = new google.visualization.DataTable();
data.addColumn('string', 'parti');
data.addColumn('number', 'oy');
data.addRows(liste.length);
for (var i = 0; i < liste.length; i++) {
data.setValue(i, 0, liste[i][0].toString());
data.setValue(i, 1, parseFloat(liste[i][1]));
}
new google.visualization.PieChart(document.getElementById('grafik')).
draw(data, {
title: "31 MART 2024 YEREL SEÇİMLERİ SONUÇLARI"
});
Projeyi kaydedip çalıştıralım. Web sayfasında verilerin ve grafiğin doğru sonuçlar verip vermediğini kontrol edelim. Böylece terminal tabanlı olarak verilerin girişini ve işlenip sonuçlar üretmesini yapmış olduk.