CodeIgnitor: HTML Helper


Đăng ký nhận thông báo về những video mới nhất

Helper này có chứa các hàm hỗ trợ cho ta khi làm việc với HTML.

Tải HTML Helper

$this->load->helper('html');

Các hàm hiện có của HTML Helper

heading($data, $h, $attributes)

Tham số:
  • $data (string) – Nội dung
  • $h (string) – Mức tiêu đề
  • $attributes (mixed) – Các thuộc tính HTML
Trả về:

Thẻ Heading

Kiểu trả về:

string

Hàm này dùng để tạo các thẻ tiêu đề HTML, trong đó tham số đầu tiên là nội dung mà thẻ chứa, tham số thứ hai là mức tiêu đề của thẻ. Ví dụ:

echo heading('Welcome!', 3);

// Sẽ tạo ra: <h3>Welcome!</h3>

Ngoài ra, để thêm các thuộc tính cho thẻ heading như là class, id hay style thì ta sử dụng tham số thứ 3 của hàm và thể hiện nó ở dạng mảng hoặc chuỗi. Ví dụ:

echo heading('Welcome!', 3, 'class="pink"');
echo heading('How are you?', 4, array('id' => 'question', 'class' => 'green'));

//Sẽ tạo ra:

<h3 class="pink">Welcome!<h3>
<h4 id="question" class="green">How are you?</h4>

img($src, $index_page, $attributes)

Tham số:
  • $src (string) – Nguồn ảnh
  • $index_page (bool) – Có thiết lập $src như là một URI định tuyến hay không
  • $attributes (array) – Các thuộc tính HTML
Trả về:

Thẻ <img>

Kiểu trả về:

 string

Hàm này dùng để tạo thẻ <img />. Tham số đầu tiên chứa nguồn của ảnh. Ví dụ:

echo img('public/images/article/picture.jpg'); // gives <img src="http://site.com/public/images/article/picture.jpg" />

Tham số tùy chọn thứ hai chứa giá trị TRUE hoặc FALSE dùng để xác định xem nguồn ảnh có được dùng trong $config['index_page'] hay không. Ví dụ:

echo img('public/images/article/picture.jpg', TRUE);

// Sẽ tương đương: <img src="http://site-của-bạn.com/index.php/public/images/article/picture.jpg" alt="" />

Ngoài ra, ta co thể dùng tham số thứ 3 để cung cấp các thuộc tính cho thẻ <img>. Nếu bạn không cung cấp giá trị cho thuộc tính alt thì nó sẽ được gán một chuỗi rỗng. Ví dụ:

$image_properties = array(
        'src'   => 'public/images/article/picture.jpg',
        'alt'   => 'Me, demonstrating how to eat 4 slices of pizza at one time',
        'class' => 'post_public/images/article',
        'width' => '200',
        'height'=> '200',
        'title' => 'That was quite a night',
        'rel'   => 'lightbox'
);

img($image_properties);
//Sẽ tạo ra: <img src="http://site.com/index.php/public/images/article/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_public/images/article" width="200" height="200" title="That was quite a night" rel="lightbox" />

link_tag($href, $rel, $type, $title, $media, $index_page)

Tham số:
  • $href (string) – URL liên kết tới tập tin CSS
  • $rel (string) – Kiểu quan hệ
  • $type (string) – Kiểu tài liệu quan hệ
  • $title (string) – Tiêu đề link
  • $media (string) – Kiểu media
  • $index_page (bool) – Có áp dụng $src cho chuỗi URI định tuyến hay không
Trả về:

Thẻ <link />

Kiểu trả về:

 string

Hàm này dùng để tạo thẻ <link />. Ví dụ:

echo link_tag('css/mystyles.css');
//Sẽ tạo ra: <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" />

echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
//Sẽ tạo ra: <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />

echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
//Sẽ tạo ra: <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" />

Ngoài ra, ta có thể sử dụng mảng để tạo các thuộc tính và truyền vào cho hàm link() như ví dụ sau:

$link = array(
        'href'  => 'css/printer.css',
        'rel'   => 'stylesheet',
        'type'  => 'text/css',
        'media' => 'print'
);

echo link_tag($link);

//Sẽ tạo ra: <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" />

ul($list, $attributes)

Tham số:
  • $list (array) – Danh sách các <li> với các text tương ứng
  • $attributes (array) – Các thuộc tính HTML
Trả về:

Thẻ <ul> và các thẻ con <li>

Kiểu trả về:

 string

Hàm này cho phép bạn tạo thẻ <ul> và các thẻ con <li>. Ví dụ:

$list = array(
        'red',
        'blue',
        'green',
        'yellow'
);

$attributes = array(
        'class' => 'boldlist',
        'id'    => 'mylist'
);

echo ul($list, $attributes);

//Sẽ tạo ra:

<ul class="boldlist" id="mylist">
  <li>red</li>
  <li>blue</li>
  <li>green</li>
  <li>yellow</li>
</ul>

Còn dưới đây là ví dụ phức tạp hơn dùng mảng đa chiều:

$attributes = array(
        'class' => 'boldlist',
        'id'    => 'mylist'
);

$list = array(
        'colors'  => array(
                'red',
                'blue',
                'green'
        ),
        'shapes'  => array(
                'round',
                'square',
                'circles' => array(
                        'ellipse',
                        'oval',
                        'sphere'
                )
        ),
        'moods'  => array(
                'happy',
                'upset' => array(
                        'defeated' => array(
                                'dejected',
                                'disheartened',
                                'depressed'
                        ),
                        'annoyed',
                        'cross',
                        'angry'
                )
        )
);

echo ul($list, $attributes);

//Đoạn mã trên sẽ tạo ra:

<ul class="boldlist" id="mylist">
        <li>colors
                <ul>
                        <li>red</li>
                        <li>blue</li>
                        <li>green</li>
                </ul>
        </li>
        <li>shapes
                <ul>
                        <li>round</li>
                        <li>suare</li>
                        <li>circles
                                <ul>
                                        <li>elipse</li>
                                        <li>oval</li>
                                        <li>sphere</li>
                                </ul>
                        </li>
                </ul>
        </li>
        <li>moods
                <ul>
                        <li>happy</li>
                        <li>upset
                                <ul>
                                        <li>defeated
                                                <ul>
                                                        <li>dejected</li>
                                                        <li>disheartened</li>
                                                        <li>depressed</li>
                                                </ul>
                                        </li>
                                        <li>annoyed</li>
                                        <li>cross</li>
                                        <li>angry</li>
                                </ul>
                        </li>
                </ul>
        </li>
</ul>

ol($list, $attributes)

Tham số:
  • $list (array) – Danh sách các thẻ <li> với các text tương ứng
  • $attributes (array) – Các thuộc tính của <ol>
Trả về:

Thẻ <ol> với các thẻ con <li>

Kiểu trả về:

 string

Hàm này tương tự như hàm ul(), chỉ khác ở chỗ nó tạo ra thẻ <ol> thay vì thẻ <ul>.

meta($name, $content, $type, $newline)

Tham số:
  • $name (string) – Tên thẻ <meta>
  • $content (string) – Nội dung thẻ <meta>
  • $type (string) – Kiểu thẻ <meta>
  • $newline (string) – Ký tự xuống dòng
Trả về:

Thẻ <meta>

Kiểu trả về:

 string

Hàm này giúp ta tạo thẻ <meta>. Ta có thể truyền các chuỗi tới hàm, hoặc một mảng đơn hoặc mảng đa chiều. Ví dụ:

echo meta('description', 'My Great site');
// Sẽ tạo ra:  <meta name="description" content="My Great Site" />

echo meta('Content-type', 'text/html; charset=utf-8', 'equiv');
// Lưu ý: tham số thứ 3 có thể là "equiv" hoặc "name"
// Sẽ tạo ra:  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

echo meta(array('name' => 'robots', 'content' => 'no-cache'));
// Sẽ tạo ra:  <meta name="robots" content="no-cache" />

$meta = array(
        array(
                'name' => 'robots',
                'content' => 'no-cache'
        ),
        array(
                'name' => 'description',
                'content' => 'My Great Site'
        ),
        array(
                'name' => 'keywords',
                'content' => 'love, passion, intrigue, deception'
        ),
        array(
                'name' => 'robots',
                'content' => 'no-cache'
        ),
        array(
                'name' => 'Content-type',
                'content' => 'text/html; charset=utf-8', 'type' => 'equiv'
        )
);

echo meta($meta);

// Sẽ tạo ra:

// <meta name="robots" content="no-cache" />
// <meta name="description" content="My Great Site" />
// <meta name="keywords" content="love, passion, intrigue, deception" />
// <meta name="robots" content="no-cache" />
// <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

doctype($type)

Tham số:

$type (string) – Tên của <!doctype>

Trả về:

Khai báo <!doctype>

Kiểu trả về:

 string

Thẻ này dùng để tạo khai báo <!doctype> hoặc các DTD, mặc định là XHTML 1.0 Strict. Ví dụ:

echo doctype();
//Sẽ tạo ra: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

echo doctype('html4-trans');
//Sẽ tạo ra: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dưới đây là một danh sách các lựa chọn doctype, ta có thể cấu hình và lấy nó từ application/config/doctypes.php:

Document type Tùy chọn Sẽ cho ra
XHTML 1.1 xhtml11 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>
XHTML 1.0 Strict xhtml1-strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
XHTML 1.0 Transitional xhtml1-trans <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
XHTML 1.0 Frameset xhtml1-frame <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
XHTML Basic 1.1 xhtml-basic11 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd“>
HTML 5 html5 <!DOCTYPE html>
HTML 4 Strict html4-strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
HTML 4 Transitional html4-trans <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
HTML 4 Frameset html4-frame <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>
MathML 1.01 mathml1 <!DOCTYPE math SYSTEM “http://www.w3.org/Math/DTD/mathml1/mathml.dtd“>
MathML 2.0 mathml2 <!DOCTYPE math PUBLIC “-//W3C//DTD MathML 2.0//EN” “http://www.w3.org/Math/DTD/mathml2/mathml2.dtd“>
SVG 1.0 svg10 <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN” “http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd“>
SVG 1.1 Full svg11 <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
SVG 1.1 Basic svg11-basic <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1 Basic//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd“>
SVG 1.1 Tiny svg11-tiny <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1 Tiny//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd“>
XHTML+MathML+SVG (XHTML host) xhtml-math-svg-xh <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN” “http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd“>
XHTML+MathML+SVG (SVG host) xhtml-math-svg-sh <!DOCTYPE svg:svg PUBLIC “-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN” “http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd”>
XHTML+RDFa 1.0 xhtml-rdfa-1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.0//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd“>
XHTML+RDFa 1.1 xhtml-rdfa-2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.1//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd“>

br($count)

Tham số:

$count (int) – Số lượng thẻ <br /> muốn tạo

Trả về:

Thẻ <br/>

Kiểu trả về:

 string

Hàm này dùng để tạo thẻ <br />). Ví dụ:

echo br(3);

//Sẽ tạo ra:

<br /><br /><br />

Lưu ý là hàm này không còn được khuyến khích dùng nữa, ta nên dùng hàm str_repeat() kết hợp với thẻ <br /> để thay thế.

nbs($num)

Tham số:

$num (int) – Số lượng dấu cách (space) muốn tạo

Trả về:

Các dấu cách (non-breaking space)

Kiểu trả về:

 string

Hàm này dùng để tạo các dấu cách (&nbsp). Ví dụ:

echo nbs(3);

//Sẽ tạo ra:

&nbsp;&nbsp;&nbsp;

Lưu ý là hàm này không còn được khuyến khích dùng nữa, thay vào đó ta nên dùng hàm str_repeat() kết hợp với &nbsp; để thay thế.


Nếu bạn có điều thắc mắc, bạn hãy comment cho V1Study để được giải đáp.
Bài viết này được chia sẻ bởi LongDT. Nếu bạn muốn chia sẻ bài viết, bạn hãy Đăng ký làm thành viên!
« Prev
Next »
Copied !!!