In the eighth part of our series on programming, we will refine our Jquery menu and start building a user friendly interface to add content.
In the previous article, we implemented a menu using the Jquery library. Looking at menu.inc, we see the menu is “hard coded” with a top level menu Home, and sub menu’s Pages, News and FAQ’s. To make our CMS user friendly, ideally we would store the menu values in a database table that we could access and amend from a web form (Listing 1 and Figure 1).
Rather than building a custom page for each table, it would be good practice to design a set of global functions (e.g. sign on, retrieve fields, save fields etc.) and design a template that we could change on a per table / form basis. We could then quickly build forms to modify each type of content. We also need to tweak the CSS for our dropdown menu. At the moment with the default CSS, the menu is floating to the left hand side. We will modify this to accommodate a wider menu with more options.
Step 1
For the initial testing, we will hand code a menu in menu.inc and add a few placeholders. Once we are happy with the CSS, we will then add this to a database table and add our forms. In the next article, we will write the code to extract the menu values and fire them into Jquery. Replace the code in (Listing 1) with the code in (Listing 2) and modify preload.js as well as global.css to match (Listing
3) and (Listing 4). This will provide the menu as shown in (Figure 2 & 3).
Add jquery support for each menu: Listing 3. Add some additional CSS so that the individual menus line up: Listing 4.
Step 2 – Create the menus table
In MySQL, create the menus table (Listing 5). Populate with some basic menus (Listing 6).
Step 3 – Build the amendcontent page
The amendcontent page is a PHP script that allows the user to add new content to the CMS. As we have not validated the user input yet, we’ll just capture the input for now. Create a new PHP file called amendcontent.php in the root directory where index.php is already saved (Listing 7).
We need to add a small modification to global.css to line up the fields (Listing 8). Now visit http://yoursite/amendcontent.php and you will have a dynamic form ready to save data to any table in the CMS. See (Figure 4-6).
In the next article
We will use the data from the menu tables to populate the Jquery menus and write some validation code for the user input prior to saving to the database.
About the Author
Rob Somerville has been passionate about technology since his early teens. A keen advocate of open systems since the mid-eighties, he has worked in many corporate sectors including finance, automotive, airlines, government and media in a variety of roles from technical support, system administrator, developer, systems integrator and IT manager. He has moved on from CP/M and nixie tubes but keeps a soldering iron handy just in case.
This article was re-published with the permission of BSD Magazine. To Learn More about iXsystem’s commitment to open source check us out here: https://www.ixsystems.com/about-ix/
