Ý tưởng: phát triển từng khối giao diện với html, sau đó thay thế các text tĩnh, link hình ảnh bằng biến PHP. Nhờ đó, team backend có thể tích hợp vào backend nhanh chóng, chỉ cần include file template & truyền biến vào

Team backend sẽ sử dụng template của bạn như thế này:

<?php
lw_view('/path/to/template/file.php', [
    'title' => 'Các tiện tích dành cho khách hàng',
    'image' => 'http://url.to/image.png'
])

Cấu trúc thư mục static

Quy trình thực hiện

1. Xem khối giao diện được yêu cầu.
2. Code giao diện tĩnh trong file php
3. Thay thế các phần text bằng biến php

Ví dụ về code một khối giao diện

Hàm lw_default_value trả về giá trị mặc định nếu biến chưa được set

<?php
/**
 * @var $image
 * @var $title
 * @var $link
 * @var $excerpt
 */
$image = lw_default_value($image, './images/placeholder.jpg');
$title = lw_default_value($title, 'There’s no I in team, but there’s one in “team branding”');
$link = lw_default_value($link, '#');
$excerpt = lw_default_value($excerpt, 'There’s no I in team, but there’s one in “team branding”');
?>
<div class="max-w-md">
    <div class="rounded-3 group pt-1/1 relative bg-cover text-white"
         style="background-image: url(<?php echo $image; ?>)">
        <div class="rounded-3 group-hover:bg-opacity-80 transition-all absolute inset-0 bg-primary bg-opacity-30"></div>
        <a href="<?php echo $link; ?>" class="absolute inset-0 flex items-center">
            <div class="p-16">
                <h3 class="font-bold font-heading z-40 mb-16 text-24"><?php echo $title; ?></h3>
                <div class="z-40"><?php echo $excerpt; ?></div>
            </div>
        </a>
    </div>
</div>

Xem video