Çarşamba , 20 Eylül 2017
Anasayfa » C# » Asp.Net » ASP.NET Responsive Site Tasarımı – Bölüm 1 (Bootstrap, MasterPage)

ASP.NET Responsive Site Tasarımı – Bölüm 1 (Bootstrap, MasterPage)

10 yılı aşkın süredir PHP ile site yapıp geliştiriyorum.   İki hafta önce bir arkadaşım öğrencileri için asp.net ile veritabanı işlemleri yapan bir uygulama geliştirdiğini gördüm. İlgimi çeken bu uygulamayı yazılım bilişimde paylaşmak istedim. Bu yazı dizisinde de master page kavramından başlayıp veritabanınada SQL işlemlerini yapan bu uygulamayı geliştireceğiz.  Aynı zamanda asp.net ile yapılan bu sitenin mobil uyumlu olması için de bootstrap kütüphanesini kullanacağız.ASP.NET Nedir?

ASP.NET Microsoft tarafından etkileşimli  web uygulamaları ve Web servisleri geliştirmek için oluşturulan bir frameworktür.

.Net mimarisinin bir parçası olarak uygulama geliştirme imkanı verir.  Kodlarının bir kısmı klasik asp kodlarını andırmaktadır.

Yazıyı fazla uzatmadan uygulama geliştirmenin ilk aşamasına başlayalım.Projenin Açılması

Projenin Açılması

  1. File / New / Web Site
  2. Geliştireceğiniz dili ve ASP.NET empty web site seçip aşağıda kaydedeceğiniz isim ve yeri belirledikten sonra OK butonuna basıyoruz.

 

ASP.NET Master Page Oluşturma

  1. Solition Explorer panelinde Web sitesi üzerinde sağ tıklayıp / Add / Add New Item seçimini yapıyoruz.
  2. Item olarak Mater Page seçtikten sonra isimlendirmesini yaptıktan sonra OK butonuna basıyoruz.

 

Master Page Nedir

Master Page tüm sayfalarda tutarlılığı sağlamak için kullanılan bir şablondur. En basit şekilde açıklamak gerekirse bütün sayfalarda aynı olan kısımlar master page içinde yazılır. Değişken olacak yerler(bizim örneğimizde içerik kısmı değişken olacak) alt sayfalara aktırılır. Ürünler sayfasındaki ürün listesi, iletişim sayfasında adres ve harita bilgileri gibi.

ContentPlaceHolder Kullanımı

Master page içinde oluşturulur. Oluşturacağımız sayfalarda (web form) değişken kısımlar için yer tutucu görevi görmektedir. Değişkenlik gösteren bütün kısımlar için ContentPlaceHolder nesnesi eklenebilir.

ContentPlaceHolder nesnesnin iki önemli niteliğini vardır.

id: alt sayfalarda hangi yer tutucuyu seçeceğimizi belirtmek için anlaşılır bir kimlik vermek gerekir.(örn: ortabolum, sagpanel)

runat: ASP.NET nesnesi olduğu için sunucuda çalışacağını runat=server yazarak belirtiyoruz.

 

 

ASP.NET Responsive Site Tasarımı İçin Bootstrap Kütüphanesini Dahil Etme

Daha az CSS kodu yazmak için bootstrap kütüphanesini projeye dahil ediyorum. Bootstrap kütüphanesini indirmek için buraya tıklayınız.

Kendi Sitil kodlarımızı yazmak için site ismi üzerinde sağ tıklayıp  Add / Style Sheet seçip kendi sitil dosyamızı oluşturuyoruz. (tasarim.css olarak oluşturdum)

 

Kütüphanelerin Master Page sayfasına dahil edilmesi

Bootstrap ve stil dosyasını oluşturduktan sonra aşağıdaki gibi head etiketleri arasında dosyalarımızı sırasıyla ekliyoruz. Mobil cihazlarda uygun şekilde görümesi için de viewport meta tanımlamasını da yazıyoruz.

 

Tasarımın oluşturulması

Yukarıdaki gibi sade bir sayfa tasarımı oluşturmak için birkaç tane ufak div ve css kodu kullanmak gerekecek.

Sayfanın üst ve alt kısmı her sayfada aynı olacağı için master page içinde oluşturuyoruz. Orta bölümdeki haberleri ise bu master sayfasını kullanan alt sayfalarda oluşturacağız.

Sayfanın üstü ve altı için header ve footer adındaki class isimlerine sahip div etiketlerini oluşturduk.

Yukarıdaki görsel uygun olarak header ve footer divlerini bootstrap nesnelerini kullanarak aşağıdaki gibi şekillendirdik. Container classı nesnelerin sayfanın ortasında gelmesini ve her cihaza uygun şekilde sayfanın genişleyip daralmasını sağlıyor.

Body etiketi aşağıdaki gibi şekillenmiş oldu.

 

Ana Sayfanın Oluşturulması

ASP.NET sayfalarda giriş sayfası ismi Default.aspx olarak belirtilir.

Site ismi üzerinde sağ tıklayıp Add/ New Item  seçeneklerini seçip bir tane web form ekliyoruz.

Web formu seçerken masterpage sayfasını kullanacağını belirtmek için sağ altta select master page seçeneğini işaretliyoruz.

Gelen seçenekte oluşturduğumuz master page sayfasını seçip OK butona tıklıyoruz.

 

Content Kullanımı

Masterpage sayfasında oluşturduğumuz iki contentPlaceHolder nesnesi için bize iki tane content nesnesi oluşturdu. Content nesnelerinin içine yazdığımız her kod derleme aşamasında master page ile birleştirilip bize bütün bir sayfa olarak gösterilmektedir.

ID: Her content nesnesine bir kimlik veriyoruz.

ContentPlaceHolderID: Master sayfasındaki hangi ContentPlaceHolder içini dolduracağımız belirtiyoruz.

Runat: ASP.NET nesnesi oluduğu için runat=server yazarak sunucuda çalışmasını sağlıyoruz.

Bootstrap Kullanımı

Bootstrap ile sayfalar 12 birim ve 4 farklı cihaz olarak kabul edilir. Her cihazda kaç ürün gösterilecekse(bir satırda) ürün sayısı bu birimlere eşit olarak dağıtılır.

Geniş cihazlar için yazılacak class kodu col-lg-xx

Diziüstü bilgisayarlar için yazılacak class kodu col-md-xx

Tabletler için yazılacak class kodu col-sm-xx

Cep telefonları için yazılacak class kodu col-xs-xx

* xx değeri 1-12 arasında birimi belirtmek için kullanılır.

Uygulamamızda her satır için geniş cihazlarda 3 ürün, diziüstü cihazlarında 3 ürün, tabletlerde 2 ürün ve cep telefonlarında 1 ürün göstermek istiyoruz.

Yazmamız gereken kod  class=”col-lg-4 col-md-4 col-sm-6 col-xs-12″ şeklinde olacaktır.

 

Haber Listesi için Tasarımın Oluşturulması

Bu bölümde genel statik olarak haber listesini oluşturacağız. Yazının devamında bu haberleri veritabanından getirmek için App_Data ve gerekli SQL işlemlerini yapılacaktır.

Görsel eklemek için site ismi üzerinde sağ tıklayıp add/ new folder ile gorseller adı bir klasör oluşturup resimlerimiz içine atıyoruz. Projede kullanılan resimleri indirmek  için buraya tıklayabilirsiniz.

Bootstrap kodlarını kullanarak her cihaz uygun şekilde görünmesi için gerekli kodları yazıyoruz.  Bir de özel stil düzenlemesi için her bir haber için kutu adında bir tane class kodu ekliyoruz.

Master sayfası ile oluşturduğumuz sayfada orta bölümdeki ContentPlaceHolder nesnesinin id adı ContentPlaceHolder1 bu nesneyi kullanan Content nesnesinin için kodlarımızı yazıyoruz.

 

Tasarim.css dosyasını düzenlenmesi

Bootstrap tek başına bir tasarım için yeterli değil. Kendi stil tanımamız için tasarim.css dosyasını açıp aşağıdaki gibi stil kodlarımı yazıyorum.

 

Uygulamayı indirin

 

 

 

 

Hakkında Hayri

İlginizi Çekebilir

ASP.NET Validation Kontroller

Doğrulama Kontrolleri kullanıcının girdiği bilgilerin doğruluğunun denetlenmesinde kullanılır. Bir siteye kayıt olma, şifre girme gibi …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir