Serpito » Ajax http://www.serpito.com Güncel Teknoloji ve Yazılım Blogu Fri, 03 Feb 2012 11:44:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 PHP:AJAX:jQuery: Chained Select – İl & İlçe Seçimi http://www.serpito.com/php-ajax-chained-select-il-ilce-secimi/ http://www.serpito.com/php-ajax-chained-select-il-ilce-secimi/#comments Fri, 13 Jan 2012 15:09:09 +0000 Atilla Akoğlu http://www.serpito.com/?p=1511 read more »]]> Web geliştiriciler için küçük ama kafa ağrıtan bu uygulamayı kısaca paketleyip demo atmak istedim.  Lazım olduğunda bakmak üzere elimizin altında dursun.

Ajax methoduyla dinamik il ilçe seçimi için öncelikle Türkiye İl ve İlçe veritabanına ihtiyacımız var (Uygulama için hazırladığım download paketinde bulabilirsiniz).

Adım adım kodlamaya geçelim;

 

1. Adım – index.php

 


<?php
@ob_start();
@session_start();
require_once("mysql.php");  / uygulamamızın veritabanı işlemleri için gerekli olan bağlantı dosyası
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Serpito - Ajax Chain Select - İl ilçe seçimi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
select { width:150px; line-height:22px; padding:4px; background-color:#F8F8F8; border:1px solid #F8EBDC; float:left; margin-right:15px;}
select option{line-height:22px;}
</style>

</head>
<body>
<div id="wrapperpub">
<div id="header">
<div style="width:550px; float:left;">
<h1 id="blog-title"><a href="http://www.serpito.com/" title="Serpito">Serpito</a></h1>
<div>Güncel Teknoloji ve Yazılım Blogu </div>
</div><!-- dp100 -->
<div style="width:300px; float:right;">
<a style="font:2.4em/1.5 museo-sans-500,helvetica,arial,sans-serif; color:#FFF;" href="http://www.serpito.com/php-ajax-chained-select-il-ilce-secimi/">Yazıya geri dön &amp;amp;not;</a>
</div>
</div><!--  #header -->
</div><!--  #wrapperpub -->

<div></div>

<p><h2 style="color:#FFF; font:2.6em/1.5 museo-sans-500,helvetica,arial,sans-serif;" align="center">Chained Select Uygulaması  - İl &amp;amp; İlçe Seçimi</h2></p>
<div id="wrapper" align="center" style="width:980px; min-height:200px; margin-top:10px; font-family:museo-sans-500,helvetica,arial,sans-serif;">
<div id="container" style="width:940px;">

<div style="margin-left:30%;">
<select id="il" name="il">
<option value="0">Şehir Seçiniz</option>
<?php
$sql=$db->q("SELECT id,il_adi FROM il ORDER BY id ASC");
while($row=$db->fassoc($sql)){
?>
<option value="<?=$row['id']?>"><?=$row['il_adi']?></option>
<?php
}
?>
</select>

<select name="ilce" id="ilce">
<option value="0">İlçe Seçiniz</option>
</select>

</div>

</div>
<div style="clear:both;"></div>
</div>

<script src="selectchained.js" type="text/javascript"></script>
<script>
$("#ilce").remoteChained("#il", "smtr.php");
</script>

<?php $db->close(); ?>
</body>
</html>

 

index.php kodlarından anlaşılacağı üzere, uygulamanın kullandığı jQuery plugin dosyası : selectchained.js

“#il” select elementi seçildiğinde remoteChained fonksiyonu smtr.php dosyası ile etkileşim kurar.

 

2. Adım: smtr.php

 


<?php
require_once("mysql.php");

if(isset($_GET['il'])){

$il=(int)$_GET['il'];

if($il>0){
$dk=$db->q("SELECT `id`,`ilce_adi` FROM `ilce` WHERE `il_id`='$il' ORDER BY `id` ASC");
$list='{"0":"İlçe Seçiniz",';
while($ilr=$db->fassoc($dk)){
$list.='"'.$ilr['id'].'":"'.$ilr['ilce_adi'].'",';
}
$list=substr($list,0,-1);
$list.="}";

echo $list;
}
}

$db->close();
?>

 

 

 

]]> http://www.serpito.com/php-ajax-chained-select-il-ilce-secimi/feed/ 1 PHP: JSON: AJAX: Youtube Video Aramaları http://www.serpito.com/php-json-ajax-youtube-video-aramalari/ http://www.serpito.com/php-json-ajax-youtube-video-aramalari/#comments Mon, 27 Jun 2011 16:19:07 +0000 Atilla Akoğlu http://www.serpito.com/?p=1395 read more »]]> Yine uzun bi aradan sonra yazacak bi malzeme aklıma gelmişken, not düşeyim.  Youtube video arama tekniğini (gdata json api) kullanarak basit bir ajax arama sistemi yapalım.

Uygulamada 2 farklı php dosyası oluşturduk. Ana dosya (index.php) ve ajax postun cevaplandığı arama (videosearch.php) dosyası uygulamanın çalışması için yeterlidir.

Basit bir arama formu ile aranan kelime,  jquery post methodu ile, videosearch.php dosyasına aktarılır ve youtube gdata apisine gönderilir.

index.php kodlarını inceleyelim: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Youtube JSON Video Arama - Serpito</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
<?php
if(isset($_GET['q'])){
?>
$.ajax({
type: 'POST',
url: 'videosearch.php',
data: 'key=<?=$_GET['q']?>',
success:function(ajaxCevap) {
$('#sonuclar').html(ajaxCevap);
}
});
<?php
}
?>
</script>
</head>
<body>
<h1>Serpito.com demo</h1>
<hr />
<form method="get"><strong>Aranacak kelime:</strong> <input type="text" name="q" value="<?=$_GET['q']?>"/> <input type="submit" value="Ara" /></form>
<p>&amp;nbsp;</p>

<div id="sonuclar" align="center">
<?php
if(isset($_GET['q'])){
?>
<img src="http://www.biyografim.net/images/fav-loader.gif" align="middle" />
<br />
<strong>Sonuçlar yükleniyor</strong>
<?php
}else{
?>

<strong>Videolar için arama kutucuğunu kullanınız.</strong>
<?php
}
?>
</div>

<hr />

<div style="clear:both;"></div>
<br /><br />
Bu demo <strong><a href="http://www.serpito.com/php-json-ajax-youtube-video-aramalari/">PHP: JSON: AJAX: Youtube Video Aramaları</a></strong> yazısı için hazırlanmıştır.

</body>
</html>

index.php ile alınan arama kelimesi, kodlarda görebileceğiniz gibi jquery yardımıyla videosearch.php dosyasına post edilir ve gelen cevap sonuclar div katmanının içine aktarılır.

videosearch.php kodları:


<style>
html{font-family:Verdana, Geneva, sans-serif; font-size:11px;}

a{color:#009; text-decoration:none;}
a img{border:none;}
</style>
<?php
$key=$_POST['key'];

function VideoSearch($searchTerms) {
$googleBaseUrl = "http://gdata.youtube.com/feeds/api/videos?q=".$searchTerms."&amp;format=5&amp;start-index=1&amp;max-results=20&amp;v=2&amp;alt=jsonc"; /* CURL ile bağlanılacak youtube gdata bağlantısı*/
$googleFullUrl = $googleBaseUrl;
$curlObject = curl_init();
curl_setopt($curlObject,CURLOPT_URL,$googleFullUrl);
curl_setopt($curlObject,CURLOPT_RETURNTRANSFER,true);
curl_setopt($curlObject,CURLOPT_HEADER,false);
curl_setopt($curlObject,CURLOPT_REFERER,"http://www.serpito.com/");
$returnGoogleSearch = curl_exec($curlObject);
curl_close($curlObject);
$returnGoogleSearch = json_decode($returnGoogleSearch,true); /*json formatında gelen cevap decode edilir*/
return $returnGoogleSearch['data']['items'];
}

$setSearchTerms = urlencode($key);
$searchResults = VideoSearch($setSearchTerms);
if(sizeof($searchResults)>0){
foreach($searchResults as $result){
?>
<div style="width:150px; float:left; padding:3px; margin:5px; height:130px; overflow:hidden;">
<a href="http://www.youtube.com/watch?v=<?=$result['id']?>" title="<?=$result['title']?>">
<img src="<?=$result['thumbnail']['sqDefault']?>" width="120" alt="<?=$result['title']?>" title="<?=$result['title']?>"/>
</a>
<p align="center">
<a href="http://www.youtube.com/watch?v=<?=$result['id']?>" title="<?=$result['title']?>">
<?=$result['title']?>
</a>
</p>
</div>
<?php
}
}
?>

Uygulamanın çalışır demosu için tıklayınız.

Uygulama dosyalarını indirmek için tıklayınız.

]]> http://www.serpito.com/php-json-ajax-youtube-video-aramalari/feed/ 4 Yeni Başlayanlar İçin jQuery – Bölüm 1 http://www.serpito.com/yeni-baslayanlar-icin-jquery-bolum-1/ http://www.serpito.com/yeni-baslayanlar-icin-jquery-bolum-1/#comments Thu, 09 Jun 2011 08:59:10 +0000 yedincisenol http://www.serpito.com/?p=1357 read more »]]> jQuery Ne Ki?

jQuery bir javascript çatısıtır. Yani yazdığınız her şey javascript’ten ibarettir. Bildiğiniz üzere javascript yazımı oldukça karışık. Bu karışıklık ta geliştiricileri javascript’ten uzaklaştırıyordu taki; jQuery,Mootools,Script.aculo.us,Ext js gibi çatılar çoğalana kadar. Bu çatılar sayesinde, javascript yeniden ayağa kalktı ve yaygınlığını artırdı. jQuery’de yukarıda bahsettiğim çatılar arasında en yaygın olanıdır. Yazımı en basit olanı,geliştirilmesi en kolay olanı…

Hadi Başlayalım

jQuery ile çalışmak için öncelikle jQuery’yi sayfanıza çağırmalısınız. Örnek:


&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function(){
//jQuery kodları buraya.
//Javascript olay temelinde çalışır. Yani Javascript ile bir işlemin yapılması için bir olay gerçekleşmesi gerekir.
//Yukarıdaki $(func.. ile başlayan kısımla &quot;sayfa hazır olduğunda&quot; şu işlemleri (süslü parantez içindeki) yap demiş olduk.
})
&lt;/script&gt; //... sayfanın devamı

jQuery Seçici

jQuery’nin en güzel yanlarının başında harika seçiciler gelir. Aslında bu seçiciler jQuery’nin de değil, “Sizzle Selector Engine”’nin seçicileri. Bu seçici motoru sayesinde, Css seçici kodlarıyla dökümandaki her nesneyi kolaylıkla seçebilirsiniz.
$ : Bu işaret bir jQuery nesnesidir.
$(‘#id’): Parantez içine yazdığımız seçici kodlar bize her türden elemanı seçmeyi sağlıyor.

Örnek Kullanımlar:

$(‘.class’) : “class” isimli class’ı taşyan elemanları seçer
$(‘.class > #id’) : “class” ismini taşıyan class’ların içindeki id değeri  “id” olan elemanları seçer
$(‘img’): Tüm img etiketlerini seçer
Fazlası: http://api.jquery.com/category/selectors/

DOM Dediğin Nedir Gülüm?

DOM (Document Object Model) bir standarttır. Bu sayede belgedeki her şeyi, birer nesne olarak yakalayabilirsiniz.

jQuery ile DOM İşlemleri

Dom fonksiyonları sayesinde belgedeki her elemana erişebilir ve müdahale edebilirsiniz. eBurhan’dan alıntılayarak jQuery’deki bi’kaç dom fonksiyonundan bahsedeceğim:

Foksiyonlarımız: html(),text(), replaceWith()

html(): Bir elemanın içeriğini html etiketleriyle beraber döndürür. Parantez içine yeni değer yazarsanız, içeriğe o değeri atar.
text(): Bir elamanın metin içeriğini döndürür. Parantez içine yeni değer yazarsanız, içeriğe o değeri atar.
replaceWith():  Bir elemanı yeni ekleyeceğiniz elemanla değiştirir.

Örnek Kullanımlar


$(‘#paragraf’).html(‘AA paragraf değişti’) :  Paragrafın içeriğini “AA paragraf değişti” olarak değiştirir.
$(‘#paragraf’).text(‘Yeni metin’): Paragrafın metnini “Yeni metin“ olarak değiştirir.
$(‘#paragraf’).replaceWith(‘&lt;a href=””&gt;link&lt;/a&gt;’): Paragrafı “a” elemanı ile değiştirir.

Ajax mı, o da ne ki?

Ajax,  sayfa yenilenmeden “http” isteği yapabilmeyi ve sonuçları yakalayabilmeyi sağlar.
Genel çalışma şekli: Açık bir sayfa “xmlHttpRequest” nesnesi aracılığıyla bir sayfaya istekte bulunur. Sayfa da bu isteği gerçekleştirir. İstek yapılan sayfa ekrana bi’şey yazarsa, javascript bunu yakalar. Böylece sayfa yenilenmeden başka bir sayfada işlem yapılmış, sonuç alınmış olunur. Yani  Ajax…

jQuery’de Ajax

jQuery’yi diğer çatıların üstüne çıkaran en önemli fonksiyonudur ajax fonksiyonu. Kullanımını görünce hak vereceksiniz.


$.ajax({
type: ‘GET’, //İstek gönderme türüdür. POST veya GET olabilir. POST tercih edilmeli
url: ‘sayfa.php’, //İstek gönderilecek sayfadır.
data: veri, //Gönderilecek verilerdir. Bir formdan gönderme yapıyorsanız, serialize() fonksiyonu ile formu formatlamanız gerekir.
success: function(t){
   //İstek tamamlandığında yapılacak işlemler burada yer alır. Yukarıda gördüğünüz atamayla istek sonucunu “t” değişkenine atamış olduk.
},
error: function(e){
   //İşlem esnasında hata olduğunda yapılacak  işlemdir. Yukardıda gördüğünüz atamayla “e” değişkenine oluşan hata mesajını atadık.
}

})

Sonraki bölümde görüşmek üzere…

]]> http://www.serpito.com/yeni-baslayanlar-icin-jquery-bolum-1/feed/ 3 Dosya upload ve jquery ile upload sınıfı http://www.serpito.com/dosya-upload-ve-jquery-ile-upload-sinifi/ http://www.serpito.com/dosya-upload-ve-jquery-ile-upload-sinifi/#comments Sat, 03 Jul 2010 16:03:45 +0000 stncweb http://www.serpito.com/?p=1150 read more »]]> Size yeni yazdığım upload nesnesini tanıtmak istiyorum.Aslında bu güncellenmiş sürüm daha önceki sürümün hataları giderildi yeni özellikler getirildi.

Bu dosya upload nesnesi sayesinde çok kolay bir şekilde upload yapabileceksiniz.Çok esnektir ve tüm ihtiyaçlarınızı giderecek şekildedir,indirdiğiniz zaman içerinde farklı örnekler bulunmaktadır.
Bu sınıfın tüm değişkenlerini ingilizce olarak yazdım çünkü phpclasses sitesindede yayınlanmaktadır.

Stnc File Upload kullanım bilgileri ve özellikleri
- Sunucunuza dosya veya dosyalarınızı yüklemenizi sağlar,nesne tabanlıdır,esnektir,tüm projelerinizde kullanabilirsiniz.
Jquery framework ile Ajax ile upload etme özelliğide bulunmaktadır.
Ayrıca sadece ajax olmadanda kullanılabilir.
Daha fazla ayrıntı için örneklere bakınız.

Özellikleri

  • Yüklemek istediğinizi dosyanın uzantısını belirtebilirsiniz.Ayrıca mime tip kontroleride eklendi.
  • Tek bir dosya veya birden fazla dosya yükleme imkanı sunar.
  • Benzersiz isimlendirme metodu bulunur.
  • Resim dosyalarının gerçek resim dosyası olup olmadığını kontrol eder.
  • Dosyaların ön ve arka kısmına önek ve sonek verme özelliği bulunmakdadır.
  • Yüklenecek dosyaların boyutunu hesaplamak için uğraşmak zorunda kalmazsınız, boyutu ve bayt,kilobayt,megabayt olarak belirtmeniz yeterlidir.
  • Jquery ile uyumluluğu sayesinde Ajax upload imkanıda sunar.
  • İsterseniz sadece tek bir dosya isminde olmasını isteyebilirsiniz
    (Örneğin şirketinizin pdf bilgilerinin her hafta yüklemesini yapıyorsunuz ve isminin bülten olmasını istiyorsunuz bu gibi durumlarda avantajlıdır.)
  • Yükleme sonucu dosyalar ile ilgili bilgi alabilirsiniz.

İndirme linki

Çok ayrıntı ile sizleri boğmak istemiyorum bu yüzden yardım sayfasına bakabilirsiniz :http://selmantunc.com/project/upload/tr/

İnglizce yardım http://selmantunc.com/project/upload/

İndirme linki

Web site :www.selmantunc.com

Mail :stncweb@gmail.com

Twitter:http://twitter.com/stunc

Friendfeed :http://friendfeed.com/stnc

]]> http://www.serpito.com/dosya-upload-ve-jquery-ile-upload-sinifi/feed/ 1 Tüm Jquery cheat Sheetler (Jquery Kopya Kağıtları) http://www.serpito.com/tum-jquery-cheat-sheetler-jquery-kopya-kagitlari/ http://www.serpito.com/tum-jquery-cheat-sheetler-jquery-kopya-kagitlari/#comments Tue, 29 Jun 2010 11:55:50 +0000 stncweb http://www.serpito.com/?p=1132 read more »]]> jquery ile çalışırken hepimizin zaman zaman jquery olayları ve fonksiyonları ile ilgili yardıma ihtiyacı olur işte tam burada devreye Jquery cheat Sheet’ler  girer.

TÜm Jquery Cheatleri buraya topladım umarım işinize yarar.

En son verison 1.4 un ki: http://www.futurecolors.ru/jquery/

jQuery 1.1.3

İndirme linki

jQuery 1.3.2 :http://www.javascripttoolbox.com/jquery/cheatsheet/

jQuery 1.3 Visual Cheat Sheet

http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html

İndirme linki : http://woorkup.com/wp-content/uploads/2009/09/jQuery-Visual-Cheat-Sheet-by-WOORK.pdf

jq version 1.2:  http://colorcharge.com/jquery/

ve birde burada

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

ayrıca :jquery UI içinde var : http://oscarotero.com/jquery/ui.html

aynı zamanda buradaki görsel anlatımlarda işinize yarayablir,

http://visualjquery.com/

eğer aptana kullanıyorsanız ,bu sitedeki bilgiler aptana için eklenti olarak geliyor.

]]> http://www.serpito.com/tum-jquery-cheat-sheetler-jquery-kopya-kagitlari/feed/ 2 PHP:AJAX: Fancy Captcha Uygulaması http://www.serpito.com/php-ajax-fancy-captcha-uygulamasi/ http://www.serpito.com/php-ajax-fancy-captcha-uygulamasi/#comments Mon, 01 Mar 2010 16:20:20 +0000 Atilla Akoğlu http://www.serpito.com/?p=967 read more »]]> Ajax Fancy Catpcha Script

Özellikle formlar aracılığı ile kullanıcılarla etkileşimde olunan durumlarda işlem yapanın gerçek bir kullanıcı mı yoksa otomatik bir bot mu olduğunu kontrol etmek zorunlu olmaktadır. Piyasada bulunan Captcha uygulamalarından en dikkat çekici olanını inceleyelim.

Jquery UI kullanarak gerçekleştirilen bu sistemde basit bir index kullanımı ile aktif hale gelebiliyor. Kodları inceleyelim;

index.html


&lt;html&gt;
&lt;head&gt;
 &lt;meta http-equiv=&quot;Content-type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
 &lt;title&gt;Serpito.com Ajax Captcha Uygulaması&lt;/title&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;latest-jquery/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;latest-jquery-ui/jquery-ui-1.7.2.custom.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;captcha/jquery.captcha.js&quot;&gt;&lt;/script&gt;
 &lt;link href=&quot;captcha/captcha.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
 &lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
 body { background-color: white; }
 &lt;/style&gt;
 &lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;
 $(function() {
 $(&quot;.ajax-fc-container&quot;).captcha({
 borderColor: &quot;silver&quot;,
 text: &quot;Gerçek bir kullanıcıysan &lt;span&gt;makas&lt;/span&gt; i daireye sürükle.&quot;
 });
 });
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;captcha uygulamasını görebilmek için tarayıcınızın javascript özelliğini açmalısınız!&lt;/div&gt;

&lt;!-- ornek icin basit bir form --&gt;
&lt;form action=&quot;captcha/captcha.php&quot; method=&quot;post&quot; id=&quot;myForm&quot;&gt;
 &lt;p&gt;&lt;input type=&quot;text&quot; name=&quot;myField1&quot; value=&quot;&quot;&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=&quot;text&quot; name=&quot;myField2&quot; value=&quot;&quot;&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;formu gönder!&quot;&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;!-- form sonu --&gt;

&lt;/body&gt;
&lt;/html&gt;

Uygulamanı tüm dosyalarını tek tek buraya kodlamak boşuna vakit kaybı olacaktır. Basit bir şekilde formlara entegre etmenin yolunu paylaştık.

Uygulamanın çalışır demosunu incelemek için tıklayınız.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/php-ajax-fancy-captcha-uygulamasi/feed/ 9 Ajax: Fly to Basket (Uçan Sepet) Uygulaması http://www.serpito.com/ajax-fly-to-basket-ucan-sepet-uygulamasi/ http://www.serpito.com/ajax-fly-to-basket-ucan-sepet-uygulamasi/#comments Mon, 01 Mar 2010 13:29:57 +0000 sword fish http://www.serpito.com/?p=955 read more »]]> E-ticaret sistemlerimizde kullanıcıların ürünleri sepete atıp atmadıklarından emin olmaları çok önemlidir. Kullanıcı emin olmadığı bir işlemde urunu birden fazla sepete ekleye bilir. Bu uygulamamızda ürünü kullanıcı sepete eklediğinde görsel olarak ürünümüzün fotografını sepet olarak belirtmiş olduğumuz bölmeye gönderiyoruz.


Sayfamızda yer alacak olan ürünler için örnek bir kod:


			&lt;div class=&quot;product_container&quot;&gt;
				&lt;div id=&quot;slidingProduct8&quot; class=&quot;sliding_product&quot;&gt;
					&lt;img src=&quot;images/d4abf6cf79b0770a99b01d791595abc3.jpg&quot; width=&quot;90&quot; height=&quot;120&quot;&gt;
					Erkekler ve Diğer Felekatler&lt;br&gt;&lt;br&gt;
					12.50
				&lt;/div&gt;
				&lt;a href=&quot;#&quot; onclick=&quot;addToBasket(8);return false&quot;&gt;&lt;img src=&quot;images/basket.gif&quot;&gt;&lt;/a&gt;
				&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
			&lt;/div&gt;

Sepete Ekle(basket.gif) tıklanıldığında “addToBasket(8)” ile ürün id mizi “addProduct.php” dosyamıza yolluyoruz ve gelen productId ye göre select case ile ürün özelliklerini belirleyip “Alışveriş Sepeti” alanına yazdırıyoruz.

addProduct.php kodlarımız


&lt;?
header(&quot;Content-Type: text/html; charset=iso-8859-9&quot;);
if(!isset($_POST['productId']))exit;
switch($_POST['productId']){

	case &quot;1&quot;;
		echo &quot;1|||Ölümcül İklim|||20&quot;;
		break;
	case &quot;2&quot;;
		echo &quot;2|||Cesur Teklif|||25&quot;;
		break;
	case &quot;3&quot;;
		echo &quot;3|||Kan Kokusu|||35&quot;;
		break;
	case &quot;4&quot;;
		echo &quot;4|||Ödünç Yaşam|||10&quot;;
		break;
	case &quot;5&quot;;
		echo &quot;5|||Alamut Cenneti|||22&quot;;
		break;
	case &quot;6&quot;;
		echo &quot;6|||Pazartesi Erkeğie|||14&quot;;
		break;
	case &quot;7&quot;;
		echo &quot;7|||Gilead|||15&quot;;
		break;
	case &quot;8&quot;;
		echo &quot;8|||Erkekler ve Diğer Felekatler|||12.5&quot;;
		break;
}
?&gt;

Sepetimizde yer alan ürünlerin adetlerini ve fiyat toplamını ise “fly-to-basket.js” dosyamız aracılığıyla hesaplıyoruz. “fly-to-basket.js” dosyamızdaki “flyingSpeed” değişkenimiz ile ürüne tıklanıldığında sepete gitme hızını belirlemiş oluyoruz.

Uygulamamızda sadece ürünün sepete gitme işlemini gerçekleştirdik. Sepete gitti anda kullanıcının sepetine veri tabanında eklemek istiyorsak “addProduct.php” dosyamızda case in altına veri tabanımıza ekleyecek olan mysql kodlarımızı yazabiliriz.


	case &quot;7&quot;;
		echo &quot;7|||Gilead|||15&quot;;
                $q=$dba-&gt;query(&quot;INSERT INTO sepet(urun_ıd,user_id) VALUES (7,'$_session['user_id']') &quot;);
		break;

Uygulamanın çalışır demosunu incelemek için tıklayınız.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/ajax-fly-to-basket-ucan-sepet-uygulamasi/feed/ 6 PHP:Jquery: Image Crop Thumbnail (JCrop) http://www.serpito.com/php-jquery-image-crop-thumbnail/ http://www.serpito.com/php-jquery-image-crop-thumbnail/#comments Wed, 24 Feb 2010 09:41:29 +0000 Atilla Akoğlu http://www.serpito.com/?p=910 read more »]]>

Kullanıcıların profil resimlerini diledikleri ölçüde kesip küçültmelerini sağlayacak bir uygulama geliştirelim. Bir Jquery eklentisi olan Jcrop ile bu işlemi çok pratik bir şekilde yapabiliyoruz.

Uygulama için basit bir index.html dosyası oluşturuyoruz.

index.html


<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="jquery.Jcrop.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demos.css" type="text/css" />

<script language="Javascript">

$(function(){

$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});

});

function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>

<div id="outer">
<div>
<div>

<h1>Serpito.com - JCrop Demo</h1>

<!-- This is the image we're attaching Jcrop to -->
<img src="antalya.jpg" id="cropbox" />

<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onSubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="res" name="res" value="antalya.jpg" />

<input type="submit" value="Resimi Kes" />
</form>

</div>
</div>
</div>

</body>

</html>

&nbsp;

&nbsp;

Hidden inputlardan oluşan formun submit edildiğinde veri göndereceği crop.php dosyasını kodlayalım.

crop.php


<?php
error_reporting(E_ERROR);
//print_r($_POST);
$targ_w = $_POST['w']-$_POST['x'];
$targ_h = $_POST['h']-$_POST['y'];

$jpeg_quality = 90;

$src = $_POST['res'];
$s=explode(".",$_POST['res']);
$resim=$s[0]; //resimin ismini aliyoruz

$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, "image/".$resim."_thumb.jpg", $jpeg_quality);

?>]

&amp;nbsp;

crop.php ye gönderilen resim üzerindeki kesim noktalarının kordinatları ve x-y uzunlukları crop.php dosyasında imagecopyresampled fonksiyonu tarafından işleniyor.

Yukarıdaki görselde denediğim uygulamanın sonucunda images dizininde antalya_thumb.jpg resimini aşağıda görebilirsiniz.

php jqery crop thumbnails

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/php-jquery-image-crop-thumbnail/feed/ 3 PHP:Jquery: Reddit Tarzı puanlama uygulaması http://www.serpito.com/php-jquery-reddit-tarzi-puanlama/ http://www.serpito.com/php-jquery-reddit-tarzi-puanlama/#comments Tue, 23 Feb 2010 10:05:34 +0000 Atilla Akoğlu http://www.serpito.com/?p=888 read more »]]> Jquery vote demo

İçerik paylaşımında ve kullanıcılar arası etkileşimi sağlayabilmek için yayınlanan içeriklerin beğeniye göre listelenmesi ve şekillendirilmesi çok önemlidir. Bu uygulamada Reddit tarzı içerik oylama servislerinin özellikle kullandığı  Yukarı -  Aşağı şeklinde puanlama olayını inceleyeceğiz.

Veritabanı için gereken tabloları aşağıdaki görselden inceleyebilirsiniz.

Uygulama için gereken veritabanı tabloları ve verileri aşağıdaki mysql satırlarını çalıştırarak elde edebilirsiniz.


CREATE TABLE IF NOT EXISTS `reddit_vote` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(255) character set latin5 NOT NULL,
`link` varchar(255) NOT NULL,
`votes_up` int(11) NOT NULL default '0',
`votes_down` int(11) NOT NULL default '0',
PRIMARY KEY  (`id`)
)

INSERT INTO `reddit_vote` (`id`, `title`, `link`, `votes_up`, `votes_down`) VALUES
(1, 'Google', 'http://www.google.com.tr/', 6, 0),
(2, 'Serpito', 'http://www.serpito.com/', 6, 1),
(3, 'Facebook', 'http://www.facebook.com/', 1, 4),
(5, 'Php:Excel Dosyası Oluşturma', 'http://www.serpito.com/phpde-excell-dosyasi-olusturma/', 9, 0),
(6, 'PHP ile Masaüstü uygulaması geliştirmek (PHP-GTK)', 'http://www.serpito.com/php-ile-masaustu-uygulamasi-gelistirmek-php-gtk/', 8, 0),
(7, 'PHP:Jquery: Scroll Down Auto Load Data (Sayfayı aşağı kaydırınca otomatik veri yükleme)', 'http://www.serpito.com/scroll-down-auto-load-data/', 8, 0),
(8, 'PHP: Dinamik PDF dosyası oluşturma (FPDF class)', 'http://www.serpito.com/php-dinamik-pdf-olusturma/', 1, 5);

Sıra geldi index.php dosyasını kodlamaya;

index.php


<?php
include_once("mysql.php"); // herzamanki mysql dosyasi
?>

<html>
<head>
<title>Serpito.Com- Jquery Oylama Demo</title>

<style type='text/css'>
body {
background: #e8e6de;
}

a {
outline:none;
}

.entry {
width: 710px;
background: #ffffff;
padding:8px;
border:1px solid #bbbbbb;
margin:5px auto;
-moz-border-radius:8px;
}

span.link a {
font-size:150%;
color: #000000;
text-decoration:none;
}

a.vote_up, a.vote_down {
display:inline-block;
background-repeat:none;
background-position:center;
height:16px;
width:16px;
margin-left:4px;
text-indent:-900%;
}

a.vote_up {
background:url("images/thumb_up.png");
}

a.vote_down {
background:url("images/thumb_down.png");
}
#panel{
color:#900;
background-color:#C8E6E2;
width:100%;
margin-bottom:10px;
}
</style>

<script type='text/javascript' src='jquery.pack.js'></script>
<script type='text/javascript'>
$(function(){
$("a.vote_up").click(function(){
//get the id
the_id = $(this).attr('id');

// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");

//fadeout the vote-count
$("span#votes_count"+the_id).fadeOut("fast");

//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_up&amp;amp;amp;amp;id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_count"+the_id).html(msg);
//fadein the vote count
$("span#votes_count"+the_id).fadeIn();
//remove the spinner
$("span#vote_buttons"+the_id).remove();
}
});
});

$("a.vote_down").click(function(){
//get the id
the_id = $(this).attr('id');

// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");

//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_down&amp;amp;amp;amp;id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_count"+the_id).fadeOut();
$("span#votes_count"+the_id).html(msg);
$("span#votes_count"+the_id).fadeIn();
$("span#vote_buttons"+the_id).remove();
}
});
});
});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>

<div id="panel">
<center><h2>Serpito.com</h2>
Bu demo <a href="http://www.serpito.com/php-jquery-reddit-tarzi-puanlama/">PHP:Jquery: Reddit Tarzı puanlama uygulaması</a>  icin hazirlanmistir.
</center>
</div>

<?php
/**
Display the results from the database
**/
$q = "SELECT * FROM reddit_vote ORDER BY id DESC";
$r = mysql_query($q);

if(mysql_num_rows($r)>0): //table is non-empty
while($row = mysql_fetch_assoc($r)):
$net_vote = $row['votes_up'] - $row['votes_down']; //this is the net result of voting up and voting down
?>
<div class='entry'>

<span class='link'>
<a href='<?php echo $row['link']; ?>'> <?php echo $row['title']; ?> </a>
</span>

<span class='votes_count' id='votes_count<?php echo $row['id']; ?>'><?php echo $net_vote." oy"; ?></span>

<span class='vote_buttons' id='vote_buttons<?php echo $row['id']; ?>'>
<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'>Yukarı!</a>
<a href='javascript:;' class='vote_down' id='<?php echo $row['id']; ?>'>Aşağı!</a>
</span>

</div>
<?php
endwhile;
endif;
?>

</body>
</html>

&amp;amp;nbsp;

index.php kodları Jquery yardımıyla votes.php ile etkileşim halinde olur. Sayfa yenilenmeden kullanıcının oyunu işleme alır ve değişikliği gösterir.

votes.php


<?php
include_once("mysql.php");

function getAllVotes($id)
{
/**
Returns an array whose first element is votes_up and the second one is votes_down
**/
$votes = array();
$q = "SELECT * FROM reddit_vote WHERE id = $id";
$r = mysql_query($q);
if(mysql_num_rows($r)==1)//id found in the table
{
$row = mysql_fetch_assoc($r);
$votes[0] = $row['votes_up'];
$votes[1] = $row['votes_down'];
}
return $votes;
}

function getEffectiveVotes($id)
{
/**
Returns an integer
**/
$votes = getAllVotes($id);
$effectiveVote = $votes[0] - $votes[1];
return $effectiveVote;
}

$id = $_POST['id'];
$action = $_POST['action'];

//get the current votes
$cur_votes = getAllVotes($id);

//ok, now update the votes

if($action=='vote_up') //voting up
{
$votes_up = $cur_votes[0]+1;
$q = "UPDATE reddit_vote SET votes_up = $votes_up WHERE id = $id";
}
elseif($action=='vote_down') //voting down
{
$votes_down = $cur_votes[1]+1;
$q = "UPDATE reddit_vote SET votes_down = $votes_down WHERE id = $id";
}

$r = mysql_query($q);
if($r) //voting done
{
$effectiveVote = getEffectiveVotes($id);
echo $effectiveVote." oy";
}
elseif(!$r) //voting failed
{
echo "Hata!";
}
?>

Uygulamanın çalışır demosunu incelemek için tıklayınız.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/php-jquery-reddit-tarzi-puanlama/feed/ 1 Jquery LightBox Text Yayınlama http://www.serpito.com/jquery-lightbox-text/ http://www.serpito.com/jquery-lightbox-text/#comments Wed, 17 Feb 2010 11:41:12 +0000 sword fish http://www.serpito.com/?p=781 read more »]]> Daha önceki Slider Galeri uygulamamızda galerimizde yer alan fotograflar istediğimiz nesne tıklanıldığında aktif oluyor ve ekrana gelen panelden fotograf geçişlerini sağlıyorduk.

Bu örnegimizde ise link e tıklanıldığında ekrana kendi belirlemiş olduğumuz içerik gelecek.

Örneğimizde “Site İçeriği” linkine tıklanıldığında gumusluoglu.com blogunda yer alan 7 adet uygulamanın başlıkları ekrana gelecek ve tıklandığında linkler blog yazıları yeni bir pencerede açılacak.

Html kodlarımız


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Gumusluoglu.com Basit iletişim penceresi &lt;/title&gt;
&lt;meta name='author' content='Müslüm Gümüşlüoğlu' /&gt;
&lt;meta name='copyright' content='2010 Müslüm Gümüşlüoğlu' /&gt;
&lt;link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id='basic-modal' align=&quot;center&quot;&gt;
	&lt;a href='#' class='basic' style=&quot;text-align:center&quot;&gt;Site İçeriği&lt;/a&gt;
&lt;/div&gt;
&lt;div id=&quot;basic-modal-content&quot;&gt;
	&lt;h3 align=&quot;center&quot;&gt;Örnek Uygulama&lt;/h3&gt;
	&lt;p&gt;Bu örnek www.gumusluoglu.com sitesi için basit iletişim penceresi amacı ile yapılmıştır.&lt;/p&gt;
	&lt;p&gt;&lt;a href='http://www.gumusluoglu.com/' target=&quot;_blank&quot;&gt;Ana Sayfa&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href='http://www.gumusluoglu.com/kategoriler/jquery-accordion-ve-dorpdown-menu/'  target=&quot;_blank&quot;&gt;jQuery Accordion ve Dropdown Menu&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href='http://www.gumusluoglu.com/kategoriler/slider-galeri/'  target=&quot;_blank&quot;&gt;Slider Galeri&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href='http://www.gumusluoglu.com/kategoriler/mootools-slider-buton/'  target=&quot;_blank&quot;&gt;Mootools Slider Buton&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href='http://www.gumusluoglu.com/kategoriler/surukle-paylas-drag-to-share-2/'  target=&quot;_blank&quot;&gt;Sürükle  Paylaş (Drag to Share)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href='http://www.gumusluoglu.com/kategoriler/jquery-online-klavye/'  target=&quot;_blank&quot;&gt;jQuery Online Klavye&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href='http://www.gumusluoglu.com/kategoriler/surukle-paylas-drag-to-share-2/'  target=&quot;_blank&quot;&gt;Sürükle Paylaş (Drag to Share)&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;script type='text/javascript' src='js/jquery.js'&gt;&lt;/script&gt;
&lt;script type='text/javascript' src='js/jquery.simplemodal.js'&gt;&lt;/script&gt;
&lt;script type='text/javascript' src='js/basic.js'&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Uygulamanın çalışır demosunu incelemek için tıklayınız.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/jquery-lightbox-text/feed/ 3