AJAX ile Otomatik Tamamlama

4 Eyl 2008 In: AJAX

 

 

 

 

 

 

 

 

 

 

 

Bazı projelerimizde birden fazla seçenek içeriyorsa XMLHTTPREQUEST nesnesinden yararlanıp AJAX ile kullanıcılara ön tanımlı bilgiler sunabiliyoruz.

Bu yönde daha önce asp.net C# ile hazırlamış olduğumuz bir sözlük scripti mevcut onun kodlaması esnasında da sıkça bu metoda başvurmuştum.

Hem sunucu hem de kullanıcı bazında estetik ve az yük bindiren bir yapıya sahipti.

Kullanıcı bir kelime yazdığında o kelimeye ulaşana kadar ki sürede türetilen diğer kelimeler arasından uygun seçeneği seçme imkanı tanıyoruz.

Örnek vermek gerekirse dondurma kelimesini yazarken aşağıda don,dondur,dondurma gibi alternatif seçeneklerin çıkması hoş olacaktır.

Şimdi ise JSON ve AJAX özelliklerinden yararlanarak hazırlanmış olan otomatik tamamlama scriptini sizlerle paylaşıyorum.

Kullanımından kısaca bahsetmek gerekirse aşağıdaki adımları uygulayabilirsiniz.

bsn.AutoSuggest_2.1.3_comp.js dosyasını sayfanızın <head> ... </head> taglarına arasına include ediniz. 

<body> .. </body> tagları arasına ise

var options = {
script: "pathToScript.php?",
varname: "variableName",
json: true,
maxresults: 35
};
var as = new bsn.AutoSuggest('idOfTextfield', options);

kodlarını ekleyiniz.

Script dosyalarını inceleyip çalışmalarınıza göre uygun şekilde kullanmanız mümkün.

AutoSuggest Download 

Kolay Gelsin ...

 

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

AJAX - Rabid Ratings

25 Ağu 2008 In: AJAX, Genel

 

 

 

 

 

 

 

 

  Rabit ratings uygulaması ile web sitelerinizi ziyaret edenlere değerlendirme imkanı tanıyabilirsiniz.

PHP ve AJAX uygulaması olarak hazırlanmış olan rating uygulaması ile tasarımlarınıza hoş görünümler kazandırabilirsiniz.

Rabid ratings uygulamasını çalışmalarınıza kolayca entegre edebilirsiniz.

Demo sayfasına buradan ulaşabilirsiniz.

Kurulum aşamasında yapmanız gerekenler şunlar :

Aşağıdaki dosyalarınızı FTP aracılığıyla web sitenizin kurulu olduğu dizine yükleyiniz.

  • ratings.php - Main PHP file.
  • js/ratings.js - Main JavaScript file.
  • styles/ratings.css - CSS file.
  • styles/img/hearts.png - Image file.

 Kurulum aşamasında aşağıdaki database bağlantılarını yazmaya unutmayınız.

/* Database Connection Options */

$this->dbHost = "localhost"; //Localhost olarak kalabilir.

$this->dbUser = "username"; //db kullanıcı adınız

$this->dbPassword = "secret"; //db şifresi

$this->dbDatabase = "myDatabase"; //db adı

Aşağıdaki kodu ise kullanmak istediğiniz sayfalarda en üste yerleştiriniz.

<?php require_once("ratings.php"; $rr = new RabidRatings(); ?>
 Aşağıdaki kodu ise uygulamanın sayfanızda gösterilmesini istediğiniz yere yerleştiriniz.
<?php $rr->showStars("anotherGreatArticle"); ?>
 

 CSS dosyalarını da <head>... </head> tagları arasına yerleştirmeyi unutmayınız.

   <head>
<script src="js/mootools-v1.2.js"></script>
<script src="js/ratings.js"></script>
<link rel="stylesheet" href="styles/ratings.css" />
</head>

 

  Kurulum ve düzenleme işlemleri ardından uygulamanızı tasarımlarınızda rahatlıkla kullanabilirsiniz.

  Kolay Gelsin Smile

 

Rabid Ratings Download

Demo

  Olcay KÜK

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

 

Çalışmalarımız da girilen değerleri kontrol etmek adına bir çok yöntem üretebiliriz.Şüphesiz ki AJAX ile de kullanıcı tarafından girilen değerlerin filtrelenmesine imkan tanıyan bir özellik mevcuttur.

FilteredTextBoxExtender adındaki özelliğimiz ile bir textbox'a girilen değerlerin sadece rakam,büyük harf,küçük harf duyarlı olmasını sağlayabiliriz.Böylelikle istenmeyen karakterleri kolayca engelleyebilir çalışmalarımız performansını ve güvenliğini bir kat daha arttırmış oluruz.

Bu uygulamamızı gerçekleştirmek için VS 2008 ve Framework 3.5 kullanıcılarına yönelik AjaxControlToolkit eklentisini kurulu olması gerekmektedir.Codeplex bağlantısını kullanarak yükleyebilirsiniz. 

Yeni bir web site projesi açıyoruz ve ardından 1 adet ToolScriptManager,1 adet TextBox,1 adet FilteredTextBoxExtender ekliyoruz.Bunu ister sürükle bırak olarak istersek de textbox tasks kullanarak ve Add Extender seçeneği ile TextBoxlara uygulanabilecek AJAX eklentilerini aktif hale getirebiliriz.

TargetControlID ile filtrelenecek ajax kontrolunun ID'sini belirtmelisiniz.FilterType kısmında ise filtrelemek istediğiniz türü belirtmelisiniz.ValidChars kısmında da ek olarak geçerli olmasını istediğiniz karakterleri belirtebilirsiniz. Bu kontrolleri FilteredTextBoxExtender özelliğinin Properties sekmesinde bulabilirsiniz.

Bu işlemlerin ardından TextBox Properties sekmesinde TextBox1_FilteredTextBoxExtender alt sekmesine gelip FilterType kısmından textboxa girilmesini istediğiniz uygun seçeneği seçiniz.Ben bu örnekte sadece rakamların girilmesini sağlayacağım.Kod bloğu aşağıdaki gibidir.

 

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:FilteredTextBoxExtender ID="TextBox1_FilteredTextBoxExtender"
            runat="server" Enabled="True" FilterType="Numbers" TargetControlID="TextBox1">
        </cc1:FilteredTextBoxExtender>

 

Bu işlemin ardından projemizi çalıştırdığımızda textboxa sadece rakamların girilmesini sağlamış oluyoruz.Hem güvenlik hem de pratiklik açısında çalışmalarımızda bolca yer verebileceğimiz bir uygulamadır.

 

Olcay Kük 

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Satranç - ASP.NET AJAX & Silverlight

10 Tem 2008 In: AJAX, ASP.NET

 

 

 

 

 

 

 

 

 

Satranç şüphesiz ki bir çoğumuzun vazgeçilmezleri arasındadır.Genelde online olarak birçok turnuva yapmış olanlarımız aramızda mutlaka vardır.

İşin yazılımcıları ilgilendiren tarafı ise ASP.NET AJAX ve Silverlight teknolojileriyle hazırlanmış Satranç oyunun kodlarını paylaşıyorum.

Umarım çalışmalarınıza aydınlatıcı nitelikte etkiler yapar.

Download 

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

AJAX XMLHTTPRequest ile Tarayıcı Desteği

21 Haz 2008 In: AJAX

 

 

 

 

 

 

 

 

 

 

 

Bir süre önce bir projem gereği XMLHTTPRequest nesnesi ile çalışma yapmam gerekiyordu.

Bu sırada bu nesneye ait ufak bir örneği sizlerle paylaşıyorum.Örnekten de anlaşılacağı üzere tarayıcıların ajax destekleyip desteklemediğini kontrol eden bir uygulamadır.

İstemci - Sunucu uygulamasına basit bir örnek olarak çalışmalarınızda rahatlıkla kullanabilirsiniz.

<html>

<body>
<script type="text/javascript">function ajaxFunction()
  {  var xmlHttp;
  try
    {    // Firefox, Opera 8.0+, Safari    xmlHttp=new XMLHttpRequest();    }
  catch (e)
    {    // Internet Explorer    try
      {      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }
    catch (e)
      {      try
        {        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");        }
      catch (e)
        {        alert("Tarayıcınız AJAX desteklemiyor");        return false;        }      }    }  }</script>

Name: <input type="text" name="username" />

Time: <input type="text" name="time" />

</body>
</html>

 

Günümüzdeki tüm tarayıcılarda AJAX destekleniyor.Eğer 5-10 yıl öncesinde kalmadıysanız sizde de pozitif sonuç ekrana yansıyacaktır.Smile

 

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Blog'dan

Biraz yazılım,biraz güvenlik,biraz da hayattan karalamalar ...


İletişim: ok@olcaykuk.com