Adding an image field

Adding an image field and upload dialogue is really easy, just take these steps:

  1. Open your mysql editor
  2. Add a field with a name that ends in: '_image' ie: 'company_staff_image'
  3. Select 'varchar' as data type with length 255
  4. In the comment field add something like: 'staff image|||-|||200x200' (Please note that you can use a '*' instead of a '-' to make this a required field)

Note: The CMS will create an upload dialogue for you. An image of any size can be uploaded, but when dragging the mouse over the image immediately after uploading the user will be able to select an area within the image and crop. After selecting a crop area a 'save cropped' button will appear below the image.

Note: The path form web root will be saved. If you want to use the uploaded image just retrieve from the database and show as follows.

Tutorial

Code example

<img src="<?=$row['company_staff_image']?>" />

Mapping default page elements

When a new page is created via the cms default elements can be loaded. It is easiest to first create the page and organize it the way you want, then lookup element references in table: 'dzpro_page_element_to_page' and copy them to /manage/reports/pages.php accordingly.

Code example

<?php
//Default page elements
$default_elements = array();
$default_elements[] = array('element_area' => 'head block', 'element_id' => 1);
$default_elements[] = array('element_area' => 'head block', 'element_id' => 6);
$default_elements[] = array('element_area' => 'body top', 'element_id' => 2);
$default_elements[] = array('element_area' => 'containter top', 'element_id' => 4);
$default_elements[] = array('element_area' => 'containter top', 'element_id' => 5);
$default_elements[] = array('element_area' => 'container bottom', 'element_id' => 3);

//Page builder
$Page = new Page($db, 'dzpro_pages', array('states' => $states_list, 'default_elements' => $default_elements));
?>

Uploading files with specific extensions

With Ukora cms you can generate an upload ui limited to an extension of your choosing. Just take the following steps:

  1. Add a column that ends in '_png_file' or '_pdf_file' replacing the extensions with any extension of your choosing.
  2. Pick type 'varchar' and length 255
  3. In the comment field add something like 'png file|||-' (If you want the field to be required please use a '*' instead of a '-'.

Note: Make sure you set proper permissions to your '/uploads/' folder to allow for uploaded files to be saved.

The path to your file will be saved in the database.

Creating a new template

Ukora CMS templates can be found in the '/assets/templates/' folder. When creating a new template please be sure to name it as follows: newtemplatename.template.php

Note: If you fail to name your template as described above you won't see it as an option when editing or creating a new page.

Note: It's easiest to copy an existing template into a new file and modify it according to your liking.

Please make sure you do the following:

  1. Enter a unique and descriptive template name: /* Template name: Enter template name here */ (The cms will pull the name out of the comments at the top of the file)
  2. For this template to be accounted for in intelligence gathering please add the template name to the following function call: addToIntelligenceStack('template view', 'enter template name here');
  3. Change caching expiration if needed: $this->PageCache = new PageCache($this->db, '-1 hours');
  4. On your template you can add as many element areas as you want: self::loadPageElements('content top'); Please just make sure they are uniquely and descriptively named.
  5. Multiple content areas can also be added: self::loadPageContent('main content');

See an example template below.

Code example

<?php
/* Template name: Full Width Template */

//security check
if(!defined('RELATIVE_ASSETS_PATH')){ include '../../page.php'; exit(0); }

//force secure connection
//forceSecureConnection();

//handle visitor
$this->Visitor = new Visitor($this->db);

//Save template views
addToIntelligenceStack('template view', 'full width page');

//Start page cache
$this->PageCache = new PageCache($this->db, '-1 hours');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
	<head><?=self::loadPageElements('head block')?></head>
	<body>
		<?=self::loadPageElements('body top')?>
		<div class="container">
        	<?=self::loadPageElements('containter top')?>	
			<div class="content">
				<?=self::loadPageElements('content top')?>
				<?=self::loadPageContent('main content')?>
				<?=self::loadPageElements('content bottom')?>
      		</div>	
			<?=self::loadPageElements('container bottom')?>
		</div><!-- end container -->
		<?=self::loadPageElements('page bottom')?>
	</body>
</html>
<?php

//Save page output
$this->PageCache->savePageCache();

?>

Creating a site element

Creating a site element callout of bucket is easy. You can create as many elements as you like, just goto /assets/elements/ and create a new file name something like: myelement.element.php.

After creating your site element file. You'll need to add it to the cms, login to the back-end, goto Pages then Elements and create a new record (You'll be able to select the newly created element from the dropdown)

Note: In our next release A-B testing will be build into the cms.

An example element is listed below.

Code example

<div class="page-header">
	<h1>
		<?=prepareStringHtml(limitString($this->current_page['dzpro_page_title'], 40))?>
		<?php if(isset($this->current_page['dzpro_page_tagline']) and have($this->current_page['dzpro_page_tagline'])){ ?><small><?=prepareStringHtmlFlat(limitString($this->current_page['dzpro_page_tagline'], 40))?></small><?php } ?>
	</h1>
</div>

Super user vs regular user

There are two levels of users in Ukora CMS.

  1. Super users
  2. Regular users

The default administrator is a super user. You can give any user super user privileges by changing the value of dzpro_admin_super to 1

Super user permissions overview

  1. The super user can delete records even if $Form->dontAllowDelete(); was invoked.
  2. This user can edit fields that are marked read only
  3. This user can change passwords of other users
  4. Can make changes to records with a password without password reprompt

Regular user permissions overview

  1. This user can make edits within the confines of the cms
  2. This user can only make edits to rows with a password field upon re-entering the orginal password
  3. This user can be prevented from editing field by marking them read only
  4. This user can be prevented from deleting records by using $Form->dontAllowDelete();

Below is an example of how to make a field read only: (Use the 'x' to make it read only, the '*' to make it required and '-' to make this field optional)

Tutorial

Setting up a site form

Setting up site forms, like a contact form, is easy. Just take the following steps:

  1. In the back-end goto: Form then Site Forms and click + to add a new form.
  2. Fill out the form details (If you select Send Email a email template html area will appear)
  3. Scroll down and click form fields to start adding field (See tutorial below)

Tutorial

Below the form details, you'll find a header named 'form fields'. Just click to open it up.

Tutorial

Add as many fields as you like. Pick the field type that is closest to your intended content. If you're not sure just pick 'text'

Tutorial

Submission will be emailed to the admin associated with the department(s) associated with the form. In addition submissions can be browsed on the back-end. You can also download a csv export of form submissions.

Stick on inserted record after inserting

If you would like to stay on the freshly inserted record, in the manager section, than this is how you do that:

Just place the snippet below above the form object invocation.

Code example

//keep record on page after adding new one
define('STICK_ON_RECORD_AFTER_INSERT', true);

//try form class
$Form = new Form($db, 'dzpro_projects');

Creating a database user

For the security of your server, always create a new user permissions to the database used with your Ukora installation. Please pick a unique password for each installation.

To create a new user, just open your mysql editor of choice and take the following steps:

  1. Create a database for your Ukora installation
  2. Execute the ukora.sql file to import tables and data
  3. Run the query below, replacing [[[databasename]]], [[[site]]] and [[[password]]] with their corresponding values

Code example

GRANT ALL PRIVILEGES ON [[[databasename]]].* TO
"[[[site]]]DbUser"@"localhost" IDENTIFIED BY "[[[password]]]";
FLUSH PRIVILEGES;

Saving Intelligence Data

If you want to track somehing, you can do so by using the addToIntelligenceStack('intel key', 'intel value'); function.

You can pick any value as the key, on the back-end you'll be able to create a widget using this key. (Try to be descriptive when creating a key)

Code example

//save visitor country
addToIntelligenceStack('country', $data['country_code']);

Show Form Statistics

You can add a graph of records added easily. Just call method buildFormStats([[[interval]]], [[[range]]]) within the Form (or alias of Form) oject.

For interval the following values can be used: 'hour','day','month','year'.

Tutorial

Two graph block will appear, showing new records by interval and range you specify.

Code example

<?php $Users->buildFormStats('days', 30); ?>
<?php $Users->buildFormStats('hours', 24); ?>

Creating a menu system

Creating a menu system goes as follows:

  1. Create the menu system on the backend, please check the image below for details. All the checked pages will appear in the top level of this navigation system. Child pages will automatically be included, and don't have to be checked.
  2. In the element file in which you intend to build the navigation system use $top_nav = self::getMenu(1); to get the navigation system. This particular example pulls the menu system for #id(1).
  3. Using php function foreach() just walk through the array to build your menu system. You'll have to write code to handle each level of depth. (In most cases two levels is enough)

Tutorial

Just give the menu system a name and description for your reference. You can see the id of the menu system in the top right of the screen. (You'll need this #id to refer to this particular menu system in your code)

Code example

<ul class="left">
	<?php $top_nav = self::getMenu(1);  if(!empty($top_nav)){ foreach($top_nav as $page_id => $page_array){ $selected = ($page_array['active'] == 1) ? ' class="active" ' : null; ?>
	<li>
		<a href="<?=$page_array['path']?>" title="<?=prepareTag($page_array['page']['dzpro_page_title'])?>" class="<?php if($page_array['active'] == 1){ ?>active<?php } ?>">
			<?=prepareStringHtml($page_array['page']['dzpro_page_name'])?>
			<span class="decal_left"><!-- decal --></span>
			<span class="decal_right"><!-- decal --></span>
		</a>
		<div class="sub_menu_holer">
			<?php if(have($page_array['subpages'])){ ?>
			<ul>
				<?php foreach($page_array['subpages'] as $sub_page_id => $sub_page_array){ ?>
				<li>
					<a href="<?=$sub_page_array['path']?>" title="<?=prepareTag($sub_page_array['page']['dzpro_page_title'])?>" class="<?php if($sub_page_array['active'] == 1){ ?>active<?php } ?>">
						<?=prepareStringHtml($sub_page_array['page']['dzpro_page_name'])?>
					</a>
				</li>						
				<?php } ?>
			</ul>
			<?php } ?>
		</div>
	</li>
	<?php } } ?>			
</ul>

Creating parent, child relationships between pages.

Per page, you can assign a parent page. This means that the child page will be included in the menu system of the parents page. If you don't need your page to be a sub page of an existing page you can choose: -- top level -- from the parent page dropdown.

Tutorial

Creating breadcrumbs

On websites with more than 10 pages it pays to have breadcrumbs. This informs the user of their whereabouts within the content structure of your site.

Please refer to the example below for directions on creating your own breadcrumbs element.

Code example

<ul class="breadcrumb">
	<li><a href="/" title="<?=SITE_NAME?>"><?=SITE_NAME?></a> <?php $breadcrumbs = self::getBreadCrumbs(); if(isset($breadcrumbs) and !empty($breadcrumbs)){ ?> <span class="divider">&gt;</span> </li><?php $count = 1; foreach($breadcrumbs as $breadcrumb){ if($count != sizeof($breadcrumbs)){ ?> <li><a href="<?=$breadcrumb['path']?>" title="<?=prepareTag($breadcrumb['dzpro_page_title'])?>"><?=prepareStringHtml($breadcrumb['dzpro_page_name'])?></a></li> <span class="divider">&gt;</span> <?php }else{ ?> <li class="active"><?=prepareStringHtml($breadcrumb['dzpro_page_name'])?> </li> <?php } $count++; } } ?>
</ul><!-- end .breadcrumb -->

Adding a new table to the back-end

You can add a table to the cms by following these steps:

  1. Create a table of choice using your favorite mysql editor. Please refer to the tutorial images below for instructions on naming conventions.
  2. Add your fields, and add the following in the comment field: the field name(additional field instructions)|||/[a-z0-9]+/|||Enter something here
  3. Intead of the regex between the pipes, you can use '*', 'x' or '-' ('*'=required, 'x'=read only, '-'=optional)
  4. Add a full text index on varchar and text fields (These fields will be used for the search functionality)

Now you can create a file on the backend where you can edit this information. Most new table data will be added in the 'data' section on the backend in a similarly named folder. You can copy an existing file in this folder, name it accordingly, and replace the table name reference with the table name you just created.

Now you'll need to create a records so this page can be added to the cms navigation. Just goto table: dzpro_section_pages and add a new row. You can choose the parent id (dzpro_section_id) corresponding to the section in which you placed your new file. If you don't know the right parent id offhand, just look for other pages in that section in the table and you'll see what is the right one.

The last thing you'll need to take care of is to give admins access to this page, where appropriate. Just visit 'people' -> 'admins' and check the associated box, and save the record.

Tutorial

Add your fields, and add the following in the comment field: the field name(additional field instructions) / a-z0-9 +/ Enter something here Intead of the regex between the pipes, you can use ' ', 'x' or '-' (' '=required, 'x'=read only, '-'=optional)

Tutorial

Add a full text index on varchar and text fields (These fields will be used for the search functionality)

Code example

//where are we
define('RELATIVE_ASSETS_PATH', '../assets');

//knock over the first domino
require RELATIVE_ASSETS_PATH . '/conf/general.settings.php';

//authenticate session
$Auth = new Auth($db);

//try form class ... replace dzpro_subscribers with the table name you created
$Form = new Form($db, 'dzpro_subscribers', array('states' => $states_list));

Building an accordion slider

Building an accordion can be done using the Accordion object. To build an accordion just use the code example below.

Tutorial

This is the accordion, with five records. The second record is expanded.

Code example

//build team accordion element
$Accordion = new Accordion($this->db);
$Accordion->setData(mysql_query_flat(" SELECT * FROM directors WHERE director_active = 1 ORDER BY director_orderfield ASC "));
$Accordion->setHeaderKey('director_name');
$Accordion->setBodyKey('director_html');
$Accordion->buildAccordion();

Adding pagination

Adding pagination is easy, the Pagination object will serve as an intermediary for you query pulling the records that need to be displayed.

The Pagination($db, 12, 6); will define the maximum records displayed and the maximum number of pages shown at one time. In this case the number 12 refers to the number of records shown per page, and the number 6 refers to the maximum number of pages show at one time. The actual number of pages possible is unlimited.

Code example

<?php 
$Staff = new Pagination($db, 12, 6); 
$Staff->setQuery(" SELECT * FROM staff ORDER BY staff_orderfield "); 
$records = $Staff->getRecords(); 
if(have($records)){
?>
<?php $Staff->printPaginationBlock(); ?>
<?php foreach($records as $record){ ?>
record html goes here
<?php } ?>
<?php $Staff->printPaginationBlock(); ?>
<?php } ?>

Custom Payment Options

When you want to use custom payment options for a web form:

  1. Login to the back-end
  2. Goto 'forms'
  3. Choose the right 'form'
  4. Scroll down to 'form fields'
  5. Choose the field with type 'creditcard' (the payment block)
  6. Pick 'custom options' from 'payment type'
  7. Enter your options according to the example below.

Tutorial

This view can be found under 'forms' -> 'form fields' -> 'payment field'

Code example

Donate $50=50,Donate $75=75,Donate $100=100,Donate $150=150,Donate $200=200,Donate $250=250,Donate $500=500,Donate $1000=1000,Donate $2500=2500,Silver Sponsor=5000,Gold Sponsor=10000

Create a select box from Mysql

A select box can be created from a mysql query like so:

printSelectBox('industry', mysql_query_on_key(" SELECT * FROM industries WHERE industry_active = 1 ORDER BY industry_orderfield ASC ", 'industry_name'), array('id' => 'industry_field'), getUserData('industry'))

  1. 'industry' is the select box name
  2. mysql_query_on_key(" SELECT * FROM industries WHERE industry_active = 1 ORDER BY industry_orderfield ASC ", 'industry_name') will build an array from this query keyed on field 'industry_name'. Since we are passing a multidimensional array the first non-numeric value will be used between the <option> tags.
  3. array('id' => 'industry_field') are the addional attributes, if you want add a style="width: 200px;" tag for instance
  4. getUserData('industry') gets the value for the currently logged in user

Code example

<label for="industry_field">Industry</label>
<div class="input">
	<?=printSelectBox('industry', mysql_query_on_key(" SELECT * FROM industries WHERE industry_active = 1 ORDER BY industry_orderfield ASC ", 'industry_name'), array('id' => 'industry_field'), getUserData('industry'))?>	
</div>

Building a form with the FormElements class

With the class FormElements you can map out a form, then display all the fields, or each field induvidually. This offers the developer maximum flexibilty in how to layout the form. Form validation and js triggers are handled by the FormElements object, and server side form handling can be a simple mysql insert, or something more complex. It's all possible.

Code example

<?php

//form details
$this->FormElements->setFormAction($_SERVER['REQUEST_URI']);
$this->FormElements->setFormMethod('post');
$this->FormElements->setFormName('addPosterUI');
$this->FormElements->setFormTable('posters');

//title
$this->FormElements->setTemplate('table row');
$this->FormElements->setFieldLabel('Title');
$this->FormElements->setFieldCondition('*');
$this->FormElements->setFieldType('text');
$this->FormElements->setFieldName('title');
$this->FormElements->setFieldMapTo('poster_title');
$this->FormElements->setFieldPlaceholder('Title of poster');
$this->FormElements->setFieldHelper('Please enter a descriptive title');
$this->FormElements->setDefaultValue('');
$this->FormElements->buildField();
$this->FormElements->nextField();

//Research Area
$this->FormElements->setTemplate('table row');
$this->FormElements->setFieldLabel('Research Area');
$this->FormElements->setFieldCondition('*');
$this->FormElements->setFieldType('select');
$this->FormElements->setFieldOptions(mysql_query_on_key(" SELECT * FROM research_areas WHERE research_area_active = 1 ORDER BY research_area_orderfield ASC ", 'research_area_id'));
$this->FormElements->setFieldName('research_area');
$this->FormElements->setFieldMapTo('research_area_id');
$this->FormElements->setFieldPlaceholder('-- pick your research area --');
$this->FormElements->setFieldHelper('Please pick your research area');
$this->FormElements->setDefaultValue('');
$this->FormElements->buildField();
$this->FormElements->nextField();	

//Organization
$this->FormElements->setTemplate('table row');
$this->FormElements->setFieldLabel('Organization');
$this->FormElements->setFieldCondition('');
$this->FormElements->setFieldType('textarea');
$this->FormElements->setFieldName('organization');
$this->FormElements->setFieldMapTo('poster_organization_html');
$this->FormElements->setFieldPlaceholder('Enter organization');
$this->FormElements->setFieldHelper('Please share poster organization');								
$this->FormElements->setDefaultValue('');
$this->FormElements->buildField();
$this->FormElements->nextField();
		
//Upload file
$this->FormElements->setTemplate('table row');
$this->FormElements->setFieldLabel('Upload File');
$this->FormElements->setFieldCondition('*');
$this->FormElements->setFieldType('file');
$this->FormElements->setFieldName('poster_file');
$this->FormElements->setFieldMapTo('poster_pdf_file');
$this->FormElements->setFileExtensions(array('pdf'));
$this->FormElements->setFieldPlaceholder('');
$this->FormElements->setFieldHelper('Upload your poster .pdf file.');							
$this->FormElements->setDefaultValue('');
$this->FormElements->buildField();
$this->FormElements->nextField();

//Upload image
$this->FormElements->setTemplate('table row');
$this->FormElements->setFieldLabel('Upload Image');
$this->FormElements->setFieldCondition('*');
$this->FormElements->setFieldType('image');
$this->FormElements->setFieldName('poster_image');
$this->FormElements->setFieldMapTo('poster_image');
$this->FormElements->setFieldImageDimensions(200, 120);
$this->FormElements->setFileExtensions(array('jpg', 'gif', 'png'));
$this->FormElements->setFieldPlaceholder('');
$this->FormElements->setFieldHelper('Upload your poster image.');							
$this->FormElements->setDefaultValue('');
$this->FormElements->buildField();
$this->FormElements->nextField();

//time stamp
$this->FormElements->setTemplate('hidden');
$this->FormElements->setFieldLabel('');
$this->FormElements->setFieldCondition('*');
$this->FormElements->setFieldType('hidden');
$this->FormElements->setFieldName('date_added');
$this->FormElements->setFieldMapTo('poster_date_added');
$this->FormElements->setFileExtensions(array('jpg', 'gif', 'png'));
$this->FormElements->setFieldPlaceholder('');
$this->FormElements->setFieldHelper('Upload your poster image.');							
$this->FormElements->setDefaultValue('');
$this->FormElements->buildField();
$this->FormElements->nextField();

//print form header	
$this->FormElements->buildFormHeader();
		
?>
<table cellpadding="0" cellspacing="0">
	<tbody>
		<?php 
			//print form fields
			$this->FormElements->printFormFields();
		?>
	</tbody>
</table>
<?php

//form footer
$this->FormElements->buildFormFooter();

?>

Handle FormElements form submission

This is an example of server side form validation. Please note that the FormElements need to be defined prior to performing the validation. If no elements have been defined, validFormSubmitted will return false and validateSubmission will return true.

Code example

<?php

//if submitted try to handle
if($this->FormElements->validFormSubmitted()){
	if($this->FormElements->validateSubmission()){
		echo 'accepted';
	}else{
		echo 'failed';
	}
}
?>