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ı
- File / New / Web Site
- 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
- Solition Explorer panelinde Web sitesi üzerinde sağ tıklayıp / Add / Add New Item seçimini yapıyoruz.
- 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.
|
1 2 3 4 5 |
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<head runat="server"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="tasarim.css" rel="stylesheet" /> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body> <div class="header"> <div class="container"> <h1>Bilişim Haber</h1> </div> </div> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> <div class="footer"> <div class="container"> <h3>Her hakkı saklıdır.2017</h3> </div> </div> </body> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <div class="container"> <div class="row"> <div class="kutu col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img class="img-responsive" src="gorseller/resim1.png"> <h2 class="text-center">AngularJS Dosya Yükleme</h2> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. </p> <button class="btn btn-default center-block">Göster</button> </div> <div class="kutu col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img class="img-responsive" src="gorseller/resim3.png"> <h2 class="text-center">İl İlçe Veritabanı SQL</h2> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p> <button class="btn btn-default center-block">Göster</button> </div> <div class="kutu col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img class="img-responsive" src="gorseller/resim4.png"> <h2 class="text-center">Hangi Web Tasarım Programı</h2> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p> <button class="btn btn-default center-block">Göster</button> </div> </div> </div> </asp:Content> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
body { background-color:#D2D7D3; } .header, .footer{ background:#2a2a3c; color:#ffffff; } h1{ margin:0; padding:10px; } .resim{ margin:10px; float:left; } .kutu{ margin-bottom:30px; } .row{ margin-top:10px; } /* ürün yüksekliklerini media cihazlarına uygun olarak düzenleme*/ @media (min-width: 768px) { .kutu { height:370px; } } |
[…] […]