• Forum vBulletin altyapısından Xenforo altyapısına geçirildi, bu sebeple eski şifreleriniz ile foruma giriş yapamayacaksınız, parolamı unuttum adımından mailiniz ile şifre sıfırlayarak giriş yapabilirsiniz.

    Üyeliklerinde geçerli bir mail adresi olmadığı için sıfırlama yapamayacak kullanıcılar forum kullanıcı adlarını ve yeni şifrelerini yazarak info@maxigame.org adresine şifre sıfırlamak istediklerine dair bir mail göndersinler şifrelerini sıfırlayıp mail adreslerini güncelleyeceğiz. Şifreniz sıfırlandıktan sonra foruma giriş yapıp tekrar istediğiniz gibi değiştirebilirsiniz.

JQuery ile Ajax Çalışması

SaintJean

Üye
Aktiflik
K.Tarihi
10 Nis 2011
Mesajlar
4
Puanı
2
Konum
Eyüp Sultan
[BILGI]
Bilindiği üzere kullanıcı web sayfasında veritabanına kayıt yaparken sayfa yenilenmektedir.Bu da görsel olarak pek hoş durmuyor.İşte Ajax bizlere , bu yenilemeyi kaldırıp görsel açıdan daha uygun bir kayıt ekleme olanağı sağlıyor.

[/BILGI]JQuery ile bu işlem gerçekten çok basit. Başlayalım ;

İlk olarak veritabanımızı oluşturalım...
Ben WampServer kullanıyorum ve PhpMyAdmin de işlemlerimi gerçekleştiriyorum.Aşağıdaki adımı izleyelim.
8wzrg.jpg


8wu06.jpg

Tabiki "Karşılaştırma" kutucuğunda utf8_turkish_ci yi seçmenizde fayda var.(Türkçe karakterleri için.)
Şimdi "Uye" veritabanımızı seçelim ve "SQL" sekmesine girelim. Bu kodları oraya yapıştırın.
Kod:
-- phpMyAdmin SQL Dump
-- version 3.4.10.1
-- http://www.phpmyadmin.net
--
-- Anamakine: localhost
-- Üretim Zamanı: 28 Haz 2012, 15:09:15
-- Sunucu sürümü: 5.5.20
-- PHP Sürümü: 5.3.10

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Veritabanı: `uye`
--

-- --------------------------------------------------------

--
-- Tablo için tablo yapısı `uyeler`
--

CREATE TABLE IF NOT EXISTS `uyeler` (
  `Ad` varchar(20) COLLATE utf8_turkish_ci NOT NULL,
  `Sifre` varchar(18) COLLATE utf8_turkish_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_turkish_ci;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
"Yapı" Sekmesinde tabloların oluşturulmuş hali bu şekilde olmalıdır.
8wugr.jpg

Tablomuzu da oluşturduk.Şimdi sıra asıl kodlara geldi.

#KayitSayfasi.html oluşturup içine bunları yapıştırıyoruz:
HTML:
<html><head><title>
..::Kayıt Sayfasına Hoşgeldiniz::..
</title>
<style>

#gonder{width:80px;height:20px;background:red;color;black;cursor:pointer;}
#gonder:hover{background:blue;color;white;}

</style>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Ajax.js"></script>


</head><body>



<div align="center"><form id="ajaxform">
İsim Girin: <input type="textbox" name="isim" /><br>
Şifre Girin:<input type="password" name="sifre" /><br>
<div align="center" id="gonder">Kayit</div>
</form></div>

<div id='sonuc'></div>


</body></html>
Bu sayfa formumuzun bulunduğu sayfa olacak ve asıl sayfamız budur.

#Ajax.js isimli bir .js dosyası oluşturalım ve içine bu kodları yapıştıralım:
Kod:
$(function(){
$("#gonder").click(function(){ //Gönder adlı div'e tıklandığında...
$.ajax({ // Ajax başlangıç kodumuz.
type: 'POST', // Gönderme metodumuz.
url: 'kayit.php', // Hangi sayfaya bilgileri taşıyacağız.
data: $('#ajaxform').serialize(), // id si ajaxform olan formun bilgilerini post edilebilecek hale getiren koddur.
success: function(mesaj){ // Ajax başaılı olursa bunları yap...

$("#sonuc").html(mesaj); // id si sonuc olan div'e kayit.php den gelen mesajı yaz.

}});
});
});


#Php sayfamızın ismi de kayit.php dir.Bu sayfayı oluşturduktan sonra bu kodları yapıştıralım:
PHP:
<?php

$isim=$_POST['isim'];
$sifre=$_POST['sifre']; // Verilerimizi aldık...


$baglanti=mysql_connect("localhost","root","");
mysql_select_db("uye",$baglanti); // Veritabanı bağlantılarını kurduk...


$kaydet=mysql_query("INSERT INTO `uyeler`(`Ad`, `Sifre`) VALUES ('$isim','$sifre')");//Kaydımızı yapıyoruz.

if($kaydet){
echo "$isim kaydiniz gerceklestirildi.";// Kayıt gerçekleştiyse mesaj
}ELSE{
echo "$isim kaydiniz gerceklestirilemedi."; // Kayıt gerçekleşmediyse mesaj
}
 mysql_close($baglanti); // Bağlantıyı kapattık.
?>

Herşey tamam. Şimdi de deneyelim.
8wyps.jpg


[ACIKLAMA]Bu kodları notepad++ programında yazdım. Nereye yazacağım diyen arkadaşlar , programı indirip kurun.
Kayıt sayfası görsel açıdan oldukça fakir. Fakat amaç öğretmek olduğundan fazla görselle uğraşmadım. Umarım beğenip birşeyler öğrenmişsinizdir.[/ACIKLAMA]
 
Son düzenleme:
Jquery başlayalı birkaç hafta oldu veritabanı işlemlerinede bugün yarın bakmayı düşünüyordum. Bu konu iyi oldu :D
 
JQuery çok kullanışlı ve anlaşılır bir yapı. Takıldığınız yer olursa ben her zaman burdayım.
 
Geri
Üst