Byumut » ajax http://www.byumut.com " En büyük risk, risk almamaktır.... " Tue, 27 Sep 2011 18:40:46 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Eskilerden Ajax Bul Uygulaması :) http://www.byumut.com/eskilerden-ajax-bul-uygulamasi/ http://www.byumut.com/eskilerden-ajax-bul-uygulamasi/#comments Sun, 21 Dec 2008 19:55:10 +0000 byumut http://www.byumut.com/?p=317 Merhaba arkadaşlar uzun zaman öncesinden yazmış olduğum o zamanlar ne için yazdığımı tam bilmediğim bir uygulamayı sizlerle paylaşmak istiyorum . Uygulama aslında basit bir metin veriyorsunuz ve bu metin içerisinde istediğiniz sözcüğü arayıp renklendiriyor ama dahada geliştirilebilir ve yeni özellikler katılarak değişik uygulamalarda kullanılabilir diye düşünüyorum mesela her sitede en altta bunun gibi bul kutusu olsa arayınca istediğimiz sözçüğü çat diye bulsak güzel olurdu :) Gerçi ctrl+f bu istediğimiz işlemi görüyor ama şu zamanda ama birçok insana ctrl+f ne işe yarıyor desek bilmez onun için güzel olabilirdi neyse kodlar aşağıda sistemin çalışır halini görmek için ise linki tıklamanız yeterli olacak iyi kullanımlar ..

index.php

PLAIN TEXT
PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ajax Bul Uygulaması ! - Umut ÇETİNKAYA</title>
  6. <style>
  7. #content{
  8. border:1px solid silver;
  9. height:100%;
  10. }
  11. #form{
  12. text-align:center;
  13. margin:5px;
  14. border:1px solid silver;
  15. padding:5px;
  16. background-color:#E8E8E8;
  17. padding:10px;
  18. }
  19. #veri_kutusu{
  20. border:1px solid silver;
  21. width:600px;
  22. height:100%;
  23. }
  24. #sonuc_veri{
  25. margin-top:5px;
  26. margin-bottom:5px;
  27. margin-left:5px;
  28. margin-right:5px;
  29. border:1px solid silver;
  30. height:250px;
  31. overflow:auto;
  32. padding:5px;
  33. }
  34. #bul_alan{
  35. text-align:center;
  36. margin-top:5px;
  37. margin-bottom:5px;
  38. margin-left:5px;
  39. margin-right:5px;
  40. border:1px solid silver;
  41. height:20px;
  42. background-color:#E8E8E8;
  43. padding:10px;
  44. }
  45. #bul{
  46. border:1px solid silver;   
  47. width:570px;
  48. height:20px;
  49.  
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <script>
  55. function veriyaz(){
  56. document.getElementById('sonuc_veri').innerHTML = document.getElementById('veri_kutusu').value;
  57. }
  58. </script>
  59. <iframe style="display:none;" name="gizli_iframe"></iframe>
  60. <form action="guncelle.php" name="bul_formu" id="bul_formu" target="gizli_iframe" method="post">
  61. <div id="content">
  62. <div id="bul_alan">
  63. <input name="bul" type="text" id="bul" value="Bulunacak Sözcük" onclick="this.value='';"/>
  64. &nbsp;<input type="submit" name="submit"  value="Bul" />
  65. </div>
  66. <div id="form">
  67. <textarea name="veri" id="veri_kutusu" rows="10" onblur="veriyaz()" onclick="this.value='';">İçinde Arama Yapılacak Metin</textarea>
  68. </div>
  69. <div id="sonuc_veri">
  70.  
  71. </div>
  72. </div>
  73. </form>
  74. </body>
  75. </html>

guncelle.php

PLAIN TEXT
PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ajax Bul Uygulaması !</title>
  6. </head>
  7. <body>
  8. <div id="sonuc">
  9. <?
  10. $veri = $_POST['veri'];
  11. $bul = $_POST['bul'];
  12. $veri = str_replace($bul,"<span style=\"background:#FF8C8C;\">$bul</span>",$veri);
  14. ?>
  15. </div>
  16. <script> parent.document.getElementById('sonuc_veri').innerHTML = document.getElementById('sonuc').innerHTML </script>
  17. </body>
  18. </html>

Uygulamanın Çalışır Halini Görmek İçin Tıklayınız !

4 views

]]> http://www.byumut.com/eskilerden-ajax-bul-uygulamasi/feed/ 0 Ajax Olmasaydı Ne Yapardık ? http://www.byumut.com/toparlanma-ajax-olmasaydi-ne-yapardik/ http://www.byumut.com/toparlanma-ajax-olmasaydi-ne-yapardik/#comments Wed, 13 Aug 2008 12:05:12 +0000 byumut http://www.byumut.com/?p=40 Merhaba arkadaşlar uzun bir aradan sonra tekrardan birlikteyiz . Ne zamandır vakit bulup sizlerle bişeyler paylaşamıyordum nede olsa teknoloji dünyası her geçen gün gelişiyor yerinde durmuyor . Bu kısa zaman içerisinde yeni projeler değişik teknikler öğrenme keşfetme çabası içindeyken Msn'imdeki kısa bir ajax muhabbeti ile ortaya çıkan bir konuyu sizinle paylaşmak istedim.

Ajax-tr.com bugüne kadar açılmış en güzel en büyük en kaliteli ajax , javascript azcıkta php :) destek sitesi belki . Çok özgün bir site Ajax-tr.com. Şimdi size ajax olmasaydı ne yapardık sorusunun cevabını vermek istiyorum !

Bu teknik için suat arkadaşımada teşekkürlerimi sunuyorum burdan .

Ajax Olmasaydı Ne yapardık ?

İlk önce eyceks kütüphanesine karşılık gelen bir uygulama anlatacağımı söleyerek başlayım işe

eyceks kütüphanesinde yapılan uygulama kütüphaneyi içeri çağırmak ve çağırdığımız sayfada 'da

JXG ve JXP komutlarıyla veri göndermek çıktıyı aynı ekranda alma işlemini yapıyorduk biliyorsunuz .

eyceks.js kütüphanesini sayfa içine çağırdıktan sonra aşağıdaki gibi tanımlama ve gönderme kodu yazıyorduk . sonrasında ise id="sonuc" elemenetinde çıktıyı göstermesini istiyorduk .

İşte şimdi size küçük ama hızlı bir alternatiften bahsetmek istiyorum :) Ajax değil ama javascript ile ajax olmadan yapmak istediklerimizi nasıl yapacağımızdan bahsedeceğim tabiki eburhan arkadaşımızada burdan ellerine kollarına sağlık demek isterim eyceks kütüphanesi için ama alternatif sunmak herzaman için farklı bakış açısı kazandırması yönüyle hem ajax'ı hemde asıl anlatılmak istenini daha iyi kavrayabilmemizi sağlıcaktır .

Şimdi aslında tüm herşeyi 3 satır kod ile halledebiliriz .

Ajax olmadan verileri göndermek ?

Post veya Get ile verileri göndermek farketmiyor herşeyi sanki bu şekilde bir yöntem kullanmadan yapacakmış gibi düşünebilirsiniz . ilk Önce küçük bir form oluşturuyoruz .

Resim 1

İste Farklı Olan Kısımı Anlatıyorum Size target="gizli_iframe" bu demek oluyorki formu gizli_iframe isimli bir frame 'ye gönder.Ve dönen sonucun nereye basılacağına gelelim . Bunun için de id="cikti" olan bir html tag koyuyoruz . ( span , div )

Şimdi ise gelelim bu işlemlerin arka yüzüne yani islem.php dosyasına ...

İslem.php de sadece extra bir kod var !

Resim 2

islem.php de yaptıklarımıza bakalım şimdide. Kodlara baktığımızda görüyorsunuz ki islem.php çıktısı id=sonuc olan bir tag'ın içine yerleşiyor bizde o çıktıyı alıp geldiğimiz yer olan index.html diyelim oraya basıyoruz peki nasıl ?

Resim 3

İşte Bu kadar arkadaşlar sizlere umarım faydalı olabilimişimdir .

Eeee Sizce Hangisi ?

Ajax mı ? .... ?

Umut ÇETİNKAYA

5 views

]]> http://www.byumut.com/toparlanma-ajax-olmasaydi-ne-yapardik/feed/ 0