yeni nesil marquee
Basit ama işimize küçük detaylar olarak çok yarayan JavaScript ile yazılmış opensource dağıtılan yeni nesil modern marquee uygulaması.
Detaylı açıklaması…
plesk client api
Bir kaç gün önce bir projede Plesk panelde kaytılı domainlere yeni mail adresi ekleme, silme, düzenleme gibi işlemleri yapmam gerekiyordu. Bunun üzerine küçük çaplı araştırmalar sonucunda Plesk’in bir API si olduğunu öğrendim ve araştırmalarımı birazcık daha sürdürdükten sonra gerekli dökümanları elde etmiştim ve oturup ihtiyacıma uygun birşeyler çıkartmaya başladım.
Öncelikle size sistemin nasıl işlediğinden bahsetmek istiyorum;
Plesk Panelin API uyumlu sürümlerinde “enterprise/control/agent.php” konumundaki dosyaya Plesk panelin anlayacağı dilden (: XML verileri göndererek ve yine aynı yöntemle cevaplarını alarak işlemlerimiz yapıyor ve işlem sonuçlarını görüyoruz. Fazla söze gerek yok (:
Plesk, Burda ve burda gerekli açıklamaları ve örnekleri yapmış.
Gelelim benim örneğime;
php nin cURL kütüphanesini kullanaraktan bu verileri gönderme ve yanıtlarını alma işini yaptım. İşte bu işlemleri yapan sınıfımız;
<?php // <ismailperim@gmail.com> class Mail { public $Host; public $Port = "81"; public $Path = 'enterprise/control/agent.php'; public $Kullanici = "admin"; public $Sifre; public $DomainID; public $Sonuc; public $SonucSayi; public $MailAd; public $MailSifre; private $Oturum; private $Url; private $Basliklar ; public function Mail($_Host = null,$_Port = null ,$_Kullanici = null,$_Sifre = null,$_DomainID =null) { if(!is_null($_DomainID)) { $this->Host = $_Host; $this->Port = $_Port; $this->Kullanici = $_Kullanici; $this->Sifre = $_Sifre; $this->DomainID = $_DomainID; } $this->Url = "http://".$this->Host.":".$this->Port."/".$this->Path.""; $this->Basliklar = array( 'HTTP_AUTH_LOGIN: '.$this->Kullanici.'', 'HTTP_AUTH_PASSWD: '.$this->Sifre.'', 'Content-Type: text/xml'); $this->Oturum = curl_init(); curl_setopt($this->Oturum, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt($this->Oturum, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($this->Oturum, CURLOPT_HTTPHEADER, $this->Basliklar); curl_setopt($this->Oturum, CURLOPT_URL, $this->Url); curl_setopt($this->Oturum, CURLOPT_RETURNTRANSFER, true); } public function Ekle($_Isim,$_Sifre) { $_Paket = <<<EOP <packet version="1.4.2.0"> <mail> <create> <filter> <domain_id>$this->DomainID</domain_id> <mailname> <name>$_Isim</name> <mailbox> <enabled>true</enabled> </mailbox> <password>$_Sifre</password> <permissions> <cp_access>true</cp_access> </permissions> </mailname> </filter> </create> </mail> </packet> EOP; curl_setopt($this->Oturum, CURLOPT_POSTFIELDS, $_Paket); $_Donen = curl_exec($this->Oturum); //curl_close($this->Oturum); if(eregi("<status>ok</status>",$_Donen)) { $this->Sonuc = "E-mail Adresiniz Eklendi."; $this->SonucSayi = true; } else { $this->Sonuc = "E-mail Adresiniz Eklenemedi"; $this->SonucSayi = false; } return $this->Sonuc; } private function ListeDonustur($_Liste) { //echo $_Liste; $_Donen = array(array()); $Dok = new DOMDocument(); $Dok->loadXML($_Liste); $Sonuclar = $Dok->getElementsByTagName( "result" ); $i = 0; foreach($Sonuclar as $S) { $Isim = $S->getElementsByTagName( "name" ); $_Donen[$i]["isim"] = $Isim->item(0)->nodeValue; $Sifre= $S->getElementsByTagName( "password" ); $_Donen[$i]["sifre"] = $Sifre->item(0)->nodeValue; $i++; } return $_Donen; } public function Liste($_Isim=null) { $this->Mail(); if(!is_null($_Isim)) { $_IsimIc = "<name>$_Isim</name>"; } else { $_IsimIc = ""; } $_Paket = <<<EOP <packet version="1.4.2.0"> <mail> <get_info> <filter> <domain_id>$this->DomainID</domain_id> $_IsimIc </filter> <cp_access/> <mailbox/> <aliases/> <permissions/> </get_info> </mail> </packet> EOP; curl_setopt($this->Oturum, CURLOPT_POSTFIELDS, $_Paket); $_Donen = curl_exec($this->Oturum); //curl_close($this->Oturum); return $this->ListeDonustur($_Donen); } public function Duzenle($_Isim,$_Sifre) { $this->Sil($_Isim); if($this->SonucSayi) { $this->Ekle($_Isim,$_Sifre); if($this->SonucSayi) { $this->Sonuc = "E-Mail Adresiniz Düzenlendi"; $this->SonucSayi=true; } else { $this->Sonuc = "E-Mail Adresiniz Düzenlenemedi"; $this->SonucSayi=false; } } else { $this->Sonuc = "E-Mail Adresiniz Düzenlenemedi"; $this->SonucSayi=false; } } public function Sil($_Isim = null) { if(!is_null($_Isim)) { $_Paket = <<<EOP <packet version="1.4.2.0"> <mail> <remove> <filter> <domain_id>$this->DomainID</domain_id> <name>$_Isim</name> </filter> </remove> </mail> </packet> EOP; curl_setopt($this->Oturum, CURLOPT_POSTFIELDS, $_Paket); $_Donen = curl_exec($this->Oturum); if(eregi("<status>ok</status>",$_Donen)) { $this->Sonuc = "E-Mail Adresiniz Silindi."; $this->SonucSayi = true; } else { $this->Sonuc = "E-Mail Adresiniz Silinemedi"; $this->SonucSayi = false; } } } public function Kapat() { curl_close($this->Oturum); } } ?>
ajax
Nedir bu AJAX ?
Son zamanlarda web dünyasında sıkça duymaya & görmeye başladığımız AJAX ingilizcede “Asynchronous JavaScript And XML” anlamını taşımaktadır.
AJAX, genel anlamda JavaScript ve XmlHttpRequestler aracılığıyla GET ve POST istekleri gönderip, bu isteklerin cevaplarını yine istekleri gönderdiğimiz yöntem olan JavaScript’le geri almaktır.
Kısaca AJAX’ın bileşenlerini tanıyalım;
GET ve POST istekleri:
Hazırladığım web sayfalarına bir veri göndermek için kullandığımız istekler, php, asp, asp.net v.b. diller ile programlanmış web sayfaları tarafından alınarak işleme sokulur.Örneğin bir iletişim forumundaki verilerimizi post veya get methodu ile bir web sayfasına göndeririz.Bu web sayfası isteğimizdeki değişkenler ve karşılığı olan verileri alarak bir dizi işlem sonucu iletişim formundan gelen verileri bize iletmiş olur.
JavaScript :
JavaScript, sayfalarımızda kullandığımız, “Client Side” bir dildir. Yani JavaScript kodları diğer dillerdeki gibi sunucuda yorumlanıp geriye bir yanıt dönmek yerine web sayfasını çalıştıran kullanıcının web tarayıcısı tarafından yorumlanarak web sayfasıyla etkileşimli bir halde yanıt döner.
XmlHttpRequest :
Son zamanlarda Microsoftun ActiveX’inden sonra diğer tarayıclarda ortaya çıkmış olan kütüphanedir.Genel anlamıyla yada AJAX denilen olayda işimize yaradığı kadarıyla XmlHttpRequest’ler, GET ve POST isteklerini JavaScript aracılığıyla Xml halinde belirttiğimiz sayfalara gönderen ve yine bu isteklerin yanıtlarını JavaScript aracılığıyla geri dönen “şey” dir.
AJAX tüm bunların birleşiminden oluşan ve JavaScript ile web sayfalarından aldığımız verileri diğer işlem yapacak sayfalara gönderir ve bunların yantılarını yine bize döner. Bu yanıtları işleyerek bir sonuc olarak web sayfalarımıza yansıtırız.
Peki, neden AJAX’a ihtiyaç duyarız ?
İstek gönderme ve yanıtlarını alma işlemini server-side dillerde de yapabiliriz. Fakat AJAX’ı bunlardan ayıran kısım ise bütün bu işlemlerin aSenkron olarak yapılmasıdır.
Yani bir web sayfası server-side bir dil ile gelen verileri işler, bir sonuç yaratır ve bu sonucu ekranda gösterdiğinde o sayfa durmuş demektir. Bütün kodlar çalışır ve bize sonucu gösterir. Başka işlemler yapabilmek için başka sayfalara, başka istekler göndermemiz gerekmektedir. Bu ise farklı bir sayfaya yönlenmek, o sayfanın çalışma ekrana getirilmesi demektir. Kısaca sadece server-side diller ile olşturulan web sayfaları statik‘tir. AJAX ise bu sayfaları dinamik bir hale getirmemizi sağlar . Normalde bir butona basıldığında gerekli işlemler için sunucuya istek gönderilip isteğin yanıtının alınıp sayfanın tekrar ekrana getirilmesine karşın AJAX ile butona basıldığında arka plandaki başka bir sayfa aracılığıyla gerekli işlemleri içeren isteği ve yanıtını dinamik anlamda gönderip, alabiliriz.İşte AJAX bu marifetleri ile işimize çok yarayan bir araç, kavram v.s. olmuştur.
AJAX’ı daha iyi anlayabilmeniz için yaptığım küçük bir örnek.
Örneğimde, bugüne kadar bulabildiğim, en iyi ve Türkçe karakterlerde en sorunsuz XmlHttpRequest kütüphanesi olan eyceks ‘i kullandım.
İlerleryen zamanlarda AJAX ile ilgili php mysql kullanılarak yapılmış daha geniş kapsamlı örnekler, AJAX ve php ile yaşayabilceğimiz sorunlar ve çözümleri ile ilgili makaleler yayınlamayı planlıyorum.
javascript açılır kapanır kutular
ne için lazım olduğunu bilmiyorum ama bi aralar yazdığım efektli açılır kapanır kutucuklar (:
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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <html> <head> <script type="text/javascript"> ////////////////////////////////////////////////////////////////////////// // // Code By ismailperim // http://www.ismailperim.net // <ismailperim@gmail.com> // // Açıklama : JavaScript Açılır Kapanır Kutucuklar // ////////////////////////////////////////////////////////////////////////// var slide_divYukseklik = 350; var slide_say=0; var slide_intervalID; var slide_divID; var slide_px_oran = 10; function slideKucult_kaynak() { slide_say+=slide_px_oran; var id=slide_divID; var s = document.getElementById(id).style.height; s = eval(s.replace("px","")); document.getElementById(id).style.height = (s-slide_px_oran) +"px"; //document.getElementById(id).style.opacity=((20/slide_say)); if(slide_say==slide_divYukseklik-30 || slide_say>slide_divYukseklik-30) { document.getElementById(id).style.display="none"; clearInterval(slide_intervalID); slide_say=0; document.getElementById(id).style.height="0px"; slide_intervalID=0; } } function slideKucult(getID) { slide_divID=getID; slide_intervalID=setInterval("slideKucult_kaynak()",1); } function slideBuyut_kaynak() { slide_say+=slide_px_oran; var id = slide_divID; var s = document.getElementById(id).style.height; s = eval(s.replace("px","")); document.getElementById(id).style.display="block"; //document.getElementById(id).style.opacity=eval(0.003*slide_say); document.getElementById(id).style.height = (s+slide_px_oran) +"px"; if(slide_say==slide_divYukseklik || slide_say>slide_divYukseklik) { slide_say=0; document.getElementById(id).style.opacity=1; clearInterval(slide_intervalID); } } function slideBuyut(getID) { if(document.getElementById(getID).style.height=="0px") { slide_divID=getID; slide_intervalID=setInterval("slideBuyut_kaynak()",1); } } </script> <style type="text/css"> .div-kutu-css { border:1px solid black; width:350px; overflow:hidden; background-color:#FEFE9B; padding:3px; height:0px; display:none; } </style> </head> <body> <br> <div class="div-kutu-css" id="div-kutu" style="height:0px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac nunc sed ligula interdum lacinia. Curabitur fringilla magna sit amet dui. Duis urna nunc, laoreet at, vehicula id, dictum sit amet, enim. Quisque lacus dolor, ullamcorper ac, sollicitudin feugiat, mattis nec, mauris. Sed pellentesque semper turpis. Pellentesque vitae enim volutpat purus mattis feugiat. Quisque pellentesque est quis nisl. In porta porttitor elit. In sit amet eros imperdiet mi porta ullamcorper. Duis posuere accumsan nibh. Fusce metus. Nulla nibh. Ut feugiat. Maecenas pulvinar est sit amet velit. Pellentesque tortor enim, convallis vel, feugiat quis, adipiscing sed, mi. Cras interdum varius diam. Sed dapibus. Phasellus faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam risus magna, consectetur in, varius in, porta vitae, lectus. </div> <a href="javascript:slideKucult('div-kutu');">kapat</a> <a href="javascript:slideBuyut('div-kutu');">aç</a> </body> </html> |
javascript slide
resimleri sırasıyla basit bir kayma efekti ile göstermek isterken ortaya çıkan şey
;
<script type="text/javascript">var kutuSayi = 5; var sure = 5000; var divYukseklik = 60; var interval=0; var say=0; function art() { say+=1; if(say<divYukseklik+1) { document.getElementById("divKutu").scrollTop+=1; } else { say=0; clearInterval(interval); } } function kutu() { var divID = eval(document.getElementById("divID").innerHTML); for(i=1;i<kutuSayi+1;i++) { var iArti=i+1; if(i==divID) { //document.getElementById("goster"+i).style.visibility="visible"; if(kutuSayi==divID) { document.getElementById("divID").innerHTML=null; document.getElementById("divID").innerHTML=1; document.getElementById("divKutu").scrollTop=0; } else { document.getElementById("divID").innerHTML=null; document.getElementById("divID").innerHTML=iArti; //document.getElementById("divKutu").scrollTop+=60; interval=setInterval("art()",30); } } } } function n(){} function yukseklik(yuk) { for(h=1;h<kutuSayi+1;h++) { document.getElementById("goster"+h).style.height=yuk; document.getElementById("goster"+h).style.border="1px dashed black"; divYukseklik=yuk; } } function yukle() { yukseklik(divYukseklik); } window.setInterval('kutu()',sure); </script> <div id="divID" style="visibility:hidden;">1</div> <div id="divKutu" style="overflow: hidden; height: 60px; width: 150px;"> <div id="goster1">bir</div> <div id="goster2">iki</div> <div id="goster3">uc</div> <div id="goster4">dort</div> <div id="goster5">bes</div> </div>



