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=새로운 myBlade();
이 라이브러리는 템플릿에 대한 새로운 태그 세트를 추가합니다. 태그는 명명된 인수를 사용하므로 쉽게 구성할 수 있습니다.
@<tag>(argument1="값" 인수2='값' 인수3=값 인수4=$변수 인수5=함수(), 인수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에서는 text 처럼 작동함). | @tag(value="hello") -> < 태그 값="hello"></tag> |
| 가치 | 일부 구성요소에는 객체/배열 목록이 필요합니다. 이 인수는 값 목록을 설정하는 데 사용됩니다. | @tag(값=$국가) |
| 별명 | 일부 구성 요소에는 개체/배열 목록이 필요하거나 사용됩니다. 이 인수는 목록 내의 모든 행을 참조하는 것입니다. 값이 설정되었지만 별칭이 누락된 경우 값+"행"이라는 새 별칭이 생성됩니다. | @tag($values=$countries 별칭=$country) @tag($values=$countries ) alias=$countriesRow로 가정합니다. |
| 선택 그룹 | @select 태그는 그룹화된 요소를 나열할 수 있습니다. 이 인수는 그룹화를 설정하는 데 사용됩니다. | @tag($values=$countries 별칭=$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(value="hello world" type="text" mycustomtag="hi" )
로 변환됩니다.
< 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에는 동일한 태그 또는 상위 태그에 할당된 id가 필요합니다. 태그(이 경우 상위는 @select입니다.) 참고 3: 표준에 따라 인수 ID는 고유해야 합니다.
@item은 다른 태그 내부에 사용되는 유틸리티 태그입니다. 이는 상위 태그에 따라 동작합니다. 상위 개체에 간단한 선/행을 추가합니다.
예:
@select()
@item(value='aaa' text='hello world')
@endselect
그것은 렌더링
<select>
<option value="aaa">hello world</option>
</select>
@items는 일부 태그 내부에 사용되는 실용적인 태그입니다. 이는 상위 태그에 따라 동작합니다. 태그 값을 사용하여 상위 개체에 여러 줄/행을 추가합니다.
참고: 이 태그에는 몇 가지 인수가 필요합니다.
- 상위(또는 이 태그)에는 태그 값이 필요합니다.
- 상위에는 태그 값이 필요합니다. 현재 선택 항목을 나타냅니다(있는 경우).
- 상위(또는 이 태그)에는 별칭 태그가 필요합니다. 별칭이 없으면 값 이름 + "행"을 사용합니다. 즉, 값=제품 -> 별칭= 제품Row
- 상위(또는 이 태그)에는 태그 ID가 필요합니다.
- 렌더링된 "id"는 이 id+"_"+"행의 id"를 사용하여 생성됩니다. 즉 id="idproduct" => idproduct_0, idproduct_1
- 왜? ID가 고유해야 하기 때문입니다(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
태그 항목 내에서 다음 변수를 사용할 수 있습니다.
| 변수(여기서 값은 사용된 변수) | 사양 |
|---|---|
| $values OptGroup | 현재 optgroup(있는 경우)을 저장합니다. 예: $productOptGroup |
| $values 키 | 현재 행의 현재 키를 나타냅니다. 예: $productKey |
| $alias(별칭이 설정되지 않은 경우 $values Row를 사용함) | 변수의 현재 행입니다. 예: $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 태그로 렌더링됩니다.
테이블의 본문을 렌더링합니다(선택 사항). 테이블 내부에 추가된 각 셀은 "td" HTML 태그로 렌더링됩니다.
테이블의 바닥글을 렌더링합니다(선택 사항). 그 안에 추가된 각 셀은 "번째" HTML 태그로 렌더링됩니다.
본문 내부에 행을 생성합니다.
테이블헤드, 테이블본체(테이블행) 또는 테이블바닥글 내부의 셀을 렌더링합니다.
상자에 렌더링 및 CSS가 추가되었습니다.
< head >
@cssbox
</ head > addCss($css,$name) 메소드 사용
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); $css는 링크 또는 링크 태그일 수 있습니다.
$name 은 선택 사항이지만 중복 항목을 추가하는 것을 방지합니다. 이전 CSS와 동일한 이름을 가진 새 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> 태그를 자동으로 추가합니다.
Ready 인수는 문서가 준비되었을 때 함수를 실행할지 여부를 나타냅니다.
jscodebox 에 새로운 JavaScript 코드를 추가하는 방법은 무엇입니까?
$ 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 ' ;이름 태그는 다음과 같습니다.
| 이름 | 설명 | 예 | 암호 |
|---|---|---|---|
| 이름표 | 태그를 사용할 때 사용하는 패턴을 사용합니다. | 입력 | {{pre}}<input{{inner}} >{{between}}< /input>{{post}} |
| 이름 태그_비어 있음 | 콘텐츠(사이/텍스트)가 비어 있거나 설정되지 않은 경우(자체 닫기 태그) 시스템은 이 패턴을 사용합니다. 설정하지 않으면 콘텐츠가 비어 있어도 시스템에서 이름 태그를 사용합니다. | 입력_비어 있음 | {{pre}}< 입력{{inner}} />{{post}} |
| 이름태그_항목 | 시스템은 @item 및 @items 태그에 이 패턴을 사용합니다. | select_item | < 옵션{{내부}} >{{사이}}< /옵션> |
| 이름표_끝 | 태그를 닫아야 할 때 이 패턴을 사용합니다. | 양식_끝 | < /양식> |
| 변하기 쉬운 | 설명 | 이스케이프됨(*) |
|---|---|---|
| {{pre}} | 태그 앞의 코드: pre <tag ></tag> | 아니요 |
| {{우편}} | 태그 뒤의 코드: < tag ></tag> post | 아니요 |
| {{안의}} | 태그 내부 속성: < 태그 내부 > </tag> | 예 |
| {{사이}} | 태그 사이의 내용: < 태그 > 사이 </tag> | 기본적으로 이 값은 이스케이프됩니다. 하지만 이스케이프되지 않을 수 있습니다 |
| {{ID}} | id 속성({{inner}}에도 포함됨): < tag id > </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 > 라이브러리에는 라이브러리를 초기화하고 구성하는 데 사용할 수 있는 다양한 메서드가 있습니다. 선택 사항입니다.
부트스트랩 4와 호환되도록 패턴과 클래스를 설정합니다.
인수가 true이면 CDN의 CSS 상자 에 CSS를 추가합니다.
우리의 코드
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >부트스트랩 4와 호환되도록 패턴과 클래스를 설정합니다.
인수가 true이면 CDN의 CSS 상자 에 CSS를 추가합니다.
우리의 코드
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >부트스트랩 3과 호환되도록 패턴과 클래스를 설정합니다.
인수가 true이면 CDN의 CSS 상자 에 CSS를 추가합니다.
$ 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"); ' );클래스의 공개 필드 목록입니다. 성능 목적으로 인해(setter 및 getter를 사용하는 것과 비교하여) 필드는 공개됩니다.
코드에서 사용되는 패턴 목록을 저장합니다.
$ 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사용자 정의 속성은 항상 따옴표와 큰따옴표를 제거하므로 값이 "hello" -> hello인 경우
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 및 날짜 선택기 라이브러리를 한 번 추가하는 것이 더 좋습니다.
