Left Icon Right Icon
Squehub SqueHub

🖼️ Views & Blade-like Syntax in Squehub

Views are the presentation layer of your Squehub application. They separate your business logic from the user interface, allowing you to build clean, maintainable, and reusable templates.

🗂️ View Locations & Loading

Squehub supports flexible view loading from multiple directories, enabling modular and maintainable codebases:

  • Framework Root Views Directory: /views/
  • Project-Specific Views Directory: /project/Views/
  • Package Views Directories: Each package under /project/Packages/YourPackage/Views/

Views use the .squehub.php file extension and can be organized into folders like pages/, partials/, or layouts/ to keep your project tidy.

📁 View Directory Structure

Here’s an example of a typical views folder structure:

views/
├── layouts/
│   └── simple.squehub.php
├── partials/
│   └── nav.squehub.php
└── pages/
    └── about.squehub.php

📄 Layout File Example

Layouts define the common page structure — such as <head>, header, footer, and main content areas. Child views inherit layouts and fill in specific content sections. 

// views/layouts/simple.squehub.php
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@yield('title', 'Simple Page')</title>
</head>

<body>

  <header>
    <h1>My Website</h1>
    @include('partials.nav')
  </header>

  <main>
    @yield('content')
  </main>

  <footer>
    &copy; @year My Website
  </footer>

</body>
</html>

🧩 The @extends Directive

The @extends directive allows a view to inherit a layout or parent template. Important: In Squehub, @extends must always be placed at the bottom of your template file. This ensures sections are defined before the parent layout is processed.

📄 Child View Example

Child views extend layouts and define content for each section. This keeps your views DRY (Don’t Repeat Yourself). 

// views/pages/about.squehub.php
@section('title')
  About Us
@endsection

@section('content')
  <h2>About Our Company</h2>
  <p>We build awesome things with Squehub.</p>

  <a href="{{ route('home') }}">Back to Home</a>
@endsection

@extends('layouts.simple')

📦 Includes

Use @include to embed reusable partials like headers, footers, or navigation menus. 

@include('partials.nav')

🔗 Passing Data to @include and @extends

You can pass data explicitly to your included or extended templates by providing an associative array of variables. This enables dynamic and reusable views.

You can optionally pass data to your included or extended templates using associative arrays.

If no variables are passed, Squehub will automatically share all defined view variables with the template, making the second parameter optional.

This feature simplifies view inheritance and keeps your templates clean and dynamic by default.

Example: Passing data to @include

@include('partials.alert', ['type' => 'success', 'message' => 'Operation completed!'])

In views/partials/alert.squehub.php, you can access the passed variables directly: 

<div class="alert alert-{{ $type }}">
  {{ $message }}
</div>

Example: Passing data to @extends

@extends('layouts.simple', ['pageTitle' => 'Welcome Page'])

@section('title')
  {{ $pageTitle }}
@endsection

@section('content')
  <p>This is the welcome page content.</p>
@endsection

In the layouts.simple layout, access the variable $pageTitle as usual: 

<title>{{ $pageTitle ?? 'Default Title' }}</title>

🧩 Sections & Yield

Sections define placeholders inside layouts, and child views fill these placeholders using @section. The layout renders the section’s content via @yield. 

@section('title')
  My Page Title
@endsection

@section('content')
  <h1>Page Content</h1>
@endsection

📨 Form Handling Example

Use forms with the @csrf directive for protection against CSRF attacks. 

<form method="POST" action="/register">
  @csrf

  <label>Email:</label>
  <input type="email" name="email" required>

  <label>Password:</label>
  <input type="password" name="password" required>

  <button type="submit">Register</button>
</form>

🔁 Looping Example

Loop through arrays or collections with @foreach and @endforeach. 

@foreach ($users as $user)
  <p>{{ $user['name'] }} - {{ $user['email'] }}</p>
@endforeach

🧠 Conditional Logic

Write conditionals with @if, @elseif, @else, and @endif directives. 

@if ($user['is_admin'])
  <p>Admin Panel Access</p>
@else
  <p>Standard User</p>
@endif

🧮 Inline PHP

For complex logic or variables, use @php and @endphp to embed PHP code directly. 

@php
  $totalUsers = count($users);
@endphp

<p>Total users: {{ $totalUsers }}</p>

📅 Date & Time Directives

Squehub offers handy directives for current date and time: @year, @month, @date, @time, and @datetime. 

<p>&copy; @year Squehub Framework</p>

🔗 Route URL Usage

Use the route() helper inside views to generate URLs based on named routes. This ensures URLs stay consistent even if route patterns change. 

<a href="{{ route('admin.dashboard') }}">Admin Dashboard</a>

🔔 Notification Messages

Squehub provides a clean way to flash notifications to users using the Notification::flash() method in your controllers or routes. These notifications can then be displayed in views using the @hasNotification('type') directive.

To flash a notification, call: 

// In your controller or route handler
Notification::flash('success', "Registration successful! A verification code has been sent to your email: {$verificationCode}");

Notification::flash('info', "Registration successful, but failed to send email. Error: {$errorMessage}. Please contact support if the issue persists.");

These notifications are stored in the session and can be retrieved in your views. To display them, use the Blade-like directive: 

@hasNotification('success')
  <div class="alert alert-success">{{ $message }}</div>
@endhasNotification

@hasNotification('error')
  <div class="alert alert-danger">{{ $message }}</div>
@endhasNotification
💡 Tip: Create reusable alert partials or components for consistent styling and easy maintenance.

✅ Summary

  • Views can be loaded from the framework root /views/, the project /project/Views/, or any package’s /project/Packages/YourPackage/Views/ directory.
  • Use the .squehub.php file extension for views.
  • Define layouts and extend them using @extends (bottom of the file). Variable passing is optional.
  • Fill sections with @section and render them via @yield in layouts.
  • Embed reusable partials with @include — passing variables is optional.
  • Control rendering with directives like @if, @foreach, and inline PHP blocks.
  • Secure forms with the @csrf directive.
  • Generate URLs using the route('name') helper for maintainable links.
  • Flash and display notifications easily using Notification::flash() and @hasNotification.
  • Use handy date/time helpers such as @year, @month, and @datetime.
;