bildirgec.org

Form Alanı

Çok fazla detaya girmeden jQuery ile bilgileri php sayfasına post etmeyi ve gelen sonucu uygun bir şekilde ekrana yazdırmayı anlatmaya çalışacağım.

Flash benzeri yakınlaşma efekti üzerinden hazırlanan Zoomer Gallery, hoş bir jQuery uygulamasıdır. Etkileyici zoom efekti sayesinde resim boyutunu arttırarak ziyaretçilerinizi etkileyebilir.

3 farklı efekti barındıran Zoomer Gallery‘yi galeri olarak kullanabileceğiniz gibi farklı amaçlar ile de kullanabilirsiniz. İsterseniz sadece bir imaja bu efekti verere çarpıcılığını ortaya koyarsınız veya reklam verenlerinizin reklamlarını farklı şekilde yayınlayabilirsiniz.

SlickGallery, oldukça kolay kullanılabilen ve birçok özelliği bulunan bir jquery & php galeri uygulamasıdır. Tamamen interaktif olarak hazırlanmış bir galeri uygulaması olan SlickGallery ile resimlerinizi kategorilize edebilir, Slayt gösterileri ile ziyaretçilerinize gösterebilir ve bunun gibi birçok işlemi yönetim panelinden kolaylıkla kontrol edebilirsiniz.

Slayt gösterisi, atlı karınca modu gibi özellikleri sayesinde ziyaretçilerinizi etkilyebileceğiniz bu uygulama PHP5 & MySQL 4+ üzerinden çalışıyor. Tooltip özelliği sayesinde resimlerin büyük ve normal ölçülerinde görebiliyorsunuz.

Atlı karınca görünümü, küçük resim görünümü ve slayt gösterisi görünümüne sahip SlickGallery, Sürükle ve bırak gibi özelliklere de sahip. Atlı karınca modu sayesinde ziyaretçileriniz resimlerin biraz daha büyük hallerini ve altındaki birçok resmi görebilirken, slaty gösterisi sayesinde ziyaretçilerinze fotoğraflarınızı tek tek gösterebilir ve kararma efekti sayesinde ise ziyaretçilerinizin sadece fotoğrafa yönelmelerini sağlayabilirsiniz.

C# objeleri JSON karşılığına dönüştürmek istediğimiz zaman System.Web.Script in içinde bulunan System.Web.Script.Serialization.JavaScriptSerializer namespace’ i bu işi bizim için yapacaktır .

Bu özelliği kullandığımız ufak bir örnek yapalım ;

Öncelikle bir web sayfası oluşturalım ve aspx.cs kısmında bir C# objesi oluşturucaz…. Kaynak kodumuzun içinde işlemlerimizi takip edelim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class CsharptoJSON : System.Web.UI.Page

{

//calişan adlı class’ ımızı oluşturuyoruz 

public class Calisan

{

public string name { get; set; }

public string age { get; set; }

public string phoneNumber { get; set; }

}

protected void Page_Load(object sender, EventArgs e)

{

//objemizin içini bir kaç kayıtla dolduralım 

Calisan cal1 = new Calisan { name = “cagri”, age = “25″, phoneNumber = “0111-555-66-77″ };

Calisan cal2 = new Calisan { name = “koray”, age = “19″, phoneNumber = “0111-555-66-77″ };

Calisan cal3 = new Calisan { name = “haluk”, age = “29″, phoneNumber = “0111-555-66-77″ };

Calisan cal4 = new Calisan { name = “aykut”, age = “29″, phoneNumber = “0111-555-66-77″ };

//objemizi serialize etmek için list türüne dönüştürüyoruz 

List<Calisan> liste=new List<Calisan>(){cal1,cal2,cal3,cal4};

// şimdi de serialize objesi oluşturalım 

System.Web.Script.Serialization.JavaScriptSerializer serilaze =

new System.Web.Script.Serialization.JavaScriptSerializer();

//listemizi serialize ederek string imizin içine atıyoruz 

string convertedJson = serilaze.Serialize(liste);

// artık JSON formatına çevrilmiş objemizi stringimiz içerisinden okuyabiliriz 

txtConverted.Text = convertedJson;

}

}

Çoğu web sitesi hala RSS kayıtlarını arka planda XML olarak tutyor. Yahoo Pipe’ları bize RSS/XML kaynaklarını JSON a dönüştürülmüş halde sunuyor. Bunun için aşağıdaki adrese istenilen sitenin sayfa url’sini ekleyip yolluyoruz.

http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=JSON&_callback=piper&feed=

Yapacağımız işlem çok karışıkmış gibi gözükse de aslında bu işlemi yapmak için sadece iki adet kısa içerikli json function oluşturuyoruz.

Örnek uygulamamıza başlayalım;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”yahoopipe.aspx.cs” Inherits=”yahoopipe” %>

<!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 runat=”server”>

<title></title>

<script type=”text/javascript” src=”http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js”></script>

<script type=”text/javascript”>

function loadJSON(url) {

//kullanacağımız yahoo pipe adresini ekliyoruz 

var yahooPipe = ‘http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=JSON&_callback=processJSON&feed=’; 

var headID = document.getElementsByTagName(“head”)[0];

var newScript = document.createElement(‘script’);

newScript.type = ‘text/javascript’;

newScript.src = yahooPipe + url;

headID.appendChild(newScript);

// newScript değerini headID’ nin alt elemanı olarak atadık 

}


function processJSON(feed) {

// yahoo dan dönülen değeri feed ismi altında aldık 

document.writeln(feed.value.title + ‘<BR>’);

// document . write kullanarak  yazıcağımız değerleri html kodu içine alıyoruz 

for (i = 0; i < feed.value.items.length; i++) {

document.write(“<a href=’” + feed.value.items[i].link + “‘>”);

document.writeln(feed.value.items[i].title + “</a><BR>”);

}

}

loadJSON(‘http://etravelideas.wordpress.com/feed/’);

// kullanmak istediğimiz adresi loadJSON fonksiyonuna gönderiyoruz bu değer yahooPipe a gönderilecek 

</script>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>


</div>

</form>

</body>

</html>

Örnek uygulamamızı çalıştırdığımız zaman asp sayfamız belirlediğimiz adresteki bilgileri yahoo Pipe ile json edilmiş olarak geri dönecek ilk url mizin içindeki ” render=JSON&_callback=processJSON= ” satırı geri dönülen değerin json formatında olacağını ve javascriptimize geri dönülen değeri processJSON fonksiyonuna yollamasını söylüyor.

Java ile JSON object ve array oluşturmayı daha önceki yazılarımızda bahsetmiştik . Şimdi de oluşturduğumuz obje ve array’ lerimize value ekleyip çıkarmaya bakıcaz

Öncelikle bir önceki yazıda bahsettiğimiz json2 dosyasını oluşturduğumuz web projesine ekleyelim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type=“text/javascript” src=”json2.js”></script>
<script type=“text/javascript” >

var continents = new Array(); // boş bir array tanımladık
continents.push(“Koray”);     // push methodu ile   Koray değerini ekliyoruz
continents.push(“Haluk”);
continents.push(“Osman”);
continents.push(“Çağrı”);
continents.push(“Aykut”);
continents.push(“SeyehatFikirleri”);
continents.push(“Burak”);

alert(“Arrayimizin içeriği “ + continents.toJSONString());

</script>

kodumuzu sayfamıza eklediğimiz zaman , Array içne eklenen value ları uyarı şeklinde göreceğiz

Normal koşullarda gridimize bağladığımız sql tablomuzun hızı ve server üzerine yıkacağı işi pek önemsemeyiz ama bu durum tablomuz ve kullanıcı sayımız arttıkça sorun oluşturucaktır, hele ki tablonuzda yaklaşık 1.500.000 kayıt varsa …

Hız, kullanım ve serverınızın işlem yoğunluğu açısından kolaylık sağlayacak örneğimize başlayalım.

Öncelikle Visual Studio ile bir Web projesi (behind code c#) açalım ve teleriğin bu iki ( Telerik.Charting.dll Telerik.Web.UI.dll ) dll’ ini bin klasörüne ekleyelim.

Şimdide database imizi projemize ekliyoruz.

Bu başlığımız altında Json kullanarak JavaScript’te mesaj oluşturacağız. Çoğu uygulamada karşımıza çıkıcak olan JSON objemizi string e dönüştürme problemini nasıl çözeceğimize de bakacağız.

Var sayalım objemizin ismi ” myJsonObject ” objemizi string haline dönüştürmek için myJsonObject.toString() ifadesinin bir işe yaramadığını biliyoruz.

Çözüm: JSON’un bize sunduğu basit bir .js dosyası ile bu dertten kurtuluyoruz. Yapmamız gereken json2.js dosyasını projemize ekleyerek uygun script tagını eklemek ve objemizi string e çevirmek için ” myJsonObject.toJSONString() ” methodunu kullanmak.

JSON’un ekstra bir işleme gerek duymadan datayı object olarak kullanbilmesi özelliğine bu başlık altında değineceğiz. JSON ile ASP.NET Web Method unu nasıl kullanacağımıza bakacağız örneğimizde, task managerda gördüğümüz programları Web Method ile çevirip JSON kullanarak listeleyeceğiz.

Visual Studio muzda bir web projesi açıyoruz ve IslemBilgisi adlı classımızı App_Code dosyası içerisine oluşturuyoruz.

IslemBilgisi.cs

1
2
3
4
5
6
7
8
9

public class IslemBilgisi 

{ 

public string IslemAdi { get; set; } 

public long SayfalanmisMemoryBuyuklugu { get; set; } 

}

Colortip, jQuery tabanlı hazırlanmış basit bir tooltip uygulamasıdır. Metinlerinizin herhangi bir bölümüne ekleyebileceğiniz küçük baloncuklar yanlızca o bölümün üzerine gelindiğinde ortaya çıkar ve sizin vermek istediğiniz kısa bilgiyi içerir.

Web sitenizin içeriğine göre renk ayarını değiştirebileceğiniz bu uygulama ile metinlerinize küçük hatırlatıcılar, ekstra bilgiler yerleştirebilirsiniz. İçeriğinde 6 farklı renkli tema bulunan bu uygulamayı değiştirerek farklı renk tonları ile çalışabilirsiniz.