# **Chapter 6: Building Your First Webpage - Single Front File + Master File**
> **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`
---
## **6.1 The Page Building Blocks**
Before building pages, let's understand the structure:
1. **Gate Class** - Handles logic, events, and data
2. **Front File** (`.front`) - Contains page content (HTML with SartajPhp attributes)
3. **Master File** (`.mast.php`) - Contains page layout (header, footer, menus)
The flow:
```
Gate → FrontFile → MasterFile → Browser
```
## **6.2 Step 1: Register Your Gate**
First, register your Gate in `reg.php`:
```php
<?php
// reg.php
// Register the main application
registerGate("index", __DIR__ . "/apps/Index.gate.php");
```
## **6.3 Step 2: Create the Gate Class**
Create `apps/Index.gate.php`:
```php
<?php
// apps/Index.gate.php
use Sphp\tools\BasicGate;
class Index extends BasicGate
{
private $frtMain;
public function onstart()
{
// Create FrontFile object
// $this->mypath gives the directory of this Gate file
$this->frtMain = new \Sphp\tools\FrontFile($this->mypath . "/fronts/index_main.front");
}
public function page_new()
{
// Set the FrontFile to render
$this->setFrontFile($this->frtMain);
}
}
```
## **6.4 Step 3: Create the Front File**
Create `apps/fronts/index_main.front`:
```html
<!-- index_main.front - Page Content -->
<!-- Page Title (becomes component) -->
<title id="pageTitle" runat="server">Welcome</title>
<!-- Page Content -->
<div class="container">
<h1>Welcome to My Website</h1>
<p>This is the main content of the page.</p>
<!-- Dynamic content from database -->
<div id="divContent" runat="server">
<p>Loading content...</p>
</div>
<!-- Link to another page -->
<p>
<a href="about.html">About Us</a> |
<a href="contact.html">Contact</a>
</p>
</div>
```
This is valid HTML that can be opened in any browser!
## **6.5 Step 4: Create the Master File**
Create `masters/default/master.mast.php`:
```php
<?php
// master.mast.php - Page Layout
// Register menu as a Front Place
addFrontPlace("menu", __DIR__ . "/menu.place.front");
runFrontPlace("menu", "main");
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
// Add Bootstrap CSS
SphpBase::SphpJsM()::addBootStrap();
// Output framework header (CSS, JS)
echo SphpBase::sphp_api()->getHeaderHTML();
?>
</head>
<body>
<!-- Header with Menu -->
<header>
<?php renderFrontPlace("menu"); ?>
</header>
<!-- Main Content Area - Where FrontFile output goes -->
<main>
<?php SphpBase::getAppOutput(); ?>
</main>
<!-- Footer -->
<footer>
<p>© <?php echo date('Y'); ?> My Website</p>
</footer>
<?php
// Output framework footer (additional JS)
echo SphpBase::sphp_api()->getFooterHTML();
?>
</body>
</html>
```
## **6.6 Step 5: Create the Menu (Front Place)**
Create `masters/default/menu.place.front`:
```html
<!-- menu.place.front - Navigation Menu -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">My Website</a>
<div class="navbar-nav">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="about.html">About</a>
<a class="nav-link" href="contact.html">Contact</a>
</div>
</div>
</nav>
```
## **6.7 Complete Flow**
Here's what happens when browser requests `index.html`:
```
1. Browser requests: index.html
↓
2. Framework finds registered Gate: "index"
↓
3. Loads: apps/Index.gate.php
↓
4. Creates: new Index() object
↓
5. Fires: onstart()
- Creates FrontFile object
↓
6. Fires: page_new()
- Calls $this->setFrontFile($this->frtMain)
↓
7. Framework processes: index_main.front
- Parses HTML
- Creates Components (runat="server" tags)
- Evaluates expressions
↓
8. Framework merges with: master.mast.php
- Adds header/footer
- Injects menu from menu.place.front
- Puts FrontFile content in <main>
↓
9. Browser receives complete HTML page
```
## **6.8 Adding Dynamic Content**
Let's enhance our example to show dynamic content:
```php
<?php
// apps/Index.gate.php
use Sphp\tools\BasicGate;
class Index extends BasicGate
{
private $frtMain;
public function onstart()
{
$this->frtMain = new \Sphp\tools\FrontFile($this->mypath . "/fronts/index_main.front");
}
public function onready()
{
// Get dynamic content in onready (after Components created)
$content = $this->getLatestNews();
// Inject into FrontFile Component
$this->frtMain->getComponent("divContent")->setInnerHTML($content);
// Set page title
$this->frtMain->getComponent("pageTitle")->fu_setValue("Home - My Website");
}
public function page_new()
{
$this->setFrontFile($this->frtMain);
}
private function getLatestNews()
{
// Simulated database content
$news = [
["title" => "New Product Launch", "date" => "2024-01-15"],
["title" => "Special Offer", "date" => "2024-01-10"],
["title" => "Website Updated", "date" => "2024-01-05"]
];
$html = "<h2>Latest News</h2><ul>";
foreach ($news as $item) {
$html .= "<li><strong>{$item['title']}</strong> - {$item['date']}</li>";
}
$html .= "</ul>";
return $html;
}
}
```
## **6.9 Using Expression Tags in FrontFile**
Add dynamic content directly in FrontFile using expression tags:
```html
<!-- index_main.front with expressions -->
<title id="pageTitle" runat="server">##{$parentgate->getPageTitle()}#</title>
<div class="container">
<h1>##{$siteName}#</h1>
<p>Today's date: ##{date('F j, Y')}#</p>
<div id="divContent" runat="server">
<!-- Content set by Gate -->
</div>
<!-- Conditional display -->
#{if $parentgate->isLoggedIn()}#
<p>Welcome, ##{$parentgate->getUserName()}#!</p>
#{else}#
<p><a href="login.html">Login</a> to access member area.</p>
#{endif}#
<!-- Using ternary for conditional class -->
<div class="alert ##{$isAdmin ? 'alert-danger' : 'alert-info'}#">
##{$message}#
</div>
</div>
```
## **6.10 Adding Components for Interactivity**
Add form Components to your FrontFile:
```html
<!-- contact.front -->
<div class="container">
<h1>Contact Us</h1>
<!-- Form Component -->
<form id="contactForm" runat="server" action="contact.html" method="POST">
<div class="mb-3">
<label class="form-label">Name</label>
<input id="txtName" runat="server" type="text"
class="form-control"
fui-setRequired=""
fui-setMinLen="2"
fui-setForm="contactForm">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input id="txtEmail" runat="server" type="email"
class="form-control"
fui-setRequired=""
fui-setEmail=""
fui-setForm="contactForm">
</div>
<div class="mb-3">
<label class="form-label">Message</label>
<textarea id="txaMessage" runat="server"
class="form-control" rows="5"
fui-setRequired=""
fui-setMinLen="10"
fui-setForm="contactForm"></textarea>
</div>
<!-- Error display -->
<alert id="formErrors" runat="server" fun-setShowAll=""></alert>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
```
## **6.11 Complete File Structure**
Your project should look like this:
```
myproject/
├── reg.php # Gate registration
├── start.php # Entry point
├── comp.php # Configuration
│
├── apps/
│ ├── Index.gate.php # Main Gate
│ │
│ └── fronts/
│ ├── index_main.front # Home page
│ └── contact.front # Contact page
│
└── masters/
└── default/
├── master.mast.php # Main layout
└── menu.place.front # Navigation menu
```
## **6.12 Chapter Summary**
1. **Register Gate** in `reg.php` with `registerGate()`
2. **Create Gate class** extending `BasicGate`
3. **Create Front File** (`.front`) with page content
4. **Create Master File** (`.mast.php`) with layout
5. **Create Front Place** (`.place.front`) for reusable sections like menus
6. Use `$this->setFrontFile()` to render FrontFile
7. Use Components (`runat="server"`) for interactivity
8. Use Expression tags (`##{}#`) for dynamic content
## **6.13 What's Next?**
In the next chapter, you'll learn how to use TWO Front Files in one Gate - one for displaying data (Pagination) and one for editing (Form).
---
*Next: Chapter 7 - Two Front Files Pattern*