Asp.Net MVC ve Bootstrap Template İle Hızlı Web Site Geliştirme
Merhaba,bu yazımda Asp.Net MVC ve Bootstrap Template İle Hızlı Web Site Geliştirme konusuna değineceğim. Umarım sizin içinde faydalı olur 😊.
MVC Nedir ?
MVC → Model-View-Controller
- Model → Uygulamada kullanılacak olan verilerin bulunduğu, veritabanı ile ilgili bağlantıların yapıldığı katmandır.
- View → Client’in gördüğü arayüzü içeren , genellikle Model katmanındaki verinin kullanılması ile oluşan katmandır.
- Controller → Client’den gelen istekleri işleyen ve View-Controller arasındaki bağlantıyı sağlayan katmandır.
MVC Razor Syntax Nedir?
MVC Projelerinde Html kodları içerisinde C# kodları çalıştırabiliriz, bu özel yazım kuralına Razor Syntax adı verilmektedir. Server kısmında çalışacak yada diğer bir deyişle derlenecek olan kodu, daha kolay ayrıştırmak için @ işareti kullanılmıştır.
Projemize Başlayalım
Projemizde Anasayfamıza bir tablo koyacağım, sol tarafımızda ki menüye tablomuzu filtrelemek için dinamik bir menü koyacağım; bu menü ile tabloda site Tipine göre veri getireceğim. Projemizde veri eklemek ve veri listelemek için Oracle Database kullanacağım. Siz istediğiniz Database’i kullanabilirsiniz.Hadi başlayalım 😊
1. Projemizi Oluşturalım
- Asp.Net Web Application (.Net Framework) Seçelim.
- Projemizi Empty Seçelim.
- Referans olarak MVC’i işaretleyelim ve MVC projemizi oluşturalım.
Oluşturmuş olduğumuz projemizin içerisinde Models-Views-Controllers klasörlerimiz geldi.
2. İhtiyaçlarımızı Karşılayacak Hazır Bir Bootsrap Template Bulalım
Ben bu şablon’u kullanacağım, sizde internet üzerinden “bootstrap free template” diye aratarak sizin için yeterli olan şablon’u bulabilirsiniz
3. Şablonumuzu Kullanacağımız Format’a Getirelim
- Şablonumuza ait dosyaları (css,js,scss,vendor vb.) projemizin içine atalım.
- View klasörümüzün içine “Shared” isimli klasör ekleyelim.
- Shared Klasörümüze “_Layout.cshtml” ekleyelim.
- View Klasörümüzün içerisine “_ViewStart.cshtml” ekleyelim ve içerisine aşağıda bulunan kodumuzu yazalım.
- “_Layout.cshtml” içerisine Şablonumuzu kopyalayalım.
- Bize gerekli olmayan componentleri kaldıralım.
- Not: _Layout içerisine Web Sitemiz içerisinde değişiklik olmayan, sürekli aynı kalan yapıları yerleştiriyoruz. Örn: Serch, Üst Menü, Sol Menü gibi.
- Projemize ait dosyalarımızın ( img, js, css ) , kodumuzun içerisinde ki Path’lerini güncelleyelim.
- Sayfa verisinin değiştiği bölümdeki kodu siliyoruz ve yerine “@RenderBody” ekliyoruz.
4. Gerekli Sınıflarımızı ve Database Bağlantımızı Oluşturalım
- Website bilgileri için gerekli class’ımız.
- SiteType bilgileri için gerekli class’ımız.
- Oracle Connection Class’ımız. Oracle için Oracle.ManangedDataAccess paketini kurmamız gerekiyor.
- Website bilgilerinin listesini aldığımız methodumuz.
- Site Type listesini aldığımız methodumuz.
5. Dinamik Menümüz’ü Oluşturalım
- “Shared” klasörümüzün içerisine PartialView ekleyelim, ismini “_menuPartial.cshtml” koyalım.
- _Layout.cshtml içerisine menümüzün kodunun bulunduğu kısmı silip yerine aşağıda bulunan kodu yazalım.
@Html.Partial("_menuPartial", ViewData["siteType"])6. Controller’larımızı Oluşturalım
- Home Controller içerisine ekliyoruz.
- Setting Controller içerisine ekliyoruz. Yeni Website kaydı eklemek için hazırlıyoruz.
7. View’larımızı Oluşturalım
Home Views
- Index.cshtml , anasayfamızda bir tablo olacak.
- SiteType.cshtml , sayfamızda bizim seçtiğimiz Site Type’a göre bir tablo olacak.
Setting Controller
- WebSiteCreate.cshtml , yeni kayıt ekleyeceğimiz form sayfamız.
Ve bittti… Sayfamızın nasıl göründüğüne bakalım;
8. Web Sitemiz Nasıl Görünüyor
Okuduğunuz için teşekkür ederim. İyi Çalışmalar 😊
