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: 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 Ajax script arşivi – ajaxdude.com http://www.serpito.com/ajax-script-arsivi-ajaxdude-com/ http://www.serpito.com/ajax-script-arsivi-ajaxdude-com/#comments Wed, 05 May 2010 14:27:13 +0000 Atilla Akoğlu http://www.serpito.com/?p=1063 read more »]]> Ajaxdude.comWeb geliştiriciler için  script uyarlamak veya örnek uygulama araştırmak gereğinden fazla vakit alan bir eylemdir. Uzun zamandır elimde biriken Ajax, jQuery eklentileri yayınlamak ve kamunun hizmetine açmak düşüncesiyle ajaxdude.com adında bir domain üzerinde basit bir proje yayınladım.

Etiket sistemiyle navigasyonu imkanı veren bu sistemde, şuan için 106 farklı script uygulaması bulunmaktadır. Her uygulamanın demo adresi ve kaynak adresi detaylarında paylaşılmaktadır.

Ajaxdude.com navigation

Ajaxdude.com - Latest Ajax Scripts, demos

Web geliştiriciler için faydalı olacağını düşündüğüm bu proje için global yapmayı daha uygun gördüm. Ortalama bir kullanın da rahatça anlayabileceği basit ingilizce var zaten.

İlerleyen zamanlarda daha farklı eklenti ve opsiyon eklemeyi düşünüyorum. Şimdilik web dünyasında işe yarar ve popüler olan bütün Ajax – jQuery scriptlerini bu adreste bulabileceksiniz.

Adres için buradan buyrun

]]> http://www.serpito.com/ajax-script-arsivi-ajaxdude-com/feed/ 3 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: 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 Jquery İletişim Formu http://www.serpito.com/jquery-iletisim-formu/ http://www.serpito.com/jquery-iletisim-formu/#comments Wed, 17 Feb 2010 10:01:30 +0000 sword fish http://www.serpito.com/?p=770 read more »]]> Web sistemlerimizde yer alan iletişim formlarını jquery ve ajax ile daha görsel ve kullanışlı bir hale getirebiliriz. Bu örneğimizde buton veya linke tıklanıldığında iletişim formumuz ekrana geliyor ve gerekli alanların doğruluk kontrolü yapılarak eposta yoluyoruz.Bu iletişim formu SimpleModal üzerine kurulmuştur. OnOpen, onShow ve onClose geriçağırımlarının kullanımı yanı sıra SimpleModal ile Ajax kullanımı gösterir.

İndex.html kodlarımız


<!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=iso-8859-9" />
<link type='text/css' href='css/contact.css' rel='stylesheet' media='screen' />
</head>
<div id='contact-form' align="center"><h2>Gumusluoglu.Com Jquery İletişim Formu &Ouml;rneği</h2>

<input type='button' name='contact' value='İletişim Formu' class='contact demo'/> or <a href='#' class='contact'>İletişim Formu</a>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/contact.js'></script>
<body>
</body>
</html>

]]> http://www.serpito.com/jquery-iletisim-formu/feed/ 8 PHP:AJAX: Beğeni Oylama Uygulaması (Favourite – Love) http://www.serpito.com/php-ajax-begeni-oylama-uygulamasi/ http://www.serpito.com/php-ajax-begeni-oylama-uygulamasi/#comments Wed, 17 Feb 2010 09:16:11 +0000 Atilla Akoğlu http://www.serpito.com/?p=657 read more »]]> PHP:Ajax- favourite

Özellikle sosyal ağlarda ağımızdaki kişilerin paylaştığı içeriklere karşı etkileşim halinde olmanın en önemli yolu beğenini göstermektir.

Bu uygulamamızda yayınlanan resimleri favorilere ekleme veya beğenme olayını inceleyeceğiz.

Öncelikle aşağıdaki yazdığım MySQL satırları ile uygulama için gerekli veritabanı tablolarını açabilirsiniz.


CREATE TABLE IF NOT EXISTS `demo_images` (
`img_id` int(11) NOT NULL auto_increment,
`img_name` varchar(60) character set utf8 collate utf8_swedish_ci default NULL,
`img_url` varchar(200) NOT NULL,
`love` int(11) default NULL,
PRIMARY KEY (`img_id`)
)

INSERT INTO `demo_images` (`img_id`, `img_name`, `img_url`, `love`) VALUES
(1, 'Antalya', 'http://www.serpito.com/projects/favourite/antalya.jpg', 1),
(2, 'Düden Şelalesi', 'http://www.serpito.com/projects/favourite/duden.jpg', 1),
(3, 'Konyaaltı Plajı', 'http://www.serpito.com/projects/favourite/konyaalti.jpg', NULL);

CREATE TABLE IF NOT EXISTS `demo_image_IP` (
`ip_id` int(11) NOT NULL auto_increment,
`img_id_fk` int(11) default NULL,
`ip_add` varchar(40) default NULL,
PRIMARY KEY (`ip_id`),
KEY `img_id_fk` (`img_id_fk`)
)

Uygulamamızın index dosyasını yazalım.

index.php


<!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>Serpito.com - Ajax Favourite Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("span.on_img").mouseover(function ()
{
$(this).addClass("over_img");
});

$("span.on_img").mouseout(function ()
{
$(this).removeClass("over_img");
});
});

$(function() {
$(".love").click(function()
{
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this);

$(this).fadeOut(300);
$.ajax({
type: "POST",
url: "ajax_love.php",
data: dataString,
cache: false,

success: function(html)
{
parent.html(html);
parent.fadeIn(300);
}
});

return false;

});
});
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF
}
a
{
color:#FFFFFF

}
a:hover
{
color:#FFFFFF

}
.on_img
{
background-image:url(on.gif);
background-repeat:no-repeat;

padding-left:35px;

cursor:pointer;
width:60px;

}

.over_img
{
background-image:url(over.gif);
background-repeat:no-repeat;

padding-left:35px;

cursor:pointer;
width:60px;
}
.box
{
background-color:#303030; padding:6px;
height:17px;
}
a
{
text-decoration:none;

}
a:hover
{
text-decoration:none;

}
</style>
</head>

<body>

<div align="center">

<div style="width:600px" >

<div style="color:#333333" align="left"><h3>Beğenini göster</h3></div>
<?php
include('mysql.php');
$sql=mysql_query("select * from demo_images");
while($row=mysql_fetch_array($sql))
{

$img_id=$row['img_id'];
$img_name=$row['img_name'];
$img_url=$row['img_url'];
$love=$row['love'];
?>

<div style="margin-bottom:30px">
<div align="left">
<a href="#" id="<?php echo $img_id; ?>">
<span align="left"> <?php echo $love; ?> </span>
</a>
</div>
<img src='<?php echo $img_url; ?>' />
</div>
<?php

}
?>

</div>
</div>

</div>
</body>
</html>

Ajax ile arkaplanda çalışacak olan ajax_love.php dosyamızı yazıyoruz.

ajax_love.php

<?php
include("mysql.php");
$ip=$_SERVER['REMOTE_ADDR'];

if($_POST['id'])
{
$id=$_POST['id'];

$ip_sql=mysql_query("select ip_add from demo_image_IP where img_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);

if($count==0)
{
$sql = "update demo_images set love=love+1 where img_id='$id'";
mysql_query( $sql);
$sql_in = "insert into demo_image_IP (ip_add,img_id_fk) values ('$ip','$id')";
mysql_query( $sql_in);

$result=mysql_query("select love from demo_images where img_id='$id'");
$row=mysql_fetch_array($result);
$love=$row['love'];
?>
<span align="left"><?php echo $love; ?></span>
<?
}
else
{
echo 'Hayır !';
}

}

?>

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-begeni-oylama-uygulamasi/feed/ 2 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/ http://www.serpito.com/scroll-down-auto-load-data/#comments Mon, 15 Feb 2010 16:13:41 +0000 Atilla Akoğlu http://www.serpito.com/?p=662 read more »]]> Bu uygulamada bazı web sitelerinde görülen sayfa altına scroll edilince yeni verilerin Ajax ile yüklenme olayını inceleyeceğiz. Örnek site için sortfolio.  Bu uygulama ile sayfa hareketine göre verilerin daha düzenli ve verimli kullanılmasını sağlıyoruz. Tabi ki sunucu performansından büyük tasarruf  ediyoruz.

Scroll window auto load

Bu uygulama demosu için de daha önce kullandığım mysql.php database class yapısını kullandım. En kısa zamanda bu class ‘ı da detaylıca açıklayacağım.
Uygulamamız için gereken kodlara geçelim: 

index.php kodları


<style type="text/css">
*{ margin:0px; padding:0px }
body
{
font-family:'Georgia',Times New Roman, Times, serif;
font-size:18px;
}
.message_box
{
height:auto;
width:600px;
border:solid 1px #48B1D9;
padding:5px ;
}
#panel{
color:#333;
background-color:#C8E6E2;
width:100%;
}
#last_msg_loader
{
text-align: right;
width: 920px;
margin: -125px auto 0 auto;
}
.number
{
float:right;
background-color:#48B1D9;
color:#000;
font-weight:bold;
}
</style>
<?php
include('mysql.php');
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];

if($action <> "get")
{
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function last_msg_funtion()
{
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="wait.gif">');
$.post("scroll.php?action=get&amp;amp;last_msg_id="+ID,

function(data){
if (data != "") {
$(".message_box:last").after(data);
}
$('div#last_msg_loader').empty();
});
};

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
});
</script>
<title>Serpito.Com - Scroll Load Demo</title>
<div id="panel">
<center><h2>Serpito.com</h2>
Bu demo <a href="http://www.serpito.com/scroll-down-auto-load-data/">PHP:Jquery: Scroll Down Auto Load Data</a> icin hazirlanmistir.
</center>
</div>
<?php
//Include load_first.php
$sql=$dba->query("SELECT ID,post_title,post_name FROM wp_posts WHERE post_status='publish' ORDER BY ID DESC LIMIT 25");
while($row=$dba->fetch_array($sql))
{
$msgID= $row['ID'];
$msg= $row['post_title'];
$link=$row['post_name'];
?>
<div id="<?php echo $msgID; ?>" >
<a href="http://www.serpito.com/<?php echo $link; ?>/"><?php echo $link; ?></a>
</div>
<?php
}

?>
<div id="last_msg_loader"></div>
<?php
}else{
include('scroll.php'); //include load_second.php
}
$dba->close();
?>

&nbsp;

scroll.php kodları


<?php
include('mysql.php');
$last_msg_id=$_GET['last_msg_id'];
$sql=$dba->query("SELECT * FROM wp_posts WHERE ID<'$last_msg_id' and post_status='publish' ORDER BY ID DESC LIMIT 5");
$last_msg_id="";
while($row=$dba->fetch_array($sql))
{
$msgID= $row['ID'];
$link=$row['post_name'];
$msg= $row['post_title'];
?>
<div id="<?php echo $msgID; ?>" >
<a href="http://www.serpito.com/<?php echo $link; ?>"><?php echo $link; ?></a>
</div>
<?php
}
$dba->close();
?>

 

]]> http://www.serpito.com/scroll-down-auto-load-data/feed/ 9 Twitter Tarzı Jquery – CSS More Çubuğu http://www.serpito.com/twitter-tarzi-more-bar/ http://www.serpito.com/twitter-tarzi-more-bar/#comments Fri, 12 Feb 2010 12:04:04 +0000 Atilla Akoğlu http://www.serpito.com/?p=655 read more »]]>

Twitter’a dadanmışken tam olsun artık. Sayfa altında yer alan more çubuğu nasıl çalışıyor, ne gibi yararları var sorularına cevap arayalım.

Twitter moreTakip listendeki insanların feedleri  çok sık güncellenebileceği için (benim listemde dakikada ortalama 30 twit geliyor)  profil sayfanızın  ilk yüklendiği sırada en son gönderilen 20 twit listeleniyor. Bu şekilde aynı anda binlerce satır verinin yüklenmesi önleniyor ve hem sunucu hem de kullanıcı için rahat bir servis sağlanıyor.

More çubuğu daha fazla verinin istenildiği zaman sayfaya yüklenmesini sağlıyor.

Uygulamayı gerçekleştirebilmek için öncelikle bir veritabanına yani veri topluluğuna ihtiyacımız var.

Elinizde hazır bir veritabanı yoksa aşağıdaki Mysql kodu ile örnek bir veritabanı tablosu açabilirsiniz.


CREATE TABLE messages(
id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
//messages tablosu açıldı, içine örnek veri girmek için aşağıdaki kodu da çalıştırabilirsiniz.

INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemes21we sadkas jkf klf kfn');
INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'sdsadk2as jkf klsdssdsdf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'dene2mese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemaaes2e sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemesdsse sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'deneme5632ssdsde sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denegffgmese sadkas jkf klf kfn');
INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemese sad546546kas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'densdaseme456546se sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denedasdmese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denaasemese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'dendasd45emese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'deneasdamese sadkas jkf klf kfn');

Yukarıdaki Mysql kodları demo için kullanabileceğiniz ham maddeleri sağlar. Eğer ki local bilgisayarınızda çalışma imkanı bulamadıysanız buradan local PHP ve Mysql server kurulumu hakkında bilgi alabilirsiniz. Ama ben Serpito.com’un çalışan hazır veritabanını kullanacağım.

WordPress veritabanı yapısında wp_posts tablosunda tutulan postları listeleyerek siz küçük bir Ajax Load Bar demosu hazırladım.

Uygulama dosyalarını tek tek buraya yazalım:
(Özellikle yorum satırlarına dikkat ederseniz daha rahat anlaşılır.)

index.php kodları:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Serpito.com - Jquery &amp;amp;amp; Ajax Twitter tarzı more uygulası</title>
<style type="text/css">
*{ margin:0px; padding:0px }
ol.timeline
{
list-style:none
}
ol.timeline li
{
position:relative;
border-bottom:1px #dedede dashed;
padding:8px;
}
#panel{
color:#333;
background-color:#C8E6E2;
width:100%;
}
.morebox
{
font-weight:bold;
color:#B0AD28;
text-align:center;
border:solid 1px #CCC;
padding:8px;
font-size:14px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="images/wait.gif" />');

$.ajax({
type: "POST",
url: "more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // more cubugu kaldiriliyor
}
});
}
else
{
$(".morebox").html('Baska veri kalmadi');// Listelenecek veri kalmadi
}

return false;
});
});
</script>

</head>

<body>
<div id="panel">
<center><h2>Serpito.com</h2>
Bu demo <a href="http://www.serpito.com/twitter-tarzi-more-bar/">Twitter Tarzı Jquery – CSS More Çubuğu</a> yazısı için hazırlanmıştır.
</center>
</div>
<div id='container'>
<ol id="updates">
<?php
include('mysql.php'); // kisisel olarak kullandigim bu dosyadaki $dba veritabani sinifini daha sonra detaylica aciklayacagim.
$sql=$dba->query("select ID,post_title,post_name from wp_posts where post_status='publish' ORDER BY ID DESC LIMIT 20"); // ilk acilista 10 satir getiriliyor
while($row=$dba->fetch_assoc($sql))
{

$title=$row['post_title'];
$link=$row['post_name'];
$msg_id=$row['ID'];
?>
<li>
<?php echo $title." <a href='http://www.serpito.com/".$link."'>http://www.serpito.com/".$link."</a>"; ?>
</li>
<?php } ?>
</ol>

<div id="more<?php echo $msg_id; ?>">
<a href="#" id="<?php echo $msg_id; ?>">more</a>
</div>

</div>

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

&amp;nbsp;

more.php kodları:


<?php
include("mysql.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select ID,post_title,post_name from wp_posts where ID<'$lastmsg' and post_status='publish' order by ID desc limit 20");
while($row=mysql_fetch_array($result))
{
$title=$row['post_title'];
$link=$row['post_name'];
$msg_id=$row['ID'];
?>
<li>
<?php echo $title." <a href='http://www.serpito.com/".$link."'>http://www.serpito.com/".$link."</a>"; ?>
</li>
<?php
}
?>

<div id="more<?php echo $msg_id; ?>">
<a href="#" id="<?php echo $msg_id; ?>">more</a>
</div>
<?php
}
?>

<?php
$dba->close();
?>

&amp;nbsp;

Kodlama olayımız bu kadar.

 

]]> http://www.serpito.com/twitter-tarzi-more-bar/feed/ 1