BUILDING WEB SHOP

XAMPP – JOOMLA – VIRTUE MART

Guides (V2015.10)

1
1. XAMPP...................................................................................................................................4
1. 1. Download and Setup......................................................................................................4
1.2. Start XAMPP...................................................................................................................7
2. JOOMLA & VIRTUEMART..................................................................................................9
2.1. First Level.......................................................................................................................9
2.2. Second Level.................................................................................................................38
2.3. Third level – Use Free Quick Start Packages................................................................38
3. FREE TEMPLATES.............................................................................................................49
FREE- FREE - FREE...........................................................................................................49
Hi tech..................................................................................................................................49
Template...............................................................................................................................49
Store.....................................................................................................................................49
6 Free....................................................................................................................................49
Top 5 free.............................................................................................................................49
Top 10...................................................................................................................................49
13 Free Prestashop Template................................................................................................49
Omegathem.com - Free.......................................................................................................49
Joomla – Monster – Free......................................................................................................49
Joomla Forever.....................................................................................................................49
Best of Joomla......................................................................................................................50
Zerocarts...............................................................................................................................50
Evohosting............................................................................................................................50
31 Best Joomla VirtueMart...................................................................................................50
13 Amazing Joomla Restaurant............................................................................................50
Template Monster – Foods and Drinks................................................................................50
50 Best Joomla Templates for Restaurants...........................................................................50
Selected Templates...............................................................................................................50
4. TECHNICAL HELP.............................................................................................................51
1. Video guides.....................................................................................................................51
2. IT support in Office Hour.................................................................................................51
3. Email support...................................................................................................................51
4. Sample website:................................................................................................................51
5. Links for Quick Start downloads.....................................................................................51
5. GUIDES FOR SETTING UP QUICK START WEBSIITE.................................................52
5.1. FASHION......................................................................................................................52
5.2. CLOTHINGS...............................................................................................................53
5.3. DIGITAL PRODUCTS.................................................................................................54
5.4. WINTER FASHION.....................................................................................................55

2
6. CHECK LIST FOR WEBSITE.............................................................................................56
6.1. Basic Check list.............................................................................................................56
6.2. Advanced Check list......................................................................................................56

3
1. XAMPP
1. 1. Download and Setup

Google  Search Xampp

Latest version is Preferably better.

Suggested Version: XAMPP 5.6.11 (used in this Guides)

4
More downloads

XAMPP for Windows

Suggested Version: XAMPP 5.6.11 (used in this Guides)

5
Make sure that Xampp Version compatible with Joomla Version

Download and just run Xampp Setup

Xampp is set up (in C drive)

6
1.2. Start XAMPP

Click Xampp Control

Click Start Apache

Click Start MySQL

7
If something wrong, you want to stop and start Xampp and start again from beginning, just
click Xampp Start, Xampp Stop.

If you just want to start and stop web server services, you can click Start, Stop button in
Xampp Control Panel.

8
2. JOOMLA & VIRTUEMART
2.1. First Level

Google  Search Virtuemart

Open VirtueMart homepage

9
Click Download
Download Full Package (Joomla 2.5 and VirtueMart 3.0)

VirtueMart3.0.10_Joomla_2.5.28-Stable-Full_Package
This package is easy to setup and often meet no errors.

10
Copy setup package in to C:  Xampp  htdocs

Unzip/ Unrar the package

11
Rename the folder to Groupname or Project name (any thing you like, eg. Webshop1)

Open web browser, eg. Google Chrome, and type: http://localhost/webshop1 (or the name of
folder you have change to).

12
Step 1. Select language

Step 2. Next
Step 3. Next
Step 4. Put in server, database information
If you have not setup or change any thing in MySQL, you can put information as suggested:
- Username: root
- Password: blank
- Database name: webshop1
- Table prefix: ws_
And click next
If someone have changes MySQL, you need to go to: localhost/phpmyadmin/  check the
privileges for username and password of database.

13
If database username and password is not correct, you will see this.

If the password is correct, you will move to Step 5

14
Step 5. Next

Step 6:
Remember to note the Admin Password
If you lose it, you can not access Administration of the website.

15
Step 7. Finish setting up Joomla and VirtueMart package

Click on Remove Installation folder

16
Click Next to go to admin page of website
Or
Localhost/webshop1/administrator

User the username and password in Step 6 to login.

17
Step 8. Install sample data of VirtueMart, which will put in sample products for the web shop.

Sample products for the shop is added.

18
VirtueMart 3.1.0

Click on Product Menu  See 86 sample products

19
On Joomla 2.5.28

Click view site (top right) to go to web shop.

Or type: http://localhost/webshop1

20
Webshop1

Create a customer account

21
You will see this, but NO email has been sent, because we have not configure the Email
information of the web shop so that in this step, it can not send out email.
We will go to administration to activate account manually.

Go to Administration: http://localhost/webshop1/administrator
You should open two tabs at the same time.
Click on User  User Manager

22
Click on Enable, and then Click on Activated.

Now customer1 is Enabled and Activated.

23
Go to Front end – web shop and act as customer1 to buy something
Login using username customer1 and password you have created above.

Click on Headpieace to buy a hat.

24
Select a hat, eg. The Red one, Cap “Baseball”

Click Add to Cart

25
Click Show Cart

Check the order details

26
Click agree with the Web Shop terms and click Check Out Now.

27
Update Customer1 information and Save

User data has been update.

28
Click Confirm Purchase

Ordering complete.
Note 1. An email confirmation should be send to Customer1’s email.
Note 2. Order should be save in Administration  VirtueMart  Order (Pending status).

29
Login Administration as Admin  Virtue Mart  ORDER
You will see there is one Order in Store.
Note: There is a warning (red color), but you can leave it, we will fix that later.

If you click on Confirmed  There should be Email sent to Customer1 informing the
Confirmation, but we still have not configured Email, so even click there is nothing happen.
So, go to configure Email of the web shop.

30
Site  Global Configuration.

Put in information for Email as follows:

31
1. SMTP
2. Your email@gmail.com
3. Website name
4. Keep default
5. Change to YES
6. Change to SSL
7. Change to 465
8. SMTP Username: your email@gmail.com
9. SMTP Password: your email password
10. SMTP Host change to: smtp.gmail.com

Click Save
Then test email out of the Web Shop.

32
User  Mass Mail Sender

Select Register
Put email information, eg. Test 2, Test 2
Lick Send Email.

33
The system informs that Email has been sent.
You should check both Emails to make sure the System works correctly.

Check the Sent Mail of shop owner to make sure it sends out emails.

34
Check Email of Customer1 to make sure they received Emails from Webshop.
If they go to Spam, click Not Spam to receive future Email.

Now, go to Administrator  VirtueMart  Order

Change the Order status to Confirmed. Save the change Update Order Status.

35
One Order has been updated.

36
Confirmed Order sent to Email of Buyer.
DONE for SETTING UP WEB SHOP.

37
2.2. Second Level

1. Select to better Template

2. Install Extensions
3. Add products
4. Add payment methods
5. Write news, articles
6. Get Domain your_group_name@ftu.edu.vn and Free Host, and upload to Host.
7. Test
8. Write Report
9. Record Video Presentation.
10. Submit report, video links and DONE.

NOTE:
After completion of above basic Version of Joomla/Virtue Mart, you can choose one of the
suitable Quick Start Package to set up a good looking and multi functions online web shop.
Search for a free package or use some suggested in next pages.

2.3. Third level – Use Free Quick Start Packages

http://www.enough.pro/10-awesome-free-virtuemart-templates-must-be-your-choice/

38
01. PAJUH

Pajuh is a virtuemart template for eCommerce site. This template is clean

responsive design. It comes with many features –

39
40
02. HAWKSTORE

Hawkstore is a fully responsive virtuemart template. This theme is perfect for

online shopping site. You must like this theme –

DemoDownload

41
03. BT E-COMMERCE

BT eCommerce is a wonderful responsive virtuemart template for eCommerce

website. You must use this template for your online shopping website project –

DemoDownload

42
04. DIGITAL BOX

Digital box is a joomla 2.5 virtuemart template. You can usage this template
for electronics online shopping site –

DemoDownload

43
44
05. WINTER FASHION

This is an awesome joomla virtuemart template. You may choose this template
for fashion website –

DemoDownload

45
46
06. HI TECH

Hi tech is a virtuemart template. This template is only perfect for app site. If
you want to create a app store site, you can choose it –

DemoDownload

47
07. BIKE STORE

This is a nice and clean virtuemart template for eComeerce site. You can use
this template for bike store website. You can also customize this template –

DemoDownload

48
08. MIXMAZ

Mixmaz is a fully responsive virtuemart template. This template is suitable for

eCommerce, business, personal and blog site –

DemoDownload

49
09. ISTORE

Istore is a virtuemart template for eCommerce website. This template is new

for online shopping site –

DemoDownload

50
10. BAZAR

Bazar is necessary things virtuemart template. This template can use for
online shopping site –

DemoDownload
51
52
3. FREE TEMPLATES

FREE- FREE - FREE

http://www.enough.pro/10-awesome-free-virtuemart-templates-must-be-your-choice/

http://fulltemplatedownloads.com/category/joomla

Hi tech
http://bigtheme.net/joomla/smartaddons/95-sj-appstore-hitech-virtuemart

Template
http://www.enough.pro/category/templates/joomla-templates/

Store
http://www.enough.pro/virtuemart-themes-for-joomla-ecommerce-websites/

6 Free
https://www.template.net/ecommerce-templates/virtuemart/free-virtuemart-templates/

Top 5 free
http://www.joomlashine.com/blog/top-5-joomla-virtuemart-templates-you-can-t-miss.html

Top 10
http://www.smartaddons.com/blog/item/1214-best-10-virtuemart-templates-2015-for-your-
ecommerce-site

13 Free Prestashop Template

http://www.zerocarts.com/873/free-responsive-prestashop-themes.html

Omegathem.com - Free
https://www.omegatheme.com/free-joomla-templates

Joomla – Monster – Free

https://www.joomla-monster.com/joomla-templates/32-free

Joomla Forever
http://joomla4ever.org/templates-joomla-monster/jm-eco-cosmetics-store

53
Best of Joomla
http://www.bestofjoomla.com/index2.php?
option=com_bestoftemplate&task=download&no_html=1&id=3864

Zerocarts
http://www.zerocarts.com/477/free-fashion-beauty-prestashop-themes.html

Evohosting
https://www.evohosting.co.uk/blog/web-development/13-best-free-prestashop-themes/

31 Best Joomla VirtueMart

http://weelii.com/joomla-virtuemart-templates/

13 Amazing Joomla Restaurant

https://www.template.net/cms-templates/joomla-templates/restaurant-templates-for-joomla/

Template Monster – Foods and Drinks

http://www.templatemonster.com/category/food-drink-joomla-templates/?page=2

50 Best Joomla Templates for Restaurants

https://www.freshdesignweb.com/restaurant-cafe-joomla-templates/

Selected Templates
http://www.templatemonster.com/demo/53253.html
http://themelan.com/demo/?theme=RedBowl-Restaurant

54
4. TECHNICAL HELP

1. Video guides
www.youtube.com/ecomftu2012

2. IT support in Office Hour

All groups can come to get:
- Free set up guides and assistance for Xampp, Joomla, VirtueMart, Templates, Quick Starts
- Free host
- Free domain name

3. Sample website:
http://oceanbooks.ftu.edu.vn
http://teastar.ftu.edu.vn
http://potpor.ftu.edu.vn

4. Links for Quick Start downloads

http://ouo.io/BHa8z

55
5. GUIDES FOR SETTING UP QUICK START WEBSIITE
5.1. FASHION

Download this quick start: http://ouo.io/mbltv

56
5.2. CLOTHINGS

Download Quick Start Package: http://ouo.io/c5eE5

57
5.3. DIGITAL PRODUCTS

Download Quick Start Package: http://ouo.io/vmv0N

58
5.4. WINTER FASHION

Download Quick Start Package: http://ouo.io/ARN7Pn

59
6. CHECK LIST FOR WEBSITE
6.1. Basic Check list
1. Good Product ideas
2. Good Shop template
3. Automate Email sent to customers and shop administrator
4. Automate Email sent when changing Order status
5. Change Shop details: Name, Owner, Introduction, Logos
6. Payment methods (add new and change)
7. Delivery methods (add new and change)
8. Product categories (add new), Product details, photo, description (add new)
9. Price, promotion (add promotion, discount)
10. News: Menu, Articles, install plugins for Facebook and other social networks

6.2. Advanced Check list (Add-ons)

1. Form: register and send mail confirmation (Module, RS Form, Google Form…)
2. Payment (by Payment or other methods)
3. Install Comment for Articles, Commnets for Products.
4. Display Products (2D, 3D, different colour, different sizes, prices)
5. Install new module (New, Creative, eg. Count visitor, ….)
6. Install new modules for Downloadable products.
7. Change Favicon of the Shop
8. Report
9. PPT
10. Video Clips

60