You are on page 1of 33

Basic Joomla: Creating the ABC Website

Mr. Jun Dolor

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-of-use 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) • Note: For the duration of the training. it is assumed that WAMP is the package installed • Download Joomla/ Place in root directory .

zip format will be saved to local computer • Extract the .Download Joomla/ Place in root directory • Browse Joomla website at www.org • Look for Download button – Click and save to local computer • Note: Package in .joomla.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. the directory path is c:\wamp\www • Start WAMP services • Open a browser • On the address bar. enter “localhost/joomla” – Note: This will start the installation of Joomla .

the language to be used is to selected. – 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 review – Go over the agreement – Click Next . – Select language en-US and click Next • The second step is displayed.Installing Joomla • On the first step of the installation.

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

Part 3 • The sixth step is displayed.Installing Joomla. the discussion will provide the data – Click Next . 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.

Installing Joomla. switch back to the browser and click “Site” link – Note: This now brings the Joomla managed website . go to the desktop. look for the directory path of the Joomla installation and remove the “Installation” folder – Note: On WAMP installation the directory path is c:\wamp\www\joomla • From the desktop.Part 4 • The installation is just about finished • As instructed by Joomla.

Categories. Articles • Joomla organizes information in the heirarchy: – Section >> Category >> Articles • Example 1: – Section: Products – Categories under Products: MP3 Player.Sections. iPhone . Mobile Phone – Articles Under MP3: iPod. Creative Zen Micro – Articles under Mobile Phone: Nokia.

the Control Panel is displayed . Accord. Jazz • On the browser. Toyota – Articles under Honda: Civic.Sections. ArticlesPart 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 “Site” menu and select “Control Panel” . ArticlesPart 3 • Switch to the Section Manager – Click “Section Manager” on the Control Panel – Pull down the “Content” menu and select “Section Manager” – Add the sections: • “Corporate” • “Product” – Note: To switch back to the Control Panel. Categories.Sections.

click “Category Manager”. Catergories. 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. or: – Pull down the “Content” menu and select “Category Manager” – Under the section “Products”. pull down the “Site” menu and select “Control Panel” . ArticlesPart 4 • Switch to the Category Manager – If in the Control Panel.Sections.

Categories. add the following articles: • • • • • “Nokia” “Samsung” “Sony Ericsson” “Motorola” “iPhone” . or: – Pull down the “Content” menu and select “Article Manager” – Under the category “Mobile Phone”. ArticlesPart 5 • Switch to the Article Manager – If in the Control Panel. click “Article Manager”.Sections.

Section. add the articles: . add the following articles: • • • • • • • • • • “iPod” “Creative Zen Micro” “MSI Mega Player 530” “RCA H116” “iRiver H10” “Microsoft X-Box 360” “Atari 2600” “Nintendo 64” “Playstation 2” “PSP” – Under the category “Game Console”. Categories. ArticlesPart 6 – Under the category “MP3 Player”.

Categories. ArticlesPart 7 – Under the category “President”. add the article “News from the President” – Under the category “About the Company” add the articles: • “Background” • “Mission/ Vision” • “Location” • Note: Select any two from each category from the section “Products” for display on home page • Note: To switch back to the Control Panel. pull down the “Site” menu and select “Control Panel” .Section.

Managing Users and Contacts • Aside from the admin. a login will be created for the users . 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.

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

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 . 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.

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.Managing News Feeds • Joomla provides a way to display updated contents from other websites thru rss • Pull down the “Components” menu.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. a “Local News” link will be created for the news feed .

only the “Home” link can be found on the menu • Joomla provides a way to manage menus • Pull down the “Menus” menu and select “Main Menu” • Click “Home” .Managing Home Menu • At the moment.

– Intro: Number of article intros to display on the front page with a “read more” link to see the entire article. – 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 .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. not the entire page.Managing Home Menu. These articles stretches the entire width of the news box. These articles fills only the width of one column.

Managing Home Menu.Part 3 • Parameters (Advanced) – Select “Show Feed Link” • Parameters (System) – Select “Yes” on Show Page Title – Change Page Title to “ABC Info” .

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 “Menus” menu Select “Main Menu” Click “New” Click “Search” Provide the name “Local News” Parameters (System) – Change Page Title to “Search the site” .

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

Managing Login Module • Pull down the “Extensions” menu and select “Module Manager” • Click New • Select “Login”. click Next • Title: “Login” • Position: “Left” .

Managing News Flash Module • Pull down the “Extensions” menu and select “Module Manager” • Click New • Select “Login”. click Next • Title: “Latest News” • Position: “Top” • Select category “News from the President” • Title Linkable: “Yes” • Show Title: “Yes” .

Managing Breadcrumbs Module • Pull down the “Extensions” menu and select “Module Manager” • Click New • Select “Breadcrumbs”. click Next • Title: “Breadcrumbs” • Disable Title: “Yes” • Position: “breadcrumbs” .

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

$00. 439.90 $00.9 4 43$400/3 W !.7.3.9047 47547.7....4:9 !74.30!.209078 $8902 ./0903.9&8 !...98 .20 439. 0 .303: .0%9094 439.8.9.9.209078 ..9803: W W W W W W W !:/43 03:8 203: $00.9&8 .. 439.3439.9047.9 .

20 :7!.793078 .209078 $8902 .303: .3..30-3803: W W W W W W W !:/43 03:8 203: $00.0%9094 :7!. $00.4:9 !74..9 .209078 .793078 !.30!. 0 .9.9.9047./0903.9 4 43$400/3 W !..8.793078 $00. 0-38 .7.9047 !. 439.7.

20 4..9..7.9 .303: .. 0 .08 !. 439.9.9047 !08 $00.4:9 !74.. $00.209078 .0%9094 4..30800/803: W W W W W W W !:/43 03:8 203: $00.08 .9047. 0800/8 .8.30!.3.209078 $8902 ./0903.7.9 4 43$400/3 W !.

303: . !74. $0./0903.20 4.209078 $8902 .0%9094 $0.30!..08 !.9 .//390$0.7.7.90890 .7.7.4 W W W W W W !:/43 03:8 203: $00. 0 .

..98 .3/800.3$3/.7.904/:0 W 4/:08.3.3.90 W 03:88320390.430.5.7080.0..439039 W !:/4390 9038438 203:.903570 /0130/ -408.  08 00/8  0-38 .059 $0.20 #$$ W !48943 $3/.74:3/902..0 W $00.9 $3/.90 .94389..3.9 4/:0.07 W .09 W .3/ 439...

0 W $00..3/ 800.09 W %90 43 W !48943 019 .9 43 .3434/:0 W !:/4390 9038438 203:..3.9 4/:0.3.07 W .

07 W .3/800..3.-0 08 W $4%90 08 ..0 W $00.9047 08174290!708/039 W %903.9 43 .908908 W !48943 %45 W $00.9 4/:0.84/:0 W !:/4390 9038438 203:..9.09 W %90 .3.308.

9 70.3./.9 4/:0.7:2-84/:0 W !:/4390 9038438 203:.7:2-8 .7:2-8 ./.370.7:2-8 W 8.09 W %90 70./.3.07 W ..-0%90 08 W !48943 -70..3/ 800./.0 W $00.

3.3/570.020947003 W $. 7:*2..3%025.:/0950 24/:0 3.3/800.30.4478.0 W .90.9 %025. W .3.0.908 W !:/4390 9038438 203:.20 945 .07 W 0.% 490/4.3..

 /013085489438147548943 3.9094-00 490989025.9.4:93$$ .20 W $099025.908.