Merhaba sevgili arkadaslar.
Bu dersimizde sanirim bircok joomlaci arkadasin kafasina takilan ve bazen icinden cikilmaacak bir hal alan joomla temalarin gorselligine paralel bir sorunu ele almaya calisacagim . Hemen hemen her joomlaci arkadasin basina gelmistir diye dusunuyorum diyelimki bir ucretsiz tema buldunuz ve kendi zevkinize gore bu temayi editlediniz fakat web 2.0 ozelliklerininâde sitenizde bulunmasini istiyorsunuz web 2.0 deyince benim aklima ilk etapâda Ajax geliyor. Peki nedir bu Ajax , Ajax = Asynchronous JavaScript and XML yani
Asynchronous(yani ayni anda) cesidindeki server ile browser arasindaki bilgi alisverisini saglayan bir ozellikâdir , Ajaxâin en buyuk ozelligi HTML sayfa icerisinde sorulan sorulara sayfayi tekrar aktualize etmeden cevap verebilmesidir buda sayfanizda ki ziyaretcilerin sorunsuz , sikintisiz ve en onemlisi beklemeden istedikleri verilere ulasmasi anlamina gelir.
Buraya kadar azda olsa sizlere Ajaxâi anlatmaya calistim simdi dilerseniz Ajaxâi joomla sayfamiza nasil entegre edebilecegimizi inceleyelim .
Bunun icin bize gerekli olanlar:
Bu derste yapmaya calisacagimiz sitemize gelen ziyaretcilerimize acilir kapanir bir panel yardimi ile sitemizden son haberleri iletmek olacak.
Tema olarak sitegroundâin 74 noâlu temasini sectim nedeni ise bu temaâda web 2.0 ozelliklerinin kullanilmamis olmasi .
Temamizi editlemek icin dilerseniz yerel sunucuya kuralim bu islem bittikten sonra index.php ve template_css.cssâi acarak kullanmak istedigimiz tema hakkinda biraz inceleme yapmak pek de fena bir fikir olmaz .
Sizlerin de kullanmak istediginiz temayi incelediginizden yola cikarak devam etmek istiyorum.
Su anda bize gerekli olan panelimize web 2.0 ozelligini verecek olan script ben bu is icin mootools sayfasinda http://demos.mootools.net/Fx.Slide fx.slide scriptini uygun goruyorum siz aramaya devam edip daha ilginc uygulamalar bulabilirsiniz .
Mootools.svn.js (kutuphanemiz)
Simdi bize gerekli olan bir fikir, panelimizi nereye koyabiliriz ben icerik bolumunun hemen ustunu uygun goruyorum alttaki resime bakarak nereyi kastettigimi daha iyi anlayabilirsiniz.
Simdi dilerseniz yavas yavas script entegremize baslayalim .
Normal HTML calismalarinda scriptlerimizi sayfalarimiza eklerken alttaki kodu <head> ile </head> taglari arasina ekliyoruz.
<script type="text/javascript" src="/js/scriptimiz.js"></script>
bu sistem joomlada biraz degisiyor cunku joomla bir icerik yonetim sistemi ve karmasik bir dizin sistemi var aslinda prensip ayni fakat dizin adresleri degisik asagidaki gibi.
<script type="text/javascript" src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/scriptimiz.js"></script>
dikkat ederseniz scriptâe giden yol uzerinde js/ adli bir klasor olusturduk bu klasorâu joomla dizininde temamizin klasorunun icinede ayni sekilde olusturmaliyiz (ornek: joomla => templates => tema klasoru => js.) ve olusturdugumuz bu klasor icine mootools kutuphanemizi atmamiz gerekli (mootools.svn.js) .
Butun bu yaptiklarimizdan sonra , simdi index.php icinde scriptimize giden yolu yukaridaki ornekteki gibi belirtelim .
Index.phpâde 19.satira su kodlari ekliyoruz.
<script type="text/javascript" src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools.svn.js"></script>
Simdi yapmamiz gereken temamizin icerisinde bir panel olusturmak ve bu panelin icerisine son haberlerimizi gosteren modulu yerlestirmek .
Panelimizin adi panel olsun yani <div id=âpanelâ> </div>
Panelimizi content taginin hemen altina 43. satira yerlestirelim asagidaki gibi,
ve template_css.css dosyamizi acarak panel tagimizin emirlerini verelim.
#panel{
width:100%;
background-color:#CCCCCC;
text-align:left;
}
genislik bir ust div tagi ile (#content) ayni olsun dedik ve arka plan rengi #cccccc olsun daha sonra bu renk istedigimiz sekilde degistirile biliriz.(onemsiz bir oge)
Simdi sira geldi panelimizin icine koyacagimiz module bu modulun adiâda son_haber olsun
Yani <div id=âson_haber></div>
Simdi gorunum olarak onumuzde soyle bir kodlama var
<div id="panel">
<div id="son_haber">
</div>
</div>
ve son olarakâda joomlanin latest news modulunun kodlarini son_haber taginin icine yerlestirelim
<div id="panel">
<div id="son_haber">
<?php mosLoadModules ( 'user1' , '-3'); ?>
</div>
</div>
simdi sayfadaki gorunum soyle olmali ;
user1 âden sonra -3 yazdik cunku sayfanin kendi modul yapisini kullanmak istiyoruz.
simdi rahatsizlik veren tek durum sanirim modulun basligi sona kadar vertikal bir sekilde devam etmiyor biz bunu asagidaki gibi degistirebiliriz,
#son_haber .module div div div h3 {
color: #666;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
text-align: left;
text-decoration: none;
background: url(../images/h3.jpg) top left repeat-x;
font-weight: normal;
line-height: 26px;
padding: 0 10px;
margin: 0 auto;
}
background grafigi olan h3.jpgâyi repeat-x olarak vertikal tekrarlattik.
ama siz bunun yerine kendi grafiginizi kullanabilirsiniz.
Simdi sira geldi paneli saklamaya ve bir button yardimi ile cagirmaya.
ilk once butonumuzu herhangi bir grafik programi ile olusturalim ben bu is icin macromedia fireworks kullandim ve soyle bir button olusturdum;
simdi bu olusturdugumuz butonuda index.php icine yerlestirelim.
Yalniz yerlestirmeden once tema icinde bir kucuk duzeltme yapalim ve devam edelim temayi yapan kisi wrapper kismini yani headerâi icerikten 8px ayirmis biz bunu istemiyoruz cunku butonumuzun header ile birlesik olmasi icin asagidaki kodlari template_css.css icinde bulalim ve padding kismindaki 8pxâlik ayirimi 0px yapalim â¦
#son_haber .module div div div h3 {
color: #666;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
text-align: left;
text-decoration: none;
background: url(../images/h3.jpg) top left repeat-x;
font-weight: normal;
line-height: 26px;
padding: 0 10px;
margin: 0 auto;
}
simdi butonumuzu index.php icine yerlestirebiliriz butonumuzun ismi <div id=âbutonâ> </div> olsun .
ve bu kodu hemen panelimizin altina ;
<div id="panel">
<div id="son_haber">
<?php mosLoadModules ( 'user1' , '-3'); ?>
</div>
</div>
su sekilde <div align=”center”>ortalayarak</div> yerlestirelim asagidaki gibi;
<div id="panel">
<div id="son_haber">
<?php mosLoadModules ( 'user1','-3' ); ?>
</div>
</div>
<div align="center">
<div id="buton"></div>
</div>
ve sonrasinda hemen css kodlarimizâa donelim,
#buton{
width:139px;
height:35px;
background-image:url(../images/panel_button.jpg);
background-repeat:no-repeat;}
css ile alakali kodlarimiziâda template_css.css dosyamiza ekledikten sonra elimizdeki goruntu su sekilde olmali.
simdi onceden ekledigimiz scriptimizi artik calistiralim bunun icin mootools sayfasindaki fx.slide kodlarindan yararlanacagiz. http://demos.mootools.net/Fx.Slide
eklememiz gereken kodumuz asagidaki gibi; bu kodu <head> ile </head> taglari arasina yerlestirmemiz gerekiyor.
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('panel');
mySlide.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
Â
Ve bu koduâda ekledikten sonra panelimizin ortadan kaybolmasi gerekli asagidaki gibi;
simdi sirada paneli acmamizi saglayan kod gerekli asagidaki gibi;
<a href="#" id="toggle"></a>
bu kodu butonumuza entegre edecegiz,
<div align="center">
<a href="#" id="toggle">
<div id="buton"></div>
</a>
</div>
evet hepsi bu kadar arkadaslar umarim sizler de evlerinizde pc basinda bu anlattiklarimi tekrarlar ve basarili bir sekilde sayfalariniza web 2.0 nin getirdigi guzellikleri katarsiniz.
Saglik mutluluk ve esenlikle kalin.
