Quick Start Guide

This page will help you get up and running with your application without any hassle.

Another Page

Let's add a new page in our application

Routing

Pine handles all the routing in src/routes.php file. At first glance, your routes file should have the following contents

<?php
use Pine\App\Request;
use Pine\App\Route;
use Pine\App\View;
use Pine\Controllers\SampleController;

Route::get("/", fn () => 
    new View("index", [
        "title" => "Welcome to Pine!", 
        "date" => date("Y-m-d H:i:s", time())
        ])
    );
Route::get("/controller", [SampleController::class, "index"]);

Our application uses Route for creating routes. It supports all the basic routing methods (GET, POST, PATCH, PUT, DELETE).

Add the following line at the end of src/routes.php

Route::get("/hello-world", function () {
    return new View("hello-world");
});

Now that we have a route, if you try to go to /hello-world, you'll be greeted with a rather verbose error. Don't panic, that's normal. It's because we haven't created a view named hello-world yet.

Views

Before we create a view file, let's understand what they are.

Views are essentially HTML files with some additional functionality. All views can be found in src/views directory and must be appended by leaf.html extension. Let's create our first view.

Create a new file in src/views directory with the following name hello-world.leaf.html with the following contents:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>My very first view in Pine</p>
</body>
</html>

After this, refresh your route and your page should render properly.

Now, you may be wondering, the page looks really ugly, and you're right, it's due to the fact that no css is being used.

Using CSS and JS

Pine serves public/style.css and public/main.js files for css and js respectively. In order to use these, all you need to do is add @js and @css to import those files into your page.

Your page should now look like this

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World</title>
    @css
</head>
<body>
    <h1>Hello, World!</h1>
    <p>My very first view in Pine</p>

    @js
</body>
</html>

If you are using Vite, you will need to edit src/resources/js/index.js and src/resources/css/index.css as vite will automatically bundle js and css for you, you will still need @css and @js to add it into your html.