Tutorial : Social Media Icons Supplement

Social Media Icons Supplement
[UPDATE {April 24,2015} : Kris Hardy, with the Messiah College web team, released a video today showing how to use the Social Media Supplement on your site here]

[IMPORTANT NOTE:  I recommend pulling down the code from github and follow along.  This blog content editor doesn't appreciate the open php tag, so I've added a space in the tag, so some blocks below will not work if you copy/paste them.  Sorry about that.]

I found it difficult to find help for building supplements, so when I was asked by our web team to build one for them, I decided to turn it into a tutorial and documentation.  I've learned many things along the way - and here is that journey.

This tutorial will help you build the Social Media Icon Supplement.  You can download and install the Plug-N-Play Supplement from github.

The steps below walk you through all the code and setup needed to get this working in your Jadu CMS.  The code blocks below will have minimal comments, and no comment blocks.  If you want the comment blocks for the class, you can download the entire project from the JaduDev github account.

So lets get started.

The first thing to know, and it quite obvious if you give it any thought is that there are 2 separate builds for a supplement. The first being the CMS admin screens that actually setup and configure a supplement.  The second, is the code that displays the supplement to the screen as part of your website.

We’ll start with the CMS admin screens and database code, because without it there’s nothing to display.

Since we’ll be creating a way to store a list of say a department's social media sites, we need to save them somewhere, so we’ll create the supporting database table in our Jadu Database.  I’ll keep in line with the recommended custom development conventions throughout this tutorial, which include’s both the naming of objects as well as the placement on the server of files.

Something I learned the hard way is that each supplement MUST have a title.  The control panel uses this to display them in a list, and too many things break if there is no title. 

Step 1 : create database table : CustomSocialMediaIcons

 

Step 2 : database interaction class file

Create a .php file that will contain our class and place it in /jadu/custom/supplements

Since this class file’s purpose is to interact with the database, we’ll name it the same as our database table : CustomSocialMediaIcons.php

This class will contain all the methods that interact with the database table we created above.

In our new CustomSocialMediaIcons.php file we need some basic setup and includes :

     define("SOCIALMEDIAICONS_SUPPLEMENT_TABLE", "CustomSocialMediaIcons");
     include_once("JaduADODB.php");
     include_once("JaduCache.php");
     include_once("websections/JaduPageSupplements.php");



This sets a constant we’ll use throughout the class as well as some important Jadu libraries.


Below that we’ll set up the class :

     class SocialMediaIcons
     {

     }


We’ll need to define some variables in our class file.  If you’ve never built a “model” class file that mimics a database table, we essentially need a variable for each field in our table.   Within the curly braces of our class above, add in our field variables. So the class section will look like this :

     class SocialMediaIcons
     {
          var $id = -1;
          var $title = '';
          var $url_facebook = '';
          var $url_twitter = '';
          var $url_vimeo = '';
          var $url_youtube = '';
          var $url_googleplus = '';
          var $url_linkedin = '';
          var $url_wordpress = '';
          var $url_blogspot = '';
     }

By default, these are all public variables. (*Might be able to also list these like :  public $id; ) which is more PHP standards-like, however, I'm following an out-of-the-box supplement as a basis for my code, so for now, we'll stick with this.

Also, typically when you have a class, you would nest the functions inside that class and call it with something like
     $social_media_icons->whatever_function
or even
     SocialMediaIcons::whatever_function

I’m mimicking how Jadu creates these supplements, so I’m going to have my functions outside the class.  At this point the only reason I can think they did it this way is that it may be easier to access functions this way if needed, but I’m not sure, and I’ll revisit this at the end of the tutorial.  [*I think I see why they did this - there is some core code that constructs a 'GET' function name derived from the class name, and then can execute it.  This may not work if these are called "the proper way"]

This class will be used to not only interact with the database, but to display bits of data on the CMS Supplements screens, so we’ll include functions for that as well.

Some helper functions
fetchAllSocialMediaIconsSupplementsWithQuery($query, $limit = null, $offset = null)
fetchSocialMediaIconsSupplementWithQuery($query)

Create a new supplement
newSocialMediaIconsSupplement($SocialMediaIconsSupplement)

Update a current supplement
updateSocialMediaIconsSupplement($SocialMediaIconsSupplement)

Delete a supplement
deleteSocialMediaIconsSupplement($id)

We’ll also need some other functions for the admin forms within the CMS to work properly.

countSocialMediaIconsSupplements($criteria = array())
getSocialMediaIconsSupplement($id)
getSocialMediaIconsSupplementByTitle($title)
validateSocialMediaIconsSupplement($SocialMediaIconsSupplement)


Building the functions


Lets start with the simple ones - Create (new), Update and Delete

Insert

Create or in this case “new”.  We obviously want to do an insert into the table.  Remember how we set the constant called SOCIALMEDIAICONS_SUPPLEMENT_TABLE, we’re going to use that all over now.

     function newSocialMediaIconsSupplement($SocialMediaIconsSupplement)
     {
          global $db;

          $query = 'INSERT INTO ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' ' .
                     '(title, url_facebook,url_twitter,url_vimeo,url_youtube,url_googleplus,
                       url_linkedin,url_wordpress,url_blogspot
                       ) VALUES (' .
                     $db->qstr($SocialMediaIconsSupplement->title) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_facebook) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_twitter) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_vimeo) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_youtube) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_googleplus) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_linkedin) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_wordpress) . ',' .
                     $db->qstr($SocialMediaIconsSupplement->url_blogspot) . ')';

          $db->Execute($query);
          $id = $db->Insert_ID();

          if ($id > 0) {
               deleteTableCache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE);
          }

          return (int) $id;         
     }


Jadu has an intricate caching system where files and database tables are cached. You’ll notice that after we insert the new record, we need to refresh (delete) the cache for this database table so the new values are presented to the CMS properly.

Update an existing supplement 

     function updateSocialMediaIconsSupplement($SocialMediaIconsSupplement)
     {
          global $db;

          $query = 'UPDATE ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' SET ' .
                     'title = ' . $db->qstr($SocialMediaIconsSupplement->title) . ',' .
                     'url_facebook = ' . $db->qstr($SocialMediaIconsSupplement->url_facebook) . ', ' .
                     'url_twitter = ' . $db->qstr($SocialMediaIconsSupplement->url_twitter) . ', ' .
                     'url_vimeo = ' . $db->qstr($SocialMediaIconsSupplement->url_vimeo) . ', ' .
                     'url_youtube = ' . $db->qstr($SocialMediaIconsSupplement->url_youtube) . ', ' .
                     'url_googleplus = ' . $db->qstr($SocialMediaIconsSupplement->url_googleplus) . ', ' .
                     'url_linkedin = ' . $db->qstr($SocialMediaIconsSupplement->url_linkedin) . ', ' .
                     'url_wordpress = ' . $db->qstr($SocialMediaIconsSupplement->url_wordpress) . ', ' .
                     'url_blogspot = ' . $db->qstr($SocialMediaIconsSupplement->url_blogspot) . ' ' .
                     'WHERE id = ' . intval($SocialMediaIconsSupplement->id);

          $db->Execute($query);
          $affectedRows = $db->Affected_Rows();

          if ($affectedRows > 0) {
               deleteTableCache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE);
          }

          return (bool) $affectedRows;

     }

Deleting a supplement

     function deleteSocialMediaIconsSupplement($id)
     {
          global $db;

          $query = 'DELETE FROM ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' ' .
                     'WHERE id = ' . intval($id);

          $db->Execute($query);
          $affectedRows = $db->Affected_Rows();

          if ($affectedRows > 0) {
               // Delete all supplements referencing this record
               deletePageSupplementForRecord($id);
               deleteTableCache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE);
          }

          return (bool) $affectedRows;
     }


Helper functions

Build the query helper function

     function buildSocialMediaIconsSupplementQuery($criteria = array(), $order = array(),$count = false)
     {
          global $db;

          $whereClause = '';

          if (isset($criteria['id'])) {
               $whereClause .= (empty($whereClause) ? 'WHERE' : 'AND') . ' id = ' . intval($criteria['id']) . ' ';
          }

          if (isset($criteria['title'])) {
               $whereClause .= (empty($whereClause) ? 'WHERE' : 'AND') . ' title = ' . $db->qstr($criteria['title']) . ' ';
          }

          if (isset($criteria['except'])) {
               if (!is_array($criteria['except'])) {
                    $criteria['except'] = array($criteria['except']);
               }
               $whereClause .= (empty($whereClause) ? 'WHERE' : 'AND') . ' id NOT IN (' . implode(',', array_map('intval', $criteria['except'])) . ') ';
          }

          $orderClause = '';

          // Build the query string
          if ($count) {
               $query = 'SELECT COUNT(*) AS numRows ';
          }
          else {
               $query = 'SELECT id, title,url_facebook,url_twitter,url_vimeo,url_youtube,url_googleplus,url_linkedin,url_wordpress,url_blogspot';

               // Order by
               if (is_string($order)) {
                    $order = array($order);
               }

               if (count($order) > 0) {
                    $orderClause = 'ORDER BY ' . implode(',', $order) . ' ';
               }
               else {
                    $orderClause = 'ORDER BY title ASC';
               }
          }

          $query .= 'FROM ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' ' .
                      $whereClause .
                      $orderClause;

          return $query;
     }


Fetch with Query

     function fetchSocialMediaIconsSupplementWithQuery($query)
     {
          global $db;

          $cache = new Cache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE, $query);
          if ($cache->isEmpty()) {
               $supplement = new SocialMediaIcons();
               $result = $db->SelectLimit($query, 1);
               if ($result && !$result->EOF) {
                    $supplement->id = (int) $result->fields['id'];
                    $supplement->title = $result->fields['title'];
                    $supplement->url_facebook = $result->fields['url_facebook'];
                    $supplement->url_twitter = $result->fields['url_twitter'];
                    $supplement->url_vimeo = $result->fields['url_vimeo'];
                    $supplement->url_youtube = $result->fields['url_youtube'];
                    $supplement->url_googleplus = $result->fields['url_googleplus'];
                    $supplement->url_linkedin = $result->fields['url_linkedin'];
                    $supplement->url_wordpress = $result->fields['url_wordpress'];
                    $supplement->url_blogspot = $result->fields['url_blogspot'];

               }

               $cache->setData($supplement);
               return $supplement;
          }

          return $cache->data;         
     }

Fetch all supplements

     function fetchAllSocialMediaIconsSupplementsWithQuery($query, $limit = null, $offset = null)
     {
          global $db;

          $cacheId = $query;
          if ($limit !== null) {
               $cacheId .= ' LIMIT ' . (int) $limit . ',' . (int) $offset;
          }

          $cache = new Cache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE, $cacheId);
          if ($cache->isEmpty()) {
               if ($limit === null) {
                    $result = $db->Execute($query);
               }
               else {
                    $result = $db->SelectLimit($query, $limit, $offset);
               }

               $supplements = array();
               if ($result) {
                    while (!$result->EOF) {
                         $supplement = new SocialMediaIcons();
                         $supplement->id = (int) $result->fields['id'];
                         $supplement->title = $result->fields['title'];
                         $supplement->url_facebook = $result->fields['url_facebook'];
                         $supplement->url_twitter = $result->fields['url_twitter'];
                         $supplement->url_vimeo = $result->fields['url_vimeo'];
                         $supplement->url_youtube = $result->fields['url_youtube'];
                         $supplement->url_googleplus = $result->fields['url_googleplus'];
                         $supplement->url_linkedin = $result->fields['url_linkedin'];
                         $supplement->url_wordpress = $result->fields['url_wordpress'];
                         $supplement->url_blogspot = $result->fields['url_blogspot'];
                         $supplements[] = $supplement;

                         $result->MoveNext();
                    }
               }

               $cache->setData($supplements);
               return $supplements;
          }

          return $cache->data;         
     }


Get All Supplements configured

     function getAllSocialMediaIconsSupplements($criteria = array(), $order = array(), $limit = null, $offset = null)
     {
          $query = buildSocialMediaIconsSupplementQuery($criteria, $order);
          return fetchAllSocialMediaIconsSupplementsWithQuery($query, $limit, $offset);         
     }

Count them (for later)

     function countSocialMediaIconsSupplements($criteria = array())
     {
          global $db;

          $query = buildSocialMediaIconsSupplementQuery($criteria, array(), true);

          $cache = new Cache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE, $query);
          if ($cache->isEmpty()) {
               $count = 0;
               $result = $db->Execute($query);
               if ($result && !$result->EOF) {
                    $count = (int) $db->GetOne($query);
               }

               $cache->setData($count);
               return $count;
          }

          return $cache->data;         
     }

Just get 1 supplement this time by ID -

This method name MUST BE NAMED “get” + ClassName.  Code located in /jadu/websections/JaduPageSupplements.php assembles the get call based on the class name.  If you do not have a class with this name, you can not edit a supplement you’ve added to a page.

     function getCustomSocialMediaIcons($id)
     {
          $query = buildSocialMediaIconsSupplementQuery(array('id' => $id));
          return fetchSocialMediaIconsSupplementWithQuery($query);         
     }

Just get 1 by title 

     function getSocialMediaIconsSupplementByTitle($title)
     {
          $query = buildSocialMediaIconsSupplementQuery(array('title' => $title));
          return fetchSocialMediaIconsSupplementWithQuery($query);         
     }


Validate the ADMIN Screen on creation / update.  The code below only verifies that there is a title present since all other fields are optional.  I’ve added a commented block to demonstrate what you would do if you want to require other form fields.

      function validateSocialMediaIconsSupplement($SocialMediaIconsSupplement)
     {
          $errors = array();

          if (empty($SocialMediaIconsSupplement->title)) {
               $errors['title'] = true;
          }
          else {
               $numSupplements = countSocialMediaIconsSupplements(array(
                    'title' => $SocialMediaIconsSupplement->title,
                    'except' => $SocialMediaIconsSupplement->id
               ));

               if ($numSupplements > 0) {
                    // Title must be unique
                    $errors['title'] = true;
               }
          }

          /**
           * If you want more validation use a block like this and change the database field
           * and object variable name
           *
           * if (empty($SocialMediaIconsSupplement->description)) {
           *     $errors['description'] = true;
           * }
           */

          return $errors;         
     }

That’s all for this class file.  We have all of our functions for the CMS Supplement form to interact with the database.  Now lets build the actual form that you (or the users) will use to create, edit and delete supplements.

Building the Control Panel CMS Form


Our control panel php page can go anywhere on our server, however, I’ll stick with the convention and we’ll create a new file and place it in /public_html/jadu/custom/supplements

The naming convention Jadu uses flips from CamelCase to lower/underscores with an additional suffix of "_include"  We’ll name our file this way too just to stay consistent.  If you hadn’t gathered yet, this file will be included into the control panel supplement page, so there’s no direct access linking to this, and the file is named _include to help us remember that later.

custom_social_media_icons_include.php

This will, as said above will be the control panel page that displays when a user selects Social Media Icons from the supplement type select box.


We’ll start out our page with some default Jadu setup


    // Disallow direct access to this script. Should be include only
    if ($_SERVER['PHP_SELF'] == '/jadu/websections/' . __FILE__) {
        exit;
    }

    require_once('websections/JaduPageSupplements.php');
    require_once('websections/JaduPageSupplementLocations.php');
    require_once('websections/JaduPageSupplementWidgetPublicCode.php');
    require_once($widget->classFile);

This section just eliminates any direct access to this include file.

Next, we’ll grab any locations where this supplement can be placed from a Jadu function called gatAllSupplementLocations - brilliant name eh?

    $locations = getAllSupplementLocations();
   
Now we check to see if we’re pulling up an existing supplement or creating a new one and instantiate the class if its new.

    if ($supplementRecordID > 0) {
        $socialMediaIconsSupplement = getCustomSocialMediaIcons($supplementRecordID);
    }
    else {
        $socialMediaIconsSupplement = new SocialMediaIcons();
    }

Next we’ll check to see if we’re posting (saving) the form and process any data entered, this is a big block of code so here's the rundown of what we need to accomplish :

  1. get all values entered on the form (that we haven’t created yet), and add them to the object, then validate it
  2. determine where on the page it’ll go and make sure that location is valid
  3. if there are no errors, create or update it depending on what we’re doing
  4. deal with the supplement categories that may have been assigned
  5. reorder supplements if necessary
  6. redirect back to the supplement list 


    if (isset($_POST['save'])) {
        $socialMediaIconsSupplement->title = isset($_POST['title']) ? $_POST['title'] : $socialMediaIconsSupplement->title;
        $socialMediaIconsSupplement->url_facebook = isset($_POST['url_facebook']) ? $_POST['url_facebook'] : $socialMediaIconsSupplement->url_facebook;
        $socialMediaIconsSupplement->url_twitter = isset($_POST['url_twitter']) ? $_POST['url_twitter'] : $socialMediaIconsSupplement->url_twitter;
        $socialMediaIconsSupplement->url_vimeo = isset($_POST['url_vimeo']) ? $_POST['url_vimeo'] : $socialMediaIconsSupplement->url_vimeo;
        $socialMediaIconsSupplement->url_youtube = isset($_POST['url_youtube']) ? $_POST['url_youtube'] : $socialMediaIconsSupplement->url_youtube;
        $socialMediaIconsSupplement->url_googleplus = isset($_POST['url_googleplus']) ? $_POST['url_googleplus'] : $socialMediaIconsSupplement->url_googleplus;
        $socialMediaIconsSupplement->url_linkedin = isset($_POST['url_linkedin']) ? $_POST['url_linkedin'] : $socialMediaIconsSupplement->url_linkedin;
        $socialMediaIconsSupplement->url_wordpress = isset($_POST['url_wordpress']) ? $_POST['url_wordpress'] : $socialMediaIconsSupplement->url_wordpress;
        $socialMediaIconsSupplement->url_blogspot = isset($_POST['url_blogspot']) ? $_POST['url_blogspot'] : $socialMediaIconsSupplement->url_blogspot;

        // Validate the supplement
        $errors = validateSocialMediaIconsSupplement($socialMediaIconsSupplement);
       
        if ($editType == 'supplement' || $_GET['contentType'] != '') {
            // Get the location and validate it, only for supplement editing though
            $locationOnPage = isset($_POST['locationOnPage']) ? strtolower($_POST['locationOnPage']) : '';
            $locationIsValid = false;
            if ($locationOnPage != '') {
                foreach ($locations as $location) {
                    if (strtolower($location->title) == $locationOnPage) {
                        $locationIsValid = true;
                    }
                }
            }
       
            if (!$locationIsValid) {
                $errors['locationOnPage'] = true;
            }
        }
       
        if (count($errors) == 0) {
            if ($socialMediaIconsSupplement->id < 1) {
                $socialMediaIconsSupplement->id = newSocialMediaIconsSupplement($socialMediaIconsSupplement);
            }
            else {
                updateSocialMediaIconsSupplement($socialMediaIconsSupplement);
            }
           
           
            if ($editType == 'supplement' || $_GET['contentType'] != '') {
                deleteAllCategoriesForSupplement($socialMediaIconsSupplement->id);

                $supplementCategory = new SupplementCategory();
                $supplementCategory->categoryID = getFirstCategoryIDForItemOfType ($contentTypeCatTable, ($contentType == 'document')?$documentID:$itemID);
                $supplementCategory->supplementRecordID = $socialMediaIconsSupplement->id;
                $supplementCategory->supplementWidgetID = $widget->id;
                newSupplementCategory($supplementCategory);

                if ($pageSupplement->id > 0) {
                    if ($pageSupplement->locationOnPage != $locationOnPage) {
                        // Get the new position for the new location
                        $pageSupplement->position = getMaxPageSupplementPosition($pageSupplement->contentType, $pageSupplement->itemID, $locationOnPage);

                        // Reorder the remaining supplements at the old location
                        fixPageSupplementPositions($pageSupplement->contentType, $pageSupplement->itemID);

                        $pageSupplement->locationOnPage = $locationOnPage;
                    }
                    $pageSupplement->supplementRecordID = $socialMediaIconsSupplement->id;
                    updatePageSupplement($pageSupplement);
                }
                else {
                    $pageSupplement = new PageSupplement();
                    $pageSupplement->contentType = $contentType;
                    $pageSupplement->itemID = $itemID;
                    $pageSupplement->supplementWidgetID = $widget->id;
                    $pageSupplement->supplementRecordID = $socialMediaIconsSupplement->id;
                    $pageSupplement->locationOnPage = $locationOnPage;
                    $pageSupplement->id = newPageSupplement($pageSupplement);
                }
               
                header('Location: supplement_list.php?contentType=' . $pageSupplement->contentType . '&itemID=' . $pageSupplement->itemID . '&location=' . $pageSupplement->locationOnPage . '&statusMessage=' . urlencode('Supplement saved'));
                exit;
            }
            else {
                header('Location: supplement_record_list.php?widgetID=' . $widget->id . '&statusMessage=' . urlencode('Supplement saved'));
                exit;
            }
        }
    }

Now, provided we’ve selected to create a new supplement, we’ll do a different set it items, including display the control panel form
Since we’re dealing with HTML here, the code will jump in and out of PHP so I apologize for all the extra php tags here.

We’ll get all the supplements that have been built to display them in the list, and set an image directory location for our icons we’ll display in the form.

    $supplementRecords = getAllSocialMediaIconsSupplements(array());
    $imageDirectory = $SECURE_SERVER . '/images/';

Next check for any errors and display them if necessary

    // The start of the table is output before this script is included so error message is always output but hidden
    if (isset($errors) && count($errors) > 0) {
?>
    <script type="text/javascript">
        $('validate_mssg').show();
    </script>
< ?php
    }

Here’s the big section where we display our form code.  This is in a table, so I’ll go row by row to make it easier to comprehend

Starts off with a giant IF statement.  Since we’re in the Supplement control panel, I’m not sure why this exists, but I’m sure there’ a good damn reason, so we’ll leave it.
The first row here lets you select an existing supplement that has already been configured that you can edit.  This is why its imperative we have a title field, otherwise the select list is empty making it a bit difficult to choose.

    if ($editType == 'supplement' || (isset($_GET['contentType']) && $_GET['contentType'] != '')) {
?>
        <tr>
            <td class="generic_desc"><em><?php print $stepCounter++; ?>.</em> <p>Select existing</p></td>
            <td class="generic_action">
                <select class="select" onchange="selectNav(this);">
                    <option value="supplement_details.php?supplementRecordID=-1&amp;supplementID=-1&amp;widgetID=<? php print (int) $widget->id; ?>&amp;contentType=<? php print encodeHtml($contentType); ?>&amp;itemID=<? php print (int) $itemID; ?>&amp;location=<? php print encodeHtml($locationOnPage); ?>">Create new supplement</option>
<? php
                foreach ($supplementRecords as $supplementRecord) {
                    if (adminCanAccessSupplement($supplementRecord->id, $adminID)) {
                        $selected = '';
                        if ($supplementRecordID == $supplementRecord->id) {
                            $selected = ' selected="selected"';
                        }
?>
                        <option value="supplement_details.php?supplementRecordID=<?php print (int) $supplementRecord->id; ?>&amp;supplementID=<?php print (int) $pageSupplement->id; ?>&amp;widgetID=<?php print (int) $widget->id; ?>&amp;contentType=<?php print encodeHtml($contentType); ?>&amp;itemID=<?php print (int) $itemID; ?>&amp;location=<?php print encodeHtml($locationOnPage); ?>"<?php print $selected; ?>><?php print encodeHtml($supplementRecord->title); ?></option>
<? php
                    }
                }
?>
                </select>
            </td>
        </tr>

The next row displays the page location select based on the values from our supplement record

        <tr>
            <td class="generic_desc<? php if (isset($errors['locationOnPage'])) { ?>_error<? php } ?>"><em><?php print $stepCounter++; ?>.</em> <p>Placement</p></td>
            <td class="generic_action">
                <select class="select" name="locationOnPage">
<?php
                foreach ($locations as $locationItem) {
                    $publicCode = getSupplementPublicCode($widget->id, $locationItem->title);
                    if ($publicCode->id == -1) {
                        continue;
                    }
               
                    $selected = '';
                    if ((isset($_POST['save']) && $locationOnPage == strtolower($locationItem->title)) ||
                        ($pageSupplement->locationOnPage == strtolower($locationItem->title))) {
                        $selected = ' selected="selected"';
                    }
                    else if ($_GET['location'] == strtolower($locationItem->title)) {
                        $selected = ' selected="selected"';
                    }
?>
                    <option value="<?php print encodeHtml($locationItem->title); ?>"<?php print $selected; ?>><?php print encodeHtml($locationItem->title); ?></option>
<? php
                }
?>
                </select>
            </td>
        </tr>

Here we can set or edit our title if needed

        <tr>
            <td class="generic_desc<? php if (isset($errors['title'])) { ?>_error<? php } ?>"><em><? php print $stepCounter++; ?>.</em> <p>Title*</p></td>
            <td class="generic_action">
                <input type="text" name="title" value="<? php print encodeHtml($socialMediaIconsSupplement->title); ?>" class="field" />
            </td>
        </tr>

The next set of rows are all our social media urls, I’ve blocked them together because really there’s nothing special going on.  They’re all text boxes, and setting the value to the object variables

        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Facebook URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_facebook" value="<? php print encodeHtml($socialMediaIconsSupplement->url_facebook); ?>" class="field" />
            </td>
        </tr>
        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Twitter URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_twitter" value="<? php print encodeHtml($socialMediaIconsSupplement->url_twitter); ?>" class="field" />
            </td>
        </tr>
        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Vimeo URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_vimeo" value="<? php print encodeHtml($socialMediaIconsSupplement->url_vimeo); ?>" class="field" />
            </td>
        </tr>
        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>YouTube URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_youtube" value="<? php print encodeHtml($socialMediaIconsSupplement->url_youtube); ?>" class="field" />
            </td>
        </tr>
        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Google Plus URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_googleplus" value="<? php print encodeHtml($socialMediaIconsSupplement->url_googleplus); ?>" class="field" />
            </td>
        </tr>
        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>linkedIn URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_linkedin" value="<? php print encodeHtml($socialMediaIconsSupplement->url_linkedin); ?>" class="field" />
            </td>
        </tr>
        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Wordpress URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_wordpress" value="<? php print encodeHtml($socialMediaIconsSupplement->url_wordpress); ?>" class="field" />
            </td>
        </tr>
        <tr>
            <td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Blogspot URL</p></td>
            <td class="generic_action">
                <input type="text" name="url_blogspot" value="<? php print encodeHtml($socialMediaIconsSupplement->url_blogspot); ?>" class="field" />
            </td>
        </tr>

With this page complete, we can now create a database record - the final setup step for our supplement so it will be recognized by Jadu
Add a record to the JaduPageSupplementWidgets  by running this sql

Now tell Jadu where the allowed regions are for this supplement to be and specify the front end code’s filename without the extension.  It looks by default in the /site/includes/supplements directory run this sql to set that up


When we go to Page Supplements form the Home Page Designer add a new Left supplement (or choose any valid location you decided on above)

Click Add New Left Supplement

In the Supplement Type select box, you’ll now see Social Media Icons listed

Now you’ll see our new form

Fill in the title and one of the options for now.



Build the Front End
/public_html/site/includes/supplements/custom_social_media_icons.php

First we’ll grab all the variables from the record and set php variables

     require_once 'custom/CustomHelper.php';

     if (isset($record)) {
          $title = trim(array_pop(explode('|', $record->title, 2)));
          $url_facebook = trim(array_pop(explode('|', $record->url_facebook, 2)));
          $url_twitter = trim(array_pop(explode('|', $record->url_twitter, 2)));
          $url_vimeo = trim(array_pop(explode('|', $record->url_vimeo, 2)));
          $url_youtube = trim(array_pop(explode('|', $record->url_youtube, 2)));
          $url_googleplus = trim(array_pop(explode('|', $record->url_googleplus, 2)));
          $url_linkedin = trim(array_pop(explode('|', $record->url_linkedin, 2)));
          $url_wordpress = trim(array_pop(explode('|', $record->url_wordpress, 2)));
          $url_blogspot = trim(array_pop(explode('|', $record->url_blogspot, 2)));

then we’ll check each of these for a value and process the URL as needed.  If the user leaves off http:// or https:// we’ll add https:// by default since most (all) sites use https now.

          # facebook
          if ($url_facebook != "") {
               $has_http = stripos($url_facebook, "http",0);

               if (substr($url_facebook, 0,4) != "http") {
                    $url_facebook = "https://" . $url_facebook;
               }

               print "<a href='".$url_facebook."' target='_blank' title='Facebook'><img src='/images/social_media_supplement/facebook_supp.png' title='Twitter' /></a>";
          }


Do this for each url :

          #twitter
          if ($url_twitter != "") {
               $has_http = stripos($url_twitter, "http",0);

               if (substr($url_twitter, 0,4) != "http") {
                    $url_twitter = "https://" . $url_twitter;
               }

               print "<a href='".$url_twitter."' target='_blank' title='Twitter'><img src='/images/social_media_supplement/twitter2_supp.png' alt='Twitter' /></a>";
          }

          #vimeo
          if ($url_vimeo != "") {
               $has_http = stripos($url_vimeo, "http",0);

               if (substr($url_vimeo, 0,4) != "http") {
                    $url_vimeo = "https://" . $url_vimeo;
               }

               print "<a href='".$url_vimeo."' target='_blank' title='vimeo'><img src='/images/social_media_supplement/vimeo_supp.png' alt='vimeo' /></a>";
          }


          #youtube
          if ($url_youtube != "") {
               $has_http = stripos($url_youtube, "http",0);

               if (substr($url_youtube, 0,4) != "http") {
                    $url_youtube = "https://" . $url_youtube;
               }

               print "<a href='".$url_youtube."' target='_blank' title='youtube'><img src='/images/social_media_supplement/youtube_supp.png' alt='youtube' /></a>";
          }

          #googleplus
          if ($url_googleplus != "") {
               $has_http = stripos($url_googleplus, "http",0);

               if (substr($url_googleplus, 0,4) != "http") {
                    $url_googleplus = "https://" . $url_googleplus;
               }

               print "<a href='".$url_googleplus."' target='_blank' title='googleplus'><img src='/images/social_media_supplement/googlepluscolor_supp.png' alt='googleplus' /></a>";
          }

          #linkedin
          if ($url_linkedin != "") {
               $has_http = stripos($url_linkedin, "http",0);

               if (substr($url_linkedin, 0,4) != "http") {
                    $url_linkedin = "https://" . $url_linkedin;
               }

               print "<a href='".$url_linkedin."' target='_blank' title='linkedin'><img src='/images/social_media_supplement/linkedin_supp.png' alt='linkedin' /></a>";
          }

          #wordpress
          if ($url_wordpress != "") {
               $has_http = stripos($url_wordpress, "http",0);

               if (substr($url_wordpress, 0,4) != "http") {
                    $url_wordpress = "https://" . $url_wordpress;
               }

               print "<a href='".$url_wordpress."' target='_blank' title='wordpress'><img src='/images/social_media_supplement/wordpress_supp.png' alt='wordpress' /></a>";
          }

          #blogspot
          if ($url_blogspot != "") {
               $has_http = stripos($url_blogspot, "http",0);

               if (substr($url_blogspot, 0,4) != "http") {
                    $url_blogspot = "https://" . $url_blogspot;
               }

               print "<a href='".$url_blogspot."' target='_blank' title='blogspot'><img src='/images/social_media_supplement/blogspot_supp.png' alt='blogspot' /></a>";
          }
}  #end record check

Save that and then add the new supplement you created above to a page, and if all goes well, it should look like this :


Social Media Icons Supplement



Jadu Product: 
Jadu Version: