Skip to content

Getting Started

Jump to bottom
Nana Axel edited this page Mar 30, 2018 · 8 revisions

Getting Started with Bubble

Installation

Bubble can be installed in your project through composer:

$ composer require na2axl/bubble

Once installed, you just have to use Bubble through the \Bubble namespace.

Creating your first bubble...

The template file

Bubble use a XML-like syntax to create and compile templates. A minimal bubble template will be:

<!DOCTYPE html>
<b:bubble xmlns:b="http://bubble.na2axl.tk/schema">
    <html lang="en">

        <head>
            <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
            <title>Bubble Template Test</title>
        </head>

        <body>
            <b:text value="Hello, world!"/>
        </body>

    </html>
</b:bubble>

NOTE: All your templates have to be wrapped in the <b:bubble/> tags, and the value of the b namespace is http://bubble.na2axl.tk/schema Save this code in a file named test.bubble or whatever you want.

The compiler

The Bubble engine is written in PHP. So to compile the previously written file, you have to simply do:

<?php

use Bubble\Bubble;

// Create a new instance of the compiler
$bubble = new Bubble();

// Compiles the template file and write the output in another
$bubble->compileFile("test.bubble", "test.html");

// Compiles the template file and return the output as string
echo $bubble->renderFile("test.bubble");

And your done! Your compiled template can be stored in a file (test.html) or can be directly sent as response to the client. The compiled result of this example template will be:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Bubble Template Test</title>
    </head>
    <body> Hello, world! </body>
</html>

What next ?

  • Advanced Guide
  • Bubble's tags API
    • b:text
    • b:selectItems
    • b:dataTable
    • b:include
    • b:block
    • b:condition
    • b:for
    • b:foreach

Clone this wiki locally