Daha önceki yazımda yine CharJS Jquery plugini incelemiştim. Bu yazımda yine ChartJs ile devam edeceğim ancak, bu defa Line Grafiğin kullanımını irdeleyeceğim.
İnternet ortamına baktığımızda,gerek ChartJS’in dökümantasyonlarında gerekse net ortamında JSon bir dataset’le kullanıma dair bir çok örnek var. Ama projelerimizde kullanırken maalesef hazır bir dataSet yerine veritabanından sorgularla özelleştirerek çektiğimiz verileri grafiklerle görselleştirmek istiyoruz. Yeni öğrenenler için soru işareti ancak cevabı kolay bir json sorunu 🙂 JSon bilmek şart yani sonrası Json kullanarak pratik yapmak.
Daha önceki yazımın devamı niteliğinde olduğu için, proje açılması ya da Controller’da yazılacak olan GET methodundan bahsetmeyeceğim. bknz:Önceki Makalem
Yine html tasarımı hazır şekilde vererek ilerliyorum. Bu defa bir row açıyorum ve satırımı 8+4 şeklinde ayırıyorum.8’lik bölüme grafiğimi koyuyorum 4’lük bölüme ise click event’ini dinleyeceğim butonumu.
Senaryomuz şu şekilde: Butona tıklandığında çizgi grafiğimiz hafiften animasyonlu şekilde çizilmeye başlanacak. Y ekseninde benim belirlediğim 0 5 10 15 şeklinde artan bir array x ekseninde ise Ülke isimleri bulunacak. Hangi ülkeden kaçar tane bulunduğunu görselleştirmeye çalışacağız.
Sonrasında daha önceden yazılmış olan Server tarafındaki GET methodumu Ajax ile çağırarak grafikte gösterecek olduğum verilerin düzenlenmesine geçiyorum
Butona click event’i geldiğinde GenerateGrafic fonksiyonumu çağırıyorum. Bu fonksiyon içerisinde bir Ajax çağrısı yapacağız. Çağrımız sonucunda veritabanından verileri başarılı şekilde alırsak success foksıyonu içerisinde verilerin grafikte gösterime uygun hale getirilmesi işlemlerini yapacağız. Grafiğimiz için istediğimiz varsayılan ayarlalamaları yapıp grafiğimizi çizdireceğiz.
Biz veritabanından bir nesneler array’i çekiyoruz. Bunu daha iyi görebilmemiz için console.log diyerek verinin bütünden parçalanmış hallerine dair konsolda yazırma işlemini yaptırdım. Bunu neden yapıyoruz ? Bu grafikte bizim için 3 ana dataset var. x ekseni y ekseni ve grafiği çizecek olan veriler.Bu nedenle veritabanından gelen response.d datasının country kısmını x exseni için kullanıyoruz, count kısmını çizdirme verileri olarak kullanıyoruz. Y ekseni için gereken verileri ise biz tanımlıyoruz.
Verimizi aldıktan sonra veritabanından Json object şeklinde işlemeye başlıyoruz.
Grafik için verileri uygun hale getirdik şimdide çizdirmeye başlyoruz,önceki makalemde de yaptığım gibi canvas tag’ına erişiyoruz ve Chart için gereken line tipinde şu verileri kullanarak bir grafik olultur anlamına gelen kodu yazıyoruz.Böylelikle onSucces fonksıyonumuz sonlanıyor.
Son olarak ajax çağrımızın bir hata ile dönmesine karşılık OnError fonksiyonumuzda hata alert’ini veridiriyoruz ve Script tagları içerisine yazacağımız kodlar sonlanıyor.
Mini uygulamamızın sonucunda şu şekilde bir görüntü alacağız :
Tool Tip dikdörtgenine dikkat ederseniz radius 0. Ve ToolTip yazı fontu bold ve italik.
Bir sonraki ChartJs grafik incelemesinde görüşmek izere. Lütfen aklınıza takılanları yorum sekmesine bırakınız. Örneği uygularken kodlamayı unutmayın kopyala yapıştır sadece sizi tembelleştirir. Öğrenmek için uygulamak gerektiğini kendinize anımsatın. 🙂
Merhaba,
Yine bir jquery pluginin, asp.net mvc projelerinde nasıl kullanılacağına dair bilgilendirme yazısı hazırladım. Dökümanların ingilizce olması ve bu pluginlerin kullanımında dataset’in Json formatta hazır verilmesi, api ile kullanımında özellikle yeni başlayanlar için korkutucu olabiliyor. Örneğin ben.. ama artık korkmuyorum o kadar çok uygulama yaptım ki artık işi kaptım:) Size de tavsiyem ilk deneyim uzun sürsede sonrasında öğreniyorsunuz ve kodlama süreci azalıyor. Panik Yok!
Serime, ChartJs ile devam ediyorum.Bu bilgilendirmede sadece bir grafik göstereceğim ama, her gün bir başka grafiği anlatmayı planlıyorum. İlk grafiğimiz Pie Grafik. bknz: Pie
Yine Visual Studio Ide’mizde daha önceki anlatımlarımda olduğu gibi empty bir MVC proje başlatıp bir tane homecontroller ve buna bağlı bir view açıyoruz.Ardından, Veritabanı bağlantımızı yapıp Ado.Net Entity Model eklemesi yapıyoruz.Sonra başlıyoruz kodlamaya.
HomeController içerisinde, veritabanındaki personel tablomuzdan, ülke ve ülkelerin sayılarını entityframework query’si ileçekiyorum. Kodların açıklamasını yine kod üzerinde yaptım. Aşağıdadır :
[HttpGet]//Methodun bir get işlemi yapacağını söylüyorum
public JsonResult GetDataforChart() { //Methodun döndüreceği veri Json formatta olacak
using (DBPersonelTakipEntities dc = new DBPersonelTakipEntities()){
//personellerin ülke ve şehir bilgilerini çekiyorum sadece
//ülkeleri groupby ile prouplayıp sayısını hesaplıyorum
var query = dc.Tbl_Personel //personel tablosuna eriş
.GroupBy(p => p.Country)//Country sütununu groupla
.Select(g => new {//Tablodan istediğim verileri
country = g.Key,//benim belirlediğim değişkene set et
count = g.Count()//Country değerini say ve set et
}).ToList();//Birdn fazla kayıt olabilir o nedenle tolist diyorum
//Client tarafında json veri üzerinde çalışacağımda, Json bir değer döndürüyor methodum
return Json(new { data = query }, JsonRequestBehavior.AllowGet);
}
Şimdi Html tasarımı yapmaya başlıyorum. Yine tagları yazarken yorum ile açıkladım.
Ekran görüntüsü koymaya çalışıyorum ki elimizle yazalım kopyala yapıştır yaparak kendimize kötülük ediyoruz.
Javascript kodlarımızı yazmadan önce, ChartJs’i kullanabilmemiz için gereken linkleri projemize ekliyoruz. Bunun için CDN’den faydalanıyorum. CDN’de nedir diyenler için bknz:cdn
Tasarımımızın ardından client tarafta bulunan javascript kodlarımızı yazmaya başlıyoruz. Buradaki hedefimiz, önce server’a bağlanmak, methodumuzun bize verdiği json veriyi kullanarak grafiğimizi çizdirmek. Ardından, grafik renklerle çizileceği için her rengin ne ifade ettiğini, grafiğin yan tarafında göstermek.
Kodlar açıklamasıyla birlikte aşağıdadır.
$(document).ready(function () {//Tüm Dom ağacı yüklendikten sonra çalış diyoruz
$("#btnGeneratePieChart").on('click', function (e) {//butona tıklanma olayını dinliyoruz
e.preventDefault();//Varsayılan event'ın kaldırılmasını söylüyoruz'
GenerateGrafic();
});
function GenerateGrafic() {
$.ajax({//Ajax yardımıyla server tarafına erişiyorum
type: "GET", //Methodumuzun ne iş yaptığını belirtiyoruz
url: "/home/GetDataforChart", //controller/Method
contentType: "application/json; charset=utf-8",
dataType: "json",//Alacağımız verinin tipini söylüyoruz
success: OnSuccess_,//Çağrının olumlu sonuçlanmasıyla çağıracağım fonksıyonu soyluyorum
error: OnErrorCall_//Çağrının olumsuz sonuçlanmasıyla çağıracağım fonksıyonu soyluyorum
});
function OnSuccess_(response) {
var aData = response.data;
var arr = []; //Grafik çizdirmek için kullanacak olduğum array
var arrColor = ["#231F20", "#FFC200", "#F44937", "#16F27E", "#FC9775", "#5A69A6"]; //renk dizim
//renk kaydı veritabanında olmadığı için javascript kısmında ekliyorum
$.each(aData, function (inx, val) { //inx burada index değeridir.
var obj = {};
obj.color = arrColor[inx];//nesnenin, color değerine arrcolor array'inden sırasıyla değer atıyorum'
obj.value = val.count;//grafiğin sayısal değeri
obj.label = val.country; //sayısal değerin ifade ettiği ülke
arr.push(obj); //netilekleri eklenen onjecyi arraye set ekliyorum
$('', {}).css({ //Renk eklemek için her li tagına bir input append ediyorum
'background-color': obj.color,//bu inputları renkli kutular haline getirmek için
float: 'left',//bazı css'ler yazıyorum'
width: '20px',//genişlik
height: '20px',//yükseklik
border: '1px solid rgba(0, 0, 0, .2)'//kutular görünür olsun diye solid veriyorm
}).appendTo('ul.justList')
//aynı zamanda label'ın yanına hangi renk olduğunuda gösterelim
//Renklerin anlamlarını da labelların anlamlaeınıda labellarda gösterelim
$('
', { html: obj.label }).appendTo('ul.justList')
});
var ctx = $("#dvChart").get(0).getContext("2d"); //Grafik çizdireceğim canvas alanına erişiyorum
//bunun anlamı jquery koleksıyonun bulunduğu domda ilk düğümü getir demektir.
var myNewChart = new Chart(ctx).Pie(arr);//arr dizininin değerleriyle grafik çizdiriyorum
}
function OnErrorCall_(response) {//SErverdan gelen cevabın 500,404 gibi herhangi bir hata olması durumunda
alert("HATA" + response);//hatayı aleert ediyoruz
}
}
});
Mini projemin çalışır hali aşağıdaki gibidir.
Elimden geldiğince, kısa zamanımda ChartJS’in api ile kullanımını anlatmaya gayret ettim. Umarım faydalı olmuştur. Sorularınızı yorum bırakın lütfen..
Jquery plugin’lerinin neredeyse hepsini şu an yürütmekte olduğum proje için kullanmaktayım. Yeni başlamış olduğum bu seride, pluginleri kullanırkende anlatmayı amaçlamaktayım. İlk yazıma bana en yakın gelen takvim uygulaması ile başlamak istedim.
Öncelikle Visual studio IDE’mizde bir Empty ama MVC template’te bir proje başlatıyoruz.Visual studi’da file->new->project ve ardından Asp.Net Web Application(.Net Framework) seçerek bu ekrana ulaşıyoruz.
Projemiz açılır açılmaz bir mdf dosyası ekliyoruz. Bunun için App_Data klasörüne gelip add-> new item sekmelerini seçiyoruz ve açılan pencerede sol menude bulunan data sekmesini seçiyoruz. Ve Projemize bir adet Sql Server DataBase ekliyoruz. Aşağıdaki Resimde bunu anlatmaya çalıştım.
SQL Server veritabanımızı projemize ekledikten sonra bu veritabanına bir planların tutulacağı bir tablo eklemesi yapıyoruz. Üst menüde bulunan View sekmesinden Server Explorer menüsünü açıyoruz.Burada eklediğimiz veritabanını incelediğimizde Tables sekmesini görürürüz ve yine sağ tıklayarak yeni bir tablo oluştur diyerek planlarımızı koyacağımız tabloyu oluşturmaya başlıyoruz.
Event tablosu için gereken sütunların oluşturulmasına dair sql dilinin kullanımı ve sonuç aşağıdaki resimdedir. Resme bakarak sizde tablonuzu oluşturabilirsiniz.
Tablomuz hazır olduğuna göre projemize yeni bir controller ve controller içinde gelen ındex methoduna bir tane view ekliyoruz. Bu adımları daha önceki makalelerimde bahsettiğim için geçiyorum.Bu adımları gerçekleştiremezseniz lütfen yorum atın ilgileneyim.
Veritabanımıza tablomuzu oluşturup controller ve view’imizi de oluşturduktan sonra, veritabanında bulunan tablomuza erişebilmek için ADO.NET Entity Model ekliyoruz. Diğer ekleme işlemlerinde de yaptığımız gibi, ekleme yapmak istediğimiz model klasörü üzerine gelip sağ tıklayıp add new item diyerek, sol menüde DATA sekmesi altında bulunan ADO.NET Entity Model’i seçiyoruz. Bu adımı daha iyi anlayabilmek adına, bilginiz yoksa, bu adımın öncesinde ADO.NET Entity Model hakkında kısa da olsa bilgi edinmenizi öneririm.
Controller’ımızı açıyoruz ve Veritabanında bulunan planları get ve save edecek olan metotlarımızı yazmaya başlıyoruz.Bu kodları, kod üzerinde yorum ile açıklamaya çalıştım. Sorularınız olursa lütfen yorum bırakınız. Veritabanından Veri Okunması
[HttpGet]//httpget diyerek methodumuz ne iş yapacağını belirtiyoruz.
public JsonResult GetEvents() { //Jquery ile planlarımızı takvim üzerine yerleştireceğiz
//bu nedenle JSonResult değer döndürüyoruz
using (DBCalendarEntities dc = new DBCalendarEntities())//Eklediğimiz entitymodel'dan bir örnek alıyoruz
{
var events = dc.Tbl_Events.ToList(); //bütün tabloyu select ediyoruz.Bu nedenle ayrıca select yazmıyorum.
//tabloda birden fazla değer olabilir o nedenle firstOrdefault yerine ToList diyorum
return new JsonResult { Data = events, JsonRequestBehavior=JsonRequestBehavior.AllowGet};
//Son olarak methodun döndürdüğü verinin Json Datası olduğunu söylüyor ve Data niteliğine events diyorum.
}
}
Veritabanına Plan Kaydedilmesi ve Güncellenmesi
[HttpPost]//httpost diyerek methodun kayıt işi yapacağını belirtiyoruz.
public JsonResult SaveEvent(Tbl_Events e) //Sonucu yine Json döndürüyoruz
{
var status = false;//Yapılan işlemin başarısını status değişkeninde tutuyorm
using (DBCalendarEntities dc =new DBCalendarEntities()){//Yine bir örnek alıyorum model'ımdan
if(e.EventID > 0)//eğer kaydetmek istediğim planın id değeri 0 dan büyükse
{
//Güncelleme yap diyorum. Bunun içinde bu planı tablomda bulup v değişkenine atıyorum.
var v = dc.Tbl_Events.Where(a=>a.EventID==e.EventID).FirstOrDefault();
if (v != null)//v değerinin null olup olmadığını kontrol ediyorum
{//ve sırasıyla parametre olarak gelen plan değerlerini, veritabanındaki değerlerle değiştiriyorum
v.Subject = e.Subject;
v.Description = e.Description;
v.Start = e.Start;
v.End = e.End;
v.IsFullDay = e.IsFullDay;
v.ThemeColor = e.ThemeColor;
}
}
else
{//eğer EbentID değeri 0 dan büyük değilse bu yeni kayıt olduğu anlamına gelir
//ve doğrudan tabloma eklerim
dc.Tbl_Events.Add(e);
}
dc.SaveChanges();//yapılan değişimin veritabanına yanstılması için
status = true;//işlem başarıyla tamamlandığı için status değişkeni true ile set edilir.
}
return new JsonResult { Data = new { status=status } };//status değişkenini view'e gönderirim
}
Plan Silme Methodu
[HttpPost]//httpost diyerek methodun kayıt işi yapacağını belirtiyoruz.
public JsonResult DeleteEvent(int EventID) //Sonucu yine Json döndürüyoruz
{
//method parametre olarak silinecek olan planın id değerini alıyor
var status = false;
using (DBCalendarEntities dc = new DBCalendarEntities())//Yine bir örnek alıyorum model'ımdan
{
//id değerini kullanarak silinecek olan planı veritabında arayıp buluyorum.
var v=dc.Tbl_Events.Where(a => a.EventID == EventID).FirstOrDefault();
if (v != null)//bulunan değer null değilse
{
dc.Tbl_Events.Remove(v);//veritabanından kaldırıyorum
dc.SaveChanges();//yapılan değişimin veritabanına yanstılması için
status = true;//işlem başarıyla tamamlandığı için status değişkeni true ile set edilir.
}
}
return new JsonResult { Data=new { status = status } };//status değişkenini view'e gönderirim
}
Controller’da method tanımlamalarımız ardından Index View’imizi açıyoruz. Öncelikle sayfamıza FullCalendar için gereken css ve js uzantılı dosyaların linkini vermekle işe başlıyoruz.
Server tarafındaki verileri client tarafında kullanmamız ve göstermemiz için gereken javascript kodları aşağıdaki gibidir.
$(document).ready(function () { //Tüm Dom ağacı yüklendikten sonra çalışmaya başlanacak olan kodlar
var events = [];//planlarımı ekleyeceğim bir array oluşturuyorum
var selectedEvent = null;// tıkladığım planı tutacak olan değişken
PlanGetirYukleCalendar();//Devamlı bir yenilemeye ihtiyaç duyulacağı için fonksiyon yazıldı
function PlanGetirYukleCalendar() {
events = []; //yine planları tutacak bir arrayimiz var
$.ajax({ //planlarımız server taradından geleceği için ajax'tan yardım alıyoruz'
type: "GET", //çağtılan methodumuzun ne iş yaptığı
url: "/home/GetEvents",//controller/method
success: function (data) {//server çağrısı başarılı olursa
$.each(data, function (i, v) {
events.push({//arrayime sırasıyla çektiğim verileri atıyorum niteliklerine uygun olarak
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
TakvimOlustur(events);//Tüm planların çekimini yaptıktan sorna takvimi oluşturmak için fonksiyonumu çağırıyorum
},
error: function (error) {//server cevabı hatalı olursa alert verdiriyorum.
alert('Hata');
}
})
}
function TakvimOlustur(events) {
$('#calender').fullCalendar('destroy'); //var olan takbimi önce bir yok ediyorum
$('#calender').fullCalendar({
contentHeight: 400,//takvim için yükseklik veriyorum
defaultDate: new Date(),//varsayılan olarak bugünü göster diyorum
timeFormat: 'h(:mm)a',//format belirliyoruz
header: {//başlık kısmında bvulunması istediğim butonlar ve yerleri
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) { //plana tıklanınca olacak olaylar
selectedEvent = calEvent;//tıklanan planı tutuyorum
$('#clndrModal #eventTitle').text(calEvent.title); //ve ilk bilgilendirme modal'ımı çağırıyorum'
var $description = $('
$('#btnEdit').click(function () {
//Düzenleme olayı için gereken modal açılır
openAddEditForm();
})
$('#btnDelete').click(function () {//sil butonuna tıklanınca confirm alert çıkarıyoruz
if (selectedEvent != null && confirm('Emin Misin?')) {
$.ajax({
type: "POST", //ajax ile silinecek olan planın id değerini method'a parametre veriyoruz'
url: '/home/DeleteEvent',//controller/method
data: { 'eventID': selectedEvent.eventID },//seçilen planın id değerini parametre verrim
success: function (data) {
if (data.status) { //controllerdan bize status Verisinin geldiğini hatırlayın
PlanGetirYukleCalendar();
$('#clndrModal').modal('hide');//Silme durumunun ardından bu modalı kapatıyoruz
}
},
error: function () {//status verisi false gelirse
alert('Hata');
}
})
}
})
$('#dtp1,#dtp2').datetimepicker({//Plan oluşumunda kullanılacak olan bootstrap'ın datetimepickerları
format: 'DD/MM/YYYY HH:mm A'
});
$('#chkIsFullDay').change(function () {//tam gün planı ise bitiş zamanına dair bootstrap datetimepicker saklanır
if ($(this).is(':checked')) {
$('#divEndDate').hide();
}
else {
$('#divEndDate').show();
}
});
//düzenleme işlemi için form açıldığında
//açılan formun düzenlenecek olan planın değerleriyle dolu olarak gelmesi için
//Jquery val ile niteliğin değeri alındı ve set edildi form inputlarına
function openAddEditForm() {
if (selectedEvent != null) {
$('#hdEventID').val(selectedEvent.eventID);
$('#txtSubject').val(selectedEvent.title);
$('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY HH:mm A'));
$('#chkIsFullDay').prop("checked", selectedEvent.allDay || false);
$('#chkIsFullDay').change();
$('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY HH:mm A') : '');
$('#txtDescription').val(selectedEvent.description);
$('#ddThemeColor').val(selectedEvent.color);
}
$('#clndrModal').modal('hide');
$('#clndrModalSave').modal();
}
//Kaydet butonuna basıldığında Form inputlarını kontrol ederim oncelıkle
$('#btnSave').click(function () {
//Doğrulama
if ($('#txtSubject').val().trim() == "") {
alert('Konu Boş Bırakılamaz.');
return;
}
if ($('#txtStart').val().trim() == "") {
alert('Başlangıç Zamanı Boş Bırakılamaz');
return;
}
if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") {
alert('Bitim Zamanı Boş Bırakılamaz');
return;
}
else {
var startDate = moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toDate();
var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toDate();
if (startDate > endDate) {
alert('Bitim Zamanı Başlangıç Zamanından Önce Olamaz.');
return;
}
}
//Controller kısmına pass edilecek veri Json formatta toparlanır
var data = {
EventID: $('#hdEventID').val(),
Subject: $('#txtSubject').val().trim(),
Start: $('#txtStart').val().trim(),
End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),
Description: $('#txtDescription').val(),
ThemeColor: $('#ddThemeColor').val(),
IsFullDay: $('#chkIsFullDay').is(':checked')
}
// Server kısmına data'yı pass etmek için fonksıyonumu çağırırım'
SaveEvent(data);
})
function SaveEvent(data) {
$.ajax({
type: "POST",//ajax ile silinecek olan planın id değerini method'a parametre veriyoruz'
url: '/home/SaveEvent',////controller/method
data: data,//post edilecek data
success: function (data) {
if (data.status) { //controllerdan bize status Verisinin geldiğini hatırlayın
//Takvimi yenile
PlanGetirYukleCalendar();
$('#clndrModalSave').modal('hide');//Katdet modalımızı kapatıyoru<.
}
},
error: function () {
alert('Hata');
}
})
}
})
Beklenen çıktılar şu şekilde olmalıdır
Bu modalın açılabilmesi için plana tıklamak gerektiğini unutmayın.
Yeni bir plan eklemek için, ekleme yapacağımız güne tıklmamamız gerekir.
Diğer bir pluginin kullanım örneğinde görüşmek üzere.
Bundle config dosyası,Asp.NET MVC projelerinde varsayılan olarak gelmektedir. Burdan Microsoft’un bu dosyayı kullanmamızı istediği çıkarımını yapabiliriz.
Peki nedir bu Bundle config dosyası ? Neden kullanımına ihtiyaç vardır ?
Büyük çaplı projelerde script ve css dosyalarımızın kontrolünü yapmak, küçük çaplı bir projelere nispeten daha karmaşıktır. Tek bir sayfada beşten fazla script her biri için css dosyası olduğunu da varsayarsak 10 satır yapar. Projemizde on sayfa olsa ve her sayfada bu dosyalara ihtiyaç duysak 100 satır yapar.Oluşan karmaşıklığı ve projeyi geliştireyim derken içine düşülen takip operasyonunu varın siz hayal edin :)Bu dosyalar bu kadar ne olabilir ki derseniz: kodlamaya yeni başlayanlar için örnekleyeyim: Jquery.min.js,Jquery-ui.js, Bootstrap.min.js, Bootstrap.css,kendi yazdığımız ‘custom’ css ve js dosyaları, kullanılan bir diğer plugin’lere ait css ve js uzantılı dosyalar..
İşte bu durum, proje geliştirme sürecinde zorluklar çıkarabilir. Projede dosyaların daha düzenli tutulması için bundle config dosyası kullanılmaktadır. Tabi ki tek yararı karmaşıklığı ortadan kaldırmak değil. Projemize eklediğimiz css ve script dosyalarını optimize ederek performans tasarrufu sağlar ve google aramalarında bizi üst sıralara taşır.
BundleConfig.cs dosyamıs App_Start klasörünün içerisinde bulunmaktadır. Varsayılan bir proje başlatmamışssanız ve sonradan kendiniz ekleyecekseniz bu klasör içerisine eklemeniz gerekmektedir.Siz kendiniz bu dosyayı oluşturmuşsanız
‘BundleTable.EnableOptimizations = true;’ komutunu mutlaka yazmalısınız.Aksi taktirde bu dosyanın optimizasyon yapmasına izin vermemiş olursunuz ve amacımız olan optimizasyonda yapılamaz.
Script ve css dosyalarımızı gelişigüzel sırada bu dosyaya ekleyebiliriz ama tabi ki gelişi güzel değil her sayfa için ya da her sayfada kullanılacak olanları bir bir araya getirerek render etmenizi öneririm.
App_start Klasörünün Solution Explorer menüsündedir.
Örnek olarak kendi projemin bundleconfig.cs dosyasından bir ekran görüntüsü paylaşıyorum.Sizde incelerseniz fark edeceksiniz ki onlarca dosya kullanıyorum. Her biri için request yapılsa performans düşecektir. Siz normal bir sayfa açılışında 10 farklı js dosyası için 10 farklı request işlemi gerçekleştirirken bundle tekniği ile dosyalar “yığın” haline getiriliyor ve tek bir dosya olarak geriye döndürülüyor. 1 request işlemi gerçekleşiyor.Yine performansa dair etkisini örneklersem bundle edilen tüm dosyaların minification işlemine tabii tutulması.Yani sıkıştırılmış ve boyutu düşürülmüş bir biçimde geriye döndürülüyor.
Gelelim bu BundleConfig dosyamızı html içinde nasıl çağıracağımıza.. Resimde anlatıldığı şekilde Razor kod yardımıyla, ulaşmak istediğimiz dosyayı BundleConfig.cs dosyası içerisinde hangi isimin altına koyduysak o isimle çağırıyoruz. Yani bir isim altına 10 dosya koymuşsak 10’unada aynı tek bir satırla erişiyoruz.
MVC yazılım mühendisliğinde kullanılan bir design pattern’dir.Açılımı, M(Model), V(View), ve Controller(Kontrol Edici) şeklindedir.Amacı , modüler şekilde yazılım geliştirmeyi sağlamaktır. Kullanıcıya yüklü miktarda verinin sunulduğu karmaşık uygulamalarda veri ve gösterimin soyutlanması esasına dayanır.Kullanıcıyı ilgilendiren veriler, controller katmanından geçerek, sunum katmanında kullanıcıya ulaşır.Controller katmanında, veriler işlenir, bazı yanları gizlenir özetle kullanıcıya gösterilmek üzere hazırlanır.
Günümüzde MVC dendiğinde akla ilk gelen Asp.Net MVC’dir ancak Asp.NET MVC bir design pattern değildir Microsoft tarafından geliştirilen bir framework’tür.Daha hızlı, yönetilebilir ve yenilenebilir yazılım geliştirmeyi amaçlar.Bu framework içinde MVC’yi tekrar açıklamak istersek:
MODEL: verinin ve iş mantığının şeklini temsil eder. Uygulamanın verilerini tutar. Model nesneleri, model durumunu bir veritabanından alır ve depolar.
VIEW: Gösterilmek istenen verileri, kullanıcıya model kullanarak gösterir ve aynı zamanda verinin değişimine olanak sağlar.
CONTROLLER: Kullanıcı istekleri için diğer bileşenler arasındaki etkileşimi sağlar.Genellikle, kullanıcı, uygun URL isteğini view ile iletir ve bu istek o view’den sorumlu controller tarafından ele alınır.Controller, uygun bir view model ile etkileşime geçer ve model’den aldığı veriyi yanıt olarak verir.
MVC Mimarisi Yapısı Genel Gösterim
Asp.Net MVC framework kullanarak, e-ticaret temalı projemize başlayalım.İlk yapmamız gereken Visual Studio’nun herhangi bir sürümü üzerinde Web temalı proje açmak.Ben Visual studio2015 Community sürümünü kullanıyor olacağım. Bunun için sırasıyla şu adımları uygulayalaım
Visual studio start ekranı-> Yeni Proje Aç
New project ekranında, Installed sekmesi->Other Project Types->Blank Solution (Şekil 1)
Blank Solution üzerine sağ tıklayıp add->new project->installed->web->Asp.NET Web Application seçilir ve şekilde anlatıldığı gibi isimlendirme yapılır.(Şekil 2 ve Şekil 3)
Şekil 1
Şekil 2
Şekil 3
İlk 3 adımın yapılmasının ardından solution explorer’da framework için gereken klasörler ve dosyalar şekilde 4’teki gibi bize sunulur.Şimdi bu klasör ve dosyaların bize hazır olarak sunulmasındaki amaçları açıklayalım.
Şekil 4
App_Data:Projemizde kullanacağımız veri dosyalarını barındırır.Bu veri dosyalarına örnek verecek olursak, xml, mdf, LocalDB dosyalarını söyleyebiliriz.
App_Start:Her yazılımın bir yaşam döngüsü vardır ve geliştirecek olduğumuz yazılım projesi çalışmaya başladığı anda çalışmasını istediğimiz kodlar yani daha derli toplu haliyle sınıflar bu klasörde bulunur.Örnek olarak AuthConfig.cs, BundleConfig.cs, FilterConfig.cs, RouteConfig.cs gibi yapılandırma dosyalarını söyleyebiliriz.
Controller: Controller klasörü, controller için sınıf dosyalarını içerir. MVC, controller dosyla isimlerinin controller kelimesi ile sonlanmasını gerektirir.
Models:Model klasörüde isminden anlaşılacağı gibi model sınıflarını içerir.Bu sınıflar, geliştirecek olduğumuz yazılım için gereken veriyi barındırır, işler ve kullanıcıya iletir.
Views: Uygulama için gereken html dosyalarını içerir. Tipik olarak view dosyası, html ve C # veya VB.NET kodunu yazdığınız bir .cshtml dosyasıdır.Views klasörü, her controlleriçin ayrı bir klasör içerir. Örneğin, HomeController tarafından işlenecek olan tüm .cshtml dosyaları Views> Home klasöründe bulunur.Views klasörü altındaki shared klasörü, farklı controller’lar arasında paylaşılacak olan tüm view’leri içerir örneğin layout dosyları.
Global.asax:Global.asax, Application_BeginRequest, application_start, application_error, session_start, session_end gibi uygulama düzeyindeki olaylara yanıt olarak kod yazmamızı sağlar.
Packages.config:Packages.config dosyası, uygulamaya hangi paketleri ve sürümleri yüklediğinizi takip etmek için NuGet tarafından yönetilir.
Web.config:Web.config dosyası, uygulamamızın ayarlarını içerir.Örnek verecek olursak bir veritabanı bağlantısı sağladığımızda, kullanılacak olan veritabanına dair iletişim bilgileri, kısıtlamalar ya da izinler burada bulunur.
Genel bilgilerimizi verdikten sonra, projemiz için ilk gerçel adımı atalım ve Views klasörü altına Shared isimli bir klasör açalım ve bu klasör içerisine şekile 5’te gösterildiği gibi bir tane MVC5 layout Page dosyasını _Root ismiyle ekleriz ekleyelim.
Şekil 5
Layout’ı sayfamıza ekledikten sonra Razor deyişinden ve ve Layout terimlerinden bahsedelim.Razor bir görüntüleme motorudur ve MVC 3 ile işleve girmiştir.Server tarafında çalışacak olan kodlarımın ayrımını @ karakteri ile yapmamıza olanak sağlar.Server ve client side kodların ayrımını yaptığımız içinse yazılımımız hız kazanır.Peki, tek satır değilde beş on satır kodu serve tarafında çalıştırmak istesek ne yapacaktık, o zamanda yardıma {} yani süslü parantezler koşar, @{} belirteciyle,kodlarımızı süslü parantezler arasına yazarız.Razor view engine bize html içerisine, ihtiyaç duyduğumuzda server side kod yazmamıza olanak verir.Razor view dosyaları .cshtml ya da vbhtml uzantılıdır.
Oluşturduğumuz _root.cshtml dosyasının genel görünümü şekil 6’daki gibi olur.
Şekil 6
Oluşan layout sayfası html kodlarından ve razor bildirimlerinden oluşuyor.buradaki @ViewBag ve @ RenderBody kod’larının ne ifade ettiklerini açıklayalım.ViewBagController’dan view’e geçici verileri (modelde bulunmayan) aktarmak istediğinizde kullanılır.
Gelelim @RenderBody komutuna, contentViewHolder ile hemen hemen aynı işi yapar diyebiliriz.layoutPage olarak seçilen sayfaya view yükler.
Elementlerimizi, HTML5 ile geliştiriyoruz , dosyamızaki meta etiketi, sayfamızın responsive olmasını sağlamak için kullanılır.
Sıra geldi projemizin temel anlamda veritabanı bağlantısını sağlamaya.Bunun için veritabanı tasarımını yapmaya başlicaz.MSSQL management studio ortamında cilcommercev1 isimli bir veritabanı oluştururuz ve bunun ardından veritabanına sırasıyla, ihtiyaç duyduğumuz sayfaları ekleyeceğiz çünkü MVC yapısına uygun olarak projemizi modül modül geliştireceğiz.
Projemize başlangıç olarak Category tablosunu ekleriz.bu tabloda, ürünlerin kategorileri ağaç şeklinde bulunmaktadır.Bu ağaç gösterimi şekil 7’de görebilirsiniz.Tabloyu oluşturmak için kullanılan script kodlarını paylaşalım.
( [id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]) ON [PRIMARY]
Şekil 7
İlk dersimizde genel anlamda MVC nedir, Asp.NET MVC Framework nedir sorularının cevabı verildi.Asp.Net FrameWork ile bir proje visual studio ortamında nasıl oluşturulurun cevabını verdik.Projemiz için gereken ilk sayfayı ekledik ve sayfamız üzerinde gelen genel geçer bildirimlerin neler olduğundan ve tanımlarından, layout ve razor kavramından bahsettik.Projemizin Category sayfasının veritabanı kısmını oluşturmaya başladık.
<!DOCTYPE html>
<html lang="en">
<head>o
<meta charset="UTF-8">
<title>ResimleSlayt</title>
var time;
var myimage=document.images;
function bigPicture()
{
myimage[0].height+=20;
myimage[0].width+=20;
if(myimage[0].height==600 && myimage[0].width==600)
{
window.clearInterval(time);
smallPictureStart();
}}
function bigPictureStart()
{
time=setInterval(bigPicture,1000);
}
function smallPictureStart()
{
mytime=setInterval(smallPicture,1000);
}
function smallPicture() {
myimage[0].height -= 20;
myimage[0].width -= 20;
if(myimage[0].height==400 && myimage[0].width==400)
{
window.clearInterval(mytime);
bigPictureStart();
}}
</head>
<body onload="bigPictureStart()">
<center><img id="myPic1" src="myimage1.jpg" height="500" width="500"/></center>
</body>
</html>
Fotoğrafımız site açılır açılmaz büyümeye başlıyor cunku body etiketi içinde bigPictureStart fonksıyonu cagrılıyor.Fotografımızın height ve width özellikleri 600 oldugunda buyume duruyor ve 400 olana dek kuculuyor.
4 basamakli bir sayi alalim ve önce 4 basamakli mi diye kontrol edelim ardından bu sayimizi ters çevrilmiş şekilde kullancıya gösterelim 🙂 Örneğimizde fonksiyon ve dizi yapılarını kullandım 🙂
var number= 0,basamak= 1,mynumber=0;
function myfunction()
{
var basamak=1;
number=prompt("4 basamakli bir sayi giriniz : ");
mynumber=number;
while(number>=10) {
number = (number / 10);
basamak++;
}
if (basamak != 4) {
alert(" " + basamak + " basamakli bir sayi girdiniz");
}
else
alert("4 basamakli bir sayi girdiginiz icin tesekkurler :) ");
return basamak;
}
function yourfunction()
{
var yazilacak_rakam=0;
var dizi=new Array();
while( mynumber>=10 ) {
//Sayının son rakamı alınıp
//ekrana bastırılıyor.
yazilacak_rakam = Math.round(mynumber % 10);
dizi.push(yazilacak_rakam);
//Son rakam ekrana bastırıldığı
//için sayının son hanesi atılıyor.
mynumber /= 10;
}
dizi.push(Math.round(mynumber));
for(var i=0; i
JavaScript in Java diline nesne yönelimli olması sebebiyle benzer olduğunu ama birebir alakalı şeyler olduğunu düşünüyorsanız yanılıyorsunuz 🙂
JavaScript dili html kodlarının <head></head> etiketleri arasına yazılır ve etiketleri arasına kodları yazılır 🙂
Benim için en buyuk sorun yazılan kodların konsol çıktılarını görememek oldu ama bunu çaresini de Firebug(Firefox ‘un fireBug eklentisi) eklentisinde buldum.
Başlangıç için küçük iki örnekle başlayalım 🙂
Bir öğrenci için kullanıcıdan öğrenci numarası, isim, arasınav (30%), final (40%), proje (20%), ve katılım (10%) notlarını girmesini isteyelim (prompt komutu ile).
Daha sonra girilen notları yüzdeliklerine göre hesaplayıp konsolumuzda sonuçları görelim.
Kullanıcıdan örnek bir sayı girmesini isteyiniz, daha sonra 1-5 arası bir sayı girmesini isteyiniz.
Girilen birinci sayıyı, seçilen ikinci sayı kadar kendisiyle çarpıp sonucu ekrana yazdırın.
Şekil 3
NisanurBulut 