Views & Layouts

Views are responsible for rendering HTML to the user. The Mini Framework supports layouts, components, and Tailwind CSS for building beautiful, maintainable user interfaces.

Creating Views

Views are PHP files located in app/Views/. They can be organized in subdirectories for better organization.

Basic View Structure

<?php
// app/Views/home.php
?>
<!DOCTYPE html>
<html>
<head>
    <title>Views & Layouts
</head>
<body>
    <h1>Welcome
    <p><?php echo $message ?? ''; ?>

</body>
</html>

Returning Views from Controllers

// In controller
public function index(Request $request)
{
    return $this->view('home', [
        'title' => 'Welcome',
        'message' => 'Hello, World!'
    ]);
}

Layouts

Layouts allow you to define a common structure for your pages. This eliminates code duplication and makes maintenance easier.

Creating a Layout

Layouts are stored in app/Views/layouts/:

<?php
// app/Views/layouts/main.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Views & Layouts
    <script src="https://cdn.tailwindcss.com">
</head>
<body class="bg-gray-50">
    
    <nav class="bg-white shadow-md">
        <div class="max-w-7xl mx-auto px-4 py-4">
            <a href="/" class="text-xl font-bold">My App
        </div>
    </nav>

    
    <main class="max-w-7xl mx-auto px-4 py-8">
        <?php echo $content ?? ''; ?>
    </main>

    
    <footer class="bg-gray-800 text-white mt-16 py-8">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p>© 2026 My App

        </div>
    </footer>
</body>
</html>

Using Layouts in Views

<?php
// app/Views/home.php
use Core\View;

View::layout('main');
?>

<div class="bg-white p-6 rounded-lg shadow-md">
    <h1 class="text-3xl font-bold mb-4">Views & Layouts
    <p class="text-gray-600">

</div>
💡 Note: The layout system automatically wraps your view content. Make sure to call View::layout() at the top of your view file.

Components

Components are reusable view snippets that can be included in multiple views. They're perfect for navigation bars, footers, cards, and other repeated elements.

Creating a Component

<?php
// app/Views/components/navbar.php
?>
<nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <a href="/" class="text-xl font-bold text-blue-600"><?php echo $siteName ?? 'My App'; ?></a>
        <div class="space-x-4">
            <a href="/" class="text-gray-700 hover:text-blue-600">Home</a>
            <a href="/about" class="text-gray-700 hover:text-blue-600">About</a>
            <a href="/contact" class="text-gray-700 hover:text-blue-600">Contact</a>
        </div>
    </div>
</nav>

Including Components

<?php
// In any view file
use Core\View;

// Include component with data
View::component('navbar', ['siteName' => 'My Awesome App']);

// Or without data
View::component('navbar');
?>

Tailwind CSS Integration

The framework is designed to work seamlessly with Tailwind CSS via CDN. Simply include the Tailwind CDN in your layout.

Adding Tailwind to Layout

<!-- In your layout file -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

Example View with Tailwind

<?php
// app/Views/users/index.php
use Core\View;

View::layout('main');
?>

<div class="container mx-auto px-4 py-8">
   < h1 class="text-3xl font-bold mb-6">Users</h1>
    
    <div class="grid md:grid-cols-3 gap-6">
        <?php foreach ($users as $user): ?>
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold mb-2">?php echo htmlspecialchars($user['name']); ?></h2>
            <p class="text-gray-600">?php echo htmlspecialchars($user['email']); ?></p>
            <a href="/users/?php echo $user['id']; ?>" 
               class="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                View Profile
            </a>
        </div>
        <?php endforeach; ?>
    </div>
</div>

View Organization

Organize your views in subdirectories to match your controller structure: 

app/Views/
├── home.php              # Homepage
├── about.php             # About page
├── users/
│   ├── index.php         # List users
│   ├── show.php          # Show single user
│   └── create.php        # Create user form
├── products/
│   ├── index.php
│   └── show.php
├── components/
│   ├── navbar.php
│   ├── footer.php
│   └── card.php
└── layouts/
    └── main.php

Referencing Nested Views

// In controller
return $this->view('users.index', ['users' => $users]);
return $this->view('users.show', ['user' => $user]);
return $this->view('products.index', ['products' => $products]);

Passing Data to Views

Data is passed to views as an associative array. All keys become variables in the view: 

// In controller
return $this->view('users.show', [
    'user' => $user,
    'title' => 'User Profile',
    'posts' => $posts,
    'isAdmin' => true
]);

// In view (users/show.php)
<h1>?php echo $title; ?>/h1>
<p>Name: ?php echo htmlspecialchars($user['name']); ?>/p>

<?php if ($isAdmin): ?>
    a href="/admin">Admin Panel/a>
<?php endif; ?>

<?php foreach ($posts as $post): ?>
    div>?php echo htmlspecialchars($post['title']); ?>/div>
<?php endforeach; ?>
⚠️ Security: Always use htmlspecialchars() when outputting user data to prevent XSS attacks.

Complete Example

Layout (app/Views/layouts/main.php)

<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>?php echo $title ?? 'My App'; ?>/title>
    <script src="https://cdn.tailwindcss.com">/script>
</head>
<body class="bg-gray-50">
    <?php \Core\View::component('navbar'); ?>
    
    <main class="max-w-7xl mx-auto px-4 py-8">
        <?php echo $content ?? ''; ?>
    </main>
    
    <?php \Core\View::component('footer'); ?>
</body>
</html>

View (app/Views/users/index.php)

 <?php
use Core\View;

View::layout('main');
?>

<div class="bg-white rounded-lg shadow-md p-6">
    <h1 class="text-3xl font-bold mb-6">Users/h1>
    
    <div class="grid md:grid-cols-2 gap-4">
        <?php foreach ($users as $user): ?>
        <div class="border rounded p-4">
            <h2 class="text-xl font-semibold">?php echo htmlspecialchars($user['name']); ?>/h2>
            <p class="text-gray-600">?php echo htmlspecialchars($user['email']); ?>/p>
        </div>
        <?php endforeach; ?>
    </div>
</div>

Next Steps

Now that you understand views, learn about: