Installing UDM4 dropdown menu on cakePHP

CakePHP is quickly becoming one of the most popular PHP-based development frameworks available. With an intuitive MVC architecture and ORM, it is an easy and extensible platform for quickly developing web applications. This document is designed to help you install and configure a UDM4 dropdown menu using a cakePHP framework.

cakePHP requirements

The following prodecures were tested and verified to work on cakePHP v1.1 and cakePHP v1.2. These procedures should work on previous versions of cakePHP as well, but have not been tested.

Adding the UDM4 menu to your cakePHP installation

There are two steps to installing UDM4 with cakePHP.

  1. Get the UDM4 Code
  2. Modify your cakePHP Installation

Get the UDM4 Code

The first thing you will need to do is have a licensed copy of UDM4 to install on your system. You may either purchase a license or, if you work for a non-profit / non-commercial organization, request a non-profit license online.

Once you have a license, you may download the UDM4 dropdown menu code and install the code on your server (using FTP or similar method).

Modify your cakePHP installation

The final step is to add UDM to your installation. To do this, you should be aware of the basic architecture of cakePHP.

Note: The instructions below are basic instructions for installing a standard configuration UDM4 menu. If you're site makes use of Modules or extensions, you may need to modify the code below as necessary and outlined in the documentation for the appropriate module.

Below is the standard architecture for cakePHP. Note: INSTALLATION_DIR is the directory in which cakePHP is installed. 


INSTALLATION_DIR
 +- app
     +- controllers
     +- models
     +- views
 +- cake
 +- docs
 +- vendors

Your first step will be to unzip the udm4 files into the INSTALLATION_DIR/app/webroot/ folder.

Next, you will want to open up the following file: INSTALLATION_DIR/app/webroot/udm4/udm-resources/udm-custom.js. From there, you will want to edit your um.baseSRC to be the same as your installation directory. 

	
//path to images folder
 
um.baseSRC = "INSTALLATION_DIR/udm4/udm-resources/";

Next, you will need to add the UDM4 menu code to your default template. To do this, open the following file: INSTALLATION_DIR/cake/libs/view/templates/layout/default.thtml

In the <head> section, add the following code:

	
	<!-- ULTIMATE DROP DOWN MENU Version 4.5 by Brothercake -->
	<!-- http://www.udm4.com/ -->
	<script type="text/javascript" src="<?=$this->webroot?>udm4/udm-resources/udm-custom.js"></script>
	<script type="text/javascript" src="<?=$this->webroot?>udm4/udm-resources/udm-control.js"></script>
	<script type="text/javascript" src="<?=$this->webroot?>udm4/udm-resources/udm-style.js"></script>
	<script type="text/javascript" src="<?=$this->webroot?>js/tiny_mce/tiny_mce.js"></script>

Next, add the necessary code to your <body> section.

	
	<!-- menu script -->
	<script type="text/javascript" src="<?=$this->webroot?>udm4/udm-resources/udm-dom.js"></script>
	<!-- keyboard navigation module -->
	<script type="text/javascript" src="<?=$this->webroot?>udm4/udm-resources/udm-mod-keyboard.js"></script>

Finally, add your udm4 ul-li list code anywhere on the page that you would like it displayed.

This should provide the basics to get a functioning UDM menu installed and working on your cakePHP based web site. If you need assistance with customization, feel free to request a quote from us to customize your UDM menu to match your site's look and feel. If you have any problems with these instructions, or would like to offer use some helpful tips, please feel free to contact us.

Thank you.

This document is intended to offer methods to install UDM4 on a third party system. We do not endorse the use of any particular third party system, and offer this document as-is, without warranty expressed or implied. cakePHP is a copyright of cakePHP.org.

User Notes

Search

We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.