Bu anlatımımızda sizlere facileforms form bileşeninin kullanımının nasıl yapılacağını anlatacağım. FacileForms bileşeni, joomla sitelerinizde her türlü form ihtiyacınızda kullanabileceğiniz bir form oluşturma bileşenidir ve bu bileşenle her türden profesyonel formları oluşturabilirsiniz. Öncelikle bu bileşenin sisteminize yüklendiğini varsayarak diğer aşamalarına geçiyorum.
Menüden ilk olarak bu yüklemiş olduğumuz bileşene tıklayalım
İlk defa yüklenmiş ise ve daha hiç çalıştırmamışsak bileşenimizi tıkladığımızda aşağıdaki gibi bir görüntü çıkacak karşımıza
Ä°ÅŸaretli olan yeri tıklayıp ardından en alttaki “Continue” butonuna basalım ve veritabanına facileforms’un çalışabilmesi için gerekli olan tabloları otomatik yazdıralım. Ardından aÅŸağıdaki resimde gördüğümüz gibi tekrar bileÅŸenimize “manage forms” menüsünden girelim
Karşımıza böyle bir alan geliyor.
Yeni bir form oluÅŸturmak için ilk adım olarak “New” menü öğesine tıklayarak iÅŸlemlerimize baÅŸlayalım.
Şimdi sırasıyla yeni form oluşturmanın bu ilk adımında yapmamız gereken işlemlere bakalım.
1. Title - Formunuza bir isim belirleyin
2. Name - Buraya yazacağınız isim örnektede görüldüğü gibi türkçe karakter içermemeli ve boşlul olmamalıdır veritabanına bu kayıt girilecek bu sebeple tr karakter ve boşluk kabul etmez etse dahi form çalışmayabilir
3. Width - Formumuzun genişliğini buradan ayarlayacaksınız istediğiniz ebatları uygn biçimde girin
4. Height - Formunuzun yükseklik ayarını belirleyin
Ardından buradaki iÅŸlemlerimiz bittiÄŸinde en altta ok ile gösterildiÄŸi gibi “Save” butonuna basarak bu ilk adımı geçelim
Resimde görüldüğü gibi formumuz için ilk adım baÅŸarıyla tamamlandı ÅŸimdi formumuzun içeriÄŸini hazırlamaya geldi sıra, bunun için resimde gördüğünüz yerden “Pages” yazan alanın altındaki “1″ rakamına basarak formumuza girelim.
Formumuzun içeriÄŸini hazırlamak için “New” butonuna basalım
Önce formumuzun içeriÄŸine ait yazıları hazırlayalım bunun için resimdeki iÅŸaretli alanı tıklayıp hemen alttaki “Continue” butonuna basalım
Ãœst resimde iÅŸaretlenmiÅŸ olan alanları siz kendinize uygun ÅŸekilde doldurun ve iÅŸleminiz tamamlanınca alttaki “Save” butonuna basın
Gördüğünüz gibi ilk alanımızı oluşturduk burada rakamlarla işaretlediğimiz şekilde sizlere bu bölümü nasıl kullanacağınızı açıklayalım
1No’lu alandan kutucuÄŸu iÅŸaretleyip ardından 2 no’lu alandan yazımızı isteÄŸimiz gibi kaydırabiliriz saÄŸa, sola, yukarı, aÅŸağı ÅŸekilde taşıyabiliriz “Move-Pixel” ve altındaki rakamı büyütüp küçülterek bu kaydırma iÅŸlemini kaçar pixel olarak yapabileceÄŸimizi rakamsal olarak belirtip bu iÅŸlemi hızlandırıp yavaÅŸlatabiliriz (taşıma) 3 No’lu alanda oluÅŸturduÄŸumuz içeriÄŸimizi görmektesiniz buradaki iÅŸlemimiz bitince 4 Nolu alandan “Save” butonuna basarak burada yaptığımız iÅŸlemi kaydetmeliyiz. Åžimdi diÄŸer yazımızı da hazırlayalım ve daha sonra bunların karşısına gelecek kutucuklarıda hazırlayacağız isim alanına ait yazımızdan sonra e-posta alanına ait yazımızı hazırlayalım
Tekrar üst menümüzden “New” butonuna basarak yeni alanımızın yazısını oluÅŸturalım
Resimdeki alanı iÅŸaretleyip “Continue” butonuna basıp ikinci yazmızı yazacağımız alana geçelim
Resimde gördüğünüz gibi eposta için gerekli alanımıza ait yazımızı adım adım örnekteki gibi yapıp “Save” butonuyla iÅŸlemimizi kaydedelim
Ad ve soyad alanına ait yazımızı oluÅŸturduÄŸumuz gibi eposta yazısı içinde aynı iÅŸlemleri yaparak 1 No’lu iÅŸaretli kutucuÄŸu iÅŸaretleyip kaydırma çubukları ile gerekli ÅŸekilde kadırıp düzenleyelim ve daha sonra yine iÅŸlem bitince 4 no’lu alandan “Save” butonuna basalım aksi halde hizaladığımız bu yeni metin baÅŸka iÅŸleme geçince yine kayacaktır
Åžimdi ad soyad ve eposta yazılarımızın karşısına formu dolduran kullanıcılar tarafından isimlerini ve eposta adreslerini girecekleri kutucukları oluÅŸturacağız bunun için yine üst menüden “New” butonuna basalım
İlk kutucuğumuzu hazırlayalım
Resimdeki alanı iÅŸaretleyip “Continue” butonuna basın
Örnek resimdeki gibi alanları dolduralım ancak alttaki 3 nolu bölümde “width” deÄŸerlerini biz kendi isteÄŸimize göre deÄŸiÅŸtirelim buradaki “columns” yazan yer kutucuÄŸun uzunluÄŸu “max. lenght” ise bu kutucuÄŸa azami haç harf girilebileceÄŸini belirler bu alanlara 25 - 25 deÄŸerleri vereceÄŸiz biz… örneÄŸimizde bunu görebileceksiniz
Tekrar 1no’lu alandan yeni oluÅŸturduÄŸumuz bu kutucuÄŸumuzu iÅŸaretleyip yön tuÅŸlarıyla düzgünce yönledirip “Save” butonuyla da bu iÅŸlemi kaydedelim ve örnekteki gibi görüntüyü elde etmiÅŸ olacağız. Kullanıcıların ad ve soyad gireceÄŸi alanıda oluÅŸturduktan sonra sırasıyla bu iÅŸlemleri bir nevi tekrar edip eposta yazımızın karşısına gelecek olan eposta yazılabilecek kutucuÄŸu oluÅŸturalım.
“New” butonuna basalım
Resimdeki gibi seçip “Continue” butonuyla devam edelim
Bu bölüme geldiÄŸimizde örnek resimde olduÄŸu gibi gereken yerleri doldurup “Save” butonuyla bu iÅŸlemimizi de kaydedelim
Eposta kutucuÄŸumuzu da diÄŸer örneklerimizdeki gibi seçip hizalandırdıktan sonra “Save” butonuna basarak kaydediyoruz.
Åžimdi bu alandan deÄŸiÅŸik bir iÅŸlem daha yapacağız, kullanıcıların eposta adresini yazmaması durumunda onlara uyarı niteliÄŸinde bir yazı çıkmasını saÄŸlayalım bunun için yapmamız gerekenleri görelim. 1 no’lo seçenekten (eposta_2) yazına tıklayın ve aÅŸağıdaki resimden devam edelim
Resimde de gördüğünüz gibi üstten “Scripts” sekmesine tıkladığımızda karşımıza gelecek bölümden örnek resimdeki gibi gerekenleri yazıp (3 no’lu seçenek) seçmeniz gereken yerleri (2 ve 4 no’lu seçenekler) de seçelimve hemen alttaki “Save” butonuyla kaydedip iÅŸlemlerimize devam edelim.
Buraya kadar olan bölümde ad soyad yazı ve kutucuÄŸu, eposta yazı ve kutucuÄŸu ve buna baÄŸlı olarak eposta alanının boÅŸ bırakılması durumunda kullanıcılara gösterilecek “Lütfen geçerli bir mail adresi girin” ibaresini hazırladık böylelikle bir kaç fonksiyonu öğrenmiÅŸ olduk. Bundan sonra ise yapacağımız iÅŸlem formumuz için açılabilir bir menü ÅŸeklinde seçim kutucuÄŸu ve karşısına gelecek yazısının nasıl oluÅŸturacağımıza bakalım
Tekrar formumuzun içindeki hemen üst bölümdeki menü öğesi olan “New” butonuna basalım
Bu bölümden de resimdeki gibi seçimi yapıp “Continue” butonuyla devam edelim
Biz bu örneÄŸimizde “ürünler” isminde bir text yazıp karşısınada açılır kutucukta belli baÅŸlı ürünler girip bunlardan herhangi birinin seçilebilmesine olanak tanımak istiyoruz siz bu örneÄŸimizden yola çıkarak istediÄŸiniz gibi düzenleme yapabilirsiniz. “Save” butonuyla bu iÅŸlemimizi kaydedelim.
Artık burada ne gibi bir iÅŸlem yapacağımızı biliyoruz gerekli ÅŸekilde hizalama iÅŸlemini yaptıktan sonra “Save” butonuna basıp bu iÅŸlemimizi kaydediyoruz. Ãœrünlerimiz metni bitti ÅŸimdi bunun karşısına açılır menü ÅŸeklinde ürünleri liste halinde gösterebileceÄŸimiz açılır kutucuÄŸumuzu yapalım.
Yine üst menüden “New” butonuyla formumuza yeni bir alan oluÅŸturmak için gerekli bölüme gidelim
Resimdeki görüldüğü gibi öğeyi seçip “continue” butonuyla devam edelim
1 ve 2 no’lu alanlara aynı ÅŸekilde sizler kendinize göre isim vererek 3 no’lu alandan da örnekteki gibi listemizde yer alacak öğeleri girebilirsiniz. Bu iÅŸlem bittikten sonra “Save” butonuyla iÅŸlemi kaydedip devam edelim
Yine 1 no’lu alandan liste_2 seçildikten sonra 3 no’lu bölümden yön tuÅŸlarıyla bu açılır kutucuÄŸumuzu (4 no) düzenleyip 2 no’lu “Save” butonuyla yönlendirerek gerekli ÅŸekilde düzemlediÄŸimiz öğemizi de kaydederek bu iÅŸlemimizi de bitirmiÅŸ olalım. Böylelikle bir kaç fomksiyonla beraber bu ÅŸekilde bir formun nasıl hazırlandığını öğrenmiÅŸ olduk. Bundan sonrasında ise formumuzu dolduran kullanıcılarımızın bu formu gönderebilmesi için “Gönder” butonunu eklemeyi göreceÄŸiz.
Ãœst menüden yine “New” butonuna basarak devam edelim
Resimde seçili alanı seçip “Continue” butonuyla devam edelim
Resimde gördüğümüz alanları yine görülen ÅŸekilde yazıp hemen üstteki “Scripts” sekmesine tıklayalım ve orada da yapılacak küçük bir iÅŸlemimiz var onu da halledelim
Resimde gördüğünüz alanları gerektiÄŸi gibi seçelim ve ardındanda “Save” butonuyla kaydedelim
Bu bölümü artık anlatmamıza gerek yok gerektiÄŸi gibi hizalandırıp “Save” butonuna basmayı unutmayalım yeterlidir. Böylelikle formumuz neredeyse bitti “Gönder” butonumuzu da yerleÅŸtirdik formumuza, fakat ÅŸimdiki aÅŸamaya bıraktığım ve yapmamız gereken en önemli husus facile forms için gereken ayarların yapılması. Bu formu doldurup gönder dediklerinde nereye gidecek form? Ä°ÅŸte bu aÅŸamadan sonra bunu nasıl ayarlayacağımıza bakacağız
Resimdeki gibi ayarların olduÄŸu bölüme gitmek için “Configuration” menüsünü tıklıyoruz
Burada tek yapmamız gereken seçili ve iÅŸaretli olan alana formumuzun yada varsa bir kaç tane formun hangi adrese (eposta) gönderileceÄŸini belirliyoruz ve bu alana bu eposta adresimizi yazıp hemen alttaki “Save” butonuna basarak bu iÅŸlemi de bitiyoruz.
Böylelikle basit bir formun nasıl oluşturulup ayarlanacağını görmüş olduk, artık son aşama olan bu hazırlanan formumuza menüden nasıl link vereceğimizi göreceğiz.
Yine joomla yönetim panelimizden üst menüdeki Menü=mainmenu sekmelerini tıklayalım, biz formumuza ana menüden link vereceğiz siz dilediğiniz menüden link verebilirsiniz.
Ana menümüz ve öğelerine ait bölümdeyiz hemen üst taraftaki menüden “Yeni” butonuna basıp yeni menü öğemizi oluÅŸturmaya baÅŸlayalım
Resimdeki gibi menü çeÅŸidini “BileÅŸen” olarak seçip üst taraftan “Ä°leri” butonuyla devam edelim
1 no’lu bölümden formumuza isim verip 2 no’lu bölümden de facileforms bileÅŸenini seçiyoruz ve üst menüden de “Kaydet” butonuyla form için menüden link verme iÅŸleminin bu aÅŸamasını geçiyoruz
Resimde gördüğünüz gibi formumuz için oluÅŸturduÄŸumuz “Form” isimli linkimiz hazır ÅŸimdi buna tekrar tıklıyor ve yeni oluÅŸturduÄŸumuz menümüzün içine tekrar giriyoruz.
Burada yapmamız gereken tek ÅŸey hemen saÄŸ tarafta iÅŸaretlenmiÅŸ olan “Form Name” kısmına facileforms bileÅŸeninden oluÅŸturduÄŸumuz formumuza verdiÄŸimiz ismi tam olarak girmelisiniz aksi halde form linki ve dolayısıyla formumuz çalışmaz bunun için formunuza verdiÄŸiniz ismi tam olarak yazmalısınız unuttuysanız facile forms bileÅŸenine “Manage Forms” linkinden tekrar girip bu ismin tam yazılışına bakabilirsiniz.
ÖrneÄŸimizde olduÄŸu gibi “Name” kısmından biz formumuzun adının “ornek_form” olduÄŸunu görüyoruz iÅŸte o kısma bu adı yazıp menü öğemizi “Kaydet” butonuyla kaydedebiliriz
Evet, formumuzu oluÅŸturduk menüden linkini verdik menü öğesine formumuzun tam adını yazdık ve iÅŸlem bitti ÅŸimdi joomla ana sayfamıza dönüp formumuza ait linki tıklayıp formumuza bakabiliriz. ÖrneÄŸimizde “Form” isimli menü öğemize tıkladık
Ve formumuz hazır, biz sizlere basit yoldan bir form hazırlamaya dair mantığı anlatmak adına bu dersimizi hazırladık sizler istediğiniz tarzda formları artık oluşturabilirsiniz.
Alıntıdır…. Kaynak : joomladersleri.com