35
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 2012

Modul Penggunaan CMS (Joomla, Wordpress, dll)

Embed Size (px)

DESCRIPTION

Dijelaskan tentang penggunaan CMS (Joomla, Wordpress, dll)

Citation preview

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

2012

KS091302 – Introduction to IS Practical Work Material

1

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

KS091302 – Introduction to IS Practical Work Material

2

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

2. Statistic ........................................................................................................... 20

3. Catalog ............................................................................................................ 21

4. Customer ........................................................................................................ 23

5. Payment ......................................................................................................... 25

6. Feature Product .............................................................................................. 27

Take-Home Assesment ................................................................................................ 32

Suggested resources .................................................................................................... 33

Bibliography ................................................................................................................. 34

KS091302 – Introduction to IS Practical Work Material

3

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

KS091302 – Introduction to IS Practical Work Material

4

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

KS091302 – Introduction to IS Practical Work Material

5

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.

KS091302 – Introduction to IS Practical Work Material

6

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 doesn’t 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].

KS091302 – Introduction to IS Practical Work Material

7

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.

KS091302 – Introduction to IS Practical Work Material

8

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

KS091302 – Introduction to IS Practical Work Material

9

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.

KS091302 – Introduction to IS Practical Work Material

10

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

KS091302 – Introduction to IS Practical Work Material

11

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.

KS091302 – Introduction to IS Practical Work Material

12

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.

KS091302 – Introduction to IS Practical Work Material

13

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.

KS091302 – Introduction to IS Practical Work Material

14

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

KS091302 – Introduction to IS Practical Work Material

15

Figure 20 Parent Items Control

6. If you choose menu article for layout don’t 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.

KS091302 – Introduction to IS Practical Work Material

16

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

KS091302 – Introduction to IS Practical Work Material

17

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

KS091302 – Introduction to IS Practical Work Material

18

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

KS091302 – Introduction to IS Practical Work Material

19

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.

KS091302 – Introduction to IS Practical Work Material

20

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

KS091302 – Introduction to IS Practical Work Material

21

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.

After that will appear page to fill the categories identity, such as: name of the

category, images, or the other.

Figure 34 Categories

KS091302 – Introduction to IS Practical Work Material

22

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

After that will appear a page to fill out the identity of the product, such as: product name, image, price, description of products, etc.

Figure 36 Adding Product

KS091302 – Introduction to IS Practical Work Material

23

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.

KS091302 – Introduction to IS Practical Work Material

24

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

KS091302 – Introduction to IS Practical Work Material

25

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.

KS091302 – Introduction to IS Practical Work Material

26

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

KS091302 – Introduction to IS Practical Work Material

27

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

KS091302 – Introduction to IS Practical Work Material

28

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

KS091302 – Introduction to IS Practical Work Material

29

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.

KS091302 – Introduction to IS Practical Work Material

30

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.

KS091302 – Introduction to IS Practical Work Material

31

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

KS091302 – Introduction to IS Practical Work Material

32

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.

KS091302 – Introduction to IS Practical Work Material

33

SUGGESTED RESOURCES

1. http://ai23.wordpress.com/2007/02/25/tutorial-joomla

2. http://cahcepu.com/download/30-template-joomla-gratis-dengan-tampilan-menarik

3. http://www.google.com

4. http://prestashop.com

KS091302 – Introduction to IS Practical Work Material

34

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/