Html Kütüphanesi


    × Bunları biliyor muydunuz?
"Basit bir konsol komutu ile projenin orijinal haline dokunmadan restorasyon çalışması yapabilirsiniz."


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 SE ve ZN CE dağıtımları için terminal kurulum komutu.

↓ composer require znframework/package-hypertext

 

 

# Yöntemler


1.0.0 String element(String $element, Mixed $content = NULL, Array $attr = [])
1.0.2 String multiAttr(Mixed $content, Array $array = [])
1.0.0 String heading(Mixed $content, Int $type = 3, Array $attr = [])
1.0.0 String font(Mixed $content, String $size = NULL, String $color = NULL, String $face = NULL)
1.0.0 String parag(Mixed $content, Array $array = [])
1.0.0 String bold(Mixed $content, Array $array = [])
1.0.0 String strong(Mixed $content, Array $array = [])
1.0.0 String italic(Mixed $content, Array $array = [])
1.0.0 String underLine(Mixed $content, Array $array = [])
1.0.0 String overLine(Mixed $content, Array $array = [])
1.0.0 String underText(Mixed $content, Array $array = [])
1.0.0 String overText(Mixed $content, Array $array = [])
1.0.0 String anchor(String $url, String $value = NULL, Array $attr = [])
1.0.0 String mailTo(String $mail, String $value = NULL, Array $attr = [])
1.0.0 String image(String $src, Int $width = NULL, Int $height = NULL, Array $attr = [])
1.0.0 String meta(Mixed $name, Mixed $content = NULL)
4.0.2.3 Object table(Void)
4.3.6 String ul / ol(Callable $list, Array $attributes = [])
5.8.5 String bootstrapMethods(Mixed ...$pararameters)
4.0.0 String label(String $for, String $value = NULL, String $form = NULL, Array $attr = [])
1.0.0 String space(Int $count = 4)
1.0.0 String br(Int $count = 1)
1.0.0 String audio(String $src, Mixed $content = NULL, Array $attr = [])
1.0.0 String video(String $src, Mixed $content = NULL, Array $attr = [])
1.0.0 String embed(String $src, Array $attr = [])
1.0.0 String source(String $src, Array $attr = [])
1.0.0 String canvas(String $src, Array $attr = [])
1.0.0 String aside(Mixed $content)
1.0.0 String article(Mixed $content)
1.0.0 String footer(Mixed $content)
1.0.0 String header(Mixed $content)
1.0.0 String nav(Mixed $content)
1.0.0 String section(Mixed $content)
1.0.0 String hgroup(Mixed $content)
1.0.0 String command(Mixed $content, Array $attributes = [])
1.0.0 String dataList(Mixed $content, Array $attributes = [])
1.0.0 String details(Mixed $content, Array $attributes = [])
1.0.0 String dialog(Mixed $content, Array $attributes = [])
1.0.0 String figCaption(Mixed $content, Array $attributes = [])
1.0.0 String figure(Mixed $content, Array $attributes = [])
1.0.0 String keygen(Array $attributes = [])
1.0.0 String mark(Mixed $content, Array $attributes = [])
1.0.0 String meter(Mixed $content, Array $attributes = [])
1.0.0 String time(Mixed $content, Array $attributes = [])
1.0.0 String summary(Mixed $content, Array $attributes = [])
1.0.0 String progress(Mixed $content, Array $attributes = [])
1.0.0 String output(Mixed $content, Array $attributes = [])

 

 

# Ö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.

Geriçağrım İşlevi (5.8.5.4)

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'): >})
>})
<div><strong><em>ZN Framework--em></strong></div>

 

 

# Element (ZN >= 1.0.0)


Herhangi bir html biçim etiketi uygulamak için kullanılır.

Parametreler
String $element Element.
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::element('u', 'Data')
@Html::element('i', 'Data')
@Html::element('strong', 'Data', ['id' => 'example'])
Metin
Metin
Data

 

 

# Multiattr (ZN >= 1.0.2)


Belirtilen veriye birden fazla elementi aynı anda uygulamak için kullanılır.

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::multiAttr('Data', ['u' , 'i' , 'b'])
@Html::multiAttr('Data', ['u' , 'i' => ['id' => 2]])
Data
Data

 

 

# 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.

Parametreler
Mixed $content İçerik.
Int $type = 3 Başlık boyut türü. 1 - 6
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::heading('Data')
@Html::heading('Data', 1)
@Html::heading('Data', 2, ['id' => 'example'])

Data

Data

Data

 

 

# Font (ZN >= 1.0.0)


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

Parametreler
Mixed $content İçerik.
Int $size = NULL Boyut.
String $color = NULL Renk.
String $face = NULL Font.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::font('Data', 9, 'red', 'tahoma')
Data

 

 

# Parag (ZN >= 1.0.0)


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

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::parag('Metin', ['style' => 'color:red'])
Data
Geriçağrım İşlevi (5.8.5.4)

İç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.

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::bold('Data')
@Html::strong('Data')
Data
Data

 

 

# Italic (ZN >= 1.0.0)


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

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::italic('Data')
Data

 

 

# UnderLine (ZN >= 1.0.0)


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

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::underline('Data')
Data

 

 

# OverLine (ZN >= 1.0.0)


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

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::overline('Data')
Data

 

 

# UnderText (ZN >= 1.0.0)


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

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
{{ '10' . Html::undertext('2') }}

 

 

# OverText (ZN >= 1.0.0)


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

Parametreler
Mixed $content İçerik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
{{ '10' . Html::overtext('2') }}

 

 

# Anchor (ZN >= 1.0.0)


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

 

Parametreler
String $url URL
String $value Görünen isim. Bu parametre boş geçilirse değer olarak 1. parametre değerini alır.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::anchor('https://example.xxx', 'Example')
@Html::anchor('https://example.xxx')

 

 

# MailTo (ZN >= 1.0.0)


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

Parametreler
String $url URL
String $value Görünen isim. Bu parametre boş geçilirse değer olarak 1. parametre değerini alır.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::mailTo('robot@znframework.com', 'Robot')
@Html::mailTo('robot@znframework.com')

 

 

# Image (ZN >= 1.0.0)


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

Parametreler
String $url URL.
Int $width Genişlik.
Int $height Yükseklik.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Kullanımı
@Html::image('image/example.jpg', 200, 200)

 

 

# 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.

Parametreler
Mixed $type = 'name' name veya http değerleridir.
Array $attributes = NULL Özellik değer çiftleri.
Return String
Örnekler
@Html::meta('name:author', 'Ozan UYKUN')
@Html::meta('http:refresh', 5)
Çoklu Meta Kullanımı

Ç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.

 

 

# 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.

Parametreler
Void
Return Object
Opsiyonel Yöntemler
This attr(Array $attributes)
This cell(Int $spacing, Int $padding)
This border(Int $border, String $color = NULL)
This size(Int $width, Int $height)
This style(Array $attributes)

Ve diğer tablo özellikleri.

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

 

 

# Ul / Ol (ZN >= 4.0.23)


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

Parametreler
Callable $list Liste içeriği oluşturmak gönderilen geriçağrım işlevi.
Array $attributes = [] Liste nesnesine özellik eklemek için kullanılır.
Return String
Kullanımı
 Dosya: Views/Home/main.wizard.php
@Html::class('example')->ul(function($list){
    
    echo $list->li('Value1');
    echo $list->li('Value2');
})

 

 

# 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.

Uyarı: Bootstrap'ın javascript ve css kaynak dosyalarının dahil edilmesi gerekmektedir.

Bileşenler

5.8.5 Gridsystem
5.8.5 Alert
5.8.5 Breadcrumb
5.8.5 Carousel
# Gridsystem (ZN >= 5.8.5)

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

Dosya: Views/Home/main.wizard.php
@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 >})
# Alert (ZN >= 5.8.5)

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

5.8.5 Mixed alertType(Mixed $content)
5.8.5 This dismissButton(Mixed $content = 'x')
5.8.5 This dismissFade(Void)

Kullanım

Dosya: Views/Home/main.wizard.php
@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>
>})
# Breadcrumb (ZN >= 5.8.5)

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

5.8.5 String breadcrumb(String $uri = NULL, Int $segmentCount = -1)

Parametreler

String $uri = NULL Bu değerin NULL olması durumunda URI::active() yönteminin değerini kabul eder. Doğrudan URI üzerinden çalışmasını istiyorsanız bu değeri NULL ayarlayın.
Int
$segmentCount = -1
URI'de yer alan bölümlerden en fazla kaçının dahil olacağı belirtilir. Ön tanımlı olarak tüm bölümler dahil edilir.

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)
# Carousel (ZN >= 5.8.5)

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

5.8.5 String carousel(String $id = auto)
5.8.5 This item(String $file, Array $attributes = [])
5.8.5 This indicators(Void)
5.8.5 This prev / next(String $name)
5.8.5 This transition(String $type)
5.8.5 This interval / keyboard / pause / ride / wrap(Mixed $value)
5.8.5 This on(String $parameter, Mixed $callback)
5.8.5 String activeCarouselOptions(String $id)

# Carousel (ZN >= 5.8.5)

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

Parametreler

String $id = auto Herhangi bir parametre belirtilmez ise Carousel deyimi ile başlayan md5 ile şifrelenmiş bir id tanımlanır. 
Return String  

Kullanım

Dosya: Views/Home/main.wizard.php
@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. 

String $file Gösterilecek resim dosyasının yolu.
Array $attributes = [] Resme bazı özellikler eklemek için kullanılır.
Array caption[Başlık, Yazı] Görselin üzerine yazı eklemek için kullanılır. Örn: 'caption' => ['Title', 'Content']
String alt [img] nesnesinin alt değerini belirtmek için kullanılır. Bu değer belirtilmez ise resmin adı varsayılan değer kabul edilir. 
String class [img] nesnesine css sınıfı uygulamak için kullanılır.
Return This  

Kullanım

Dosya: Views/Home/main.wizard.php
@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

Void
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@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

String $name Buton'un yazısı.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@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.

Uyarı: Bu kullanım javascript yapılandırması gerektirdiği için ilgili scriptlerin dahil edilmesinden sonra Html::activeCarouselOptions('id') yönteminin kullanılması gerekmektedir.

Parametreler

Scalar $type Türler. cycle, pause, prev, next, dispose, number.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@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.

Uyarı: Bu kullanım javascript yapılandırması gerektirdiği için ilgili scriptlerin dahil edilmesinden sonra Html::activeCarouselOptions('id') yönteminin kullanılması gerekmektedir.

Parametreler

Mixed $value İlgili seçeneğin kabul ettiği değerlerden biri. Bu değerlerin neler olduğu hakkında detaylı bilgi için bir üsteki bağlantıya tıklayınız.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@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.

Uyarı: Bu kullanım javascript yapılandırması gerektirdiği için ilgili scriptlerin dahil edilmesinden sonra Html::activeCarouselOptions('id') yönteminin kullanılması gerekmektedir.

Parametreler

String $event Olayın hangi durumda tetikleneceği.
slide Geçiş esnasında olay tetiklenir.
slid Geçiş tamamlandıktan sonra olay tetiklenir.
Mixed  $callback Olay tetiklendiğinde çalıştırılacak kodlar.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@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

String $id Yapılandırmaları devreye sokulacak karuselin id değeri.
Return String

Kullanım

Dosya: Views/Home/main.wizard.php
@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')