Joomla! 1.0 component tutorial - part 1: front-end
Page 3 of 4

Frontend view - jportfsimple.html.php - contains all output functions.
jportfsimple.html.php
  1. // no direct access
  2. defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
  3.  
  4. /**
  5. * Displaying all categories
  6. */
  7. function display_categories( $option, &$rows )
  8. {
  9.   global $jpConf, $Itemid, $mosConfig_live_site;
  10. ?> 
  11.  
  12. <div id="jp_front">
  13.   <div id="jp_fronttitle">
  14.     <?php echo $jpConf->title; ?>
  15.   </div>
  16.   <?php if ($jpConf->description) { ?>
  17.   <div id="jp_frontdesc">
  18.     <?php echo $jpConf->description; ?>
  19.   </div>
  20.   <?php  } ?>
  21.   <div id="jp_frontcategories">
  22.  
  23.   <?php
  24. // if no rows then display: No categories defined !
  25. if (!$rows) echo _COM_JP_NO_CAT;
  26. else
  27. foreach($rows as $row)
  28. {
  29.   if ($row->published) {
  30.     $link='<a href="'.sefRelToAbs( 'index.php?option='.$option.'&cat='.$row->id.'&Itemid='.$Itemid).'">';
  31.     echo '<div class="jp_frontcategory">';
  32.       echo '<div class="jp_frontcatname">';
  33.       echo $link.$row->cat_name.'</a><br />';
  34.       echo '</div>';
  35.       echo '<div class="jp_frontcatimage">';
  36.       if ($row->cat_image)
  37.       echo $link.'<img src="'.$mosConfig_live_site.'/'.$jpConf->base_path.$row->cat_image.'" border="0" alt="" /></a>';
  38.    
  39.       echo '</div>';
  40.       echo '<div class="jp_frontcatinfo">';
  41.       echo $row->cat_info;
  42.         echo '</div>';
  43.       echo '</div>';
  44.     }
  45. }
  46.   echo'</div>';
  47.   bottom();
  48. echo '</div>';
  49. }

Lines 20 to 28 - shows component title and description

line 33 - shows warning if there are no categories

35 to 54 - loop through categories and shows their name, description and image, if exists

in line 38 function sefRelToAbs is used so links work when SEF is enabled

As you can see, almost each displayed element is surrounded with <div> element, each with specific id or class. This way  component display is not based on tables, but uses CSS.


jportfsimple.html.php
  1. /**
  2. * Displaying all projects in one category
  3. */
  4. function display_one_cat( $catid, $catname, $catinfo, $catpath, &$rows, &$params, &$pageNav )
  5. {
  6. global $jpConf, $option, $Itemid, $mosConfig_absolute_path, $mosConfig_live_site;
  7.  
  8. echo '<div id="jp_front">';
  9.   echo '<div id="jp_cattitle">'._COM_JP_CAT_NAME.$catname.'</div>';
  10.   if ($catinfo)
  11.     echo '<div id="jp_catinfo">'.$catinfo.'</div>';
  12.  
  13.   echo '<div id="jp_onecat">';
  14.   // if no rows then display: No projects defined !
  15.     if (!$rows) echo _COM_JP_NO_PROJ;
  16.    
  17.     // go through all projects on given page
  18.     for($i=$pageNav->limitstart; $i < ($pageNav->limitstart+$pageNav->limit) && $i < $pageNav->total; $i++)
  19.     if ($rows[$i])
  20.   {
  21.   $src=$jpConf->base_path.$catpath.'/'.$rows[$i]->proj_image;
  22.   // if image defined exist, then show it, or show no_image.jpg
  23.   if (!file_exists($mosConfig_absolute_path.'/'.$src) | is_dir($mosConfig_absolute_path.'/'.$src))
  24.     {
  25.     $src=$mosConfig_live_site.'/components/com_jportfsimple/images/no_image.jpg';
  26.     }
  27.   $link2=sefRelToAbs( 'index.php?option='.$option.'&cat='.$catid.'&project='.$rows[$i]->id.'&Itemid='.$Itemid);
  28.   $prname=$rows[$i]->name;
  29.     echo '<div class="jp_onecat_proj">';
  30.       echo '<div class="jp_onecat_img"><div class="jp_onecat_img2"><a href="'.$link2.'"><img src="'.$src.'" border="0" alt="" /></a></div></div>';
  31.       echo '<div class="jp_onecat_name"><a href="'.$link2.'">'.$prname.'</a></div>';
  32.     echo '</div>';
  33.   }
  34.  
  35.   echo '</div>';
  36.  
  37.   // if item navigation enabled, then show page number
  38.   if ( $params->get( 'item_navigation' ) && !($pageNav->limit == $pageNav->total) )
  39.   {
  40.     echo '<div class="jp_pagination">';
  41.     $link='index.php?option='.$option.'&cat='.$catid.'&Itemid='.$Itemid;
  42.     echo $pageNav->writePagesLinks( $link );
  43.     echo '</div>';   
  44.   }
  45.  
  46.   // if back button enabled, show it
  47.   if ( $params->get( 'back_button' ))
  48.   {
  49.     echo '<div class="jp_back">';
  50.     mosHTML::BackButton ( $params );
  51.     echo '</div>';
  52.   }
  53.   bottom();
  54. echo '</div>';
  55. }

line 76 - uses limit and limitstart (from $pageNav) to loop through all projects on given page

95 to 102 - shows page numbers, if it should

104 to 110 - shows back button, if enabled



jportfsimple.html.php
  1. /**
  2. * Displaying one project
  3. */
  4. function display_project( $catid, $catname, $catpath, &$proj, &$params )
  5. {
  6. global $database, $option,$Itemid, $jpConf, $mosConfig_absolute_path, $mosConfig_live_site;
  7.  
  8. echo '<div id="jp_front">';
  9.   echo '<div id="jp_cattitle">'._COM_JP_CAT_NAME.$catname.'</div>';
  10.   echo '<div id="jp_projtop" >'._COM_JP_PROJ_NAME.$proj[0]->name.'</div>';
  11.  
  12.   echo '<div id="jp_projcont" >';
  13.     echo '<div id="jp_projimage" >';
  14.     $src=$jpConf->base_path.$catpath.'/'.$proj[0]->proj_image;
  15.   // if image defined exist, then show it, or show no_image.jpg
  16.   if (!file_exists($mosConfig_absolute_path.'/'.$src) | is_dir($mosConfig_absolute_path.'/'.$src))
  17.     {
  18.     $src=$mosConfig_live_site.'/components/com_jportfsimple/images/no_image.jpg';
  19.     }
  20.     echo '<img src="'.$src.'" border="0" alt="" />';
  21.     echo '</div>';
  22.     echo '<div id="jp_projdesc" >';
  23.     echo $proj[0]->description.'<br />';
  24.     echo '</div>';
  25.   echo '</div>';
  26.  
  27.   // if back button enabled, show it
  28.   if ( $params->get( 'back_button' ))
  29.   {
  30.     echo '<div class="jp_back">';
  31.     mosHTML::BackButton ( $params );
  32.     echo '</div>';
  33.   }
  34.  
  35.   bottom();
  36. echo '</div>';
  37.  
  38. }
  39.  
  40. /**
  41. * Displaying component footer
  42. */
  43. function bottom()
  44. {
  45. ?> 
  46.   <div align="right" style="float:right; width:60%; line-height:6px; padding:3px;">
  47.   <span class="small">
  48.   <br /><br /><br /> 
  49.   <a href="http://www.anetus.com/_r/jportfolio-component-for-joomla-cms" target="_blank" title="JPortfolio - component for Joomla! CMS">jp</a>
  50.   </span>
  51.   </div>
  52. <?php
  53. }
  54.  
  55.  
  56. ?>

Function display_project does exactly what the name suggests - it displays one project.

Last one: bottom() - this is the function showing component footer, something like link to component web page and/or copyright information. It is not necessary to have, of course ;)


<< Start < Prev 1 2 3 4 Next > End >>
 

 

 

 

E-mail:        This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
Telephone:   +44 208 144 9823
Skype:        anetus-design