PHP ve JavaScript ile Veritabanından Veri Çekip İşlemek

Kategori: PHP

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Merhabalar!

Bu bölümümüzde veritabanından veri çeken bir PHP kodu ve veriyi çeken PHP koduna istek yaparak çekilen veriyi HTML dosyamıza ekleyen bir JavaScript kodu yazacağız.

Adım 1: Bağlantı Dosyası

İlk öncelikle, daha önce oluşturduğumuz baglan.php dosyamızın hazır olması gerekiyor, eğer baglan.php dosyamız hazır değil ise ilk önce Buraya tıklayarak, baglan.php dosyasını hazırlayın.

Adım 2: Veri Çeken PHP Dosyası

Bağlantı dosyamızı oluşturduğumuza göre, veritabanı tablolarımızdan veri çeken bir PHP kodu yazacağız, Aşağıda tablo ve sutun isimleri örnek olarak verilmiştir, kendinize göre düzenleyin.

Şimdi bir PHP dosyası oluşturalım ve adını veri_cek.php koyalım.


<?php
header('Content-Type: application/json');

include "baglan.php";

try {
    $db = new PDO("mysql:host=" . DB_HOST . ";dbname=" . DB_NAME, DB_USER, DB_PASS);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $db->prepare("SELECT * FROM tabloadi");
    $stmt->execute();

    $sonuc = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($sonuc, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
} catch(PDOException $e) {
    echo 'Bağlantı hatası: ' . $e->getMessage();
}
?>

Yukarıda ne yaptık?

JavaScript ile veri çekeceğiz ve bunun için JSON formatında bize veriyi göndermesini istedik, bknz: header('Content-Type: application/json');
Veritabanı bağlantı dosyamızı dosyaya dahil ettik.
Hangi tablodan veri çekeceğimizi girdik. SELECT * FROM tabloadi, eğer sadece bir sutundan veri çekecekseniz, şu şekilde düzenleyebilirsiniz SELECT sutunadi FROM tabloadi
Çekilen verileri $sonuc değişkenine tanımladık.

Bu adımlarla, veritabanınızdan veriyi çekebilirsiniz, şimdi gelelim bunu ön yüzde nasıl gösterebileceğimize.

Adım 3: Çekilen Veriyi Kontrol Etmek

PHP ile çekilen veriyi bir JavaScript kodu ile ön yüze aktaracağız.

Şimdi, bu verileri HTML içinde nasıl kullanacağınıza bakalım:

Size çektiğimiz veriyi örneğin bir liste halinde göstereceğiz.


<ul id="cekilen-veriler"></ul>

Yukarıda bir listeleme HTML'i oluşturup cekilen-veriler diye eşsiz bir id tanımladık.


<script>
    fetch('veri_cek.php')
        .then(response => response.json())
        .then(data => {
            const veriCek = document.getElementById('cekilen-veriler');
            data.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item.sonuc;
                veriCek.appendChild(li);
            });
        })
        .catch(error => console.error('Hata:', error));
</script>

Yukarıda ne yaptık?

Daha önce oluşturduğumuz veri_cek.php dosyamıza JavaScript ile istek yaptık.
Çekilen verinin JSON formatında döndürülmesini istedik.
Eğer çekilen veri başarılı ise, eşsiz id olan cekilen-veriler bölümümüze <li> elementi oluşturup döndürmesini istedik.

Bu HTML dosyası, JSON verilerini çekmek için fetch kullanır. Verileri alındıktan sonra, her bir "sonuc" için bir <li> öğesi oluşturarak bunları bir liste içinde görüntüler. Bu örnek, alınan verileri basitçe bir liste olarak görüntülemektedir, ancak ihtiyacınıza göre verileri farklı şekillerde kullanabilirsiniz.

Bu işlemler ile, ön yüz sayfanıza başarıyla veritabanınızdan veri çekebilirsiniz. Peki ya veriyi farklı sayfalarda değilde aynı sayfada çekebilir miyiz? EVET.

Alternatif Yöntem: Aynı Sayfada Veriyi Çekmek

Verilerimizi farklı dosyalar oluşturmadan nasıl çekebiliriz?


<ul id="cekilen-veriler"></ul>

Gene aynı şekilde, benzersiz id'mizi oluşturduk.


<?php
include "baglan.php";

try {
    $conn = new PDO("mysql:host=" . DB_HOST . ";dbname=" . DB_NAME, DB_USER, DB_PASS);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $conn->prepare("SELECT * FROM tabloadi");
    $stmt->execute();

    $tips = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo '<script>';
    echo 'var sonuc = ' . json_encode($sonuc, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . ';';
    echo 'var VeriCek = document.getElementById("cekilen-veriler");';
    echo 'sonuc.forEach(function(item) {';
    echo '  var li = document.createElement("li");';
    echo '  li.textContent = item.sonuc;';
    echo '  VeriCek.appendChild(li);';
    echo '});';
    echo '</script>';

} catch(PDOException $e) {
    echo 'Bağlantı hatası: ' . $e->getMessage();
}
?>

Aynı sayfa içerisine bu PHP kodunu yapıştırdık, tablolarımızı kendimize göre düzenledik ve veriyi çektik.

Dikkat Edilmesi Gerekenler:

baglan.php dosyamızın eğer farklı klasördeyse klasörünün doğru girilmesi gerekir.
Tablo adınızı kendinize göre düzenlemeniz gerekir.
Dosya adınızın .php uzantısıyla bitmesi gerekir.

Tüm başarılı işlemlerden sonra tek sayfa görünümü şöyle olabilir.

veri.php


<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EA Medya Veritabanından Veri Çekme</title>
</head>
<body>
<h1>Veriler</h1>
<ul id="cekilen-veriler"></ul>
<?php
include "baglan.php";

try {
    $conn = new PDO("mysql:host=" . DB_HOST . ";dbname=" . DB_NAME, DB_USER, DB_PASS);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $conn->prepare("SELECT * FROM tabloadi");
    $stmt->execute();

    $tips = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo '<script>';
    echo 'var sonuc = ' . json_encode($sonuc, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . ';';
    echo 'var VeriCek = document.getElementById("cekilen-veriler");';
    echo 'sonuc.forEach(function(item) {';
    echo '  var li = document.createElement("li");';
    echo '  li.textContent = item.sonuc;';
    echo '  VeriCek.appendChild(li);';
    echo '});';
    echo '</script>';

} catch(PDOException $e) {
    echo 'Bağlantı hatası: ' . $e->getMessage();
}
?>
</body>
</html>

Bu örnekte, PHP koduyla veritabanından tabloadi tablosundaki verileri çekiyoruz ve bu verileri JSON formatına dönüştürüp JavaScript içinde kullanılabilir hale getiriyoruz. Daha sonra JavaScript kodu ile bu verileri kullanarak sayfada listeliyoruz.

Tüm sorularınız ve istekleriniz için, info@enesalp.com.tr adresinden bize ulaşabilirsiniz.