Design / Dev. mode

What is odbox Templates ?

The odbox template is "only CSS & JS files" inside the o-templates folder based on ZURB Foundation framework.

Download _default.zip template and see it.
Download _odbox.zip template.

What are Sections ?

A section is a 100% width of a page of the website made from ZURB Foundation framework default styles and tags. A page can contain one or more sections. Sections can be installed by the sections library from super-administrator's panel or self-created.

Download o_hello_world.zip section for good exemple.

Section is the key

A section is a folder named by the Section Uniq ID (suniqid ––> see section.json file below) that contain the following files. Then install the section by uploading this zipped folder from the sections library and put it inside your desired page from super-administrator's panel. There is sections for navigations, headers, contents, features, leads [...].

sketch.svg

The sketch is the thumbnail that illustrate the most the section. The sketch as to be a svg file. The sketch below could illustrate a simple line text section.
index.php
Start from scratch index.php file inside the section folder:
```
// code...
            
```
admin.php
Start from scratch admin.php file inside the section folder:
```
// code...
            
```

section.json

Minimal required code of the section.php file inside the section folder:

  {
    "suniqid"             : "string",
    // This must be unique (must not start with underscore "_").
    "name"                : "string",
    // String that will appear as the name of the section.
    "short_description"   : "string",
    // Short description of the section.
    "long_description"    : "string",
    // Long description of the section.
    "copyright"           : "©string",
    // String of the copyright.
    "version"             : int|float,
    // Version of the section.
    "compatible"          : int|float,
    // Maximum version of odbox compatible with.
    "lib_name"            : "string",
    // Categorie wish or suggestion.
    "cidm"                : "string",
    // Simple small message that will be displayed after section installation.
  }

init.json

This file can be empty or contain some of those options:

  {
    "o_section_medias"              : ["images","files","frames"],
    "o_section_parameters"          : {
      "o_help":"Lorem ipsum dolor.",
      "switch":true,
      "string":"default value",
      "menus_listes": "name",
      "table_name_listes": "col_name",
      "options":{
        "-":"---------",
        "fadeIn":"fadeIn",
        "bounceIn":"bounceIn"
      },
      "range-colonnes-1-6":3
    },
    "o_section_datas"       : {
      "field_name":{
        "input":"Lorem"
      },
      "html_h4-1": {
        "h4": "Le titre de la portion de datas avec 'css_class' comme class css"
      },
      "html_p-1": {
        "p": "Lorem ipsum dolor sit amet [...]."
      },
      "name_a":{
        "textarea":"Ipsum"
      },
      "name_x":{
        "textHTML":"placeholder of textHTML"
      },
      "name_y":{
        "file":"one file"
      },
      "name_z":{
        "files":"Add files (images, pdf...)"
      },
      "tpl":{
        "text of the add button":{
          "tpl_n_x":{
            "file":"add file"
          },
          "tpl_n_1":{
            "input":"placeholder"
          },
          "tpl_n_2":{
            "textarea":"placeholder of textarea"
          },
          "tpl_n_5":{
            "textHTML":"placeholder of textHTML"
          },
          "tpl_n_4":{
            "files":"Add files (images, pdf ...)"
          }
        }
      }
    },
    "o_section_main_helper"     : {
      "Title":"Text. html available (b|p|a).",
      "Titre 2":"Text. html available (b|p|a)."
    },
    "o_section_wording"         : {
      "key_wording1":"wording1",
      "key_wording2":"wording2"
    },
    "o_section_menu"            : {
      "TITRE":{
        "action_string1":"Link string 1",
        "action_string2":"Link string 2"
      },
      "table_name_to_list_edit_and_create":"default",
      "table_name_to_list":"lister"
    },
    "o_section_default_content" : {
      "titre_section":"Default value.",
      "description_section":"Default value."
    },
    "o_section_noshot"          : false,
    "o_section_automatic"       : false
  }

install.php (Optional file)
Executed if file exists the php code when install section.
```
// code...
                
```

install.sql (Optional file)

Executed if file exists the php code when install section.

Base structure database tables (SQL). match this base structure and add your custom collumns

  SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
  SET time_zone = "+00:00";
  CREATE TABLE IF NOT EXISTS `tableName`(
    `id_tableName` INT( 15 ) AUTO_INCREMENT PRIMARY KEY,
    `content` TEXT,
    `status` TINYINT( 1 ) DEFAULT 0,
    `slug` VARCHAR ( 255 ),
    `tableName_categories` INT( 5 ) DEFAULT 0,
    `tableName_types` INT( 5 ) DEFAULT 0,
    `sort` INT( 11 ) DEFAULT 0
    `date_time` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
  );
  CREATE TABLE IF NOT EXISTS `tableName_categories`(
    `id_tableName_categories` INT( 15 ) AUTO_INCREMENT PRIMARY KEY,
    `content` TEXT,
    `status` TINYINT( 1 ) DEFAULT 0,
    `name` VARCHAR ( 255 ) NOT NULL,
    `slug` VARCHAR ( 255 ),
    `sort` INT( 11 ) DEFAULT 0
  );
  CREATE TABLE IF NOT EXISTS `tableName_types`(
    `id_tableName_types` INT( 15 ) AUTO_INCREMENT PRIMARY KEY,
    `status` TINYINT( 1 ) DEFAULT 0,
    `name` VARCHAR ( 255 ) NOT NULL,
    `slug` VARCHAR ( 255 ),
    `sort` INT( 11 ) DEFAULT 0
  );
  INSERT INTO `contents_section` (visible, ss_create, ss_lister, suniqid, is_table_name, icon, structure, sort) VALUES (1, 1, 1, 'tableName', 'tableName', 'fas fa-icon fa-fw', '{\"une\":{\"url une\":\"\",\"url cover\":\"\"},\"title\":\"localiz\",\"description\":\"localiz\",\"long_description\":\"localiz\", \"images\":{\"url\":{}}, \"slide\":false,\"feature\":false,\"feature-title\":\"localiz\",\"feature-subtitle\":\"localiz\",\"feature-text\":\"localiz\",\"url-website\":\"\",\"url-iframe\":\"\",\"url\":\"\"}', 0);
  INSERT INTO `contents_section` (visible, ss_create, ss_lister, suniqid, is_table_name, icon, structure, sort) VALUES (0, 1, 1, 'tableName', 'tableName_categories', '', '', 0);

update.sql (Optional file)

Executed if file exists when update section.

  SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
  SET time_zone = "+00:00";
  CREATE TABLE IF NOT EXISTS `tableName`(
    `id_tableName` INT( 15 ) AUTO_INCREMENT PRIMARY KEY,
    `content` TEXT,
    `status` TINYINT( 1 ) DEFAULT 0,
    `slug` VARCHAR ( 255 ),
    `tableName_categories` INT( 5 ) DEFAULT 0,
    `tableName_types` INT( 5 ) DEFAULT 0,
    `sort` INT( 11 ) DEFAULT 0
    `date_time` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
  );

Usefull variables

Usefull vars that can be used to develop a section. Use thoses vars with the index.php file of the section:

Defaults variables

$suniqid –– o_hello_world
$sinstance –– UBvfZmHrdDMg91i
$o_section_id –– o_hello_world-UBvfZmHrdDMg91i
$o_section_url –– https://www.odbox.org/o-sections/99/o_hello_world/
$o_section_dir –– Not displayed for security reason...
$o_active_slug –– what-is-odbox-cms
$o_is_home –– 1

$o_parameters

Array
(
    [status] => 1
    [buffer] => 0
    [self_click] => 0
    [xtraClass] => 
    [bool option] => 1
    [string option] => 
    [list option] => -
    [range-colonnes-1-6] => 3
    [range-videos-1-12] => 6
)

$o_datas

Array
(
    [id_pages_ref] => 2
    [ancre] => what-is-odbox-cms-o_hello_world
    [mot1] => ZURB Foundation FRIENDLY --------------- •
    [mot2] => SEO FRIENDLY ------------- •
    [mot3] => ------------------------- •
    [name_a] => 
    [name_c] => 
    [wording] => Array
        (
            [key_wording1] => wording1
            [key_wording2] => wording2
        )

    [o_section_title] => What is odbox CMS
    [o_section_description] => Full documentation explanation.
)

$_SESSION

Array
(
    [langs] => en
    [is_mobile] => 
    [device] => 
    [exploit] => 
    [browser] => 
    [URLHTTP] => https://www.odbox.org/what-is-odbox-cms
    [xt-o] => d23c5217f2440c894abc46c6c
)

Optionals variables depend on the init.json file

$o_medias
```
Array
(
)
```

$o_wording

Array
(
    [key_wording1] => wording1
    [key_wording2] => wording2
)

SQL database requests

Usefull functions that can be used to develop a section.

Request (SQL/PHP)

Usage exemple to liste a table from the mySQL database:

  $array = $Commun -> listerPlus("table_name", " WHERE col_name=1 ORDER BY col_name DESC ");

Available class functions:

  $array = $Commun -> get($table_name, $Where, $Egale);
  $array = $Commun -> getPlus($table_name, $plus=null);

  $array = $Commun -> getn($string_cols_name_comma_separated, $table_name, $Where, $Egale);
  $array = $Commun -> getnPlus($string_cols_name_comma_separated, $table_name, $plus = null, $fetch = null);

  $array = $Commun -> sel($table_name, $orderBy=null, $sens=null, $status=null, $limit=null);

  $array = $Commun -> listerPlus($table_name, $plus=null);
  $array = $Commun -> listernPlus($string_cols_name_comma_separated, $table_name, $plus=null);

  $array = $Commun -> insert($table_name, $post=array());

  $array = $Commun -> update($table_name, $post=array(), $Where, $Egale);
  $array = $Commun -> updatePlus($table_name, $post, $plus);

  $var = $Commun -> del($table_name,$Where,$Egale,$responsed=null);
  $var = $Commun -> delPlus($table_name,$plus = null, $responsed = null);

Editable front-end function

To put inside html tags that will be front-end editable when option active in settings..

Text

  // for $o_datas[]
  <div <?=contenteditable('var_name')?>><?=$o_datas['var_name']?></div>
  <div <?=contenteditable('{"KEY_TPL_NAME":"var_name"}', $arr_key)?>><?=$value['var_name']?></div>

Medias

  // for $o_datas[]
  <img <?=imgeditable('var_name')?> src=<?=CONST_UP."thumb_".$var_name?> />
  <img <?=imgeditable('{"KEY_TPL_NAME":"var_name"}', $arr_key)?> src=<?=CONST_UP."thumb_".$var_name?> />
  // for $o_medias[]
  <img <?=imgeditable('{"images":"url"}', $arr_key, thumb_ | square_ | cover_ | tiny_ | large_ )?> />

SMTP e-mails PHP class

Class to use to send SMTP e-mails. Configure variables server in settings page

The function

  // Use this to send mail (SMTP).
  $o_phpmailer -> send_mail(
    $mail_from    = "email@fai.com", // recommanded to use « O_SMTP_Username » const.
    $mail_dest    = array("email1@fai.com", "email2@fai.com"),
    $mail_subj    = "Lorem ipsum.",
    $mail_content = "<p>Sit melt apum edium oleras itum...</p>",
    $options      = array(
        "replyto"     => "email@fai.com",
        "attachments" => "path_to_file",
        "txt"         => false
    )
  );

  // NOTE: $options is optionnal in the function.