AjaxFileUploader fotoğraf görüntüleme (Bölüm-2)


     Evet, şimdi ise daha önce sitemizin kök dizininde yer alana foto klasöründe depolanan fotoğraflardan ve yine kök dizinde yer alan kayit.mdb veritabanında izin verilenleri listelemek için bir web sayfası hazırlıyoruz. Bu işlem için sizlerle daha önce hazırladğımız DataSet ile verileri sayfalayarak listelemek makalesindeki kodlardan yararlanacağız. Tekerleği ikinci defa keşfetmenin bir lüzumu olmadığını hepimiz biliyoruz. Ancak bu noktada verileri listelerken hangi yöntemi kullanmak isterseniz kullanabilirsiniz zira burada dikkat edilecek tek nokta SQL cümlesidir hepsi bu kadar. Web sayfamıza tüm kayıtları listelemek için aşağıdaki gibi bir div nesnesi tanımlıyoruz ki bunun HTML içeriğini kontrol ederek işlem yapıyoruz.

<body>
<h1 style="background-color:#0066ff; color: white; padding:5px 5px 5px 15px; box-shadow:3px 3px 3px gray">Fotoğraf Galerisi</h1>
<form id="form1" runat="server">

    <div id="veriler" runat="server" style="width:100%">
 
    </div>
</form>
</body>

Ayrıca resimlerin üzerine geldiğimizde gölgeleme efekti ile o resmi tıkladığımızda onun orjinal halini ayrı bir tarayıcı penceresinde görüntülemek için de aşağı verdiğim JavaScript kodu yazdım.

<script language="javascript" type="text/javascript">
function efektVer(id,durum) {
 var resim = eval("res" + id);
 if (durum == 1) {
   resim.style.cursor = "pointer";
   resim.style.border="2px solid gray;"  
   resim.style.boxShadow = "5px 5px 5px #333";
 }else{
   resim.style.cursor = "";
   resim.style.border = "none";
   resim.style.boxShadow = "";            
  }
} //efektVer

function goruntule(dosya) {
  if (dosya != "")
     window.open("foto/" + dosya, "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=0,left=0,width=800,height=600");

} //goruntule
</script>

       Web sayfamızın işlevselliğini kazanması için şağıda verdiğim C# kodlarını yazdım ki bunlar size tanıdık geliyor olması gerekiyor zira yazının başında ifade ettiğim gibi daha önce kodlağımız DataSet ile verileri sayfalayarak görüntüleme uygulamamızdaki kodların neredeyse aynısı. Sadece verileri listelerken bu defa farklı bir HTML kodlamayı tercih ettim. Kodlarda yeteri kadar açıklama satırına yer verdiğim için burada ayrıca bir açıklama yapma gereği duymuyorum.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebCon tr ols;
using System.Data;
using System.Data.OleDb;
public partial class fotoGaleri : System.Web.UI.Page
{
OleDbConnection conn= new OleDbConnection();
OleDbCommand cmd= new OleDbCommand();
OleDbDataAdapter da=new OleDbDataAdapter();
DataSet ds= new DataSet();
int topKaySay = 0; //toplam kayit sayisi
//bu degeri degistirerek her sayfada kaç adet kayit listelenecek
//karar verebilirsiniz.
int sayBasKaySay = 3; // sayfa basina kayit sayisi
 
protected void Page_Load(object sender, EventArgs e)
{
s tr ing sayfaID = Request.QueryS tr ing.Get("id");
if (!s tr ing.IsNullOrEmpty(sayfaID)) kayitlariListele(int.Parse(sayfaID));
else kayitlariListele(1);
}
 
void kayitlariListele(int sayfaNo) {
////////////////////////////////////////////////////////////////////////////////////////
// Kodlama          : Bilal SERT
// Amaç             : Bir tablo verilerini sayfalayaral listelemek
// Giriş/Çıkış      : sayfaNo listelenmek istenen sayfa / yok.
// Tarih|Saat       : 20.04.2020 | 08:20
//Çağrıldığı yer    : Page_Load
////////////////////////////////////////////////////////////////////////////////////////
int baslangic = 0, bitis = 0;
conn.ConnectionS tr ing = "Provider=Microsoft.JET.OLEDB.4.0;Data Source=" +
				Server.MapPath("~/kayit.mdb");
cmd.Connection = conn;
cmd.CommandType = CommandType.Text;
cmd.CommandText = "SELECT * FROM resimler WHERE durum=1 ORDER BY id DESC";
 tr y
{
conn.Open();
da.SelectCommand = cmd;
ds.Clear();
da.Fill(ds, "resimler");
 
if (ds. table s["resimler"].Rows.Count >  0)
{
//sayet kayit varsa
topKaySay = ds. table s["resimler"].Rows.Count;
//bu sadece tek sayfaya sigacak kadar kayit varsa ise yarayacaktir
baslangic = 0; bitis = topKaySay;
//sayet tek sayfada goruntulenmek istenenden fazla kayıt varsa
if (topKaySay >  sayBasKaySay) {
//safa sayimizi hesapliyoruz
int sayfaSay=0;
int kalan = topKaySay % sayBasKaySay;
if (kalan != 0) sayfaSay = ((topKaySay-kalan) / sayBasKaySay)+1;
else sayfaSay = topKaySay / sayBasKaySay;
//koprulerimizi olusturuyoruz
veriler.InnerHtml = "<  div  class='yerTutucu'> ";
for (int i = 1; i < = sayfaSay; i++)
{
	if(i !=sayfaNo)
		veriler.InnerHtml += "< A href='fotoGaleri.aspx?id=" + i.ToS tr ing() + "' target='_self'> " + i.ToS tr ing() + "< /a> ";
	else
		veriler.InnerHtml += "< A class='aktif' href='fotoGaleri.aspx?id=" + i.ToS tr ing() + "' target='_self'> " + i.ToS tr ing() + "< /a> ";
}
veriler.InnerHtml+="< / div > ";
veriler.InnerHtml += "< br / > < br / > ";
 
//listeleme yapilacak kayit araligi belirleniyor
//burada dikkat edilmesi gereken nokta son sayfadaki kayit sayisidir
//sayet son sayfada listelenmek istenenden daha az kayit kalirsa ne olacak?
//Misal: 20 kayit için her sayfada 3  kayit olursa bu durumda son sayfada 2 kayit olacaktir. 
baslangic = (sayfaNo - 1) * sayBasKaySay;
if ((topKaySay - baslangic) >  sayBasKaySay) bitis = baslangic + sayBasKaySay;
else bitis = topKaySay;
 
}
//simdi verileri listeliyoruz
s tr ing gecici = "";
for (int i =baslangic ; i < bitis; i++){
	veriler.InnerHtml += "< div  class='resimKutusu'> < table  width='100%'> ";
	//resim
	veriler.InnerHtml += "<  tr > ";
	veriler.InnerHtml += "< td align='center' valign='middle' style='height:150px;'> ";
	gecici = "< img id=\"res" + i + "\" src=\"foto/thumb_" + ds. table s["resimler"].Rows[i][1].ToS tr ing() + "\"";
	gecici += " onmouseover=\"efektVer(" + i + ",1);\"   onmouseout=\"efektVer(" + i + ",0);\" ";
	gecici += " onclick=\"goruntule('" + ds. table s["resimler"].Rows[i][1].ToS tr ing() + "');\" // > ";
	veriler.InnerHtml += gecici;
	veriler.InnerHtml += "< /td> ";
	veriler.InnerHtml += "< / tr > ";
	//aciklama
	veriler.InnerHtml += "<  tr > ";
	veriler.InnerHtml += "< td align='center' valign='middle'> ";
	veriler.InnerHtml += ds. table s["resimler"].Rows[i][2].ToS tr ing();
	veriler.InnerHtml += "< /td> ";
	veriler.InnerHtml += "< / tr > ";        
	veriler.InnerHtml += "< / tr > ";
	veriler.InnerHtml += "< / table > < / div > ";
	}
}else{
//kayit yoksa
veriler.InnerHtml = "< span class='hata'> Upps! Kayıt bulunamadı< /span> ";}
}catch (Exception ex){
veriler.InnerHtml = "<  div  class='hata'> ";
veriler.InnerHtml += "Hata! (Kayit listeleme modulu) < br / > ";
veriler.InnerHtml += ex.Message.ToS tr ing() + "< br / > ";
veriler.InnerHtml += "< / div > ";
}finally{
if (conn.State == ConnectionState.Open){
conn.Close();
ds.Dispose();
da.Dispose();}
}           
}//end of kayitlariListele
}//end of class