Php, Mysql sırasıyla veri çekme

merhaba arkadaşlar, öğrenmek istediğim bir konu var. Veri tabanımızda

id, enKelime, trKelime, trCumle, ses, resim bilgileri var. toplam 10 kelime var içinde.

bunları sırası ile bu ekrana getirmek istiyorum. Sonraki dedikçe veritabanındaki diğer veriyi alacak. Yapamadım. javascript, jquery ne gerekir. Hali hazırda örnek var mı? Algoritma şeklinde de yardım edebilirsiniz.

islem.js

(function(){
  $(".remodal-confirm").click(function(){
    var id = $(this).attr("id");
    
    $.ajax({
      type: "POST",
      url: 'ajax.php',
      data: (id),
      success: function(cevap) {
        alert(cevap);
      }
      error:function(hata) {
        alert("Hata ");    
      }
    })
  })
});

ajax.php

<?php
  include ("./dbayar.php");
  
  if($_POST) {
    $id=$_POST["id"];
    $query = $db->query("SELECT * FROM kelimeler where id > '{$id}' ")->fetch(PDO::FETCH_ASSOC);
    
    if($query) {
      echo "<div class='col-md-3 app-bottom-grid'>          <img class='fa' src='$query[Resim]' style='height: 64px; cursor:pointer;'  onclick='play()'>    <audio id='audio' src='$query[ses]' ></audio>        </div>      <h1><i> $query[enKelime] </i></h1><h2 id='modal1Title'> $query[trKelime] </h2>";
    else {
      echo "Yok";
    }
  }
?>

 

index.php

<div id="veri"></div>
<br>
<button class="remodal-confirm">SONRAKİ</button>

 

jQuery göster-gizle mantığını kullanarak yapabilirsin. Aşağıdaki örnek işine daha çok yarayacaktır.

Her bir kelimeyi .kelime isimli divlere yazdıralım. 

<div class="kelime">
  <img src="agac.jpg" alt="Ağaç">
  <p>tree</p>
  <p>açıklama...</p>
  ...
</div>
...

Sonrasında jQuery kullanarak göster-gizle işlemini ve sonraki butonuna basıldığı zaman yapılacakları yazalım.

// kelimelerin hepsini gizleyelim
$('.kelime').hide();

// ilk kelimey "goster" isimli sınıf ekleyelim ve gösterelim
$('.kelime:first-child').addClass('goster').show();

// sonraki butonuna basıldığı zaman
$('.sonraki').click(function() {
  
  // ekranda gösterilen kelimenin sırasını alalım
  activeIndex = $('.kelime.goster').index();
    
  // ekranda gösterilen kelimeyi gizleyelim
  $('.kelime').eq(activeIndex)
    .removeClass('goster').hide();
  
  // bir sonraki kelimeyi gösterelim  
  $('.kelime').eq(activeIndex + 1)
    .addClass('goster').show();
});

 

cevabınız için teşekkür ederim fakat ben söylediğinizin mysql ile nasıl ilişkilendireceğimi anlamadım.
 soruyu güncelledim, kullandığım fakat çalışmayan kodları yazdım.

Mysql kısmında yapmanız gereken tek şey verilerin hepsini ekranda göstermek. Yani aşağıdaki gibi bir HTML yapısına ihtiyacımız var.

<!-- bütün kelimeleri listeleyelim. -->
  <div class="kelime">
    <img src="elma.jpg" alt="Elma">
    <h1>1- apple</h1>
    <p>açıklama...</p>
    ...
  </div>
  <div class="kelime">
    <img src="armut.jpg" alt="Armut">
    <h1>2- pear</h1>
    <p>açıklama...</p>
    ...
  </div>
  ...
  ..
  .
<!-- // bütün kelimeleri listeleyelim. -->

<button class="sonraki">Sonraki</button>
Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git