Joomla Day Austin Part 3

Template Time!

- index.php from index.html

- component.php- templateDetails.xml

index.php<?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd


http://www.w3.org/1999/xhtml

index.php head

<head>  <jdoc:include type="head" />  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head>

Replace Placeholders w/ Joomla Tags

<ul class="menu">

<li class="item-1 active"><a

href="#">Home</a></li>

<li class="item-2"><a href="#">Minis</a>

</li><li class="item-3">

<a href="#">Programs</a>

</li><li class="item-13">

<a href="#">Facebook</a></li>

<li class="item-14"><a

href="#">Twitter</a></li>

</ul>

Becomes:

<jdoc:include type="modules" name="menu" style="none" />

Module Tag Styles

Menus don’t need div wrappers so we use:

<jdoc:include type="modules" name="menu" style="none" />

Banners need the wrappers so we use:

<jdoc:include type="modules" name="banner" style="xhtml" />

Simple Conditionals

<?php if($this->countModules('banner')) : ?><div id="banner"><jdoc:include type="modules" name="banner" style="xhtml" /><div class="clr"></div></div><?php endif; ?>

Conent/Component Code

<div id="content" class="width-65"><jdoc:include type="modules" name="before" style="xhtml" /><jdoc:include type="message" /><jdoc:include type="component" /><jdoc:include type="modules" name="after" style="xhtml" /><div class="clr"></div></div>

Don’t forget debug!

Place a debug module position right before the </body>

<jdoc:include type="modules" name="debug" style="xhtml" />

Content Conditional If Sidebar

“width-65” will make the content smaller and float left, so only use if there’s a module in sidebar:

<div id="content" class="width-65">

becomes:

<div id="content" <?php if($this->countModules('sidebar')) : ?>class="width-65"<?php endif; ?>>

Dynamic Copyright

<p>© 2011 Minis and Friends. All rights reserved.</p>

becomes:

<p>© <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>. All rights reserved.</p>

Useful Variables/* The following 5 lines get current page variables */$option = JRequest::getCmd('option', '');$view = JRequest::getCmd('view', '');$layout = JRequest::getCmd('layout', '');$task = JRequest::getCmd('task', '');$itemid = JRequest::getCmd('Itemid', '');/* The following 6 lines set a variable to true if we're on the site default menu item (home) */$menu = & JSite::getMenu();if ($menu->getActive() == $menu->getDefault()) :$active = "homepage";else:$active = "subpage";endif;

component.php

<?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > <head>  <jdoc:include type="head" />  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body id="modal"> <jdoc:include type="message" /> <jdoc:include type="component" /> </body></html>




component.php

<?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > <head>  <jdoc:include type="head" />  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body id="modal"> <jdoc:include type="message" /> <jdoc:include type="component" /> </body></html>




Echo Variables as Body Classes

<body id="site" class="<?php echo $option . " view-" . $view . " layout-" . $layout . " task-" . $task . " itemid-" . $itemid . " " . $active;?>">

which will result in something like:

<body id="site" class="com_content view-category layout-blog task- itemid-65 homepage">

which can be extremely useful styling hooks when the markup of the page lacks taxonomy

template_preview.png

640x384px .png

template_thumbnail.png

206x150px .png

Language Files

create directories:/language/en-GB/

2 files:en-GB.tpl_minis.ini (language for template)en-GB.tpl_minis.sys.ini (language for parameters)

templateDetails.xml

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 1.7//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.7/template-install.dtd"><extension version="1.7" type="template" client="site"> </extension>

http://www.joomla.org/xml/dtd/1.7/template-install.dtd


templateDetails.xml

<name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://minisandfriends.org</authorUrl> <copyright>Copyright 2011 Minis and Friends. All rights reserved.</copyright> <description>Minis and Friends Template</description>

mailto:[email protected]

http://minisandfriends.org/

templateDetails.xml

<files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder><folder>html</folder> <folder>images</folder> <folder>language</folder> </files>

templateDetails.xml

<languages folder="language"> <language tag="en-GB">en-GB/en-GB.tpl_minis.ini</language> <language tag="en-GB">en-GB/en-GB.tpl_minis.sys.ini</language> </languages>

templateDetails.xml

<positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions>

< thesematch

these >

templateDetails.xml

<config> <fields name="params"> <fieldset name="settings">

<field name="banner" type="radio" default="0" label="Banner" description="Turn banner on or off"> <option value="1">On</option>

<option value="0">Off</option> </field>

</fieldset> </fields> </config>

Complete templateDetails.xml

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 1.7//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.7/template-install.dtd"><extension version="1.7" type="template" client="site"> <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://minisandfriends.org</authorUrl> <copyright>Copyright 2011 Minis and Friends. All rights reserved.</copyright> <description>Minis and Friends Template</description> <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder><folder>html</folder> <folder>images</folder> <folder>language</folder> </files> <languages folder="language"> <language tag="en-GB">en-GB/en-GB.tpl_minis.ini</language> <language tag="en-GB">en-GB/en-GB.tpl_minis.sys.ini</language> </languages> <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> <config> <fields name="params">

<fieldset name="settings"> <field name="banner" type="radio" default="0" label="Banner" description="Turn banner on or off">

<option value="1">On</option> <option value="0">Off</option> </field> </fieldset>

</fields> </config> </extension>




Create favicon.gif

Favicon Generator

Template Directory

Zip it up!

Install & Cross Fingers

Success!

HTML Template Overrides

- Don’t hack the core!- Change views from MVC

components

Change a core output

I don’t want an edit icon and I want it to float next to

the title

Find the view

Copy into your template

Edit to your liking

Andy’s Alternate “Templatization”

1.Start from scratch?

2.Start with a Template Framework?

Development Options:

Pros for“Starting from

Scratch”•Fast development process if design

is simple

•Don’t need to learn a framework

•Faster performance

•No design restrictions

Pros for “Starting with Framework”

•Faster development if you are already familiar with the template framework

•Built in styling taken care off

•Lots of functionality for free

•Base template to start from

index.php

templateDetails.xml

template-options.xml

style configuration

Questions?

Intermission

Joomla Extension Development

Alex Andreae, SourceCoastJeremy Wilken, Gnome on the run

Joomla!Day AustinSeptember 2011

It isn't always as simple as installing...

• It takes energy• It takes time• It takes thought• It takes knowledge• It takes....

Extension Types

• Components• Modules• Plugins

Free or Paid?

Should I buy extensions or use free ones?

• Free or paid doesn't make it better• If an extension saves you hours...• Focus on what works, not what is free• Consider donating for free extensions

The latest is (often) greatest

Does keeping my extensions updated matter?

• Extensions can be vulnerable• Observe release cycle for stable releases• Grab the rss feeds from favorite extensions• Watch the vulnerable extensions listhttp://docs.joomla.org/Vulnerable_Extensions_List

Install with caution

Should I install all 'willy-nilly'?

• No, no, and never• Check if its in active development• Evaluate extensions on a test site• Always backup first

Keep a clean site

Is there a problem with leaving extensions I'm not using yet?

• Uninstall anything you aren't using• Check they actually uninstalled• Take notes about what worked

Finding good extensions

How do I find a good extension?

• Search the JED with a regular search engine• Search on multiple terms and combinations• Talk with others about what they use• Read JED reviews with a grain of salt

Research the authors

What extensions can I trust and use?

• Is there documentation?• Is there support?• Is there a community around it?• Does the author know Joomla?

Simpler is (usually) better

How many extensions can I use?

• Try not to install any while building• Install the necessary extensions• The more extensions, the less cohesive the

site will be• Avoid overly complex extensions for simple

problems

Use the same extensions

Should I use the same extensions always?

• Find your favorites and stick with them• Makes it easier to use• Easier to track updates• You can become an expert using them

Checklist for extensions

• Will this solve problems?• Has it been updated recently?• Do I trust the author?• Have I tested it on a test site?• Does it uninstall cleanly from the test site?• Do you have the latest version?• Do I have a backup before installing?

Custom extensions

When should I pay to have a custom extension made?

• Designed to exact requirements• Simpler to use• Need a realistic budget• Can make the difference in a site

Give back

• Help on an extension's forum• Post a review• Provide a donation• Send constructive feedback• Share customizations or tweaks• Share on a blog/social media

Joomla Development

It’s Easier Than You Think

SourceCoastAlex Andreae

Owner / Developer

JFBConnectFull Facebook Integration Suite for Joomla

* Facebook Authentication* Facebook Page Tab / Canvas Integration* Like, Comment, Fanbox, Recommendations & more* Customizeable Profile Import Into* JomSocial, Community Builder, Kunena, K2, Agora* Lots more

Over 60 straight 5-star reviews on the JED

Overview

•Joomla Development Flow

•Module Structure

•API Overview

Joomla - MVC

•MVC(t) - Model View Controller (template)

• Controller - Sets up environment for the display

•Model - Data interface

•Generally to the database, but can ‘create’ data if necessary

• View - Uses the model to get data to display

• TTemplate - Override-able disaplay output

Modules• Linear code execution

• VC(t) (no real model necessary)

• Uses a ‘helper.php’ file for additional function calls

• Can be model-like, but modules don’t have DB tables

• Files:

• mod_<modulename>.php and .xml

• helpers/helper.php

• tmpl/default.php

Module Parameters

Module - Entry Point

Module - Helper File

Module Template - Address

Module Template - Contact Form

Joomla API Overview

Joomla API• http://api.joomla.com

• Left side, select “Joomla-Platform” package

• Bookmark, cuddle up to, and love this page

• “Classes” describes

• JFactory - Get instantiations of common classes

• JRoute - Get URL for specific component/view/task

• “Application” describes

• Every other Joomla function

JObject• All Joomla classes derived from (You should

too)

• Easy getter/setter methods

• $obj->set(‘var’, ‘value’); // Set a variable

• $obj->get(‘var’, ‘default’); // Get a value

• $obj->def(‘var’, ‘default’); // Set a default

• $obj->toString(); // Great for debugging - no print_r($obj) required!

JUser Object• $user = JFactory::getUser(); // logged in user

• $user = JUser::getInstance($id);

• $id = UID or username

• Once fetched:

• if ($user->guest)

• $user->get(‘username’); //id, fullname, lastvisitDate, etc

• It’s derived from JObject!

JFactory - Database

• $dbo =& JFactory::getDBO(); // Get the database handle

• Functions describe in JDatabase & JDatabaseMySQL(i)

• $query = $dbo->getQuery(true); // New Query$query->select(‘id, username, email’);$query->from(‘#__users’);$query->where(‘username=’.$dbo->quote($username); // No shenanigans!$dbo->setQuery($query);

• $user->dbo->loadObject(); // objectList, array, arrayList, result, etc

• Can use InsertObject function (or raw SQL) to add rows to database

JText• Text translation from language files

• JText::_(‘MOD_CONTACT_HIYA’);

• Searches loaded language files in last loaded order

• Searches for first, exact, upper case version

• If found, use transation; If not, use text directly

• To Include more langauge files:

• $lang =& JFactory::getLanguage();

• $lang->load(‘mod_contact’); // Add your extension

JRequest• JRequest::getVar(‘name’, ‘default’,

‘POST’);

•Can be risky depending on use. Should use sanitized methods below

• JRequest::getInt(‘name’, 4); // Integers only w/ default of 4

• JRequest::getCmd(‘task’); // strips \ . /

• JRequest::getString(‘name’); // No nasty HTML

Questions?

Joomla Site Deployment

Joe LeBlancBrian Edgerton, Edge Webworks

Joomla!Day AustinSeptember 15, 2011

My Site Is (Almost) Ready for the World to See. What Now?

• Map out a deployment strategy

• Pick a good host (if you haven't already)

• Transfer and setup your site on your live server

• Optimize your site for production

Deployment

The Golden Rule: Use a development or staging site.

Why can't I just keep making changes on my live site?

• Nothing is stopping you, but you may regret that decision.

• Using a development site can save you hours of frustration.

Deployment


Benefits

• Gives you a chance to make adjustments and tweaks before your changes are visible to the world

• Allows you to fix any unintended consequences or unforeseen problems

• Absolutely necessary for any ongoing changes or development that will take extended amounts of time

Deployment


OK, I get it. Now how do I set up a dev site?

• Maintain a copy of your site anywhere you'd like

• Somewhere on the same server is ideal

• Consider password protecting your dev site

Transferring Your Site

Use an FTP client to transfer your site files between servers

Hosting: Shared

Hosting: VPS

Hosting: Cloud

Hosting: Dedicated

Hosting

Make sure you're getting managed hosting

(unless you're a sysadmin and you know what you're doing)

Caching

Caching

Caching

CompressingEnable GZip compression to shrink the data sent from the server to browser

Check Your Resources!Missing resources can affect your search engine rankings.

YSlow

Disabling

Disable or remove unused extensions

Disabling

Disallow frontend registration(User Manager > Options)

Disabling

Use .htaccesshttp://docs.joomla.org/Htaccess_examples_(security)

Launch

Copy files from dev to live

Launch

Copy database from dev to live

Launch

Adjust configuration.php

Launch

...or use AkeebaBackup!

Wait, you're not done! - Updates

• Sign up for security alerts on joomla.org

• Update through Extension Manager

• Stay up to date on 3rd party extensions

For bonus points: Where are you going to apply these updates first?

Wait, you're not done! - Backup

AkeebaBackup is great


Test your backup


Schedule your backup

Okay, now you're done

minisandfriends.com

Credits

• Beach Cozumel - Riviera Maya Ocean View: http://www.flickr.com/photos/grandvelasrivieramaya/3180227438/ (CC BY-SA 2.0)

• Server physikstudenten.de http://www.flickr.com/photos/rosenkranz/82624587/ (CC BY-SA 2.0)

• Website icon by Bogdan Mihaiciuc http://bogo-d.deviantart.com/ (CC BY 3.0)

• servers http://www.flickr.com/photos/aswirlymatrix/15138579/ (CC BY-NC 2.0)

• PHP Logo: http://en.wikipedia.org/wiki/File:PHP-logo.svg

Questions?

Joomla Day Austin Closing

ConversationsRyan Ozimek, President of OSM, PICnet

John Coonen, CMS ExpoSeptember 15, 2011

JOOMLA!DAY AUSTIN

Thanks for coming!

Credits (in order of appearance)

Event Planner MELINDA LEDBETTERSite Planner CORY WEBBSite Planner JEN KRAMER

Template Designer ANDY MILLERTemplate Designer KYLE LEDBETTERExtension Developer ALEX ANDREAEExtension Developer JEREMY WILKEN

Site Deployment JOE LEBLANCSite Deployment BRIAN EDGERTONClosing Cheerleader RYAN OZIMEKClosing Cheerleader JOHN COONEN

Photographer ILSUN PARKVideographer KEN DVORAK

Minis and Friends SALLY IWANSKI

LET THE PARTY START!Join us afterwards at

IRON CATCUS(right next door)

and afterwards across the street atMAGGIE MAE’Sfor Music & Fun!

Thanks so much to the sponsors:eBay

Rocket ThemeRed Component

JoomlArtRochen

Pixel PraiseSourceCoast

Gisclair Media (Larry!)JoomlaShowroom

And YOU our wonderfulAttendees!

More credits to enjoy the music :)

Venue ALAMO DRAFTHOUSE

Content Management System JOOMLA!

Town AUSTIN, TEXAS

Country UNITED STATES

...What else, let’s see

...

Did we thank beer? Thanks beer!

Joomla!Day Austin 2011

That’s a wrap.

Technology

Joomla Day Austin Part 3