BASIC JOOMLA: CREATING THE ABC WEBSITE

Professor Carlos Bott University of the Philippines IT Training Center

Advanced PHP MODULE/ Applications Developmnet

OUTLINE
‡ ‡ ‡ ‡ ‡ ‡ ‡ Joomla defined Setting Up/ Installing Joomla Sections, Categories and Articles Managing Users Managing Web Links Managing News Feeds Managing Menus for categories, contacts, web links and news feeds ‡ Adding the Search Box ‡ Managing Modules for syndicate, login, news flash and breadcrumbs ‡ Managing Templates

JOOMLA DEFINED:
‡ Joomla is an award-winning content management system (CMS), for building Web sites and powerful online applications ‡ Features that made Joomla popular includes ease-ofuse and extensibility ‡ Joomla is an open source solution that is freely available to everyone ‡ CMS:
‡ A content management system is software that keeps track and organizes resources on the website ‡ Resources includes text, graphics, video or just about anything accessible on websites

SETTING UP JOOMLA ‡ Requirements to run Joomla ‡ Apache Web Server ‡ PHP ‡ MySQL ‡ Packages available: ‡ ‡ ‡ ‡ LAMP (Linux Apache MySQL PHP) WAMP (Windows Apache MySQL PHP) MAMP (MacOS Apache MySQL PHP) XAMPP (cross-platform AMP) ‡ Note: For the duration of the training. it is assumed that XAMPP is the package installed ‡ Download Joomla/ Place in root directory .

org ‡ Look for Download button ‡ Click and save to local computer ‡ Note: Package in . the directory path is c:\xampp\htdocs ‡ Start XAMPP services ‡ Open a browser ‡ On the address bar.zip package ‡ Note: This will extract contents to a folder named Joomla ‡ Copy the extracted folder to root directory of web server ‡ Note: For WAMP.DOWNLOAD JOOMLA/ PLACE IN ROOT DIRECTORY ‡ Browse Joomla website at www.zip format will be saved to local computer ‡ Extract the . enter localhost/joomla ‡ Note: This will start the installation of Joomla .joomla.

‡ Go over the Pre-Install Check to see that all items except Display Errors are in green ‡ Click Next ‡ The third step brings the GNU license review ‡ Go over the agreement ‡ Click Next . the language to be used is to selected. ‡ Select language en-US and click Next ‡ The second step is displayed.Installing Joomla ± Part I ‡ On the first step of the installation.

ABC_Joomla is used ‡ Click Next ‡ The fifth step is displayed ‡ This sets the FTP settings ‡ Click Next to skip . user may enter and database name of his/ her choice ‡ Note: For purposes of discussion.Installing Joomla ± Part 2 ‡ The fourth step is displayed. enter parameters as follows: ‡ Host: localhost ‡ Username: root ‡ Database Name: ABC_Joomla ‡ Note: During installation process.

enter parameters as follows: ‡ Site Name: ABC Company ‡ Your Email: <<use your personal email>> ‡ Admin Password: <<use password of your choice>> ‡ Note: Do not click Install Sample Date. the discussion will provide the data ‡ Click Next .Installing Joomla ± Part 3 ‡ The sixth step is displayed.

Installing Joomla ± Part 4 ‡ The installation is just about finished ‡ As instructed by Joomla. look for the directory path of the Joomla installation and remove the Installation folder ‡ Note: On a XAMPP installation the directory path is c:\xampp\htdocs\joomla ‡ From the desktop. go to the desktop. switch back to the browser and click Site link ‡ Note: This now brings the Joomla managed website .

Mobile Phone ‡ Articles Under MP3: iPod. Creative Zen Micro ‡ Articles under Mobile Phone: Nokia. CATEGORIES. ARTICLES: PART 1 ‡ ‡ Joomla organizes information in the hierarchy: ‡ Section >> Category >> Articles Example 1: ‡ Section: Products ‡ Categories under Products: MP3 Player.SECTIONS. iPhone .

CATEGORIES.SECTIONS. Jazz ‡ On the browser. the Control Panel is displayed . Toyota ‡ Articles under Honda: Civic. Accord. ARTICLES: PART 2 ‡ Example 2: ‡ Section: Car ‡ Categories under Car: Honda. open a new tab and go to Joomla administration login of the website ‡ Enter localhost/joomla/administrator ‡ Enter username admin and password specified in step six of the installation ‡ Once the login verifies the username/ password.

CATEGORIES. pull down the select Control Panel . ARTICLES: PART 3 ‡ Switch to the Section Manager ‡ Click Section Manager Content on the Control Panel menu and select Section Manager ‡ Pull down the ‡ ‡ ‡ Add the sections: Corporate Product Site menu and ‡ Note: To switch back to the Control Panel.SECTIONS.

add the categories: ‡ ‡ ‡ ‡ ‡ Mobile Phone MP3 Player Game Console ‡ Under the section Corporate . add the categories: President About the Company ‡ Note: To switch back to the Control Panel.SECTIONS. pull down the Site menu and select Control Panel . CATEGORIES. ARTICLES: PART 4 ‡ Switch to the Category Manager ‡ If in the Control Panel. or: ‡ Pull down the Content menu and select Category Manager ‡ Under the section Products . click Category Manager .

click Article Manager´. or: ‡ Pull down the Content´ menu and select Article Manager ‡ Under the category Mobile Phone . add the following articles: ‡ ‡ ‡ ‡ ‡ Nokia Samsung Sony Ericsson Motorola iPhone . ARTICLES: PART 5 ‡ Switch to the Article Manager ‡ If in the Control Panel.SECTIONS. CATEGORIES.

add the following articles: ‡ Under the category Apple iPad Nintendo Wii Game Console .SECTION. CATEGORIES. add the articles: Microsoft X-Box 360 Sony PlayStation 3 PSP . ARTICLES: PART 6 ‡ Under the category ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ ‡ iPod Creative Zen Micro MSI Mega Player 530 RCA H116 iRiver H10 MP3 Player .

pull down the Site menu and select Control Panel .SECTION. ARTICLES: PART 7 ‡ Under the category from the President ‡ Under the category articles: ‡ ‡ ‡ Background Mission/ Vision Location President . add the article News About the Company add the ‡ Note: Select any two from each category from the section Products for display on home page ‡ Note: To switch back to the Control Panel. CATEGORIES.

MANAGING USERS AND CONTACTS ‡ Aside from the admin. Joomla allows for creation of users who can modify the contents: ‡ Pull down the Site menu and select User Manager ‡ Create the following users with their levels: ‡ President: Admin ‡ PR Director: Admin ‡ Production Manager: Manager ‡ Note: In a later section. a login will be created for the users .

MANAGING USERS AND CONTACTSPART 2 ‡ Contacts provide a means of web visitors to send messages to the users ‡ Pull down the Components menu. a Contact Us link will be created for the contacts . point to Contacts and select Categories ‡ Create category Corporate ‡ Click Contacts tab ‡ Create the following contacts with the category ‡ ‡ ‡ President PR Prod Manager Corporate ‡ Note: Be sure to link to corresponding user ‡ Note: In a later section.

point to Web Links and select Categories ‡ Create the category Partners ‡ Click Links tab ‡ Create at least three website links under the category Partners ‡ Note: In a later section.MANAGING WEB LINKS ‡ Joomla provides a means for creating links to external websites ‡ Pull down the Components menu. a Our Partners link will be created for the web links .

MANAGING NEWS FEEDS ‡ ‡ ‡ ‡ Joomla provides a way to display updated contents from other websites thru rss Pull down the Components menu. a feed Local News link will be created for the news . point to News Feeds and select Categories ‡ Create the category Phil News Click Feeds tab Create the Inquirer ‡ ‡ ‡ ‡ ‡ ‡ feed under the category Phil News Open the website www.inquirer.net on a new tab on the browser Click the RSS link Click any RSS option available Copy the url Switch back to the Joomla Administration Paste in the Link field ‡ Note: In a later section.

only the Home link can be found on the menu Joomla provides a way to manage menus Pull down the Click Home Menus menu and select Main Menu .MANAGING HOME MENU: PART 1 ‡ ‡ ‡ ‡ At the moment.

MANAGING HOME MENU: PART 2 ‡ Parameters (Basic) are as follows: ‡ Leading: Number of article intros to display on the front page with a read more link to see the entire article. These articles stretches the entire width of the news box. ‡ Columns: Number of columns in which articles are to display ‡ Links: Number of articles to display only as links at the bottom of the page . These articles fills only the width of one column. not the entire page. ‡ Intro: Number of article intros to display on the front page with a read more link to see the entire article.

MANAGING HOME MENU: PART 3 ‡ Parameters (Advanced) ‡ Select ‡ Show Feed Link Parameters (System) ‡ Select Yes on Show Page Title ABC Info ‡ Change Page Title to .

MANAGING CATEGORY MENU ‡ ‡ ‡ ‡ ‡ ‡ Pull down Menus menu Select Main Menu Click New Select Articles Select Category Blog Layout Parameters (Basic) ‡ Title: About ABC Co ‡ Select category About the Company ‡ Repeat the procedure for the categories in Product section .

MANAGING CONTACTS MENU ‡ ‡ ‡ ‡ ‡ ‡ ‡ Pull down Menus menu Select Main Menu Click New Click Contacts Click Contact Category Layout Provide the name Contact Us Parameters (Basic) ‡ Select category Corporate ‡ Select No on Show Feed Link ‡ Parameters (System) ‡ Change Page Title to Contact Us .

MANAGING WEB LINKS MENU ‡ ‡ ‡ ‡ ‡ ‡ ‡ Pull down Menus menu Select Main Menu Click New Click Web Links Click Contact Category Layout Provide the name Our Partners Parameters (Basic) ‡ Select category Partners ‡ Select No on Show Feed Link ‡ Parameters (System) ‡ Change Page Title to Our Partners .

MANAGING NEWS FEEDS MENU ‡ ‡ ‡ ‡ ‡ ‡ ‡ Pull down Menus menu Select Main Menu Click New Click News Feeds Click Contact Category Layout Provide the name Local News Parameters (Basic) ‡ Select category Phil News ‡ Select No on Show Feed Link ‡ Parameters (System) ‡ Change Page Title to Local News .

ADDING THE SEARCH BOX ‡ ‡ ‡ ‡ ‡ ‡ Pull down Select Click Click Menus menu Main Menu New Search Local News Provide the name Parameters (System) ‡ Change Page Title to Search the site .

Contacts News ‡ Menu Assignment: All except Feeds . and . click Next Syndicate Search .MANAGING SYNDICATE MODULE ‡ Modules are sections that lie in pre-defined boxes along each page around the main content ‡ Pull down the Extensions Module Manager ‡ Click New ‡ Select ‡ Name: ‡ Position: menu and select Syndicate RSS . Web Links .

MANAGING LOGIN MODULE ‡ ‡ ‡ ‡ ‡ Pull down the Click New Select Title: Login Login Left . click Next Extensions menu and select Module Manager Position: .

MANAGING NEWS FLASH MODULE ‡ Pull down the Extensions Module Manager ‡ Click New ‡ Select ‡ Title: ‡ Position: Login Top News from the President Yes . click Next Latest News menu and select ‡ Select category ‡ Title Linkable: ‡ Show Title: Yes .

MANAGING BREADCRUMBS MODULE ‡ ‡ ‡ ‡ ‡ ‡ Pull down the Click New Select Title: Breadcrumbs Breadcrumbs Yes . click Next Extensions menu and select Module Manager Disable Title: Position: breadcrumbs .

MANAGING TEMPLATES ‡ Pull down the Extensions Template Manager ‡ Check rhuk_milkyway ‡ Change color scheme to green ‡ Save and preview ‡ Click HTML ‡ Note: <jdoc:include type= module name= /> tag defines positions for position-name top menu and select ‡ Set template to beez: ‡ Note: this template is layout in CSS .

Sign up to vote on this title
UsefulNot useful