Html Kütüphanesi

HTML elementlerini sınıf formuna getirerek gerek görünüm gerekse de kontrolcü içerisinde kullandırmayı amaçlar. PHP ağırlıklı kodların bulunduğu bir dosyada HTML kodlarının kullanılması gerektiği durumlarda oldukça kullanışlıdır. Nesne zincirlemesi ile istenilen özellik değer çiftleri kolaylıkla eklenebilmektedir. Aryıca Validation:: ve Permission:: kütüphaneleri ile entegreli çalışır.

# Kurulum

ZN dağıtımları için kurulum gerekmez.

↓ composer require znframework/package-hypertext

# Yöntemler

# Özellikler

Tüm form nesneleri için geçerli tüm HTML özellikleri bir yöntemle kullanılabilir.

Html::alt('example')->style('red:color')-> - - -

Yukarıda kullanılan alt(), style() gibi yöntemler input nesnesinin özellik değer çiftini oluşturan yapıları belirlemek için kullanılır. Bu kullanım tüm html elementleri için ortaktır. Her Html:: nesnesi kendi parametreleri dışında bu opsiyonel yöntemler ile de parametre kullanımlarını sağlayabilir. Eğer özellik birden fazla kelime ve aralarında tire(-) içeren bir yapıda ise bu özellik yöntem olarak camelCase yani exampleElement() formunda kullanılır.

Belirtilen sürüm itibari ile aşağıda yer alan tüm Html nesnelerinin $content parametrelerine geriçağrım işlevi uygulanabilir hale getirildi.

@Html::div
({<
    @Html::strong({< @Html::italic('ZN Framework'): >})
>})

# Anchor (ZN >= 1.0.0)

HTML [a] etiketinin kullanımıdır. Link oluşturmak için kullanılır.

@Html::anchor('https://example.xxx', 'Example')
@Html::anchor('https://example.xxx')

Çapa [#] kullanmak için;

@Html::anchor('#comment', 'Yoruma Git')

gibi kullanılır.

Bu güncellemede ':void' kullanımı ile a[hreft="javascript:void(0)"] kullanım özelliği eklenmiştir. 

@Html::anchor(':void', 'Edit')

# Button (ZN >= 1.0.0)

HTML [button] [/button] etiketinin kullanımıdır.

@Html::button('Send')

Bu güncellemede bazı tarayıcılarda [button] nesnesinin type özelliği submit belirtilmediği halde submit gibi tetiklenmesinden dolayı type belirtilmediği sürece ön tanımlı değeri input[type="button"] olarak düzenlenmiştir.

@Html::onclick('ajaxFunc()')->button('Send')

Submit olarak kullanılacak olması durumunda;

@Html::type('submit')->button('Send')

gibi kullanılır.

# Image (ZN >= 1.0.0)

HTML [img] etiketinin kullanımıdır. Resim gösterimi oluşturmak için kullanılır.

@Html::image('image/example.jpg', 200, 200)

# Heading (ZN >= 1.0.0)

HTML [hx]  etiketinin kullanımıdır. Bir metni başlık bilgisi olarak düzenlemek için kullanılır.

@Html::heading('Data')
@Html::heading('Data', 1)
@Html::heading('Data', 2, ['id' => 'example'])

# Font (ZN >= 1.0.0)

HTML [font]  etiketinin kullanımıdır. Metnin font özelliklerini biçimlendirmek için kullanılır.

@Html::font('Data', 9, 'red', 'tahoma')

# Parag (ZN >= 1.0.0)

HTML [p] etiketinin kullanımıdır. Paragraf başı yapmak için kullanılır.

@Html::parag('Metin', ['style' => 'color:red'])

İçerikleri string veri türü yerine geriçağrım işlevi ile de oluşturabilirsiniz.

@Html::parag
({<
    @Html::bold('ZN Framework')
>})

# Bold (ZN >= 1.0.0) / Strong (ZN >= 1.0.8)

HTML [bold] etiketinin kullanımıdır. Yazıyı koyu yazmak için kullanılır.

@Html::bold('Data')
@Html::strong('Data')

# Italic (ZN >= 1.0.0)

HTML [i]  etiketinin kullanımıdır. Eğik yazı yazmak için kullanılır.

@Html::italic('Data')

# UnderLine (ZN >= 1.0.0)

HTML [u]  etiketinin kullanımıdır. Altı çizgili yazmak için kullanılır.

@Html::underline('Data')

# OverLine (ZN >= 1.0.0)

HTML [strike]  etiketinin kullanımıdır. Ortası çizili yazmak için kullanılır

@Html::overline('Data')

# UnderText (ZN >= 1.0.0)

HTML [sub]  etiketinin kullanımıdır. Tabana yazı yazmak için kullanılır.

{{ '10' . Html::undertext('2') }}

# OverText (ZN >= 1.0.0)

HTML [sup] etiketinin kullanımıdır. Üste yazı yazmak için kullanılır.

{{ '10' . Html::overtext('2') }}

# MailTo (ZN >= 1.0.0)

HTML [a:mailto] etiketinin kullanımıdır. Link oluşturmak için kullanılır.

@Html::mailTo('robot@znframework.com', 'Robot')
@Html::mailTo('robot@znframework.com')

# Table (ZN >= 4.0.23)

v.4.0.23 sürümünden önce Table sınıfı ile oluşturulan tablo artık Html kütüphanesi ile yapılabilmektedir.

Ve diğer tablo özellikleri.

echo Html::table()
         ->border(1)
         ->borderColor('red')
         ->create
         (
             [1, 2, 3, 4],
             ['a', 'b' => ['colspan' => 3]]
         );

# Ul / Ol (ZN >= 4.0.23)

Ul ve Ol listesi oluşturmak için kullanılır.

@Html::class('example')->ul(function($list){
    
    echo $list->li('Value1');
    echo $list->li('Value2');
})

# Label (ZN >= 4.0.0)

HTML [label] etiketinin kullanımıdır.

@Html::label('checkBoxId', 'Do you like peas?')
@Form::id('checkBoxId')->checkbox('peas')

İstenirse aşağıdaki gibi de kullanılabilir.

@Html::label('', 
{<
    Do you like peas?
    @Form::checkbox('peas')
>})

# Meta (ZN >= 1.0.0)

HTML [meta] etiketinin kullanımıdır. Meta tagları oluşturmak için kullanılır. 1. parametre string veya array türde veri içerebilir. Çoklu meta tagı kullanımı yapılacaksa 1. parametre dizi türünden kullanılır.

@Html::meta('name:author', 'Ozan UYKUN')
@Html::meta('http:refresh', 5)

Çoklu meta kullanımı için ise aşağıdaki gibi kullanılır.

@Html::meta
([
    'http:refresh' => 5,
    'name:author'  => 'Ozan UYKUN',
    'description'  => 'Meta Example'
])

Anahtar ifadelere, name: veya http: ön eki belirtilmez ise name: ön eki varmış gibi kabul edilir.

# Space (ZN >= 1.0.0)

Belirli sayıda boşluk (nbsp) bırakmak için kullanılır.

Hello{{ Html::space(10) }}brother!

# Br (ZN >= 1.0.0)

Belirli sayıda altsatıra boşluk [br] bırakmak için kullanılır.

Hello{{ Html::br(3) }}brother!

# Audio (ZN >= 1.0.0)

Ses dosyası oynamak için kullanılır.

@Html::controls()->audio(FILES_DIR . 'music.mp3')

# Video (ZN >= 1.0.0)

Görüntü dosyası oynamak için kullanılır.

@Html::controls()->video(FILES_DIR . 'video.mp3')

# Embed (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Canvas (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Aside (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Article (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Footer (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Header (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Nav (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Section (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Hgroup (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Command (ZN >= 1.0.0)

Bu öelşimdiye kadar ana ve en çok kullanılan tarayıcılardan hiçbiri tarafından desteklenmiyor.

# DataList (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Details (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Dialog (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# FigCaption (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Figure (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Keygen (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Mark (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Meter (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Time (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Summary (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Progress (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# Output (ZN >= 1.0.0)

Bu yöntem henüz belgelendirilmemiştir.

# BootstrapMethods (ZN >= 5.8.5)

Html sınıfı bazı Bootstrap bileşenlerini destekleyecek şekilde genişletilmiştir. Aşağıda kullanılan bileşenler listesi verilmiştir.

Bileşenler

Grid düzeni oluşturmak için aşağıdaki kullanım formundan istifade edilir.

Kural: col{sm|md|lg...}[{1-12}](String|Callable $content)

Kullanım

@Html::colsm4('column size 4')->colsm4('column size 4')->colsm4('column size 4')
     ->colsm8('column size 8')->colsm2('column size 2')->colsm2('column size 2')

Kolon genişlik değerlerinin toplamının 12 olması durumunda satır otomatik olarak tamamlanır.

Geriçağrım İşlevi

Yöntem parametre olarak dizge kabul ettiği gibi geriçağrım işlevi de kabul eder.

@Html::collg6({< column size 6 >})->collg6({< column size 6 >})

Bootstrap'ın uyarı amaçlı kullandığı kutuların oluşturulmasını sağlar. Aşağıda uyarısı kutusu oluşturumak için kullanılan yöntemlerin listesi verilmiştir.

Yöntemler

Kullanım

@Html::alertDanger('Hi!')

Kapatma Butonu

Uyarı kutusunun sağ üst köşesinde yer alan kapatma ikonunu(x) oluşturmak için kullanılır.

@Html::dismissButton()->alertWarning('Hi!')

Kapatma Butonu Simgesi

Kapatma butonun simgesini değiştirmek isterseniz parametre vermeniz yeterlidir.

@Html::dismissButton('-')->alertWarning('Hi!')

Kapatma Animasyonu

Uyarı kutusu kapatılırken görünürlük değerinin azalarak kapanmasını sağlayan animasyon oluşturmak için kullanılır.

@Html::dismissFade()->dismissButton()->alertInfo('Hi!')

Geriçağrım İşlevi

@Html::dismissFade()->dismissButton()->alertSuccess
({<
    <h4>Hi!</h4><p>User</p>
>})

Bootstrap'ın uyarı amaçlı kullandığı kutuların oluşturulmasını sağlar. Aşağıda bu bileşenin oluşturumak için kullanılan yöntemlerin listesi verilmiştir.

Yöntemler

Parametreler

$segmentCount = -1

Kullanım

@Html::breadcrumb()

@Html::breadcrumb('Products/Asus/Computer')

Bölüm Sınırlaması

1. parametrenin NULL ayarlamış olması durumunda URI otomatik olarak algılanacağından URI'de yer alan bölümlerden kaçtanesinin algılanması gerektiğini belirtebilirsiniz.

@Html::breadcrumb(NULL, 2)

Bootstrap 4 karusel slider'ını oluşturmak için kullanılır. Aşağıda slider nesnesi için kullanılan yöntemlerin listesi verilmiştir. Karuselin çalışma mantığını daha iyi anlamak için bootstrabın dokümantasyonuna bakınız.

Yöntemler

# Carousel (ZN >= 5.8.5)

Carousel bileşenini oluşturmak için kullanılır.

Parametreler

Kullanım

@Html::item('slide1.jpg')->item('slide2.jpg')->carousel('myCarousel')

# Item (ZN >= 5.8.5)

Slider'a resim eklemek için item() yöntemi kullanılır. 

Kullanım

@Html::item('slide1.jpg')->carousel('myCarousel')

Resim üzerine başlık ve içerik eklemek için;

@Html::item('slide1.jpg', ['caption' => ['Merhaba', 'Sitemize hoşgeldiniz.']])
     ->carousel('myCarousel')

# Indicators (ZN >= 5.8.5)

Slider geçişleri için sliderin alt kısmına geçiş ikonları eklemek için kullanılır.

Parametreler

Kullanım

@Html::indicators()->item('slide1.jpg')->item('slide2.jpg')->carousel('myCarousel')

# Prev / Next (ZN >= 5.8.5)

Slider üzerinde bulunan ileri geri butonlarının ismini değiştirmek için kullanılır.

Parametreler

Kullanım

@Html::prev('Önceki')->next('Sonraki')->item('slide1.jpg')->carousel('myCarousel')

# Transition (ZN >= 5.8.5)

Slider geçiş durumu değiştirmek için kullanılır. Geçişlerin çalışma mantığı ile ilgili detaylı bilgi için tıklayınız.

Parametreler

Kullanım

@Html::transition('pause')->item('slide1.jpg')->item('slide2.jpg')->carousel('myCarousel')

# Interval / Keyboard / Pause / Ride / Wrap (ZN >= 5.8.5)

Karusel ile ilgili seçenekleri değiştirmek için kullanılır. Seçeneklerin çalışma mantığı hakkında detaylı bilgi için tıklayınız.

Parametreler

Kullanım

@Html::interval(800)->keyboard(false)
     ->item('slide1.jpg')->item('slide2.jpg')
     ->carousel('myCarousel')

# On (ZN >= 5.8.5)

Karusel geçiş durumuna göre olay tetikletmek için kullanılır. Olay kullanımı ile ilgili detaylı bilgi için tıklayınız.

Parametreler

Kullanım

@style('css/bootstrap4.css')

@Html::on('slide', {< alert(1); >})
     ->item(FILES_DIR . '1.jpg')
     ->item(FILES_DIR . '2.jpg')
     ->carousel('myCarousel') 

@script('jquery', 'js/bootstrap4.js')

@Html::activeCarouselOptions('myCarousel')

# ActiveCarouselOptions (ZN >= 5.8.5)

Karusel javascript yapılandırmalarının devreye girebilmesi için script dosyalarından sonra kullanılır.

Parametreler

Kullanım

@style('css/bootstrap4.css')

@Html::transition('cycle')
     ->item(FILES_DIR . '1.jpg')
     ->item(FILES_DIR . '2.jpg')
     ->carousel('myCarousel')

@script('jquery', 'js/bootstrap4.js')

@Html::activeCarouselOptions('myCarousel')