Düzce Üniversitesi 2022 Bahar Web Programlama Vize Çalışma Dokümanı.

Merhabalar ,
ben Yılmaz Kadan bu dokümanı Web Programlama Dersi için ufak bir klavuz etmesi amacı ile oluşturdum.
Genel bilgiler
Normal şartlarda HTML kodları arasına bir backend kodu yazamayız.
Cshtml html kodları içerisine C# kodları yazmamıza olanak sağlayan bir dosya türüdür. Burada direkt olarak c# kodu yazmak için “@” işareti kullanılır.
ncak birden fazla kod satırı olacak ise “@{}” şeklinde kullanılmalıdır .
Router’lar (yönlendiriciler)
Router’lar sisteme yapılan istekleri yakalar ve bizim isteklerimiz doğrultusunda belirli yerlere yönlendirler. Genelde yönlendirme Controller içinde bulunan action’lara olur.
Default yönlendirme: Default olarak controller ismi / gidilecek metot / parametre alınır. İd parametresine veya kullanmak istediğimiz farklı parametrelere UrlParameter.Optional dersek bu parametereler router tarafından beklenmez ve opsiyonel olur.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
Özel yönlendirme:
routes.MapRoute(
name: "Admin",
url: "Admin/{controller}/{action}/{id}",
defaults: new { controller = "Admin", action = "Index", id = UrlParameter.Optional }
);
Controller actions
Controller MVC mimarisinin kısa isminde "C" kısmına tekabül eder.
Router'lar yönlendirmeyi genelde istenilen controller'ın içindeki bir metota yapar.
İstersek bu metota parametre de yollayabiliriz.
Bu kullanımda controller'in direkt Index metotunun kodları gösterilmiştir.
Bağlı olunan view dosyasını View() metotu ile döndürür.
public ActionResult Index() {
return View();
}
Content() metotu kullanılır ise view’e ihtiyaç duyamadan direkt olarak bir içerik ekrana bastırılır.
public ActionResult Contentgoster() {
return Content("buraya özel geldin bunun viewi yok");
}
Diğer ActionResult geri dönüş tipleri. Result kısmı return edilirken yazılmaz.
- ViewResult // Direkt view döndürür.
- PartialViewResult // Parça view döndürür.
- ContentResult // Direkt text içerik basar ekrana.
- RedirectResult // Farklı bir url’e yönlendirir.
- RedirectToRouteResult // Bu başka bir routera yönlendiri.
- JsonResult // Json döndürür
- EmptyResult // Boş sayfa döndürür.
- FileResult // Dosya döndürür.
Controller’a yolladığımız parametreleri kullanma.
Bir yönlendirme yaparken bildiğimiz üzere optional veya zorunlu parametreler yollarız. Bu parametrerleri gidilen action(Metot) üzerinden kullanımı aşağıdaki gibidir.
public ActionResult ogrencibilgi(string ad, string soyad) {
return Content("Adamın adı :" + ad + " ve soyad : " + soyad);
}
Not: Yolladığımız parametreleri action içinde alırken direkt yollarken kullandığımız isimler ile almamız gerekmekte.
ViewBag nedir ?
Viewbag ile oluşturduğumuz bir değeri layout veya partial view gibi görünüm dosyalarında direkt olarak erişip kullanabiliriz.
Örneğin:
Action içerisinde şu şekilde oluşturulur:
public ActionResult Index()
{
ViewBag.SayfayaYazilcak = "Bu da index bilader";
return View();
}
Direkt view içerisinde ise şöyle tanımlanır:
@{
ViewBag.Title = "Anasayfa";
ViewBag.SayfayaYazilcak = "view içerisinde yazdırma";
}
View içerisinde bu değişkeni kullanmak istiyorsak aşağıdaki gibi çağırabiliriz.
<h2>@ViewBag.SayfayaYazilacak</h2>
Layout ve partialview , RenderSection mantığı
Layout yapısı bir kalıp mantığındadır. Bizim belirlediğimiz bir alana , istediğimiz view dosyasını entegre etmemizi sağlar. Eklenecek view’ın hangi bölgeye geleceğini ise Layout olarak belirlediğimiz dosya view dosyası içerisine @RenderBody() kodunu yazarak belirleriz.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="container body-content">
<!-- Çağrılan view layout'ın tam bu kısmına yerleşecek'--> >
@RenderBody()
<hr />
<footer>
<!-- DateTime.Now.Year bir c# kodu ve bize şu anın yılını verir.-->
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Layout dosyaları Views/Shared klasörü altında bulunur.
Layout başlangıçta her view için sabit olarak gelir. Eğer kullanmak istemiyorsak bunun için:
@{
Layout = null;
// Eğer kullanmak istersek null yerine direkt view'in yolunu belirtiriz.
}
Komutunu kullanırız.
PartialView kullanımı.
PartialView mantığı ise adından anlaşıldığı gibi parçalı view’dir izim başka sayfalarda tekrar tekrar HTML kodu yazmamızdan bizi kurtarır ve istediğimiz sayfaya parça viewi dahil etmemizi sağlar.
Shared klasörü altına oluşturduğumuz viewi istediğimiz bir sayfada çağırabiliriz.
@Html.Partial("ParcaView") Bu kod bize yardımcı olur.
Render Section Kullanımı
RenderSection özelliği sayesinde viewdeki belirli bir bölgeyi RenderBody gibi layout’a yollamamıza olanak sağlar. Bunun için genelde script ve css kodları kullanılır.
@section scripts {
<script>
alert('foo');
</script>
}
Layout içerisinde bu şekilde kullanabiliriz , aynı şekilde CSS kodları için de geçerlidir.
@RenderSection("scripts", false)
İkinci parametreyi false yaparsak gelen view içerisinde “scripts” alanı bulunmak zorunda değildir demek. Eğer true yaparsak gelen view içerisinde “scripts” alanı yok ise program hata verecektir.
Entity Framework
Entity framework veritabanı işlemlerimizi mükemel ölçüde kolaylaştıran ve bize ORM yaklaşımı ile rahat veritabanı işlemlerimizi yönetmemizi sağlayan bir yapı sunar. Projeye daha sonradan eklenmesi gerekmektedir.
Entity ile veritabanımızı ilişkilendirmek için. Model klasörümüze sağ tıklayıp. Şu ekrandan gösterilen yeri seçiyoruz.
Ardından ileriden istediğimiz tabloları sisteme dahil ediyoruz.
Detaylı yol haritası için bu linki takip edebilirsiniz.
Context ile Veritabanı İşlemleri.
Context entity framework dbfirst yaklaşımı ile beraber gelir. Projeye entity framework dahil ettiğimizde bizim için veritabanın tüm tablolarına erişmemize olanak sağlayan bir sınıf olarak gelir. Ve bu sınıftan nesne türetip tablolar için CRUD(Create, read,update,delete) işlemlerini bu context nesnesi üzerinden gerçekleştirebiliriz.
Aşağıda NorthwindContext adında bir context sınıfımız var bu sınıf üzerinen bir nesne oluşturup, Products tablosuna erişim sağlıyoruz. Ardından istediğimiz veritabanı işlemlerini gerçekleştiriyoruz.
Models klasörümüz altındaki modellere erişebilmek için ilk olarak Models namespace'sini dahil etmemiz gerekmekte.
// WebApplication2 kısmı sizin projeye verdiğiniz isimdir. Kendinize göre ayarlayabilirsiniz.
using WebApplication2.Models;
Context'e tüm action'lar(metotlar)dan erişebilmek için globalde context adında bir değişken oluşturuyoruz. Bu değişken bizim Entity'mizin sınıfına ait bir değişken olacak.
NorthwindContext context = new NorthwindContext();
public ActionResult Index() {
return View();
}
Insert(ekleme) İşlemi
public ActionResult urunEkle()
{
// Burada context aracılığı ile direkt olarak ürünler tablomuza nesne olarak eriştik.
var urunler = context.Products;
// Burada ürün türünde bir değişken oluşturuyoruz.
Product urun = new Product();
// Ürüne burada gerekli özeliklerini veriyoruz. Bu ORM yapısıdır.
urun.ProductName = "Araba";
urun.UnitPrice = 50000;
// Yukarıda oluşturmuş olduğumuz ürünler değişkenimize ürünümüzü add metodu ile ekliyoruz.
// Yalnız bu şu an bellekte tutuluyor veritabanına kayı edilmedi.
urunler.Add(urun);
// Veritabanına kayıt etmek amaçlı direkt saveChanges() metodunu kullanıyoruz.
context.SaveChanges();
//Viewbag kullanarak verileri listeleyeceğimiz için aşağıdaki kodu yazıyoruz.
ViewBag.Urunler = context.Products;
return View("urunler");
}
View sayfasında ürünleri viewbag kullanarak listelemek için:
<table>
@foreach (var urun in ViewBag.Urunler)
{
<tr>
<td>
@urun.ProductName
</td>
<td>
@urun.UnitPrice
</td>
</tr>
}
</table>
<h2>urunler</h2>
Model kullanarak listeleme:
Model kullanarak listeleme yaparken context ile modelimizi toList() metodu ile view'e yolluyoruz.
View dosyamızda ise eğer döngü kullanacaksak IEnumerable<> kodları arasında modelimizi tanımlamamız gerekiyor yoksa döngü içerisinde kullanamayız.
// Burada view'e ürün modelimizi yolluyoruz. toList() metodu ile beraber liste yapıyoruz.
public ActionResult urunler() {
return View(context.Products.ToList());
}
@{
ViewBag.Title = "urunler";
}
Burada dikkat etmeniz gereken IEnumerable<> arasında modelimizi yakalıyoruz. Bu olmaz ise aşağıda foreach ile döngüye sokamayız.
@model IEnumerable<WebApplication2.Models.Product>
<table>
@foreach (var urun in Model)
{
<tr>
<td>
@urun.ProductName
</td>
<td>
@urun.UnitPrice
</td>
</tr>
}
</table>
Update(Güncelleme) İşlemi
Güncelleme işlemi için bir kaydı seçmemiz lazım. Bunun için birçok metot var. Burada find() metodunu kullanabiliriz.
Bu metot parametre olarak ID değerini alır. Bu ID veritabanındaki birincil anahtara tekabül eder. Eğer bir kayıt bulursa ait olduğu sınıftan bir nesne döndür.
Bu nesneyi alıp ORM mantığı ile özelliklerini değiştirip savechanges() metodu ile işlemleri veritabanına yansıtırız.
Biz burada first() metodu ile kaydı bulacağız. Bu direkt veritabanındaki ilk kaydı bize döndürür.
public ActionResult urunguncelle() {
var urun = context.Products.First();
urun.ProductName = "Guncellenmis urun";
context.SaveChanges();
return View("urunler", context.Products.ToList());
}
Delete(Silme) İşlemi
Silme işlemi için de bir kaydı seçmemiz ve ardından remove() metodunu kullanmamız gerekir.
public ActionResult urunsil() {
//İlk kaydı seçtik
var urun = context.Products.First();
//Context üzerinden Products modeline erişip Remove() metotu ile ürünü sildik.
context.Products.Remove(urun);
//İşlemleri veritabanına yansıttık.
context.SaveChanges();
//Ürünlerimizi view'e yolladık.
return View("urunler", context.Products.ToList());
}
HTML HELPER (HTML elemanı oluşturma) İşlemleri.
Normal şartlarda form elemanları HTML Kodları yazarak oluştururuz.
Ancak Asp.net MVC ve benzeri frameworkler bizlere bir HTML veya FORM sınıfı sunar , bizler de bu sınıf üzerinden direkt olarak backend kodu yazarak form elemanlarını dinamik olarak oluşturabilriiz.
Burada C# kodu yazarak oluşturacağız.
Yukarıdaki görselde göründüğü gibi gayet kolay bir yapısı var. İlk olarak @Html ile HtmlHelper'ımızı çağırıyoruz. Ve ardından direkt olarak hangi HTML elemanını oluşturmak istiyorsak onu metot olarak çağırıyoruz.
Yukarıdaki kullanımda ActionLink oluşturulmuş bu direkt bize bir link elemanı yani <a> oluşturacaktır.
Altta yazan ise direkt html sayfamıza bir etiket kullanmadan aldığı stringi yazacaktır.
Burada önemli husus metot for ile bitiyorsa bir modelden veri alacağız anlamına geliyor. Bu nedenle yukarıdaki örnekte modelden veri alınmış.
//Html elemanları oluşturma
//Düz çıktı oluşturma
@Html.DisplayName("cafer");
//Modelden veri alarak kullanımı
@Html.DisplayNameFor(model => model.ProductName);
Oluşturacağımız Html elemanına bir attribute(Özellik) vermek istiyorsak aşağıdaki gibi bir kullanım yapmamız gerekecektir.
Örneğin aşağıda oluşan text tipinde bir inputa Bootstrap'a ait bir class olan form-control class'ını verdik.
@Html.TextBoxFor(model => model.ProductName, new { @class = "form-control" });
Diğer HtmlHelper metotları
Metot İsmi | Model ile veya başka bir değişken ile kullanılacaksa | Html karşılığı |
---|---|---|
Html.ActionLink() | NA | <a></a> |
Html.TextBox() | Html.TextBoxFor() | <input type="textbox"> |
Html.TextArea() | Html.TextAreaFor() | <input type="textarea"> |
Html.CheckBox() | Html.CheckBoxFor() | <input type="checkbox"> |
Html.RadioButton() | Html.RadioButtonFor() | <input type="radio"> |
Html.DropDownList() | Html.DropDownListFor() | <select> <option> </select> |
Html.ListBox() | Html.ListBoxFor() | multi-select list box: <select> |
Html.Hidden() | Html.HiddenFor() | <input type="hidden"> |
Html.Password() | Html.PasswordFor() | <input type="password"> |
Html.Display() | Html.DisplayFor() | HTML text: "" |
Html.Label() | Html.LabelFor() | <label> |
Html.Editor() | Html.EditorFor() |