BladeOneHtml
2.4
Ini adalah perpustakaan PHP yang memungkinkan untuk membuat formulir (tampilan) dengan mudah, bersih dan tanpa mematikan kinerja. Ia menggunakan perpustakaan BladeOne untuk merender tampilan. Perpustakaan ini hanya menggunakan satu ketergantungan, satu file dan tidak lebih.
Perpustakaan ini bekerja dalam dua cara:
komposer memerlukan eftec/ BladeOneHtml
include " vendor/autoload.php " ;
use eftec bladeone BladeOne ;
use eftec BladeOneHtml BladeOneHtml ;
class myBlade extends BladeOne {
use BladeOneHtml ;
}
$ blade = new myBlade ();
// for our example:
$ myvalue =@ $ _REQUEST [ ' myform ' ];
echo $ blade -> run ( " exampleview " , [ ' myvalue ' => $ myvalue ]); < body >
@form()
@input(type="text" name="myform" value=$myvalue)
@button(type="submit" value="Send")
@endform()
</ body >$blade=baru myBlade();
Pustaka ini menambahkan serangkaian tag baru untuk templat. Tag menggunakan argumen bernama, sehingga mudah dikonfigurasi.
@<tag>(argument1="value" argument2='value' argument3=value argument4=$variable argument5=function(), argument6="aaa $aaa")
Pustaka ini menggunakan argumen html asli tetapi beberapa argumen bersifat khusus
| Argumen | Keterangan | contoh |
|---|---|---|
| teks | Itu menambahkan konten di antara tag. Nilai batin selalu tidak dikutip. | @tag(teks="halo") -> <tag>halo</tag> |
| pra | Itu menambahkan konten sebelum tag | @tag(pre="halo") -> halo<tag></tag> |
| pos | Itu menambahkan konten setelah tag | @tag(post="halo") -> <tag></tag>halo |
| di antara | Ia menambahkan konten di antara tag (cara kerjanya mirip dengan teks) | @tag(antara="halo") -> <tag>halo</tag> |
| nilai | Biasanya ini berfungsi sebagai " nilai " normal html tetapi juga dapat berfungsi secara berbeda (di @textarea berfungsi seperti text ) | @tag(nilai="halo") -> < tag nilai="halo"></tag> |
| nilai-nilai | Beberapa komponen memerlukan daftar objek/array. Argumen ini digunakan untuk menetapkan daftar nilai | @tag(nilai=$negara) |
| alias | Beberapa komponen memerlukan atau menggunakan daftar objek/array. Argumen ini untuk mereferensikan baris mana pun di dalam daftar. Jika nilai disetel dan alias tidak ada, maka akan dibuat alias baru yang disebut nilai+"Baris". | @tag($nilai=$negara alias=$negara) @tag($values=$countries ) diasumsikan alias=$countriesRow |
| optgroup | Tag @select dapat mencantumkan elemen yang dikelompokkan. Argumen ini digunakan untuk mengatur pengelompokan | @tag($values=$negara alias=$negara @optgroup=$negara->benua) |
Katakanlah contoh berikutnya
@input(value="hello world" type="text" )
Itu diterjemahkan sebagai
<input value="hello world" type="text" />
Jika tag menggunakan variabel fungsi, maka tampilan ini
@input(value=$hello type="text" )
Dikonversi menjadi
<input value="<?php echo $this->e($hello);?>" type="text" />
Metode $this->e digunakan untuk keluar dari metode ini.
Catatan: Pustaka ini mengizinkan tag apa pun, bahkan tag khusus (tetapi hanya jika tag tersebut tidak bertentangan dengan tag khusus, lihat tabel)
@input(value="halo dunia" type="teks" mycustomtag="hai" )
Dikonversi menjadi
< input value =" hello world " type =" text " mycustomtag =" hi " /> Ini menunjukkan HTML masukan.
Contoh dasar:
@input(id="id1" value="hello world$somevar" type="text" )
Ini menghasilkan bidang tersembunyi
Contoh dasar:
@hidden(name="id1" value="hello world$somevar" )
Ini menunjukkan label html
@label(for="id1" text="hello world:")
Ini menunjukkan sebuah gambar
@image(src="https://via.placeholder.com/350x150")
Ini menunjukkan objek html pilihan (daftar dropdown).
Contoh:
@select(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items( id="chkx" value=$country->id text=$country->name)
@endselect
Catatan 1: @items memerlukan nilai argumen di induk (@select) dan nilai argumen (nilai yang dapat dipilih) dan teks (nilai yang terlihat) Catatan 2: @items memerlukan id , yang ditetapkan dalam tag yang sama atau di induk tag (dalam hal ini, induknya adalah @select) Catatan 3: Secara standar, argumen id harus unik.
@item adalah tag utilitas yang digunakan di dalam tag lain. Ini berperilaku tergantung pada tag induknya. Itu menambahkan garis/baris sederhana ke objek induk.
Contoh:
@select()
@item(value='aaa' text='hello world')
@endselect
Itu terjadi
<select>
<option value="aaa">hello world</option>
</select>
@items adalah tag utilitarian yang digunakan di dalam beberapa tag. Ini berperilaku tergantung pada tag induknya. Itu menambahkan beberapa baris/baris ke objek induk menggunakan nilai tag
Catatan: Tag ini memerlukan beberapa argumen:
- induk (atau tag ini) memerlukan nilai tag
- induk memerlukan nilai tag. Ini menunjukkan pilihan saat ini (jika ada)
- induk (atau tag ini) memerlukan tag alias Jika alias tidak ada maka menggunakan nama nilai + "Baris", yaitu nilai=produk -> alias= productRow
- induk (atau tag ini) memerlukan id tag
- "Id" yang dirender akan dibuat menggunakan id+"_"+"id baris" ini. yaitu id="idproduk" => idproduk_0, idproduk_1
- Mengapa? Itu karena idnya harus unik (spesifikasi html)
Contoh, jika $countries adalah sebuah daftar objek maka :
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country->id text=$country->name)
@endselect
Jika $countries adalah daftar array maka:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country['id'] text=$country['name'])
@endselect
Di dalam item tag, Anda bisa menggunakan variabel berikutnya
| variabel (di mana nilai adalah variabel yang digunakan) | Spesifikasi |
|---|---|
| $nilai OptGroup | Ini menyimpan optgroup saat ini (jika ada). Contoh: $productOptGroup |
| Kunci $values | Ini menunjukkan kunci saat ini dari baris saat ini. Contoh: $productKey |
| $alias (jika alias tidak disetel maka menggunakan $values Row) | Baris variabel saat ini. Contoh: $productRow |
Ini memulai grup opsional (pilih)
Contoh:
@select(id="aaa" value=$selection values=$countries alias=$country)
@optgroup(label="group1")
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@endoptgroup
@endselect
Catatan: tag ini harus diakhiri dengan tag @endoptgroup
Itu menambahkan satu kotak centang
Contoh:
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
Ia menambahkan satu tombol radio
Contoh:
@radio(id="idsimple" value="1" checked="1" post="it is a selection")
Ini menggambar area teks.
Contoh:
@textarea(id="aaa" value="3333 3333 aaa3333 ")
Itu menarik sebuah tombol
Contoh:
@button(value="click me" type="submit" class="test" onclick='alert("ok")')
Itu menambahkan hyperlink
Contoh:
@link(href="https://www.google.cl" text="context")
Ini menunjukkan daftar kotak centang
@checkboxes(id="checkbox1" value=$selection alias=$country)
@item(id="aa1" value='aaa' text='hello world' post="<br>")
@item(id="aa2" value='aaa' text='hello world2' post="<br>")
@items(values=$countries value='id' text='name' post="<br>")
@endcheckboxes
Ini menunjukkan daftar tombol radio
@radios(id="radios1" name="aaa" value=$selection alias=$country)
@item(value='aaa' text='hello world' post="<br>")
@item(value='aaa' text='hello world2' post="<br>")
@items(values=$countries value='id' text='name' post="<br>")
@endradios
Ini menghasilkan nilai input file
@file(name="file" value="123.jpg" post="hello world")
Catatan: ini juga merender file tersembunyi dengan nama "name"+"_file" dengan nilai aslinya
Ini menghasilkan daftar yang tidak disortir
@ul(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items(value=$country->id text=$country->name)
@endul
Ini menghasilkan daftar yang diurutkan
@ol(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items(value=$country->id text=$country->name)
@endol
Ini menghasilkan pagination. Itu membutuhkan bootstrap3, bootstrap4 atau bootstrap5.
Anda dapat menemukan contohnya di example/examplepagination.php
kode PHP
$ current = isset ( $ _GET [ ' _page ' ]) ? $ _GET [ ' _page ' ] : 1 ;
echo $ blade -> run ( " examplepagination " ,
[ ' totalpages ' => count ( $ products )
, ' current ' => $ current
, ' pagesize ' => 10
, ' products ' => $ items
]);Templat
@pagination(numpages=$totalpages current=$current pagesize=$pagesize urlparam='_page')Catatan: Halamannya adalah basis 1. Catatan: argumen urlparam digunakan untuk membangun tautan (domain.dom/web.php?_page=999)
Anda dapat mengubah nama tombol prev dan next sebagai berikut:
$ this -> setTranslation ([ ' pagination ' =>[ ' prev ' => ' <<> ' , ' next ' => ' > ' ]]);
Itu membuat sebuah tabel
@table(class="table" values=$countries alias=$country border="1")
@tablehead
@cell(text="id")
@cell(text="cod")
@cell(text="name")
@endtablehead
@tablebody(id='hello world' )
@tablerows(style="background-color:azure")
@cell(text=$country->id style="background-color:orange")
@cell(text=$country->cod )
@cell(text=$country->name)
@endtablerows
@endtablebody
@tablefooter
@cell(text="id" colspan="3")
@endtablefooter
@endtable
Itu membuat header tabel (opsional). Setiap sel yang ditambahkan di dalamnya, dirender sebagai tag HTML "th".
Ini merender isi tabel (opsional). Setiap sel yang ditambahkan ke dalam tabel dirender sebagai tag HTML "td".
Ini merender footer tabel (opsional). Setiap sel yang ditambahkan di dalamnya, dirender sebagai tag HTML "th".
Ini menghasilkan baris di dalam tubuh
Itu membuat sel di dalam tablehead, tablebody (tablerows) atau tablefooter
Itu dirender dan css ditambahkan ke dalam kotak
< head >
@cssbox
</ head > Menggunakan metode addCss($css,$nama)
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); $css bisa berupa tautan atau tag tautan
$name bersifat opsional tetapi menghindari penambahan duplikat. Jika kita menambahkan CSS baru dengan nama yang sama dengan yang sebelumnya, maka akan diabaikan.
Itu merender semua tautan JavaScript yang ditambahkan ke kotak
< body >
<!-- our page -->
@jsbox
</ body > Menggunakan metode addJs($script,$name)
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); < body >
<!-- our page -->
@jsbox <!-- we could load jquery here -->
@jscodebox(ready)
</ body >Kode ini menambahkan tag <script> secara otomatis.
Argumen ready menunjukkan apakah kita ingin menjalankan fungsi tersebut ketika dokumen sudah siap.
Bagaimana cara menambahkan kode JavaScript baru ke dalam jscodebox ?
$ blade -> addJsCode ( ' alert("hello"); ' );BladeOneHtml memungkinkan untuk mengubah tag yang digunakan dan menetapkan kelas default untuk setiap kelas.
Anda dapat mengatur kelas dan tag default untuk Bootstrap 3/4/5 menggunakan metode selanjutnya (pilih satu saja).
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap5 ( true );
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap4 ( true );
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap3 ( true ); Atau Anda bisa membuat tag dan kelas Anda sendiri
$ blade -> defaultClass [ $ tagname ]= ' default class ' ; $ blade -> pattern [ ' nametag ' ]= ' pattern ' ;Dimana nametagnya bisa sebagai berikut
| Nama | Keterangan | Contoh | Kode |
|---|---|---|---|
| papan nama | Ia menggunakan pola yang akan digunakan saat tag digunakan | masukan | {{pre}}<input{{inner}} >{{between}}< /input>{{post}} |
| papan nama_kosong | Sistem menggunakan pola ini jika konten (antara/teks) kosong atau tidak disetel (tag tutup sendiri). Jika tidak disetel, maka sistem akan menggunakan nametag meskipun isinya kosong | masukan_kosong | {{pre}}< masukan{{inner}} />{{post}} |
| label nama_item | Sistem menggunakan pola ini untuk tag @item dan @items | pilih_item | < option{{inner}} >{{between}}< /option> |
| papan nama_akhir | Ia menggunakan pola ini ketika tag harus ditutup | bentuk_akhir | < /bentuk> |
| variabel | penjelasan | Lolos (*) |
|---|---|---|
| {{pra}} | Kode sebelum tag : sebelum <tag ></tag> | TIDAK |
| {{pos}} | Kode setelah tag : < tag ></tag> postingan | TIDAK |
| {{batin}} | Atribut yang ada di dalam tag : < tag di dalam > </tag> | Ya |
| {{di antara}} | Isi di antara tag : < tag > di antara </tag> | Secara default, nilai ini di-escape tapi itu bisa saja tidak bisa dihindari |
| {{pengenal}} | Atribut id (juga disertakan dalam {{inner}}): < tag id > </tag> | Ya |
| {{nama}} | Atribut nama (juga disertakan dalam {{inner}}): < tag nama > </tag> | Ya |
Contoh tag biasa:
$ blade -> pattern [ ' input ' ]= ' {{pre}}<input{{inner}} >{{between}}</input>{{post}} ' ;Catatan :(*) Apa yang lolos?. Misalnya teks "", jika lolos maka ditampilkan sebagai "<hello>"
Dimungkinkan untuk menambahkan atribut khusus yang dapat digunakan di dalam suatu pola.
Misalnya, mari tambahkan tag khusus yang disebut customtag
$ blade -> customAttr [ ' customtag ' ]= ' This attr is missing! ' ;
$ blade -> pattern [ ' alert ' ]= ' {{pre}}<div {{inner}}><h1>{{customtag}}</h1>{{between}}</div>{{post}} ' ;Dan dalam tampilan
@alert(text="hi there" class="alert-danger" customtag="it is a custom tag") < br >
@alert(text="hi there" class="alert-danger" ) < br > Perpustakaan memiliki sejumlah metode yang dapat digunakan untuk menginisialisasi dan mengkonfigurasi perpustakaan. Itu opsional.
Ini menetapkan pola dan kelas agar kompatibel dengan bootstrap 4.
jika argumennya benar, maka ia menambahkan CSS ke kotak css dari CDN
Kode kita
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >Ini menetapkan pola dan kelas agar kompatibel dengan bootstrap 4.
jika argumennya benar, maka ia menambahkan CSS ke kotak css dari CDN
Kode kita
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >Ini menetapkan pola dan kelas agar kompatibel dengan bootstrap 3.
jika argumennya benar, maka ia menambahkan CSS ke kotak css dari CDN
$ blade -> useBootstrap3 ( true ); Itu menambahkan CSS ke kotak css
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' ); Itu menambahkan tautan javascript ke kotak js
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' );Itu menambahkan kode javascript ke kotak js
$ blade -> addJsCode ( ' alert("hello"); ' );Ini adalah daftar bidang publik kelas. Bidang bersifat publik karena untuk tujuan kinerja (dibandingkan menggunakan penyetel dan pengambil)
Ini menyimpan daftar pola yang digunakan oleh kode
$ this -> pattern [ ' sometag ' ]= ' {{pre}}<tag {{inner}}>{{between}}</tag>{{post}} ' ;Catatan: lihat "Variabel Pola di dalam kode" untuk melihat daftar variabel pola
Kelas CSS default ditambahkan ke tag tertentu.
$ this -> defaultClass [ ' sometag ' ]= ' classred classbackgroundblue ' ;Itu menambahkan penambahan khusus yang dapat digunakan bersama dengan $this->pattern
$ this -> customAttr [ ' customtag ' ]= ' XXXXX ' ; // So we could use the tag {{customtag}}. 'XXXXX' is the default valueAtribut custom selalu menghilangkan tanda kutip dan tanda kutip ganda, jadi jika nilai kita "hello" -> hello
Dimungkinkan untuk menambahkan pola baru dengan memperluas kelas PHP.
$this->pattern['mynewtag']='<mycustomtag {{inner}}>{{between}}</mycustomtag>';
Anda dapat membuat kelas atau sifat PHP baru dan memperluas kelas kami. Di dalam struktur baru ini, Anda harus menambahkan metode baru dengan struktur berikutnya
Menggunakan kelas baru
use eftec bladeone BladeOne ;
use eftec BladeOneHtml BladeOneHtml ;
class MyBlade extends BladeOne {
use BladeOneHtml ;
}
class MyClass extends MyBlade {
protected function compileMyNewTag ( $ expression ) { // the method must be called "compile" + your name of tag.
$ args = $ this -> getArgs ( $ expression ); // it separates the values of the tags
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
// your custom code here
return $ this -> render ( $ args , ' mynewtag ' , $ result ); // we should indicate to use our pattern.
}
}Menggunakan trait (direkomendasikan, kenapa? Karena trait lebih fleksibel)
trait MyTrait {
protected function compileMyNewTag ( $ expression ) { // the method must be called "compile" + your name of tag.
$ args = $ this -> getArgs ( $ expression ); // it separates the values of the tags
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
// your custom code here
return $ this -> render ( $ args , ' mynewtag ' , $ result ); // we should indicate to use our pattern.
}
}
class MyClass extends BladeOne {
use BladeOneHtml ;
use MyTrait; // <-- our trait
}Untuk membuat metode induk, Anda harus memasukkan nilai baru ke dalam $this->htmlItem. Anda dapat menyimpan apa pun yang Anda inginkan.
$ this -> pattern [ ' mynewtag ' ]= ' <mycustomtag {{inner}}>{{between}} ' ; protected function compileMyNewTag ( $ expression ) {
$ args = $ this -> getArgs ( $ expression ); // it loads and separates the arguments.
$ this -> htmlItem [] = [ ' type ' => ' mynewtag ' , ' value ' => @ $ args [ ' value ' ]
];
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
//unset($args['value']); // we could unset values that we don't want to be rendered.
return $ this -> render ( $ args , ' select ' , $ result );
}Tujuan kami adalah merender kode PHP, bukan mengevaluasi kode. Misalnya, jika $args['somearg']=$variable, maka nilai kita adalah $variable (sebagai teks), berapa pun nilai sebenarnya dari variabel tersebut.
Anda juga harus membuat metode untuk mengakhiri container, dan kita juga harus menambahkan pola baru.
$ this -> pattern [ ' mynewtag_end ' ]= ' </mycustomtag> ' ; protected function compileEndNewTag () {
$ parent = @ array_pop ( $ this -> htmlItem ); // remove the element from the stack
if ( is_null ( $ parent ) || $ parent [ ' type ' ]!== ' newtag ' ) { // if no element in the stack or it's a wrong one then error
$ this -> showError ( " @endnewtag " , " Missing @initial tag " , true );
}
// our code
return $ this -> pattern [ $ parent [ ' type ' ] . ' _end ' ]; // renders the element of the stack
}Item kami dapat mengetahui apakah item tersebut berada di dalam tag pada operasi berikutnya
$ parent = end ( $ this -> htmlItem );Kita bisa membuat komponen yang membutuhkan CSS dan JavaScript.
Misalnya pemilih tanggal.
protected function compileDatePicker ( $ expression ) {
$ args = $ this -> getArgs ( $ expression ); // it loads and separates the arguments.
array_push ( $ this -> htmlItem , [ ' type ' => ' mynewtag ' , ' value ' => @ $ args [ ' value ' ]]);
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
if (! isset ( $ args [ ' id ' ])) {
$ this -> showError ( " @datepicker " , " Missing @id tag " , true );
}
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); // our script needs jquery (if it is not loaded)
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' );
$ this -> addjscode ( ' $(. ' . $ args [ ' id ' ]. ' ).datepicker(); ' );
//unset($args['value']); // we could unset values that we don't want to be rendered.
return $ this -> render ( $ args , ' select ' , $ result );
}Catatan: Lebih baik menambahkan perpustakaan jQuery dan pemilih tanggal satu kali dalam kode kita
