paper - PDF – 3.5MB.doc

Page 1 of 21

Establishing your own e-business website

On this topic you will learn about:

- The benefit of having your own e–business website- How to check and register your domain name- How to choose Web Hosting Provider- How to choose and deploy open-source e-commerce software on your

website- How to work with the graphics- How to make use free video streaming provider such as YouTube to store

your products video and display it on your website.- Using Yahoo Messenger to provide support/help to your customer.

Introduction

Meet James the T-shirt Designer.

Name : James

Age : 28

Business : T-shirt Designer

In Business : 5 years

Employees : 2

Needs : E-commerce website to promote and sell his product online

Character from MAP Curriculum, www.mea-i.org

James spent most of his career as a designer. Previously he worked as a graphic artist for a design company. One day he started to design on t-shirt, he designs it using computer, then print it using. Then he sells the t-shirts by put them in his friends shop. His business is growing, now he already has his own shop and two employees working for him.

Now James wants to expand his market. He knows that if he have an e-commerce website, his market will be broader, because his website could be accessed by anybody in any part of this world. He also knows the he has unique product, custom made t-shirt design. But James didn’t know how to start. That’s why he consults with YOU, his friend, who knows better on e-business to help him start his e-business website.

Page 2 of 21

The benefit of having your own e–business website

What you should consider before establishing your own e-business website:

The Advantages:• Take control of everything in your e-commerce system.

As the owner, you can develop your own e-commerce system to what you want. You can add features that doesn’t have by other e-commerce system, such as forum for your customer.

• Build your own brand nameYou can have your own domain name such as: www.JamesDesign.com, rather than www.shoppingmall.com/JamesDesign.

• Customize to your needsSome established e-marketplace sometimes doesn’t give you flexibility to change part of their module such as design template. You have to choose the pre-defined templates for your shop, but if you are the owner of the e-commerce system, you can design according to your style.

The Costs:• Setup cost

There are setup costs when you establish your own e-business website, such as:– Domain Name– Web Hosting Provider– Web Development / E-commerce shopping cart

• Maintenance costMonthly or yearly cost to maintain your e-business website:– Domain Name– Web Hosting Provider

As a Small Business Owner, James doesn’t have too much money to invest on e-business website. So in this lesson we will try to help James to get his e-business website with minimum cost.

Page 3 of 21

Table 1. Cost Estimation for developing e-business website

Yearly fee (USD) Setup fee (USD)

Domain Name 10 10

Web Hosting 25/mo x 12 = 300 15

Web Design +Shopping Cart Application

0  0

TOTAL 310 25

Price from: http://www.cbn.net.id/cbweb/service.aspx?x=Home&y=Service&z=Web+Hosting&q=20&mn=90

Domain Name

In real world, James has his own JamesTshirt store to sell his t-shirt. In virtual world, James also need store so people can go to his shop and buy. For that, James need a Domain Name.

James thinks it is good to have a Domain Name same as his current shop name, so James named his shop, JamesTshirt.com.

First, James has to check whether JamesTshirt.com still available or not. To check the availability of a domain name, James has to go to www.allwhois.com and type the domain name in the provided text box, then click Search.

The result will show in Whois Output box. If the result is:

jamestshirt.comRegister Now!Available for Registration----------------------------------------------------

This means JamesTshirt.com still available and James can register it.If the result is:

Domain TakenPlease Search AgainDomain name is currently unavailable for registrationThis means the domain already taken, and James has to think for another domain name.

Page 4 of 21

Picture 1. Search domain availability using www.allwhois.com

After checking the domain name availability, James has to register it to Domain Name Provider such as Singcat.com (USD10/year)

Web Hosting Provider

After James got the domain name he wants, now he has to find a web hosting provider where he can store his website data.

What you need to know about web hosting provider:• Reliability

Is their service reliable? How much down time of their server?• Technical support

Do they provide 24/7 support?• Hosting Features

Before you choose web hosting provider, make sure you study their hosting features.

• SecurityDo they provide daily backup? Fire & Earthquake protection?

• CostCompare the cost between Web Hosting Provider before you choose.

Table 2. Comparison between Web Hosting Provider in Indonesia

Page 5 of 21

Facilities Web Hosting Provider

  CBN Centrin RumahWeb

Capacity ( MB ) 50 20 120

Monthly Fee ( USD ) 25 20 5

PHP Support Yes Yes Yes

FTP Access Yes Yes Yes

24 Hours Support Yes Yes Yes

Daily Server Backup Yes Yes Yes

Monitoring Traffic Access

Yes Yes Yes

Online Technical Support

Yes Yes Yes

Web Statistic Yes Yes Yes

Shopping Cart Application

Yes No Yes

Website http://www.cbn.net.id/cbweb/

service.aspx?x=Home&y=Service&

z=Web+Hosting&q=20&mn=90

http://www.centrin.net.id/

services/hosting-web.shtml

http://www.rumahweb.com

/enterprise-hosting.php

James needs Web Hosting Provider that can provide him with shopping cart application that easy to install and use. That will be his first priority, the other could be the capacity of the storage ad of course the cost.

E-commerce Software Selection

How to install osCommerce software provided by your Web Hosting Provider?Login to CPanel on www.JamesTshirt.com/cpanel/Click on Fantastico De Luxe icon (Picture 2), you will see the Installation Welcome Screen (Picture 3).

Then click on osCommerce link, you will see Installation Screen step 1 of 4 (Picture 4).

Page 6 of 21

Picture 2. CPanel Main Menu

Page 7 of 21

Picture 3. osCommerce Installation Welcome Screen

Page 8 of 21

Picture 4. osCommerce Installation Screen (1/4)

Here you have to fill in:- Install in Directory: fill in directory where you want osCommerce to be

installed. Leave it blank to install it in root directory.- Username: User ID for you to log in to osCommerce- Password: Password for you to log in to osCommerce- Shop Name: Name of he shop- Owner: Name of the owner- Email Address: Your email address, every orders will be sent through this

email.

Click Install OS Commerce button to continue to Step 2 of 4 (Picture 5). Here you will see information that the database have successfully created.

Page 9 of 21

Picture 5. osCommerce Installation Screen (2/4)

Picture 6. osCommerce Installation Screen (3/4)

Step 3 of 4 will do the automatic configuration for the shop. You just need to click on “Click here to protect the administration area” button to proceed to the next step.

Page 10 of 21

Picture 7. osCommerce Installation Screen (4/4)

This last step will give you information that your shop is ready to use. What you need to do is click the “Back to OS Commerce Main Page” to open the online shop.

Demo for JamesTshirt shop can be accessed here: www.nikoatmadja.com/demo/JamesTshirt/

Picture 8. JamesTshirt online shop

Page 11 of 21

Working with Graphics

James now already running his online shop open. Some customers already buy t-shirt from his shop.

But sometimes he receive complain from customer saying that what they get is not the same as it displayed on the web page.

James realized that some pictures are too small so customer cannot see the detail.

Character from MAP Curriculum, www.mea-i.org

Some pictures are too dark because he took the pictures under low light environment. Can you help James with his problem?

Why graphics important?• You can see, but you cannot touch and feel.

Displaying product in online shop is different from showing it in physical shop, where customer can touch and feel the product. It is good to show the product in many angles, so if the customer cannot touch the product, at least they can view it in different angle.

• Consumer expectation of the purchased product.Sometimes customer disappointed when they receive the product they bought online because their expectation on the product is different from what they see on the web. Showing clear images of the product, and bring more detail view of the product will help customer decide whether the product within their expectation or not.

James doesn’t have advanced picture editing software such as Adobe Photoshop or Corel Draw. What he have installed in his computer only Microsoft Office Picture Manager from Office 2003 Suite. So he decided to edit his picture with that software. At least with that software he can adjust the Brightness or Contrast of the picture or cropping the image.

Page 12 of 21

Picture 9. Microsoft Office Picture Manager

Adjusting brightness/contrastPicture 10. Left – right: before and after

Cropping images

Focus on the important part of the image.

Page 13 of 21

Picture 11. Left – right: before and after

Compress Picture

Compress picture for smaller file size and faster loading.

Picture 12. Left – right: before (253KB) and after (50KB)

Display Your Product as Video

Page 14 of 21

One day James browses the Internet to see other competitor’s website, he saw that other website display their products as videos.

James think if he can display his t-shirts using video, customer can see 360 degrees view of the product, he can also add voice to the video. It will make the product more alive.

Character from MAP Curriculum, www.mea-i.org

But to use video to display his products, James needs items below:- Video recorder / Camcorder- Increase the Web Hosting space, because videos took more space than images.

Currently he doesn’t have enough money to invest on those items. So what is the alternative solution for James problem?

James has a mobile phone with camera support for recording up to 176 x 144 pixels. He also heard that there is a video sharing website where users can upload, view and share video clip, YouTube.com.

Making Video with mobile phone camera and host it free in YouTube.com

How to:1. Product video clip taken using mobile phone camera

Page 15 of 21

Picture 13. Mobile phone camera

2. Sign up to YouTube.comhttp://www.youtube.com/signup

Picture 14. YouTube Sign Up Page

3. Upload your videoAfter you login to YouTube, click My Account menu on top of the screen, then look for Upload a Video button, click it to go to Video Upload page.

Page 16 of 21

Picture 15. Video Upload Page (Step 1 of 2)

Fill in the Title, Description, Category, Tags/Keyword of the video and optional information about your video, then click “Upload a video…” button to continue.

Picture 16. Video Upload Page (Step 2 of 2)

After uploading the video you can view it by clicking the “My Videos” button on that page.

Page 17 of 21

Picture 17. My Videos Page

4. Embed the video to osCommerce product page

To embed a YouTube video to osCommerce, you need to copy below HTML code to osCommerce product page.

What you need to do is change that link highlighted in red above with the link to your video in YouTube. If the link to your video is http://www.youtube.com/v/VuGB-Jbrbg , then you have to replace http://www.youtube.com/v/B_uyzhOLS-M with http://www.youtube.com/v/VuGB-Jbrbg.

After that, open the osCommerce product edit page, paste the HTML code to Product Description text box (Picture 18).

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/B_uyzhOLS-M"> </param> <embed src="http://www.youtube.com/v/B_uyzhOLS-M" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

Page 18 of 21

Picture 18. osCommerce Product Edit Page

Click Preview button then Update to save the page. The link will get the video from YouTube and display it in your product page.

Picture 19. osCommerce product page shows YouTube video

Page 19 of 21

Support/Help Desk

To server his customer better, James using Instant Messaging software to chat with his customers. He uses Yahoo Messenger (YM).

He put his ID on the website, so customer can chat with him via YM. If customer want to talk with him, the customer need to add James ID to his YM.

Character from MAP Curriculum, www.mea-i.org

But sometimes, customers found difficulties in knowing whether James online or not. James needs to put his YM status on his online shop.

Showing Yahoo Messenger status in osCommerce

How to:1. Go to http://messenger.yahoo.com/addpresence.php to get the Yahoo Presence

HTML code.

Picture 20. Yahoo Presence HTML code

Type in Your Yahoo! ID in the text box, and then press Enter. You will see below box contains the HTML code that need to be copied and pasted into your web

Page 20 of 21

page. Select all the HTML code in the box, then right click your mouse button, and select copy.

2. Now we will paste the code into osCommerce main page. Open the osCommerce admin page: www.JamesTshirt.com/admin/Click on Tools, Define Language, search and click index.php. It will open text editor for index.php file.

Picture 21. osCommerce Admin menu

Now you need to paste the HTML code to this page. First you have to search for this code:

define(‘TEXT_MAIN’ , ‘insert the code here’);

Then between the single quote is where you should paste the code. Click Save button, and preview the page.

Page 21 of 21

Picture 22. Insert HTML code to osCommerce main page

Picture 23. osCommerce main page with Yahoo Messenger status

Now you will see that Yahoo Messenger status shown in the main page. If you are online then the icon becomes yellow, if you are offline, the icon will turn to grey.

Conclusion

Establishing your own e-commerce website doesn’t need to be expensive. With US$25 for setup cost and US$310 for yearly cost, you can have your own e-commerce website. We also can use what are free from the Internet such as YouTube to display your product’s video, use Yahoo Messenger to give support/help desk to your customers online.