View source for Dynamic Elements and Back Office

(Still in progress... Thank you for your patience!)

<span style="color:#800000">'''Demo Website''' - temporary link:</span> '''http://dmit.izihost.com/bk-demo01/index.php'''

== What Are They For? ==

The main purpose of these element packs is to allow users to modify website content '''online, outside of openElement''', and without manually editing the database structure. 


The Packs in "'''Dynamic Elements & Back-Office'''" allow users to add:

* Elements that display ''content stored in a database'';

* Online content management (back-office) that'' '''automatically''' gathers the website's content''.


In a nutshell, a Back Office ('''Content Management''') page is created with Pack 10. When the page is opened in a browser window (previewed or published) for the first time, the database will be intialized. Then, users can place Pack 50 (Dynamic Elements) on "normal" pages. Once those pages are opened in a web browser for the first time, these dynamic elements will be available to edit ''online'' using the Back Office page.


Advanced features include the ability to display '''Article Lists''' (news, blog posts, products for sale, etc.) filtered and sorted by category. Articles/items can also be added manually if needed. For that, see Packs 80 and 20.

== The Basics ==


When a page is opened in a web browser for the first time, its '''Dynamic Elements''' (see Pack 50) are automatically added to the database. 


The special Back Office page ('''Content Management''' - see Pack 10), created by placing Pack 10 "''Back Office: Online Content Management''" on the page, allows users to list all of the data that has been added to the database thus far and edit it online (through the browser, without running openElement).


This data is represented by items called '''Articles'''. Each article contains one or more '''Details''' - i.e. a description, title, icon, etc. Each Detail contains the text or HTML code that the related element should display. 


"Simple" items can be added using Pack 50 "''Dynamic Element: Display Content (Universal)''". These can only display a single detail and are automatically added to the database when the page is opened in a browser window.


List Elements can be added using Pack 80 "''Dynamic List: Display a List of Articles''", which displays a list of Articles. Nothing is automatically added to the database in this case; to add content manually, use the page that was created with "''Pack 20 - Back Office: Add New Content Manually''" (This page is not always necessary, but can be useful depending on the project).

== Instructions - Basic Use ==

Diagram:

    Create a new content management page ──> Insert Pack 10 ──> Preview in browser(F12) ──>┐     ◄─ Perform once to initialize database
                                                                                           │
  ┌──────────────────────────────────────<─────────────────────────────────────────────────┘
  │                                                                                                                           
  └─>Place one or more Pack 50 on a page ──> Preview (F12) ──> Preview the content management page ──> Edit content ──>┐
     ˄                                                                                                                 │
     └───────────────────────────────────<────(Repeat as necessary)────────────────────────────────────────────────────┘


1) '''Create a new page''' whose purpose will be to manage content. Name it, for example, "back-office." We recommend not placing it in the root of your web project (not a subfolder); this way, it will be easier to manage local links such as website images, etc. The page can be moved elsewhere at any time.

'''Place Pack 10 on this page'''. The configuration wizard will open. In the configuration settings, please set a password with a fair amount of complexity.


1a) On the second page of the wizard, you may click on the '''"Create the pages now" button''' to automatically create the "Add New Content" page. Pack 20 can be added to this page at a later time. ''For most basic uses, this page is not required''.


1b) After completing the configuration wizard, the Back Office page is ready to use. The page must be '''opened in a web browser''' (F12/preview) to initialize the database. At this time, there is no content in the database.


2) '''Open a page of the website''' or create a new test page. On that page, '''insert Pack 50''' to add a ''Dynamic Element'' to it. 

In the configuration wizard, users can edit the Item name (i.e. "Welcome Message", "Product.N1644", "News Item 1") depending on what this element will represent on your website. For example, let's use the Item name "Intro" and the default Detail name ("Description").


2a) Users can place several Packs 50 on the same page if multiple dynamic elements are desired.


2b) '''Open the page in a web browser''' (F12). The corresponding Items will be automatically added to the database, according to the Item and Detail names specified in the configuration wizard.


3) '''Go back to the Back Office (Content Management) page''' created in Part 1). Open it in a web browser (F12) to display the master list of Items and Details. You will now see the new Items, i.e. "Intro". The content of each Item is empty for the time being.


3a) Later, when there are more Items, use the link "''Show/hide Sort and Filter options''" on the upper right of the Back Office page to only display Items that begin with certain letters or belong to a certain category.


4) '''To edit the content of an Item''', click on the corresponding Edit link. See additional instructions below.

After publishing the website online, the same actions must be repeated: open the Back Office (Content Management) page to initialize the database online, then open each page containing Pack(s) 50 to add dynamic elements to the database, then edit the Items' content. To copy the content created locally, please follow the instructions below.

== Structuring Content ==

* An '''Item''' can represents such things as a product for sale, a news item, a blog post, etc.

* An Item can be assigned a '''category''' or a combination of categories. For example, Item "Watch_1644" can belong to the following categories: "Watch" + "Available" + "On Sale".

* Each Item can also have one or more '''Details'''. In many cases, one Detail like "Description" should suffice. But additional Details can be added if needed, i.e. Icon, Title, Spec Sheet, etc.

* A '''Detail''' is the content that represents the Item in question, and can use one of the following '''formats''': 

1) Unformatted plain-text 

2) Free-edited text or HTML

3) Content edited with an HTML Editor

The format can be changed as needed while editing a Detail on the Back Office (Content Management) page (see Pack 10).


Example:

The Item "'''News Item 1'''" belongs to 2 categories - "'''News'''" and "'''Visible'''". It also contains 2 details- "'''Title'''" ("Plain-text" format) and "'''Description'''" ("Free HTML" format).

  Categories:                      "News"  "Visible"
                                      └───┬───┘ 
                                          ▼ 
  Item:                           "News Item 1"
                                      │
  Details:                            ├-► "Title"       (plain-text)
                                      │
                                      └-► "Description" (complex HTML)
    
The content of "Title": ''openElement continues to evolve!''

The content of "Description": ''<nowiki>&lt;img src="Files/Image/openelement1.png"&gt;&lt;br/&gt;</nowiki>Now, with Packs, users can add complex features &lt;b&gt;in just a few minutes&lt;/b&gt;!'' (to display the image with the text beneath it, the last part being in '''bold''').

== Back Office - Content management page ==

The Back Office (Content Management) page is created using Pack 10. Users are strongly advised to create this page fist, before using any other Pack. Please see [[#Instructions - Basic Use|Instructions - Basic Use]] above for instructions on how to create it.

Drag and drop Pack 10 on a blank page and then open (preview) the page in a web browser to initialize the database system.

When Items and their Details are added (either automatically with Packs 50 or manually), the Content Management page will display each Detail; i.e. if an Item contains 2 Details, there will be 2 corresponding lines in the Item, one for each Detail.

To sort and filter Items and Details according to certain criteria, use the "''Show/hide Sort and Filter options''" link above the list of Items.


'''Editing Content'''

From the list, click on a Detail's "''Edit''" link. Editing will take place on the same page. Edit content, formatting, "official date" (if needed), and assign categories to the Item.


'''HTML Editor'''

If the content's format is set to "HTML Editor," users can then visually add images, tables, etc. This editor can't do ''everything'', but using the "source code" option can help fill in the gaps. For example, if the text is:

    My formatted '''text'''

and you would like to change the color of the word "My" to red, use Tools -> Source Code. The code will look like this:

  &lt;p&gt;My formatted &lt;b&gt;text&lt;/b&gt;&lt;/p&gt;

Place a &lt;span&gt; tag around "My" and insert the necessary styles, so that the code becomes:

  &lt;p&gt;&lt;span style="color:red;"&gt;My&lt;/span&gt; formatted &lt;b&gt;text&lt;/b&gt;&lt;/p&gt;

The result:

  <span style="color:red;">My</span> formatted '''text'''

You can then continue editing visually if needed.

(Tip: The color can be specified using its hexadecimal value, i.e. "color:#RRGGBB;" where RR represents the amount of red, GG the amount of green, and BB the amount of blue, each with a value between 00 and FF. For example, "color:#80D0FF;" will create a <span style="color:#A0D0FF;">light blue</span>)

== Copying the Data (Content) ==

If you need to copy a locally created database along with its content to a web server, the database and its content must be published online. For more information, please read the following information regarding the different DB engines.:


==== Database Engines: SQLite vs MySQL ====

Currently, openElement can use 2 different database engines. These can be selected and customized from the ''Site Explorer'' on the left -> ''Databases''

* SQLite - ideal for most projects, if your web host accepts it; openElement uses SQLite in local preview mode.

(+) No configuration required

(+) Easy management: a single file that can easily be copied or deleted

(+) In order to copy all the db content that was created locally (i.e. before publishing), simply publish the DB file to your web server

(?) Having too much data in a database can slow down the system, but this won't happen until the DB has tens of thousands of lines in it

* MySQL - more diffficult to manage, but available on most web hosts, along with advanced admin tools (manage/back up data, etc.)

(+) Better performance (speed) when there is a very high volume of data 

(-) In cases of smaller amounts of data, may perform slower than SQLite


==== Copying All Data in SQLite Mode ====

openElement uses an SQLite database when in local preview mode. If you would like to publish the locally created content online, simply copy the database file and replace its online equivalent ''''(Warning: this will overwrite and delete any database content that was created online).''''


Location of the "local preview database" (local = on your computer) within the project folder: 

Data\'''Local_previs_DB'''\oedb.db


Location of the "online database" (online = on your web server, accessible using an FTP tool like FileZilla): 

Data/'''SQLite_DB'''/oedb.db (This path can be changed in ''Site Explorer'' -> ''Databases'')


To replace online data with local data:
* '''Online''', using FileZilla, rename the file oedb.db located in Data/SQLite_DB/
* Copy the "'''local'''" oedb.db file (located in Data\Local_previs_DB\) online to the web server folder Data/SQLite_DB/, i.e. in the same place as the file you just renamed

                                                            '''FileZilla'''
  '''Local Computer'''                                                        '''Web Server'''
   ______________________________________________________               ______________________________________________________________
  |                                                      |             |                                                              |
  | Project folder                                       |             | Website "root" (where index.htm or index.php are housed)     |
  |   Sub-folder Data\Local_previs_DB                    |             |    Sub-folder Data/SQLite_DB                                 |
  |                                                      |             |       File oedb.db --> ''Renamed or deleted''                    |
  |     File oedb.db -------------------------------------------------------> ''Copy here''                                                |
  |______________________________________________________|             |______________________________________________________________|


''This action may not work if the file oedb.db is protected on the web server. If this is the case, online (using FTP), rename the SQLite_DB folder, then create a new folder, name it SQLite_DB and copy the "local" oedb.db file over to it.''

''(Under Construction)''