Merhaba arkadaşlar bu dersimizle birlikte Asp.Net Mvc 4 ile Kişisel Web Sitesi başlıklı eğitim serimize başlıyoruz. Bu dersimizde projemizin veri tabanı yapısını oluşturacağız.
Veri Tabanı Oluşturma
İlk olarak Micorosft SQL Server Management Studio yazılımını çalıştıralım. Yazılımı çalıştırdıktan sonra Databases klasörünün üstüne sağ tıklıyoruz ve New Database seçeneğini seçiyoruz.Yeni açılan pencereden Database Name alanına veri tabanımızın adını girip OK düğmesiyle onaylıyoruz.
Tabloları Oluşturma
Web sitemizde, yazılarımızın saklanacağı Yazilar, Yazılarımızın arşivleneceği Kategoriler, ziyaretçilerimizin görüşlerinin saklanacağı Yorumlar ve sitemizin yöneticilerinin tutulacağı Yoneticiler tablosu bulunacak.
Kategoriler Tablosu

Yazilar Tablosu

Yorumlar Tablosu

Yoneticiler Tablosu

Alanlar Arasında İlişki Kurma
Dikkat ettiyseniz arkadaşlar Yazilar tablosu altında yazının Kategorisine ait ID değerinin tutulduğu YaziKategoriId başlıklı alan var.Bu iki alan arasında ilişki kurarak yazının kategorisine ait bilgilere ekstra hiçbir kod yazmadan rahatlıkla ulaşabiliriz.
Yazilar tablosu altındaki Keys klasörü üzerinde sağ tıklayıp New Foreign Key bağlantısını seçiyoruz.Yeni açılan pencereden Tables and Columns Specification yanındaki düğmeye tıklıyoruz.
Primary key table ilişki kuracağımız tabloyu ve alanı, Foreign key table altından ise Yazilar tablosu altındaki YaziKategoriId alanını seçip OK düğmesine tıklıyoruz.

Alanlar Arası İlişki Kurma (Foreign Key Kullanımı)

Veri Tabanı Tasarımımız
Veri tabanımızın tasarımını tamamladık arkadaşlar, bir sonraki dersimizde Visual Studio üzerinde Asp.Net MVC 4 projesi oluşturup veri tabanımıza gerekli bağlantılarımızı sağlayıp, model oluşturmayı göreceğiz.
Görüşmek üzere.
YORUM GÖNDER
Merhaba arkadaşlar geçen dersimizde uygulamamızın ara yüzünü oluşturmuştuk, bu dersimizde ise uygulamamızın kod tarafına geçiş yapıp, uygulamamızı tamamlayacağız.
1 - ) Proje kök dizininden src klasörü altındaki java paketi içinde bulunan aktivite sınıfımızı açıyoruz.
2 - ) Görüntü elemanlarımızla bağlantıya geçerken kullanacağımız değişkenlerimizi oluşturalım.

3 - ) Değişkenlerimizi oluşturduğumuza göre görüntü elemanlarımıza bağlantı oluşturup,bu bağlantıyı değişkenlerimize atayalım.

4 - ) Görüntü elemanlarımızla bağlantımızı kurduk.Şimdi CheckBox elemanına tıklandığında çalıştırılacak kodları yazalım.

Bu kod satırını kısacak açıklayacak olursak, CheckBox elemanına tıklandığında seçili ise ekrana toast mesajı ile “İzin Var …” yazılacak ve Gönder butonu aktif duruma getirilecektir.Bu şartın dışındaki tüm durumlarda Gönder butonu pasif durumda olacak ve ekrana toast mesajı ile “İzin Yok !” yazılacaktır.
5 - ) CheckBox elemanını uygulamamız üzerinde kullanmış olduk arkadaşlar.Dilerseniz uygulamamızı bir adım daha ileri taşıyarak “Gönder” butonuna basıldığında girdiğimiz bilgilerin toast mesajı ile ekrana yazılmasını sağlayalım.
mesaj adında bir string değişken oluşturup ve getText() metodu yardımıyla metin kutularımıza girilen bilgileri alarak bu değişkene atıyoruz.

6 - ) Bilgilerimizi mesaj değişkenine atadıktan sonra toast mesajı yardımıyla ekrana yazdıyıroruz.

7 - ) Ekrana yazdırma işlemini gerçekleştirdikten sonra metin kutularımızı setText() metodu yardımıyla boşaltıyoruz,seçim kutumuzu seçilmemiş hale getirip,gönder butonumuzu pasif duruma getiriyoruz.

Uygulamamızı tamamladık arkadaşlar,artık sanal cihaz üzerinde çalıştırıp test edebilirsiniz.Bir sonraki makalemizde görüşmek üzere hoşçakalın...
Kaynak Dosya : _02_CheckBox_Kullanimi
YORUM GÖNDER
Merhaba arkadaşlar bu dersimizde android uygulaması üzerinde CheckBox kullanımını inceliyeceğiz.
1 - ) İlk olarak Eclipse yazılımını çalıştırıp yeni bir android projesi oluşturuyoruz.Ben çalışacağım android sürümünü 2.2 olarak seçiyorum.
2 - ) Projemizi oluşturduktan sonra uygulamamızın ara yüzünün bulunduğu main.xml dosyasını açıyoruz.
3 - ) Şimdide uygulamamızda kullanacağımız görüntü elemanlarını ara yüzümüze ekleyelim.
Form Widgets altından 4 Adet Large Text, 1 Adet CheckBox ve 1 Adet Button
Text Fields altından 4 Adet Plain Text ekliyoruz.

4 - ) Görüntü elemanlarımızı ekledikten sonra Large Text etiketleri üzerinde görüntülenecek olan metinleri oluşturalım.Proje kök dizinimiz altından res/values/strings.xml adlı dosyayı açalım.

5 - ) Açtığımız dosyadan Add butonuna tıklıyalım.Açılan ekrandan String seçip OK butonunu seçiyoruz.
6 - ) Listeye String adında yeni bir elementin eklendiğini görüyoruz.Üzerine tıkladığımızda sağ tarafta Name ve Value alanlarının boş olduğunu görüyoruz.
Name : Elementi kullanmak için gereken etiket
Value : Görüntülenecek metin

Diğer görüntü elemanlarımız içinde aynı işlemi uyguluyoruz.

7 - ) Metin etiketlerimizi oluşturduk.Artık görüntü elemanlarına metin etiketlerimizi atayabiliriz.
Görüntü elamanın üstüne sağ tıkladıktan sonra Edit Text bağlantısını seçiyoruz.
Açılan pencereden kullanacak olduğumuz etiketi seçerek OK butonuna tıklıyoruz.

Bütün görüntü elemanlarımıza bu işlemi uyguladıktan sonra ara yüzümüz aşağıda bulunan resimdeki gibi olacaktır.

8 - ) Uygulamamızın kod tarafında görüntü elemanları ile bağlantı kurarken problem yaşamamak için ID değerlerini değiştirelim.
Görüntü elemanının üstüne sağ tıkladıktan sonra Edit ID bağlantısını seçiyoruz.
Açılan pencereden bağlantı kurmak için kullanacağımız değeri kendimize göre değiştiriyoruz.
Benim kullandığım değerler şu şekilde arkadaşlar :
Birinci Text Field : editTextAdiSoyadi
İkinci Text Field : editTextKullaniciAdi
Üçüncü Text Field : editTextParola
Dördüncü Text Field : editTextEPosta
CheckBox : checkBoxOnayVer
Button : buttonGonder
Uygulamamızın ara yüzünü tamamladık arkadaşlar.Bir sonraki dersimizde uygulamamızın kod tarafını oluşturacağız.Şimdilik hoşçakalın…
YORUM GÖNDER
Merhaba arkadaşlar bu dersimizde android programlamaya hızlı bir giriş yaparak , android ile Toast kullanımını inceliyeceğiz.Toast nedir kısaca bahsedecek olursak ekranda bir an görünüp, daha sonra kendi kendine kaybolan uyarı penceresi diyebiliriz.
Gelin şimdi bir uygulama üzerinde Toast kullanımını inceleyelim.
1 - ) İlk olarak Eclipse yazılımını çalıştırıp yeni bir android projesi oluşturuyoruz.

2 - ) Projemizin adını yazdıktan sonra next butonu ile bir sonraki adıma geçiyoruz.

3 - ) Üzerinde çalışacağımız android sürümünü seçtikten sonra next butonu ile bir sonraki adıma geçiyoruz. Ben 2.2 sürümünü seçiyorum.

4 - ) Projemize ait bilgileri yazdıktan sonra finish butonuna tıklayarak projemizi oluşturuyoruz.

5 - ) Sıra geldi projemizin ara yüzünü oluşturmaya.Package Explorer bölümünden res/layout/main.xml yolundaki main adlı xml dosyasını açıyoruz.

6 - ) Palette bölümünden çalışma alanımıza Text Fields altından Plain Text,Form Widgets altından ise Button ekliyoruz.

7 - ) Projemize ait ara yüzü oluşturduk.Gelin artık projemizin kodlama aşamasına geçerek ilk android programımızı yazalım.Package Explorer bölümünden src klasörü altındaki paketimizin altında bulunan java uzantılı aktivite sınıfımızı açıyoruz.

8 - ) Projemizin ara yüzüne eklediğimiz buton ve mesaj kutusuyla bağlantı kuruyoruz.

9 - ) Bir önceki kodumuzda butonumuz ile bağlantı kurmuştuk ve bu bağlantıyı mesajiVer adlı bir değişkene atamıştık.Şimdi butona tıkladığımızda gerçekleşecek işlemler için gerekli kodu yazıyoruz.

10 - ) Şimdide butona tıkladığımızda Toast mesajının gösterilmesi için gereken kodu yazıyoruz.

11 - ) Projemizin oluşturulma aşamasını bitirdik arkadaşlar.Şimdi AVD (Android Virtual Device) yani programımızın çalıştırılması için gereken sanal cihazı oluşturup,projemizi test edelim.
12 - ) Sanal cihaz oluşturmak için Window sekmesinden AVD Managerı seçiyoruz.Açılan pencereden New butonuna tıklıyoruz.
Name : Sanal cihazın adı
Target : Android cihazımızın sürümü
Bu bilgileri girdikten sonra Create AVD düğmesine tıklayıp sanal cihazımızı oluşturuyoruz.

13 - ) Projemizi çalıştırmak için Ctrl + F11 tuşlarına basıyoruz ve sanal cihazımızın açılıp uygulamamızın çalıştırılmasını bekliyoruz.
14 - ) Projemiz çalıştırıldıktan sonra metin kutusuna bir metin girip butona bastığımızda metin kutusuna girilen değerin toast mesajı ile ekranda gösterildiğini görüyoruz.

Kaynak Dosya : _01_Toast_Kullanimi.zip
YORUM GÖNDER
Merhaba arkadaşlar bu makalede Jquery kütüphanesinden yararlanarak Asp.NET (C#) ile çoklu resim yüklüyebileceğimiz bir WebForm uygulaması yapacağız.Uygulamamızın sahip olacağı özellikler:
* Çoklu resim yükleme
* Yükleme esnasında resimlerin boyutlandırılması
* Veri tabanına resim yollarının kaydedilmesi
1-) Şimdi Sql Server 2008 yazılımını çalıştırıp yeni bir veri tabanı oluşturarak uygulamamızı geliştirmeye başlıyalım.

ResimId : Her resim için bağımsız değer tutulur.Otomatik artan sayı ve birinci anahtar özellikleri belirlenir.
ResimYolu : Yüklenen resmin adının tutulacağı alan.
2-) Uygulamamızda kullanıcağımız dosyaları indirelim.

jquery.js : Javascript kütüphanesi.
multi.js : Javascript kütüphanesine ait çoklu dosya yükleme eklentisi.
3-) Visual Studio yazılımını çalıştırıp yeni bir Web Sitesi tanımlıyoruz.
4-) Projemizi oluşturduktan sonra indirdiğimiz dosyaları proje kök dizinine kopyalayalım ve resim dosyalarımızın tutulacağı dizinleri oluşturalım.

js : Javascript kütüphane ve eklentilerimizin bulunduğu klasör.
Resimler : Resim dosyalarımızın tutulacağı ana dizin.
150 : 150 pixel genişliğindeki resim dosyalarımızın tutulacağı dizin.
800 : 150 pixel genişliğindeki resim dosyalarımızın tutulacağı dizin.
Temp : Yüklenen orjinal resim dosyalarımızın tutulacağı dizin.
5-) Default.aspx sayfamızı açıp komponentlerimizi ekliyoruz.

FileUpload : Dosya yüklemek için. ID sini fileResimler olarak değiştirelim. Class ını multi olarak belirtiyoruz.
Buton : Resimlerimizi seçtikten sonra yükleme işlemini başlatmak için. ID sini btnResimYukle olarak değiştirelim.
Label : Yüklenen dosyalarımızın bildirilmesi için. ID sini lblMesaj olarak değiştirelim.
6-) Default.aspx sayfamızın Source kısmına geçerek gerekli dosyalarımızı çağırıyoruz.

7-) Default.aspx.cs dosyasını açarak uygulamamızda kullanıcağımız C# kütüphanelerini projemize dahil ediyoruz.

8-) Yüklediğimiz resimleri boyutlandırmak için kullanıcağımız ResimBoyutlandir adlı methodumuzu oluşturalım.

Methodumuz iki adet parametre alıyor ve geriye boyutlandırılmış resmimizi döndürüyor.
resim : Boyutlandırılacak olan orjinal resim.
boyut : Kullanılacak olan genişlik değeri.
ydeger : Kullanılacak olan yeni genişlik ve yükseklik değerleri.
yresim : Yeni oluşturulan resim.
9-) Şimdi btnResimYukle ID li butonumuza tıkladığımızda çalışacak olan resim yükleme kodlarımızı yazalım.

10-) Şimdi uygulamamızı çalıştırıp resim yüklemeyi deneyelim.
* Dört adet resim seçip Resim(leri) Yükle butonuna tıklıyoruz.

* Resimlerin yüklendiğini oluşturduğumuz Label komponentinde bize bildirdi.

* Temp klasörümüze seçtiğimiz resimler yüklendi ama 150 ve 800 isimli klasörlerimizin boş olduğunu görüyoruz çünkü ResimBoyutlandir isimli methodumuzu henüz kullanmadık.

11-) Dikkat ettiyseniz resimlerimizin ismi ingilizceye dönüşmüş olarak kaydedildi bunu jquery eklentimiz sağlamıştır.Ama aynı isimde dosya yükleme kalktığımızda problem oluşabileceği için resimlerin yüklenirken eşsiz bir isimde kaydedilmesi için gereken düzenlemeyi yapalım şimdide.
* Resim ad ve uzantılırımızın saklanacağı string değişkenlerimizi ana sınıfımız içerisinde oluşturalım.

* Resmin uzantısını uzanti adlı string değişkenimize atıyoruz.
* resimadi adlı string değişkenimizdede DateTime sınıfından yararlanarak benzersiz bir değer oluşturup sonunada resim uzantısını ekleyerek resmimize atanacak yeni adı oluşturuyoruz.

* Resmi resimadi değişkenindeki adla kaydetmek için kod satırımızdaki fileName yerine resimadi değişkenizi kullanıyoruz.

12-) Uygulamamızı yeniden çalıştırıp yeni yüklenen resimlerin isimlerine bakacak olursak değiştiğini göreceğiz.

13-) ResimBoyutlandir methodumuzu kullanarak resimlerimizi boyutlandıralım.

resim : Yeni bir bitmap nesnesi oluşturup yüklenen resmimizi bu nesneye atıyoruz.
resim : Oluşturduğumuz bitmap nesnesine 150px genişliğinde oluşturulan yeni resmi atıyoruz.
resim.Save : Oluşturulan yeni resmi 150 adlı klasörümüze kaydediyoruz.
* 800px genişliğindeki resmin oluşturulması için kodumuzu biraz düzenliyoruz.

14-) Uygulamamızı çalıştırdığımızda yüklediğimiz resimlerin orjinallerinin yanında iki farklı boyutta (150px ve 800px genişliğinde) kopyalarının oluştuğunu görüyoruz.
* Temp klasörü

* 150 klasörü

* 800 klasörü

15-) Son adım olarak yüklenen resimlerinin adlarının veri tabanına kaydedilmesi için gereken kodları uygulamamıza ekleyelim.

16-) Uygulamamızı çalıştırdığımızda yüklenen resimlerin adlarının veri tabanına kaydedildiğini görüyoruz.

Uygulamamızı tamamladık arkadaşlar,bir sonraki makalemizde görüşmek üzere hoşçakalın...
Kaynak Dosya : multiupload_resize.rar
YORUM GÖNDER
Salihli Anadolu Teknik Lisesi 2009 yılı mezunu.Sakarya Üniversitesi Bilgisayar
ve Öğretim Teknolojileri Öğret...
Copyright © 2012 - Burak KIRBAĞ Kişisel Web Sayfası