CandidTemplate Docs

Getting Started: Build a Simple App

This guide walks you through building a simple page using CandidTemplate. We will create a basic "User List" page.

---

1. Folder Structure

views/
 ├── layout.html
 ├── users.html
 └── data.php

---

2. Create Layout

views/layout.html


<html>
<body>

  <h1>My App</h1>

  <div data-slot="content"></div>

</body>
</html>

---

3. Create Page Template

views/users.html


<h2>Users</h2>

<ul id="users">
  <li>
    <span id="name"></span>
  </li>
</ul>

---

4. Add Data File

views/data.php


$users = [
    ['name' => 'John'],
    ['name' => 'Jane'],
    ['name' => 'Tamil']
];

foreach ($users as $u) {
    $item = $this->addLoopItem('users');
    $item->pick('name')->content($u['name']);
}

---

5. Main PHP File


use Hadleen\CandidTemplate\CandidTemplateAdaptor;

$tpl = (new CandidTemplateAdaptor('views'))
    ->bind('layout.html');

$tpl->slot('content', 'users');
$tpl->addDataFile('data.php');

echo $tpl->build()->render();

---

6. Output


My App

Users
- John
- Jane
- Tamil

---

7. What Happened?

Layout loaded
Users template injected into slot
Loop created using data file
Final HTML rendered

---

8. Add Styling (Optional)


<ul class="list-group">

---

9. Next Steps

Use includes for reusable components
Use nested layouts for complex pages
Use Vue for dynamic UI

---

Sample Application

Download ---

You just built your first CandidTemplate app 🎉