Welcome back to another CCB Tutorial. Today’s tutorial aims to build upon a few different ideas from past tutorials.
Like most churches that use CCB as their Church Management Software provider (ChMS), your church likely has a great need for managing the growth and communications of small groups.
It’s also likely that your church may refer to “small groups” as home groups, life groups, community groups or a branded phrase of your choosing.
Nevertheless, all churches using CCB will likely encounter the challenge of choosing to implement CCB’s out-of-the-box groups display functionality or create a custom groups display that matches your church’s website look and feel.
Most church’s tend to use the out-of-box functionality provided by CCB to display groups even when it conflicts with their overall website design.
Displaying groups using the out-of-box functionality is a feasible option, yet a limited option when it comes to presentation and customization.
My home church, Mosaic Church Austin, has chosen the latter option. Because we use WordPress as the content management system (CMS) to host our website, our Community Groups Pastor (CGP) refactored an image plugin to display our community groups.
Should you visit the link above, then you’ll see that the plugin does allow for an appealing and seamless display of community groups that is very much in line with the look and feel of our website in its entirety.
You’ll even discover it has the ability to filter groups by location. But all the bells and whistles stop right there.
Unfortunately, this plugin solution, as beautiful as it displays community groups, is manual and NOT integrated with CCB.
And this means when community groups leaders update their pictures, descriptions, address or any other fields, then they must email our CGP.
There’s quite the opportunity for inconsistent data between both systems.
In addition, the labor-intense management of groups manually doesn’t provide for advanced filtering such as searching by the following:
- Childcare
- Day
- Time
- Group Type
- Zip Code
- Address
But after this tutorial today, you’ll likely be able to gain access to a few of the listed filters above, displaying the selected few as drop down menus.
I won’t cover triggering a group search based on selecting drop down menus this week.
First, let’s simply focus on identifying which filters are available and how to go about displaying each as drop down menus with their respective values.
Other 3rd Party Options to Display Groups
Before I continue this tutorial, there are a few third party plugins and applications that are available for displaying your CCB groups via your very own website.
Unfortunately, most are WordPress plugins. If your website is not WordPress, then you’re out of luck as it pertains to out-of-box options.
However, what I plan to share with you today and in the coming week(s) should help you develop your very own groups display functionality.
Refactoring code for reuse with getLookup function
One of the biggest things to learn that will save you a bit of time is refactoring your codebase. We’ll start this tutorial by refactoring code use from the following tutorial:
I won’t cover all the details as I have in the aforementioned tutorial, but today we’ll focus on using the following Lookup Table services:
- area_list
- meet_day_list
- meet_time_list
Using a text editor of your choice, create and save a php named the following: group-options.php.
Next, copy and paste the code from the aforementioned tutorial as a reference point to start code refactoring. Your code should look as follows:
<?PHP
// contains resusable globals and functions
include("includes/config.php");
$apiService = 'ability_list'; // CCB api service
$urlData = array_filter( array(
'srv' => "$apiService"
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//items/item'); // xpath for items->item
$response_object = '';
foreach ($nodes as $node)
{
$response_object .= $node->name.' (ID: '.$node->id.')'."<br/>"; // now print the item name and it (See CCB API documentation for more $apiService fields)
}
echo $response_object;
?>Just after the initial include of the config.php file, you’re now ready to create a function named getLookup as shown below.
As you’ll soon discover, the getLookup function saves nearly 75 lines of code.
The getLookup function accepts an argument that we’ll define as tableService.
In short, we’ll pass the bulleted list of Lookup Table services as arguments to the getLookup function.
Within the getLookup function, change the apiService variable to be equal to the tableService variable.
In addition, notice changes made to the concatenated response_object variables that define the following as it pertains to the drop down menu:
- name and id of drop down menu is value of tableService variable
- Default ALL option as the first option of the drop down menu
- Associated values of tableService as drop down menu options
- close the drop down menu
Finally, echo is exchanged for return and we close the getLookup function.
<?PHP
function getLookup($tableService){
$apiService = $tableService; // CCB api service
$urlData = array_filter( array(
'srv' => "$apiService"
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//items/item'); // xpath for items->item
$response_object = '<select name="'.$apiService.'" id="'.$apiService.'">';
$response_object .= '<option value="#">All</option>';
foreach ($nodes as $node)
{
$response_object .= '<option value="'.$node->id.'">'.$node->name.'</option>'; // now print the item name and it (See CCB API documentation for more $apiService fields)
}
$response_object .= '</select>';
return $response_object;
}
?>NOTICE: One thing to note is that you could remove the getLookup function from the group-options.php file and place the code within the general.php file for ease of management and reuse long term (hint, hint).
Retrieve Group Area, Meet Day, and Meet Time
You don’t realize it, but the getLookup function has saved you quite a bit of time.
No worries if you don’t quite see it yet. This section should help clear things up a bit.
Now that the getLookup function is defined, it’s time to set and pass variables to getLookup function to retrieve their respective values as a drop down list.
Define a lookupService variable for each of the following Lookup Table services:
- area_list
- meet_day_list
- meet_time_list
Once lookupService variables have been created for all three, then define respective variable values, setting each equal to the getLookup function while passing the respective lookupService variable as the argument.
- areaValues
- meetingDayValues
- meetingTimeValues
<?PHP //Area Values $lookupService = 'area_list'; $areaValues = getLookup($lookupService); //Meeting Day $lookupService = 'meet_day_list'; $meetingDayValues = getLookup($lookupService); //Meeting Time $lookupService = 'meet_time_list'; $meetingTimeValues = getLookup($lookupService); ?>
Believe it or not, this is all you need to retrieve and create drop down menus for Group Area, Meet Day and Meet Time.
It’s time to move forward with displaying each option to the web browser.
HTML to display Group Area, Meet Day and Meet Time
One of the final steps is creating the HTML to display each group item to the web browser. To do so, I’ve provided you with the necessary HTML to be placed below your PHP code.
I chose to display the data using a table versus divs only because I didn’t care to get into CSS for those that are not as familiar with HTML and CSS markup.
Nevertheless, I create a table row with column headers for Area, Meeting Day and Meeting Time followed by a row that echoes the respective variable for each column headers: areaValues, meetingDayValues, meetingTimeValues.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Group Drop Downs</title> </head> <body> <table> <tr> <td>Area</td> <td>Meeting Day</td> <td>Meeting Time</td> </tr> <tr> <td><? echo $areaValues; ?></td> <td><? echo $meetingDayValues; ?></td> <td><? echo $meetingTimeValues; ?></td> </tr> </table> </body> </html>
That’s all there is to displaying the drop down menus via the web browser.
Put it all together and test
It’s time to save your file and open it via a web browser. Your code in its entirety should look like the following:
<?PHP
// contains resusable globals and functions
include("includes/config.php");
//Area Values
$lookupService = 'area_list';
$areaValues = getLookup($lookupService);
//Meeting Day
$lookupService = 'meet_day_list';
$meetingDayValues = getLookup($lookupService);
//Meeting Time
$lookupService = 'meet_time_list';
$meetingTimeValues = getLookup($lookupService);
function getLookup($tableService){
$apiService = $tableService; // CCB api service
$urlData = array_filter( array(
'srv' => "$apiService"
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//items/item'); // xpath for items->item
$response_object = '<select name="'.$apiService.'" id="'.$apiService.'">';
$response_object .= '<option value="#">All</option>';
foreach ($nodes as $node)
{
$response_object .= '<option value="'.$node->id.'">'.$node->name.'</option>'; // now print the item name and it (See CCB API documentation for more $apiService fields)
}
$response_object .= '</select>';
return $response_object;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group Drop Downs</title>
</head>
<body>
<table>
<tr>
<td>Area</td>
<td>Meeting Day</td>
<td>Meeting Time</td>
</tr>
<tr>
<td><? echo $areaValues; ?></td>
<td><? echo $meetingDayValues; ?></td>
<td><? echo $meetingTimeValues; ?></td>
</tr>
</table>
</body>
</html>The result produced when successfully executed via a web browser, should appear as follows:
Remember, we’ve not added any functionality to make selections and use selected option(s) to retrieve and display groups and their respective data.
Additional functionality will be covered in the weeks to come.
However, if you would like to speed up the pace a bit with your very own website’s custom group display and search functionality, then feel free to contact us for a consultation meeting to discuss your development needs.
That’s all for now. Thanks and see you back here next week. 😉