Geliştirdiğim Joomla Html Modül oluşturucuyu paylaşıyorum.
Kısa sürede zahmetsizce kendi tasarımınız modüller oluşturuabilirsiniz.
Daha önce akordeon modülünün videosunu
https://www.youtube.com/watch?v=4wMRriycZG8&feature yapmıştım.
ŞİMDİ DE ANLATALIM
İgili dosyayı indirip zip arşivinden çıkarıyoruz.
index.html dosyasını tarayıcıda çalıştırıyoruz. ( crome en uygunudur)
1. Joomla için kalıp dosyası oluşturalım
Görüntüsü şöyle:
Burada iki bölüm var. Sol tarafta üste P1,P2.. gibi kolay erişim menüsü var.Yazar hakkında, modül bilgileri ve 10 adet parametre, içe/dışa aktar var.
Buradaki alanları dolduruyoruz. Varsayılan olarak 1. parametre etkindir. Siz (en fazla 10 adet) isteğiniz kadar parametreyi etkinleştirip doldurabilirsiniz.
yazdığınız veriler yanda (sağda) mavi ile gözükecektir.Sağ alana müdahele edemezsiniz. Joomla eklenti kalıp dosyası için dört adet dosyanın yazıldığını göreceksiniz.
En sağda PAKETİ İNDİR e tıklayarak otomatik oluşturulacak zipli dosyayı indirebileceksiniz.
Bu programı kullanarak Joomla için TAB MODÜL oluşturalım.
Yalnız hemen şunu belirteyim. Oluşturulan dosya kalıp dosyadır. Yüklenip yayınlandığında pek fazla birşey çıkmaz. nasıl geliştireceğiz onu anlatıyorum.
Programı açalım. Sol alandaki Yazar Hakkında bilgilerini yazalım. Bu bir nevi telif hakkı oluşturur.
Modül Bilgileri ise modülümüzün başlığını ve alt adını , install yöntemini, helper sınıfı, versiyon, olşt. tarihi, telif hakkı yazısı ve açıklama içeririr.
Burada modül takma adı ve helper sınıfı (helper sınıfı boş geçilebilir) oluştururken türkçe karakter kullanmamaya dikkat edelim. Kaydırma çubuğu ile yada sol üstteki menüden parametre bölümüne geçelim.
Joomlaya uyarlayacağımız modüle googlede Jqery tab modül yazarak ulaşabilirsiniz. https://jqueryui.com/tabs/
Görüldüğü gibi sekme için başlık parametresi ve içerik için ise metin parametresi yazacağız.
Parametre 1'de başlığa Başlık 1 alt başlığa Türkçe karakter kullanmadan ve boşluk bırakmadan sekmebaslik1 yazalım. Açıklama bilgisi için bu parametreye açıklayıcı birşeyler siz yazabilirsiniz. tip (TYPE) kısmı önemli bu yönetim panelinden modülümüze veri girerken kullanacağımız yöntemi belirleyecek. Biz normal metin yazacağımız için bu alana text yazacağız. Mavi ile görünen Döküman yazısına tıklayıp yada şurdan https://docs.joomla.org/Standard_form_field_types bu konuda kullanabileceğimiz Joomla Standart form alanı türlerini Standard form field typesinceleyebilirsiniz. Ek yapılandırma için varsayılan kullanılsın. Bu demek Ek alanları kendiniz yazabilirsiniz demek.
Parametre 1 i bitirdik .yani Tab modülümüzün 1.sekmesi parametre yazdık.
Şimdi Parametre 2 de Başlık 1 sekmesine tıkladığmızda görünecek metin için paramatre yazacağız.
Başlığa ; Tab Metin Alanı 1
Alt başlığa; sekmemetin1
açıklama; siz yazın
tip (type); textarea
ek yapılandırma; size="200" yazalım.
Parametre 1 e başlık, parametre 2 ye metin parametresi oluşturduk. Aynı şekilde parametre 3 e parametre1 deki işlemi, parametre 4 e parametre 2 deki işlemi tekrarlayalım. Sadece adları değiştirelim .Yani Başlik 2, sekmebaşlik2, gibi. verileri yazalım. Toplamda 10 adet parametre yazacağız 5 sekme, 5 metin.
Sol bölmede yaptığımız işlemlerle sağ bölmedeki verilerin işlendiğini göreceksiniz. sağ alandaki menüleri inceleyip bakınız. buradaki menü adları aynı zamanda dosya adlarıdır. Verileri zipleyip indirdiğimizde bu dosyalardan başka dosyalar da yazılacak. Bu modül için gerekli olmadsa da daha gelişmiş eklentiler için bu dosyalar hazırlanacaktır.
Dosyamızı PAKET İNDİR e tıklayarak masaüstüne indirelim.
İndirdiğimiz dosya joomla için kalıp eklenti dosyasıdır içinde neler var resme bakın:
2 Kurulum : yönetim paneline girip mo_tab.zip eklentisini kuralım.
Eklentiler< Modüller> Tab Modülüne tıklayalım. Yönetim panelinden şöyle görünecek:
Menü ataması yapalım(mesala Tüm sayfalar), etkinleştirelim ve konum belirleyeyim (joomlanın ilk kurulumda gelen protostar teması için position-3 gibi)
3 son aşama jqery tab modülünü entegre edelim.
Bunun için aşağıdaki resimde olduğu gibi modules/mod_tab klasörüne gidip mod_tab.php dosyasını açalım.
Buradaki echo ve parametrelere bakalım. Kolaylık olsun diye ben mod_tab.php dosyasının içini tamamen silip tab adresine gidip https://jqueryui.com/tabs/ view source yazısına tıklayıp buradaki kodları aynen mod-tab.php dosyasına yapıştırıyorum.
Sitemiz önizlemede şöyle görünecek.
İşimiz bittiğinde ise 5 adet sekme ve 5 adet içerik metni olacak.Bu veriler şuan html olrak geliyor.
SON ADIM mod_php dosyasına veri basma.
bunun için modul yazarken kullandığımız altbaşlık isimlerini kulanacağız ( sekmebaslik1,sekmemetin1,sekmebaslik2,sekmemetin2,sekmebaslik3,sekmemetin3, sekmebaslik4,sekmemetin4, sekmebaslik5,sekmemetin5)
mod_tab.php dosyamıza kopyaladığımız kodlar şöyle idi:
Burada sekme başlıklarını ve metin yazılarını parametreye bağlayacağız.
verileri parametreye bağlayacağımız kodumuz ise şu:
başlık için 5 adet
metin için:5 adet
mod_tab.php dosyasının son hali şöyle olacak:
YÖNETİM pANELİNE GİDİP PARAMETREYE BAĞLADIĞIMIZ VERİLERİ YAZALIM VE KAYDEDELİM.
SON ÖNZİLEME ŞÖYLE OLACAK
proje modülünümüzü buradan da indirebilirsiniz
Kısa sürede zahmetsizce kendi tasarımınız modüller oluşturuabilirsiniz.
Daha önce akordeon modülünün videosunu
https://www.youtube.com/watch?v=4wMRriycZG8&feature yapmıştım.
ŞİMDİ DE ANLATALIM
İgili dosyayı indirip zip arşivinden çıkarıyoruz.
index.html dosyasını tarayıcıda çalıştırıyoruz. ( crome en uygunudur)
1. Joomla için kalıp dosyası oluşturalım
Görüntüsü şöyle:
Burada iki bölüm var. Sol tarafta üste P1,P2.. gibi kolay erişim menüsü var.Yazar hakkında, modül bilgileri ve 10 adet parametre, içe/dışa aktar var.
Buradaki alanları dolduruyoruz. Varsayılan olarak 1. parametre etkindir. Siz (en fazla 10 adet) isteğiniz kadar parametreyi etkinleştirip doldurabilirsiniz.
yazdığınız veriler yanda (sağda) mavi ile gözükecektir.Sağ alana müdahele edemezsiniz. Joomla eklenti kalıp dosyası için dört adet dosyanın yazıldığını göreceksiniz.
En sağda PAKETİ İNDİR e tıklayarak otomatik oluşturulacak zipli dosyayı indirebileceksiniz.
Bu programı kullanarak Joomla için TAB MODÜL oluşturalım.
Yalnız hemen şunu belirteyim. Oluşturulan dosya kalıp dosyadır. Yüklenip yayınlandığında pek fazla birşey çıkmaz. nasıl geliştireceğiz onu anlatıyorum.
Programı açalım. Sol alandaki Yazar Hakkında bilgilerini yazalım. Bu bir nevi telif hakkı oluşturur.
Modül Bilgileri ise modülümüzün başlığını ve alt adını , install yöntemini, helper sınıfı, versiyon, olşt. tarihi, telif hakkı yazısı ve açıklama içeririr.
Burada modül takma adı ve helper sınıfı (helper sınıfı boş geçilebilir) oluştururken türkçe karakter kullanmamaya dikkat edelim. Kaydırma çubuğu ile yada sol üstteki menüden parametre bölümüne geçelim.
Joomlaya uyarlayacağımız modüle googlede Jqery tab modül yazarak ulaşabilirsiniz. https://jqueryui.com/tabs/
Görüldüğü gibi sekme için başlık parametresi ve içerik için ise metin parametresi yazacağız.
Parametre 1'de başlığa Başlık 1 alt başlığa Türkçe karakter kullanmadan ve boşluk bırakmadan sekmebaslik1 yazalım. Açıklama bilgisi için bu parametreye açıklayıcı birşeyler siz yazabilirsiniz. tip (TYPE) kısmı önemli bu yönetim panelinden modülümüze veri girerken kullanacağımız yöntemi belirleyecek. Biz normal metin yazacağımız için bu alana text yazacağız. Mavi ile görünen Döküman yazısına tıklayıp yada şurdan https://docs.joomla.org/Standard_form_field_types bu konuda kullanabileceğimiz Joomla Standart form alanı türlerini Standard form field typesinceleyebilirsiniz. Ek yapılandırma için varsayılan kullanılsın. Bu demek Ek alanları kendiniz yazabilirsiniz demek.
Parametre 1 i bitirdik .yani Tab modülümüzün 1.sekmesi parametre yazdık.
Şimdi Parametre 2 de Başlık 1 sekmesine tıkladığmızda görünecek metin için paramatre yazacağız.
Başlığa ; Tab Metin Alanı 1
Alt başlığa; sekmemetin1
açıklama; siz yazın
tip (type); textarea
ek yapılandırma; size="200" yazalım.
Parametre 1 e başlık, parametre 2 ye metin parametresi oluşturduk. Aynı şekilde parametre 3 e parametre1 deki işlemi, parametre 4 e parametre 2 deki işlemi tekrarlayalım. Sadece adları değiştirelim .Yani Başlik 2, sekmebaşlik2, gibi. verileri yazalım. Toplamda 10 adet parametre yazacağız 5 sekme, 5 metin.
Sol bölmede yaptığımız işlemlerle sağ bölmedeki verilerin işlendiğini göreceksiniz. sağ alandaki menüleri inceleyip bakınız. buradaki menü adları aynı zamanda dosya adlarıdır. Verileri zipleyip indirdiğimizde bu dosyalardan başka dosyalar da yazılacak. Bu modül için gerekli olmadsa da daha gelişmiş eklentiler için bu dosyalar hazırlanacaktır.
Dosyamızı PAKET İNDİR e tıklayarak masaüstüne indirelim.
İndirdiğimiz dosya joomla için kalıp eklenti dosyasıdır içinde neler var resme bakın:
2 Kurulum : yönetim paneline girip mo_tab.zip eklentisini kuralım.
Eklentiler< Modüller> Tab Modülüne tıklayalım. Yönetim panelinden şöyle görünecek:
Menü ataması yapalım(mesala Tüm sayfalar), etkinleştirelim ve konum belirleyeyim (joomlanın ilk kurulumda gelen protostar teması için position-3 gibi)
3 son aşama jqery tab modülünü entegre edelim.
Bunun için aşağıdaki resimde olduğu gibi modules/mod_tab klasörüne gidip mod_tab.php dosyasını açalım.
Buradaki echo ve parametrelere bakalım. Kolaylık olsun diye ben mod_tab.php dosyasının içini tamamen silip tab adresine gidip https://jqueryui.com/tabs/ view source yazısına tıklayıp buradaki kodları aynen mod-tab.php dosyasına yapıştırıyorum.
Sitemiz önizlemede şöyle görünecek.
İşimiz bittiğinde ise 5 adet sekme ve 5 adet içerik metni olacak.Bu veriler şuan html olrak geliyor.
SON ADIM mod_php dosyasına veri basma.
bunun için modul yazarken kullandığımız altbaşlık isimlerini kulanacağız ( sekmebaslik1,sekmemetin1,sekmebaslik2,sekmemetin2,sekmebaslik3,sekmemetin3, sekmebaslik4,sekmemetin4, sekmebaslik5,sekmemetin5)
mod_tab.php dosyamıza kopyaladığımız kodlar şöyle idi:
Kod:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">[b]Nunc tincidunt[/b]</a></li>
<li><a href="#tabs-2">[b]Proin dolor[/b]</a></li>
<li><a href="#tabs-3">[b]Aenean lacinia[/b]</a></li>
</ul>
<div id="tabs-1">
<p>[b]Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.[/b]</p>
</div>
<div id="tabs-2">
<p>[b]Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.[/b]</p>
</div>
<div id="tabs-3">
[b]<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>[/b]
</div>
</div>Burada sekme başlıklarını ve metin yazılarını parametreye bağlayacağız.
verileri parametreye bağlayacağımız kodumuz ise şu:
başlık için 5 adet
Kod:
<?php echo $params->get('sekmebaslik')?>
Kod:
<?php echo $params->get('sekmemetin')?>mod_tab.php dosyasının son hali şöyle olacak:
Kod:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1"><?php echo $params->get('sekmebaslik1')?></a></li>
<li><a href="#tabs-2"><?php echo $params->get('sekmebaslik2')?></a></li>
<li><a href="#tabs-3"><?php echo $params->get('sekmebaslik3')?></a></li>
<li><a href="#tabs-4"><?php echo $params->get('sekmebaslik4')?></a></li>
<li><a href="#tabs-5"><?php echo $params->get('sekmebaslik5')?></a></li>
</ul>
<div id="tabs-1">
<p><?php echo $params->get('sekmemetin1')?></p>
</div>
<div id="tabs-2">
<p><?php echo $params->get('sekmemetin2')?></p>
</div>
<div id="tabs-3">
<p><?php echo $params->get('sekmemetin3')?></p>
</div>
<div id="tabs-4">
<p><?php echo $params->get('sekmemetin4')?></p>
</div>
<div id="tabs-5">
<p><?php echo $params->get('sekmemetin5')?></p>
</div>
</div>YÖNETİM pANELİNE GİDİP PARAMETREYE BAĞLADIĞIMIZ VERİLERİ YAZALIM VE KAYDEDELİM.
SON ÖNZİLEME ŞÖYLE OLACAK
proje modülünümüzü buradan da indirebilirsiniz
