George Mason University Antonin Scalia Law School

MODX: Designing a Web Site

Contents

  • Templates
  • Template Variables
  • Snippets
  • Chunks
  • Plugins

    Templates

    In the MODx manager interface, go to Resources > Manage Resources > Templates to create or modify templates.

    Every page uses a template. Templates contain regular HTML markup, plus placeholders for variables. It is common to use the pagetitle field in MODx for the <title> element in the template, for example. In the template, that line would look like this:

    <title>[*pagetitle*]</title>
    

    The longtitle is often used for the first heading above the page content, like this:

    <h1>[*longtitle*]</h1>
    [*content*]
    

    Other useful page variables include id, alias, description, and menuindex (which allows you to sort pages in any order). You can use these fields any way you like within the template.

    Note: When designing templates in MODx, it is usually best to define a base URL in the <head> of the template like this:

    <base href="http://www.law.gmu.edu/org/" />

    With the base URL in place, you will need to define your links relative to this url. For example, with the above base URL in place this link

    <a href="mypage">My page</a>

    will point to this web address:

    http://www.law.gmu.edu/org/mypage

    BUT most links should be created by using the ID of the document (e.g. <a href=”[~1234~]”>Link text</a>). Refer to the information about links for more information.

    Template Variables

    In the MODx manager interface, go to Resources > Manage Resources > Template Variables to create or modify template variables.

    When you use template variables, you turn your MODx pages into a database of data objects, which you can query and manipulate to display in an almost unlimited number of ways. For example, you could create a template variable called “fname” to store a person’s first name, and “lname” to store a person’s last name. You could create template variables for email, phone, address, and anything else you need to store in a database. The data can be input as text input, or from a drop-down list of pre-defined options, or radio buttons, or checkboxes, or textarea fields, or a number of other options. You define the data type and parameters when you create the template variable.

    To make use of this data, you can use “snippets” of PHP code. You can design your own snippets, or you can make use of snippets included with MODx. The Ditto snippet is especially useful for working with template variables.

    Refer to the documentation at http://modxcms.com/template-variables.html for more information about template variables.

    Snippets

    In the MODx manager interface, go to Resources > Manage Resources > Snippets to create or modify snippets.

    In MODx, reusable bits of PHP code are referred to as snippets. You reference a snippet by it’s name, and put it in brackets, like so:

    [[SnippetName]]

    If you are passing parameters to the snippet, you add a question mark to the end of the snippet name and add the parameters, preceded by an ampersand:

    [[SnippetName? &parameter1=`21` &parameter2=`Here is a string of text`]]

    The snippet will interpret the parameters into the output. Notice that the parameters are contained within backtick marks: ( ` ) rather than quotation marks ( ” or ‘ ).

    Snippet: “Wayfinder” — Creating Navigation Menus

    You should take advantage of the Wayfinder snippet to automatically generate navigation menus. Wayfinder creates an unordered list that can be styled in many different ways. The snippet is embedded in the template like this:

    [[Wayfinder? &startId=`[[UltimateParent]]` &level=`1`]]

    Notice that the UltimateParent snippet is embedded within the Wayfinder snippet. The UltimateParent snippet finds the topmost page in the hierarchy and generates the id number of that page. The Wayfinder snippet generates the menu system as an unordered list, based on the children documents of the document referenced by the startId parameter, which in this case is the topmost page in the hierarchy. You can also create menu systems for pages deeper down in the site hierarchy. The &level parameter tells the Wayfinder snippet how deep to look within the hierarchy when generating the menu. With the level set to 1, the menu will consist only of the immediate child documents. With level set to 2, it would look at the child and “grandchild” documents.

    The Wayfinder snippet can also be used to generate a list of all pages in a certain directory, even if the list is not meant to be a navigation menu per se. Wayfinder will create a bulleted list of the pages, with each page title as a link to the page itself.

    Snippet: “Ditto” — Using Data from other Pages

    Ditto is a snippet that can pull in data from other pages, including not only the standard page variables (pagetitle, longtitle, content, etc.), but also the template variables. If you have a template for entering data about people, such as first name, last name, email, etc., you can pull in this information from multiple pages and display it on a single page. Here is an example of a Ditto call:

     [[Ditto? &parents=`11` &depth=`1` &tpl=`people` &sortBy=`lname` &sortDir=`ASC`]]

    In the above example, the Ditto snippet will display data from all of the pages immediately below document 11 (id=11). It will not include data from pages further down in the hierarchy because we have limited the scope to &depth=`1`. We format the data using the chunk called “people” with the &tpl=`people` parameter (tpl stands for “template”, but these are mini-templates, not complete web pages). We’re sorting the pages by last name, as specified with &sortBy=`lname`. The “lname” field is a template variable that would have been created before hand (there is no “lname” field unless you create a template variable by that name). The sort order is ascending, as specified by &sortDir=`ASC` (sortDir stands for “sort direction”).

    Ditto is a powerful and somewhat complicated snippet. Refer to the documentation at http://ditto.modxcms.com/ for more information. The list of Ditto parameters (http://ditto.modxcms.com/files/snippet-ditto-php.html) is especially helpful.

    The chunk that contains the mini-template must also contain placeholders for the different data fields. Placeholders are designated by brackets and plus symbols; for example: [+my_placeholder+]. The chunk for the above example might look something like this:

    <p>Name: [+fname+] [+lname+]</p>
    <p>Email: <a >href="mailto:[+email+]">[+email+]</a></p>
    <p>Biographical Sketch: [+bio+]</p>
    

    Each placeholder above refers to the name of a template variable which would need to be defined beforehand.

    Snippet: “Breadcrumbs”

    The Breadcrumbs snippet allows you to automate the creation of breadcrumbs. Here is an example call for this snippet:

    [[Breadcrumbs]]

    Parameters for this snippet include:

    • &maxCrumbs
    • &pathThruUnPub
    • &respectHidemenu
    • &showHomeCrumb
    • &showCrumbsAtHome
    • &showCurrentCrumb
    • &currentAsLink
    • &crumbSeparator
    • &homeCrumbTitle
    • &homeCrumbDescription
    • &titleField
    • &descField

    For more documentation, see http://wiki.modxcms.com/index.php/Breadcrumbs

    Snippet: “eForm”

    eForm allows you to create a form that sends the information in an email to the designated recipients. This is a rather robust snippet, and can be somewhat complex to implement, but works quite well when used knowledgeably. Refer to the documentation at http://www.law.gmu.edu/org/assets/snippets/eform/docs/eform.htm for more information, including the examples at http://www.law.gmu.edu/org/assets/snippets/eform/docs/eform_examples.htm.

    Chunks

    In the MODx manager interface, go to Resources > Manage Resources > Chunks to create or modify chunks.

    In MODx, reusable bits of HTML code are referred to as chunks. You
    reference a chunk by it’s name, and put it in braces, like so:

    {{ChunkName}}

    Chunks cannot contain any PHP code, but they can contain references to snippets which do contain PHP code.

    Plugins

    Plugins are like snippets, except that they are activated by certain trigger events, such as when a page is rendered, or when a user saves a page, and so on. You probably don’t need to create a plugin for most things. Snippets are the best and safest option. The danger with plugins is that they run on all pages whenever the trigger is activated, so if you create a plugin with a syntax error in the code, you may bring down the whole site. So be careful.

    Plugin: “PHx” — Extensible Placeholders

    One useful plugin that is already installed in the system is called PHx. This plugin allows you to extend the behavior of placeholders. You can give them logical if/then conditional constructions, convert the content to all upper or lower case, and format the placeholders in many ways. Here is an example of an if/then conditional statement:

    [+phx:if=`[+pref_name+]`:isnot=``:then=`[+pref_name+]`:else=`[+fname+]`+]

    This statement says to display the pref_name (preferred name) template variable if it is not empty. Otherwise it will display the fname (first name) template variable. There are many ways to use this plugin, with multiple syntax variations. Refer to the PHx documentation for more information.

    Plugin: “Page TOC Generator”

    Another useful plugin is the Page TOC (Table of Contents) Generator. This allows you to automatically create a page-specific table of contents based on the headings on that page. Detailed instructions are found at http://modxcms.com/Page-TOC-Generator-0.9.2-1731.html.

    To simplify things, I have created a few chunks of HTML code that condense some of the more common TOC parameters. To create a table of contents based on all of the <h2> elements on a page, do this:

    {{toc_begin_2}}
    Put page content (with headings, paragraphs, etc.) here.
    {{toc_end}}

    To create a table of contents based on all of the <h2> and <h3> elements on a page, do this:

    {{toc_begin_2_3}}
    Put page content (with headings, paragraphs, etc.) here.
    {{toc_end}}

    For other configurations, refer to the Page TOC Generator documentation.

MODX: Getting Started

The George Mason University School of Law uses a web content management system called MODX. MODX allows for template-driven web sites with a great deal of flexibility, and easy editing from anywhere using a web browser. There is no need to install HTML editing software, FTP software, or anything else. Just log in and begin editing the web site.

Overview of the Interface

Navigation Tabs: The navigation tabs at the top of the interface allow access to the various parts of MODX. Depending on what level of permissions you have, you may see only one tab or up to 6 tabs. The “Site” tab allows access to pages for editing. The “Resources” tab allows access to files (PDF, Word, etc.), and, depending on your level of permissions, may allow access to templates, PHP code, and other features. The other tabs, if present, allow access to more advanced administrative functionality.

Document Tree: You’ll see a list of the pages that you have permission to edit in the left hand column. If there are container pages (“folders”), you will see a plus symbol next to the page name. Click on the plus to expand the list of pages within that container.MODX

Main Window: The main window to the right of the document tree is where you can edit pages and perform other actions.

Editing Pages

There are two ways to begin editing a page:

  1. Click on the page in the document tree, then click on “Edit” at the top of the Main Window, OR
  2. Right-click on the page in the document tree, then select “Edit document” from the menu

Once you are in editing mode, you will need to fill out some information in the top of the Main Window:

Title: This is the <title> HTML element which will show up in the title bar of the browser (above the “File” and “Edit” menus of the browser).

Long Title: This is the main heading in the content of the web page (using a <h1> HTML element). Usually the Title and Long Title contain the same text.

Document’s Alias: This is the “file name” of the page, which will show up in the web address of that page. For example, the alias of the Faculty section of the web site is “faculty” and the full web address is http://www.law.gmu.edu/faculty.

Template: The template is probably already selected, and probably does not need to be changed. There are specific templates for each section of the web site. Using the wrong template can give the page the wrong look, or break the page’s functionality in other ways.

Menu Index: This refers to the order of the pages in the Document Tree in MODX. The Menu Index can also used to display navigation menus on the public side of the web site. The pages will be ordered alphabetically if the menu index is the same (for example “0”) for all of the pages within a given directory. For the main Law School web site, the number 990 should be typed in as the default Menu Index. Other sub-sites may use different numbers. (Using a large number like 990 allows you to type in lower numbers later on for other pages, if you want them to appear at the top of the menu system.)

Show in Menu: If this is selected, it makes the page available to scripts that can generate navigation menu systems on the web site. Not all folders or pages are used by these scripts, but with the “show in menu” option checked, the pages will show up in the menu; with it unchecked, they won’t show in the menu.

Document Content: This is where you edit the main part of the web page. Most user accounts have a word processor style interface here, so you don’t need to know HTML markup code.

  • Links:
    • Links to external web sites: Select the word(s) that you want to make clickable, then click on the link icon (which looks like a chain link). Type in the full web address of the link (including the “http://”)
    • Links to pages within MODX: It’s best to use the MODX ID of the page, rather than the path or file name. Click on the link icon, then type the MODX ID using this format: [~1234~] where “1234” is the MODX ID of the document. The brackets and tildes (~) are required. How do you find the MODX ID? Look at the number in parentheses after the page name in the Document Tree. Note: You may not have permission to see all of the files in the MODX system. If that is the case, you will need to use the path of the file, relative to the root directory of the site. The link to the faculty page would look like this: “/faculty”. The link to a page deeper in the system would look something like this: “/faculty/news/details”. But if the ID number is available to you, please use it! It is definitely the preferred method.
    • Links to files (Word, PDF, etc.):MODX Click on the link icon, then click on the red/white/blue icon to the right of the “link URL” field. Browse to the folder where the file is (or where you want to put the file). Click on the file to select it, or use the features at the bottom of the file browser to upload a new file. Remember to first go to the correct directory before uploading it!
  • Headings: Always use real headings (not just big bold text, for example). Choose the appropriate heading from the “Format” drop-down list. The “Long Title” is heading 1, so any headings in your content should start with heading 2.
  • Text alignment: Use the “Styles” drop down menu to align text left, right, center, or justified.
  • Images: To insert an image, put your cursor where you want the image to be, then click on the icon that looks like a tree. You can either use an image that’s already on the web site, or else upload a new image. Either way, you will need to click on the red/white/blue icon to the right of the “Image URL” field. This will bring up a file browser. Either choose an image from among the existing ones, or use the features at the bottom of the file browser to upload a new image. Make sure you upload it to the correct directory! (You must be in the correct directory before you upload the file.)
  • Other options: On most pages, the other options (description, summary, menu title, etc.) are not required, and can be left blank.

Creating New Pages

To create a new page, go to the Document Tree, find the folder where you want the document to be, right-click that folder, then select “Create document here.” Then fill in the information for that page in the Main Window.

Other Features

MODX has many other features. This tutorial will be expanded over time to give more information about those other features.

Simple Steps to Secure WordPress Site

  1. Keep WordPress updated
  2. Keep plugins updated
  3. Only use trusted plugins
  4. Only use trusted themes
  5. Choose a secure password
  6. No “admin” username
  7. Decent hosting
  8. Keep regular backups
  9. Restrict login attempts (use iThemes Security)
  10. Switch on SSL encryption
  11. Change database prefix
  12. Two-factor authentication (use Google Authenticator)
  13. Monitor what’s happening
  14. Block access to system files

    # protect files
    <files wp-config.php>
    Order deny,allow
    Deny from all
    </files>
    <files readme.html>
    Order allow,deny
    Deny from all
    </files>
    <files license.txt>
    Order allow,deny
    Deny from all
    </files>
    <files install.php>
    Order allow,deny
    Deny from all
    </files>
    <files error_log>
    Order allow,deny
    Deny from all
    </files>

    # Block the include-only files.
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^wp-admin/includes/ - [F,L]
    RewriteRule !^wp-includes/ - [S=3]
    RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
    RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
    RewriteRule ^wp-includes/theme-compat/ - [F,L]
    </IfModule>

  15. Build your own firewall
  16. Hide .htaccess file
    # STRONG HTACCESS PROTECTION
    <Files ~ "^.*\.([Hh][Tt][Aa])">
    order allow, deny
    deny from all
    satisfy all
    </Files>
  17. Protect WP-Admin area
  18. Block PHP in uploads folder
    <Files *.php> Deny from All </Files>
  19. Tighten PHP configuration
    ; Disable allow_url_fopen in php.ini for security reasons
    allow_url_fopen = Off
    ; Disable allow_url_include in php.ini for security reasons
    allow_url_include = Off
    ; Disable display_errors in php.ini for security reasons
    display_errors = Off
    log_errors = On
  20. Create your own encryption keys
  21. Folder permissions

Source: Primary Image

OpenSSL Update

Instructions on how to secure your server against the Heartbleed vulnerability:

  1. Edit CentOS-Base.repo (vi /etc/yum.repos.d/CentOS-Base.repo)
    • Add the # sign to this URL: mirrorlist=http://... (#mirrorlist=http://...)
    • Delete # sign to this URL: #baseurl=http://... (baseurl=http://...)
  2. yum clean all
  3. yum update openssl
  4. openssl version -a (Confirm the update: exemple: 'built on: Tue Apr 8 02:39:29 UTC 2014')
  5. rpm -q --changelog openssl | head (fix can be confirmed)
  6. Restart Apache
  7. Re-edit CentOS-Base.repo (vi /etc/yum.repos.d/CentOS-Base.repo)
    • Delete the # sign to this URL: #mirrorlist=http://... (mirrorlist=http://...)
    • Add # sign to this URL: baseurl=http://... (#baseurl=http://...)

Source: GoDaddy.

Re-Keying an SSL Certificate in GoDaddy.

Turning off SSL engine in Apache for CentOS

  1. vi /etc/httpd/conf.d/ssl.conf (Edit ssl.conf)
  2. SSLEngine off (Find a line SSLEngine and turn it to off)
  3. service httpd restart (Restart the Httpd Services)

Source: Linux Toolkits

Backup and Restore MySQL via MySQLdump

To backup:

# mysqldump -u root -p[password] database_name > database_name_backup.sql

[password] should be placed immediately after -p. For example: -pmypassword. database_name_backup.sql would be created in the root directory.

To restore:

  1. Create an appropriately named database on the target machine
  2. Load the file using the mysql command:
    # mysql -u [uname] -p[pass] [db_to_restore] < [backupfile.sql]

To restore a database that already exists, use mysqlimport command:
mysqlimport -u [uname] -p[pass] [dbname] [backupfile.sql]

Source: How to Back Up and Restore a MySQL Database

Simple RSS Parser With lastRSS

LastRSS makes displaying RSS feed easy. Here’s an example:

<?php
// include lastRSS
include "./lastRSS.php";

// Create lastRSS object
$rss = new lastRSS;

// Set cache dir and cache time limit (1200 seconds)
// (don't forget to chmod cahce dir to 777 to allow writing)
$rss->cache_dir = './temp';
$rss->cache_time = 1200;

// Try to load and parse RSS file
if ($rs = $rss->get('http://www.law.gmu.edu/rss/news_all')) {
// Show website logo (if presented)
if ($rs[image_url] != '') {
echo "<a href=\"$rs[image_link]\"><img src=\"$rs[image_url]\" alt=\"$rs[image_title]\"  /></a>\n";
}
// Show clickable website title
echo "<h1><a href=\"$rs[link]\">$rs[title]</a></h1>\n";
// Show website description
echo "<p>$rs[description]</p>\n";
// Show last published articles (title, link, description)
echo "<ul>\n";
foreach($rs['items'] as $item) {
echo "\t<li><a href=\"$item[link]\">".$item['title']."</a>".$item['description']."</li>\n";
}
echo "</ul>\n";
}
else {
echo "Error: It's not possible to reach RSS file...\n";
}
?>

Simple CAS Authentication

The following script makes a private web site accessible only to authenticated users. For example, if you have a career services web site and you only want students to access the materials using their email (university) credentials, this script would do the trick. You don’t need to create separate accounts  for the site.

1. Download phpCAS and unzip/untar it: https://wiki.jasig.org/display/CASC/phpCAS.

2. Place the entire phpCAS directory on your server.

3. Place the following codes in at the top of any .php file that you want the contents to be private. If you want to make the entire site private, just add the script to an include file in the header. The following script is based on a simple CAS client:

<?php

/**
* Example for a simple cas 2.0 client
*
* PHP Version 5
*
* @file example_simple.php
* @category Authentication
* @package PhpCAS
* @author Joachim Fritschi <jfritschi@freenet.de>
* @author Adam Franco <afranco@middlebury.edu>
* @license http://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
* @link https://wiki.jasig.org/display/CASC/phpCAS
*/

// Load the settings from the central config file
// require_once 'config.php'; /*commented out by Donny*/
// Load the CAS lib
require_once $phpcas_path . '/CAS.php'; /*This is the path that to the CAS directory on your server, not the URL*/

// Uncomment to enable debugging
phpCAS::setDebug();

// Initialize phpCAS
phpCAS::client(CAS_VERSION_2_0, $cas_host, $cas_port, $cas_context);
//example: phpCAS::client(CAS_VERSION_1_0, 'login.gmu.edu', 443,'');

// For production use set the CA certificate that is the issuer of the cert
// on the CAS server and uncomment the line below
// phpCAS::setCasServerCACert($cas_server_ca_cert_path);

// For quick testing you can disable SSL validation of the CAS server.
// THIS SETTING IS NOT RECOMMENDED FOR PRODUCTION.
// VALIDATING THE CAS SERVER IS CRUCIAL TO THE SECURITY OF THE CAS PROTOCOL!
phpCAS::setNoCasServerValidation();

// force CAS authentication
phpCAS::forceAuthentication();

// at this step, the user has been authenticated by the CAS server
// and the user's login name can be read with phpCAS::getUser().

// logout if desired
if (isset($_REQUEST['logout'])) {
phpCAS::logout();
}

// for this test, simply print that the authentication was successfull
?>

4. Add the following script to your HTML file to indicate if the user is logged in and also to the allow the user to sign off.

<div>Not <strong><?php echo phpCAS::getUser(); ?></strong>? <a href="?logout=">Sign out</a></div>

phpCAS and WordPress

Make sure your account is in the “Administrator” role, as you won’t be able to login as admin after switching to CAS.

1. Download phpCAS and unzip/untar it: https://wiki.jasig.org/display/CASC/phpCAS

2. Download wpcas.zip and unzip it in wp-content/plugins

3. edit wp-content/plugins/wpcas/wpcas.php and remove or comment out line 57:

/* $wpcas_options['server_path'] == '' || */

4. Create wp-content/plugins/wpcas/wpcas-conf.php with the following content (change “/path/to” to the path to CAS.php that you installed in step 1):

<?php

// the configuration array

$wpcas_options = array(

'cas_version' => 'S1',

'include_path' => '/path/to/CAS.php',

'server_hostname' => 'login.gmu.edu',

'server_port' => '443',

'server_path' => ''

);

// this function gets executed

// if the CAS username doesn't match a username in WordPress

function wpcas_nowpuser( $user_name ){

die('you do not have permission here');

}

?>

4. Login with an account that’s in the Administrator role.  In “Plugins”, activate the wpCAS plugin.

5. If possible, test in a separate browser.  When you click “Log in” you should be redirected to https://login.gmu.edu.  Type in your PatriotPass NetID and password.  You should be redirected back to your WordPress site.