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
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
).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.
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.
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)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.
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)
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));
}
}
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));
}
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
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
Son düzenleme: