Bir Öğrenci Klasiği – AUG

Ajax Accordion Menu ile Php Birleşimi

Merhaba arkadaşlar. Bu dersimizde nasıl Ajax Accordion Menu ile Php sayesinde çektiğimiz verileri birleştiririz bunu göreceğiz. Aslına bakarsanız demo olarak görmeniz daha sağlıklı olur. Buraya tıklayarak nasıl birşey yapacağımızı görebilirsiniz…

Demomuza göz attıktan sonra nasıl böyle birşey yapabiliriz bunu göreceğiz. Blog scriptimiz ile birleştirme yaptığım için bizim yapacağımız o kadar süper birşey olmayacak. Direk olarak listeleyecek. İlk önce Ajax ile yapılmış olan Accordion Menu script ini indirelim.

Scriptmizin içindeki accordian-src.js ve accordian.pack.js adlı iki Javascript dosyasını acor adlı bir klasör yaratıp içine koyalım. Buraya kadar herşey tamam. İçindeki html dosyası demo olarak verilmiş. Ben ilk olarak nasıl yapıldığını görmek için html kodlarına bakmıştım. İçerisinde belirli komutlar mevcut. Biz bunları kendi kodlarımız ile birleştirerek dinamik hale getireceğiz.

Şimdi acor adında bir php dosyası açalım. Arkadaşlar ilk önce style dosyamızı belirtmemiz lazım. Biz style ı içeride belirticez. < title > etiketinin hemen altına şu style kodlarını koyuyoruz;

<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin:10px;
}
#basic-accordian{
border:5px solid #EEE;
padding:5px;
width:528px;
position:absolute;
left:414px;
top:218px;
margin-left:-175px;
z-index:2;
margin-top:-100px;
}
.accordion_headings{
padding:5px;
background:#99CC00;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}
.accordion_headings:hover{
background:#00CCFF;
}
.accordion_child{
padding:15px;
background:#EEE;
}
.header_highlight{
background:#00CCFF;
}
</style>

Daha sonra Javascipt dosyalamızı php nin içine çağıralım;

< script src="accordian.pack.js" type="text/javascript">< /script>

Arından body etiketinin içine bazı acordion menu kodlarını girelim;

Bundan sonra bazı etiketler açmamız lazım. Bunlar Ajax için en gerekli etiketler;
< div id="wrapper">
< div id="content">

Adından bir div id si belirleyip içine body etiketi ile birleştirmek için bir isim belirtiyoruz;

< div id="basic-accordian">

Arından şu kodlar şu php kodları geliyor;

<?
include "baglan.php";
$tablo = sprintf("select * from yazilar") or die ("Bir problem olustu");
$sorgu = mysql_query($tablo);
$toplam=mysql_num_rows($sorgu);
for ( $i=0; $i<$toplam; $i++ ) {
$yaz=mysql_fetch_array($sorgu);
$baslik = $yaz['baslik'];
$metin = $yaz['metin'];
echo '<div id="test'.$i.'-header" class="accordion_headings" >'.$baslik.'</div>';
echo '<div id="test'.$i.'-content">';
echo '<div class="accordion_child">'.$metin.'</div>';
echo "</div>";
}
?>

Arkadaşlar kodumuzun içinde menümüz için hazırlanmış bazı kodlar var. Mesela $baslik için başlık olduğuna dair kodlar, $metin için bazı kodlar var, onları ekliyoruz.

Son olarak < /div> etiketi ile kapatıyoruz, araya da body ve html kapatma kodları giriyor ;

< /div>
< /body>
< /html>

Sonunda kodumuzu çalıştırınca olduğunu göreceksiniz. İnşallah iyi bir makale olmuştur. Ajax ve Php kuramı üzerine birşey anlatmaya çalıştık

iyi günler, iyi çalışmalar…

Benzer Yazılar;

• Javascript ile Yazı Üzerine Gelince Açılan Baloncuklar :)
• Php de jQuery Yardımıyla Veri Post Etme
• Tek bir Ajax Fonksiyonu ile Bütün Veri İşlemleri
• Kullanıcı Adınızı Takip Edin!
• Ajax ve Php Kuramı