Creating a Qtag

This tutorial will teach you how to create a node by creating a folder.

For this tutorial You will need:

An installed Quanta site

In order to understand the Quanta data model, we are going to demonstrate how easily a "node" can be created, by creating the corresponding folder by hand.

We will also add a template, and some JSON metadata into it.

This is not something you are going to do everyday, but will definitely help you in starting to get your hands dirty.

Step 1: (optional) check your site structure

In order to get acquainted with a basic Quanta site structure, have a look at the site you just installed.

You will see all the default folders, including at least:

_components

_languages

_roles

_statuses

_users

pages

Step 2: (optional) check your "pages" folder

TIP: From the command line, you can do it with cd your/quanta/site/root/_components

Go into your pages folder.

Most probably, it will contain the "home" node.

Step 3: Create a new folder into the "pages" folder

While into your pages folder, create a new "helloworld" folder into it.

TIP: From the command line, you can do it with mkdir helloworld

So your site structure will look like:

(root)

|_ pages

|_ helloworld

Step 4: Create a new tpl.html file into the "helloworld" folder

Inside the hello_world folder, create a new html file, called tpl.html

This file will allow you to create a template for this node.

Your structure will now look like:

(root)

|_ pages

|_ helloworld

|_ tpl.html

Step 5: Put some code in the tpl.html file and look how it renders

Inside the tpl.html file you just added, put some text:

Hello World! I am a template.

Easy, isn't it? You have just create a node, and decided how it should display.

Now, try to access the node via your browser:

http://(yourhost)/helloworld

You should see the output of the template you just created.

Step 6: Create a data.json file into the helloworld folder

Inside your node's folder, create a data.json file.

TIP: From the command line, you can do it with touch helloworld

This is the file that will contain all of your node's metadata, and it's the equivalent of a database entity.

Your structure will now look like:

(root)

|_ pages

|_ helloworld

|_ tpl.html

|_ data.json

Step 7: Put some data in your data.json

Let's put some basic data inside your newly created data.json file.

We can put, as an example, a title and a body

Step 8: Use a qTag in your template to display the JSON metadata

Open again your tpl.html file, and change its text to:

--------------

[TITLE]

[BODY]

--------------

...now open again your node in the browser, and see the magic!

Step 9: Use different qTags to do the same thing

In the previous steps, we have used the [TITLE] and [BODY] core qTags, that are respectively fetching attributes named "title" and "body".

Another way to do the same, could have been:

--------------

[ATTRIBUTE|name=title:helloworld]

[ATTRIBUTE|name=body:helloworld]

--------------

Try and see...

Step 10: Done!

You have just learnt a bit about how data is modeled and rendered in Quanta, doing it by hand.

While normally you will do the same things with more advanced UI tools like Shadow, it was useful to start from the basics and understand the things from their root.