# **Chapter 8: Master Files - Creating Page Layouts**
> **File Extension Reference:**
> - Gate Files: `*.gate.php` (e.g., `Index.gate.php`)
> - Front Files: `*.front` (e.g., `index_main.front`)
> - Master Files: `*.mast.php` (e.g., `default/master.mast.php`)
> - Front Places: `*.place.front` or `*.place.php`
---
## **8.1 What are Master Files?**
Master Files (`.mast.php`) define the overall page layout - the skeleton that wraps your FrontFile content. They contain:
- HTML `<head>` section with meta tags and CSS
- Page header (logo, navigation)
- Main content container
- Page footer
- JavaScript includes
The Master File receives your FrontFile's output and wraps it with the common layout.
## **8.2 Master File Location**
Master files are stored in the `masters/` directory:
```
masters/
├── default/
│ └── master.mast.php # Default layout
├── admin/
│ └── admin.mast.php # Admin area layout
└── minimal/
└── simple.mast.php # Minimal layout
```
## **8.3 Basic Master File Structure**
```php
<?php
// masters/default/master.mast.php
// First: Register and run any Front Places
addFrontPlace("mainMenu", __DIR__ . "/menu.main.place.front");
runFrontPlace("mainMenu", "header");
addFrontPlace("footer", __DIR__ . "/footer.place.front");
runFrontPlace("footer", "footer");
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<?php
// Framework adds Bootstrap and other CSS/JS
SphpBase::SphpJsM()::addBootStrap();
echo SphpBase::sphp_api()->getHeaderHTML();
?>
</head>
<body>
<!-- Header with Menu -->
<header class="bg-light">
<div class="container">
<?php renderFrontPlace("mainMenu", "header"); ?>
</div>
</header>
<!-- Main Content - Where FrontFile Goes -->
<main class="container my-4">
<?php SphpBase::getAppOutput(); ?>
</main>
<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container">
<?php renderFrontPlace("footer", "footer"); ?>
</div>
</footer>
<?php
// Framework additional JS
echo SphpBase::sphp_api()->getFooterHTML();
?>
</body>
</html>
```
## **8.4 Key Master File Functions**
### **addFrontPlace() - Register a Place**
```php
addFrontPlace("name", "path/to/file.place.front", "position");
```
Parameters:
- **name** - Identifier for the place
- **path** - Full path to the Front Place file
- **position** - Optional position within the place
### **runFrontPlace() - Execute Logic**
```php
runFrontPlace("name", "position");
```
Must be called AFTER `addFrontPlace()` but BEFORE `<!DOCTYPE>`
### **renderFrontPlace() - Output Content**
```php
<?php renderFrontPlace("name", "position"); ?>
```
Called where you want the content to appear in the HTML.
### **getAppOutput() - FrontFile Content**
```php
<?php SphpBase::getAppOutput(); ?>
```
This is where your FrontFile's rendered HTML appears!
## **8.5 Creating a Menu Front Place**
Create `masters/default/menu.main.place.front`:
```html
<!-- menu.main.place.front - Main Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">MyApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<!-- Right side - conditional based on login -->
<ul class="navbar-nav">
#{if $parentgate->isLoggedIn()}#
<li class="nav-item">
<span class="nav-link">Welcome, ##{$parentgate->getUserName()}#</span>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.html">Logout</a>
</li>
#{else}#
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
#{endif}#
</ul>
</div>
</div>
</nav>
```
## **8.6 Creating a Footer Front Place**
Create `masters/default/footer.place.front`:
```html
<!-- footer.place.front - Page Footer -->
<div class="row">
<div class="col-md-4">
<h5>About Us</h5>
<p>We provide quality products and excellent service.</p>
</div>
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html">Home</a></li>
<li><a href="product.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Contact</h5>
<p>Email: info@example.com<br>
Phone: (123) 456-7890</p>
</div>
</div>
<hr>
<div class="text-center">
<small>© ##{date('Y')}# MyApp. All rights reserved.</small>
</div>
```
## **8.7 Adding Custom CSS/JS to Master File**
### **Adding Custom CSS**
```php
<?php
// In onrender() of your Gate
addFileLink("path/to/your-style.css");
```
Or directly in Master File:
```html
<link rel="stylesheet" href="custom.css">
```
### **Adding Custom JavaScript**
```php
<?php
// In onrender() of your Gate
addHeaderJSCode("console.log('Page loaded!');");
```
Or add to Master File directly:
```html
<script src="custom.js"></script>
```
## **8.8 Multiple Master Files**
You can have different layouts for different sections:
```php
<?php
// In comp.php - Set default master
$masterf = "{$comppath}{$ComponentUI}/masters/default/master.php";
// For admin area, change in onstart()
public function onstart()
{
// Use different master for admin
if ($this->page->getGate() === "admin") {
$this->masterf = __DIR__ . "/../masters/admin/master.mast.php";
}
// ...
}
```
## **8.9 Complete Master File Example**
Here's a production-ready Master File:
```php
<?php
// masters/default/master.mast.php
// ===== Front Places Setup =====
// Main navigation menu
addFrontPlace("mainMenu", __DIR__ . "/menu.main.place.front", "main");
runFrontPlace("mainMenu", "main");
// Sidebar (for certain pages)
addFrontPlace("sidebar", __DIR__ . "/sidebar.place.front", "left");
runFrontPlace("sidebar", "left");
// Footer
addFrontPlace("footer", __DIR__ . "/footer.place.front", "footer");
runFrontPlace("footer", "footer");
// Breadcrumb (optional)
addFrontPlace("breadcrumb", __DIR__ . "/breadcrumb.place.front", "nav");
runFrontPlace("breadcrumb", "nav");
// Check if we should show sidebar
$showSidebar = SphpBase::sphp_api()->getProp("showSidebar") ?? false;
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="##{$metaDescription}#">
<?php
// Load framework assets
SphpBase::SphpJsM()::addBootStrap();
// Output framework header (jQuery, Bootstrap, etc.)
echo SphpBase::sphp_api()->getHeaderHTML();
?>
<!-- Page Title (from FrontFile or default) -->
<title>##{$pageTitle}# - My Website</title>
<!-- Custom CSS from current page -->
<?php echo SphpBase::sphp_api()->getCustomCSS(); ?>
</head>
<body>
<!-- ===== Navigation ===== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<strong>MyApp</strong>
</a>
<?php renderFrontPlace("mainMenu", "main"); ?>
</div>
</nav>
<!-- ===== Breadcrumb ===== -->
<?php if (SphpBase::sphp_api()->hasProp("showBreadcrumb")): ?>
<nav class="breadcrumb-nav">
<div class="container">
<?php renderFrontPlace("breadcrumb", "nav"); ?>
</div>
</nav>
<?php endif; ?>
<!-- ===== Main Content ===== -->
<div class="container my-4">
<div class="row">
<!-- Sidebar (if enabled) -->
<?php if ($showSidebar): ?>
<div class="col-md-3">
<?php renderFrontPlace("sidebar", "left"); ?>
</div>
<?php endif; ?>
<!-- Main Content Area - FrontFile Output Here! -->
<div class="<?php echo $showSidebar ? 'col-md-9' : 'col-12'; ?>">
<?php SphpBase::getAppOutput(); ?>
</div>
</div>
</div>
<!-- ===== Footer ===== -->
<footer class="bg-light py-4 mt-auto">
<div class="container">
<?php renderFrontPlace("footer", "footer"); ?>
</div>
</footer>
<!-- ===== Framework Footer ===== -->
<?php
echo SphpBase::sphp_api()->getFooterHTML();
echo SphpBase::sphp_api()->traceError(true); // Show errors in debug mode
?>
</body>
</html>
```
## **8.10 How Master File Gets Selected**
The Master File to use is configured in `comp.php`:
```php
<?php
// comp.php
// Path to default master file
$masterf = "{$comppath}{$ComponentUI}/masters/default/master.php";
// Or use absolute path
$masterf = __DIR__ . "/masters/default/master.php";
// Alternative: Set in Gate for specific pages
public function onstart()
{
// Use different master
$this->masterf = __DIR__ . "/masters/custom/master.mast.php";
}
```
## **8.11 Chapter Summary**
1. **Master Files** (`.mast.php`) provide page layout
2. **Front Places** (`.place.front`) provide reusable sections (menu, footer)
3. **addFrontPlace()** - Register a place
4. **runFrontPlace()** - Execute place logic
5. **renderFrontPlace()** - Output place content
6. **getAppOutput()** - Where FrontFile content goes
7. Configure master in `comp.php` or in Gate's `onstart()`
## **8.12 What's Next?**
Next, learn about the `runas="holder"` attribute for dynamic content injection in FrontFiles.
---
*Next: Chapter 9 - The runas="holder" Attribute*