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 .

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

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

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

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

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. switch back to the browser and click “Site” link – Note: This now brings the Joomla managed website .Part 4 • The installation is just about finished • As instructed by Joomla.Installing Joomla. go to the desktop.

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

Toyota – Articles under Honda: Civic. the Control Panel is displayed . Jazz • On the browser. Accord. ArticlesPart 2 • Example 2: – Section: Car – Categories under Car: Honda.Sections. Categories. 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.

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

pull down the “Site” menu and select “Control Panel” . or: – Pull down the “Content” menu and select “Category Manager” – Under the section “Products”.Sections. click “Category Manager”. ArticlesPart 4 • Switch to the Category Manager – If in the Control Panel. add the categories: • “Mobile Phone” • “MP3 Player” • “Game Console” – Under the section “Corporate”. Catergories. add the categories: • “President” • “About the Company” – Note: To switch back to the Control Panel.

Categories. 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” . ArticlesPart 5 • Switch to the Article Manager – If in the Control Panel.Sections. click “Article Manager”.

Categories.Section. ArticlesPart 6 – Under the category “MP3 Player”. 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”. add the articles: .

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. Categories. ArticlesPart 7 – Under the category “President”.Section. pull down the “Site” menu and select “Control Panel” .

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

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

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.

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

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

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

click Next • Name: “RSS” • Position: “Syndicate” • Menu Assignment: All except “Search”.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”. and “Contacts” . “News Feeds”. “Web Links”.

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

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

click Next • Title: “Breadcrumbs” • Disable Title: “Yes” • Position: “breadcrumbs” .Managing Breadcrumbs Module • Pull down the “Extensions” menu and select “Module Manager” • Click New • Select “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 .

90 $00. 439.9.209078 $8902 ..9047.0%9094 439. 0 .30!./0903.20 439..9&8 .209078 .4:9 !74..7.9..7.9047 47547.9803: W W W W W W W !:/43 03:8 203: $00. $00.303: .9 4 43$400/3 W !.3439. 439.3..9 .98 ..8.9&8 !..

303: . 439.9.9 . 0 ..209078 . 0-38 .3.9047 !.793078 $00.9047.7.793078 ..30-3803: W W W W W W W !:/43 03:8 203: $00.4:9 !74. $00.0%9094 :7!.9./0903.8.7.20 :7!.793078 !.9 4 43$400/3 W !.30!..209078 $8902 .

08 !.9 4 43$400/3 W !.209078 ..8.9 ..9.7. 439.3./0903.7.30!.9.9047 !08 $00.08 .209078 $8902 .20 4. 0800/8 ..9047.0%9094 4.. 0 .4:9 !74..303: .30800/803: W W W W W W W !:/43 03:8 203: $00. $00.

08 !.7.30!.209078 $8902 .//390$0.7. $0..7.90890 . !74.9 ./0903.303: .0%9094 $0.7.4 W W W W W W !:/43 03:8 203: $00.20 4. 0 .

3.74:3/902.3/ 439.3$3/.7080.904/:0 W 4/:08.059 $0.  08 00/8  0-38 ..0.90 .3.430.98 .439039 W !:/4390 9038438 203:.3......0 W $00..3/800.90 W 03:88320390.20 #$$ W !48943 $3/.9 $3/.07 W .903570 /0130/ -408.5.09 W .94389.7.9 4/:0.

9 43 .07 W .3.3/ 800..0 W $00.3.3434/:0 W !:/4390 9038438 203:.9 4/:0..09 W %90 43 W !48943 019 .

07 W ..908908 W !48943 %45 W $00.308.9.3/800...84/:0 W !:/4390 9038438 203:.9047 08174290!708/039 W %903.3.9 43 .-0 08 W $4%90 08 .3.0 W $00.09 W %90 .9 4/:0.

7:2-84/:0 W !:/4390 9038438 203:.9 70.-0%90 08 W !48943 -70.0 W $00.07 W .7:2-8 W 8.3./.7:2-8 ./..370.3/ 800.3./../.9 4/:0.09 W %90 70.7:2-8 .

0.4478.3/570.3.3.07 W 0.3/800.3%025.20 945 ..020947003 W $.% 490/4. W .9 %025. 7:*2.:/0950 24/:0 3..3.30.90.0 W .908 W !:/4390 9038438 203:.

20 W $099025.9094-00 490989025.4:93$$ . /013085489438147548943 3.908.9.

Sign up to vote on this title
UsefulNot useful