TEMMUZ27
ASP ve Jquery AJAX apisi kullanarak Access'den gelen verileri sayfalara bölmek
Merhaba,
Uzun süredir yeni içerik ekleyemiyordum, nedeni de yazmış olmak için birşeyler eklemek istememem ve biraz da zaman konusundaki problemler.
Dün buradaki yazıya yazılan yorum, yazmaya değecek ve birçok kişinin ilgisini çekecek birkaç konuyu birden içermesi dolayısıyla yeni yazımın konusunu belirledi.
Aynı konuda
- Access veritabanı bağlantısı
- Access'den gelen verilerin sayfalara bölünerek ziyaretçiye sunulması
- JQuery'nin Ajax apisinin bu işlemlerde kullanımı
gibi konuları birlikte kullanmak benimde hoşuma gitti ve kollarımı sıvadım başladım kodlamaya.
Konu sonunda nasıl bir sonuca ulaşacağınızı şimdiden görmek isterseniz
Gelelim kullanılan materyallere :)
- jquery.js
- inner.gif (ajax uygulamarından aşina olduğunuz loading animasyonu)
- default.asp (İlk sayfa açıldığında görüntülenecek ve sayfalama kodlarının olduğu sayfa)
- veriler.asp (Verilerin ajax kullanılarak bir div içerisinde görüntüleneceği sayfa - Liste sayfası)
- etiket.mdb (Verilerin bulunduğu access veritabanı)
Default.asp'nin kodları aşağıda
<html>
<head>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script language="javascript">
$(document).ready(function() {
// sayfa ilk açıldığında ilk kayıtlardan oluşan lşisteyi yükletiyoruz
Ajx(1);
});
// jquery fonksiyonumuzu oluşturuyoruz
// tek parametre kullanıyoruz oda sayfa numarası
function Ajx(sayfa)
{
// .slideToggle ile ilk önce verilerin olduğu div'i kapatıyoruz (işin şov kısmı pek bi işlevi yok
$('#kayitlar').slideToggle("fast");
// ajax uygulamalarında görmeye alışık olduğumuz loading....
$('#kayitlar').html('<center><img src="js/spinner.gif" alt="veri aliniyor..."><br>Veri Alınıyor...</center>');
$.ajax({
type: 'GET',
url: 'veriler.asp', // ajax ile hangi sayfası çağıracaksan burada o sayfanın adı olacak
cache: false,
data: 'p='+sayfa, // fonksiyondaki tek parametremizi burada kullanıyoruz.
success: function(sonuc) {
// gelen sonuçları yazıyoruz
$('#kayitlar').html(sonuc);
// div2i tekrar açıyoruz
$('#kayitlar').slideToggle("fast");
}
});
}
</script>
<style type="text/css">
<!--
.ListeItem {
font-family: "trebuchet MS";
font-size: 12px;
font-weight: normal;
color: #333333;
background-color: #E4F4FC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
}
a{
color: #333333;
text-decoration:underline;
}
a:hover{
color: #333333;
text-decoration:none;
}
.ListeAltItem {
font-family: "trebuchet MS";
font-size: 12px;
font-weight: normal;
color: #333333;
background-color: #F7F7F7;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
}
.Baslik {
font-family: "trebuchet MS";
font-size: 12px;
font-weight: bold;
color: #000000;
background-color: #A7C5E4;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #003366;
}
.Sayfalar {
font-family: "trebuchet MS";
font-size: 12px;
font-weight: normal;
color: #003366;
}
-->
</style>
</head>
<body>
<%
' Her sayfada kaç kayıt görüntülenecek
MaxSayi = 10
' Veri tabanı bağlantısını oluştruyoruz.
set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open = "Driver={Microsoft Access Driver (*.mdb)};Dbq="& Server.MapPath("db\etiket.mdb")
Set objRs = Server.CreateObject("ADODb.RecordSet")
strSQL = "SELECT * FRom tblEtiketler ORDER by fldEtiket ASC"
objRs.Open strSQL, objConn, 1, 3
' Eğer kayıt varsa
if Not objrs.EOF then
' Toplam kayıt sayısını aldık
ToplamKayit = objRs.RecordCount
' Eğer toplam kayıt sayısı sayfa başı göserilecek sayıya kalansız bölünebiliyorsa
If ToplamKayit mod maxSayi = 0 Then
' Toplam kaç sayfamız olacak
SayfaSayisi = ToplamKayit / maxSayi
else ' Bölünemiyorsa
SayfaSayisi = ToplamKayit / maxSayi+1
End If
%>
<div id="kayitlar">Veriler Yükleniyor...</div>
<div align="center" class="Sayfalar">Toplam
<span style="font-weight: bold">
<% =Int(SayfaSayisi) %>
</span> sayfada <span style="font-weight: bold">
<% =ToplamKayit %>
</span> adet kayıt bulundu<br />
<% For p = 1 To SayfaSayisi %>
[ <a href="javascript:Ajx(<% =p %>);"><%= p %></a> ]
<% Next %>
</div>
<%
else %>
<div id="kayitlar">Hiç Veri Bulunamadı</div>
<%
end if
objRs.Close
Set objRs = nothing
%>
</body>
</html>
verilerin listelendiği veriler.asp'nin kodları
<%
' Ajax içerisindeki bilgilerin türkçe karakter problemini ekarte ediyoruz :)
Response.Charset = "iso-8859-9"
' Veri tabanı bağlantısını oluşturuyoruz.
set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open = "Driver={Microsoft Access Driver (*.mdb)};Dbq="& Server.MapPath("db\etiket.mdb")
' Sayfa başına kaç kayıt gösterilecek onu belirtiyoruz
MaxSayi = 10
'Kaçıncı sayfayı görüntüleyeceğimizle ilgili parametreyi alıyoruz
iSayfa = Request.Querystring("p")
' Kayıt setimizi oluşturuyoruz
Set objRs = Server.CreateObject("ADODb.RecordSet")
strSQL = "SELECT * FRom tblEtiketler ORDER by fldEtiket ASC"
objRs.Open strSQL, objConn, 1, 3
%>
<table width="400" border="0" align="center" cellpadding="1" cellspacing="1">
<tr class="Baslik">
<td width="26">#</td>
<td width="234">Etiket</td>
<td width="130">Hit</td>
</tr>
<%
' Eğer kayıt varsa
if Not objRs.EOF Then
ToplamKayit = objRs.RecordCount
If ToplamKayit mod maxSayi = 0 Then
ToplamSayfa = ToplamKayit / maxSayi
else
ToplamSayfa = ToplamKayit / maxSayi+1
End If
' Eğer sayfa sayısı gelmemişse yada hatalı geldiyse
If iSayfa ="" or Not IsNumeric(iSayfa) or CINT(iSayfa)>ToplamSayfa Then
iSayfa=1
End If
' Bulunduğumuz sayfadaki ilk kayıda geliyoruz
objRs.Move((iSayfa-1)*MaxSayi)
i=1
Do while not objRs.EOF and i < MaxSayi +1
' Kayıt listesini düzgün gösterelim
if i mod 2 then
cls = "ListeItem"
else
cls = "ListeAltItem"
end if
%>
<tr class="<%=cls %>">
<td><% =i+((iSayfa-1)*MaxSayi) %></td>
<td><a href="http://www.ismailkaplan.com/etiket/<% =objRs("fldEtiket") %>"><% =objRs("fldEtiket") %></a></td>
<td><% =objRs("fldEtiketsayac") %></td>
</tr>
<%
objrs.Movenext
i = i+1
Loop
' Eğer kayıt yoksa
else
%>
<tr>
<td colspan="3"><div align="center">Kayıt bulunamadı</div></td>
</tr>
<%
end if %>
</table>
<%
'Kayıt seti nesnesini kapatıyoruz
objRs.Close
Set objRs =nothing
%>
Umarım işinizi görür.
Kodlarda yeteri kadar yorum kullandığım için neyin ne işe yaradığı konusunda ayrıntılar yazmayacağım. Zaten çalışan hali ve gerekli tüm dosyaları indirebileceksiniz.
