9/5/2007
Merhaba bu makalemde, ilk makalede tasarımını oturttuğumuz Frp Kitap Merkezi sitesini dinamik hale getirmek için ilk adımlarımızı atacağız. Bu aşamada database olarak Microsoft SQL Server 2005 Express Edition’u kullanacağız. SQL Server ile ilgili yardımları için ekip arkadaşım Behlül Behram’a çok teşekkürler. Eğer yıllardır yaptığınız tasarımları statik olarak hazırlamaktan sıkılıp sıkılıp sürekli bir o dile bir bu dile bulaşıp, hiç birinden istediğiniz sonucu tam olarak alamadıysanız, bir türlü dinamik web sitesine nereden başlayacağınızı bilemediyseniz, internette bulduğunuz dokümanlar tasarımcı olarak sizin bilginizin üstünde idiyse; bu makale dinamik web sitesi yaratmaya başlamak için iyi bir nokta olacaktır. Bu makalede SQL Server Express Edition kurulumunu, SQL Express’de database oluşturmayı ve SQL database’den veri çekmeyi anlatacağım.
Başlayalım. İlk önce database için Microsoft SQL Server Express ve Microsoft SQL Server Management Studio Express’i indireceğiz. Neden MS SQL Express diyecek olursanız. Her şeyden önce bedava oldukları için diyebilirim. Bunun dışında ASP.NET ile dinamik bir site oluşturacaksak, yine Microsoft’un ürünlerini kullanmak bizi bir sürü dertten kurtaracaktır.
Microsoft SQL Server Express’i indirmek için;
http://msdn.microsoft.com/vstudio/express/sql/download/
Microsoft SQL Server Management Studio Express’i indirmek için;
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=C243A5AE-4BD1-4E3D-94B8-5A0F62BF7796
adreslerini kullanabilirsiniz.
Şimdi kurulumlara başlayabiliriz. İlk önce SQL Server. SQLEXPR32.EXE’ye çift tıklayıp, gelen lisans anlaşmasını kabul edip Next’e basıyoruz. Gelen ekranda “Install”‘a basarak devam ediyoruz. Bu kurulumu başarıyla tamamlayınca Next ile devam ediyoruz.
Tekrar Next.
Sisteminiz kontrolden başarıyla çıkarsa yine Next.
Gelen ekranda isim ve şirket alanlarını doldurup tekrar Next.
Bir şey değiştirmeden tekrar Next.
SQL’e bağlanırken nasıl onaylanacağınızı soran ekranda ben “Windows Authentication Mode” ile devam ediyorum.
Bilgisayar sadece bana ait bir güvenil sorunum yok bu sebeple “Enable User Instance” ile devam ediyorum.
Microsoft’un raporlamalar hakkında bilgi istediği ekranda karar sizin. Next ile devam.
Bütün bunların sonucunda SQL yüklenmeye hazır. “Install”‘a basıp devam ediyoruz.
Bir süre yükleme ekranını bekledikten sonra her şey yolundaysa Next ile devam ediyoruz.
Finish ile bitiriyoruz.
Bu işlemler sonucunda bilgisayarımıza SQL server’ı kurmuş olduk. Ama database oluşturabilmemiz için Microsoft SQL Server Management Studio Express’ide kurmamız gerekiyor. Başlıyalım.
SQLServer2005_SSMSEE.msi’a çift tıklıyoruz. İlk gelen ekrandan Next ile devam ediyoruz. Sözleşme ekranını da kabul edip Next ile devam ediyoruz. Tekrar isim ve şirket soran ekran geliyor. Bunlarıda doldurup Next. Nereye ne yükleyeceğini soran ekranda da bir değişiklik yapmadan Next.
Gelen ekranda Install ile devam ediyoruz.
Finish ile kurulumu tamamlıyoruz. Böylece SQL Express Edition kullanıma hazır. Alttaki gibi programı açıyoruz.
Program açıldığında Server’a bağlantıyı soran ekran gelecek. Connect ile devam ediyoruz.
Evet artık dabase’imizi oluşturmaya başlayabiliriz. Bunları yaparken elbette SQL’in derinliklerine dalmayacağız. Sadece işimizi görecek kadar kısmını kullanacağız.
Başlayalım. Object Explorer’daki Databases klasörüne sağ klik yaparak açılan menuden New Database’e tıklıyoruz.
Gelen New Database ekranında sadece Database ismini verip OK ile çıkıyoruz. Elbette daha bir çok ayar var ama default olarak gelen ayarlar bizim işimizi görmeye yetecek. Database’i isimlendirirken karakterler arasında boşluk bırakmamaya dikkat edin.
Object Explorer’daki Databases altında yeni database’imiz hazır.
Database’imizin altında onunla ilgili özelliklerde hazır. Biz bunlardan sadece Database Diagrams ve Tables’ı kullanacağız.
Tablolarımız neler olacak ve bu tablolar neler içerecek? Bunu çözümleyelim.
1- Kitap Listesi
a- Kitabın ID
b- Kitabın ismi
c- Kitabın resmi
d- Kitabın yazarı
2- Kitap Detay
a- Kitap ID
b- Kitap detay ID
c- Kitap Baskı Yılı
d- Yayın evi
e- Sayfa sayısı
f- Açıklama
3- Yazar
a- Yazar ID
b- Yazar ismi
c- Yazarın resmi
d- Yazarın Açıklaması
4-Mesajlar
a- Mesaj ID
b- Mesaj Başlığı
c- Mesajın girildiği tarih
d- Mesaj alanı
Tablolarımızı belirlediğimize göre şimdi bunları database’mizde oluşturabiliriz. Database’in altındaki Tables’a sağ klik yapıp gelen menüden “New Table”a basıyoruz.
İlk tablomuzu aşağıdaki gibi oluşturuyoruz. Bu kitapların ismini tutacak tablo. Column Name’leri elle yazarken Data Type’ları gelen menüden seçiyoruz. Sırasıyla olanları açıklayayım. “kitapID” ile her kitaba sadece ona ait olan bir numara vereceğiz. Bu sebeple data tipini (Data Type) int (tam sayı) olarak belirledik. Allow Nulls işaretli değil çünkü bu alan boş kalmasın istiyoruz. “kitapIsmi” için maksimum sınırsız karakterlik bir alan ayırdık. nvarchar kullanmamızın sebebi ise SQL o alana girilen kadar yer ayırsın istememizden kaynaklanıyor. “kitapYazar” için nvarchar(50) kullandık. Böylece bu alanın maksimum 50 karakterlik bir alan olduğunu belirttik. “kitapImage” de ise Allow Nulls’u işaretledik çünkü kitap için resim olmayabilir.
kitapID hücresi seçili iken açılan column properties’de Identity Specification’u “Yes”e çevirip Increment ve Seed’i “1” yapıyoruz. Bu SQL’e ID numaralarını sen ver ve birer birer artsın demek.
kitapID’nin solundaki kutucuğa sağ klik yapıp gelen menüden Set Primary Key’e basıyoruz.
Böylece kitapID’ye atanan her numaranın bir kez kullanılabilir olmasını sağladık.
Tabloyu kaydetmek istediğimizde program bir isim belirlememizi istiyor. İsmimizi verip OK ile ilk tablomuzu tamamlıyoruz.
Böylece ilk Table’ımızı hazırlamış olduk.
Şimdi sırada kitap detay tablosu var. Biraz önce hazırladığımız şekilde yeni tablomuzu hazırlıyoruz. Bu tabloda “kitapDetayID” primary key.
Şimdi sırada yazarlar tablosu var. Yazar tablosunu da hızlıca oluşturuyoruz.
Sırada mesaj tablosu var. Mesaj tablosunu da oluşturduk. Bu tabloda da ID’yi otomatik verdirtmeyi unutmayın.
Böylece tablolarımızı tamamlamış olduk.
Şimdi tablolar arasındaki ilişkileri (relationship) düzenleyeceğiz. Burada birbiriyle ilişkisi olan iki tablomuz dbo.kitap ve dbo.kitapDetay. kitapDetay, kitap tablosuna bağlı olarak çalışacak. Şimdi bu ilişkiyi kuralım. Database Diagrams’a sağ tıklayıp açılan menüde New Database Diagram’a bazıyoruz.
Açılan yeni sayfa ile birlikte Add Table ekranı geliyor. Buradan kitap ve kitapDetay’ı seçip Add’e basıyoruz ve Close ile ekranı kapıyoruz.
Ekranın ortasında iki table kutu şeklinde görünür olmuş olmalılar. Bu kutuları istediğiniz yere sürükleyebilirsiniz.
Mouse imlecini kitap kutusundaki kitapID’nin solundaki kutucuğa tıklayıp sürükleyerek, kitapDetay kutucuğunun, kitapID’sine götürüyoruz.
Nerden nereye ve neyle neyi ilişiklendirdiğimizi gösteren bir ekran açıyor. Relationship doğru ise OK ile kapıyoruz.
Arkadan gelen ekranı da bir değişiklik yapmadan OK ile kapıyoruz.
Diyagramı kaydediyoruz.
Databese Diagramımız hazır.
Evet tablolarımızı oluşturup ilişkilerini de kurduğumuza göre şimdi içlerini doldurabiliriz. İlk etapta tüm tabloları SQL’e manüel yazacağız. Dinamik olarak ekleme ve düzenleme işlerini daha sonra göreceğiz. Tablomuzun içini doldurabilmek için ilk önce açmamız gerekiyor. Dolduracağımız tabloya sağ klik yapıp gelen menüden Open Table’a basıyoruz.
Kitap tablosunu boş olarak açılıyor. Şimdi sırasıyla bilgilerimizi dolduracağız. ID kısmını biz değil SQL dolduracak.
Kitap tablomuzu doldurduk şimdi sırada kitap detay var.
Aynı şekilde kitap detay tablomuzu da dolduruyoruz.
Aynı şekilde yazar tablomuzu da dolduruyoruz.
Mesaj tablomuzu da dolduruyoruz.
Database ile ilgili işlerimizi tamamladığımıza göre SQL Management’i kapayıp Expression Web’e dönebiliriz. Sitemize devam edelim. Expression Web’de sitemizi açıp hızlıca master page’den bir sayfa oluşturuyoruz. Bu sayfayı bookLists.aspx olarak kaydediyoruz.
Bu sayfada kitapların tam listesini göstereceğiz. Toolbox>ASP.NET Controls>Data altında DataList’i sayfamızdaki main content alanına sürükleyip bırakıyoruz.
DataList objesinin yanındaki oka tıklayarak Common DataList Tasks kutusunu açıyoruz. İlk önce database’imize bağlanmamız gerekiyor. Bunun için Choose Data Source’dan “New data source”u tıklıyoruz.
Gelen ekranda Database’i seçip OK’e basıyoruz. “Specify an ID for the data source” alanına otomatik belirlenen ismi değiştirmeyi gerekli görmüyoruz.
Gelen ekranda New Connection’a basıyoruz. Böylece Choose Data Source kutusu açılacak.
Choose Data Source’da “Microsoft SQL Server”ı seçip OK’e basıyoruz.
Sıradaki ekran Connection Properties. Burada Server Name’i yazıyoruz. 
Eğer server name’niz SQL Server Management Studio Express’deki Object Explorer’daki isme bakabilirsiniz. “Use Windows Authentication” seçili kalıyor. “Select or enter a database name” den database’imizi bulup seçiyoruz. Bu ekranda Test Connection’a basarak bağlantınızı kontrol edebilirsiniz. Sorun yoksa OK ile devam ediyoruz.
Next ile devam ediyoruz.
Next ile devam ediyoruz.
Gelen ekranda “kitap” tablosunu seçiyoruz. Tablonun tüm elemanlarını seçmek için “*” ı seçiyoruz. Aslında “kitapID”ye ihtiyacımız olmayacak ama önemli değil düzenlemeleri daha sonrada yapabiliriz. Her şey yolunda ise Nexyt ile devam ediyoruz.
Buraya kadar yaptıklarımızı kontrol etmek için gelen ekranda “Test Query”ye basıyoruz. Her şey yolunda ise Finish ile bitiriyoruz.
Tüm bu işlemlerle database bağlantımızı kurup, bilgileri çekmiş olduk. Bunun sonucunda EW alttaki gibi kod üretti.
<ItemTemplate>
kitapID:
<asp:Label Text='<%# Eval(“kitapID”) %>’ runat=”server” id=”kitapIDLabel” />
<br />
kitapIsmi:
<asp:Label Text='<%# Eval(“kitapIsmi”) %>’ runat=”server” id=”kitapIsmiLabel” />
<br />
kitapYazar:
<asp:Label Text='<%# Eval(“kitapYazar”) %>’ runat=”server” id=”kitapYazarLabel” />
<br />
kitapImage:
<asp:Label Text='<%# Eval(“kitapImage”) %>’ runat=”server” id=”kitapImageLabel” />
<br />
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource runat=”server” ID=”SqlDataSource1″ ConnectionString=”<%$ ConnectionStrings:FrpKitapSitesiConnectionString %>” SelectCommand=”SELECT * FROM [kitap]”>
</asp:SqlDataSource>
Şu andaki görünüm ise şöyle;
Sırada database’den gelen bu bilgileri düzenleme işleri var. DataList’i seçip yanındaki oka tıklayarak Common DataList Tasks kutusunu açıyoruz ve Edit Templates’e tıklıyoruz.
Display’de ItemTemplate seçili olacak. Bu ekranda oldukça rahatız. ItemTemplate kutucuğunun içine tıklayarak istediğimiz Item’i silebilir, ekleme yapabiliriz.
kitapID’yi ve kitapImage’i olduğu gibi siliyoruz. İmaj biraz sonra çözeceğiz. kitapIsmi’ni siliyoruz. kitapYazar’ı Yazar olarak değiştiriyoruz.
İmaj konusunu halledelim [kitapIsmiLabel]’in üstündeki boş alana Toolbox>ASP.NET Controls>Standard altındaki Image’i sürükleyip bırakıyoruz.
Image ikonunun yanındaki oka tıklayarak açılan menüden Edit DataBindings’e tıklıyoruz. Blindable Properties’de ImageUrl’i seçiyoruz. Burada Field bindingi işaretli olacak şekilde bırakıyoruz. Bound to’da database’deki imaj kolonumuzu seçiyoruz. Format’a imajlarımızın durduğu yolu yazıyoruz. Örnek: images/books/thumb sonuna {0} ekliyoruz. (images/books/thumb/{0}). OK’e basıyoruz.
Sonuç. İmajlarımızı da başarıyla database’den aldık.
Elbette bir format sorunu var yazıların imajların altında değil yanında olmasını istiyoruz. Bunu da yapmak çok kolay. DataList’in yanında ki oka tıklayarak Edit Templates’i tekrar açıyoruz ve imaj ikonu seçiliyken Apply Styles’dan .imageLeft kuralını uyguluyoruz.
Evet istediğimiz formata geldiler ama hala sorunlar var. Itemların arasının daha açık olmasını ve kitap ile ilgili yazıların kitapla aynı üst hizada olmasını istiyoruz. Split görünümde iken kodlara bakıyoruz ve imaj tagının sonuna eklenmiş <br/> yi siliyoruz. (Kırmızı satır.) Bu yazıların kitapla aynı üst hizadan başlamasını sağlıyor.
<ItemTemplate>
<asp:Image runat=”server” id=”Image1″ ImageUrl='<%# Eval(“kitapImage”, “images/books/thumb/{0}”) %>’ CssClass=”imageLeft” />
<br />
<asp:Label Text='<%# Eval(“kitapIsmi”) %>’ runat=”server” id=”kitapIsmiLabel” />
<br />
Yazar :
<asp:Label Text='<%# Eval(“kitapYazar”) %>’ runat=”server” id=”kitapYazarLabel” />
<br />
<br />
</ItemTemplate></asp:DataList>
DataList seçiliyken Tag Properties’de CellPadding’i 10 yapıyoruz. Bu itemların arasının açılmasını sağlayacak.
Hala bir sorunumuz var. Sayfayı tarayıcılarda kontrol ettiğimizde FireFox’da her şey düzgün çalışırken, Internet Explorer’da listenin ilk itemında kitap ismi ile yazar arasında boşluk oluşuyor.
Split görünümüne geçiyoruz ve ItemTemplate içindeki tagları DIV içine alıyoruz. Böylece her iki tarayıcıda da sayfamız sorunsuz çalışıyor.
<ItemTemplate>
<div><asp:Image runat=”server” id=”Image1″ ImageUrl='<%# Eval(“kitapImage”, “images/books/thumb/{0}”) %>’ CssClass=”imageLeft” /></div>
<div><asp:Label Text='<%# Eval(“kitapIsmi”) %>’ runat=”server” id=”kitapIsmiLabel”/></div>
<div>Yazar : <asp:Label Text='<%# Eval(“kitapYazar”) %>’ runat=”server” id=”kitapYazarLabel” /></div>
<br />
<br />
</ItemTemplate>
Şimdilik bu sayfayla işimiz bitti daha sonra buraya dönecek ve kitapların detaylarına için link vereceğiz. Şimdi mesaj sayfasını oluşturalım. Master page’den yeni bir sayfa oluşturuyoruz.Bu sayfayı da messages.aspx olarak kaydediyoruz. Main contentin içine tekrar DataList yerleştiriyoruz ve kitap listesi sayfasında olduğu gibi database bağlantısını ayarlıyoruz. Tek farkla o da bu bağlantıda kitap tablosunu değil mesaj tablosunu çekiyoruz.
Edit Templates’de mesajID’yi tamamen kaldırıyoruz. mesajBasligini siliyoruz, label’ı kalıyor. mesajTarih’i Mesaj Tarihi olarak değiştiriyoruz. mesajAlani yazısını siliyoruz label’i kalıyor.
Kontrol ettiğimizde bilgileri başarıyla çektiğimizi görüyoruz ama her şey iç içe geçmiş durumda biraz düzenleme yapmamız gerekecek.
Edit template’de mesajAlaniLabel’in altına HTML>Tags altından Horizontal Line’ı sürükleyip bırakıyoruz. Line’ın altına da Enter’a basarak iki boşluk (<br/>) ekliyoruz.
Böylece mesajları birbirinden ayırmış olduk. Şimdi mesaj başlıklarını biraz farklılaştıralım.
Bunun için Manage Style kutusunda New Style’a tıklıyoruz ve “.boldText” ismindeki kuralımızı oluşturuyoruz..
.boldText Current Page’in içinde oluşuyor. Bunun format.css’in içine sürükleyip bırakıyoruz.
DataList’in Edit Template’inde mesajBasligiLabel’ina .boldText’i Apply Style ile uyguluyoruz. Bunu da düzelttiğimize göre, tarih satırıyla mesaj satırını birbirinden ayırmalıyız. Bu da sadece Edit Template’de mesajTarihLabel in sağına imlecinizi getirip iki kere Enter’a basmaktan ibaret.
Sonuç.
Bu makalede SQL Server Express Edition kurulumunu, SQL Express’de database oluşturmayı ve SQL database’den veri çekmeyi anlattım. Serinin devamı niteliğindeki makalemizde listelenmiş kitapların detaylarına dinamik olarak link vermeyi inceleyeceğiz.
İyi çalışmalar
Teşekkürler
