**Database model**
URL :: https://blauwhuis.d02.fidela.net/exo_admin/#/formgroup/0/forms

The design dictates what database model is needed. For our example website blauwhuis.d02.fidela.net they are listed below with their description:
* container: Used to store general collections of reacts.
* systemurl: Used to create frontend shortcuts in sidebar (e.g. New Page)
* contact: Form to collect information from visitors.
* review: Form to collect reviews shown randomly.
* page_block: Form used for blocks with sub-templates (e.g. reviews)
* page: Form for page (header-image, text, related page_blocks)
* mail-template: Form used to mail owner and visitor.

**Assigning the main HTML & CSS template to an edition**
URL :: https://blauwhuis.d02.fidela.net/exo_admin/#/editions/363

Main template in most cases consists of a header and footer part (example url here later) because these parts don't change througout a website. For the middle section seperate blocks are created using the form [page_block](https://blauwhuis.d02.fidela.net/exo_admin/#/formgroup/0/forms/885/) which can be reused throughout the website. In the edition two templates are set. A main HTML template and a main CSS template. These two templates are extracted from [static HTML & CSS](https://blauwhuis.d02.fidela.net/sites/blauwhuis/public/index.html)


**Creating routes**

Path: /config/routes.php
Basic routes:

**Creating startpage based on page react**

**Header picture**

Header picture is set as inline background-image style. Image source we get from current page react.

<header style="background-image: radial-gradient(circle, rgba(13, 45, 108, 0.5), rgba(1, 152, 217, 0.5)), url('<?=$page['react']->getHeaderImage()->getURL()?>');" exedit="{type:react,id:<?=$page['id']?>,field:header_image,contenttype:file}">

**Defining the page_blocks for startpage**

Between header and footer we include pageblocks.php

**%%FD(tmpl=pageblocks.php)%%**

In this file we set pageblocks container and output template for each pageblock.

<? /** pageblocks.php */
/** get page alias from url by parameter 'alias' which is set in routes.php */
$p_alias = $exolog->request->getGet('alias');
/** initialize formdata request */
$query = fd()->form('page');
/** if no alias - get startpage. else get page react by alias */
if(!$p_alias) {
    $query = $query->where('startpage','1','LIKE');
}
else {
    $query = $query->where('alias',$p_alias,'LIKE');
}
$current_page = $query->fetch();
/** get page react container where page blocks stored */
$pageblock_container = $exolog->getContainer(array('react_id' => $current_page['react_id'], 'field_prefix' => 'pageblock'));
/** get page blocks reacts */
$pageblocks = $pageblock_container->getItemsTree();
/**  class="ee-item" <?=$pageblock_container->getExeditAttr()?>
     this line creates controller for container */
?>

<div class="ee-item" <?=$pageblock_container->getExeditAttr()?>>
    <? /** output blocks templates */ 
    foreach($pageblocks as $pageblock) { ?>
        %%FD(tmpl=<?=$pageblock['react']['template']?> &block=<?=$pageblock['id']?>)%%
    <? } ?>
</div>

Startpage has three page_blocks between header and footer in middle section:

*First page_block react*

*Second pageblock react*

*Third pageblock react*

Once we created pageblocks.php, we need to declare different page blocks. For doing so we will create reactions for the form page_block. In reactions we will use template field for assigning template php files. Like this:
Here we can also assign more than just a php file. We can put text and images.

For creating the template php files, first of all we need to declare the right form. Using something like this:

<?
$block = fd()->form('page_block')->where('react_id',$params['block'])->fetch();
$items_container = $exolog->getContainer(array('react_id' => $block['react_id'],'field_prefix' => 'related'));
$items = $items_container->getItemsTree();
?>

Here we will have our form and also container and items declared. Then we can process stuff within the code. For _Second pageblock react_ is something like this:

<div class="about">
  <div class="about__image">
    <? echo $block->getPicture()->render(['src'=>'435w376h90q1c','type'=>'image/webp']); ?>
    <span class=""></span>
  </div>
  <div class="about__text">
    <div exedit="{type:react,id:<?=$block['react_id']?>,field:text,contenttype:tinymce,toolbar:custom}">
        <?=$block['text']?>
    </div>
    <div class=" ee-item" <?=$items_container->getExeditAttr()?>>
    <? foreach($items as $item) { ?>
        <div exedit="{type:react,id:<?=$item['id']?>,field:menu_intro,contenttype:tinymce,toolbar:custom}">
            <?=$item['react']['menu_intro']?>
        </div>
        <a href="<?=$item['react']['permalink']?>" exedit="{type:react,id:<?=$item['id']?>,field:menu_link,contenttype:tinymce,toolbar:custom}"><?=$item['react']['menu_link']?></a>
    <? } ?>
    </div>
  </div>
</div>

Here in code we have a part for having the image. Using

<? echo $block->getPicture()->render(['src'=>'435w376h90q1c','type'=>'image/webp']); ?>

we can have access to the image in the reaction of the form.

The same thing for the text. Using

<div exedit="{type:react,id:<?=$block['react_id']?>,field:text,contenttype:tinymce,toolbar:custom}">
        <?=$block['text']?>
    </div>

We will have access to the text in the reaction of the form.

**Creating a loop**
If something is going to be repeated over and over, we can create a loop. For example in [this page](https://blauwhuis.d02.fidela.net/diensten), the items are repeated and only images and the text is changing. Using _foreach_ we can easily create a loop. _foreach_ simply do the block of code for every part of the array. like this:

<?
$block = fd()->form('page_block')->where('react_id',$params['block'])->fetch();
$page = fd()->form('page')->where('react_id',$params['page_id'])->fetch();
$items_container = $exolog->getContainer(array('react_id' => $page['react_id'],'field_prefix' => 'related'));
$items = $items_container->getItemsTree();
?>

<div class="services ee-item" <?=$items_container->getExeditAttr()?>>
    <? foreach($items as $item) { ?>
        
        <div class="services__item">
            <div class="services__image">
              <? echo $item['react']->getPageIcon()->render(['src'=>'96w96h90q1c','type'=>'image/webp']);?>
              <span exedit="{type:react,id:<?=$item['id']?>,field:menu_title,contenttype:tinymce,toolbar:custom}"><?=$item['react']['menu_title']?></span>
            </div>
            <div class="services__text">
              <h3 exedit="{type:react,id:<?=$item['id']?>,field:title,contenttype:tinymce,toolbar:custom}"><?=$item['react']['title']?></h3>
              <p exedit="{type:react,id:<?=$item['id']?>,field:menu_intro,contenttype:tinymce,toolbar:custom}"><?=$item['react']['menu_intro']?></p>
              <a href="<?=$item['react']['permalink']?>">LEES MEER OVER VERZEKERINGEN »</a>
            </div>
        </div>
    <? } ?>
</div>

Here the items will be repeated and we don't need to have all of them here. ```$items``` is our array and then we have our value as ```$item```.
The array itself (the content of every element of the array) can be created and edited in the front-end editor.
Here you can add as many elements as you want just by clicking on add icon and choosing _Add new item_.

Here you choose the Edition and the form for entering the values of the reaction. Here the form is _page_. And as you can see in the code at the first lines, we have the form _page_ declarted.

$page = fd()->form('page')->where('react_id',$params['page_id'])->fetch();

And then we can add different stuff using the form _page_. The image is something like this:

<? echo $item['react']->getPageIcon()->render(['src'=>'96w96h90q1c','type'=>'image/webp']);?>

It is using the input of _PAGE_ICON_ of the form _page_

For the title below the icon we have this:

<span exedit="{type:react,id:<?=$item['id']?>,field:menu_title,contenttype:tinymce,toolbar:custom}"><?=$item['react']['menu_title']?></span>

As you can see _menu_title_ is declared. So the title will be the input of this in the form _page_.
And the same for other texts and links.

---
**Exolog forms**

To output Exolog form we use form marker which can be stored in form field.

After we output this field value on the page, form needs to be styled according to design because html structure of the form is determined by core form-template.

Form maker helps us to show an Exolog form to the users. In the template, we use something like this for having it:

<?=$block['formmarker']?>

(`$block` here is our page_block form.)

And then in page_block form, we can declare the form template and the form maker (image above).

For the template of the form we have something like this:

<?
$block = fd()->form('page_block')->where('react_id',$params['block'])->fetch();
$page = fd()->form('page')->where('react_id',$params['page_id'])->fetch();
$fd_var['header_class'] = 'header--contact';
?>
<div class="contact__main">
  <div class="contact__form">
  <?=$block['formmarker']?>
  </div>

  <div class="contact__sidebar">
    <div class="" exedit="{type:form,id:887,field:contact_sidebar,contenttype:tinymce,toolbar:custom}">
        %%F_VAR_CONTACT_SIDEBAR(form=887)%%
    </div>
  </div>
</div>

<div class="contact__notice">
  <p exedit="{type:form,id:887,field:contact_grey,contenttype:tinymce,toolbar:custom}">
  %%F_VAR_CONTACT_GREY(form=887)%%
  </p>
  <img src="/sites/blauwhuis/images/exclamation.svg" alt="">
</div>

Here for the information in the _contact__notice_ and _contact__sidebar_ we used variables. These variables are declared in the contact form.

**Styling the form**
Because we are using forms of the Exolog core itself, we can't import our HTML/CSS for forms directly. But we can make our style easily. Once we created the form, we can use the inspect tool of the browser to see the class names of the form's elements. Using them in your stylesheet you can make your personalized style.
Also, we can have a unique id for each element in the form. Those ids are declared in the form itself as a name. For example, here you can see:


Here we have _name_company_ for the name field. This is the id of the element. So you can use it to stylize this particular element.

**Submitting a form**
After the user clicked on submit, we can manage the action in the front-end editor. For the form in the front-end editor we have something like this:


Here we can have several actions for the submit. Here we have three, one for sending an email to the admins (Breicht voor Blauwhuis), one for sending a confirmation email to the user (Breicht voor bezoeker), and one for redirection.
Two of them are using the form mail-template where we have all the necessary fields for the email template.


And then in action we can declare where those emails will be sent. (Using email fields)


The action for the redirect part is also something like this:


For the mail template, here we have mail_body field to enter the text. We can change it in the reactions to the mail_template form.

In the mailtemplate.html itself for having that part we only used this where we want our mail body:

%%RELATED_MAIL_BODY%%

In the start of mailtemplate we also included this:

%%SET_RELATED_MAIL_VARS%%

and then in the head element this:

    <? if($exolog->authHandler->getValue(array('user','u_isadmin'))) { ?>
    %%INCLUDE(file=meta.html)%%
    <? } ?>

---

**Formats**
Sometimes you need to have different formats in the front-end editor. For example on [this page](https://blauwhuis.d02.fidela.net/over-blauwhuis) for having the content of the page we need to have headings, paragraphs, quotes, and so on. For doing so we can have our formats/custom CSS. First of all for adding them you will go to the _Custom setting_.


Here you can add fields of css and formats. Then you can define different formats in the custom css part. Something like this:


Then we can have different formats.


---
**Changing the style of a repetitive part**
A lot of parts like the header and footer will be repeated in all pages. But sometimes you need to have a small change in the style of them only for one page. So it can not be done within those blocks themself. Because the change will be applied to every page. One of the solutions is using `<style>` element within the `body`.
For example in [this page](https://blauwhuis.d02.fidela.net/contact), the footer is not like every page. The top part should not be displayed. So one class name should be `display: none;` here but only for this page.


The easiest way for doing so is to just add that `style` element to one of the page blocks of this specific page (here contact page). So the style will be applied only on this page. For example, in this case, we used the form of this page and added a variable and in the variable, we added the `style` code. In this way, we can edit it later easily.
Here we created the variable _contact_footer_ with the style that we need.and then in the template of this form, we added this variable.