Modul Penggunaan CMS (Joomla, Wordpress, DLL)

2012
Practical Work Material

KS091302 Introduction to Information System
Module 06: CMS Joomla and Prestashop

This module will explain how to use, organize and manage the most commonly used CMS for e-commerce Joomla and Prestashop. At this module, student will learn both of the CMS features and try to make their own e-commerce website
INFORMATION SYSTEM Department Faculty of Information Technology
Institut Teknologi Sepuluh Nopember

Surabaya
KS091302 Introduction to IS
DOCUMENT AUTHORITY
Prepared by Faza Faikar Cordova Annis Paramita Dilla Yoga A. Prasatria Faridl Mughoffar Reviewed by Ahmad Mukhlason Feby Artwodini M. Retno Aulia Vinarti Amna Shifia INFORMATION SYSTEM Department, Faculty of Information Technology Institut Teknologi Sepuluh Nopember Jl. Raya ITS SURABAYA 60111 http://si.its.ac.id/ Publish date : 4/2/2012
TABLE OF CONTENTS
Document Authority ...................................................................................................... 1 Table of Contents ........................................................................................................... 2 List of Tables and Figures ............................................................................................... 3 Practical Work Objectives .............................................................................................. 5 Joomla At Glance ........................................................................................................... 6 Joomla Configuration ..................................................................................................... 7 How to change the template? ................................................................................... 7 Managing Content/Article by Section and Category. .............................................. 10 Managing Content With Menu ................................................................................ 12 User Management ................................................................................................... 16 Prestashop Configuration ............................................................................................ 18 1. 2. 3. 4. 5. 6. Modules .......................................................................................................... 18 Statistic ........................................................................................................... 20 Catalog............................................................................................................ 21 Customer ........................................................................................................ 23 Payment ......................................................................................................... 25 Feature Product.............................................................................................. 27
Take-Home Assesment ................................................................................................ 32 Suggested resources .................................................................................................... 33 Bibliography ................................................................................................................. 34
LIST OF TABLES AND FIGURES

Figure 1 Joomla Logo ...................................................... Error! Bookmark not defined. Figure 2 Template Manager ........................................................................................... 7 Figure 3 Module Template Manager ............................................................................. 8 Figure 4 Change Schemes .............................................................................................. 8 Figure 5 Extentions ........................................................................................................ 9 Figure 6 Module Uploder ............................................................................................... 9 Figure 7 File Manager to Upload ................................................................................... 9 Figure 8 Installing Succed............................................................................................. 10 Figure 9 Content Management .................................................................................... 10 Figure 10 Home Tool .................................................................................................... 11 Figure 11 Form to Create Section ................................................................................ 11 Figure 12 Article Module ............................................................................................. 12 Figure 13 Article Module Features .............................................................................. 12 Figure 14 Module Manager ......................................................................................... 13 Figure 15 Main Menu ................................................................................................... 13 Figure 16 Item Manager .............................................................................................. 13 Figure 17 Mapping Item ............................................................................................... 14 Figure 18 Sub Parent Item ........................................................................................... 14 Figure 19 Article Layout ............................................................................................... 14 Figure 20 Parent Items Control .................................................................................... 15 Figure 21 Insert Article ................................................................................................. 15 Figure 22 Created Map View ....................................................................................... 16 Figure 23 Preview Has Change..................................................................................... 16 Figure 24 User Manager .............................................................................................. 17 Figure 25 Adding User .................................................................................................. 17 Figure 26 Module Prestashop ...................................................................................... 18 Figure 27 Adding module ............................................................................................. 18 Figure 28 Browsing module ......................................................................................... 19 Figure 29 Uploading module........................................................................................ 19 Figure 30 Module downloaded successfully ................................................................ 20 Figure 31 Activated module ......................................................................................... 20 Figure 32 Back Office Statistic...................................................................................... 20 Figure 33 Catalog ......................................................................................................... 21 Figure 34 Categories .................................................................................................... 21 Figure 35 Adding Category ........................................................................................... 22 Figure 36 Adding Product ............................................................................................ 22 Figure 37 Product Identity Form .................................................................................. 23 Figure 38 List Of Customer Menu ................................................................................ 24 Figure 39 Data of Customer ......................................................................................... 24 3
Figure 40 Enable payment module .............................................................................. 25 Figure 41 Setting curency ............................................................................................ 26 Figure 42 Setting taxes ................................................................................................. 26 Figure 43 Setting voucher ............................................................................................ 27 Figure 44 List of Product Category............................................................................... 27 Figure 45 Setting Product Feature ............................................................................... 28 Figure 46 Setting Shipping ........................................................................................... 28 Figure 47 Setting Carrier and Zone .............................................................................. 29 Figure 48 Shipping States ............................................................................................. 29 Figure 49 Countries Options ........................................................................................ 30 Figure 50 Shipping Zones ............................................................................................. 30 Figure 51 Shipping Price Ranges .................................................................................. 31 Figure 52 Shipping Weight Ranges .............................................................................. 31
PRACTICAL WORK OBJECTIVES

The objectives of this practical work is giving practicant with knowledge and experience in management and configuration of Template, contents, menus, user in Joomla and Prestashop! Content management System. In order to be fully understood the material, the practicants have to try some parts of the material that need to be practiced by themselves.
JOOMLA AT GLANCE
From the last practicum (module 05), we already know that Joomla is one of the most popular Content Management System that can help us to build website. Although there are many kinds of CMS (Content Management System) depend on their feature and function, right now we choose to use Joomla, actualy Joomla Ver.1.5. The logo of Joomla is depicted by Figure 1.
Figure 1 Joomla Logo
The question is: why we use Joomla Ver 1.5? Joomla Ver 1.5 is a version from Joomla that built with GNU License (It means free to massive distribution). As we know, in IT World the software that has released in new version is more complete than the older version. Although it doesnt perfect very well, but at least it has bugs fixes. The question is: first version, latest version, it means Joomla , so does Joomla have history? Absolutely! Further and concise information about the history of Joomla can be found at [1] and the latest version of Joomla can be checked at [2]. If you want to communicate with other joomla users, you can join some forums discussing about Joomla. To join with Joomla user in Indonesia, you can join at [3].
JOOMLA CONFIGURATION
After installing Joomla, you will get the default joomla website design and configuration, and now the question is: How to configure it on your own? Bellows are step by step instructions how to configure your Joomla Changing the Joomla Template Template is the most important things in all website, especially when we configure it using CMS! Because by using this template you can change your web appearance (design) and you can change your website content n easily. By the default, after the installation process, Joomla will give you two standard templates. Other than these templates, you can find it on the internet or make it yourself by using designer tools. Just search in Google using keyword Joomla Template you can find thousands links that provide either free or commercial template. For instance, you can get free template from [4], [5], and [6].
How to change the template?

To change you template with another template, just follow this instruction: 1. Click Extensions Tab, while the dropdown menu is open, Click Template Manager and you will see a Template Manager Menu as depicted by Figure 2.
Figure 2 Template Manager
2. The selected template in Figure 3 is the current template. To change it with another one, select your desired template and click star bellow default tab to make it as default template. 7
Figure 3 Module Template Manager
3. For instance, select rhuk_milkway template. In order to make some changes in template settings, click the rhuk_milkway, then you can set some parameters such as depicted by Figure 4. You can change the color variation, background variation color, and template width.
Figure 4 Change Schemes
4. Finally, to make sure the changes, you must click Apply/Save button. To see the changes of your website with the new template, just refresh your website URL ( for example: http://localhost/tespsi(yourfoldername). The prior steps are instruction how to change template using the given (default) template. Now, how to add other templates? (Supposed you want to add templates that you downloaded from internet, Instead of the given default template). Here is the step and instructions: 1. Download your desired template from any resources. Usually you will get the template in .zip format. 2. How to use your template is an easy way. You just need to extract/install it in your Joomla. 3. Go to Extensions Tab menu, and choose Install or Uninstall (see Figure 5). 8
Figure 5 Extentions
4. Then, upload your desired template file in the Upload Package File Tab (see Figure 6).
Figure 6 Module Uploder
5. Finally, just click browse button to select your file in your computer and click Upload File & Install button as depicted by Figure 7.
Figure 7 File Manager to Upload
6. If your template is successfully uploaded, then the system will give you an confirmation such as depicted by Figure 8.
Figure 8 Installing Succed
7. To use it as your new template for your Joomla Website, just follow the prior instructions, starting from Figure 3.
Managing Content/Article by Section and Category.

Another important thing to do for managing your Joomla Website well is how to manage the content of your website well. Content here means any article that you want to post in your website. It is Just like how to manage your posting in your blog. How to add new Article. To add a new article at your website, go to content tab (see Figure 9), then select article manager, and finally create your new article. To manage your article posting well, in Joomla You can classify your article by efining sections and categories. A section can contain some categories an a categories can contain some articles. How to create new section?
1.
To begin managing sections, click on section manager from Content tab (see Figure 9).
Figure 9 Content Management
10
2. Then, Click on New on the Joomla Toolbar as depicted by Figure 10.
Figure 10 Home Tool
3. Type the title and description for your new section and then press Save on
the toolbar (see Figure 11).
Figure 11 Form to Create Section
4. Create section as many as you need. Use sections to classify similar articles in
the same section.
How to create new category?

5. After finishing working with sections, now you can create new category by
selecting Category Manager from Content Tab (see Figure 9).

6. Now, you can classify your article by either section or category.
In
articles menu you can do a lot of things (see Figure 12) : a. Add a title for the article, and put it into a section and category. b. You have the option to publish or un-publish your article, as well as the choice whether to display the article on the front page. c. You can use the page break button to divide the article into pages. 11
d. You can use the read more to divide the article into the section to display in a summary view and full view. e. You can use the image button to insert an image into your article using the simple upload form in combination with Joomla's media manager. f. After finishing typing your article, click Save button to save it and return to the article manager, or click Apply to save it and continue editing. Then your articles will show up in the frontpage.
Figure 12 Article Module
Figure 13 Article Module Features
7. Do the same steps if you want to create another article.
Managing Content With Menu

Another way to manage your website content is by using menu. Menu will easy your website visitor while visiting your website. Joomla has a built-in system for managing menus. This system is built around the three types of information in Joomla i.e.
components, modules, and plugins. If components are the main information in your Joomla Driven by menus, you will see only the front page articles at the front page of your site. 12
The contact information, web links, news feeds, and articles that are not published on the front page are not visible because each page displays one component at a time.
How to create a new menu? 1. Firstly, click on the Menu Manager Module (see Figure 14).
Figure 14 Module Manager
2. .
Choose Main Menu as depicted by Figure 15.
Figure 15 Main Menu
3. Then a new page such as depicted by Figure 16 will be displayed. When this page is displayed, easily click New button.
Figure 16 Item Manager
4. Then select type of menu that you want to use it as depeicted by Figure 18 and 19. 13
Figure 17 Mapping Item
Figure 18 Sub Parent Item
5. Then click parent menu, and fill the menu name such as depicted by Figure 20 and Figure 21.
Figure 19 Article Layout
14
Figure 20 Parent Items Control
6. If you choose menu article for layout dont forget choose the articles that you want to inserted on the menu as depicted by Figure 22
Figure 21 Insert Article
7. Then choose one articles, close the pop up menu, click Save then it will show you such as depicted by Figure 23.
15
Figure 22 Created Map View
8. To see the changes, refresh your web site URL (See Figure24).
Figure 23 Preview Has Change
User Management
One of benefits of Joomla CMS is Multiuser. Multiuser means it can be managed by more than one user with different authority. The highest authority level is called user administrator. Other than that you can also add new user with different level authority or different access level in Joomla Bellows are step by step instructions: 1. Open the back end from Joomla (it means Administrator Menu) 2. Choose user manager, and user manager page will be displayed such as Figure 25
16
Figure 24 User Manager
3. Click New to add user. 4. Fill the name, email and password tab and choose group to which this user is assigned and finally save it (See Figure 26).
Figure 25 Adding User
17
PRESTASHOP CONFIGURATION
1. Modules
Modules is a menu that provide features of Prestashop. In this menu we can choose what features that will be exist in our website. To activate features of Prestashop we can directly click install button.
Figure 26 Module Prestashop
There are many kind of features that provided by Prestashop, but we can add more features from internet. To activate module from internet, click Add a new module button.
Figure 27 Adding module
After that, insert the address on Module URL if download the module directly from internet or upload file by clicking Browse button if we have the module 18
Figure 28 Browsing module
After clicking Browse button, we must choose module from computer, then click Upload this module button.
Figure 29 Uploading module
If your module is successfully uploaded, then the system will give you an confirmation such as depicted by Figure below. 19
Figure 30 Module downloaded successfully
We can find module that have been uploaded on the list of modules. Then activate module by clicking Install button.
Figure 31 Activated module
2. Statistic Statistic menu is one of standard menu of Prestashop. This menu have function to record sales, orders, customer registration, and frequency of products that have been viewed by visitors. On the other hand, this menu can show development graph of business process that occur on the website.
Figure 32 Back Office Statistic
20
KS091302 Introduction to IS 3. Catalog
Catalog menu have a function as a regulator of products. In this menu, product can be arranged by categories and types of product in order to make visitor easy in finding products
Figure 33 Catalog
3.1
Category Category is a large group of products. We should make category before making the product. To add a category we select the button "Add a new categories" like the picture below.
Figure 34 Categories
After that will appear page to fill the categories identity, such as: name of the category, images, or the other.
21
Figure 35 Adding Category
3.2 Product
To add a product just like we add a category, we select the button "Add a new product."
Figure 36 Adding Product
After that will appear a page to fill out the identity of the product, such as: product name, image, price, description of products, etc.
22
Figure 37 Product Identity Form
4. Customer One of the other standard features of the Prestashop is can be used to store customer database. Customer data can be known from this Customer module. When the Customer clicked the "Sign Up" button then the customer identification data will be recorded automatically in the database. To see it we simply click in the Customer name then we will be shown pages that contain customer data.
23
Figure 38 List Of Customer Menu
Here are a subscriber identity data that can be viewed via the Customer module.
Figure 39 Data of Customer
24
KS091302 Introduction to IS 5. Payment
Payment are set type of module to manage type of payment that provided by the company in the process of customer payments. The types of payments provided prestashop include: banks, checks, and paypal. To enable us simply click the "install" button. However, to enable the paypal feature we should have a paypal account.
Figure 40 Enable payment module
In module payment, we can get sub module such as currencies, taxes, and voucher. 5.1. Currencies Currencies modules shown the types of currency to be used in the company's website. We can enable some currencies in prestashop, like Euro, Dollar, Pound, amount, etc. To add a type of currency we can press the button "Add new" add the desired type of currency. After that, we also must determine the Default Currency. In this case the default currency that used is Dollar.
25
Figure 41 Setting curency
5.2. Taxes Taxes is a submodule which regulates tax. Setting additional types of taxes just like currency. There can be determined the amount of tax that would apply in the business process.
Figure 42 Setting taxes
26
5.3. Voucher Voucher is a submodule that is used to provide vouchers to customers with the provisions established company. To add press the button "Add new" Enter the desired type of vouchers and its settings.
Figure 43 Setting voucher
6. Feature Product Featured product is a feature to display the product on the Home page website. To attract consumers then have to choose the best possible products to be displayed on the "Home" page. To arrage it click in Catalog Category Product likes picture below.
Figure 44 List of Product Category
27
After that, choose a product that will be the "Featured Product". On the product editing page, click on "Home". Then save the settings.
Figure 45 Setting Product Feature
2. Shipping Shipping is a module that will be used to manage the delivery of products. There are some settings that are the provisions of each company, including the costs and parameters used when Billing.
Figure 46 Setting Shipping
28
KS091302 Introduction to IS Then determine the type of Carrier and shipping Zone.
Figure 47 Setting Carrier and Zone
Then arrange Carrier in the submodule Shipping. In this case, companies can determine the types carrier. Beside that, setting the "Default Carrier" from all types of carrier that has been determined.
Figure 48 Shipping States
Then in the submodule Countries company can determine which country will be reached and default Country like the picture below.
29
Figure 49 Countries Options
The next setting is Zones. Here, companies can manage zones that will be reached.
Figure 50 Shipping Zones
Then setting the Price Ranges. It has function to setting the cost of shipping. Here can be specified the types of costs based on Carrier used.
30
Figure 51 Shipping Price Ranges
Next, settings the Weight Ranges which will be regulated based on the type of carrier.
Figure 52 Shipping Weight Ranges
31
TAKE-HOME ASSESMENT
1. Download a unique Joomla template from any resources or create your own template, install it, and use it for your default Joomla template. 2. Chage the header ( Image header) with your own image header, you must create it by using adobe photoshop or similar software ( for instance your own photo header). 3. Create at least three articles (you can copy from any resources by giving proper citation), at least one of them must be multimedia content (picture, animation, mp3 or video). Manage your content by your own menu, section, an categories. 4. Create 5 users in your Joomla with different level of authority. 5. Explore other configuration functionalities in Joomla as many as better ( for example: how to configure the language, etc) 6. Change the background image on the home page of your prestashop 7. Documented the order and shipping process.
32
SUGGESTED RESOURCES
1. 2. 3. 4.
http://ai23.wordpress.com/2007/02/25/tutorial-joomla http://cahcepu.com/download/30-template-joomla-gratis-dengan-tampilan-menarik http://www.google.com http://prestashop.com
33
BIBLIOGRAPHY
[1] http://en.wikipedia.org/wiki/Joomla [2] http://www.joomla.org/ [3] http://www.id-joomla.com/ [4] http://www.joomla24.com/ [5] http://joomlatp.com/ [6] http://www.templatejoomla.com/
34

Modul Penggunaan CMS (Joomla, Wordpress, DLL)

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Modul Penggunaan CMS (Joomla, Wordpress, DLL)

Încărcat de

Drepturi de autor:

Formate disponibile

2012

Practical Work Material

Module 06: CMS Joomla and Prestashop

INFORMATION SYSTEM Department Faculty of Information Technology

Institut Teknologi Sepuluh Nopember

Practical Work Material

Practical Work Material

Practical Work Material

LIST OF TABLES AND FIGURES

Practical Work Material

Practical Work Material

PRACTICAL WORK OBJECTIVES

Practical Work Material

Figure 1 Joomla Logo

Practical Work Material

How to change the template?

Figure 2 Template Manager

Practical Work Material

Figure 3 Module Template Manager

Figure 4 Change Schemes

Practical Work Material

Figure 6 Module Uploder

Figure 7 File Manager to Upload

Practical Work Material

Figure 8 Installing Succed

Managing Content/Article by Section and Category.

Figure 9 Content Management

Practical Work Material

2. Then, Click on New on the Joomla Toolbar as depicted by Figure 10.

Figure 10 Home Tool

the toolbar (see Figure 11).

Figure 11 Form to Create Section

the same section.

How to create new category?

selecting Category Manager from Content Tab (see Figure 9).

Practical Work Material

Figure 12 Article Module

Figure 13 Article Module Features

7. Do the same steps if you want to create another article.

Managing Content With Menu

Practical Work Material

Figure 14 Module Manager

Choose Main Menu as depicted by Figure 15.

Figure 15 Main Menu

Figure 16 Item Manager

Practical Work Material

Figure 17 Mapping Item

Figure 18 Sub Parent Item

Figure 19 Article Layout

Practical Work Material

Figure 20 Parent Items Control

Figure 21 Insert Article

Practical Work Material

Figure 22 Created Map View

Figure 23 Preview Has Change

Practical Work Material

Figure 24 User Manager

Figure 25 Adding User

Practical Work Material

Figure 26 Module Prestashop

Figure 27 Adding module

Practical Work Material

Figure 28 Browsing module