index.html:<\/strong><\/p>\n\r\n<!--\r\n * @author Ulvi ERCAN ulviercan.com - destek@ulviercan.com\r\n * @copyright L\u00fctfen kaynak g\u00f6stererek yay\u0131nlay\u0131n\u0131z\r\n-->\r\n\r\n<!doctype html>\r\n\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8" \/>\r\n <link rel="stylesheet" href="https:\/\/code.jquery.com\/ui\/1.9.2\/themes\/base\/jquery-ui.css" \/>\r\n <script src="https:\/\/code.jquery.com\/jquery-1.8.3.js"><\/script>\r\n <script src="https:\/\/code.jquery.com\/ui\/1.9.2\/jquery-ui.js"><\/script>\r\n\r\n<style type="text\/css">\r\n<!--\r\n body{\r\n font-family: Arial;\r\n font-size: 11px;\r\n color: #616367;\r\n }\r\n\r\n h2{\r\n margin: 10px;\r\n padding:0;\r\n }\r\n\r\n #main{\r\n margin: 0 auto;\r\n width: 1084px;\r\n }\r\n\r\n\t#container{\r\n\t float: left;\r\n\t margin: 20px;\r\n border: 1px dashed #ccc;\r\n width: 500px;\r\n\t}\r\n\r\n .container_ic{\r\n margin: 5px;\r\n padding: 10px;\r\n background-color: #e9e9e9;\r\n }\r\n\r\n\t#gonderilenVeriler{\r\n\t float: right;\r\n\t margin: 20px;\r\n border: 1px dashed #ccc;\r\n width: 500px;\r\n clear:right\r\n\t}\r\n\r\n .gonderilenVeriler_ic{\r\n margin: 5px;\r\n padding: 10px;\r\n background-color: #e9e9e9;\r\n }\r\n\r\n\t#donenSonuclar{\r\n\t margin: 20px;\r\n border: 1px dashed #ccc;\r\n width: 500px;\r\n clear: left;\r\n\t}\r\n\r\n .donenSonuclar_ic{\r\n margin: 5px;\r\n padding: 10px;\r\n background-color: #e9e9e9;\r\n }\r\n\r\n .satir{\r\n height: 26px;\r\n clear: both;\r\n }\r\n\r\n .sutun{\r\n float: left;\r\n width: 100px;\r\n }\r\n\r\n .sutun2{\r\n float: left;\r\n width: 170px;\r\n }\r\n\r\n .durum{\r\n color: red;\r\n font-weight: bold;\r\n line-height: 25px;\r\n }\r\n\r\n .clear{\r\n clear: both;\r\n }\r\n-->\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id="main">\r\n <form id="kayitFormu">\r\n <div id="container">\r\n <h2>Kay\u0131t Formu<\/h2>\r\n <div class="container_ic">\r\n <div class="satir">\r\n <div class="sutun">Ad\u0131n\u0131z:<\/div>\r\n <div class="sutun2"><input type="text" name="ad" id="ad" \/><\/div>\r\n <div class="durum" id="ad_durum"><\/div>\r\n <\/div>\r\n <div class="satir">\r\n <div class="sutun">Soyad\u0131n\u0131z:<\/div>\r\n <div class="sutun2"><input type="text" name="soyad" id="soyad" \/><\/div>\r\n <div class="durum" id="soyad_durum"><\/div>\r\n <\/div>\r\n <div class="satir">\r\n <div class="sutun">Cinsiyet:<\/div>\r\n <div class="sutun2">\r\n <label><input type="radio" name="cinsiyet" value="Erkek" \/> Erkek<\/label>\r\n <label><input type="radio" name="cinsiyet" value="Kad\u0131n" \/> Kad\u0131n<\/label>\r\n <\/div>\r\n <div class="durum" id="cinsiyet_durum"><\/div>\r\n <\/div>\r\n <div class="satir">\r\n <div class="sutun">Bizi nas\u0131l buldunuz:<\/div>\r\n <div class="sutun2">\r\n <label><input type="checkbox" name="nasil[]" value="\u0130nternet" \/> \u0130nternet<\/label>\r\n <label><input type="checkbox" name="nasil[]" value="Sms" \/> Sms<\/label>\r\n <label><input type="checkbox" name="nasil[]" value="Bas\u0131n" \/> Bas\u0131n<\/label>\r\n <\/div>\r\n <div class="durum" id="nasil_durum"><\/div>\r\n <\/div>\r\n <div class="satir" style="height: 73px;">\r\n <div class="sutun">Sevdi\u011finiz Cihazlar:<\/div>\r\n <div class="sutun2">\r\n <select multiple="multiple" name="sevdiginiz_cihazlar[]" id="sevdiginiz_cihazlar">\r\n <option value="GalaxySIII">Galaxy S III<\/option>\r\n <option value="iPhone5">iPhone 5<\/option>\r\n <option value="SonyXperia">Sony Xperia<\/option>\r\n <option value="Nokia">Nokia<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class="durum" id="sevdiginiz_durum"><\/div>\r\n <\/div>\r\n <div class="satir">\r\n <div class="sutun"> <\/div>\r\n <div class="sutun2"><input type="submit" name="gonder" id="gonder" value="Kaydet" \/><\/div>\r\n <div id="donenVeri"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n\r\n <div id="gonderilenVeriler">\r\n <h2>G\u00f6nderilen Veriler<\/h2>\r\n <div class="gonderilenVeriler_ic"><\/div>\r\n <\/div>\r\n\r\n <div id="donenSonuclar">\r\n <h2>D\u00f6nen Sonu\u00e7lar<\/h2>\r\n <div class="donenSonuclar_ic"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script type="text\/javascript">\r\n<!--\r\n $("#kayitFormu").submit(function() {\r\n\r\n $.ajax({\r\n url: "ajax.php",\r\n dataType: "json",\r\n type: "post",\r\n data: $("#kayitFormu").serialize(), \/\/ Form verisini query string haline d\u00f6n\u00fc\u015ft\u00fcrd\u00fck\r\n success: function(donenVeri) {\r\n $(".durum").empty();\r\n\r\n if( donenVeri.hata ){\r\n $.each(donenVeri.hataliAlanlar, function(i, val) {\r\n $("#" + val.id + "_durum").html(val.hataMesaji).hide().fadeIn("slow");\r\n });\r\n }\r\n },\r\n error: function(jqXHR, textStatus, errorThrown) {\r\n console.log(textStatus, errorThrown); \/\/ Konsola hatay\u0131 bast\u0131r\u0131yoruz\r\n }\r\n });\r\n\r\n \/\/ G\u00f6nderilen verileri g\u00f6rmek i\u00e7in ikinci ajax iste\u011fimizi yap\u0131yoruz\r\n $.ajax({\r\n url: "ajax.php",\r\n dataType: "html",\r\n type: "post",\r\n data: "gonderilenVeriyiGor=true&" + $("#kayitFormu").serialize(), \/\/ Form verisini query string haline d\u00f6n\u00fc\u015ft\u00fcrd\u00fck\r\n success: function(donenVeri) {\r\n $("#gonderilenVeriler .gonderilenVeriler_ic").html(donenVeri)\r\n }\r\n });\r\n\r\n \/\/ D\u00f6nen sonucu html format\u0131nda g\u00f6rmek i\u00e7in \u00fc\u00e7\u00fcnc\u00fc ajax iste\u011fimizi yap\u0131yoruz\r\n $.ajax({\r\n url: "ajax.php",\r\n dataType: "html",\r\n type: "post",\r\n data: $("#kayitFormu").serialize(), \/\/ Form verisini query string haline d\u00f6n\u00fc\u015ft\u00fcrd\u00fck\r\n success: function(donenVeri) {\r\n $("#donenSonuclar .donenSonuclar_ic").html(donenVeri)\r\n }\r\n });\r\n return false;\r\n });\r\n-->\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBu sistem bir b\u00fct\u00fcn olarak \u00e7al\u0131\u015fmaktad\u0131r. HTML kodlar\u0131n\u0131 incelerseniz, server’dan d\u00f6necek olan cevab\u0131 input’a has bir \u015fekilde belirtmek i\u00e7in her bir input’un bir durum kutusu var. Yani ad k\u0131sm\u0131nda bir hata varsa, ad input’unun yan\u0131na hatay\u0131 detayl\u0131 bir \u015fekilde “ad giriniz” veya “ad\u0131n\u0131z en az iki karakter uzunlu\u011funda olmal\u0131” \u015feklinde belirtiyoruz. \u0130lk iste\u011fi a\u00e7\u0131klamak gerekirse, Ajax ile g\u00f6nderilen veriyi i\u015fleyecek olan dosya “ajax.php” olarak belirlendi. D\u00f6nen verinin format\u0131n\u0131n ise JSON olaca\u011f\u0131n\u0131 s\u00f6yledik. G\u00f6nderim tipimiz POST. D\u00f6nen verinin i\u00e7erisinde hata ikilik de\u011feri var. E\u011fer bu de\u011fer true ise, formda bir hata var ve ona g\u00f6re i\u015flemleri yap\u0131yoruz. Bu i\u015flemler d\u00f6nen hatalar\u0131 ekrana animasyonlu bir \u015fekilde bast\u0131rmak ve e\u011fer form ikinci defa g\u00f6nderiliyorsa \u00f6nceki g\u00f6nderimden kalan hatalar\u0131 ekrandan temizlemektir.<\/p>\n
Di\u011fer iki Ajax iste\u011fi ise sizlere, g\u00f6nderilen veriyi ve d\u00f6nen cevab\u0131 g\u00f6stermek ama\u00e7l\u0131 kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\n
ajax.php:<\/strong><\/p>\n\r\n<?php\r\n\r\n\/**\r\n * @author Ulvi ERCAN ulviercan.com - destek@ulviercan.com\r\n * @copyright L\u00fctfen kaynak g\u00f6stererek yay\u0131nlay\u0131n\u0131z\r\n *\/\r\n\r\n if($_POST["gonderilenVeriyiGor"]){\r\n echo "<pre>";\r\n var_dump($_POST);\r\n echo "<\/pre>";\r\n exit;\r\n }\r\n\r\n $sonuc = array("hata" => false);\r\n\r\n if($_POST["ad"]==""){\r\n $sonuc["hata"] = true;\r\n $sonuc["hataliAlanlar"][] = array("id" => "ad", "hataMesaji" => "Ad Bo\u015f Olamaz");\r\n\r\n }elseif(strlen($_POST["ad"]) < 2){\r\n $sonuc["hata"] = true;\r\n $sonuc["hataliAlanlar"][] = array("id" => "ad", "hataMesaji" => "Ad alan\u0131 en az 2 karakter olmal\u0131");\r\n }\r\n\r\n if($_POST["soyad"]==""){\r\n $sonuc["hata"] = true;\r\n $sonuc["hataliAlanlar"][] = array("id" => "soyad", "hataMesaji" => "Soyad Bo\u015f Olamaz");\r\n\r\n }elseif(strlen($_POST["soyad"]) < 2){\r\n $sonuc["hata"] = true;\r\n $sonuc["hataliAlanlar"][] = array("id" => "soyad", "hataMesaji" => "Soyad alan\u0131 en az 2 karakter olmal\u0131");\r\n\r\n }\r\n\r\n if(empty($_POST["cinsiyet"])){\r\n $sonuc["hata"] = true;\r\n $sonuc["hataliAlanlar"][] = array("id" => "cinsiyet", "hataMesaji" => "L\u00fctfen cinsiyetinizi se\u00e7in");\r\n\r\n }\r\n\r\n if(count($_POST["nasil"]) < 1){\r\n $sonuc["hata"] = true;\r\n $sonuc["hataliAlanlar"][] = array("id" => "nasil", "hataMesaji" => "En az bir kutu i\u015faretlemelisiniz");\r\n }\r\n\r\n echo json_encode($sonuc);\r\n?>\r\n<\/pre>\nKodun en ba\u015f\u0131nda kulland\u0131\u011f\u0131 if deyimi, 2. iste\u011fimiz olan g\u00f6nderilen veriyi g\u00f6rmek ama\u00e7l\u0131 olarak kullan\u0131lm\u0131\u015ft\u0131r. Bu istek esnas\u0131nda exit komutu sayesinde sadece if blo\u011fu i\u00e7inde yer alan kodlar \u00e7al\u0131\u015fmaktad\u0131r. Bu k\u0131sm\u0131n yapaca\u011f\u0131 i\u015f ise $_POST dizisini ekrana d\u00f6kmek olacakt\u0131r.<\/p>\n
Kodun kalan k\u0131sm\u0131nda ise her bir alan i\u00e7in gerekli kontrolleri yapt\u0131k ve bu kontrollerin sonu\u00e7lar\u0131n\u0131 belirli bir yap\u0131ya sahip olan dizimize att\u0131k. Daha sonra bu diziyi JSON format\u0131na \u00e7evirerek ekrana bast\u0131rd\u0131k. Dizinin yap\u0131s\u0131 \u015fu \u015fekildedir:<\/p>\n
\r\n\r\narray(2) {\r\n ["hata"]=>\r\n bool(true)\r\n ["hataliAlanlar"]=>\r\n array(4) {\r\n [0]=>\r\n array(2) {\r\n ["id"]=>\r\n string(2) "ad"\r\n ["hataMesaji"]=>\r\n string(14) "Ad Bo\u015f Olamaz"\r\n }\r\n [1]=>\r\n array(2) {\r\n ["id"]=>\r\n string(5) "soyad"\r\n ["hataMesaji"]=>\r\n string(17) "Soyad Bo\u015f Olamaz"\r\n }\r\n [2]=>\r\n array(2) {\r\n ["id"]=>\r\n string(8) "cinsiyet"\r\n ["hataMesaji"]=>\r\n string(28) "L\u00fctfen cinsiyetinizi se\u00e7in"\r\n }\r\n [3]=>\r\n array(2) {\r\n ["id"]=>\r\n string(5) "nasil"\r\n ["hataMesaji"]=>\r\n string(33) "En az bir kutu i\u015faretlemelisiniz"\r\n }\r\n }\r\n}\r\n<\/pre>\nBurada ad, soyad, cinsiyet ve nasil \u015feklinde nitelendirdi\u011fimiz ID anahtar\u0131n\u0131n de\u011ferleri, d\u00f6nen hatan\u0131n index.html sayfas\u0131ndaki hangi input’un yan\u0131na yazd\u0131r\u0131laca\u011f\u0131n\u0131 belirtiyor.<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhabalar. Bu hafta jQuery ve PHP i\u015flemlerini inceleyece\u011fiz. Bana g\u00f6re uygularken \u00f6\u011frenmek yaz\u0131l\u0131m konusunda kendimizi geli\u015ftirmek i\u00e7in en iyi y\u00f6ntem. Bu d\u00fc\u015f\u00fcnceden yola \u00e7\u0131karak, jQuery ve PHP ikilisinin bir arada oldu\u011fu iki adet k\u00fc\u00e7\u00fck uygulama geli\u015ftirdim. Bunlar:<\/p>\n","protected":false},"author":3,"featured_media":500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9],"tags":[41,21,37,14],"class_list":["post-499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-php","tag-javascript","tag-jquery-2","tag-jquery-php","tag-php-2"],"_links":{"self":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":34,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/499\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/499\/revisions\/694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media\/500"}],"wp:attachment":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media?parent=499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/categories?post=499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/tags?post=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/12\/hello_world.png\" "\\"hello_world\\"")
<\/p>\n![\"\"](\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/12\/akis_diagrami_jquery_ajax.png\" "\\"akis_diagrami_jquery_ajax\\"")
<\/p>\n