• Buradasın

    ASP.NET MVC ve Bootstrap ile Tedarikçi Listeleme ve Silme Eğitimi

    youtube.com/watch?v=CVlENOUNEzM

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan ASP.NET MVC ve Bootstrap teknolojilerini kullanarak tedarikçi listeleme ve silme işlemlerini adım adım gösteren bir yazılım eğitim içeriğidir.
    • Video, tedarikçi listeleme ve silme işlemlerinin nasıl yapılacağını kapsamlı şekilde ele almaktadır. İlk olarak tedarikçi menüsünün oluşturulması, controller'ın eklenmesi ve veritabanından verilerin çekilmesi gösterilmektedir. Ardından Bootstrap modal kullanımı, modal üzerinden silme işleminin JavaScript ve AJAX ile nasıl gerçekleştirileceği, hata yönetimi ve kullanıcı geri bildirimleri anlatılmaktadır.
    • Eğitimde ayrıca CSS overflow ve z-index özellikleri kullanılarak modal sorunlarının çözülmesi, modal içeriğinin dinamik olarak doldurulması ve veritabanında referans kısıtlaması nedeniyle oluşan hataların yakalanması gibi pratik konular da ele alınmaktadır.
    00:06Tedarikçiler Menüsü Oluşturma
    • Tedarikçiler menüsü ekleniyor ve tedarikçiler listeleniyor.
    • Tedarikçi silme işleminde farklı bir yöntem kullanılacak.
    • Layout sayfasında menüye yeni bir öğe ekleniyor ve tedarikçiler için yeni bir controller oluşturuluyor.
    01:15Tedarikçi Controller ve Veritabanı İşlemleri
    • Tedarikçi controller oluşturulup, index action içinde global düzeyde bir context instance üretiliyor.
    • Veritabanından tedarikçiler çekiliyor ve listeye dönüştürülerek model yöntemi ile gönderiliyor.
    • Index view ekleniyor ve model yöntemi için gerekli using bloğu ekleniyor.
    03:50Tedarikçi Listeleme Sayfası
    • Kategori listeleme sayfası kopyalanıp tedarikçi listeleme sayfası olarak düzenleniyor.
    • Tablo başlıklarında şirket adı, müşteri adı, müşteri ünvanı, adres, şehir, bölge, posta kodu, ülke, telefon, faks ve web sayfası kolonları ekleniyor.
    • Her tedarikçi için güncelle ve sil butonları ekleniyor.
    09:35Tablo Görünümü Sorunları
    • Tedarikçiler sayfası görüntülenince tablo uzunlukta taşmış durumda.
    • Web sayfası kolonu uzun içerik nedeniyle tabloyu taşmış duruma getirmiş.
    • Kolon sayısı fazla olduğu için tablo sığmıyor ve düzgün görüntülenmiyor.
    11:06Tablo Görünümünü Düzenleme
    • Tablo içerisindeki kolonlar sığmadığında scroll özelliği eklenmesi gerekiyor.
    • CSS kodu kullanılarak overflow-x özelliği scroll olarak ayarlanıyor.
    • Ekran çözünürlüğü küçük olduğu için güncelle ve sil butonları dışa taşmış durumda.
    15:10Silme İşlemi İçin Modal
    • Tedarikçi silme işlemi için modal kullanılacak.
    • Kullanıcıdan onay almak için "Evet" ve "Hayır" seçenekleri sunulacak.
    • Content klasöründe ui moda hdm sayfası bulunuyor.
    16:11Bootstrap Model Kullanımı
    • Default isimli bir model var ve view demode tıklanınca farklı modeller görüntülenebiliyor.
    • Kullanıcıya "Tedarikçi silme" başlığı altında "Bu tedarikçi silinsin mi?" sorusu sorulacak ve "Hayır" ve "Evet" seçenekleri sunulacak.
    • Model türleri arasında long mod, small with, full with, confirm to close ve ajax content bulunuyor.
    17:03Small Model Max Kullanımı
    • Small model max kullanmak için önce sayfada hangi butonun tıklandığında modelin açılacağını bulmak gerekiyor.
    • Small with butonu tıklandığında model açılıyor ve butonun data-toggle ve data-target özellikleri ile modelin açılması sağlanıyor.
    • Model kutucuğunun HTML kodları sayfada bulunuyor ve bu kodları kopyalayıp kullanmak gerekiyor.
    19:25Model Kutucuğunun Yapısı
    • Small model box, h4 class model olan bir div içerisinde bulunuyor.
    • Kutucukta header, body ve footer bölümleri bulunuyor ve hepsi class model content olan bir div'in içerisinde yer alıyor.
    • Kutucuğun tamamı class model fade small model olan bir div'in içerisinde yer alıyor.
    22:45Modeli Sayfaya Ekleme
    • Model kutucuğunun HTML kodları kopyalanıp tedarikçiler sayfasına yapıştırılıyor.
    • Small with butonu da kopyalanıp sayfaya ekleniyor ve butonun class'ı btn danger olarak değiştiriliyor.
    • Butona tıklandığında model kutucuğu görünüyor ancak sayfanın arkasında kalabiliyor.
    25:27CSS ile Modeli En Üste Getirme
    • Modelin en üstte görünmesi için CSS kodu yazmak gerekiyor.
    • Layout sayfasındaki head section'a style düğümü ekleniyor.
    • #small-model id'sine z-index özelliği verilerek modelin en üstte görünmesi sağlanmaya çalışılıyor.
    27:44Modal Tasarım Sorunu ve Çözümü
    • Sil butonu table class col-md-oniki div'in içerisinde bulunuyor ve write colt content'in içerisinde yer alıyor.
    • View sayfalarda hiçbir seçim belirtmeden orta alana yazılan kodlar render kısmına gidiyor, bu da modalın arka planda kalmasına neden oluyor.
    • Modal HTML kodlarının body'in altına yazılması gerekiyor, bu yüzden render section açılıp body isimli delik açılarak modal kodları buraya yerleştiriliyor.
    32:17Modal İçeriği Düzenleme
    • Sil butonuna tıklandığında hangi satırdaki sil butona basılmışsa o satırdaki şirket adını alıp modal içerisinde göstermek gerekiyor.
    • Modal başlığı "Tedarikçi Sil" olarak değiştiriliyor, "Close" butonu "İptal" olarak, "Save Change" butonu "Evet" olarak Türkçe çeviriliyor.
    • Evet butonuna basıldığında AJAX yöntemiyle silme işlemi yapılacak.
    35:20JavaScript ile Modal İçeriği Doldurma
    • Script section açılarak jQuery kodları ekleniyor ve modal açan butona click olayı ekleniyor.
    • Tıklanan sil butonunun bulunduğu satırdaki şirket adını almak için butona data-şirket-adi özelliği ekleniyor.
    • Modal body içerisindeki p etiketine şirket adı ve "Tedarikçisi silinsin mi?" metni eklenecek.
    41:19Tedarikçi Silme İşlemi İçin Modal Kullanımı
    • Tedarikçi silme işlemi için modal pencere kullanılıyor ve "Tedavisi silinsin mi?" sorusu soruluyor.
    • Silme işlemi için AJAX ile veritabanından silme yapılacak ve bu işlemde silinecek tedarikçinin ID'si gerekiyor.
    • Modalaşma butonuna "data-id" özelliği eklenerek tedarikçi ID'si atanıyor.
    43:01JavaScript ile ID Değerinin Taşınması
    • Modal açılırken butona tıklanıldığında "data-id" değerini alıp modal içerisinde saklıyoruz.
    • Evet butonuna tıklanıldığında bu ID değeri tekrar çekiliyor ve AJAX ile gönderiliyor.
    • JavaScript'te "data()" fonksiyonu kullanılarak butonların data özelliklerinden ID değeri alınıyor.
    45:35AJAX ile Silme İşlemi
    • AJAX ile POST isteği gönderiliyor ve tedarikçi kontrolündeki "sil" action'a yönlendiriliyor.
    • Başarılı durumda sayfa yenileniyor, hata durumunda modal içerisinde hata mesajı gösteriliyor.
    • Silme işlemi için modal penceresinde "Evet" butonuna tıklandığında ID değeri AJAX ile gönderiliyor.
    47:07Controller'da Silme İşlemi
    • Tedarikçi kontrolünde HTTP POST tipinde "sil" adında bir action oluşturuluyor.
    • Gelen ID'ye göre tedarikçi seçiliyor ve "remove" metodu ile veritabanından siliniyor.
    • SaveChanges metodu ile değişiklikler kaydediliyor ve action void olarak tanımlanıyor.
    48:34Silme İşlemi Test Ediliyor
    • Silme işlemi test edildiğinde, ilişkili kayıtları olmayan tedarikçiler başarıyla siliniyor.
    • İlişkili kayıtları olan tedarikçiler silinmeye çalışıldığında veritabanı hata veriyor.
    • Hata durumunda modal penceresinde hata mesajı göstermek için ek bir <p> etiketi eklendi.
    51:31Modal İçeriği Düzenleme
    • Kırmızı yazı yazmak için CSS'de "hata" sınıfı oluşturulup, bu sınıfın rengi kırmızı olarak ayarlanıyor.
    • Modal body içerisinde iki p etiketi olduğundan, her iki p etiketine de aynı içerik yazıyor.
    • Bu sorunu çözmek için birinci p etiketine "mesaj" sınıfı verilip, JavaScript'te sadece bu sınıfı olan p etiketine içerik yazdırılıyor.
    53:17Hata Mesajı Gösterme
    • Hata durumunda, class'ı "hata" olan p etiketine "tedarikçi silme anında bir hata oluştu, lütfen tekrar deneyiniz" mesajı yazdırılıyor.
    • Ajax sorgusu kontrol tarafına ulaşıyor ancak veritabanındaki ilişkiler nedeniyle kayıt silinmiyorsa bile Ajax başarı durumunda kabul ediyor.
    • Ajax tarafına başarılı veya başarısız mesajı göndermek için sil metodunun geriye string döndürmesi gerekiyor.
    55:31Ajax İle Durum Kontrolü
    • Sil metodunun geri gönderdiği değer Ajax tarafında "durum" değişkenine atanıyor.
    • Ajax tarafında durum "başarılı" ise sayfa yenileniyor, değilse hata mesajı gösteriliyor.
    • Veritabanında ilişki nedeniyle hata oluşursa, Ajax bunu yakalayamadığı için geriye "hata" değeri gönderilmeli.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor