Quick Start

Build your first Canvas application in under 10 minutes. This guide will walk you through creating a simple web application with routing, database operations, and templates.

Step 1: Create Your First Controller

Canvas automatically discovers controllers and registers their routes. Create src/Controller/HomeController.php:

<?php
// src/Controller/HomeController.php

namespace App\Controller;

use Quellabs\Canvas\Annotations\Route;
use Quellabs\Canvas\Controllers\BaseController;
use Symfony\Component\HttpFoundation\Response;

class HomeController extends BaseController {

    /**
     * @Route("/")
     */
    public function index(): Response {
        return new Response('<h1>Hello, Canvas!</h1>');
    }

    /**
     * @Route("/welcome/{name}")
     */
    public function welcome(string $name): Response {
        return $this->render('welcome.tpl', ['name' => $name]);
    }
}

Step 2: Work with Templates

Create a Smarty template at templates/welcome.tpl:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Canvas</title>
</head>
<body>
    <h1>Welcome, {$name}!</h1>
    <p>You're now using Canvas Framework.</p>
</body>
</html>

Step 3: Database Operations with ObjectQuel

For database operations, install ObjectQuel:

composer require quellabs/canvas-objectquel

Configure your database credentials in /config/database.php:


	return [
		'driver'           => 'mysql',                  // Database driver (mysql, postgresql, sqlite, etc.)
		'host'             => 'localhost',              // Database server hostname or IP address
		'database'         => 'objectquel',             // Name of the database to connect to
		'username'         => 'root',                   // Database username for authentication
		'password'         => 'root',                   // Database password for authentication
		'port'             => 3306,                     // Database server port (3306 is MySQL default)
		'charset'          => 'utf8mb4',                // Character set for database connection
		'collation'        => 'utf8mb4_unicode_ci',     // Collation for text comparison and sorting

		// Entity namespace
		'entity_namespace' => 'App\\Entities',

		// Path to the entities folder
		'entity_path'      => dirname(__FILE__) . '/../src/Entities/',

		// Path to the proxy folder
		'proxy_path'       => dirname(__FILE__) . '/../storage/objectquel/proxies/',

		// Path to the migrations folder
		'migrations_path'  => dirname(__FILE__) . '/../migrations',
	];

Create a simple blog controller that works with the database:

<?php
namespace App\Controller;

use Quellabs\Canvas\Annotations\Route;
use App\Models\Post;

class BlogController extends BaseController {

    /**
     * @Route("/posts")
     */
    public function index() {
        // Simple ObjectQuel queries
        $posts = $this->em()->findBy(Post::class, ['published' => true]);
        return $this->render('blog/index.tpl', compact('posts'));
    }

    /**
     * @Route("/posts/{id:int}")
     */
    public function show(int $id) {
        $post = $this->em()->find(Post::class, $id);
        return $this->render('blog/show.tpl', compact('post'));
    }
}

Step 4: Test Your Application

Start the PHP development server:

php -S localhost:8000 -t public/

Visit these URLs to test your application:

  • http://localhost:8000/ - Home page
  • http://localhost:8000/welcome/John - Welcome page with parameter
  • http://localhost:8000/posts - Blog posts list

Congratulations! You've built your first Canvas application. Ready to learn more? Explore our guides on Routing, ORM, and AOP.