MODx 2.0: Web Development Basics

Exclusive offer: get 50% off this eBook here
MODx Web Development - Second Edition

MODx Web Development - Second Edition — Save 50%

Build dynamic websites with MODx PHP application framework and CMS

$23.99    $12.00
by Antano Solar John | February 2011 | Content Management Open Source Web Development

MODx is a content management system and PHP web application framework rolled into one. With the ease of a CMS and the extensibility of a framework, MODx allows you to develop professional-looking, intricate websites via its easy-to-use interface and flexible architecture. MODx provides reusable code called snippets, most of which are so generic that, without any modification, they can serve multiple purposes. The generic nature of snippets makes it possible to achieve the perfect customization that is so hard to achieve with other CMSes.

In this article by Antano Solar John, author of MODx Web Development - Second Edition, you will learn the basics of MODx, and how to create a Front Page for the site. The basic elements explained in this article are:

  • Site configurations
  • Documents and containers
  • The Manager interface
  • The TinyMCE editor

 

MODx Web Development - Second Edition

MODx Web Development - Second Edition

Build dynamic websites with MODx PHP application framework and CMS

        Read more about this book      

(For more resources on the subject, see here.)

Site configuration

When you first log in to the MODx Manager interface, you will see the site configuration page in the rightmost panel. Here, you can customize some basic configurations of the site. You can reach this page from anywhere in the MODx Manager by clicking on the Configuration sub-menu in the Tools menu.

All of the options that can be configured from this Configuration page are settings that are global to the entire site. After changing the configurations, you have to let MODx store them by clicking on the Save button.

The following is the screenshot of the Configuration page:

(Move the mouse over the image to enlarge it)

The configurations are grouped into five categories:

  • Site—mostly, settings that are used to personalize the site
  • Friendly URLs—settings to help make the site search-engine optimized
  • User—settings related to user logins
  • Interface & Features—mostly, Manager interface customizations
  • File Manager—settings defining what can be uploaded and where

Configuring the site

In this section, we are going to make a few changes to get you familiar with the various configurations available. Most configurations have tooltips that describe them in a little pop-up when you move the mouse over them.

After making changes in the site configuration and saving it, you will be redirected to another page. This page is available by clicking on the Home link on the Site tab. This page is also the default Manager interface page. This means that every time you log in using the Manager login screen, you will reach this page by default.

This page has seven tabs, which are briefly explained below:

  • My MODx Site: Provides quick access to certain features in MODx.
  • Configuration: Displays information on the current status of the site.
  • MODx News: Shows updates on what is happening with MODx.
  • Security Notices: Shows updates on what is happening with MODx that is specific to security.
  • Recent Resources: Shows a list with hyperlinks of the recently created or edited resources.
  • Info: Shows information about your login status.
  • Online: Lists all of the active users.

Noticing and fixing errors and warnings

The Configuration tab of the default Manager interface page displays errors and warnings about issues in the installation, if any. Generally, it also has instructions on how to fix them. Most of the time, the warnings are for security issues or suggestions for improving performance. Hence, although the site will continue to work when there are warnings listed on this page, it is good practice to fix the issues that have caused these warnings.

Here we discuss three such warnings that occur commonly, and also show how to fix them.

  • config file still writable: This is shown when the config file is still writable. It can be fixed by changing the properties of the configuration file to read only.
  • register_globals is set to ON in your php.ini configuration file: This is a setting in the PHP configuration file. This should be set to OFF. Having it ON makes the site more vulnerable to what is known as cross site scripting (XSS).
  • Configuration warningGD and/or Zip PHP extensions not found: This is shown when you do not have the specified packages installed with PHP. MAMP doesn't come with the ZIP extension and you can ignore this configuration if you are not using it in production. Both XAMPP and MAMP come with the GD extension by default.

Changing the name of the site

In the previous section, we listed the groups of configuration options that are available. Let us change one option—the name of the site—now.

  1. Click on the Tools menu in the top navigational panel
  2. Click on the Configuration Menu item
  3. Change the text field labeled Site Name to Learning MODx
  4. Click on the Save button

The basic element of MODx: Resources

Resources are the basic building blocks in MODx. They are the elements that make up the content of the site. Every web page in MODx corresponds to a Resource page. In early versions of MODx, Resources were called Documents. Thinking of them as documents may make it easier for you to understand. Every resource has a unique ID. This ID can be passed along in the URL, and MODx will display the page for the resource with the same ID. In the simplest case, a resource contains plain text.

As can be seen from the previous screenshot, the ID referred to here is 2, and the content displayed on the screen is from resource ID 9. It is also possible to refer to a resource by an alias name instead of an ID. An alias is a friendly name that can be used instead of having to use numbers.

Containers

Resources can be contained within other resources called containers. Containers in MODx are like folders in filesystems, but with the difference that a container is also a resource. This means that every container also has a resource ID, and a corresponding page is shown when such an ID is referenced in the URL.

MODx Manager interface

MODx is administered and customized by using the provided Manager interface. From the Manager interface, you can edit resources, place them within containers, and change their properties. You can log in to the Manager interface by using the Manager login screen http://sitename/manager, by using the username and password that you supplied when installing MODx. The Manager interface is divided into two panes. The leftmost pane always displays the resources in a resource tree, and the rightmost pane displays the content relevant to your last action.

The two preceding panes you see are the menu and the corresponding menu items. Each of these leads to the different functionalities of MODx.

In the leftmost pane, you will see the site name followed by a hierarchically-grouped resource list. There is a + near every unexpanded container that has other resources. When you click on the + symbol, the container expands to show the children and the + symbol changes to a – symbol. Clicking on the – symbol hides the children of the respective container. The resource's ID is displayed in parentheses after the resource's title in the resource tree.

The top of leftmost pane consists of a few icons, referred to as the Resource Toolbar, which help to control the visibility of the resource tree.

  • Expand Site Tree—expand all of the containers to show their children and siblings.
  • Collapse Site Tree—collapse all of the containers to hide their children and siblings.
  • New Resource—open a new resource page in the rightmost pane.
  • New Weblink—open a new weblink page in the rightmost pane.
  • Refresh Site Tree—refresh the tree of containers and resources to make available any changes that are not yet reflected in the tree.
  • Sort the Site Tree—open a pop-up page where you can select from the various criteria available to sort the tree.
  • Purge—when you delete a resource, it stays in the recycle bin. The resources are struck out with a red line. The resources can be completely removed from the system by clicking on the Purge icon.
  • Hide Site Tree—this icon slides the leftmost pane out of view, giving more space for the rightmost pane.

Right-clicking on a resource brings up a context menu from where you can perform various actions on the resource. Clicking on Edit will open the page for editing in the rightmost pane. The context menu provides interesting shortcuts that are very handy.

MODx Web Development - Second Edition Build dynamic websites with MODx PHP application framework and CMS
Published: February 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on the subject, see here.)

Using the HTML editor

MODx is bundled with a What You See Is What You Get (WYSIWYG) editor. So resources can be edited and modified without having to know HTML. This section shows you how to use the editor.

To edit any resource, click on the corresponding resource in the leftmost pane, and then click on Edit. Scroll down until you see the section with the title Resource Content. Here, you can edit the document using any installed text editor, or you can edit it as plain HTML. You can toggle this option by selecting the appropriate method from the editor by using the drop-down box. With the default installation, you have two choices—TinyMCE for a WYSIWYG editor and None for editing plain HTML.

This section discusses the TinyMCE editor that we installed during the MODx installation process. TinyMCE is open source software provided by http://tinymce.moxiecode.com.

The TinyMCE editor comes with handy tools to make the editing of your resources easier. It has small buttons on the top that you can click to perform the appropriate actions. Moving the mouse cursor over these buttons brings up tooltips that display the name of the button and the keyboard shortcut, if any. Using the keyboard shortcut can be handy when you are required to use a button multiple times. The available buttons, and many other settings, can be changed from the site configuration that was discussed earlier.

Notice that if you do not see the image. Click on the HTML icon in TinyMCE, and if you see additional quotes, you may want to turn off Magic Quotes, as mentioned in http://modxcms.com/forums/index.php?topic=40996.0.

Creating the Front Page

Now, you should understand what resources are and how the Manager interface allows you to create and control them. We will now create a Front Page.

In the Manager page, perform the following steps:

  1. Right-click on the Resource with ID 1 in the leftmost panel
  2. Click on Edit and fill in the following details:
    • Title: Home
    • Long title: Welcome to Learning MODx
    • Description: My Personal Site using MODx
    • Summary: The welcome page to my visitors
    • Uses template: MODxHost
  3. Insert some content that you would like to have in the Front Page, replacing the existing content from the demo site.

  4. Click on Save.
  5. Click on the Preview menu item in the Site menu to open a preview of the site in a new window.

You might want to change the entire content of your Home Page instead of just the content area.

When editing resources, it is good practice to save your changes frequently. Because you are editing the resources through the website, if you take too long before you save, then the page will get timed out, which will result in the loss of any changes that you had made.

DocManager module

If you move the mouse to the top of the page, as shown in the following screenshot, you will notice four buttons: Edit Resource, Create Resource here, Manager, and Logout.

Edit Resource and Create Resource here are available to quickly edit and create resources, respectively, without having to go back to the Manager interface. The Manager button takes you back to the Manager interface and Logout logs you out from the manager interface.

These functionalities are available when you:

  • Log in as an admin from the Manager page, then open a new tab or new window, and then visit any page in the site
  • Click on Preview Resource from within the Manager interface

When you click on Edit Resource, it opens up a pop-up page where you can edit the Resource details.

Once you make changes to the resource in the pop-up window, you can see the changes in the original page by clicking on the Update button. When you are done with editing the content, click on the Close button denoted by x at the lower-right of the window, or by clicking on the Cancel button.

Resources revisited

This section gives more information on resources and their properties.

Editing documents

A document has many properties attached to it. Changing the values of these properties changes the behavior of the document. When you click on Edit after clicking on a resource, you will see the following options next to the save button:

  • Add another—creates a new document after saving the current document
  • Continue editing—remains on the same page, even after saving the current document
  • Close—closes the current page after saving the document

Resource properties

The following are the Resource properties:

General tab

  • Title: The title of the resource. This is generally a short title that gets displayed when listing your resources.
  • Long title: The long title of the resource. This is a more descriptive title of the resource.
  • Description: Here, you can set the optional description of the resource.
  • URL alias: When friendly URLs are enabled, the resources can be accessed by using a friendly name, called the alias, instead of the ID. Here, you can set the resource's alias.
  • Link Attributes: When this resource is opened through a link, you might want it to open in a relative window. Here, you can specify the relative targets for the link.
  • Summary (Introtext): A brief summary of the resource can be specified here, depending on whether or not your templates use the summary.
  • Uses template: Set the template within which the resource's content will be used.
  • Menu title: Here you can specify the title that you would like to use as a menu item if your resource is accessible from a menu. If no menu title is set for the page, the page title will be used.
  • Menu index: Menus can be generated in MODx dynamically. Menu index allows you to have fine control over the ordering of the menu. For example, menus can be sorted in ascending or descending order of the menu index. Menu index is a number assigned to the resource to allow this fine control over dynamically-generated menus.
  • Resource parent: Resources can be organized to be within containers. A resource parent is the container within which you would like this resource to be. To select the resource parent, click on the small gray icon next to this field, and then click on the document that you would like to have as the parent document.

Settings

This page provides checkboxes to enable or disable certain properties, some of which we have already discussed. The list of these checkboxes is:

  • Published
  • Container
  • Rich text
  • Enable Stats Tracking
  • Searchable
  • Cacheable

In addition to the checkboxes listed above, you also have the following fields available to you:

  • Publish date: You can use this field to publish the document on a future date. You can select the publishing date by clicking on the calendar icon next to this field. You can remove the publishing date by clicking on the icon next to it.
  • Un-publish date: This is similar to the previous field, but it unpublishes (removes from availability) the page on the specified date.
  • Resource Type: You can choose whether the resource is a Web Page or a Weblink.
  • Internet Media Type: You can choose whether the resource contains HTML or XML, Microsoft Word documents, and so on.
  • Empty cache: If you want MODx to clear the current cache of the document, leave this field selected. Once you save the document properties, the cache is cleared for this document and this field is cleared.
  • Content Disposition: This is a drop-down box with two options:
    • Inline: When the document is accessed, its contents are rendered by the browser.
    • Attachment: When the document is accessed, its contents are available for download as a file.

Access permissions

Here, you define who has access to the documents.

Summary

In this article, you have learned about resources and containers and how every page that is displayed gets its content from a resource. You have also learned to create, edit, and manipulate resources and manage their configurations, and have also received an explanation of the TinyMCE editor. This article also explained each and every configuration option available for documents, and also the general configurable options of the site. Finally, you created a Front Page using what you have learned, and were introduced to the convenience of the DocManager.


Further resources on this subject:


MODx Web Development - Second Edition Build dynamic websites with MODx PHP application framework and CMS
Published: February 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Antano Solar John

Antano Solar is a techie to the core—a tech evangelist who is passionate about using technology to revolutionize the learning experience! Antano has contributed to the open source community in terms of documentation, code, and support, with a variety of platforms based on languages such as PHP, Perl, Lisp, Python, and Ruby.

He loves to share his tech excitement with fellow techies and non-techies, and does so through publishing papers, books, and delivering seminars at colleges, universities such as the IIT, and corporate tech events.

He has published a paper on enhancing wireless networks in an IEEE Journal. His paper on an engine helping machines understand objectives by meta-modeling, using Neurolinguistic Programming principles and Deep Structure, is considered a landmark.

An avid hacker, Antano has won two Yahoo hack-day awards. He recently won the award for developing a Hybrid Search Engine from scratch in 24 hours that uses Machine Intelligence and Social Intelligence to identify, search, and present the information in the required format.

Professionally, until recently, Antano was a Consultant and a Trainer providing IT solutions and sessions on VoIP, Networks and Software Plaforms, and Languages. He is currently the Chief Technology Officer at NuVeda Learning. In his current role, he is responsible for the development and deployment of Learning Management Systems that are used by large MNCs globally. He also plays the role of a Chief Architect in the research and development of technologies related to the understanding and measuring of Learning. He is excited by the challenges of using complex technologies such as Artificial Intelligence and Natural Language Processing.

Occasionally, when Antano needs to take a "Tech" break, he likes to train and tell stories!

Books From Packt


CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery

Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers

Joomla! 1.6 First Look
Joomla! 1.6 First Look

Squid Proxy Server 3.1: Beginner's Guide
Squid Proxy Server 3.1: Beginner's Guide

Building Websites with ExpressionEngine 2
Building Websites with ExpressionEngine 2

WordPress 3 Complete
WordPress 3 Complete

Agile Web Application Development with Yii1.1 and PHP5
Agile Web Application Development with Yii1.1 and PHP5

Alfresco 3 Web Services
Alfresco 3 Web Services


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
a
4
c
e
u
y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software