PHP ve AJAX ile database işlemleri nasıl yapılır ?

livcon

Üye
21 Tem 2021
155
87
21
s07d252.jpg


Merhaba arkadaşlar, çoğu üniversitedeki hocalar sayfa yenilemeden database işlemleri gerçekleştirme ödevi vermeye başlamış, bu konuda internette öğrencilerin tam anlamıyla istediklerini anlatan bir Türkçe kaynak bulamadım bu yüzden böyle bir konu açarak hem öğrenci arkadaşlarımıza hem de bu konuda herhangi bir sebepten dolayı çözüm arayan diğer kişilere yardımcı olmaya karar verdim.

Bu makalede, PHP ve AJAX kullanarak sayfa yenilemeden database işlemleri nasıl yapılır ? Sayfa yenilemeden register ve login işlemleri nasıl yapılır ? XAMPP kurulumu nasıl yapılır ? PHP ve AJAX ile database bağlantısı yapılır ? bunları ele alacağız. Hazırsanız başlayalım :)



Database için Kurulumlar

Öncelikle, MySQL database kullanabilmemiz için localhost sunucu açmamız gerekiyor. Daha sonra sitemizi localhost'ta kurup, yine local'de kurulu apache sunucumuzdaki phpmyadmin ile bağlantı sağlayacağız. Bunların hepsini yapabilmemiz için de en yaygın olarak kullanılan XAMPP aracını tercih ediyoruz. O halde XAMPP'i indirmekle işe koyulalım. XAMPP'in kendi sitesine girip kurulum dosyasını indiriyoruz. indirme linki için tıklayın

qr74tfl.png


Daha sonra indirdiğimiz dosyayı yönetici olarak çalıştırıyoruz, gerekli sözleşmeyi kabul edip ileri butonuna tıkladıktan sonra, karşımıza çıkan listede ekstra olarak "MySQL" ve "phpmyadmin" component'lerini seçiyoruz. Ardından yüklemeyi windows'un kurulu olduğu diske yapıyoruz (bende windows C'de kurulu olduğu için, yükleme yolu C:\xampp).

4ls6gyf.JPG


Yükleme tamamlandıktan sonra windows arama çubuğuna "xampp htdocs" yazıyoruz ve sonuç olarak çıkan klasörü açıyoruz. Hazırlayacağımız web sitesi için burda yeni bir klasör oluşturup index.html dosyasını oluşturuyoruz veya daha önceden hazırlamış olduğumuz site dosyalarını buraya atıyoruz.

1o8e7hn.png



Windows arama çubuğuna "xampp control" yazarak sonuç olarak çıkan uygulamayı açıyoruz. Karışımıza çıkan panelde "Apache" ve "MySql" modüllerini çalıştırıyoruz.

kda0lvy.png


Artık tarayıcımıza girip link kısmına "localhost/{htdocs içerisindeki klasörünüzün ismi}" yazarsak sitemizi localhost'ta çalıştırmış olacağız. (Yukarıdaki görselde bulunan "Yeni Klasör" ismini kullandıysanız localhost/Yeni%20Klasör linkiyle sitenizi çalıştırabilirsiniz)


hcs0p2v.png


PHP ve AJAX ile Sayfa Yenilemeden Database Bağlantısı Nasıl Yapılır ?

Database bağlantısı yapmak için ilk olarak .js uzantılı bir dosya oluşturuyoruz (ben bu dosyası script.js olarak adlandıracağım). Oluşturduğumuz dosyanın içinde aşağıdaki kodları yapıştırıyoruz.
JavaScript:
//Bu kodların sayfa yüklemesi tamamlandığında direkt çalıştırılmasını istiyoruz
document.addEventListener("DOMContentLoaded", function () {
    //AJAX ile yeni bir XML HTTP isteği oluşturuyoruz
    var ajax = new XMLHttpRequest();
    //Herhangi bir veri göndermeyeceğimiz için metodumuzu GET olarak ayarlıyoruz
    var method = "GET";
    //Database bağlantısının yapılacağı PHP dosyasının yolunu yazıyoruz
    //ben script klasörü içerisindeki db.php isimli dosyada bu işlemleri yapacağım
    var url = "scripts/db.php";
    //asynchronous kısmını true yapmak
    //sunucu yanıtını beklerken diğer komut dosyalarını yürütebilmemizi sağlar
    //yanıt hazır olduğunda yanıtla ilgileniriz
    //bu işlem hem bize avantaj sağlar hem de kullanıcıya o sırada farklı işlmeler yapma fırsatı sunar
    var asynchronous = true;
    //ajax.open komutuyla tanımaladığımız ayarları belirtiyoruz.
    ajax.open(method, url, asynchronous);
    //ajax.send komutuyla server işlemini tetikliyoruz
    ajax.send();
    //ajax.onreadystatechange ile sunucu yanıtı geldiğinde yanıtı işliyoruz
    ajax.onreadystatechange = function(){
        //eğer sunucu yanıtı başarılıysa durum olarak 200 kodu döner.
        if(this.readyState == 4 && this.status == 200){
            //200 kodu döndüğünde yani işlem başarılı olduğunda bir şey yapılacaksa bu kısma yazabilirsiniz
            //şimdilik, gelin sonucu konsola yazdıralım
            console.log(this.responseText);
        }
    }
});

Daha sonra scripts isimli bir klasör oluşturup içerisine db.php isimli bir dosya oluşturuyorum. (yukarıdaki kodun yorum satırlarını okumanızı önemle tavsiye ederim) Ardından PHP dosyamın içine şu kodları yazıyorum.
PHP:
<?php

    //servername, username, password ve dbname tanımlamalarını yapıyoruz
    //localhost kullanıyorsanız aşağıdan sadece dbname kısmını değiştirin
    //public sunucu kullanıyorsanız hosting sağlayıcınızdan aldığınız bilgileri girin
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "livcon";

    //yukarıda belirtilen sunucu ismine, yine belirtilen  kullanıcı ismi ve şifreyle bağlanıp, belirtilen database ismine bağlantı yapmasını istiyoruz
    //bu işlemi de conn olarak tanımlıyoruz
    $conn = mysqli_connect($servername, $username, $password, $dbname);

    //database oluşturma işlemini connSql olarak tanımlıyoruz
    $connSql = "CREATE DATABASE $dbname";
    //users isminde bir tablo oluşturma işlemini createUsers olarak tanımlıyoruz
    //kullanıcılar username, firstname, lastname ve pw(yani password) isimli 4 değere sahip olacak
    //siz bunu kendinize göre ayarlayabilirsiniz
    $createUsers = "CREATE TABLE users (id int(11) NOT null AUTO_INCREMENT PRIMARY KEY,username text NOT null,firstname text NOT null,lastname text NOT null,pw text NOT null)";
    //admin kullanıcısı oluşturmadan önce şifresini md5 tipinde şifreliyoruz
    $adminPw = md5("123asd");
    //admin kullanıcısı oluşturma işlemini createAdmin olarak tanımlıyoruz
    $createAdmin = "INSERT INTO users (username, firstname, lastname, pw) VALUES ('Livcon', 'Livcon', 'THT', '$adminPw')";

    if (!$conn) {
        //eğer conn işlemi başarısız olursa (yani belirtilen isimdeki database'e bağlanamadıysa)
        //Böyle bir database oluşturulmamış demektir. Bu yüzden aşağıdakileri yapıyoruz

        //yukarıda belirtilen sunucu ismine, yine beliritilen kullanıcı ismi ve şifreyle bağlan, daha sonra connSql olarak tanımladığım işlemi yap
        //yani belirttiğim isimde bir database oluştur
        //bu işlemi "first" olarak tanımlıyoruz
        $first = mysqli_query(mysqli_connect($servername, $username, $password),$connSql);

        if ($first){
            //eğer first işlemi başarılıysa aşağıdakileri yapıyoruz

            //belirtilen sunucu ismine, yine belirtilen kullanıcı ismi ve şifreyle bağlanıp, oluşturduğumuz database'e bağlan
            //bu işlemi "newConnection" olarak tanımlıyoruz
            $newConnection = mysqli_connect($servername, $username, $password, $dbname);
          
            //newConnection isimli işlemi yaparak bağlantı kur ve kurduğun bağlantı üzerinden createUsers olarak tanımladığım işlemi yap
            //yani users tablosu oluşturuyoruz
            //bu işlemi de "tableUser" olarak tanımlıyoruz
            $tableUser = mysqli_query($newConnection,$createUsers);

            if ($tableUser){
                //eğer tableUser işlemi başarılıysa aşağıdakileri yapıyoruz

              
                //newConnection isimli işlemi yaparak bağlantı kur ve kurduğun bağlantı üzerinden createAdmin olarak tanımladığım işlemi yap
                //yani admin kullanıcısı oluşturuyoruz
                mysqli_query($newConnection,$createAdmin);

            }
        }
    }

Böylece database bağlantımızı yapmış olacağız, eğer belirttiğimiz isimde bir database yoksa da o isimde yeni bir tane oluşturmuş olacağız. Ardından index.html dosyamıza script.js dosyamızı tanımlatıyoruz. Böylece sitemize giren kullanıcılar, script.js dosyasının içindeki ajax işlemini çalıştırmış olacak ve her şeyden önce database bağlantısını kurmuş olacaklar.

hcs0p2v.png


PHP ve AJAX ile Sayfa Yenilemeden Kayıt İşlemleri Nasıl Yapılır ? (Register)

index.html dosyasında bir kayıt formu oluşturuyoruz. Oluşturduğumzu formdaki inputlara ID veriyoruz. Ben ismin girileceği input'a "firstname" id'sini, soyismin girileceği input'a "lastname" id'sini, kullanıcı adının girileceği input'a "username" id'sini, şifrenin girileceği input'a "password" id'sini ve form'a ise "formInput" id'sini tanımladım. (HTML kodlarda bootstrap kütüphanesi kullanılmıştır)
HTML:
<div class="row justify-content-center m-0 my-5" id="registerModal">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h2 class="text-center">Register</h2>
                    <hr>
                    <div class="row px-lg-5 mx-lg-3 my-2">
                        <p class="ml-4 text-success" id="registerSuccess" style="display: none;">Kullanıcı başarıyla oluşturuldu!</p>
                        <p class="ml-4 text-danger" id="registerError" style="display: none;">Kullanıcı oluşturulurken bir hata oluştu! Lütfen bilgilerinizi kontrol edip tekrar deneyin.</p>
                    </div>

                    <form id="formInput">
                        <div class="row px-lg-5 mx-lg-3 my-2">
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">İsim</span>
                                    </div>
                                    <input type="text" class="form-control" id="firstname" placeholder="isim" name="firstname" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Soyisim</span>
                                    </div>
                                    <input type="text" class="form-control" id="lastname" placeholder="soyisim" name="lastname" required>
                                </div>
                            </div>
                        </div>
                        <div class="row px-lg-5 mx-lg-3 my-2">
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Kullanıcı adı</span>
                                    </div>
                                    <input type="text" class="form-control" id="username" placeholder="kullanıcı adı" name="username" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Şifre</span>
                                    </div>
                                    <input type="password" class="form-control" id="password" placeholder="şifre" name="password" required>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3 justify-content-center">
                            <button type="submit" class="btn btn-secondary">Sign in</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Daha sonra script.js dosyama gelip aşağıdaki fonksiyonu yazıyorum.
JavaScript:
//index.html dosyamda oluşturduğum kayıt form'unu "formInput" olarak tanımlıyorum
var formInput = document.getElementById("formInput");
//ve form submit edildiğinde register isimli fonksiyon çalışsın istiyorum
//bunun için form'a submit eventListener'ı ekliyorum
formInput.addEventListener("submit", register);
function register(event) {
    //Sayfanın yenilenmesini önlemek için gelen parametrenin asıl işlevini preventDefault komutuyla geçersiz kılıyorum
    //Bu şekilde form submit edildiğinde sayfa yenilenmeyecek
    event.preventDefault();
    var form = event.target;
    //input'a girilen isim, soyisim, kullanıcı adı ve şifre değerlerini tanımlıyorum
    var fName = document.getElementById('firstname').value;
    var lName = document.getElementById('lastname').value;
    var uName = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    if (uName === " " || uName === "") {
        //eğer kullanıcı ismi boşsa form bilgilerini resetleyip hata mesajı gösteriyoruz
        form.reset();
        document.getElementById("registerError").style.display="block";
    }else{
        //değilse ajax ile database işlem isteği gönderiyorum
        $.ajax({
            //işlemin yapılacağı PHP dosyasını giriyorum
            //scripts klasörünün altındaki login.php dosyası olacak (isterseniz bunu değiştirebilirsiniz)
            url: "scripts/register.php",
            //PHP dosyasına veri göndereceğimiz için isteğimiz POST türünde oluyor
            type: "POST",
            data: {
                //tanımlamış olduğumuz username ve password bilgilerini PHP dosyasına gönderiyoruz
                fName: fName,
                lName: lName,
                uName: uName,
                pw: password         
            },
            //gelen sonucun önbelleğe kaydedilmemesi için cache:false olarak ayarlama yapıyorum
            cache: false,
            //yanıt gelince aşağıdaki fonksiyonu çalıştırmasını söylüyorum
            success: function(dataResult){
                //bu fonksiyonun parametresi gelen sonuç oluyor
                //işlem sonucunu JSON türüne çevirerek HTML'de kullanılabilir bi hale getiriyorum
                dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==200){
                    //PHP dosyasından yazdırdığım statusCode değeri eğer 200 ise aşağıdaki işlemleri yapıyorum
                    //form bilgilerini sıfırlıyorum
                    form.reset();
                    //hatalı işlem yazısını kaldırıp kullanıcıya başarılı işlem yazısını gösteriyorum
                    document.getElementById("registerError").style.display="none";
                    document.getElementById("registerSuccess").style.display="block";
                }
                else if(dataResult.statusCode==403){
                    //eğer aynı isimde bir kullanıcı varsa
                    //başarılı işlem yazısını kaldırıp kullanıcıya hatalı işlem yazısını gösteriyorum
                    document.getElementById("registerSuccess").style.display="none";
                    document.getElementById("registerError").style.display="block";
                    document.getElementById("registerError").innerHTML = "Kullanıcı oluşturulurken bir hata oluştu! Aynı isimde farklı bir kullanıcı olabilir. Lütfen bilgilerinizi kontrol edip tekrar deneyin.";
                }
            }
        });
    }
}

Son olarak scripts klasörü içerisine register.php dosyası ekleyerek PHP kodlarımızı yazıyoruz

PHP:
<?php

    //öncelikle db.php isimli dosyayı çalıştırarak database'e bağlantı kuruyoruz
    include 'db.php';

    //ajax ile fName isminde gönderilen değeri $fName olarak,
    //lName isminde gönderilen değeri $lName olarak,
    //uName isminde gönderilen değeri $uName olarak,
    //pw isminde gönderilen değeri $pw olarak tanımlıyoruz
    $fName = $_POST['fName'];
    $lName = $_POST['lName'];
    $uName = $_POST['uName'];
    $pw = $_POST['pw'];

    //tanımladığımız pw değerini md5 formatında şifreliyoruz ve şifrelenmiş değeri "hPw" olarak tanımlıyoruz
    //isterseniz bunu yapmak zorunda değilsiniz fakat şifreleme kullanmak daha iyi olacaktır
    $hPw = md5($pw);

    //tanımladığımız uName değerine sahip olan kullanıcıları seçiyoruz
    $query = "SELECT * FROM `users` WHERE `username`='$uName'";
    $check = mysqli_query($conn ,$query);


    if (mysqli_num_rows($check) > 0){
        //eğer listelenen kullanıcılar 0'dan büyükse, yani bu bilgilere sahip bir kullanıcı bulunduysa
        //sonuç olarak 403 hata kodu gönderiyoruz
        echo json_encode(array("statusCode"=>403));
    }else{
        //eğer listelenen kullanıcılar 0'a eşitse, yani bu bilgilere sahip bir kullanıcı bulunamadıysa

        //users tablosuna uName, fName, lName, pw, token değerlerinin tanımladığımız değerler olacağı bir kullanıcı ekliyoruz
        $sql = "INSERT INTO users (username, firstname, lastname, pw) VALUES ('$uName', '$fName', '$lName', '$hPw')";
        $result = mysqli_query($conn ,$sql);

        if($result){
            //Sonuç olarak durum kodunu 200 olarak ajax'a gönderiyoruz
            echo json_encode(array("statusCode"=>200));
        }
    }

hcs0p2v.png


PHP ve AJAX ile Sayfa Yenilemeden Login İşlemleri Nasıl Yapılır ?

index.html dosyasında bir login formu oluşturuyoruz. Oluşturduğumzu formdaki inputlara ID veriyoruz. Ben kullanıcı adının girileceği input'a "loginUsername" id'sini, şifrenin girileceği input'a "loginPassword" id'sini ve form'a ise "formLogin" id'sini tanımladım. (HTML kodlarda bootstrap kütüphanesi kullanılmıştır)
HTML:
<div class="row justify-content-center m-0 my-5" id="loginModal">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h2 class="text-center">Login</h2>
                    <hr>
                    <div class="row px-lg-5 mx-lg-3 my-2">
                        <p class="ml-4 text-success" id="registerSuccess" style="display: none;">Kullanıcı başarıyla oluşturuldu!</p>
                        <p class="ml-4 text-danger" id="registerError" style="display: none;">Kullanıcı oluşturulurken bir hata oluştu! Lütfen bilgilerinizi kontrol edip tekrar deneyin.</p>
                    </div>

                    <form id="formLogin">
                        <div id="loginErrorArea"></div>
                        <div class="form-group">
                            <div class="input-group px-md-3">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Kullanıcı adı</div>
                                </div>
                                <input type="text" class="form-control" id="loginUsername" name="loginUsername">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group px-md-3">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Şifre</div>
                                </div>
                                <input type="password" class="form-control" id="loginPassword" name="loginPassword">
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <button type="submit" class="btn btn-secondary">Giriş</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Ardından script.js dosyama gelip aşağıdaki fonksiyonu yazıyorum.
JavaScript:
//index.html dosyamda oluşturduğum form'u "formLogin" olarak tanımlıyorum
var formLogin = document.getElementById("formLogin");
//ve form submit edildiğinde login isimli fonksiyon çalışsın istiyorum
//bunun için form'a submit eventListener'ı ekliyorum
formLogin.addEventListener("submit", login);

function login(event){
    //Sayfanın yenilenmesini önlemek için gelen parametrenin asıl işlevini preventDefault komutuyla geçersiz kılıyorum
    //Bu şekilde form submit edildiğinde sayfa yenilenmeyecek
    event.preventDefault();
    //input'a girilen username ve password değerlerini tanımlıyorum
    var tryName = document.getElementById("loginUsername").value;
    var tryPassword = document.getElementById("loginPassword").value;
    //değilse ajax ile database işlem isteği gönderiyorum
    $.ajax({
        //işlemin yapılacağı PHP dosyasını giriyorum
        //scripts klasörünün altındaki login.php dosyası olacak (isterseniz bunu değiştirebilirsiniz)
        url: "scripts/login.php",
        //PHP dosyasına veri göndereceğimiz için isteğimiz POST türünde oluyor
        type: "POST",
        data: {
            //tanımlamış olduğumuz username ve password bilgilerini PHP dosyasına gönderiyoruz
            username: tryName,
            pw: tryPassword
        },
        //gelen sonucun önbelleğe kaydedilmemesi için cache:false olarak ayarlama yapıyorum
        cache: false,
        //yanıt gelince aşağıdaki fonksiyonu çalıştırmasını söylüyorum
        success: function(dataResult){
            //bu fonksiyonun parametresi gelen sonuç oluyor
            //işlem sonucunu JSON türüne çevirerek HTML'de kullanılabilir bi hale getiriyorum
            dataResult = JSON.parse(dataResult)
            if(dataResult.statusCode==200){
                //PHP dosyasından yazdırdığım statusCode değeri eğer 200 ise aşağıdaki işlemleri yapıyorum
                //kayıt ve login formunu kapatıyorum
                document.getElementById("registerModal").style.display = "none";
                document.getElementById("loginModal").style.display = "none";
                //yeni bir h2 tagı oluşturuyorum
                var newText = document.createElement("h2");
                //yazının ortalanması için bootstrap class'ı ekliyorum
                newText.classList.add("text-center");
                //içerisine Hoşgeldin ve kullanıcının ismini yazdırıyorum
                newText.innerHTML = "Hoşgeldin " + dataResult.username;
                //oluşturduğum h2 tagını body etiketinin içine ekliyorum
                document.body.append(newText);
            }
            else if(dataResult.statusCode==404){
                //PHP dosyasından yazdırdığım statusCode değeri eğer 404 ise aşağıdaki işlemleri yapıyorum
                document.getElementById("loginErrorArea").style.display="block";
                document.getElementById("loginErrorArea").innerHTML = `<p class="text-danger px-4">Hatalı kullanıcı adı veya şifre!</p>`;
            }
        }
    });
}

Daha sonra scripts klasörü içine login.php dosyası ekleyerek PHP kodlarımızı yazıyoruz
PHP:
<?php

    //öncelikle db.php isimli dosyayı çalıştırarak database'e bağlantı kuruyoruz
    include 'db.php';

    //ajax ile username isminde gönderilen değeri $uName olarak,
    //pw isminde gönderilen değeri $pw olarak tanımlıyoruz
    $username = $_POST['username'];
    $pw = $_POST['pw'];

    //tanımladığımız pw değerini md5 formatında şifreliyoruz ve şifrelenmiş değeri "hPw" olarak tanımlıyoruz
    //isterseniz bunu yapmak zorunda değilsiniz fakat şifreleme kullanmak daha iyi olacaktır
    $hPw = md5($pw);

    //tanımladığımız uName ve hPw değerlerine sahip olan kullanıcıları seçiyoruz
    $sql = "SELECT * FROM users WHERE BINARY username='$username' AND pw='$hPw'";
    $result = mysqli_query($conn, $sql);

  
    if (mysqli_num_rows($result) > 0){
        //eğer listelenen kullanıcılar 0'dan büyükse, yani bu bilgilere sahip bir kullanıcı bulunduysa

        //Sonuç olarak durum kodunu ve kullanıcı adını ajax'a gönderiyoruz
        echo json_encode(array("statusCode"=>200, "username"=>$username));
    }else{
        //eğer listelenen kullanıcı 0'a eşitse, yani böyle bir kullanıcı bulunamadıysa
        //sonuç olarak 404 hata kodu gönderiyoruz
        echo json_encode(array("statusCode"=>404));
    }

hcs0p2v.png


Kaynak Dosya (Demo)

Yapamayan arkadaşlarımız için bir demo hazırladım. Aşağıdaki linklerden indirebilirsiniz.

indirme linki
alternatif link

Denemek için kullanabileceğiniz
Kullanıcı Adı: Livcon
Şifre: 123asd


NOT: Konuyu öğrenebilmeniz açısından yorum satırlarını okumanızı tavsiye ederim.


Kaynak Dosya (Demo) Görselleri

j5edjpn.JPG


78vlduk.JPG


m8bjdzv.JPG


bj3i2dy.JPG


hcs0p2v.png


Bu makalemde sizlere nasıl AJAX ve PHP kullanarak işlemler yapabileceğinizi göstermeye çalıştım. Çok fazla detaya girip sizleri boğmak istemedim, eğer bu konuyla ilgili aklınıza takılan bir şey olursa konu altına sorunuzu yazabilir veya yardım merkezinde yaşadığınız sorunu paylaşabilirsiniz. Umarım yardımcı olabilmişimdir. İyi günler dilerim :)

3jivwkr.png
 
Son düzenleme:

N S

Uzman üye
19 Haz 2013
1,132
204
tebrikler sql injection zaafiyetine sahip bir sistem kodladınız :)
 

raistaron

Katılımcı Üye
8 Tem 2020
700
310
neutron
s07d252.jpg


Merhaba arkadaşlar, çoğu üniversitedeki hocalar sayfa yenilemeden database işlemleri gerçekleştirme ödevi vermeye başlamış, bu konuda internette öğrencilerin tam anlamıyla istediklerini anlatan bir Türkçe kaynak bulamadım bu yüzden böyle bir konu açarak hem öğrenci arkadaşlarımıza hem de bu konuda herhangi bir sebepten dolayı çözüm arayan diğer kişilere yardımcı olmaya karar verdim.

Bu makalede, PHP ve AJAX kullanarak sayfa yenilemeden database işlemleri nasıl yapılır ? Sayfa yenilemeden register ve login işlemleri nasıl yapılır ? XAMPP kurulumu nasıl yapılır ? PHP ve AJAX ile database bağlantısı yapılır ? bunları ele alacağız. Hazırsanız başlayalım :)



Database için Kurulumlar

Öncelikle, MySQL database kullanabilmemiz için localhost sunucu açmamız gerekiyor. Daha sonra sitemizi localhost'ta kurup, yine local'de kurulu apache sunucumuzdaki phpmyadmin ile bağlantı sağlayacağız. Bunların hepsini yapabilmemiz için de en yaygın olarak kullanılan XAMPP aracını tercih ediyoruz. O halde XAMPP'i indirmekle işe koyulalım. XAMPP'in kendi sitesine girip kurulum dosyasını indiriyoruz. indirme linki için tıklayın

qr74tfl.png


Daha sonra indirdiğimiz dosyayı yönetici olarak çalıştırıyoruz, gerekli sözleşmeyi kabul edip ileri butonuna tıkladıktan sonra, karşımıza çıkan listede ekstra olarak "MySQL" ve "phpmyadmin" component'lerini seçiyoruz. Ardından yüklemeyi windows'un kurulu olduğu diske yapıyoruz (bende windows C'de kurulu olduğu için, yükleme yolu C:\xampp).

4ls6gyf.JPG


Yükleme tamamlandıktan sonra windows arama çubuğuna "xampp htdocs" yazıyoruz ve sonuç olarak çıkan klasörü açıyoruz. Hazırlayacağımız web sitesi için burda yeni bir klasör oluşturup index.html dosyasını oluşturuyoruz veya daha önceden hazırlamış olduğumuz site dosyalarını buraya atıyoruz.

1o8e7hn.png



Windows arama çubuğuna "xampp control" yazarak sonuç olarak çıkan uygulamayı açıyoruz. Karışımıza çıkan panelde "Apache" ve "MySql" modüllerini çalıştırıyoruz.

kda0lvy.png


Artık tarayıcımıza girip link kısmına "localhost/{htdocs içerisindeki klasörünüzün ismi}" yazarsak sitemizi localhost'ta çalıştırmış olacağız. (Yukarıdaki görselde bulunan "Yeni Klasör" ismini kullandıysanız localhost/Yeni%20Klasör linkiyle sitenizi çalıştırabilirsiniz)


hcs0p2v.png


PHP ve AJAX ile Sayfa Yenilemeden Database Bağlantısı Nasıl Yapılır ?

Database bağlantısı yapmak için ilk olarak .js uzantılı bir dosya oluşturuyoruz (ben bu dosyası script.js olarak adlandıracağım). Oluşturduğumuz dosyanın içinde aşağıdaki kodları yapıştırıyoruz.
JavaScript:
//Bu kodların sayfa yüklemesi tamamlandığında direkt çalıştırılmasını istiyoruz
document.addEventListener("DOMContentLoaded", function () {
    //AJAX ile yeni bir XML HTTP isteği oluşturuyoruz
    var ajax = new XMLHttpRequest();
    //Herhangi bir veri göndermeyeceğimiz için metodumuzu GET olarak ayarlıyoruz
    var method = "GET";
    //Database bağlantısının yapılacağı PHP dosyasının yolunu yazıyoruz
    //ben script klasörü içerisindeki db.php isimli dosyada bu işlemleri yapacağım
    var url = "scripts/db.php";
    //asynchronous kısmını true yapmak
    //sunucu yanıtını beklerken diğer komut dosyalarını yürütebilmemizi sağlar
    //yanıt hazır olduğunda yanıtla ilgileniriz
    //bu işlem hem bize avantaj sağlar hem de kullanıcıya o sırada farklı işlmeler yapma fırsatı sunar
    var asynchronous = true;
    //ajax.open komutuyla tanımaladığımız ayarları belirtiyoruz.
    ajax.open(method, url, asynchronous);
    //ajax.send komutuyla server işlemini tetikliyoruz
    ajax.send();
    //ajax.onreadystatechange ile sunucu yanıtı geldiğinde yanıtı işliyoruz
    ajax.onreadystatechange = function(){
        //eğer sunucu yanıtı başarılıysa durum olarak 200 kodu döner.
        if(this.readyState == 4 && this.status == 200){
            //200 kodu döndüğünde yani işlem başarılı olduğunda bir şey yapılacaksa bu kısma yazabilirsiniz
            //şimdilik, gelin sonucu konsola yazdıralım
            console.log(this.responseText);
        }
    }
});

Daha sonra scripts isimli bir klasör oluşturup içerisine db.php isimli bir dosya oluşturuyorum. (yukarıdaki kodun yorum satırlarını okumanızı önemle tavsiye ederim) Ardından PHP dosyamın içine şu kodları yazıyorum.
PHP:
<?php

    //servername, username, password ve dbname tanımlamalarını yapıyoruz
    //localhost kullanıyorsanız aşağıdan sadece dbname kısmını değiştirin
    //public sunucu kullanıyorsanız hosting sağlayıcınızdan aldığınız bilgileri girin
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "livcon";

    //yukarıda belirtilen sunucu ismine, yine belirtilen  kullanıcı ismi ve şifreyle bağlanıp, belirtilen database ismine bağlantı yapmasını istiyoruz
    //bu işlemi de conn olarak tanımlıyoruz
    $conn = mysqli_connect($servername, $username, $password, $dbname);

    //database oluşturma işlemini connSql olarak tanımlıyoruz
    $connSql = "CREATE DATABASE $dbname";
    //users isminde bir tablo oluşturma işlemini createUsers olarak tanımlıyoruz
    //kullanıcılar username, firstname, lastname ve pw(yani password) isimli 4 değere sahip olacak
    //siz bunu kendinize göre ayarlayabilirsiniz
    $createUsers = "CREATE TABLE users (id int(11) NOT null AUTO_INCREMENT PRIMARY KEY,username text NOT null,firstname text NOT null,lastname text NOT null,pw text NOT null)";
    //admin kullanıcısı oluşturmadan önce şifresini md5 tipinde şifreliyoruz
    $adminPw = md5("123asd");
    //admin kullanıcısı oluşturma işlemini createAdmin olarak tanımlıyoruz
    $createAdmin = "INSERT INTO users (username, firstname, lastname, pw) VALUES ('Livcon', 'Livcon', 'THT', '$adminPw')";

    if (!$conn) {
        //eğer conn işlemi başarısız olursa (yani belirtilen isimdeki database'e bağlanamadıysa)
        //Böyle bir database oluşturulmamış demektir. Bu yüzden aşağıdakileri yapıyoruz

        //yukarıda belirtilen sunucu ismine, yine beliritilen kullanıcı ismi ve şifreyle bağlan, daha sonra connSql olarak tanımladığım işlemi yap
        //yani belirttiğim isimde bir database oluştur
        //bu işlemi "first" olarak tanımlıyoruz
        $first = mysqli_query(mysqli_connect($servername, $username, $password),$connSql);

        if ($first){
            //eğer first işlemi başarılıysa aşağıdakileri yapıyoruz

            //belirtilen sunucu ismine, yine belirtilen kullanıcı ismi ve şifreyle bağlanıp, oluşturduğumuz database'e bağlan
            //bu işlemi "newConnection" olarak tanımlıyoruz
            $newConnection = mysqli_connect($servername, $username, $password, $dbname);
         
            //newConnection isimli işlemi yaparak bağlantı kur ve kurduğun bağlantı üzerinden createUsers olarak tanımladığım işlemi yap
            //yani users tablosu oluşturuyoruz
            //bu işlemi de "tableUser" olarak tanımlıyoruz
            $tableUser = mysqli_query($newConnection,$createUsers);

            if ($tableUser){
                //eğer tableUser işlemi başarılıysa aşağıdakileri yapıyoruz

             
                //newConnection isimli işlemi yaparak bağlantı kur ve kurduğun bağlantı üzerinden createAdmin olarak tanımladığım işlemi yap
                //yani admin kullanıcısı oluşturuyoruz
                mysqli_query($newConnection,$createAdmin);

            }
        }
    }

Böylece database bağlantımızı yapmış olacağız, eğer belirttiğimiz isimde bir database yoksa da o isimde yeni bir tane oluşturmuş olacağız. Ardından index.html dosyamıza script.js dosyamızı tanımlatıyoruz. Böylece sitemize giren kullanıcılar, script.js dosyasının içindeki ajax işlemini çalıştırmış olacak ve her şeyden önce database bağlantısını kurmuş olacaklar.

hcs0p2v.png


PHP ve AJAX ile Sayfa Yenilemeden Kayıt İşlemleri Nasıl Yapılır ? (Register)

index.html dosyasında bir kayıt formu oluşturuyoruz. Oluşturduğumzu formdaki inputlara ID veriyoruz. Ben ismin girileceği input'a "firstname" id'sini, soyismin girileceği input'a "lastname" id'sini, kullanıcı adının girileceği input'a "username" id'sini, şifrenin girileceği input'a "password" id'sini ve form'a ise "formInput" id'sini tanımladım. (HTML kodlarda bootstrap kütüphanesi kullanılmıştır)
HTML:
<div class="row justify-content-center m-0 my-5" id="registerModal">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h2 class="text-center">Register</h2>
                    <hr>
                    <div class="row px-lg-5 mx-lg-3 my-2">
                        <p class="ml-4 text-success" id="registerSuccess" style="display: none;">Kullanıcı başarıyla oluşturuldu!</p>
                        <p class="ml-4 text-danger" id="registerError" style="display: none;">Kullanıcı oluşturulurken bir hata oluştu! Lütfen bilgilerinizi kontrol edip tekrar deneyin.</p>
                    </div>

                    <form id="formInput">
                        <div class="row px-lg-5 mx-lg-3 my-2">
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">İsim</span>
                                    </div>
                                    <input type="text" class="form-control" id="firstname" placeholder="isim" name="firstname" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Soyisim</span>
                                    </div>
                                    <input type="text" class="form-control" id="lastname" placeholder="soyisim" name="lastname" required>
                                </div>
                            </div>
                        </div>
                        <div class="row px-lg-5 mx-lg-3 my-2">
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Kullanıcı adı</span>
                                    </div>
                                    <input type="text" class="form-control" id="username" placeholder="kullanıcı adı" name="username" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <div class="input-group p-md-2">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Şifre</span>
                                    </div>
                                    <input type="password" class="form-control" id="password" placeholder="şifre" name="password" required>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3 justify-content-center">
                            <button type="submit" class="btn btn-secondary">Sign in</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Daha sonra script.js dosyama gelip aşağıdaki fonksiyonu yazıyorum.
JavaScript:
//index.html dosyamda oluşturduğum kayıt form'unu "formInput" olarak tanımlıyorum
var formInput = document.getElementById("formInput");
//ve form submit edildiğinde register isimli fonksiyon çalışsın istiyorum
//bunun için form'a submit eventListener'ı ekliyorum
formInput.addEventListener("submit", register);
function register(event) {
    //Sayfanın yenilenmesini önlemek için gelen parametrenin asıl işlevini preventDefault komutuyla geçersiz kılıyorum
    //Bu şekilde form submit edildiğinde sayfa yenilenmeyecek
    event.preventDefault();
    var form = event.target;
    //input'a girilen isim, soyisim, kullanıcı adı ve şifre değerlerini tanımlıyorum
    var fName = document.getElementById('firstname').value;
    var lName = document.getElementById('lastname').value;
    var uName = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    if (uName === " " || uName === "") {
        //eğer kullanıcı ismi boşsa form bilgilerini resetleyip hata mesajı gösteriyoruz
        form.reset();
        document.getElementById("registerError").style.display="block";
    }else{
        //değilse ajax ile database işlem isteği gönderiyorum
        $.ajax({
            //işlemin yapılacağı PHP dosyasını giriyorum
            //scripts klasörünün altındaki login.php dosyası olacak (isterseniz bunu değiştirebilirsiniz)
            url: "scripts/register.php",
            //PHP dosyasına veri göndereceğimiz için isteğimiz POST türünde oluyor
            type: "POST",
            data: {
                //tanımlamış olduğumuz username ve password bilgilerini PHP dosyasına gönderiyoruz
                fName: fName,
                lName: lName,
                uName: uName,
                pw: password        
            },
            //gelen sonucun önbelleğe kaydedilmemesi için cache:false olarak ayarlama yapıyorum
            cache: false,
            //yanıt gelince aşağıdaki fonksiyonu çalıştırmasını söylüyorum
            success: function(dataResult){
                //bu fonksiyonun parametresi gelen sonuç oluyor
                //işlem sonucunu JSON türüne çevirerek HTML'de kullanılabilir bi hale getiriyorum
                dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==200){
                    //PHP dosyasından yazdırdığım statusCode değeri eğer 200 ise aşağıdaki işlemleri yapıyorum
                    //form bilgilerini sıfırlıyorum
                    form.reset();
                    //hatalı işlem yazısını kaldırıp kullanıcıya başarılı işlem yazısını gösteriyorum
                    document.getElementById("registerError").style.display="none";
                    document.getElementById("registerSuccess").style.display="block";
                }
                else if(dataResult.statusCode==403){
                    //eğer aynı isimde bir kullanıcı varsa
                    //başarılı işlem yazısını kaldırıp kullanıcıya hatalı işlem yazısını gösteriyorum
                    document.getElementById("registerSuccess").style.display="none";
                    document.getElementById("registerError").style.display="block";
                    document.getElementById("registerError").innerHTML = "Kullanıcı oluşturulurken bir hata oluştu! Aynı isimde farklı bir kullanıcı olabilir. Lütfen bilgilerinizi kontrol edip tekrar deneyin.";
                }
            }
        });
    }
}

Son olarak scripts klasörü içerisine register.php dosyası ekleyerek PHP kodlarımızı yazıyoruz

PHP:
<?php

    //öncelikle db.php isimli dosyayı çalıştırarak database'e bağlantı kuruyoruz
    include 'db.php';

    //ajax ile fName isminde gönderilen değeri $fName olarak,
    //lName isminde gönderilen değeri $lName olarak,
    //uName isminde gönderilen değeri $uName olarak,
    //pw isminde gönderilen değeri $pw olarak tanımlıyoruz
    $fName = $_POST['fName'];
    $lName = $_POST['lName'];
    $uName = $_POST['uName'];
    $pw = $_POST['pw'];

    //tanımladığımız pw değerini md5 formatında şifreliyoruz ve şifrelenmiş değeri "hPw" olarak tanımlıyoruz
    //isterseniz bunu yapmak zorunda değilsiniz fakat şifreleme kullanmak daha iyi olacaktır
    $hPw = md5($pw);

    //tanımladığımız uName değerine sahip olan kullanıcıları seçiyoruz
    $query = "SELECT * FROM `users` WHERE `username`='$uName'";
    $check = mysqli_query($conn ,$query);


    if (mysqli_num_rows($check) > 0){
        //eğer listelenen kullanıcılar 0'dan büyükse, yani bu bilgilere sahip bir kullanıcı bulunduysa
        //sonuç olarak 403 hata kodu gönderiyoruz
        echo json_encode(array("statusCode"=>403));
    }else{
        //eğer listelenen kullanıcılar 0'a eşitse, yani bu bilgilere sahip bir kullanıcı bulunamadıysa

        //users tablosuna uName, fName, lName, pw, token değerlerinin tanımladığımız değerler olacağı bir kullanıcı ekliyoruz
        $sql = "INSERT INTO users (username, firstname, lastname, pw) VALUES ('$uName', '$fName', '$lName', '$hPw')";
        $result = mysqli_query($conn ,$sql);

        if($result){
            //Sonuç olarak durum kodunu 200 olarak ajax'a gönderiyoruz
            echo json_encode(array("statusCode"=>200));
        }
    }

hcs0p2v.png


PHP ve AJAX ile Sayfa Yenilemeden Login İşlemleri Nasıl Yapılır ?

index.html dosyasında bir login formu oluşturuyoruz. Oluşturduğumzu formdaki inputlara ID veriyoruz. Ben kullanıcı adının girileceği input'a "loginUsername" id'sini, şifrenin girileceği input'a "loginPassword" id'sini ve form'a ise "formLogin" id'sini tanımladım. (HTML kodlarda bootstrap kütüphanesi kullanılmıştır)
HTML:
<div class="row justify-content-center m-0 my-5" id="loginModal">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h2 class="text-center">Login</h2>
                    <hr>
                    <div class="row px-lg-5 mx-lg-3 my-2">
                        <p class="ml-4 text-success" id="registerSuccess" style="display: none;">Kullanıcı başarıyla oluşturuldu!</p>
                        <p class="ml-4 text-danger" id="registerError" style="display: none;">Kullanıcı oluşturulurken bir hata oluştu! Lütfen bilgilerinizi kontrol edip tekrar deneyin.</p>
                    </div>

                    <form id="formLogin">
                        <div id="loginErrorArea"></div>
                        <div class="form-group">
                            <div class="input-group px-md-3">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Kullanıcı adı</div>
                                </div>
                                <input type="text" class="form-control" id="loginUsername" name="loginUsername">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group px-md-3">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Şifre</div>
                                </div>
                                <input type="password" class="form-control" id="loginPassword" name="loginPassword">
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <button type="submit" class="btn btn-secondary">Giriş</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Ardından script.js dosyama gelip aşağıdaki fonksiyonu yazıyorum.
JavaScript:
//index.html dosyamda oluşturduğum form'u "formLogin" olarak tanımlıyorum
var formLogin = document.getElementById("formLogin");
//ve form submit edildiğinde login isimli fonksiyon çalışsın istiyorum
//bunun için form'a submit eventListener'ı ekliyorum
formLogin.addEventListener("submit", login);

function login(event){
    //Sayfanın yenilenmesini önlemek için gelen parametrenin asıl işlevini preventDefault komutuyla geçersiz kılıyorum
    //Bu şekilde form submit edildiğinde sayfa yenilenmeyecek
    event.preventDefault();
    //input'a girilen username ve password değerlerini tanımlıyorum
    var tryName = document.getElementById("loginUsername").value;
    var tryPassword = document.getElementById("loginPassword").value;
    //değilse ajax ile database işlem isteği gönderiyorum
    $.ajax({
        //işlemin yapılacağı PHP dosyasını giriyorum
        //scripts klasörünün altındaki login.php dosyası olacak (isterseniz bunu değiştirebilirsiniz)
        url: "scripts/login.php",
        //PHP dosyasına veri göndereceğimiz için isteğimiz POST türünde oluyor
        type: "POST",
        data: {
            //tanımlamış olduğumuz username ve password bilgilerini PHP dosyasına gönderiyoruz
            username: tryName,
            pw: tryPassword
        },
        //gelen sonucun önbelleğe kaydedilmemesi için cache:false olarak ayarlama yapıyorum
        cache: false,
        //yanıt gelince aşağıdaki fonksiyonu çalıştırmasını söylüyorum
        success: function(dataResult){
            //bu fonksiyonun parametresi gelen sonuç oluyor
            //işlem sonucunu JSON türüne çevirerek HTML'de kullanılabilir bi hale getiriyorum
            dataResult = JSON.parse(dataResult)
            if(dataResult.statusCode==200){
                //PHP dosyasından yazdırdığım statusCode değeri eğer 200 ise aşağıdaki işlemleri yapıyorum
                //kayıt ve login formunu kapatıyorum
                document.getElementById("registerModal").style.display = "none";
                document.getElementById("loginModal").style.display = "none";
                //yeni bir h2 tagı oluşturuyorum
                var newText = document.createElement("h2");
                //yazının ortalanması için bootstrap class'ı ekliyorum
                newText.classList.add("text-center");
                //içerisine Hoşgeldin ve kullanıcının ismini yazdırıyorum
                newText.innerHTML = "Hoşgeldin " + dataResult.username;
                //oluşturduğum h2 tagını body etiketinin içine ekliyorum
                document.body.append(newText);
            }
            else if(dataResult.statusCode==404){
                //PHP dosyasından yazdırdığım statusCode değeri eğer 404 ise aşağıdaki işlemleri yapıyorum
                document.getElementById("loginErrorArea").style.display="block";
                document.getElementById("loginErrorArea").innerHTML = `<p class="text-danger px-4">Hatalı kullanıcı adı veya şifre!</p>`;
            }
        }
    });
}

Daha sonra scripts klasörü içine login.php dosyası ekleyerek PHP kodlarımızı yazıyoruz
PHP:
<?php

    //öncelikle db.php isimli dosyayı çalıştırarak database'e bağlantı kuruyoruz
    include 'db.php';

    //ajax ile username isminde gönderilen değeri $uName olarak,
    //pw isminde gönderilen değeri $pw olarak tanımlıyoruz
    $username = $_POST['username'];
    $pw = $_POST['pw'];

    //tanımladığımız pw değerini md5 formatında şifreliyoruz ve şifrelenmiş değeri "hPw" olarak tanımlıyoruz
    //isterseniz bunu yapmak zorunda değilsiniz fakat şifreleme kullanmak daha iyi olacaktır
    $hPw = md5($pw);

    //tanımladığımız uName ve hPw değerlerine sahip olan kullanıcıları seçiyoruz
    $sql = "SELECT * FROM users WHERE BINARY username='$username' AND pw='$hPw'";
    $result = mysqli_query($conn, $sql);

 
    if (mysqli_num_rows($result) > 0){
        //eğer listelenen kullanıcılar 0'dan büyükse, yani bu bilgilere sahip bir kullanıcı bulunduysa

        //Sonuç olarak durum kodunu ve kullanıcı adını ajax'a gönderiyoruz
        echo json_encode(array("statusCode"=>200, "username"=>$username));
    }else{
        //eğer listelenen kullanıcı 0'a eşitse, yani böyle bir kullanıcı bulunamadıysa
        //sonuç olarak 404 hata kodu gönderiyoruz
        echo json_encode(array("statusCode"=>404));
    }

hcs0p2v.png


Kaynak Dosya (Demo)

Yapamayan arkadaşlarımız için bir demo hazırladım. Aşağıdaki linklerden indirebilirsiniz.

indirme linki
alternatif link

Denemek için kullanabileceğiniz
Kullanıcı Adı: Livcon
Şifre: 123asd


NOT: Konuyu öğrenebilmeniz açısından yorum satırlarını okumanızı tavsiye ederim.


Kaynak Dosya (Demo) Görselleri

j5edjpn.JPG


78vlduk.JPG


m8bjdzv.JPG


bj3i2dy.JPG


hcs0p2v.png


Bu makalemde sizlere nasıl AJAX ve PHP kullanarak işlemler yapabileceğinizi göstermeye çalıştım. Çok fazla detaya girip sizleri boğmak istemedim, eğer bu konuyla ilgili aklınıza takılan bir şey olursa konu altına sorunuzu yazabilir veya yardım merkezinde yaşadığınız sorunu paylaşabilirsiniz. Umarım yardımcı olabilmişimdir. İyi günler dilerim :)

3jivwkr.png
Eline sağlık devrem
 

livcon

Üye
21 Tem 2021
155
87
21
tebrikler sql injection zaafiyetine sahip bir sistem kodladınız :)
Merhaba,

Araştırmaların için teşekkür ediyorum :) fakat burdaki konumuz projede herhangi bir SQL açığı olup olmaması değil, PHP ve Ajax ile database işlemleri yapmak. Siz bunu daha da geliştirebilirsiniz.

Hatta gelin, birlikte JavaScript dilini kullanarak sorunu çözmeye çalışalım.

Mesela benim aklıma tüm inputların içine /, ', #, =, * gibi özel karakterlerin eklenmemesini sağlayacak bir fonksiyon yapmak geldi. Siz tabi farklı çözümler üretip daha opsiyonel ve işlevli şeyler yazabilirsiniz.

JavaScript:
//SQL açıklarıyla ilgili zaafiyeti engellemek için
//#, ', /, *, =, " gibi özel karakterlerin inputlarda yazılmasını engelleyen
//bir fonksiyon yazabiliriz.

function controlSpecialCharacters() {
    //bu fonksiyonu çalıştıran parametrenin değerini f olarak tanımlıyoruz
    var f = this.value;
    //boş bir değişken oluşturuyoruz
    var newText;
    //tanımladığımız f değişkenindeki karakterleri birbirinden ayırarak "char" olarak tanımlıyoruz
    var char = f.split('');
    //char içerisindeki her karakter için aşağıdaki sorguyu yapıyoruz
    char.forEach(function (i) {
        //eğer #, /, ', ", =, * değerlerinden herhangi birini içeriyorsa
        if (i == '#' || i == '/' ||
            i == "'" || i == "\"" ||
            i == '=' || i == '*') {
            //tanımladığımız f değişkeninin içindeki bu karakteri siliyoruz ve yeni cümleyi "newText" olarak tanımlıyoruz
            newText = f.replace(i, '');
        }
    });

    //eğer newText değeri boş değilse
    if (newText != null) {
        //bu fonksiyonu çalıştıran parametreniyi newText olarak ayarlıyoruz
        this.value = newText;
    }
}

//Daha sonra dosyamızdaki tüm inputları seçiyoruz
document.querySelectorAll("input").forEach(function (i) {
    //her birine keyup evenlistener'ı ekliyoruz
    //keyup (yani karakter girilme) durumunda yukarıda yazmış olduğumuz fonksiyon çalışacak
    i.addEventListener("keyup", controlSpecialCharacters);
});

Gördüğünüz gibi bu sayede sitedeki inputlar sürekli denetleniyor. Tabi bunu sadece JavaScript ile mi önleyebiliriz ? tabiki hayır, istersek gönderilen değişkenlerin içinde özel karakter olup olmadığını PHP tarafından da kontrol edebilirdik. Ki zaten en doğrusu PHP dosyasında bi kontrol sağlamak olur, çünkü minfication vb. işlemler ile işleri karmaşık hale getirmediğimiz sürece kötü niyetli kişiler console açıp bu fonksiyonu geçersiz kılabilirler. PHP tarafındaki kontorlü de isterseniz siz yapıp atın, yapamazsanız onu da yazabilirim tabi :)

Eline sağlık devrem
Sağ olasın :)

Teşekkür ederim :)
 

N S

Uzman üye
19 Haz 2013
1,132
204
Merhaba,

Araştırmaların için teşekkür ediyorum :) fakat burdaki konumuz projede herhangi bir SQL açığı olup olmaması değil, PHP ve Ajax ile database işlemleri yapmak. Siz bunu daha da geliştirebilirsiniz.

Hatta gelin, birlikte JavaScript dilini kullanarak sorunu çözmeye çalışalım.

Mesela benim aklıma tüm inputların içine /, ', #, =, * gibi özel karakterlerin eklenmemesini sağlayacak bir fonksiyon yapmak geldi. Siz tabi farklı çözümler üretip daha opsiyonel ve işlevli şeyler yazabilirsiniz.

JavaScript:
//SQL açıklarıyla ilgili zaafiyeti engellemek için
//#, ', /, *, =, " gibi özel karakterlerin inputlarda yazılmasını engelleyen
//bir fonksiyon yazabiliriz.

function controlSpecialCharacters() {
    //bu fonksiyonu çalıştıran parametrenin değerini f olarak tanımlıyoruz
    var f = this.value;
    //boş bir değişken oluşturuyoruz
    var newText;
    //tanımladığımız f değişkenindeki karakterleri birbirinden ayırarak "char" olarak tanımlıyoruz
    var char = f.split('');
    //char içerisindeki her karakter için aşağıdaki sorguyu yapıyoruz
    char.forEach(function (i) {
        //eğer #, /, ', ", =, * değerlerinden herhangi birini içeriyorsa
        if (i == '#' || i == '/' ||
            i == "'" || i == "\"" ||
            i == '=' || i == '*') {
            //tanımladığımız f değişkeninin içindeki bu karakteri siliyoruz ve yeni cümleyi "newText" olarak tanımlıyoruz
            newText = f.replace(i, '');
        }
    });

    //eğer newText değeri boş değilse
    if (newText != null) {
        //bu fonksiyonu çalıştıran parametreniyi newText olarak ayarlıyoruz
        this.value = newText;
    }
}

//Daha sonra dosyamızdaki tüm inputları seçiyoruz
document.querySelectorAll("input").forEach(function (i) {
    //her birine keyup evenlistener'ı ekliyoruz
    //keyup (yani karakter girilme) durumunda yukarıda yazmış olduğumuz fonksiyon çalışacak
    i.addEventListener("keyup", controlSpecialCharacters);
});

Gördüğünüz gibi bu sayede sitedeki inputlar sürekli denetleniyor. Tabi bunu sadece JavaScript ile mi önleyebiliriz ? tabiki hayır, istersek gönderilen değişkenlerin içinde özel karakter olup olmadığını PHP tarafından da kontrol edebilirdik. Ki zaten en doğrusu PHP dosyasında bi kontrol sağlamak olur, çünkü minfication vb. işlemler ile işleri karmaşık hale getirmediğimiz sürece kötü niyetli kişiler console açıp bu fonksiyonu geçersiz kılabilirler. PHP tarafındaki kontorlü de isterseniz siz yapıp atın, yapamazsanız onu da yazabilirim tabi :)
php yazmayalı çok oldu ama redbean ile bitane DAL yazarım kafam rahat eder illa querybuildera input vereceksem de js yazdığın gibi stringten char ayıklarım ama gerek yok bence bu kadar takla atmaya
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.