BladeOneHtml
2.4
إنها مكتبة PHP تسمح بإنشاء النماذج (العرض) بسهولة ونظيف ودون التأثير على الأداء. يستخدم مكتبة BladeOne لعرض العرض. تستخدم هذه المكتبة تبعية واحدة فقط وملفًا واحدًا وليس أكثر.
تعمل هذه المكتبة بطريقتين:
يتطلب الملحن 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=new myBlade();
تضيف هذه المكتبة مجموعة جديدة من العلامات للقالب. تستخدم العلامات وسيطات مسماة، لذا فهي قابلة للتكوين بسهولة.
@<tag>(argument1="value" الوسيطة2='value' الوسيطة3=القيمة الوسيطة4=$variable الوسيطة5=function(), الوسيط6="aaa $aaa")
تستخدم هذه المكتبة وسائط html الأصلية ولكن بعض الوسائط تكون خاصة
| دعوى | وصف | مثال |
|---|---|---|
| نص | ويضيف محتوى بين العلامات. القيمة الداخلية تكون دائمًا غير مقتبسة. | @tag(text="hello") -> <tag>مرحبًا</tag> |
| قبل | يضيف محتوى قبل العلامة | @tag(pre="hello") -> مرحبًا<tag></tag> |
| بريد | ويضيف محتوى بعد العلامة | @tag(post="hello") -> <tag></tag>مرحبًا |
| بين | يضيف محتوى بين العلامات (يعمل بشكل مشابه للنص) | @tag(between="hello") -> <tag>مرحبًا</tag> |
| قيمة | عادةً ما تعمل كـ " قيمة " عادية لـ html ولكنها قد تعمل أيضًا بشكل مختلف (في @textarea تعمل مثل النص ) | @tag(value="hello") -> < tag value="hello"></tag> |
| قيم | تحتاج بعض المكونات إلى قائمة الكائنات/المصفوفات. يتم استخدام هذه الوسيطة لتعيين قائمة القيم | @tag(القيم=دول $) |
| الاسم المستعار | تحتاج بعض المكونات إلى قائمة كائن/صفيف أو تستخدمها. هذه الوسيطة هي للإشارة إلى أي صف داخل القائمة. إذا تم تعيين القيم وكان الاسم المستعار مفقودًا، فسيتم إنشاء اسم مستعار جديد يسمى القيم+"الصف". | @tag(قيم $=$countries الاسم المستعار=$country) @tag($values=$countries ) يفترض أن الاسم المستعار=$countriesRow |
| com.optgroup | يمكن للعلامة @select أن تسرد عناصر مجمعة. يتم استخدام هذه الوسيطة لتعيين التجميع | @tag($values=$countries alias=$country @optgroup=$country->Continent) |
دعنا نقول المثال التالي
@input(value="hello world" type="text" )
يتم تقديمه على النحو
<input value="hello world" type="text" />
إذا كانت العلامة تستخدم متغيرًا للوظيفة، فهذا العرض
@input(value=$hello type="text" )
يتم تحويله إلى
<input value="<?php echo $this->e($hello);?>" type="text" />
يتم استخدام الطريقة $this->e للهروب من الطريقة.
ملاحظة: تسمح هذه المكتبة بأي علامة، حتى العلامات المخصصة (ولكن فقط إذا لم تتعارض مع العلامات الخاصة، راجع الجدول)
@input(القيمة = "مرحبا بالعالم" نوع = "نص" mycustomtag = "مرحبا" )
يتم تحويله إلى
< input value =" hello world " type =" text " mycustomtag =" hi " /> يظهر إدخال HTML.
المثال الأساسي:
@input(id="id1" value="hello world$somevar" type="text" )
يولد حقل مخفي
المثال الأساسي:
@hidden(name="id1" value="hello world$somevar" )
ويظهر تسمية HTML
@label(for="id1" text="hello world:")
وتظهر صورة
@image(src="https://via.placeholder.com/350x150")
يُظهر كائن html محددًا (قائمة منسدلة).
مثال:
@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
ملاحظة 1: @items يتطلب قيم الوسائط في الأصل (@select) وقيمة الوسائط (القيمة القابلة للتحديد) والنص (القيمة المرئية) ملاحظة 2: يتطلب @items معرفًا ، تم تعيينه في نفس العلامة أو في الأصل العلامة (في هذه الحالة، الأصل هو @select) ملاحظة 3: وفقًا للمعايير، يجب أن يكون معرف الوسيطة فريدًا.
@item هي علامة مساعدة تُستخدم داخل العلامات الأخرى. يتصرف هذا اعتمادًا على العلامة الأصلية الخاصة بهم. يضيف سطرًا/صفًا بسيطًا إلى الكائن الأصلي.
مثال:
@select()
@item(value='aaa' text='hello world')
@endselect
فإنه يجعل
<select>
<option value="aaa">hello world</option>
</select>
@items هي علامة نفعية تستخدم داخل بعض العلامات. يتصرف هذا اعتمادًا على العلامة الأصلية الخاصة بهم. يضيف أسطرًا/صفوفًا مضاعفة إلى الكائن الأصلي باستخدام قيم العلامة
ملاحظة: تتطلب هذه العلامة بعض الوسائط:
- يتطلب الأصل (أو هذه العلامة) قيم العلامة
- يتطلب الوالد قيمة العلامة وهي تشير إلى التحديد الحالي (إن وجد)
- يتطلب الأصل (أو هذه العلامة) الاسم المستعار للعلامة إذا كان الاسم المستعار مفقودًا، فإنه يستخدم اسم القيم + "الصف"، أي القيم = المنتج -> الاسم المستعار = ProductRow
- يتطلب الأصل (أو هذه العلامة) معرف العلامة
- سيتم إنشاء "المعرف" المقدم باستخدام هذا المعرف+"_"+"معرف الصف". على سبيل المثال id="idproduct" => idproduct_0, idproduct_1
- لماذا؟ ذلك لأن المعرف يجب أن يكون فريدًا (مواصفات html)
على سبيل المثال، إذا كانت $countries عبارة عن قائمة بالكائنات، فعندئذٍ:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country->id text=$country->name)
@endselect
إذا كانت $countries عبارة عن قائمة من المصفوفات، فعندئذٍ:
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country['id'] text=$country['name'])
@endselect
داخل عناصر العلامة، يمكنك استخدام المتغيرات التالية
| المتغير (حيث القيم هي المتغير المستخدم) | مواصفة |
|---|---|
| القيم $ OptGroup | يقوم بتخزين مجموعة optgroup الحالية (إن وجدت). مثال: $productOptGroup |
| مفتاح القيم $ | يشير إلى المفتاح الحالي للصف الحالي. مثال: مفتاح المنتج $ |
| الاسم المستعار $ (إذا لم يتم تعيين الاسم المستعار، فإنه يستخدم صف القيم $ ) | الصف الحالي للمتغير. مثال: $productRow |
يبدأ مجموعة اختيارية (حدد)
مثال:
@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
ملاحظة: يجب أن تنتهي هذه العلامة بالعلامة @endoptgroup
ويضيف خانة اختيار واحدة
مثال:
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
ويضيف زر اختيار واحد
مثال:
@radio(id="idsimple" value="1" checked="1" post="it is a selection")
يرسم منطقة النص.
مثال:
@textarea(id="aaa" value="3333 3333 aaa3333 ")
إنه يرسم زرًا
مثال:
@button(value="click me" type="submit" class="test" onclick='alert("ok")')
ويضيف ارتباطا تشعبيا
مثال:
@link(href="https://www.google.cl" text="context")
تظهر قائمة بمربعات الاختيار
@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
يعرض قائمة بأزرار الاختيار
@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
يقوم بإنشاء قيمة إدخال الملف
@file(name="file" value="123.jpg" post="hello world")
ملاحظة: يعرض أيضًا ملفًا مخفيًا بالاسم "name"+"_file" بالقيمة الأصلية
فإنه يولد قائمة غير مصنفة
@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
فإنه يولد قائمة مرتبة
@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
فإنه يولد ترقيم الصفحات. يتطلب bootstrap3 أو bootstrap4 أو bootstrap5.
يمكنك العثور على مثال على example/examplepagination.php
كود PHP
$ current = isset ( $ _GET [ ' _page ' ]) ? $ _GET [ ' _page ' ] : 1 ;
echo $ blade -> run ( " examplepagination " ,
[ ' totalpages ' => count ( $ products )
, ' current ' => $ current
, ' pagesize ' => 10
, ' products ' => $ items
]);نموذج
@pagination(numpages=$totalpages current=$current pagesize=$pagesize urlparam='_page')ملاحظة: الصفحة هي الأساس 1. ملاحظة: يتم استخدام الوسيطة urlparam لإنشاء الرابط (domain.dom/web.php?_page=999)
يمكنك تغيير اسم الزرين السابق والتالي كما يلي:
$ this -> setTranslation ([ ' pagination ' =>[ ' prev ' => ' <<> ' , ' next ' => ' > ' ]]);
فإنه يجعل الجدول
@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
يعرض رأس الجدول (اختياري). يتم عرض كل خلية تضاف داخلها كعلامة HTML "th".
يعرض نص الجدول (اختياري). يتم عرض كل خلية تضاف داخل الجدول كعلامة HTML "td".
يعرض تذييل الجدول (اختياري). يتم عرض كل خلية تضاف داخلها كعلامة HTML "th".
يولد صفاً داخل الجسم
يعرض خلية داخل رأس الطاولة أو جسم الطاولة (صفوف الطاولة) أو تذييل الطاولة
يتم عرضه وإضافته إلى المربع
< head >
@cssbox
</ head > باستخدام الطريقة addCss($css,$name)
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); يمكن أن يكون $css رابطًا أو علامة رابط
$name اختياري ولكنه يتجنب إضافة التكرارات. إذا أضفنا ملف CSS جديدًا بنفس اسم الاسم السابق، فسيتم تجاهله.
يعرض جميع روابط JavaScript المضافة إلى المربع
< body >
<!-- our page -->
@jsbox
</ body > باستخدام الأسلوب addJs($script,$name)
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); < body >
<!-- our page -->
@jsbox <!-- we could load jquery here -->
@jscodebox(ready)
</ body >يضيف هذا الرمز العلامات <script> تلقائيًا.
تشير الوسيطة جاهزة إلى ما إذا كنا نريد تنفيذ الوظيفة عندما يكون المستند جاهزًا.
كيفية إضافة كود JavaScript جديد إلى jscodebox ؟
$ blade -> addJsCode ( ' alert("hello"); ' );يسمح BladeOneHtml بتعديل العلامات المستخدمة وتعيين فئات افتراضية لكل فئة.
يمكنك تعيين فئة وعلامات افتراضية لـ Bootstrap 3/4/5 باستخدام الطريقة التالية (اختر واحدًا فقط).
// 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 ); أو يمكنك إنشاء العلامات والفئات الخاصة بك
$ blade -> defaultClass [ $ tagname ]= ' default class ' ; $ blade -> pattern [ ' nametag ' ]= ' pattern ' ;حيث يمكن أن تكون علامة الاسم على النحو التالي
| اسم | وصف | مثال | شفرة |
|---|---|---|---|
| nametag | يستخدم النمط الذي سيتم استخدامه عند استخدام العلامة | مدخل | {{pre}}<input{{inner}} >{{between}}< /input>{{post}} |
| nametag_empty | يستخدم النظام هذا النمط إذا كان المحتوى (بين/النص) فارغًا أو لم يتم تعيينه (علامة الإغلاق الذاتي). إذا لم يتم تعيينها، فسيستخدم النظام علامة الاسم حتى لو كان المحتوى فارغًا | input_empty | {{قبل} < الإدخال{{inner}} />{{post}} |
| nametag_item | يستخدم النظام هذا النمط للعلامات @item و@items | حدد_العنصر | < option{{inner}} >{{between}</option> |
| nametag_end | يستخدم هذا النمط عندما يجب إغلاق العلامة | form_end | < / النموذج> |
| عامل | توضيح | هرب (*) |
|---|---|---|
| {{قبل}} | الكود الموجود قبل العلامة : pre <tag </tag> | لا |
| {{بريد}} | الكود الموجود بعد الوسم: <tag></tag> post | لا |
| {{داخلي}} | السمات الموجودة داخل العلامة: <العلامة داخل > </tag> | نعم |
| {{بين}} | المحتوى بين العلامة : < العلامة > بين </tag> | بشكل افتراضي يتم هروب هذه القيمة ولكن يمكن أن يكون من غير الممكن الهروب منها |
| {{بطاقة تعريف}} | سمة المعرف (يتم تضمينها أيضًا في {{inner}}): < معرف العلامة > </tag> | نعم |
| {{اسم}} | سمة الاسم (يتم تضمينها أيضًا في {{inner}}): < اسم العلامة > </tag> | نعم |
مثال على العلامة العادية:
$ blade -> pattern [ ' input ' ]= ' {{pre}}<input{{inner}} >{{between}}</input>{{post}} ' ;ملاحظة :(*) ما الذي هرب؟. على سبيل المثال، النص ""، إذا تم تخطيه، فسيتم عرضه كـ "<hello>"
من الممكن إضافة سمة مخصصة يمكن استخدامها داخل النمط.
على سبيل المثال، دعونا نضيف علامة مخصصة تسمى customtag
$ blade -> customAttr [ ' customtag ' ]= ' This attr is missing! ' ;
$ blade -> pattern [ ' alert ' ]= ' {{pre}}<div {{inner}}><h1>{{customtag}}</h1>{{between}}</div>{{post}} ' ;وفي الرأي
@alert(text="hi there" class="alert-danger" customtag="it is a custom tag") < br >
@alert(text="hi there" class="alert-danger" ) < br > تحتوي المكتبة على عدد من الطرق التي يمكن استخدامها لتهيئة المكتبة وتكوينها. فهي اختيارية.
يقوم بتعيين الأنماط والفئات لتكون متوافقة مع bootstrap 4.
إذا كانت الوسيطة صحيحة، فإنها تضيف CSS إلى مربع CSS من CDN
الكود الخاص بنا
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >يقوم بتعيين الأنماط والفئات لتكون متوافقة مع bootstrap 4.
إذا كانت الوسيطة صحيحة، فإنها تضيف CSS إلى مربع CSS من CDN
الكود الخاص بنا
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >يقوم بتعيين الأنماط والفئات لتكون متوافقة مع bootstrap 3.
إذا كانت الوسيطة صحيحة، فإنها تضيف CSS إلى مربع CSS من CDN
$ blade -> useBootstrap3 ( true ); يقوم بإضافة CSS إلى مربع CSS
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' ); يضيف رابط جافا سكريبت إلى مربع JS
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' );يضيف كود جافا سكريبت إلى مربع JS
$ blade -> addJsCode ( ' alert("hello"); ' );إنها قائمة الحقول العامة للفئة. الحقول عامة لأنه لغرض الأداء (مقابل استخدام أداة الضبط والحروف)
يقوم بتخزين قائمة الأنماط التي يستخدمها الكود
$ this -> pattern [ ' sometag ' ]= ' {{pre}}<tag {{inner}}>{{between}}</tag>{{post}} ' ;ملاحظة: راجع "متغير النمط داخل الكود" للاطلاع على قائمة متغيرات النمط
تمت إضافة فئة CSS الافتراضية إلى علامة محددة.
$ this -> defaultClass [ ' sometag ' ]= ' classred classbackgroundblue ' ;يضيف إضافات مخصصة يمكن استخدامها مع $this->pattern
$ this -> customAttr [ ' customtag ' ]= ' XXXXX ' ; // So we could use the tag {{customtag}}. 'XXXXX' is the default valueتقوم السمة المخصصة دائمًا بإزالة علامات الاقتباس وعلامات الاقتباس المزدوجة، لذلك إذا كانت القيمة لدينا هي "مرحبًا" -> مرحبًا
من الممكن إضافة نمط جديد عن طريق توسيع فئة PHP.
$this->pattern['mynewtag']='<mycustomtag {{inner}}>{{between}}</mycustomtag>';
يمكنك إنشاء فئة أو سمة PHP جديدة وتوسيع فصلنا. داخل هذه البنية الجديدة، يجب عليك إضافة طريقة جديدة مع البنية التالية
باستخدام فئة جديدة
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.
}
}استخدام سمة (موصى به، لماذا؟ لأن السمة أكثر مرونة)
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
}لإنشاء طريقة أصل، يجب عليك دفع قيمة جديدة داخل $this->htmlItem. يمكنك تخزين ما تريد.
$ 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 );
}هدفنا هو تقديم كود PHP، وليس تقييم الكود. على سبيل المثال، إذا كان $args['somearg']=$variable، فإن القيمة لدينا هي $variable (كنص)، بغض النظر عن القيمة الحقيقية للمتغير.
يجب عليك أيضًا إنشاء طريقة لإنهاء الحاوية، ويجب علينا أيضًا إضافة نمط جديد.
$ 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
}يمكن لعناصرنا معرفة ما إذا كانت موجودة داخل علامة مع العملية التالية
$ parent = end ( $ this -> htmlItem );يمكننا إنشاء مكون يتطلب CSS وJavaScript.
على سبيل المثال منتقي التاريخ.
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 );
}ملاحظة: من الأفضل إضافة مكتبة jQuery ومنتقي التاريخ مرة واحدة في الكود الخاص بنا
