WEB PROGRAMLAMA IImutluyapici.com/.../2018/02/Web-Programlama-II-sunum-2.pdf · 2018-02-22 · Java Scriptle HTML elemanlarınave taglerine ulamanın diğerbir yolu da jquery dir

WEB

PROGRAMLAMA II

Öğr. Gör. M. Mutlu YAPICI

Ankara Üniversitesi

Elmadağ Meslek Yüksekokulu

Ders İzlencesiHafta Modüller/İçerik/Konular

1. Hafta Oturum yönetimi

2. Hafta Cookies kullanımı ve oturum yönetimi

3. Hafta Session kullanımı ve oturum yönetimi

4. Hafta Sayfalama ve Arama İşlemleri

5. Hafta JavaScript, JQuery ve PHP

6. Hafta AJAX ve PHP

7. Hafta AJAX ve PHP

8. Hafta ARA SINAV

9. Hafta PHP’de Nesne Yönelimli Programlamaya Giriş(347)

10. Hafta PHP de PDO

11. Hafta

12. Hafta

13. Hafta

14. Hafta


Bu Ünitede Ele Alınan Konular

PHP ve JAVASCRİPT

PHP ve JQuery

PHP ve AJAX

AJAX ile Dinamik Veritabanı İşlemleri


Ders Kazanımları

Bu bölümü Bitirdiğimizde,

PHP ve JAVASCRİPT

PHP ve JQuery

PHP ve AJAX

AJAX ile Dinamik Veritabanı İşlemleri

öğrenmiş olacaksınız.


PHP’de Java Script KullanımıPHP sunucu tarafında çalışan ve oldukça güçlü bir dildir. Ancak hepimizin bildiği

gibi web programlamada her şey sunucu tarafında gerçekleşmez. Yoğun bir

şekilde işlem gören bir de client yani istemci tarafı vardır.

Verimli bir web programlama için sucunu tarafı ile istemci tarafı hem bağımsız

hem de birlikte çalışmak zorundadır. Bu biraz karışık oldu evet aynı anda ikisi de

nasıl olacak. Bu noktada sizin programlama yetenekleriniz ortaya çıkıyor.

Öyle bir program alt yapısı kodlamalısınız ki sunucu ve istemciyi birbirinden

yalıtarak maksimum güvenliği sağlamalı. Aynı zamanda da sunucu ve istemci

tekmiş gibi birlikte çalışarak etkili bir görsellik ve kullanılabilirlik sağlayabilmeli.

İşte tam bu noktada devreye AJAX giriyor. Ajax sayesinde yukarıda söylediğimiz

yapıyı kısmen de olsa gerçekleştirme fırsatı buluyoruz.


PHP’de Java Script KullanımıPeki ama nedir bu AJAX ve gerçekten bu kadar ihtiyacımız var

mı?

Bu sorulara cevap verebilmemiz için öncelikle hali hazırda sunucu

tarafında çalışan PHP ile neleri yapamıyoruz nereler eksik kalıyor

bilmemiz gerekir.

Aslında PHP ile bir çok şeyi zaten etkili bir şekilde gerçekleştirebiliyoruz

ama bazı durumlar var ki daha etkili bir şekilde tasarlana bilecekken PHP

bize istemci tarafından ulaşılamadığı için sorun çıkartıyor.


PHP’de Java Script KullanımıBu sorunu bir örnekle açıklayalım:

Bir internet sitesine girdiğinizde sunucudan bilgisayarınıza internet

sitesine ait tüm kodlar, resimler, ses dosyaları, java script, css ve HTML

dosyaları indirilir. Bu da sunucudan sizin bilgisayarınıza yani istemciye

bir veri akışı olduğu anlamına gelir. Bu veri akışı siz sitede gezindikçe

tıkladığını her yeni sayfa ile birlikte sürekli tekrarlanır.

Aynı site içerisinde farklı sayfalara geçtiğinizde aslında karşınıza çıkan

bir çok bölüm (Header, banner, menü, footer) aynıdır ve sadece sitenin

içeriği olan küçük bir kısım değişmiştir. Ancak sadece bu küçük bölümü

görebilmeniz için her tıkladığınız bağlantıda sayfanın tamamı tekrar

tekrar bilgisayarınıza iner.

İşte tam olarak sorunda burada ortaya çıkıyor.


PHP’de Java Script KullanımıÖnceki derslerde yaptığımız Sayfalama ve Arama işlemlerinde de

fark etmişsinizdir, her arama butonuna basışımızda tüm sayfa

yeniden yüklendi, her yeni sayfaya geçişimizde aslında tüm sayfa

yeniden yüklendi.

Eğer ki elimizde sadece değişecek bölümü yükleyen bir yapı

olsaydı her tıkladığımız bağlantıda tüm sayfaları tekrar tekrar

yüklemek zorunda kalmazdık.

Aslında bize bu imkanı sunan yani istediğimizde sayfanın sadece

istediğimiz bölümünü değiştirmemizi sağlayan bir programlama

var. Bu dil Java Script dilidir.


PHP’de Java Script KullanımıJava Script ile bir internet sayfasındaki istediğimiz elemana,

istediğimiz html etiketine diğer elemanlar ve etiketlerden

bağımsız olarak ulaşabiliyoruz. Dolayısı ile istediğimi bölümü

diğer bölümlerden bağımsız şekilde güncelleyebiliyoruz.

AJAX teknolojisini anlatmadan önce Java Script ile bu işlemler

nasıl gerçekleştiriliyor, neler yapıla biliniyor ve nerelerde Java

Script tek başına yetersi bir bakalım.


PHP’de Java Script Kullanımı

JavaScript, yaygın olarak web

tarayıcılarında kullanılmakta olan dinamik bir programlama

dilidir.

JavaScript ile yazılan istemci tarafı betikler sayesinde

tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının

kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime

geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi

işlevler sağlanır.


https://tr.wikipedia.org/wiki/Web_taray%C4%B1c%C4%B1s%C4%B1

https://tr.wikipedia.org/wiki/%C4%B0stemci_taraf%C4%B1_betik


JavaScript, bir programlama dili olduğu için kendine has

yazım şekli yani syntax’ı vardır. Her hangi bir programlama

dilini bilen birisi için öğrenmesi ve adapte olması da

oldukça kolaydır.

JavaScript Nasıl Kullanılır?

JavaScript HTML kodları içerisinde <script></script>

tagları içerisinde kullanılacağı gibi harici bir .js uzantılı

dosya olarak da sayfaya sonradan çağrılabilir.



Herhangi bir web sayfası içerisinde HTML tagleri arasına

<script></script> taglerini açarak CSS de olduğu gibi Java

Script kodlarını yazabiliriz. Bir sonraki sunumdaki Java

Script kodu HTML butonuna tıkladığımızda aşağıdaki gibi

ekrana ‘Merhaba Arkadaşlar’ yazmasını sağlayacaktır.


PHP’de Java Script KullanımıBurada function kelimesi fonksiyon tanımlamak için kullanılır.

Aşağıda MerhabaDe() isimli bir fonksiyon tanımlanmıştır. Alert() java

script fonksiyonu ekrana mesaj çıkmasını sağlar.


PHP’de Java Script KullanımıPeki ama java script ile bir HTML taginin içerisine nasıl müdahale

edebiliriz. Her hangi bir text kutusunun içindeki yazıyı nasıl alabilir

yada bir div taginin içindeki yazıya nasıl ulaşıp değiştirebiliriz?

Java script ile bir HTML elemanına erişe bilmek için o elemanın id,

name yada class verisini bilmeliyiz. Bu üç yolla HTML elemanlarına

erişip sadece o elemanın içeriğini güncelleyebiliriz.




PHP’de Java Script KullanımıDocument sınıfının getElementById() fonksiyonu ile HTML tagine

ulaşıyoruz ve value özelliğini alıyoruz.


PHP’de Java Script KullanımıAynı örneği getElementsByName() ile de yapabiliriz ama dikkat edin

S takısı var isim ile ulaşacaksanız tage çoğul olarak alıp dizi şeklinde

kullanmalısınız. Bunun nedeni aynı isimde birden fazla nesne

olabilecek olmasıdır. Böylece o isimdeki tüm elemanlara aynı anda

ulaşabilirsiniz.


PHP’de Java Script KullanımıGördüğünüz gibi herhangi bir elemana document sınıfından ulaşıp her

hangi bir özelliğini alabiliyoruz. Aynı şekilde bir değerde yükleye biliriz.

Şimdi de metin kutusunun içerisine bir şey yazdıralım. Aynı örneği

getElementById() ile de yapabilrsiniz.


PHP’de Java Script KullanımıGördüğünüz gibi value gibi özelliklere kolayca erişip değiştirebiliyoruz

java scriptle. Peki ama <h1>,<font>, <div> gibi HTML taglerine nasıl

ulaşıp içeriklerini değiştirebiliriz?

Bu gibi taglere de yine Document sınıfından erişebiliriz tek bir farkla,

bu etiketlerde value gibi bir değer olmadığı için ve veriler taglerin

başlangıç ve bitişleri içerisine (<div> Merhaba </div>) yazıldığı için

innerHTML özelliği ile erişebiliyoruz.


PHP’de Java Script KullanımıAşağıdaki örnekte butona tıkladığımızda üstteki div içerisindeki veri

alınarak altta bulunan ikinci div içerisine aktarılıyor.

Görüldüğü gibi java script kullanılarak sadece sayfanın istenilen

bölümü değiştirile biliniyor. Ancak yapılan bu değişiklikteki sorun

veriler statik olarak geliyor yani veritabanından gelmiyor. İşte bu

sorunu çözebilmek için sunucuya erişen bir bölümde olması gerekir.


PHP’de Java Script KullanımıÖrneğe ait kodlar, gördüğünüz gibi elemana id’si ile ulaşıp innerHTML

ile verileri değiştirdik.


PHP’de JQuery KullanımıJava Scriptle HTML elemanlarına ve taglerine ulaşmanın diğer bir yolu

da jquery dir. Jquery bir java script kütüphanesidir ve önceki

sayfalarda yaptığımız işlemleri biraz daha etkili ve kolay bir şekilde

yapabilmemiz sağlamaktadır. Bu kütüphaneyi kullanabilmek için

öncelikle HTML sayfamızın header bölümüne yüklememiz

gerekmektedir. Yükleme linki aşağıdaki gibidir.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

JQuery sadece 1 dosyadan oluşan .js uzantılı bir dosyadır. Sürekli

güncellenen bu dosyayı JQuery nin resmi sitesinden indirebilirsiniz.

Yada yukarıdaki gibi Google’ın host ettiği dosyaları direk indirmeden

kullanabilirsiniz.


http://docs.jquery.com/Downloading_jQuery

PHP’de JQuery KullanımıŞimdi daha önce yaptığımız bir butona tıklayınca ekrana mesaj

gelmesini sağlayan java script kodlarını Jquery kullanarak tekrar

yapalım.


PHP’de JQuery KullanımıAşağıdaki kodu incelediğimizde önce Jquery kütüphanesinin

yüklendiğini görüyoruz. Daha sonra bu kütüphaneyi HTML

elemanlarına uygulaya bilmek için document sınıfının hazır olmasını

bekliyoruz bunun için sarı renkli fonksiyonu kullanıyoruz.


PHP’de JQuery KullanımıDocument sınıfı hazır olduğunda artık $(document).ready(function()

fonksiyonunun içerisine istediğimiz işlem fonksiyonunu yazabiliriz.

Aşağıdaki fonksiyon incelendiğinde butonun tıklama olayına bir

fonksiyon bağladığımızı görüyoruz. Burada butona idsiyle ulaşmak için

$("#btn1") komutunu kullanıyoruz. Dikkat edin Jquery de her erişim

$() ile başlıyor. Eğer sınıf ile ulaşmak istersek $(".btn1") , direkt olarak

tag ismiyle ulaşmak istersek te $("button") kullanıyoruz. Daha sonra

hangi olayı istersek onu nokta ile bağlayıp fonksiyonu yazıyoruz.

Burada Click olayını kullandık.


PHP’de JQuery KullanımıJQueryde sıklıkla kullanılan bazı fonksiyonlar şu şekildedir;


Fare Olayları

Fonksiyon Görevi

Click Fare ile tıklandığında gerçekleşir

Blur Bir Form elemanından ayrıldıktan sonra gerçekleşir

Change Bir Form elemanının içeriği değiştiğinde gerçekleşir

Focus Bir Form elemanı fare ile seçildiği anda gerçekleşir

HTML Elemanı Veri Ekleme/Değiştirme

Fonksiyon Görevi

append HTML etiketinin içeriğine veri ekler

before HTML etiketinin dışına öncesine ekler

after HTML etiketinin dışına sonrasına ekler

html HTML etiketinin içeriğini tamamen değiştirir yada almamızı

sağlar

PHP’de JQuery KullanımıJQueryde sıklıkla kullanılan bazı fonksiyonlar şu şekildedir;


HTML Elemanı Veri Ekleme/Değiştirme

Fonksiyon Görevi

text Yazıları istenilen yerin içeriğine ekler yada içeriği alır

val Form elemanının değerini değiştirir yada alır

attr HTML etiketinin özelliklerini (parametre) alır yada ekler

remove HTML etiketini siler

hide HTML etiketini gizler

show Gizlenen HTML etiketini gösterir

slideToggle Elemanı kaydırarak hem gizler hem de gösterir

slideUp Elemanı kaydırarak gizler

serialize Tüm form elemanlarının bilgilerini anahtar değer ikilisi olarak

alır (Getle gönderdiğimiz formda ad=‘Mutlu’&soyad=‘YAPICI’)

PHP’de JQuery KullanımıBu fonksiyonlara ait örnekler;


PHP’de JQuery KullanımıBu fonksiyonlara ait örnekler;


PHP’de JQuery KullanımıAppend, Before, After ve Html ile Dört farklı div içerisine veri ekleyelim,

Normalde divler aşağıdaki gibidir. Her dive tıklayınca veri eklenecek.

Divler belli olsun diye CSS ile kenarlıkları kırmızı yapılmıştır.


PHP’de JQuery KullanımıÖnceki örneğe ait kodlar;


PHP’de JQuery KullanımıÖnceki örneğe ait kodlar; (DEVAMI)


PHP’de JQuery Kullanımıtext, val ve Html ile üç farklı p tagi içerisine veri ekleyelim






PHP’de JQuery KullanımıAttr ile elemana parametre ekleme ve değerini alma, remove ile html

elemanını silme örneği. Şimdi Aşağıdaki Linkin href parametresini attr

önce alıp mesaj ile yazdıralım daha sonrada değiştirelim. Aynı şekilde

div1 i remove ile silelim, altına after ile bir div ekleyip o divin sınıfını da

‘aslan’ ismiyle oluşturalım.






PHP’de JQuery Kullanımıhide, show, slideToggle, slideUp ile HTML elemanı gizleme ve

gösterme işlemi. Aşağıdaki div tagini 4 adet buton ile gizleme ve

gösterme işlemi yaparak bu 4 özelliği inceleyleim.






PHP’de JQuery KullanımıJQuer ile kullanacağımız son fonksiyon serialize fonksiyonudur. Bu

fonksiyon sayesinde HTML form elemanları içerisindeki tüm bilgiyi

alabiliyoruz. Sanki GET ile tüm verileri göndermiş gibi bir formatta

almamızı sağlıyor. Aşağıdaki gibi bir formdan verileri serialize ile

alalım.




PHP ve AJAXBuraya kadar php içerisinde java script ve Jquery kullanımının temel

işlemlerini ve mantığını gördük. Görüldüğü üzere biz java script ile

sayfanın tamamını güncellemeden istediğimiz HTML tagine yada

alanına müdahale edebiliyor ve değiştirebiliyoruz. Ancak hala bu işlemi

sunucu ile etkileşimli halde yapamıyoruz. Bunun için de AJAX

teknolojisini kullanacağız.

Çalışma Mantığı kısaca şu şekilde, java Script kodu ile istemci

tarafındaki isteği alıp ajax teknolojisinin yardımı ile sunucudaki bir PHP

sayfasına göndereceğiz ve oradan gelen sonucu yani cevabı alıp

tekrar java script ile sayfadaki HTML taglerine yazdıracağız. Böylece

sayfanın tamamını yenilemeden sunucudan gelen verileri sayfaya

eklemiş olacağız.


PHP ve AJAX

Öncelikle AJAX nedir? Kısaca bahsedelim.

Asynchronous JavaScript and XML sözcüklerinin kısaltması olan Ajax,

etkileşimli (interaktif) web uygulamaları yaratmak için kullanılan

bir web programlama tekniğidir.

Temel amacı arka planda sunucuyla ufak miktarda veri değişimi

sayesinde sayfayı daha hızlı güncelleyebilen web sayfaları yapmak,

dolayısıyla kullanıcının istediği her anda bütün web sayfasını

güncellemek derdinden kurtulmaktır. Bu da web sayfasının

etkileşimini, hızını ve kullanılabilirliğini artırmak demektir.


https://tr.wikipedia.org/wiki/Asynchronous

https://tr.wikipedia.org/wiki/JavaScript

https://tr.wikipedia.org/wiki/XML

https://tr.wikipedia.org/w/index.php?title=Web_uygulamalar%C4%B1&action=edit&redlink=1

https://tr.wikipedia.org/w/index.php?title=Web_programlama&action=edit&redlink=1

PHP ve AJAX

Aslında ajax HTML / CSS/ DOM / JavaScript XML /

XML/HttpRequest gibi birçok bileşenin birleştirilmesiyle geliştirilmiş bir

teknolojidir. Bir programlama dili değildir.

Kullanımı için iki farklı yol bulunmaktadır.

1) Java Script ile kendi ajax nesnemizi yaratıp kontrol etmek suretiyle

2) JQuery kütüphanesinde bizim için yaratılmış ajaz sınıfını

kullanmak suretiyle.

İki yöntemi de kullanarak AJAX teknolojisini kullanabiliriz. Biz de ikisine

ait örnekleri inceleyeceğiz öncelikle 1. yöntemle başlayalım.


AJAX Nasıl Çalışır?AJAX çalışabilmek için sunucu ile istemci tarafındaki işlemleri sürekli

takip eden ve gerçekleştiren bir XMLhttpRequest nesnesine ihtiyaç

duyar.


PHP ve AJAX

Peki ama nedir bu XMLHttpRequest ?

XMLHttpRequest (XHR), aslında JavaScript ile

sunulmuş bir uygulama arayüzüdür.

Web sitesinin eş zamanlı olarak arka planda çalışan

olaylarını takip eder. XML CSS ve JavaScript ile

sonucun anında görülmesini sağlar.

XMLHttpRequest, istemci tarafında çalışır. Birden fazla

asenkron Web sayfasına postback ve yenileme

yapmadan istekte bulunabilir ve gelen cevapları istekte

bulunanlara iletir.


https://tr.wikipedia.org/wiki/JavaScript

https://tr.wikipedia.org/wiki/Web_sitesi

https://tr.wikipedia.org/wiki/XML

https://tr.wikipedia.org/wiki/CSS

https://tr.wikipedia.org/wiki/%C4%B0stemci

PHP ve AJAX

Madem AJAX için ilk olarak bu nesneyi yaratacağız,

XMLHttpRequest nesnesi nasıl yaratılır bakalım.

Bu nesne tarayıcıdan tarayıcıya maalesef farklı şekillerde

oluşturula biliniyor bu sebeple her tarayıcı için kontrol

yaparak nesneyi oluşturmamız gerekiyor.


PHP ve AJAX<script language = "javascript" type = "text/javascript">

//Tarayıcılara Göre Kontrollü Nesne Oluşturma

function ajaxNesnesiOlustur(){

var HttpReq; //Oluşturduğumuz nesneyi bu değişkene yükleyeceğiz!

try { // Opera 8.0+, Firefox, Safari için

HttpReq = new XMLHttpRequest();

}catch (e) { try { // Internet Explorer İçin

HttpReq = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e) { try{ // Internet Explorer İçin

HttpReq = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){

// Hala nesne oluşmuyorsa desteklemiyordur

alert("Tarayıcınız AJAX HttpRequest Nesnesini Desteklemiyor");

}

}

}

return HttpReq;

}

</script>


PHP ve AJAX

XMLHttpRequest nesnesi oluşturacak bir fonksiyon

yazdık, şimdi sırada bu nesneyi kullanarak sunucuya

sorgu göndermek ve sonuçlarını almak gerekiyor.

Bunu yapabilmemiz için öncelikle XMLHttpRequest

nesnesinin hangi özellikleri ve hangi olayları var

öğrenmeliyiz ve ona göre bir fonksiyon yazmalıyız.


PHP ve AJAXXMLHttpRequest nesnesi tanımlamaları:

open(“yöntem”, “adres”, “eşzamanlılık”, “kullanıcı adı”, “şifre”)

– Sorgu gönderilmeden önce, sorgunun gönderileceği adresi, gönderi

metodunu ve diğer seçime bağlı nitelikleri belirler.

Yani sunucuda bizim işlemleri yaptıracağımız sayfayı ve formdan

aldığımız verilerin hangi metod ile gideceğini belirlememizi sağlar

setRequestHeader(“etiket”, “değer”) – Gönderilen sorguya bir

etiket/değer başlığını iliştirir.

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-

urlencoded; charset=utf-8");

send(“içerik”) – Sorguyu gönderir. Eğer metod POST ise

parametreler içine yazılır GET ise içine null yazılır.

abort() – Geçerli isteği iptal eder.


PHP ve AJAXXMLHttpRequest nesnesi özellikleri:

onreadystatechange – Durum değişikliğini kontrol eder.

Bir fonksiyona bağlantı için kullanılır.

readState – Tam sayı değerleri durum bilgisini belirtir:

readyState özelliği 1,2,3,4 gibi 4 değer alır 4 oldugunda

gönderdiğimiz sorgu almamız için hazır demektir

0 = uninitialized (başlatılmadı)

1 = loading (yükleniyor)

2 = loaded (yüklendi)

3 = interactive (etkileşimli)

4 = complete (tamamlandı)


PHP ve AJAXXMLHttpRequest nesnesi özellikleri:

responseText – Veriyi “string” biçiminde yollar. (HTML

tagi içine yazılacak ve sunucudan gelen sonuçlardır

bunlar.)

responseXML – Veriyi XML olarak yollar. (HTML tagi

içine yazılacak ve sunucudan gelen sonuçlardır bunlar.)

status – Sunucunun durumunun sayısal değerini belirtir:

404: Not found (Bulunamadı)

200: OK (Tamam)

statusText – Durumla gelen yazı değerini belirtir.


PHP ve AJAXŞimdi de bu XMLHttpRequest nesnesini kullanarak,

sunucudaki bir PHP sayfasına sorgu gönderelim. Bunun

için open(“yöntem”, “adres”) ile verileri göndereceğimiz

metodu ve sayfa adresini tanımlayıp,

setRequestHeader(“etiket”, “değer”) ile xmlHttp.setRequestHeader("Content-Type","application/x-

www-form-urlencoded; charset=utf-8"); header bilgilerini

göndereceğiz daha sonrada send(“içerik”) ile verileri

göndereceğiz.


PHP ve AJAX


PHP ve AJAXSon olarak ta sunucudan gelen verileri alıp sayfamızda

göstereceğiz.

Bunun için öncelikle XMLHttpRequest nesnemize ait

durumu dinlemeli ve duruma göre işlem yapmalıyız. Bunun

için XMLHttpRequest nesnemizin durumu değiştiğinde

gerçekleşecek bir fonksiyona ihtiyacımız var. Bu sebeple

nesnemizin durum değişikliğini bildiren olayına foksiyon

yazıp, durumun tamamlanıp tamamlanmadığına yani

readystate in 4 olup olmadığına bakalım.

Daha sonra da nesnenin status özelliğine bakalım

biliyorsunuz status 200 ise işlem tamam 404 ise sayfa

bulunamadı demekti.


PHP ve AJAXBir önceki kodda bulunan AJAXkullan() isimli fonksiyon

içine devamına yazacağız.


PHP ve AJAXŞimdi aşağıdaki ara yüzde butona tıkladığımızda AJAX

fonksiyonumuzun çalışarak HTML div tagimizin içeriğini

değiştirdiğini göreceksiniz.

Tabi ki verilerimizi gönderdiğimiz ajaxicinPHP.php sayfası

olmadığı için sonuç olarak nesnemizin status değeri 404

yani sayfa bulunamadı olarak döndi ve ekranda hata

mesajını görüyoruz.


PHP ve AJAXŞimdi ajaxicinPHP.php sayfasını oluşturup kodlarımızı

tekrar deneyelim.

ajaxicinPHP.php sayfasının içerisine yazacağımız herşey

aslında sunucuda işlenip ekrana yazdırılacak değerleri

oluşturacaktır. Örnek olarak sayfaya POSt ile

gönderdiğimiz ad ve soyad bilgisini alıp bunları bir

paragraf tagi içerisinde birleştirip CSS ile biçimlendirerek

gönderen kodları yazalım.


PHP ve AJAXajaxicinPHP.php sayfasına ait kodlar.


PHP ve AJAXBu şekilde sunucu tarafında yapacağınız tüm işlemlere ait

kodları AJAX ile ulaşacağınız PHP sayfasında

yazmalısınız. Daha sonrada istemci tarafında AJAX

nesnesi ile bu dosyaya istek gönderip sonuçları alarak

sayfamızın istenen bölümünde java script sayasinde

gösterebiliriz.

Bu aşamada kodlar biraz daha geliştirilip HttpRequest

nesnesine ait status değerleri için gereken durumlar

yazılabilinir.


PHP ve AJAXBuraya kadar AJAX işlemlerini birinci yol olan Java Script

ile yaptık. Şimdi de JQuery kütüphanesini kullanarak aynı

işlemleri yapmayı deneyelim.

Jquery kütüphanesinde işlemler hazır fonksiyonlar halinde

sunulduğu için biraz daha basitleştirilmiştir. Ama arka

planda temelde aynı işlemler yapılmaktadır. Jquery de

ajax sınıfına ait oldukça fazla parametre mevcuttur ancak

biz temel birkaç tanesini göreceğiz.


PHP ve AJAXÖncelikle tabiki Jqueryi kullanabilmek için kütüphaneyi yüklemeliyiz.

Daha sonra ajax sınıfına ulaşabilmek için $.ajax({…..}) kodunu

kullanıyoruz. Ve bu koda ait parametre değerlerini giriyoruz.

$.ajax({

type: "POST", /// Verilerin Gönderileceği Metod Tipi

url: "ajax.php", /// Verilerin Gönderileceği sayfanın adı

data: {ad:‘Mutlu’,sad:‘YAPICI’}, /// Veriler

dataType: "HTML", /// Gelen Sonuç Verileri (Text mi HTML mi)

//// Veri gönderilmeden önce gerçekleşecek işlemler fonksiyonu

beforeSend: function(){ $(‘#div’).HTML(‘<img src=‘load.gif’>’) },

//// Sonuçlanınca gerçekleşecek işlemler fonksiyonu

success: function(cvp){ $(‘#div’).HTML(cvp) },

//// Hata Oluştuğunda gerçekleşecek işlemler fonksiyonu

error: function(){ alert(‘Hata Meydana Geldi’) },

});


PHP ve AJAXÖnceki Örneğe ait JQuery AJAX kodları


KAYNAKLAR İnternet ortamı

PHP ve AJAX Haydar TUNA

A’dan Z’ye PHP Rıza ÇELİK


Documents

WEB PROGRAMLAMA IImutluyapici.com/.../2018/02/Web-Programlama-II-sunum-2.pdf · 2018-02-22 · Java Scriptle HTML elemanlarınave taglerine ulamanın diğerbir yolu da jquery dir