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

Blog Gönderisi Resmi

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.

Sizin İçin Önerdiklerimiz

Blog Resim
PHP ile Giriş ve Kayıt Formlarını Veritabanına İşlemek

PHP

Daha önce HTML yapılarını oluşturduğumuz Login form ile Register form'a PHP'de veritabanında işlem sağlamak için gerekli işlevselliği ekleyeceğiz.

Devamını Oku
Blog Resim
PHP'ye Başlamak ve PHP Kurulumu (Ders-1)

PHP

PHP, web sitelerinin geliştirilmesi için oldukça popüler bir programlama dili olarak bilinir. Bu dili öğrenmek, birçok senaryoda önemli bir avantajdır. ..

Devamını Oku
Blog Resim
PHP Dersleri 2: Temel Sözdizimi ve Değişkenler

PHP

PHP, web geliştirme alanında sıkça kullanılan bir sunucu taraflı betik dildir. Bu dersimizde, PHP'nin temel sözdizini ve değişkenlerini öğreneceğiz. Bu, PHP programlamaya başlamak için temel bir adımdır.

Devamını Oku
Blog Resim
PHP Dosyaları Nasıl Oluşturulur? Örnekleri Nelerdir?

PHP

PHP, sunucu taraflı bir programlama dili olup, dinamik web sitelerinin oluşturulmasında kullanılır. PHP kodları .php uzantılı dosyalara..

Devamını Oku