Fork me on GitHub
Get XOOPS XOOPSXOOPS FAQFAQ ForumsForums NewsNews ThemesThemes ModulesModules
News World of XOOPS Developers Hacks Modules Themes YAXS Archive Submit News

Search

Donat-O-Meter

Make donations with PayPal!
Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00

Learn XOOPS Core

Local Support

Advertisement

XOOPS Code hosted on SourceForge

Cumulus Tag Cloud

- 2 2.5 2.6 3.0 4 6 2013 Abuse adslight Android AntiHarvesting AntiMalUser AntiSpam Apple Battlefield billige Blocks Bootstrap Captcha cell cent chronolabs Clicks content CĂN demo download Dresses facebook Fat floor Food for free Gateway Guide herre Home Honeypot HP html5 Human HỘ iPhone jQuery List log Loss mobile module modules Monster new newbb news NHÀ online PARK phone PHP Prevention profile project Protector publisher Rapid RESIDENCE responsive review Rights rmcommon Room security Sentry site Smartphone Smarty Smoking Spam stem Studio support tag tags tdmcreate template The Theme themes User userlog web weight xoops Xortify XPayment ZendFramework

New Users

Registering user

# 137278

stevewalker

Welcome to XOOPS!

Archives

News Archives

Highlighting non-empty alphabet listing in XoopsTube

Posted by Mamba on 2013/6/16 19:40:00 (1855 reads) | Posted on Tutorials
In XoopsTube we have a visual alphabetical listing of videos, so if you would like to see all videos starting with "B" you would click on the image with "B".

Unfortunately, this is not the most user-friendly feature, because we don't know if there is anything under "B".

So we needed to indicate the existence of videos by a changed background icon, as you can see below:

Resized Image

The plan was to:

1) build an array of unique alphabet letters that have videos in the database

2) as we render the alphabet icons, check for each letter/digit if it is also in the above array, and if yes, change the icon image to the green one

XoopsTube renders the images in the function xoopstube_letters() located in /include/functions.php

As first we needed to extract the unique letters from the database and create the array:

$distinctDbLetters_arr = array();
    
$sql 'SELECT DISTINCT (UPPER(LEFT(title, 1))) AS letter FROM ' $xoopsDB->prefix('xoopstube_videos') ;
    if (
$result $xoopsDB->query($sql)) {
        while (
$row $xoopsDB->fetchArray($result)) {
            
$distinctDbLetters_arr[] = $row['letter'];
        }
    }
    unset(
$sql);


As second, we wanted to check for each alphabet letter and digit to see if it is represented in the database:

if (in_array($ltr$distinctDbLetters_arr)) {
            
$letterchoice
                
.= '<a class="xoopstube_letters xoopstube_letters_green" href="';
        } else {
            
$letterchoice
                
.= '<a class="xoopstube_letters" href="';
        }


And we had to create a new class in CSS that would pull the new image:

.xoopstube_letters_green {
    
background-imageurl(images/icon/backgnd_green.png);
}


Things to do in the future:

- cache the array created in (1), so we don't have to read it every time from the database, and updated it only if a new video is added

The main message from this tutorial is to make our modules more user-friendly by visually indicating status of information.

As always, if somebody has a better way to achieve it, please share it with us!


Printer Friendly Page Send this Story to a Friend Create a PDF from the article
Bookmark Me
Bookmark to Google Plus
The comments are owned by the author. We aren't responsible for their content.

Nice addition, thank you!
Published: 2013/6/17 8:18 • Updated: 2013/6/17 8:18
Haaaaa,
i like tuto like this !!!
Nice work, Mamba and nice Idea !

Just 1 thing : Quote:
XoopsTube renders the images in the function xoopstube_letters() located in /include/functions.php


I think you mean in /modules/xoopstube/include/functions.php
Published: 2013/6/17 8:38 • Updated: 2013/6/17 8:39
Quote:
I think you mean in /modules/xoopstube/include/functions.php

Yes, that's correct.

I use directories relative to the "user of the service":

Here, I was saying: XoopsTube, so relative to it, it was "/include/functions.php"

If it would be XOOPS itself, then it would be " /modules/xoopstube/include/functions.php"

Thanks for pointing it out.
Published: 2013/6/17 12:45 • Updated: 2013/6/17 12:45
Nice. There are other modules with similar alphabet nav that could benefit from this.
Published: 2013/6/17 20:07 • Updated: 2013/6/17 20:07
Yes, I would love to encapsulate it into a plugin or component, so it could be reused in other modules!
Published: 2013/6/17 23:18 • Updated: 2013/6/17 23:18
In wfdownload i use this...

function wfdownloads_lettersChoice()
{
// updated starting from this idea http://xoops.org/modules/news/article.php?storyid=6497
    
$download_handler xoops_getmodulehandler('download''wfdownloads');
    
    
$criteria $download_handler->getActiveCriteria();
    
$criteria->setGroupby('UPPER(LEFT(title,1))');
    
$countsByLetters $download_handler->getCounts($criteria);

    
$letterChoice _MD_WFD_BROWSETOTOPIC "<br />";
    
$letterChoice .= "[  ";
    
$alphabet = array ("0""1""2""3""4""5""6""7""8""9""A""B""C""D""E""F""G""H""I""J""K""L""M""N""O""P""Q""R""S""T""U""V""W""X""Y""Z");
    
$num count($alphabet) - 1;
    
$counter 0;

    foreach(
$alphabet as $letter) {
        if(isset(
$countsByLetters[$letter])) {
            
$letterChoice .= "<a href='" XOOPS_URL "/modules/wfdownloads/viewcat.php?list=$letter' title='" $countsByLetters[$letter] . "'>$letter</a>";
        } else {
            
$letterChoice .= "$letter";
        }
        if (
$counter == round($num 2))
            
$letterChoice .= " ]<br />[ ";
        elseif (
$counter != $num)
            
$letterChoice .= "&nbsp;|&nbsp;";
        
$counter++;
    }
    
    
$letterChoice .= " ]";
    return 
$letterChoice;
}


Improvements:
- It uses Xoops Criteria object instead of sql commands
- Activated links/letters has downloads counts as title attribute

Problems:
- What about languages ​​with non-Latin characters?
Published: 2013/8/5 8:02 • Updated: 2013/8/5 8:02
Quote:
What about languages ​​with non-Latin characters?

If you look at XoopsTube code, we're getting the Alphabet from the /language/main.php file, where it is defined as a

function getXtubeAlphabet();

so the users will have the buttons in their local language.
Published: 2013/8/5 9:32 • Updated: 2013/8/5 9:32

Published: 2013/8/5 16:30 • Updated: 2013/8/5 16:30
In the future, it should go to a central location, so all modules could use it.
Published: 2013/8/5 22:53 • Updated: 2013/8/5 22:53