How KOFIVE Works

The Kofive Outline

Kofive technology, now in version 1.3, consists of a client website (details here) constructed to Kofive specifications, a Kofive Key (details here) the client can use to edit the content of selected pages on their site, and a personalized Kofive User Guide (details here) that provides the client instructions on how to use their Kofive Key.

 

This page explains the specifications for Kofive-compliant websites, the elements of a Kofive key, and what is included in the Kofive User Guide.

 

Kofive uses HTML, CSS, and PHP to work. If you want to use Kofive technology with your clients' websites, you will need to be reasonably fluent in these languages. If you can read the explanations below and understand them pretty well, then you should be okay. Your host must also support these languages - I believe all hosts do.

 

 

Building a Kofive-Compliant Website

There are several elements to building a Kofive-compliant website. These elements consist primarily in separating the HTML framework, the menuing system, and the content into discrete elements, then reassembling them at runtime using PHP. The content element is kept in a separate directory, which is given private FTP access, which enables the site owner to access and edit the content files without having access to the rest of the site.

 

Here's how I build a Kofive-compliant website:

 

1. Build the home page in HTML.

Establish a typical header section, including the link to my stylesheet for this page.

 

Use stylesheets for ALL web pages.

 

Establish CSS IDs for an overall wrapper div ("wrapall"), and for a "header" div, a "navcontainer" div, a "maincontent" div, and a "footer" div. The "header", "navcontainer," "maincontent", and "footer" divs are contained within the "wrapall" div. None of these internal divs need to be styled, although it's okay if you do.

 

Within each div above, put the appropriate content, so the HTML page displays the way you want it to.

 

WARNING: Kofive will work best if you put the <body> and </body> tags on their own separate lines. I.e., do not put other code on the same line with those tags.

 

WARNING: DO NOT allow a line break between any <img tag and the src= element of that tag, or Kofive WILL NOT WORK work for images on the page.

2. Separate the elements into discrete PHP files.

Create a directory "page_elements" directly under root. Into this directory put the following files.

 

f01_header.php - consists of all HTML from the top of the HTML file down through the closing </div> tag of the id="header" div.

 

f02_menu.php - consists of everything between the opening and closing id="navcontainer" tags, including the tags. We can modify this later to include the Kofive menubuilder function.

 

f03_contenttop.php - this is an optional file that includes any HTML code between the end of the "navcontainer" tag and the beginning of the "maincontent" tag. Not all websites have elements in this area, so this file may not be needed.

 

f05_footer.php - this file includes everything from the opening id="footer" dif tag through the end of the HTML document.

 

Create a directory "admincontent" directly under root and copy the entire index.html document there. Rename the document "homepage.html".

3. Modify the page_elements files as follows.

Put a trap at the beginning of each PHP file you just created in the /page_elements directory. The trap is designed to prevent people from running that PHP file directly, but rather requires them to include it with another PHP file.

 

I use the following as a basic trap:

 

if (!$authorized)
{ echo "<font color=\"red\" size=\"6\">You are not authorized to view this file!</font>"; die; }

 

In the PHP that includes this file, simply set $authorize=true; before including the script, and the trap is avoided.

 

You can also built a more elegant trap for those pages more likely to be displayed, such as a bogus index.php page in each directory that people are not supposed to go to directly.

 

In the header area of each PHP file, you can also include commented information about that file, if you wish. I do.

 

In the f01_header.php file, find the <title> tag and change it so it reads like this:

 

<title><?php echo $pagetitle ?></title>

 

We will establish the variable $pagetitle later, in the including routine.

 

In the .html file in the /admincontent directory, remove everything inside the id="wrapall" div except the id="maincontent" element.

 

This means remove all of the id="header" element, all of the id="navcontainer" element, and all of the id="footer" element. This will leave you with a valid HTML page containing only the editable content of the page.

 

For any links on the page, such as to stylesheets, re-set their relative paths appropriately, or make them absolute.

 

This is the document the site owner will edit with their Kofive Key, and this is the document that will be included as content when the server builds the rest of the page.

4. Build a test index.php file.

This is where we put it all together and make sure it works.

 

In root, create an index.php file as follows:

$authorized=true;//Authorize includes
$pagetitle="Kofive - Home Page"; //Set Page Title

include 'page_elements/f01_header.php';
include 'page_elements/f02_menubuilder.php';
include 'page_elements/f03_contenttop.php';
include 'admincontent/homepage.html';
include 'page_elements/f05_footer.php';

Make sure to set the $pagetitle variable to the title you want to appear on your page.

 

Save that file, then run it in a browser. (If you're not running a development environment like WAMP or XAMPP, you can simply upload it to your server). If you've done everything right, your page should appear exactly as it did when it was an HTML page.

 

Now you're ready to get started with the heart of Kofive.

 

Once this file is running properly, the page files (those pages called by menu links) for all owner-editable pages on the website will be identical, except for the value of the $pagetitle variable and the name of the /admincontent include file.

 

This is the essence of Kofive, and makes your site compliant to Kofive version 1.0.

 

Kofive version 1.3 goes two steps farther, as explained in the next step. There is an explanation of why we developed these versions farther down this page.

5. Import the Kofive functions and modify the index.php file

Click here to import ko5_functions.php (be sure to change the file extension from txt to php), then place this file into your page_elements directory.

 

Modify the index.php file to set the proper variables, and to call the main Kofive content function. You will need to establish the following variables:

 

$html_page = the name of the content HTML file in the /admincontent directory.

$ac_dir = the absolute URL of your /admincontent directory, WITH trailing slash.

$ac_dir_relative = the relative URL of your admin content directory, WITH trailing slash

 

Establish those variables, then include the Kofive function file, and finally change the include homepage.html line to be a reference to the Kofive function.

 

Here's what it should look like when you're done:

$authorized=true;//Authorize includes
$pagetitle="Kofive - Home Page"; //Set Page Title

$html_page="homepage.html;

$ac_dir="http://www.kofive.com/admincontent/";

$ac_dir_relative="admincontent/";

include 'page_elements/ko5functions.php';
$temp=ko5_readfile($html_page);

 

include 'page_elements/f01_header.php';
include 'page_elements/f02_menubuilder.php';
include 'page_elements/f03_contenttop.php';
$temp=html_fetch($html_page);
include 'page_elements/f05_footer.php';

Be sure the $pagetitle and $html_page variables are set to the proper values for this page, and that the $ac_dir and $ac_dir_relative variable values are set properly for your site. Notice that the values of these four variables are the only differences between pages on the site. Save the index.php file.

 

Finally, go to the f01_header.php file, and add the following code just above the closing </head> tag:

<?php

$temp=ko5_get_headstyle()

?>

This will cause the Kofive Technology to find any <style...> elements in the <head> tag of the source document, and include them in the <head> area of the output document.

 

Now save this file and and test your changes. It should display exactly as before. (Hint: to make certain you are picking up the changes instead of displaying a cached page, make a small change to the visible content of the page, something you can see as a difference when the page updates.)

 

If this works for you, then you're almost done with your entire website. If it doesn't work, then you'll need to debug until it does.

 

The next two steps demonstrate the power of Kofive. You can complete your entire website in just a few minutes from this point. All that's left after that will be to put content into the owner-editable HTML files.

6. Duplicate and populate the content files.

In the /admincontent directory, duplicate the homepage.html file. Rename it to the name of another page in your site, then delete all the content relevant to the home page.

 

Duplicate this empty file once for each page on your site (menu), renaming the new files appropriately.

 

Fill in the content area of each file with appropriate content. (Note: sometimes I fill this in with bogus content, if the client has not yet furnished me with the content they want on this page. They can edit the content later, using their Kofive Key.)

7. Duplicate and modify the root PHP files.

In root, duplicate index.php once for each page (menu item) you have in your web site.

 

Rename each duplicate with the proper file name, the same name as is linked from your menuing system.

 

Open each PHP file and change only the four variables, highlighted orange in the PHP code in step 5 above.

 

Test each PHP file, preferably through your menuing system.

8. Finally set up a private FTP login and password for the /admincontent directory.

You will need to do this in your website's control panel. This is essential for the client to be able to use their Kofive Key.

That's it. You now have a Kofive-compliant website, ready for the client to edit their own content using their Kofive Key.

 

Don't forget to delete any HTML files (especially index.htm or index.html) files you may have put onto your server before your site goes live.

 

 

Why We Have Each Version of Kofive

Version 1.0 of Kofive simply included complete HTML files as the body of each page. In spite of the fact that this horribly violated the standards of HTML design, with multile declarations, multiple headers, multiple body areas, etc., it actually worked.

 

That is, it worked as long as the included HTML document wasn't too complex, as long as it didn't have its own style sheets included, as long as... well, you get the idea. It served admirably for a first version of Kofive.

 

One of the biggest drawbacks to Kofive at this stage was that the WYSIWYG HTML editor very helpfully shortened any IMG SRC references to relative, unless you went through lots of gyrations to prevent it. This violated our principle of keeping things as simple as possible for our web clients. Hey, the reason they hired us in the first place is because they don't want to be bothered with complex web stuff, right? They're willing to pay us to do that for them. They'd like to be able to update their own content, but it needs to be simple, as easy as a word processor.

 

We tried a few ways around this complexity, but they really didn't work, so version 1.1 was flushed.

 

We hit the solution with Version 1.2. With this version, we have written PHP code that reads the editable HTML document into an array, then processes that array for including only the relevant parts in the final output page, and - here's the kicker - finding all <img ...> tags and intercepting the src="path/path/filename.jpg" element of the tag and dynamically converting it to an absolute URL, which it then feeds to the live output page.

 

So far, this patch has been working perfectly, and the site owners can edit their web pages and include pictues now, without having to go through all the hoopla of changing the img src reference to an absolute URL.

 

Version 1.3 became necessary when we realized that some HTML editors will place stylings for body elements in the <head> tag of an HTML document.

 

This means that if a user downloaded the HTML document, edited it with their own editor that did this, then uploaded the HTML document back to the server (which they can do with a Kofive Key), when their edited document was included on a live page call, those stylings would not be picked up in the include file, because V1.2 would not pass through anything inside the <head> tag of that document.

 

V1.3 adds a new function, called in the f01_header.php file just above the closing </head> tag, that finds any stylings in the <head> of the original document, and includes them in the final rendering of the web page.

 

 

Building a Kofive Key

A Kofive Key is called a "key" because it is usually given to the client on a USB flash drive (USB key). However, the Kofive Key does not have to be on a flash drive; it may be simply installed on the client's computer.

 

A Kofive Key consists of three main programs, an optional program, and a menuing system.

 

The three main programs on a Kofive Key are

  • A WYSIWYG HTML Editor. The current version of our Kofive Key uses KompoZerPortable, optimized to show only those controls typically needed to edit the content of a web page, with the client's FTP access already programmed in to the app's file manager, so when the program starts, it automatically logs in to the /admincontent directory of the client's website. You will need to configure this program with the username and password you set up for the /admincontent directory on your client's website. See step 8. above in the section on building Kofive-compliant websites.
  • An Image Editing Program. The current version of our Kofive Key uses IrfanViewPortable as our image editor.
  • A File Transfer Program. The current version of our Kofive Key uses FileZillaPortable as our FTP program, optimized to show only those controls and panels the user will need, and with the site manager already set up with the client's /admincontent directory as the only entry, so the client can quickly and easily log in to their site. You will need to configure this program with the username and password you set up for the /admincontent directory on your client's website. See step 8. above in the section on building Kofive-compliant websites.

The optional program on a Kofive Key is a Single-Site Browser (SSB). While it is possible, if you are building the Kofive Key on the client's own computer, to provide them with a SSB using an application such as Prism or Bubbles, these apps do not work as portable versions. Therefore, the current version of the Kofive Key uses OperaPortable, modified to eliminate all controls from the interface, and started with a command-line parameter that opens it directly to the client's website. This effectively renders OperaPortable into a SSB. You will need to configure your menuing program to open this version of Opera with the parameter that takes it directly to your client's web site.

 

The menuing system can be any sort of menuing system that works to start EXE files. When we build Kofive Keys for our clients, we provide them with a custom-built menuing system we create using the Sam's Logic commercial CD Menu Builder. This menuing system is customized for each client and has buttons to allow the client to Edit Text, Edit Images, Transfer Files, View Your Site, and Close the Menu.

 

Here's a screen shot (reduced) of what one of our client's menus looks like:

 

 

If you don't want to go to the hassle of building your own Kofive Key(s), of finding, downloading, and customizing all the software, of purchasing a menu-builder program and constructing and testing custom menus for each Kofive Key, we can provide Kofive Keys to you, preconfigured and personalized for each client's website. Please see our Purchase page for more information.

 

The Kofive User Guide

A typical Kofive User Guide consists of the following chapters:

  1. Orientation. This provides an orientation to the Kofive concept from the site owner's perspective, and some basic information on security and backup of their Kofive Key.
  2. Editing Text On Your Website. (Mandadory chapter) This chapter describes, step by step, the procedures the website client must follow to use the Kofive Key to edit the content (text) on their accessible website pages.
  3. Placing Photos On Your Website. (Mandatory chapter) This chapter leads the client step by step through the more complex procedures of embedding photos in with the text on a content page. It describes preparing the image files, including orientation, cropping, and resampling, using the IrfanView application on the Kofive Key, and it covers uploading the prepared images to the website using the file transfer program on the Kofive Key, and it also covers actually embedding the photos in the content text using the KompoZer editor on the Kofive key. These are complex procedures for anyone, but a website client determined to update their own content can do so with these procedures.
  4. Your Email Accounts. (Optional chapter) This chapter is included if the website client also has email addresses associated with their website. This chapter outlines the email accounts and passwords already set up, and (optionally) describes how to add, edit, and delete email addresses. It also describes how to use the internet to check those email accounts, and the necessity to keep email inboxes emptied out.
  5. Updating Your Photo Album. (Optional chapter) This chapter is included if the client has an embedded photo album on their website. We use FOTKI premium accounts for this, as they have a fully featured photo hosting site that is completely co-brandable, allowing you to make the photo album appear as just another page in the client's site. This chapter describes how the client can add to and update photos in this album, and gives the account login ID and password.
  6. Updating Your Embedded Calendar. (Optional chapter) This chapter is included if we embed a Google Calendar on the client's site. It describes how to add and edit events on the calendar. It also gives the account login ID and password.
  7. Adding Audio or Video To Your Site. (Optional chapter) This chapter is included if there are any embedded audio or video files on the site. It describes how to delete them or add more. We use Chirbit for free audio embedding, YouTube for free video embedding, and Vimeo for paid (no ads, no logo) video embedding.
  8. Website Updates. (Usually included) This chapter outlines the procedures to follow if they want to add pages to their site, change the appearance of their site, or if their site becomes corrupted in some way.
  9. Annual Site Fees. (Usually included) This chapter describes what is included in the site building fee, which usually covers the first year of fee-based services, such as Fotki or Vimeo, and what to expect as far as fees in subsequent years, such as hosting fees, domain renewal, etc.

We generally provide our website clients with a copy of the User Guide, printed in full color, in a 3-ring binder with a nice and well-designed cover sheet inside the front cover sleeve of the binder. This gives them something (besides the Kofive Key) they can hold in their hand and get tactile feedback that their website truly exists and works.

 

If you don't want to go to all the hassle of building the Kofive User Guide yourself, we will be happy to provide you with a personalized printed copy for any of your clients. See our purchase page for details.