PHx (Place Holders extended) in MODx

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

MODx Web Development — Save 50%

Building dynamic websites with the PHP application framework and CMS

€18.99    €9.50
by Antano Solar John | March 2009 | Content Management Open Source

In some cases, it may be necessary to perform simple conditional checks in the documents, or templates themselves. PHxPlace Holders extended—is a set of notations that makes this possible by adding a logic layer directly to the placeholder. PHx also makes it possible to format the output, for example converting the string to uppercase, and so on. In this article by Antano Solar John, we will learn to use this notation.

PHx in action

Let us learn our need of PHx by building a new functionality for our site that lets us add profiles of our family members and friends. We will add a new page called 'Family and Friends' that will show the list of all the individuals that we add. Once the user clicks on an individual, it will show certain details such as name, relationship to you, occupation, web site. This is easy to implement; all we have to do is create the template variables for each of the fields, and create a template that uses these template variables. So, to display the Occupation, the template will have a code similar to the following:

Occupation: [*occupation*]

Though this might appear to work initially, it has a small glitch in it. When we are entering the personal details of an individual, we may not want to enter all of the values for every individual. In the case of not having a value for the variable, it looks cleaner to not show the label at all instead of leaving it blank. In our case—if we have no value for occupation—it will look cleaner to not show the label Occupation. So here comes a need for displaying certain text only if the template variable—in this case, occupation—has a value. We can do this using PHx without having to write a snippet.

Installing PHx

To download PHx, use the following steps:

  1. Download PHx from http://MODxcms.com/PHx-1006.html.
  2. Extract the contents of the downloaded file.
  3. Create a directory called phx in the assets/plugins folder of your MODx installation.
  4. Copy all the files within the extracted folder to the assets/plugins/phx folder.
  5. Create a new plug-in using the MODx Manager interface:
    • Click on the Manage Resources menu item in the Resources menu
    • Click on the Plugins tab
    • Click on the New Plugin link
    • Fill it with the following details:

Field Name

Field Value

Plugin Name

PHx

Plugin Code

Contents of the file phx.plugin.txt in the extracted folder

System Events | OnParseDocument

Checked

     6.Click on Save.

Adding Family and Friends documents

Let us create a page that lists all the members from the Family or Friends group. This document will be a container that will have a document for each member that you would like to add. Hence, just as you have learned earlier, a call to the Ditto snippet can get you all the documents that a container holds.

  • Create a page with the following details:

Field Name

Field Value

Title

Family and Friends

Uses template

Learning MODx default template

  • Modify the page created in the previous step to have the following code. (Note that we need to know the ID of the created page for the code and hence, we are modifying it after creating it.)
      <ul>
      [!Ditto? &parents=`65` &tpl=`familyandfriendslist`!]
      </ul>
  • Here, 65 is the ID of the created document. We give the ID of this document here as we will be adding the other documents as child documents of this document.

  • In the above Ditto call, we have indicated that we are using a custom chunk to control the appearance of the listing. Create a chunk with the following details, to show a neat list of the documents that represent a member with the title and a link to the document.

Field Name

Field Value

Chunk name

familyandfriendslist

Existing Category

Learning MODx

Chunk Code

<li>

<h3><a href="[~[+id+]~]">[+title+]</a></h3>

</li>

 

MODx Web Development Building dynamic websites with the PHP application framework and CMS
Published: March 2009
eBook Price: €18.99
Book Price: €30.99
See more
Select your format and quantity:

We will have to create a new template for the documents that represent the members you add as family or friends. The template will show the various details of the member. And to hold the various details of the members, we will need to create the appropriate template variables that the template can use. Create the following template variables with the given attributes.

Field Name

Field Value

Variable Name

occupation

Input Type

Text

Template Access

Family and Friends

Existing Category

Learning MODx

 

Field Name

Field Value

Variable Name

relationship

Input Type

Text

Template Access

Family and Friends

Existing Category

Learning MODx

Now that we have the template variables, let us create the template that the documents representing members will use. Create a template with the following details. The highlighted section of the code represents the portion that introduces the situation discussed in the beginning of the article. Even if the template variable has no value, there is a corresponding label shown, because we have it so in the template.

Field Name

Field Value

Template name

Family and Friends

Existing Category

Learning MODx

Template Code

Code given next

Template Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/
xhtml" xml:lang="en">
<head>
<title>Learning MODx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
<h1>Learning MODx</h1>
</div>
<div id="wrapper">
<div id="container">
<div id="content">
<div id="col-1">
<div id="menu">
[!Wayfinder?startId=`0` &amp;level=`2` &amp;outerClass=`outer`
&amp;innerClass='inner' &amp;lastClass=`last` &amp;firstClass=`first`
&amp;hereClass=`active`!]
</div>
<h1>[*pagetitle*]</h1>
<br/>
<table>
<tr> <td> Relationship: </td> <td> [*relationship*] </td> </tr>
<tr> <td> Occupation: </td> <td> [*occupation*] </td> </tr>
<tr> <td> Website: </td> <td> [*website*] </td> </tr>
</table>
<br/>
[*#content*]
</div>
<div id="col-2" >
<div > [!WebLogin!] </div>
<div>
[!Ditto? &parents=`47` &tpl=`dittofrontpage`!]
</div>
</div>
</div>
</div>
<div class="clearing"> </div>
</div> <!-- end of wrapper div -->
<div id="footer">It is fun and exciting to build websites with
MODx</div></body>
</html>

Now that we have the template for Family and Friends, let us create a few documents that represent members. We will use these documents to observe the transformations in the appearance as we proceed.

Field Name

Field Value

Title

Richard Stallman

Uses Template

Family and Friends

Show in menu

Unchecked

Document parent

Family and Friends

Document content

Richard Stallman is the founder of &nbsp;, FSF, and GNU Emacs!

relationship

Friend

occupation

Geek

website

http://www.stallman.org

 

Field Name

Field Value

Title

Richard Bandler

Uses Template

Family and Friends

Show in menu

Unchecked

Document parent

Family and Friends

Document content

Founder of Neuro Linguistic Programming (NLP)

relationship

Friend

occupation

 

website

http://www.richardbandler.com

 

Preview the Family and Friends document and you should see the following image:

PHx (Place Holders extended) in MODx

Now preview the test documents and you should see the following screens:

PHx (Place Holders extended) in MODx

PHx (Place Holders extended) in MODx

MODx Web Development Building dynamic websites with the PHP application framework and CMS
Published: March 2009
eBook Price: €18.99
Book Price: €30.99
See more
Select your format and quantity:

Notice that the Occupation field in the last screenshot has been left blank. This does not look clean. We will go ahead and fix this by amending the Family and Friends template to include the highlighted segment of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/
xhtml" xml:lang="en">
<head>
<title>Learning MODx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
<h1>Learning MODx</h1>
</div>
<div id="wrapper">
<div id="container">
<div id="content">
<div id="col-1">
<div id="menu">
[!Wayfinder?startId=`0` &amp;level=`2` &amp;outerClass=`outer`
&amp;innerClass='inner' &amp;lastClass=`last` &amp;firstClass=`first`
&amp;hereClass=`active`!]
</div>
<h1>[*pagetitle*]</h1>
<br/>
<table>
< tr> <td> Relationship: </td> <td> [*relationship*] </td> </tr>
[+phx:if=`[*occupation*]`:is=``:then=``:else=`<tr> <td> Occupation:
</td> <td> [*occupation*] </td> </tr>`+]
<tr> <td> Website: </td> <td> [*website*] </td> </tr>
</table>
<br/>
[*#content*]
</div>
<div id="col-2" >
<div > [!WebLogin!] </div>
<div>
[!Ditto? &parents=`47` &tpl=`dittofrontpage`!]
</div>
</div>
</div>
</div>
<div class="clearing"> </div>
</div> <!-- end of wrapper div -->
<div id="footer">It is fun and exciting to build websites with
MODx</div>
</body>
</html>

Now preview the second test document again:

PHx (Place Holders extended) in MODx

Notice that the label Occupation has disappeared. We still have to make sure that it is appearing in the first test document, as the first test document does have a value in the occupation field.

The preview of the first test document is as follows:

PHx (Place Holders extended) in MODx

Now that we have learned how to hide the labels when the corresponding template variables are empty, we can continue to do the same for the rest of the template variables. Modify the template code to look like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/
xhtml" xml:lang="en">
<head>
<title>Learning MODx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
<h1>Learning MODx</h1>
</div>
<div id="wrapper">
<div id="container">
<div id="content">
<div id="col-1">
<div id="menu">
[!Wayfinder?startId=`0` &amp;level=`2` &amp;outerClass=`outer`
&amp;innerClass='inner' &amp;lastClass=`last` &amp;firstClass=`first`
&amp;hereClass=`active`!]
</div>
<h1>[*pagetitle*]</h1>
<br/>
<table>
[+phx:if=`[*relationship*]`:is=``:then=``:else=`<tr> <td>
Relationship: </td> <td> [*relationship*] </td> </tr>`+]
[+phx:if=`[*occupation*]`:is=``:then=``:else=`<tr> <td> Occupation:
</td> <td> [*occupation*] </td> </tr>`+]
[+phx:if=`[*website*]`:is=``:then=``:else=`<tr> <td> Website: </td>
<td> [*website*] </td> </tr>`+]
</table>
<br/>
[*#content*]
</div>
<div id="col-2" >
<div > [!WebLogin!] </div>
<div>
[!Ditto? &parents=`47` &tpl=`dittofrontpage`!]
</div>
</div>
</div>
</div>
<div class="clearing"> </div>
</div> <!-- end of wrapper div -->
<div id="footer">It is fun and exciting to build websites with
MODx</div></body>
</html>

Now take a moment to analyze the format of the highlighted code. The notation is quite intuitive. The next section explains this notation in detail.

The PHx notation

Now that we have discovered in what situations PHx becomes helpful, we will now learn more about the syntax of PHx.

Simple usage

PHx allows any template variable to be formatted using a simple format. The format is generally like this: [+templatevariablename:modifier+]. You can use the [+ +] syntax, or the [* *], just like you do for any other template variable.

Modifiers are special keywords that transform the value of the template variable. We have modifiers to turn the string to uppercase, lowercase, the first character to uppercase, and so on.

For example: If we have a template variable Occupation with the value Business, then [+occupation:ucfirst+] will return Business.

The following is a list of the most commonly used modifiers:

  • lcase—returns the current value with all the alphabetic characters converted to lowercase. For example:
    • If [+occupation+] outputs Engineer, [+occupation:lcase+] will output engineer
  • ucase—returns the current value with all the alphabetic characters converted to uppercase. For example:
    • If [+occupation+] outputs Engineer, [+occupation:ucase+] will output ENGINEER
  • ucfirst—returns the current value's first character as uppercase. For example:
    • If [+occupation+] outputs engineer, [+occupation:ucfirst+] will output Engineer
  • len—returns the length of the current value. For example:
    • If [+occupation+] outputs engineer, [+occupation:len+] will output 8.
  • select=`options`—options like value1=output1&value2=output2

Notice that the last modifier accepts a value after the = sign. The select modifier accepts values of the format described after the = sign. For example, if you would like to output one for 1, two for 2, three for 3, and the template variable has the values 1, or 2, or 3, you will do this by using the select modifier as shown next:

[+te mplatevariablename:select=`1=one&2=two&3=three`+]

Conditional statements

Besides the preceding listed modifiers that format the given template variable, we can also have conditional statements that perform an action based on a decision made. The general structure of a conditional statement is as follows:

[+te mplatevariablename:condition:then=`template`:else=`template`+]

Here, template can be simple HTML or a chunk name, or even a snippet.

Conditions are of the form:

conditional operator = `value`

An example of a condition is:

:is=`1`

An example of a conditional statement is:

[+flag:is=`1`:then=`onchunk`:else=`offchunk`+]

The following is a list of the different conditional operators and their meanings:

  • is—is equal to.
  • ne—is not equal to.
  • eg—is equal or greater than.
  • el—is equal or lower than.
  • gt—is greater than.
  • lt—is lower than.
  • mo=`Webgroups`—is the current logged in user a member of any of the given list of webgroups? The list of webgroups is separated by commas.

With these conditions, you can check if a template variable is equal to or greater than some value, and then display a chunk if it is or another one if it is not.

Usage with the PHx placeholder

For some expression, we might want to make use of a dummy placeholder instead of a template variable. In such cases, we can use the PHx placeholder. We will look into such examples next.

Let us say we are using PHx to display the username of the current logged in user. To do this, we will use the userinfo modifier. We have already learned that modifiers are used on template variables or placeholders. In the case of this modifier, we don't have to explicitly mention the placeholder, as userinfo can act only on the placeholder that stores the user's ID. In such situations, we will use the dummy placeholder phx:

For example:

[+phx:userinfo=`username`+]

Another example is the mo operation. mo allows us to check if the current logged in user is a member of any of the given webgroups. Again, here we are acting based on the logged in user's ID. Hence we will need to use the dummy placeholder phx.

For example:

[+phx:mo=`friends`: then=`You belong to the friends group`:else=`You
do not belong to the friends group`+]

There are two other situations where you will be using the phx placeholder:

  • Multiple Conditions: This is when you want to make a decision based on one or more conditions. Multiple conditions are explained in the next subsection.
  • When using the required placeholder in more than one place in the expression:
      [+phx:if=`[*occupation*]`:is=``:then=``:else=`<tr> <td>
      Occupation: </td> <td> [*occupation*] </td> </tr>`+]

Notice that the template variable [*occupation*] is used in the condition and in the output. Use of the if keyword is explained in the next subsection.

Multiple conditions

To be able to use multiple conditions, you must first know how to use the if keyword. We have learned how to check the template variable for a given condition. But how do we do the same when we use the dummy placeholder phx? We need to have a format to specify which template variable we are evaluating to test the given condition. We can do this with the following syntax.

:if=`*templatevariable*`

After the if keyword followed by the template variable, the syntax remains the same. You still have to write a condition and specify what to show if the condition is true and what to show if the condition is not. When using this syntax, multiple conditions are easy. All you need to do is use :and or :or and specify a new condition. When using :or, the entire expression is true if any one of the conditions is true. When using :and, the entire expression is true only if all the conditions are true.

Summary

In this article, we have learned how to format the values in template variables, and have also seen how to make conditions based on the values of template variables and accordingly present a different output either from the HTML in the expression or from a chunk or snippet. We have also, in the process of learning PHx, added a Family and Friends feature to the site, which allows us to create and display the profiles of the individuals. We have demonstrated how the usage of PHx can help us hide labels when the corresponding values are empty.

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

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Practical Plone 3: A Beginner's Guide to Building Powerful Websites
Practical Plone 3: A Beginner's Guide to Building Powerful Websites

Spring 2.5 Aspect Oriented Programming
Spring 2.5 Aspect Oriented Programming

Selling Online with Drupal e-Commerce
Selling Online with Drupal e-Commerce

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

 

 

 

 

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