practical webprojects 19

100
jamweaver ASP advice Database secrets PHP explained Malce money today! AfebPR^ The complete, jargon-free guide to... 4woRfH£6ol PLUS- MM-" FREE CD BHyjaaa^ includes four FULL PROGRAMS mmxmmmrnrmf WORTH £605 ? original and best guide to Web creation software HAKE MONEY ROM YOUR SITE heap and easy ways to create the perfect online store et your business online with our no-nonsense guides se Dreamweaver and ASP to build the next Amazon! MAXIMISE YOUR >ROFITS ONLINE ) guaranteed ways to turn your online store to a lean, mean, money-making machine lo CD? Ask your newsagent for one now! HE NUMBER ONE WEB CREATIVITY TOOL HIGHBURY 9 771475 138000

Upload: ali-morrison

Post on 02-Jan-2016

163 views

Category:

Documents


1 download

DESCRIPTION

Practical WebProjects 19

TRANSCRIPT

Page 1: Practical WebProjects 19

jamweaver ▶ ASP advice ▶ Database secrets ▶ PHP explained ▶ Malce money today!

AfebPR The complete,jargon-free guide to...

4woRfH£6ol PLUS-MM-" FREE CDBHyjaaa^ includes four

FULL PROGRAMSmmxmmmrnrmf WORTH £605

? original and best guide to Web creation software

HAKE MONEYROM YOUR SITEheap and easy ways to create the perfect online storeet your business online with our no-nonsense guidesse Dreamweaver and ASP to build the next Amazon!

MAXIMISE YOUR>ROFITS ONLINE) guaranteed ways to turn your online storeto a lean, mean, money-making machine

lo CD? Ask your newsagent for one now!

HE NUMBER ONE WEB CREATIVITY TOOL HIGHBURY 9 771475 138000

Page 2: Practical WebProjects 19

H B E R S

HewlfltlPacKard. cm. Ep Lexmark m

F R E E U K D E L I V E R YM m k O B O O 9 1 7 4 0 7 3

U K ' s b e s t d e a l s f r o mEurope's IMo.1 on-line

supplier for Inkjet cartridgesw w w . 2 4 7 i n k . c o m

Page 3: Practical WebProjects 19

What our readers say aboutPractical Web Projects:

"Practical Web Projects is so useful, youhave a new fan!" Ka,eienkins

'"The magazine is great and as anewcomer to Web building I find itextremely helpfur'/aniamie/r

"Thank you for a very informativemagazine" Andrew Corbett

The Practical Web Projects promise

Comprehensive helpWhether you're an expert or a newbie, PWP isdedicated to brining you as much in-depthhelp on every aspect of Web design as we can.Each issue has a four-page helpdesk on thefeatured topic. You can contact the helpdesk byemailing [email protected]

Quality projectsEvery issue of PWP is packed with originalprojects that show you how to get the most outof each aspect of your software. All of the filescreated in our projeas are included on yourfree CD-ROM so that you can easily follow thetechniques covered.

Expert adviceEvery article in Practical Web Projects is writtenby a Web design expert. We go out of our wayto find specialists who can provide you withthe advice you read. This way you know thatthe articles we publish are never less than 100percent accurate.

How to contact Practical Web Projeas

General [email protected] U 0 2 2 9 9 9 0 0

CD helpcdhelp@>p3r3gonxo.uk0 1 2 0 2 2 0 0 2 5 9

Customer [email protected]

[email protected]

Advertising opportunitiesleylah @paragon, co. uk01202200223

[email protected] 8682

Practical Web Pro/ecfs Welcome

I . I WebProjedsWe comeoogle's founders Sergey Brin and Larry Page havenow joined the ranks of Bill Gates, Donald Trumpand the Sultan of Brunei, after recently being named

in the list of world billionaires by Forbes magazine.The duo's big news finally kills off any claims that it's

Impossible to make money from the Web, proving that bycombining a clever idea with a well-designed site and a steadybusiness strategy anyone can find their fortune online.

This issue of Practical Web Projects is devoted to helping youbecome the next dotcom success story Over the next 100 pagesyou'll discover how to build the perfect online store because wewill reveal the secrets behind making a profit from the Web.

We kick off our eCommerce odyssey on page 6, where you'llfind an introduction to Web business, which outlines everythingyou need to set up your first online store, emphasising howeasy it can be to get started. Then, once you've got to grips withthe basics, find out how to mastermind your eBusiness strategyby checking out the feature on page 12.

After swotting up on the theories and principles behindwinning eCommerce sites, it's time to build your own store. Ourexpert projects, which start on page 28, explain how to doeverything from creating a stylish looking front-end to addingproduct databases and shopping carts to your site. By thetime you've finished working through the projects you couldbe on the road to becoming the next plucky entrepreneur to jmake a billion from the Web.

lames Thornton, Deputy Editorjamest@ paragon.co.uk

ProjectsHighbury Entertainment Ltd, Paragon HouseSt Peter's Road, Bournemouth, Dorset BHl 2|STel: (0) 1202 299900Fax: +44 (0) 1202 299955Web site: www.pardgon.co.uk

C U S TO M E R S E RVi a SIf you have a query regarding a subscription or aback Issue, or would like to place an order, pleasecontact the subscription hotline on 0870 444 8682 oremail [email protected] For all other queries,including missing covermounts, please contact ourCustomer Services Department on 01202 200200,or email [email protected]

M A G A Z I N E T E A M

Managing Editor Paul NewmanDeputy Editor James ThorntonSub Editor Thomas WoodgateGroup Art Editor Steve GotobedSenior Designer Sarah Bellman

THANKS TO:

/ane Lee, Raul f naranda, Brian Maxx, Les Ferrington,Colin Hughes, Michael Velth, Adrian Lambert, |o Cole

COVER DISC SUPPORTIf you have any difficulty with your free CD, please referto the disc pages for contact information

COVER DISC PRODUarON

Digital Projects Manager lee GroombridgeMul t imed ia Ed i to r Mat t Budd

ADVERTISING

Advertising Manager Leylah Honeyborne01202 200223 [email protected] Sales Execut ive Gemma Bel l01202 200254 [email protected] Sates Executive Mark Rankine01202 209362 [email protected] Co-ordinator )o SpickCopy Controllers Lorraine Troughton, Lauren Deans

PRODUCTION & DISTRIBUTIONProduction Manager Dave OsborneBureau Manager Chris ReesScanning/Prepress Wesley NeilCirculation Manager Tim HarrisTel: +44 (0) 1202 200200Fax; +44 (0) 1202 200217

INTERNATIONAL LICENSINGPractical Web Projects is available for licensingoverseas. For details, please contact:International Manager Cathy BlackmanTel: +44 (0) 1202 200205Fax: + 44 (0) 1202 200217Email; [email protected]

DIRECTORSEdi tor ia l Di rector Damian But tProduction Director jane HawkinsCirculation & Marketing Director Kevin PetleyAdvertising Director Peter CleallArt Director Mark KendrickFinance Director Steven BoydManaging Director Mark Simpson

Printed by Garnett Dickinson,Eastwood Works, Fitzwilliam Road,Rotherham S651|U

Distributed by Seymour ltd,1st Floor, 86 Newman Street,London WIP 3LDTel 020 7396 8000

PLEASE READ OUR SMALL PRINTAll text and layout remains the copyright of HighburyEntertainment Ltd. Practical Web Projects cannot acceptresponsibility for any unsolicited material ortransparencies. Practical Web Projects is fullyindependent and its views are not those of any companymentioned herein. All copyrights and trademarks arerecognised and all images are used for the purpose ofcriticism and reviev^f only No part of this magazine maybe reproduced without the written permission of thepublisher. Praaical Web Projects can accept noresponsibility for inaccuracies or complaints arising fromadvertisements within the magazine.

Highbury Entertainment Limited is a wholly ownedsubsidiary of Highbury House Communications PLC.Registered in England. Registered Number 2483576.Registered Office: The Publishing House, 1-3 HighburyStation Road, Islington, London N1ISE.

P M

A B C9,-W9 luly-December 2003

(C 2004 HighburyEntertainment LtdPractical WebProjects. ISSN(1475-1380)

eCOMMERCE I PRACTICAL WEBPRO|ECTS 1 03

Page 4: Practical WebProjects 19

seriously easy web hosting

b r h o m e u s e■E

0870 333 9746W e b F u s l o nEntryPER MONTH

WebFusion Entry Package:• eOOMB Lightning-Fast UK Web Space• 7GB Data Transfer (Bandwidtli) per Month• MyServerWorld 10.0™ Control Panel• FREE and UNLIMITED 24/7/365 phone and E-mail support• Extensive On-line Help • Mailing Groups • MySQL• SSI • PHP4 • Site Access Package • 50 Sub-domains• Automatic Graphical Access Statistics • FTP Access• 3 0 0 P 0 P 3 E - M a i l A c c o u n t s • U n l i m i t e d A n n o u n c e m e n t L i s t s• Own CGI-BIN plus Pre-installed Scripts • MS Frontpage• Unlimited E-mail Addresses • Unlimited Autoresponders• Webmail • Spam filtering • Easy On-line Administration• S A M E H O U R S E T U P • 3 0 D AY M O N E Y B A C K G U A R A N T E E

fi W e b F u s i o nH o m e

PER MONTH

WebFusion Home Package;All of the above except:

(J2531500MB Lightning-Fast UK Web Space(222)10GB Data Transfer (Bandwidth) per Month• 5 0 0 P O P 3 E - M a i l A c c o u n t s• ASP, Miva and MYSQL Scripting Languages• Free use of Secure Server• Free MS FrontPage extensions• 1 5 0 S u b - d o m a i n s• 3 MySQL

State-of-the-Art Data CentreOur state-of-the-art data centre is located within our facility in

"With WebFusions' great new packages, there's aseriously easy hosting account to suit everyone."

P h i l i p p a F o r r e s t e rTV presenter and technology expert

The best control panel in the world!MyServerWorld™ 10.0 Control Panel• All Our Usual Features Improved!• New Web Site Statistics with Graphical Reports• Power fu l On- l i ne Ma i l C l i en t• Back Up your Web Site On-line• Manage MySQL Features On-line• Data Transfer Manager• We b S i t e L i n k C h e c k e r a n d H T M L Va l i d a t o r• Trace and Ping your Site• Automatic Script Execution• Many More New Features!

24 / 7 / 365 FREE Technical SupportAll WebFusion hosting packages come complete with

Nottingham. It houses our network of over 4000 servers. With 24/7/365 free telephone and e-mail technical support, plus anmultiple connections to the net, fire protection and backup extensive online help and information system. Unlike ourgenerators, we are in a position to offer you the reliability and competitors, we believe in providing the very best after salesstability you have been dreaming of! care and technical support.

e e K i B 7^ 1 ■ < t>

e - m a i l u s : o r d e r o n - l i n e : H o s t/ / B | | b * a i

[email protected] w w w . w e b f u s i o n . c o . u k

Page 5: Practical WebProjects 19

Practical Web Projects Contents

Coverprojects

Projects[P28I Create a slick store-front[P42] Add a product database(P48] Master Actinic Catalog 6IP58) Process card payments(P66I Build a PMP mailing list(P72) Get listed on Google

I M ( L D a w i n m n ce 9 i i s m e < $ s T v a r e e i i i

Expertise

(PI 7) If you want to hit the big time, you need to comeup with a rock-solid eBusiness plan. Hal Devlin explainshow to formulate a successful strategy for your site

^ VlfebPR^Contents06 What is eCommerce?Discover how the business world has been revolutionised by the Web and findout exactly what you need to set up your own online store

12 Build a winning eBusiness strategyMastermind the perfect strategy for your Net business by following our guide tohitting a winning idea, planning your infrastructure and marketing your site

24 SubscriptionsFind out how to save yourself £20 by subscribing to Practical Web Projects

27 ProjectsTransform your site into a money-making machine in a matter of hours with thehelp of our expert eCommerce projects

62 Tiie GalleryYou've heard the horror stories of dotcoms that bombed, but there are countlesssites that have struck gold online. We recount some of the greatest success stories

76 20 ways to make your eStore flyChris Barling of Actinic reveals the secrets to making a profit from your site

80 eCommerce FAQEase your eBusiness worries with our stress-busting tips and tricks

84 Book rev iewsSwot up on the latest eCommerce techniques with these helpful tomes

88 Back issuesFind out how you can get back copies of your favourite Web building magazine

98 Andy HouldsworthHaving created shopping carts for the UK's leading football and rugby clubs, theDigital Ink supremo gives us his view on what makes the perfect eStore

1 1 ^ —

• •

Expert advice.

e S TO R E F LY. . .

94 What's on the CDBolt your online business together with the help of themighty eCommerce applications on your free cover discFour full programs■ Actinic Catalog 25 (PC only)BER0L3Smallstore(PConly)■ ShopFactory Light v4 (PC only)■ Sawmill 5 (P C only)

D reamweave r MX 2004v ideo tu tor ia lsDiscover the art of building professional looking Webpages with this collection of hands-on Dreamweavervideo workshops from Ouixelvideo

, FULL PROGRAMS[worth £605

160 MINUTESOF DREAMWEiWERm O E O T U T O R I A L S

PlOSM

How did theydo that?IP20J Started in a London bedroom by an ex-joumalist,Cheapf1ights.co.Lik has grown to become one of Britain'sleading travel sites. We speak to the company's chiefexecutive to find out why it has taken off

eCOMMERCE I PRACTICAL WEB PROJECTS I 05

Page 6: Practical WebProjects 19

Feature What is eCommerce?

WHAT ISeCOMMERCE?THE WEB HAS REVOLUTIONISED THE WAY PEOPLE DO BUSINESS BUTHOW DO YOU GET STARTED ON THE ROAD TO BECOMING THE NEXTAMAZON? WE START BY EXPLAINING THE BASICS OF ECOMMERCE WITHA GUIDE TO WHAT YOU NEED TO BUILD YOUR FIRST ONLINE STORE

Imagine going to bed one night as just another pluckyentrepreneur with a half decent idea and waking upthe next day realising you're worth millions of pounds.

That's what happened in the late Nineties, when theterm 'eCommerce' became a label for the greatest get-rich-quick scheme in history.

Following the birth of the Web, the world of businesswas turned on its head and all previous trading rules wentflying out of the window. Chances are, if you had a brightidea for a business that involved the Web, an investorwould be willing to come along and throw buckets ofmoney at you no matter how shaky your business modelwas, just for you to set up shop on the Web. Billions ofpounds were spent on television advertising, direct mailand elaborate poster campaigns in an effort to bring aplanet of customers to these hot new electronic firms. Thestock market went bananas and companies too with theirvaluations soaring from one day to another.

While the founders of these Internet start-ups werebusy popping corks and slapping backs, their businesseswere struggling to rake in anywhere near the revenue thatwas being pumped into the site. At the height of thedotcom madness in 1998, Amazon.com was shelling out$339 on promotion for every customer that purchasedfrom its site. The trouble with this was that the averagesale on the site was just $39! This ethos was echoed byother new online ventures that believed they could wait afew years to earn any income and spend as much as they

liked on advertising in order to build customer confidencein their brand, this was never going to be the case and theeCommerce term looked to be a shaky one.

Getting StartedOperating under such an illogical business model speltbad news for the eCommerce industry Cue a multitude offailures, with countless firms being consigned to thedotcom graveyard for eternity including once-mightynames such as Boo.com, eToys and LetsBuylt.com.

However, as the hype surrounding the dotcom boomand bust' settles down, online businesses are nowrealising that it is possible to realistically make money onthe Web, and many of the well-publicised firms thatstruggled in the early days, such as Amazon andLastminute.com, are now turning in an operating profit. Bypaying close attention to a sound business model andfinding the right suppliers just as an offline business does,it's possible for anyone to make money on the Web.

Building an eCommerce store needn't be a thanklesstask because there are plenty of tools and resourcesavailable to help get you started. The way you approachyour first online store will largely depend on your budgetand your expertise. Here we'll discuss some of thereasons why it makes sense to set up shop online before*examining the different methods for getting your businessonline to help you decide how best to approach your firstforay into the world of Web trading. ^

06 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 7: Practical WebProjects 19
Page 8: Practical WebProjects 19

Feature What is eCommerce?

! Hn.D#U ' Ji

eCommerce brings customers closer (a thebusir ess cycle, and companies such as Dellallow punters to track orders online

Businesses such as Play.com have beenable to sell a mammoth range of produasfor minimal outlay thanks to the Web

Why choose eCommerce?In the traditional sense of the word the term 'commerce'refers to the exchange of goods and services for money, andrelates to the coming together of buyers and sellers. Sincethe invention of the Web, businesses now have a new wayof meeting with prospective buyers via the emergence of'eCommerce' - the name given to the act of tradingelectronically over the Internet.

It's not difficult to see why the early pioneers ofeCommerce got so carried away with themselves, becausethe Web offers a number of clear advantages over the oldschool way of doing business. Perhaps the biggest draw ofthe virtual marketplace is the fact that overheads are muchlower due to the fact that you escape the need to pay rent. Ifan eCommerce site is run properly you also save on the costof taking orders up front and customer service costs,because everything is automated and you don't have a wagebill eating into your revenue.

Another great reason for switching to eCommerce is thefact that customers are more likely to place multiple ordersthan they are offline. For instance, Amazon(vwvw.amazon.cQ.uk) offers a facility whereby you get to see'what other people who ordered this book also purchased'when you read a description of a book, encouraging thecustomer to make more purchases per transaction. Doingbusiness through eCommerce also brings the customer closerto your business cycle, allowing them to find out the statusof their order at any time. For example, when Dell(www.dell.com) tracks a computer through themanufacturing and shipping process, customers are able tocall into the site and monitor the progress of their orderinstantly online.

Building your business on the Web gives you the freedomto offer large product catalogues far more easily than youcan offline. The likes of Amazon, Play.com and Dabs.com are

able to offer millions of products from one place, a feat thatwould require a huge amount of capital if they were to selleverything from a shop, or put together a paper-basedcatalogue of these products.

Store warsFor all the advantages of an eCommerce store, there arecertain areas where the electronic medium can't live up to agood old-fashioned high street store. One of the main drawsfor customers buying from the high street is the fact that theycan go into a store, have a close look at the products onoffer, before making a decision and taking delivery of theitem instantly, a quality which no amount of technology willbe able to replicate. The Web also struggles to compete interms of the social and entertainment benefits associatedwith shopping on the high street or a shopping centre. It'sdifficult for an online store to re-create the therapeutic feelingthat a customer experiences when ambling around the shopson a Saturday afternoon mixing with other shoppers anddealing face-to-face with retailers.

Having said this, there are a number of ways in which youcan improve customer relations online. You can build arapport with your punters without a great deal of expenseusing a series of automated tools. For instance, you can sendan email to your customers confirming that you've receivedtheir order, again when you've shipped the product, andwhen you want to let them know of any special offers.

Get tooled uplust as you wouldn't buy from a butcher who sells meat froma wall outside his house, a customer is unlikely to part withtheir cash unless you have a professional looking onlinestorefront. As well as looking good, your eCommerce sitemust contain a number of basic elements to facilitate thesale of goods, including a product catalogue (or a showcaseof your impressive services), along with a shopping cart that

The changing face of Aniazon.comAmazon is probably the mostrecognisable of all the onlinestores, and despite someturbulent times, its popularityhas grown to an unprecedentedlevel. Amazon stands today asone of the most successfulonline businesses of all time.Here, we chart the history of themoney-spinning Web-basedsuperstore to highlight just howpowerful eCommerce can bewhen i t i s execu ted i n an

e f f e c t i v e m a n n e r .

1995 1997 1998 1999Amazon.com is founded by CEO)eff Bezos, who operates out of

his garage in a suburb of SeattJe,wrapping orders and delivering

them to the post office in thefamily car

Amazon becomes the first onl ine

retailer to reach the one million

customer rrvark and then decides

to open its seond distributioncentre in Delaware (above)

The company spreads its wingsglobally with the launch of Britishand German versions of Amazon.

It also adds a music store to

complement its bulging bookstore

Amazon celebrates i ts 10-mi l l iontfi

customer in just four years oftrading. l?ie company also

launches an online auction site to

rival eBay

08 I PRACTICAL WEB PROjECTS I eCOMMERCE

Page 9: Practical WebProjects 19

What is eCommerce? Feature

The Dreamweaver for E-Commerce' section of the Macromedia sitewww,macromedia.cam' is crammed with advice on building gorgeous stores

We'll now run through some of the more popular andeffective solutions you can employ for creating your firsto n l i n e s t o r e .

Weaving an online storeIf you're already an experienced Web designer then you maywish to bolt together your eCommerce site using a traditionalHTML text editor, or with a WYSIWYG Web page editor. Usinga powerful editor such as Dreamweaver gives you the abilityto build a great looking shopfront, and affords you a greaterdegree of control over the layout of your pages than anyother software solution can offer.

The fact that the program doesn't contain any out-of-the-box eCommerce features of its own, means that puttingtogether an online store in Dreamweaver is a lot trickier thanusing a tailor-made eCommerce package. However, there area number of extensions available that make it easy to addproduct-ordering facilities to your pages through the program.One of the most popular is WebAssist's PayPal eCommerceextension, which is available free from www.webassist.com.This allows you to add a 'Checkout' button to your site,which facilitates payment of products through PayPal'selectronic payment gateway (www.paypal.com).

One of the most useful resources for anyone looking tobuild an online store with Dreamweaver is the program's ownproduct resources site, which can be accessed atwvvw.macromedia.com/software/dreamweaver. There you'llfind a collection of useful extensions, along with informationon adding credit card processing to your site, integratingshopping carts and billing services. ^

Top eCommercesites in Europe

allows users to place an order and finally a mechanism willbe needed so that you're able to collect the necessarypayments from your customers.

One of the keys to creating a successful eCommerce site isto pay close attention to its usability and make it as easy tonavigate as possible. After all, if a customer cannot find aproduct they cannot buy the product, lakob Nielsen definesthe success of an eCommerce site by the formula: 'Uniquevisitors X Conversion rate = sales'.

While the early dotcoms concentrated largely onadvertising and promotion to drive up the number of uniquevisitors, they paid little attention to the second part of theequation, and it's becoming more and more apparent thatthe sites that do well are those that strike a balance betweensuperb marketing strategies and a solid, usable site whichmakes it easy for customers to find what they're looking for.

So the question is how do you go about creating anattractive, usable face for your online business? There arecertainly a number of different avenues you can explorehowever their suitability depends on your level of expertise,budget and time-constraints as well as your business needs.

NAME OF UNIQUE ACTIVEW E B S I T E A U D I E N C E R E A C H

( M i m O N S ) { % )

eBay 26.5 2725

A m a z o n 14.5 14.9178

K e l k o o 7 6 5 7

Apple 3.30 3.40

D e t l 3.03 3.12

Tch ibo .de 2 . 5 8 2.65

H e w l e n P a c k a r d 2.45 2.53

OTTO 2.40 2.47

Quelle 2.12 2.19

N e c k e m i a n n 2.07 2.13

Source: Nielsen/NetRatings(www.nielsen-netratings.com}

I

"As the hype surrounding the 'hoom and busf settlesdown, online businesses are now realising that it ispossible to realistically make money on the Web"

2 0 0 0The company announces

profitability in the US, based onbook sales, and launches a new

health and beauty store

- A . . i S .

2 0 0 1Sales are up more than 40

percent, fuelled by growth inelectronics, kitchenware and tools.The firm opens the Amazon.comTravel Store for booking services

and travel status information

a n M M A G t i u K

2 0 0 2Amazon expands by launching an

apparel and accessories store.Many Potter and The Philosopher's

Stone becomes the biggest pre-

selling title ever, with more than36,000 advanced orders placed

The firm announces 28 percentsales growth fuelled by lower

prices and free delivery. It enjoysits busiest ever Christmas setting a

single-day record of more than 2.1mi l l ion un i ts

Page 10: Practical WebProjects 19

Futu re What i s eCommerce?

eCommercechecklist

What you'll need to gets ta r t ed i n eCommerce

^ A product or a service^ A Web site to display your

products or services

^ Ability to accept money (viacheque, credit and debit cards orpayment gateways such asPayPal or WorldPay)

^ A way to provide customerservice (via email, online forms,FAOs etc.)

^ A fulfilment facility to deliverproducts to customers, throughoutsourced distribution, or filedownload in the case of

electronic goods

Sites such as Connect internet Solutions offermanaged Commerce services if you don'tfancy building the eStore yourself

Using an eCommerce appIf you don't fancy getting your hands dirty with Dreamweaverto build your business site, you could turn to a tailor-madeeCommerce building application to do the job for you. Thepurpose of these programs is to help you build both thestorefront and the product catalogue within one graphicaluser interface.

One of the most popular stalwarts of all the eCommerceproducts out there is Actinic Catalog, which is now in its sixthincarnation. The program's success has grown out of the easeat which you can put together profitable sites, allowing youto choose from a range of basic, yet stylish templates beforecreating a detailed catalogue of products to insert into yourpages and adding shopping cart facilities. You can add up to10,000 products to your catalogue, complete with images andproduct descriptions for each, and the 'tree' view offers youthe ability to add unlimited sections and sub-sectionsthrough a drag-and-drop interface. Catalog contains a wealthof features to help your business run more smoothly,including offline stock monitoring and reporting, customerorder status notification and support for up-selling usingproduct bundling.

ShopFactory is another old-stager of the eCommercemarket, and allows you to create both a front-end and aproduct database, or even import existing product databasesto save time. Besides the standard shopping card andpayment processing tools, the program boasts a number ofextra special features, such as the ability to remembercustomer details for automatic logins, convert prices into anycurrency and integrate 3D products, allowing customers totake a tour of your goods by viewing them from all sides.

The beauty of an all-in-one eCommerce application is thatit takes all the hassle out of managing the back-end of yourWeb business. Products such as EROL 3.0 Business Editioncontain features for automating common back office storemanagement tasks such as bulk mailouts and multiplereport generation.

Five top eCommerce apps

Alternative solutionsIf your budget doesn't stretch to investing in an off-the-shelfeCommerce app, then fear not, because the joys of opensource mean you can pick up a store-builder without havingto pay a penny. osCommerce is an open source utility thatallows you to set up, run and maintain an online storethrough the powerful PHP and MySQL scripting languages.For more details, or to download the product visitw w w . o s c o m m e r c e . c o m .

While there are plenty of all-in-one eCommerce solutionsavailable to Windows users, anyone who's ever tried to buildan online store with a Mac will tell you that resources are alittle thin on the ground to say the least. If you look hardenough however, you'll find a handful of applications that'llturn your Mac into a money making machine. This includesthe powerful 4D Business Kit 2.1, which is designed for rapidstore development and features a catalogue, shopping cart,tax calculations, shipping and order tracking fadlities-.AnQtherprogram worth trying is Ch-Ching, a Mac-based enterpriseclass eCommerce solution which lets you build a Web-basedstore without a jot of hand-coding knowledge.

If you're building a particularly elaborate online store, or ifyou want to integrate a shopping cart with an existing site,then you may find it difficult to create something within theconfines of an off-the-shelf eCommerce application. If this isthe case, you may be better off with a bespoke solutionfrom a company such as Connect Internet Services(vwww.connect.org.uk). Smart Decision(www.ecommerce.uk.com), or Arpey Internet(wvvw.arpeyinternet.co.uk), where you pay a company tocreate an eBusiness application to fit in with your company

Once you've chosen a platform you will need to focus ondesigning a store that is pleasing on the eye and can.beused by your customers, while trying to become anotherWeb success story Thankfully, PlWis here to reveal hget your business off the ground through the features andpractical tutorials stuffed into this issue. ■

Mac users needn't feel left out of theeCommerce loop tfwnks to robustappHcatioris such as Ch-Ching

NAME: Actinic Catalog 6PRICE: £445.32

URL: vwvw.ac t in ic .co .uk

FEATURES: Configure pop-upwindows for your pop-ups,calculate discounts based on

customer activity, option toupgrade the software tosupport digital dovwiload ofelectronic goods

NAME: EROL 3.0 Business

Edi t ion

PRKE: £45707

URL: www.erD lon t ine .co .uk

FEATURES: Import productdata from spreadsheets,create bulk mailouts,distribute productsinternationally, plus it has abuilt- in HTML editor

NAME: ShopFactory Pro 5PRI t t : £245.57URL: Viftvw.shopfiactory.comFEATURK: Add an 'email a

friend' feature to yourptodua catalogue, automatictax calculations, searchengine features, supportsmore than 50 different real

time payment authorisations

NAME: 4D Business Kit 2.1

PRICE: £440.62

U R L : v w w. 4 d u k . c o m

FIATURES: Browser -based

real-time order checking formerchant and customer,generate activity logs foreach visitor, remoteadministrat ion via a browser

for items, taxes and orders

NAME: NetObjects FusionPRICE: £139.95

URL: www.netobjects.co.ukFEATURES: WYSIWYG-styleWeb page editor, support forinternational paymentprocessing, real-time creditcard processing capabilities,comprehensive tax andshipping options

10 I PRACTICAL WEB PROJECTS I eCOMMERCE

Page 11: Practical WebProjects 19

Windows 2003ASP hosting

Host your site on the latest Windows 2003 Servers withfull support for ASB Perl and PHP scripting.

Home Pro account

You can get going right now for aslittle as £8.99 per month plus VATThe Home Pro account includes:W e b s i t e•IGBwebspace•50 sub domains• i n P a c c o u n t•Matrix Stats•ODBC support•SiteBuilder-Spages•Bandwidth monitor

Scripting•CGI, Peri, PHP•ASP

E m a i l• 300 P0P3 accounts

•Vinis scanning•SMSaler ts•Web mail

30 day money back guarantee

t g Mndows Servera 2 0 0 3

Plus support forMS SQL and MySQl databases, MS FrontPageExtensions, SSL, media streaming, URL security,spam filtering, dialup internet access,advanced SMS alerts and many more features....

Full unrestricted access to the.NET Framewori( version 1.1

Xtreme Support24x7,365phone, email andonline support

Best value domain namesfrom wwwMkreg.com

World cfasssupport thatnever closesEvery Fasthosts customer enjoys full access toXtreme Support - a service that's totally unique inthe UK web hosting marketplace.

This fast and responsive service has been developedw/ith your help and valuable feedback.And we believe it's the best in the industry.

Xtreme Support means that you benefit fromunsurpassed customer service, faster turnaround fortechnical problems and an unparalleled level ofhelp and advice.Xtreme Support includes:*24x7,365 telephone, email & online support• Xtreme Support website - with knowledge base, FAQs and more• Troubleticketsystemforfastertechnicalresponse• Regular email updates about exciting new features

Your peace of mind is our priority

'The Home Pro account is theideal solution if you want todevelop a truly professionalwebsite. It has everythingyou need, including ASPscripting."

t S c n s o l tC E R T I F I E D

> Website and scriptingYour website is hosted on the latest

Windows 2003 servers with 1GB of

webspace, and full support for ASP, Perl,PHP,CGI.

Mii tr ix Web StatsFull, real time information about yoursite's visitors is provided by Matrix Stats -our leading web based traffic reportingsoftware.

> EmailYour account includes 300 emailaddresses, which can be full P0P3 mailaccounts or forwarders. We've alsoincluded web mail, so you can read yourmail on the move, as well as virusscanning, spam filtering and even SMSemail alerts.

> DatabasesSupports ODBC and, optionally, MySQLand MS SQL, hosted on our powerfuldatabase servers.

> ControlPanelWith our award winning online controlpanel you can control everything from theweb - set up domains, email, databases,install FrontPage Extensions and more!

The power behind web hosting• Starter accountfrom £1.99• Home account from £4.99• Business accounts from £14.99• Host Unlimited Domains from £50• Dedicated server solutions from £89

F o r i n s t a n t c i c fi / y o a n d s e t u p , c a l l

or to launch your service in minutes, visit www.fasthosts.co.uk

f € M S t h € > S t S

w w w . f € M s t h o s t s ^ c < » . i M k :

Page 12: Practical WebProjects 19

ILLUSTRATION: THE BOY FITZ HAMMOND

9UILD a winninceBusiness STRarecy

e v e R y T H i n c y o u n e e o t o K n o w a e o u r c e r n n G a G R e a rSTaRT m onune Business is right HCRe. urn. oevunl a K e s y o u F R o m i n m a L l o e a s t o u a n D u n c p a y m e n Ts

at the beginning of the Century the mainstreammedia crowed over the bursting of the dotcombubble. The business world went from

evangelising the wonders of the Web to wonderingwhere all the money had gone. Casualties of the collapselittered Wall Street and the so-called successes weren'tactually making any profit at all.

A few years down the line and things are beginning to turnaround with record turnover and markets now emerging.There's never been a better time to conduct business on theWeb, with the infrastructure and methods for making a profitwell established. The days of virtual capital and champagnelaunches for profitless portals are over. In their place aresupport structures, seasoned marketing strategies and clearrevenue streams. Welcome to the renaissance of eBusiness.

inspiRCD iDeasIn the dark days of the pre-profit Web, coming up with a coolidea was everything. Now you need to be more pragmatic.The bottom line is that the plans that work are the ones that

have a source of profit at their centre. Profits can be made inone of three ways. You can sell a product or service - but tomake that work It must be something that is attractive foronline users. The product may be easier to buy online, suchas books or CDs that can be indexed and searched. Playcomand Amazon are great examples of services that have madebuying CDs, DVDs and books much easier - extending theirreach to include items that are difficult to get hold of

The second way to make money is to charge a subscriptionfee for content. This model was pioneered by the online sexindustry, leveraging the privacy fanor of online access to theiradvantage. The same unique selling point was alsosuccessfully applied to online dating sites. Now subscriptioncharges are starting to be used on sites that provideprivileged access to specialist information. US newspapers arecharging for archive search facilities, recruitment sites andhouse hunting services can demand access fees and so on.

Finally there's still some money to be made throughadvertising. This is a diverse market - and unless you'realready part of it you're more likely to make a profit through

12 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 13: Practical WebProjects 19

5 iDeas THar CHanceD thg weeFRIENDS REUNITEDw w w. f r i e n d s r e u n i t e d . c o . u k

A M A Z O Nw w w . a m a z o n . c o m

HOTrAAILw w w . h o t m a i l . c o m

Curious about what had happened to herold school friends, lulie Pankhurstprompted her husband Stephen to set upFriends Reunited. Five years down the lineit now has over 10 mill ion members

Though others had tried and failed ateCommerce before, Amazon's strength wasits simplicity. It has stayed at the lop byadding innovative features withoutcompromising its classic interface

Lastminute.com wasn't the best travel site

on the Web when they started - but itsmanagement team knew how to makethe most of the media opportunitiesafforded to ^em during the dotcom boom

People thought that huge, complex Webportals would be the way we accessed theWeb. Then Google came along with asingle page that had nothing more than asimple logo and a search box on it

Microsoft was savvy enough to realise thathaving a Web-based email address wouldcatch on big style. It bought out thefledgling Hotmail company in 1998 andnow it's the cornerstone of MSN

an agency rather than set up on your own. Online advertisingtakes many forms, from banner ads, sponsorship and pop-ups through to merchandising. If your site is popular due to itscontent alone, but is not the kind of specialist business thatcould charge subscription, then advertising may be yourprimary revenue stream. There are fewer and fewer onlinebusinesses operating in this way though.

Know youR enemyOnce you have an idea in mind make a thorough survey ofthe competition. Start by making a list of the most prominentsites that provide similar services and systematically visit eachone, making a note of their relative strengths andweaknesses. You can compare them with your own in aformal way by performing a SWOT analysis - a methodwhere you categorise and note down your own strengths,weaknesses, opportunities and threats. Your competitionclearly falls into the 'threats' category - but by looking at andusing their sites you can identify specific strengths and try toformulate ways to counteract them. If there's a lot of

competition in the area you've chosen, you should try toidentify how you can provide something different in thatmarket. Perhaps you can aim your product at a neglectedsegment of customers or find ways to improve on theprovision that's already there. Take Google as your inspiration.When this search engine appeared on the scene there werealready several well-established names in the market,including HotBot and Altavista. Google's search engine wasn'tany better than those competitors to begin with - but it had aunique selling point: simplicity of use that its competitorslacked. Don't be afraid to 'borrow' good ideas from successfulenterprises. As long as your venture can retain its own uniquecharacter there's no point in reinventing the wheel.

inFRaSTRUCTUReYour idea will need support from a robust infrastructure - thetechnology and services that enables you to take yourbusiness online. You'll need reliable Internet access, hostingfor your site that supports dynamic data and a name to takey o u r p r o d u c t t o t h e t o p . ^

AltaVista's recent redesign has stripped thesite's splash page down to a search box, logoand a simple set of links - just like Google,the young upstart that took its place at thetop of the search engine pile

eCOMMERCE I PRACTICAL WEB PROIEaS 113

Page 14: Practical WebProjects 19

Feature Build an eBusiness strategy

T O P SHOSTinGF e a r u R e sWhat to look for when

choosing a Web host:

Domain name regisuation:If you use a separate domain

registrar, you could end uppaying extra for redirection orname server management - so

look for deals where domain

registration is included.

^ Web ce: The more initial Webspace induded in the package,the better. Business hostingdeals should be bundled with atleast 1G6 of space.

^ Mail boxes: Many packagesboast 'unlimited' mail addresses

- but it can mean that you only' get one actual mail box that can

be used with any name plus

your domain name. Make surethat get as many POP emailboxes as your business needs.

||| Communication: Dynamicdatabases are no longer 'extras'in business. Your Web host

should offer a package thatallows you to communicate witfian SOL server using PHP or ASP

yU Service level agreement:A good Web host will protect itsinvestment by guaranteeing acertain level of service. Don't

wait until your site has gonedown to find out if yours is oneof them.

www.ispreview.org is the place to visit if youwant to get the low-down on ISPs. Check theforums in particular to see if your chosenprovider is generating any complaints

; . ' s matchmaker - . .J by the time you meet, you know.

p r e v i e wmember prohles-

S ign up— f i w t r i a t —

• S««rch And pr*vi«« • s«nplir>9 ofptofUM snd

• S M h o * - o i i r p r o f i t M h » l p y o u f t n d ar * t « t i on th ip .

• S t j n ( 0 S M i . O O f f s n w » .

• Po« t * f rM p roN*• N o C K t d n o t t n d• 8Mrch « l p roWa t• FnM pnv»ti m4))boii• • n v M f r o m -

RapIV (br Pr**

f o f ( T i e m t i e f s -

A l r * » d ( h <

s u b s c r i b e

I ' X I ■ E n

- f o f u n l i m i t e d a c c e s s -F K i « J . . , » n d t > # f c > u o d O u r p r o f t e * I t•«sy. 100% sattcfaction 9uar«ritatd - or your mon«yback. Prc^ir^m d«tail«

Online personals are one of the Web's big success stories - and now otherenterprises are adapting the dating site model to other applications

Choosing an Internet Service Provider or 'ISP' for yourbusiness is slightly different to selecting one for your home.To begin with you can forget about the bewildering array ofdifferent connection deals available to standard modem users- you need broadband. This means making a choicebetween the two most prevalent methods available, ADSLand Cable. You can get ADSL on any BT line and it's offered bymost ISPs. Cable broadband is only an attractive proposition ifa cable company already provides your telephone service.You'll find that both options offer similar features and arepriced in the same range.

The standard broadband speed is currently 512 kilobits persecond, which translates in real terms to download speeds ofaround 45-56 kilobytes per second. For business users withhigher demands, there are 1Mbps and 2 Mbps servicesavailable. Don't be fooled by cheap products that claim to bebroadband but offer lower bandwidth rates.

Broadband prices have dropped considerably since theservices were introduced with prices now averaging around£25 a month. It's now common to find deals where a freeADSL modem and setup are included in the initial cost. Forbusiness a primary consideration should be reliability though- so it's best to go for established names like BT

(www.btbroadband.com) or Pipex (wwwjttreme.pipex.net)rather than the cheapest offers. You can find rated listings forISPs that provide ADSL services at wvvw.adslguide.org

cl HOST OF OPTIOnSThere may be some overlap between choosing an ISP andchoosing a host for your Web company - though generallyspeaking it's best to consider these separately Simply put, ahost provides you with Web space to store your site. Theymay offer other services, from essentials such as domainname registration, dynamic scripting capabilities, mail serversand technical support to extras such as ready-to-use scriptsand site templates.

There are many different types of hosting deal availableand ultimately it will be up to you to make a choice based onthe nature of your site. Whatever you decide, there are twothings you'll need to consider upfront in all cases: Web spaceand bandwidth. Most services charge a flat rate for a fixedamount of space, and then charge you per megabyte (or amultiple thereof) for additional space. £50 a month for one-gigabyte of Web space may seem like a bargain, but that's notgoing to be any good unless you can fill it. The circumstanceswhere you might need substantially more Web space arebecoming much more common though. Many dynamic Websites, online shopping sites or Web directories for example.

grow because customers use them. When ISPs talk aboutbandwidth, they mean the download speeds provided bytheir service. The bandwidth levels that Web hostingcompanies publicise are a measure of how much users candownload from your server in a fixed period. If your sitebecomes a runaway success your host may charge you forthe extra bandwidth you use, so make sure you ask themabout transfer bandwidth limitations before you si%tv on thedotted line.

D w a m i c o a r aStatic Web sites are officially old news. To compete in thecurrent market you need a dynamic site that draws content infrom a database, allowing you to keep your site up-to-date,collect customer data, manage stock and store productinformation. It's an important consideration when choosing ahost because support for database services is essential.

Most database-powered sites are created using acombination of a database with a scripting language. The twomost popular and widely-offered languages are PHP (PHPHypertext Preprocessor), an open source scripting protocol andASP (Active Server Pages), a language invented by and widelyused on Microsoft platforms. ASP can be used with a varietyof database servers, from open source products like MySQL toMicrosoft's own Access database format and SQL Server PHPis commonly partnered with MySQL and is commonly thoughtof as the most cost-effective choice.

There are also standalone database server products thatassist you in the creation of database-powered pages too -like 4th Dimension (wvvw.4duk.com). In order to deploy asolution like this you will need a dedicated hosting packagethat allows you to install and configure your own server

P L A Y. C O M QMyAccaunl g

Home, Top IOO_ l

3[ DVD: Ne Reieases

B o d B o y s I tI n s t o c k .U s u a l l y d i s p a t c h e d w i t h i n 2 4 h o u r s .o u r p r i ( » : £ 1 3 . 9 9 O e l i w a r o dR R P ; Yo u s a v e ; 4 9 . 0 0 < 3 » ^ )

Shopping Boskrt KEIYour basket i« ampty.

a sh i ne t o Ma rcus ' s i s t e r i i

Intolerable Cruelty (5.1/DTS)• I n s t o d c ,v.orm,- Usually dispatched within 2+ hours,

o u r p r i c e : £ 1 3 . 9 9 D e l i v e r e dR R P ; s a v e ; i 6 . o o ( s o * . )

V I a r m , - i .

Play.com provides DVDs and CDs at low prices, makes them easy to M and cansource rarities from overseas that are hard to find In the shops

The most widely implemented database solution on the Web, MySOL(vmw.mysq.comi is open source too, running on Windows, Linux and MacOS X

14 I PRACTICAL WEB PROIECTS I cCOMMERCE

Page 15: Practical WebProjects 19

Bui d an eBusiness strategy Feature

HOW TO maRKer»ouR eBusinessWe ask expert marketer,Anthony Mayfield of MidnightCommunications for some tipson promoting your business

you're on a budget, you caneither do all of your marketing

■ yourself or work witfi a PR■ 'SP# freelancer or a one-man bandft • PR company, and both■ * ■! approaches can bring excellent

^ results. Planning your strategy,deciding what you're going todo and how you'll use theresources you have in advance

is key to your success, without a plan you're kiddingyourself that you're really conducting an effective PRcampaign, and the most important part of your plan isyour story.

Your PR 'story' is literally a story about yourcompany, something you can use to get publications,broadcasters or clients interested in your services. Itmay be the story of your launch, a special event or theacquisition of a new client.

Your story and the way you tell it needs to be justas well-crafted, and everyone in your firm needs toknow exactly what it is."

You don't have to go for a UK hosting plan. You might find a better deal in theU.5A through www.hostreview.com although UK consumer laws won't apply

Domam name D i temmaChoosing a domain name for your site shouldn't be too hard.Your aim is a scenario where anyone who knows yourcompany name can guess your domain name, which meansusing the format 'yourcompany.com'. If the name's notavailable and you're still at the start-up stage, then it may beworth rethinking your company name. You should think aboutregistering multiple names too - buying the '.co.uk' version ofyour name as well as the '.com'. Domain names are arelatively cheap investment, costing in real terms as little as a

1 * ^Nominet looks after '.uk' domain names. Visit their site (www.nicuk) to search foravailabie domain names and to checi< their member iist for domain reseiieis

couple of pounds a year for a '.co.uk' or £10 for '.com' names.Most Web hosting services provide you with domainregistration options and allow you to perform a search on allthe domain name possibilities available for your chosencompany. Supanames do a great value package for start-upswhere you can buy 35Mb of storage with PHP and MySQLcapabilities plus a free domain name for £13.99 a year.

You'll encounter all the same legal issues setting up inebusiness as you would setting up any new enterprise - butthere are some additional considerations. If you're sellinggoods over the Internet you'll be covered by distance sellingregulations as well as those in place to protect all retailtransactions. You can read up on those at www.oft.gov.uk inthe 'Business information' section. Check out the 'Running aBusiness' section as well while you're there.

If you're providing content then you'll need to look intoways of protecting your investment, especially becauseelectronic content is so easy to redistribute. Since you are thecreator of a piece of work you already own its copyright underUK law - all that's left for you to do is assert your rights on

"THe ReaL HaiH> work oeGins wuen youSTART PROmOTHIG WUR BUSRieSS TO THCWORLD Because THeRe aRe nmLuons of weesrres out THeRe vymc for aTTenTion"

your pages. The Creative Commons scheme provides you withan easy way of doing this, using an online form that helpsyou generate your own Creative Commons licenses. Go towww.creativecommons.org for more information.

m a R K e T i n G a n o P R o m o r i o nThe real hard work begins when you start promoting yournew business to the world because there are millions of Websites out there vying for the attention of users. You've got ahead start as a commercial enterprise aimed at a specificmarket - but you've still got to get that name out there. Thatmeans publicising your Web address in any way you can.Start by putting your URL in your email signature and in thesign-off you use when you participate in Internet forums.

It's the little things that count. Have some business cardsmade with your Web address on them, print it onto all youroffice stationary or have a batch of pens made up with yourURL on the side. If your business requires it you could evengo as far as buying a franking machine like those supplied by

^COMMERCE I PRACTICAL WEB PROIECTS I IS

Page 16: Practical WebProjects 19

Feature Build an eBusiness strategy

Ovenure.com helps you to get noticed by enabling you to buy keywordcombinations with their affiliated search sites When those keywords are entered,your site comes up

www.pitneybowes.co.uk where you are able to stamp yourURL on every envelope you send out - and save you moneyon postage costs too.

The nature of the Web Is that users should be able to trackyou down though, and should be able to find your business

"one suRe wa» of maKinG youR siremoRe aTTRacTive is to Give peoPLe meI l l u s i o n Tu a T Tu e y a p e G e i r m Gs o m e T H i n G f o r n o m i n G "

because it fits their needs. To make sure that you're the sitethey find when they go looking, you'll need to be listed indirectories and search engines.

UPPeR Rar iKsGetting listed is only half the battle though. You'll need to getyour site near the top of the list - ideally within the first pageof hits for most search engines. Unfortunately the days havegone when you could bolster your position in the searchengine rankings with a few judiciously placed keywords. Formost modern engines, keywords are either ignored or form avery small part of the ranking process.

Google, a search engine so popular that its name is now averb, uses a secret recipe of rules to rank pages in itsdatabase. One of those rules looks at the number of linksback to your site. The more there are, the higher your siteappears in its results. So, one of the key ways you can get

your site prominently listed on Google is to get other sites tolink back to you - and there are lots of ways to do this. Startby getting clients, suppliers, friends and partners to link backto you from their Web pages. Sign up to any relevant freeWeb directory listings you can find because links from themcount just like links from any other page. If you have aproduct that can be reviewed, try to track down Web sites thatwill take a look at it. The same advice goes for local andregional newspapers, because most of them will have somekind of Web presence.

More formally there are link and banner exchangeprograms you can sign up to that will display your advert orlink on other sites in exchange for space on yours. As well asbeing good PR tips on their own, all these extra linksscattered around the Web should help you to enhance yoursearch engine ranking.

pay TO PLayThough all these tips may help bolster your search engineposition the only guaranteed way to do it is to put yourmoney where your mark-up is. Google, HotBot and otherengines allow you to sponsor combinations of keywords.Alternatively, there are search engine placement specialistslike Overture, owned by Yahoo, who will do the same thingfor you across their stable of affiliates. When someone enters

BReaKinG THe lssn?Make sure you don't fall fo.ul ofthe law by keeping theseimportant consumerregulations in mind■ The Consumer Protection (Distance Selling)

Regulation 2000 states that you must give clearinformation to consumers accurately describing thegoods or service on offer and provide details ofdelivery arrangements - including dates.

■ The same act says that consumers have the rightto cancel a service or delivery if it's not completedby the time you say it will be. They can alsochange their mind about a product or service up toseven days after you've provided it.

■ The Unfair Terms in Consumer ContractsRegulations (1999) require that the Terms andConditions you set out for the sale of any goods orservices must be in 'plain and intelligible'language - no hiding behind legal jargon.

■ It's also officially unfair to ask consumers torelinquish their statutory rights in a contract - bytaking away their right to cancel a contract orreturn your goods, for example.

■ The UK has some of the strictest laws regulatingI pornographic material in Europe. As well as the

Obscene Publications Act of 1964, porn sites canI be prosecuted under sections of the Criminal; Justice Act of 1994 and the Electronic Commercet Regulations of 2002.I .

16 I PRACTICAL WEB PRO|ECTS I eCOMMERCE

Page 17: Practical WebProjects 19

GUGRRILLam a R K e r i n GAlternative ways to get yourmessage to the massesGuerilla marketing is any form of promotion thatuses none-traditional channels to get your messageacross - and your imagination is the limit. Forexample, you may want to launch a saucy 'lad mag'Web site aimed at an 18-30 male audience. Whatbetter way to market it than have your URL printedonto index cards and displayed in newsagent shopwindows, nestling next to adverts for escort andmasseur services? At the other end of the market,let's say that you're selling children's toys. Why nothave your URL printed up on balloons, slap on someclown make-up and hand them to kids in the street?

Guerrilla Marketing is all about using yourresources in the best possible way If you're on atight budget it may be your only promotional tool,but it works best in tandem with traditional methods.When telephone directory enquiries services wererecently opened up to private enterprise, the winnerin the marketing stakes was 118118 - with amainstream advertising campaign backed byguerrilla methods. They cleverly followed up theiconic adverts with impromptu public appearances ofthe adverts stars in major towns around the countryYou can learn more and look at other ideas at

www.gmarketing.com - home of newsletters, tipsand tales of successful campaigns.

Build an eBusiness strategy Feature

the keywords you've sponsored, your link will be returned aseither an advert or a recommended site. These operationswork on a results basis, so you pay for the number of timesthe service is able to generate a click through to your site.

One sure way of making your site more attractive is to givepeople the illusion that they're getting something for nothing.In other words, give your users something that keeps themcoming back to your site and that's useful or interestingbeyond your site's primary purpose. Add bulletin boards, holdcompetitions or even publish tips on using your services.

ConceQUICK NAVJ«AT)ON ••

Sales LeadOrg* ysuf butlm

l«*d 9tn*r«tion dt

Di rectory o f AtsDdat lonD i r t A o r y o f » , 0 0 0 t r . d

4 » o c i < « i e n > « f i d n o n - p r o f

M«rfc«tln9 ContuMng

To cover the basics of marketing online, try www.marketingsource.com foradvice on press releases, creating a corporate identity and promotional ideas

U H T A I T U S U P M Y S T R F . E I S I :

All Shy Sports and Moviechannels for only £24 a month

If your business isn't ready to go global you may be better off with a listing in aregional Web dlreaory. The postcode search site www.upmystreeuom providesfree listings for local businesses or you can purchase a premium listing for £60

Place content on your site that's relevant to the product you'repushing and update that content frequently.

If you start creating content to attract visitors, why not takeit a step further and deliver it direct to them? Unlikeunsolicited email campaigning, email newsletters are legalbecause you give customers the choice of opting intoreceiving them. It may take some effort to get going, but onceit is a good newsletter you should generate a steady streamof hits back to your site.

FRee STUFFWhile we're on the subject of giving things away your Website is an ideal platform for offering downloads that visitorscan install on their own computers. Screensavers, wallpaper,and desktop toys - many of these things are easier to makethan you might think. Take desktop wallpaper for example. Allyou need is a high quality image that reflects your product,resized to the dimensions of the most popular monitorresolutions (800 x 600,1024 x 768). Use an image-editingprogram like Paint Shop Pro or even Microsoft Paint to addyour URL to the image and upload the image to your site.Screensavers can be built with easy to use shareware toolslike Screen Paver (www.screenpaver.com). These products arethe online equivalent of old school branded trinkets like keyfobs and matchbooks - they keep your name in front of theclient so that when they next need a service like yours, you'llbe the first company they think of.

Though we've concentrated on ways to promote your Web-based business using online methods, don't skimp ontraditional channels. Paid advertising in targeted publicationsreally works - and if you have the budget for it, don't neglectthis avenue. Marketing yourself successfully has a cumulativeeffect. The more methods you can use, the more coverageyou'll get.

H a n D L i n c p a ^ m e n rIf you're planning on making money, and we hope you are,your site will need to be able to handle payments. Needlessto say this is as important as the actual design of the siteitself and we'll outline some of the ways you can do this. Youcan do this directly by choosing a hosting plan that includes aprovision for credit card transactions and secure payments.Often referred to as secure or eCommerce plans, you shouldread the small print before committing because you're likely toincur a surcharge on every payment that's processed. Aproblem with handling transactions in this way is that you'retied to a single host. You may find a much better, more cost ^

If you can't generate your own content usesomeone elses! www.freeticky.com is adireaory of content that can be used on yourWeb site to keep punters coming back

£ « K * r g t r i M i t t j *

f t ' < 9 d i r t t

" ~ 3 " ^Mongi idirMw IH lUllO itKOCOW

|L«ttitPr«due>Sicti

Group Mail Free from www.infacta.com is aprogram for sending mail to multiple users.Use it for opt-in only, since October sendingunsolicited email has been illegal in the EU

eCOMMERCE I PRACTICAL WEB PROIECTS 117

Page 18: Practical WebProjects 19

Feature Build an eBusiness strategy

PayPal is one of the Web's most miliarpayment handling systems. Though it has animage as a person-to-person system, thereare toots available for business users

wee ResouRcesName of site: Business Link for LondonURL: www.businesslinMlondon.comHow can it help?: An outfit thatdelivers impartial advice to all businessstart-ups, Its Web site is a goldmine ofinformation with an archive of articles

covering a range of subjects.

Name of site: Office of Fair TradingURL: www.oft.govukHow can it help?: The Office of FairTrading's Web site is full of legal advice,set out in plain terms so that anyonecan understand the fundamentals ofconsumer law.

Name of site: Business CentralURL: www.bcentral.co.ukHow can it help?: Business Central,which is Microsoft's business Web siteis great for all aspects of business -you'll find advice on everything fromonline marketing to taxation.

effective hosting deal with an outfit that doesn't directlysupport credit card transactions. Your other option is one thatmany small to medium businesses go for, which is to use apayment gateway instead.

w a y s T O p a yit's time to mention another eBusiness success story PayPalenables anyone with a valid email address and credit cardaccount to make and accept online payments. The system letsindividuals make payments to other individuals, whichaccount for much of PayPal's success on auction sites and asa system for buying shareware. It's also scalable, allowing it tobe used by serious businesses to process orders online.There's good news for European users too - PayPal hasrecently acquired a dedicated European arm. PayPal'sdocumentation is comprehensive, giving you advice oneverything from setting up subscription services to integratingtransactions into your site. You'll find everything you need toat the 'Merchant Tools' section of www.paypal.com.

A more direct option is Worldpay a company with a shorterhistory than PayPal but one that's more clearly targeted atsmall business. Like PayPal, they'll enable you to accept mostcredit cards and deal with one-off payments or subscriptions.Unlike PayPal, users don't have to set up a PayPal account inorder to do business with you; they can pay direct with theircredit card. The 'Small Business' section of

www.worldpay.com is where to go for more information.

m i n i m o n e yAlthough these options are likely to be enough for youreCommerce Web site there is a third way but it's one that'senjoyed less success than was originally anticipated. Theconcept of 'Micropayments' has been around on the Websince the late Nineties but they've yet to catch on in a bigway The idea behind micropayments is that users only payfor the content of a site they want to see. For example, theymight want to read a specific article in a news archive.Instead of subscribing to the entire archive, they pay a smallerfee for the singular section of the Web site they require. If

you're interested in going down this route, check outwww.bitpass.com, which is dedicated to micropaymentsproviders specialising in collecting payments for Web content.

After finding a viable way to manage your site, promoteyour services and accept payments you should have a solidstrategy to guide your online business towards bigger andbetter things. ■

TOPp a y m e n TH a n o L i n GT I P S^ You can provide PayPal and

Worldpay payment optionsalongside each other. This givesyour users a choice and increasesyour charxes of a sale.

^ Pick a payment gateway thataccepts as many credit cards aspossible and publicise the typesof card that you'll accept withinyour payment pages.

If you send out a nev^slener withinformation about new produrtsor services, you can increase

impulse purchases by putting a'Buy Now' link into the email,which will take the customerdirea to the checkout.

)|| Try to separate your paymentsen/ices provider from yourhosting provider. Look for hoststhat will help you set up accounts

through ^ird parties.

|||| Choose a service likeVAVw.kagi.com orvwvw.regnow.com if you're sellingsoftware. They have systems inplace that will enable yourcustomers to download and

register their purchase instantly.

18 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 19: Practical WebProjects 19

Dependable Hostingfor Unl imi ted Websi tes .

Scripting & Applications.Full support for ASP, ASP.NET, Perl, PHP,FrontPage and CGI at no extra charge meetsthe needs of the most demanding developer.

D a t a b a s e s .

Set-up and manage mySOL, Microsoft SOLServer & Access databases for use with yourw e b s i t e s .

E m a i l .Create unlimited mailboxes, forwarders andauto responders. Web browser based andPOP3/SMTP access for all your mailboxes.

E x c l u s i v e C o n t To l P a n e l .Our exclusive web based control panel putsyou in real time control of every aspect of yourhosting account.

E - C o m m e r c e .i28bit SSL & PGP encryption for securee - c o m m e r c e e n a b l e d w e b s i t e s .

C o n t r o l P a n e l F o r Yo u r C l i e n t s .Control panels for your customers at no extracharge. Your clients manage their account andseek technical support via their own web basedcontrol panel reducing your administrationoverheads. You have total control over theformat of your client's control panels forcomplete integration with your brand.

Host as many websites as you wish on your choice ofUNIX/Linux or Windows 2003 web servers. Quickly

set-up new sites and manage existing ones usingour industry leading control panel.

Define hosting plans for yourc u s t o m e r s a n d c u s t o m i s e

their control panels withyour brand enabling youto offer high end,profitable hostingsolutions to your clients.

V \ PSA W

Graphical stats.View graphicalusage statistics foryour web sites, see howmany people are visitingyour sites, where they comefrom, what search keywords 'they use to find you and more.P e r s o n a l S e r v e r N a m e s .S e r v e r h o s t n a m e s a n d n a m e s e r v e r s

personalised with your company domainpresent a professional image to yourc u s t o m e r s .

Exceptional Customer Support.We are committed to providing the best serviceand technical support for our customers.Our devoted team will solve your problems andtend to your needs by telephone and email forno extra charge.

Integrated Domain Management.Comprehensive domain name registration,renewal and management facilities areintegrated into your hosting control panel.Preferential pricing on domain names iso f f e r e d t o r e s e l l e r s .

Money Back Guarantee.We're so confident we will surpass yourexpectations that if you are unsatisfied youcan cancel your account and claim a fullr e f u n d .

V SIGN UP NOWSPECIAL OFFER'

Sign up NOW and enjoy jdaysfree service.Simply enter the specia] code - -at:

w w w. d o n h o s t . c o . u kor call 084s 226S917

I N S T A N T S E T U PLogin and start using the A<count straight

Away whether you sign up online or over the telephone.From £39.99 per month or

£399-99 per year

. 4 t w v a y n r n c t u c t

I — ^ F r o m £ iNo minimum contract,

no set-up fee.terminate at any lime.

Call; 0845 226 5917 Or visit: www.donliost.co.ukBusiness packages also available from fS.gg/month

M i c r o s o f t ,

. n 0 t t t et c c ^ ^OCisco-N o m i n e t . M / c

'Vorhost was recommended to us here at Modelsport UK,and now provides all our internet services. I have beenextremely pleased with their level of service, and havealways found Donhost to be approachable, friendly andefficient. Contrary to our previous ISP experiences, anyproblems have always been dealt with speedily and withminimum fuss or disruption of service. Information iseasily accessed, and charges are very fairly andtransparently applied. I can thoroughly recommendDonhost to anyone looking for a truly professionaland competitive ISP."

Howard Cliff- Modelsport UKhttp://www.modelsport.co.uk

d o n h o s t .power in your hands

Page 20: Practical WebProjects 19

Feature How did they c

HbwrtK fJIuilt

ghts.co.ukSince pioneering the pay-per-click advertising model seven yearsago, Cheapflights has become one of the UK's most populartravel sites. We speak to the brains behind the site, David Soskin,to find out why the company is flying so high

David Soskin is the brains behind Cheapfiights.CQ.uK which enableshoiidaymal(ers to tal e off at a moment's notice

After the success of Cheapflights, Soskin invested in another money-spinner }/vi Cheapholidaydealsco.uk, which lists package holidays

^ few years back, travelling by air wouldprobably involve you re-mortgaging yourhouse and selling half of your worldly

belongings. However, since the advent of budgetairlines and a dip in the overall cost of flights, you cannow take off for a weekend abroad with the change inyour back pocket.

The Internet has helped the cheap flights marketsoar, because jet setters can now book online a coupleof days before they fly for the ultimate in 21st Centuryconvenience. Many online businesses have exploitedthis market, but few with the same degree of successas Cheapflights.co.uk. After seizing one of the mostlucrative domain names on the Web in 1996, formerHarpers and Queen Travel Editor John Hatt set up a sitethat provided travellers with the ability to instantly findthe cheapest deals online for a flight to a particulardestination on a given date. Cheapflights became thefirst dotcom to introduce the 'pay-per-click' advertisingmodel, making its revenue by charging flight operatorsa fee for any customer who clicked through to their sitefrom Cheapflights.

"Our main objective was to provide British consumerswith the opportunity to compare flight prices from ahuge range of companies," explains David Soskin, CEOof Cheapflights.

"Looking around, we discovered that other travel Websites were very difficult to use, comparatively slow and,most importantly, trying desperately to sell a product."

Preparing for take-offBy 2000 Cheapflights.co.uk had 70 companiesdisplaying flight deals on its site, and the number ofdeals on the site reached 20,000. Now, in 2004, it workswith 500 travel companies, from big hitters like BritishAirways to smaller outfits such as Gays Abroad, andshows 750,000 deals on its site in the UK alone. As aresult of this huge expansion, plus the fact that the

company has added portals for hotel deals(www.cheapaccomodation.com) and package holidays(www.cheapholidays.co.uk), the number of uniquevisitors to the site has now risen to just under 2,000,000per month.

Unlike many of the early dotcom flops, Cheapflightsresisted the urge to shell out on huge advertisingspends, and has paid out just £600,000 on marketing inthe last seven years, a factor which Soskin puts downto the company's domain name.

"It is a great domain name and we do exactly what itsays on the tin. Because it is so easily remembered itmeans that we have spent very little on advertising andinstead have invested our money in improvingCheapflights.co.uk," he says.

"But the Internet is a fickle place and if we could notprovide a great user experience, our traffic numberswould have dwindled and died - no matter how greatthe name is."

Investing in technologyIn order to ensure that the site is as fast and user-friendly as possible, the Cheapflights team has had toevolve its technology over the years. The site was avery simple one to begin with, without much in the wayof high-tech features.

Getting the prices was very time-consuming andvery manual, with john Hatt using home workers todevelop content. Hatt was based in London, but a ladyin Cornwall researched the links and services on eachdestination page. Originally on a small scale, pricescould be emailed or even faxed before being uploadedto the site, john was to quickly realise that it more orless needed a full-time data entry team.

Soskin recalls: "He had problems with the system hisconsultants were trying to build to automate this. This iswhen we created a database for the advertisers to useto enter their offers, which interfaced with the main

20 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 21: Practical WebProjects 19

Ti m e l i n e

S e p t e m l w M i lCbi illi o.uk Hdmed as

Ullfc f ourite travel site in a\ poll by the Good Web Guide

September 1996Cheapflight$.co.uk

founded by ex-traveljournalist john Hatt in

h i s b e d r o o m

November 1998Cheapflights.co.uk

exceeds one millionmonthly page visits

t " i t

How did tiwdo that? Feature|une 2003

Cheapflights.com launched asthe USA site. Multiple booking

engine launched withOpodo and British

. Airways as partners

lanuary 2002The site undergoes a second

redesign and Cheapflightsstarts sending HTML email

newsletters for the first time

Xlanuary 2004

Cheaphoiidaydeals.cauk launched,displaying 200,000 holiday offers, and

allowing the site to display a full range offlights, accommodation and holidays from

its th ree s i tes

lune 1997Cheapflights.com domain

name purchased for £1500

August 2000Site redesign completed with dedicated

sections on accommodation, car hirea n d i n s u r a n c e

database used to create the pages." Aside fromaccessing advertiser's databases in this way, thecompany also uses a tailor-made spidering solutioncalled theapseeker' to strip offers directly from theirWeb sites, and it is this technological combination thatallows the small team at Cheapflights to keep morethan a million offers across its network continuouslyupdated several times a day

"We have a lot of plans and are investing heavily intechnology There are two areas of improvement onwhich we are focusing - firstly extending still further

get-rich quick schemes like advertising pop-ups ornasty noisy banners that whoosh all over our pages,spoiling and slowing down the user experience."

The Cheapflights success story proves that you don'tnecessarily need to have a product to sell in thephysical sense, if you're to make money from the Web.David Soskin points out that the reason why manyeCommerce sites have failed in the past is because theysimply mimic the old, product-based economy relyingon customer service staff, warehouses, call centres andstock control on top of their online costs.

The Internet is a fickle place and if wecould not provide a great user experience,our traffic numbers would have dwindledand d ied"the range of travel companies publishing their deals onour sites and secondly improving our user experienceso that users can find what they want even morequickly and easily," explains Soskin.

Avoid the hard sellAlthough Soskin clearly believes that there's lots of workto be done to improve click-through rates on the site,the budget travel industry is already doing very nicelyfrom the site. Last year, Cheapflights' travel partnerssold just over £300 million of products via its sites, andthe company estimates that this number will exceed£500 million in 2004.

"The reason why we do well is because we haveremained true to our mission in 1996, which was tobecome the number one guide to travel deals," Soskinsays. "Because we are profitable, we can plan for thelong term. We do not have to ruin our Web site with

You can find the latest deals for cheap last minute flights on the site

David Soskin, CEO of Clieapflights.co.ult

He professes: "It is a huge advantage simply toprovide information, which is what we do. We can thuskeep our costs down and invest in the Web sites. If theWeb site is sufficiently good, people will find you. Whenwas the last time you heard a radio advertisement forGoogle or saw a TV commercial for eBay? There is athirst for great Web sites."

It certainly looks like as long as customers remainthirsty for budget airfares, Cheapflights should enjoy along rein as one of the Web's most successful travelsites. The site already serves as an example to aspiringeBusinesses and proves given the right idea and awell-designed site, the sky is the limit when it comes tothe possible profits that can be made.

"My advice to eCommerce sites is to focus on theviewer experience, provide something unique, and buildfor the long term - and the money will look after itself,"is Soskin's message.

Cheapflight's interface makes it simple to find the destination you want

> Site stats

Cheapflightswww.cheapflight5.co.uk■ Who designed it?I n - h o u s e

■ Software used?Bespoke software, plus some hand coding

■ Time taken to build original site?Tw o w e e k s

■ How many visitors?1.9 million unique visitors a month (lanuary 2004)

■ Amount of air tickets sold via the site?£300 million per year

■ Number of travel partners?M o r e t h a n 5 0 0

eCOMMERCE I PRACTICAL WEB PROjECTS I 21

Page 22: Practical WebProjects 19

www.123-reg.co.ukIt's never been easier or cheaper to have your own domain name

123-reg delivers a totally automated service with the lowest prices guaranteed!This exclusive package includes;

• Web based control panel • Online domain name management system• 100 email fonwarding aliases • Catch-all e-mail forwarding• Unlimited web forwarding • Manage name servers • Affiliate scheme• Home page site wizard • Manage your own DNS • No transfer out fee• Plus much, much more!

There's no better place to host your website

S t a r t e r P l u s

°"'y £1'M!•100MB of web space•1500MB data transfer (bandwidth) per month•CGI/Perl Script enabled•On-line file manager and full FTP access•15 mail boxes (POPS) •FreeWebMail•Webalizer graphical web statistics•Add FrontPage Extensions for £25 per year•Unlimited e-mail forwarding addresses

only £2'99f only ££.99*p e r m o n t h ^ p e r m o n t h•250MB of web space•3000MB data transfer (bandwidth) per month•CGI/Perl Script enabled•On-line file manager and full FTP access•25 mail boxes (P0P3) 'Free WebMail•Webalizer graphical web statistics•Add FrontPage Extensions for £25 per year•Unlimited e-mail forwarding addresses

per month•500MB of web space•5000MB data transfer (bandwidth) per month•CGI/Perl Script enabled•On-line file manager and full FTP access•35 mail boxes (POPS) •Free WebMail•Webalizer graphical web statistics•Add FrontPage Extensions for £25 per year•Unlimited e-mail forwarding addresses

'Plus registrar registration fee, see website for full details,*'offer is for new registrations only and renewals will be charged at our normal price of £8,99 per year.■^Monthly fee, must be paid annually and excludes one-off setup fee of £9,99.All prices exclude VAT. E&OE.

H o s tE u r o p e

Page 23: Practical WebProjects 19

4D Business KitGet your online store off the ground byscooping one of five copies of 4D Business Kit

If you fancy following in the footsteps of Amazonand reckon you could become the next bigdotcom success story, you're going to need asolid platform on which to build your dreams.We're giving you the chance to create the ultimateonline store by winning a copy of leadingeCommerce application, 4D Business Kit.

Designed specifically for small to medium-sized Web businesses, the powerful applicationprovides everything you need to knock togetheran eStore quickly and efficiently. 4D Business Kitallows you to build professional-looking Webstores containing an unlimited number ofproducts, and the program's comprehensive

administration tools take the hassle out of doingbusiness online. Its features allow prices to bequoted in several currencies, local tax rates to beautomatically calculated and credit cardtransactions processed seamlessly What's more,the program's advanced customer relationshipmanagement features help you sell even moreby automatically suggesting products tocustomers based on their previous purchases.

We've got five copies of this mightyeCommerce application to give away, worth £440a piece. To be in with a shot at winning thesoftware, just provide us with the answer to thefollowing simple question:

Which famous river is also A Thamesthe name of a successful B Nilee C o m m e r c e s t o r e ? C A m a z o n

4D Business KitBuild now. Sell today.

The fast and fleMe way to Md o" Ho-e.

After putting your brain cells to work on this teaser, drop the answer in an email and send it to us [email protected] with the subject line 'eCommerce competition'. Alternatively, you can post yourentry to: eCommerce Competition, Practical Web Projects Issue 19, 87 Cobham Road, Ferndown IndustrialEstate, Wimborne, Dorset, BH2170B. Please make sure you include your full name, address and adaytime phone number, so we can contact you if you win. The closing date for entries is 29 April 2004.

Employees of Highbury Entertainment Limited, 4D, their agents,wholesalers and their relatives may not enter Participants must beover 18 years old and resident in the UK. The Editor's decision isfinal and no correspondence will be entered into. Proof of postagecannot be accepted as proof of receipt and no responsibility canbe accepted for lost, delayed or damaged entries.

Page 24: Practical WebProjects 19

Subscriptions

Get three issues free!OPTION ONE

SAVE £20Dreamweaver ▶ ASP advice ▶ Database secrets ▶ PHP explained ▶ Mal e money today!

WebPro ts The complete,jargon-free guide to...

P I U S .

FREE CD!INCLUOtS FOUR

I run. PROGRAMSWORTH f605

WHEN YOU SUBSCRIBE TOPRACTICAL WEB PROJECTS▶ 10 ISSUES FOR THE PRICE OF SEVEN▶ NEVER MISS AN ISSUE AGAIN▶ FREE PACKED CD EVERY TIME▶ FREE DELIVERY TO YOUR DOOR

dcommerceThe original and best guide to Web creation software

M A K E M O N E YFROM YOUR SITE▶ Cheap and easy ways to create the perfect online store▶ Get your business online with our no nonsprr;? guides▶ Use Dreamweaver and ASP to build the next Amazon!

i ▶ VIDEO TUTORIALS ▶ WdtCT FlUS ▶ RBOHRCiS

LEARN HOW TOBUILD SLICKDREAMWEAVERSITES WITHTHESE VIDEOGUIDES FROM

i OUIXELVIDEO

MAXIMISE YOURPROFITS ONi lNE20 guaranteed m turn yai?wP!e storeinto a lean, mean,'fnoney;makin^Thachine

CATALOG -(PC ONLY, STORE UMITED TO 25 PRODUCTS)~ f j . ]

build SECURE ONLINE- ■ ■ STORES, PROCESS

jCHsssiss-60 iAlNUTESOF DREAIWHEAVERVIDEO TUTORIALS

j'sicOMEADOI^, WEMiTEMviSv'■ "■1 USING THIS POWEWUl I ■. M M i r & T i n K I l a r M H V I ^ ■(SUCCESS STORY WmTHIS POmWl STORE

^ CUSTOMERS WITHTHISWEBTRAFFKa n a l y s e r « K 0 W > No O)? Ask your neyyl nt I

THE NUMBER ONE WEB CREATIVITY TOOL

YTNING YOU NEED TOILD THE PERFECT STORE

k Design a from tod In Or««mwMV»r▶ Um ASP to add < product daubase▶ Build * complet* ttorc with Actlnk▶ ProcMS cf«dit uvds tiw caty May^ Creait cuttomcr mailouts with PHP^ Improv* your starch cttfirw rating

X ISSUE 19 C5.99HIllliilni"

Subscribe to Practical Web Projects for just £39.90 a year - saving you 33 percent off the normal cover price

Call our subscription hotline now!0 8 7 0 4 4 4 8 6 8 2

24 I PRACTICAL WEB PROIECTS I cCOMMERCE

Page 25: Practical WebProjects 19

Subscriptions

OPTION TWOSUBSCRIBE TO PWP & PRACTICALINTERNET WEB DESIGNER AND...

SAVE £64▶ GET 13 ISSUES OF PRACTICAL INTERNET WEB

DESIGNER PLUS 10 ISSUES OF PWP mD SAVE £64▶ PAY JUST £3.20 AN ISSUE. THAT'S A SAVING OF

OVER £2 PER MAGAZINE!

Subscribe to Practical Web Projects and Practical InternetWeb Designer foy only £73.42 a year - saving you morethan 40 percent off the normal cover price

WebPr^P E R S O N A L D E TA I L S

Your name

Address

Post code Emai l

Phone number Date of Birth

SUBSCRIPT ION AS A G IF

N a m e

Address

Postcode Emai l

Phone number Date of Birth

□ New subscription □ Renewal subscriptionPAYMENT DETAILS1. Direct Debit

□ Option one UK only £9.97 every 3 months [Media code: PWP0419A|□ Option two UK only £18.35 every 3 months [Media code: PWP0419B|

X I n s t r u c t i o n t o y o u r B a n k o r ^ ^ d i r e c tm'siris,. Building Society to pay by Direct DebitPlease fil( in the form and send it to: Highbury Entertainment Limited, FREEPOST NATW1809,{Customer Interface), SOMERTON, TA11 6ZA

Name and full postal address of your Bank or Building Sedcty Originator' ktenlifKation Nutpiwt

8 I 5 I 1RefereiKe Number

ni Dtniled Direct OetMts fromction subject to the safeguardsn(ee l undeislarxj that this

NarTie(s) ot accooni hokJer(5>

Sank/BuiMir g society account number

eanks and butWing societies may iwt accept Oirect tJebit mslructons tor some types ol account A6 mstrixtion form

2. Cheque/credit/debit card

Option one: 10 issues of PracticalWeb Projects□ U K £ 3 9 . 9 0□ Europe £49.00□ Wor ld £58.00

Option two; 10 issues of PWP 6 13issues of PIWD

□ U K £ 7 3 . 4 2□ Europe £90.40□ World £107.20

[ Media code: PV\/P0419A | [Media code: PWP0419B[

□ Cheque (£'s sterling made payable to Highbury Entertainment Limited)□ Visa □ Mastercard □ Amex □ Switch □ Delta

Card number: Expiry date:

Issue No:

Signed:

Please retum this order fornn or a photocopy of it togetherwith your cheque/PO (if applicable) to the following address:

Miciiiium Higtibury Entertainment limited, FREEPOST NATW1809,(Customer Interface), SOMERTON, TA11 5ZA

From time to time, Highbury Entertainment Limited sends out news about excitingnew products and opportunities that are of interest to readers. If you do not wish toreceive such information, please tick this box □

Overseas: +44 870 444 8682F a x : 0 1 4 5 8 2 7 11 4 6

Email: [email protected] I PRACHCAL WEB PROIECTS I 25

Page 26: Practical WebProjects 19

C a s y p o s tw e b m a i l t h a t ' s h o t t e r t h a n h o t

Free 2 month trial version - of our Easypost ANTI-SPAM and ANTIVIRUS Elite package (worth £9.99) when you buy any domain nameor hosting package.

Fire off and catch your emails from anywhere - With Easypost you canuse your domain name for email and look more professional. So whyhave a 'me too' hot mail address and look like a spammer?

Armed with Anti-Spam and Anti-Virus - With so much spam and somany viruses around, it's easy for your PC to pick up something nasty.That's why we take it seriously. Our best of breed software ensures thatyou can collect and send safely and securely

Don't miss our great free packages - Purchase a low cost domain name orweb hosting account, and our Easypost Elementary package (2MB) comesabsolutely free. But we don't want to give you that! As a special bonus, you wiautomatically be upgraded to Anti-Spam and Anti-Virus as soon as yousign up, so you can try out our top package FREE for 2 months.

From the big shots in domain names and hosting - Our brilliant range ofdomain names (from just £3) and top quality hosting services have made usthe UK's favourite registrar. We're the biggest and the best and now we've gotthe perfect email package to suit your needs too....from only £3.99 per year.

Join up today and enjoy the jumbo-sized benefits of your FREE 2 month trial.

Log on NOW for the web mail packagethat's hotter than hot at; www.easyspace.com

Established in 1997 with over V2 million customers. Accredited ICANN registrar & nominet member. Prices exclude VAT.f fi

your perfect pertner for the web

Page 27: Practical WebProjects 19

eCommerce Pro ectsDiscover how to create a great looking online store and start makingmoney on the Web today by following our expert eCommerce projects

Discover how to produce this amazing Web content..,

f C K

Create a stylish storefront inDreamweaver MX 2004The latest version of Dreamweaver is pacl<ed

with features that let you create gleaming eCommercesites. Mark Shufflebottom explains how to build astriking storefront using Macromedia's Web editor

Use ASP to add aproduct database 1

i r ^L., r

^ 5 -

Add a product database toyour site using ASPAfter creating a cool front-end for your site,

discover how to add a product catalogue for your storeas Rachel Andrew reveals the secrets of designing adatabase and connecting it to your site using ASP

H A - _ : S SCreate a compleie C o m m e r c e s i t e ^w i t h A c t i n i c ^

: r »

r r

Build a complete online storewith Actinic Catalogif you don't fancy building your eCommerce

store by hand you can use Actinic Catalog to help youcreate and manage an online catalogue. Follow ourguide and use the full version from the cover CD

38 Make a special offer banner using Fireworlcs MXUnleash the powerful Web graphics tools within the latest version of Fireworks tocreate an eye-catching banner advert that will promote special offers within youronline store

40 Add interactive pop-ups to your storePop-up windows have had a bad rep over the years, but they don't have to bebrash and annoying. We explain how to create stylish pop-ups to display extraproduct information to your customers

38 Process payments on your siteIt's all very well building a stylish storefront and adding a robust product catalogue,but Where's the fun if you can't make any money? We reveal how to add shoppingcart facilities to your site using CllckCart Pro

66 Set up a mailing list using PHP and MySQLAdding a mailing list to your site can help you build stronger relationships with yourcustomers and promote the latest deals going down in your store. Reach out to thepunters with this guide to adding mailing list functionality using PHP and MySQL

70 Analyse your site's performanceMonitoring customer activity on your site is a good way of staying one step aheadof your competitors. Discover how to improve your store by analysing traffic usingyour full version of Sawmill

72 Get ranked higher on search enginesWhy bother to create a great looking online store if no one ever finds out about it?Site optimisation guru Nick Sweeney demonstrates how you can soar up the searchengine rankings by employing a few crafty techniques

eCOMMERCE I PRACTICAL WEBPRO|ECTS I 27

Page 28: Practical WebProjects 19

eCommerce project Build a stylish front-end for your eCommerce storeYour expert guide:

M a r kShu fflebo t tom

MARK SHUFFLEBOTTOM is a regular contributor to Praaical Web Projects andteaches on the BA(Hons) Interactive Media course at Bournemouth University.Mark has developed a love for designing interfaces, and you can check outhis work on his online portfolio at www.markisb.co.uk. Regular readersmight find some of these creations very ^miliar!

Build a stylishfront-end for youreCommerce storeCreate an impressive store-front for your online business byharnessing the powerful design features of Dreamweaver MX

The brief

Task; Buitd a front-end for

your online storeDifficulty: EasyTime I need: 2 hours

On the CD

All files for this proiect canbe found on the CO

Lingoleve l le r

Technicalt e r m sbul ldozed

■ GuidesGuides are there to helpsteer the design process

by allowing easyalignment of graphics,but are invisible on the

final published design.

■ Move toolThis is necessarywhenever you wish tomove layers around onthe screen. With tiiis tool

selected you can alsouse the cursor keys tomove one-pixel at a timeor the 'Shift' key andcursor key together tomove lO-pwefs.

reating an attractive front-end for a business on the Internet is essentialbecause first impressions are so important. In this tutorial we are going

I to create a stylish, yet usable, front-end for an online furniture storecalled 'Home Style'. It is a fictitious site but will cover some essential techniquesfor getting a Web site to be usable and pleasing to the eye.

Our store will face connpetition from established brands such as Ikea and Habitat,but with a little consideration it's possible for a small furniture retailer to compete.

Small retailers don't have thousands of staff or multiple shop space to rent, sotheir costs are kept down, plus by utilising the Internet it's possible to expand yourmarket beyond the local community We'll demonstrate how Photoshop can be usedto pull together a graphical style to present a professional eCommerce site. We'll thenmove into Dreamweaver MX 2004 where the exported graphics from Photoshop willbe used with CSS to pull the content and graphics together into a finely-tuned Website. The graphics used in our site are copyright protected so do not appear on theCD. Instead we've included dummy files on the disc, allowing you to practice thetechniques by substituting them for your own images.

\ I

H O M t 1 ' I • i p O U T | '

S P E C I A L O F F E R !

yIPFll

d * t i h k f t y f c h K l c h v nUbte f«t «nlr CTS OO m4ue*df > » c n £ 1 S 0 C I 0 .

C h « B

C 2 f t 0 0 • * 4 u « * 4 < t * r AB t a x a

An impressive home for your businessIn the tutorial we will take full advantage of Dreamweaver's excellent layout and designcapabilities to create a stunning an aspirational front-end for an online furniture store. Theproject will demonstrate how to create the graphics in Photoshop and then bring them over toDreamweaver to incorporate into a Web page design using CSS. We'll then be ready to addinteractive features such as pop-ups, banners and a product database in later tutorials.

L a y e r S e l e c t H « 4 p- I t i J a i P r o o f S e t u p

P r o o f C o l o r s

S a « e t ) M o d e

U S f w pS n a p To

■ Q B0 » :

L o d t C u i a H

a * * " • - -

M e w C u M * - .

1 Start the design processOpen Photoshop and create a new document 780 pixelswide by 150 pixels high at 72 dpi with a white backgroundin the 'RGB colour' mode. Make sure that you can see therulers, which can be turned on from the 'View' menu byseledng 'Rulers'.

V i e w W m d m . 4 4 •1 « I I 4 M N ) T h u 1 1 S 7

— - «

l!

^

| r r - c

4 Another imageOnce you have scaled your image to the right size doubleclick to apply the change. Now we'll insert another imageinto our main header panel. Using the dummy file 'girlsbedroom.jpg' for placement, drag this to your documentand resize as shown above.

7 Erase the edgesBrush over the edges of the cut out image, to ensure youget a more seamless blend with the image to its left. Dothe same around the other side of the image to erase anyunwanted elements and ensure that the picture blends inperfectly with the right-hand picture.

28 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 29: Practical WebProjects 19

Build a stylish front-end for your eCommerce store eCommerce profectWhen you want to apply styles to table cells the best way to do this is to place your cursor inthe cell of the table that you want to apply the style to. If at this stage you select the style itwill be applied to the text rather than the cell as a whole. You can get around this by going tothe bottom of the 'Document' window and selecting the appropriate table tag and applyingthe chosen style to this.

Power users' tips

2 Create guidesClick, on the top ruler and drag it down to 75 pixels on theleft-hand ruler. By doing this you'll drop a guide onto thedocument. From there drag the guides at 380, 480, 580 and680 pixels. These will be the guides that help us to layoutthe design.

3 Add imageryWe'll now bring in an image to start building a slick header

panel. Use the 'File' browser menu to find an image or usethe dummy image 'relaxing.jpg' from the CD. Drag the imageto your document, choosing 'Transform' and 'Scale' from the'Edit' menu. Flold 'Shift' and drag the corner to scale.

5 A lounge segmentYou can cut out a section of another image to use in yourheader panel by switching to the 'Rectangular Marquee' tool.Draw a rectangle around a seaion of the image as shownon the screenshot above. Once selected switch back to the

'Move' tool and drag this selection to your document.

. 1«?9. . . h?o. . . T»»«. , . . f i t* . . . I«?». . . . . t '>».I111

O t x t t n

f nC * t * , »

1 f "

6 All in the blendPosition your new image between the two existing imagesand change the 'Blend mode' to 'Hard Light' in the 'Layer'palette. Select the 'Eraser' tool and change the 'Opacity' to50%. Make sure the 'Eraser' is set to a 'Soft Edge' brush ofaround 40-50 pixels.

n i s

L . . » r W

8 It's all a blurSelect the layer on the far right of the header panel andchoose the 'Blur' tool. Set the brush size to around 55 pixels

making sure it's a soft brush with the 'Opacity' of the blurbrush set to 20%. We've brushed the right-hand edge of theimage to take it slightly out of focus.

9 Flip itFrom the 'File' browser open the dummy image 'girl hangingoff chaltjpg' from the 'Starting Images' folder Once open onthe screen go to the 'Image' menu and choose 'RotateCanvas' and then 'Flip Canvas Florizontally'. The girl will nowface into our page when finished.

Useful triclcs and shortcuts

V t M m n t g r n ^ 4 t m * l l t C

. . p y

3 . - 6

n : t

r r ^ . 1

■ Create an impressionIf you want to add more of an impact to your text in Photoshopfor the heading graphic of tiie Web site, you can apply a layerstyle to the text. There is a whole range of effects here that willchange the way it looks, double-click the layer in the 'Layer'palette to open the 'Layer Style' window.

- a n : v i m

. . . n r ,

T m m

r r

* s —

■ Drop shadowsClicking on the 'Drop Shadow' category will allow you to applyand change the settings of a drop shadow for the text. This will

give the text more emphasis, but be careful about using this onsmall text because you will need to reduce the size of theshadow accordingly

M t O S l W * t a n V i e w W t n d o w

.> ;

1 1 ?,. h»,. I'?*,. 1'i J V W S t

> = 7 ^

■ Bevelled edgesYou can apply bevel and emboss techniques to the text whichcan be effective. The font chosen in the tutorial isn't quite wide

enough to pull this off with any great effect, so be sure tochoose a bold font when you're using this in the design processof your own creation.

eCOMMERCE I PRACTICAL WEB PROjECTS I 29

Page 30: Practical WebProjects 19

eCommerce project Bui d a stylish front-end for your eCorTinnerce store

How does i t work?

Blending bliss■ During the initial design stage when the graphics wherebeing put together in Photoshop, some of the layers wereblended together using a drop-down menu from the layers'

palette known as 'Blending modes'. These modes define howthe layer will look with otfier graphics placed above or below it.For example, use the 'Multiply' mode on a layer and the blackareas wil l become enhanced while the white areas wil l become

transparent, use 'Screen' mode and the opposite will happen,with the black areas becoming transparent and the white areasnow enhanced. Use 'Blending modes' if you're looking to createadvanced compositions.

Onl ine resources

Find out more on the Web

Name of site: Project SevenURL: www.projectseven.comProject Seven is a site that has tutorials, extensions andtemplates to help you get the best out of Dreamweaver. Thereare some fantastic downloads available here as well.

Name of site: dmx zoneURL: www.dmxzone.comA ^ntastic resource site which can give you just about anything

you need to know about Dreamweaver. The site also has detailson the whoie Macromedia MX family An essential bookmark.

I10 Scale the imageDrag this image into your composition and position it on theright-hand side of the screen. From the 'Edit' menu choose'Transform' and 'Scale'. Hold 'Shift' and drag the cornerhandle until it is the size shown on the screen, then dragthis layer behind the others.

S f t ! ; tS i im««( L»y*r QtWr Vi«» Wint fow

- ■ " P - ■ ■ - -

14 Sleek lines

Change the foreground colour to white and then selea the'Vector shape' tool from the toolbar In the context bar at thetop of Photoshop change the 'Vector shape' to the 'Line' tooland set it to one-pixel wide On the document draw a lineacross the centre of the image snapping it to the guide.

11 Fill me inCreate a new layer immediately above the image you'vejust dragged in. Use the 'Marquee' tool to select the top halfof the image of the guide. Select a pale yellow colour (255,255, 204 in the 'RGB mixer') and with the 'Paint Bucli;et' toolfill the selection on the new layer.

15 White linesYou may need to move the layer above the others to see itproperly Once this is done draw four vertical lines at thepoints where your guides are set on the page. Holdingdown 'Shift' while dragging will constrain the line to avertical 90 degree angle.

18 A new documentCreate a new document 780 pixels wide by 38 pixels highwith a white bac^round. Add guides to the image from theleft-hand ruler at 380,480, 580 and 680 pixels. Make theforeground colour a mid-grey and add vertical lines wherethe guides are lined.

l m » « « K y t r S « I « C ( f f l M r V M w | » l w d 9 W H t i p

l o o K d u T H i f m e r , t o f M N f M O i m , o , K t / i >I.K . , |i|.. . . [iH . . »>♦. . . Ht*. W. ■ ■ »>«■ . .TR ^ . M.. . l>.>

19 Place the logoChoose 'Place' from the 'File' menu and select the dummyimage 'house.ai' from the 'Starting Graphics' folder on theCD. Resize the image and double-click to apply the changeUse the 'Text' tool to add an address and contact details asshown in the screenshot above.

JO I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 31: Practical WebProjects 19

Build a stylish front-end for your eCommerce store eCommerce profectWhen designing Web sites you can select which browser you would like Dreamweaver tocheck for compatibility with. This allows you to design your sites with complete peace of mindknowing that your target audience are able to view your page with their chosen browser.Dreamweaver can be set to check for errors on opening and will give a detailed feedback ofany errors that might be found.

Lingo leveller* • . m M i m i m m P * ^. ...Si

i d l - l- I

12 Blend the layerPress 'Ctrl' S. 'D' to deselect the selection. In the 'Layer'palette change the new layer's 'Blend mode' to 'Saturation'and set the 'Opacity' to 60%. Once you have done thischoose the 'Rectangular Marquee' tool and select thebottom half of the layer

13 Blur the imageSelect the layer that you've just inserted and the 'Marquee'will now be selected on this layer. From the 'Filter' menuchoose 'Blur' and then 'Gaussian Blur', in the pop-upwindow set the blur to around eight-pixels and then press'Return' to apply it.

F l l * tI d i t t m a a * L * y « r S e i c c t n r u r V i e w W t n t f o w H « t p ^. d . . . J J i R - » *

. . f H . . K t » . f i t * P » » t m ( • > » . . . « •

i S

Technical terms bulldozed

■ XHTMLThis is short for Extensible Hyper Text Markup Language, whichuses the XML data model to vrork in conjunction with XML-based user agents. The W3C see this as the future markuplanguage of the Web and are hoping that all HTML content willmigrate to this model so start making your site compatible!

■ Page PropertiesThe 'Page Properties' define all the basic elements about yourWeb page such as the fonts used on the page, the link coloursand the background page colour or image. This is usually thefirst place you will need to visit when creating a Web pagebecause it will affect the rest of the design process.

■ Save for WebWhen saving graphics for Web pages it is necessary to reducethe file size as much as possible. The 'Save for Web' option inPhotoshop allows visual feedback to see the changes to tfieimage because there is usually a trade off between file sizeand quality of image.

■ Define a siteDreamweaver has more to It than being the easiest tool for

creating Web pages, it comes with the ability to manage yourentire Web site. By defining a site you are telling Dreamweaverwhere the content is for your site, which makes creating Web

pages easier to manage.

How does i t work?16 Change the opacityHolding down 'Shift' will add the lines to the same layer aswell as constraining the angle. With this layer selectedchange the 'Opacity' to 70% and the 'Blending mode' to'Screen'. Select the 'Text' tool and add two text layers asshown in the above screenshot.

17 An Image folderNow save all of the images you've used to a folder on yourhard drive, calling it 'Project Start'. From Photoshop save yourimage somewhere on your hard dive. Choose 'Save forWeb' and export the image as a |PE6 at 50 quality saving itinto the a folder marked 'Images within 'Project Start'.

20 Save for WebSave the image so that you have the original and thenchoose 'Save for Web'. Save this as a 'GIF' image, with 'Snapto Web Safe Colours' switched on. Save the image in your'Images' folder ready for use later on. You can now closePhotoshop because you have finished the graphics.

21 Define your siteIt's time to get into building this site in Dreamweaver soopen up the program. From the welcome screen create anew site. Click on the 'Advanced' tab at the top of the 'SiteDefinition' box. Enter a site name and then browse on yourhard drive for the 'Project Start' folder

Cascading styles■ The design process in the tutorial features the use of'Cascading Style Sheets', which is used to control everythingftom the text to adding graphical features such as dotted linesthat expand to fill the size of the table. These advanced featureswork by setting up a style, v^^ich lists all the attributes for that

style. When the browser loads a page it will read the stylesheet first which is why it's contained in tfie 'head' section ofthe page. While it renders the page on the screen it interpretsthe class tags and inserts the design. CSS can be included inthe document but If you are creating a lot then it's a good ideato place these extemally so all pages have access to them.

eCOMMERCE I PRACTICAL WEB PROJECTS I 31

Page 32: Practical WebProjects 19

eCommerce project Build a stylish front-end for your eComnnerce s t o r e

> Power users' tipsMn vw» DHtft i4edwy ftn Cowwwd* Sa« Wftndaw H«» ^ «

i W l i r t t l l

Useful tricks and shortcuts

■ Add checkou t f ac i l i t i e s

Accepting payments is paramount on an eCommeice site ifyou're planning to make money. It's easy to set up a store onlinethanks to the PayPal extension by Web Assist. Point yourbrowser at www.maciomedia.com/cfusion/e)(change/inde( todownload and install the software on your computer.

The way to send and receive money onl

O v a r 4 0 m l l H o n r r w m b s r a c c o u n t s w o r l d w i d e l

SiaO-UP foi vour FREE PavPal ^c<;ount

SpotHght

m P a i

m Get an accountHead over to the PayPal Web site (www.paypal.com) and signup for an account so that you are ready to accept money. It'sfree to join and they chaise a small percentage for everytransaction that they process. They inform you when money has

changed hands so you can process the order.

n i t t d a v k t m i f i « « n M o d H y T « x t C o w H U f t d i 5 « «

^ i t t k ( T ^■Iff.

■ Add to your pageBack in Dreamweaver open tie 'Catalogue' page and position

your cursor next to a product and choose the 'Buy Now' optionfrom the PayPal' tab on the 'Insert' panel or the 'Add to Cart'button, tf you use the Add to Cart' button, don't fo^ to use the'Wew Cart' button so customers can pay

t e f t a « * < n e w S t n « f . .

N O »

22 Create a pageBrowse again for the Images' folder inside the 'Project Start'folder on your computer. Click 'OK' to return to Dreamweaverand create a new HTML page. When the page openschoose 'Convert' from the 'File' menu and then select the'XHTML option.

Sakctor Typa 9 Om* (««n Apply to any tag)C (r«d«flncf tht bek • >p«crfk tt#)O Advanced (K>*. contaxtti*! ate)

DaftnaM- © (Waw Styte ShaatI TIh* documant only

J 0

27 Format the menu

From the 'File' menu choose 'Save' and name the page'index.html', saving it in the 'Projea Start' folder. Place yourcursor inside the third cell down now and click on the 'NewCSS Style' icon in the bottom-right of the 'CSS' palette. In thepop-up window name the style 'menuTop'.

' S«tecto fTvp« 9c i js t (<Mipp iv toanvUs) v Canct l )OTagtrcdafina* the lookofatpaclfic ug) |

Dafltwm: . »<e«T<tStyte.cM " 1?^O d o c u m a m o n l y D .

• M U r r j p * 9

i , a

T t r g t l

32 Format cellsSelect the middle cell and change the width to 100 pixels,then select the right cell and make the width 500 pixelswith the 'vertical alignment' set to 'top'. Click on the 'NewCSS Style' icon in the 'CSS' palette and create a new style,which you will name 'leftColumn'.

H M A r t e i

T1|l(/encp«n«T r a t l o s t m » 9 *

T t M M l p r ■ ! # 0 0 0 0 0 0

tack^rmmd cotor I~I1 "

t s S

- e : - ®

j M j J g • i . n . ■» '' I fl o o m - g 3 ( S a ! L 3

23 Modify the propertiesFrom the 'Modify' menu choose 'Page Properties' and apop-up window will open. Change the 'Page font' to 'Arial',size 10 with black as the colour. Leave the backgroundcolour and image as it is and then change all the marginsto zero at the bottom of the window.

28 Save the styleYou will be prompted to save the style sheet so save thestyle sheet in the 'Project Start' folder with the name'homeStyle.css'. In the 'CSS Style Definition' window click onthe 'Background' category and give it the colour '*CCCCCCand then click on the box to add a five-pixel padding.

CiS Scyt* OafintUon hf MHCoiumn in homaStylt.ctt

J

T y » *

^ • f*" : . ' ' . 9' • > 9

■» o p " i t 9 .«« . ^» m m M W ! p . . :

^ 1 0 a < . . m • e w w t f '

u n . « e . U « l S t " ' .

( )

33 Left column styleClick on the 'Background' category and add the colour'*EDE095'. Click on the 'Box' category and add a 10-pixelpadding to the top and bottom with 20 pixels for the rightand left, then click 'OK'. Create a 'New CSS style' and thistime name it 'verticalLines'.

32 i PRACTICAL WEB PROIECTS I eCOMMERCE

Page 33: Practical WebProjects 19

Build a stylish front-end for your eCommerce store eCommerce projectEssent ia ltechnique

An easy and quick way to lay out your page is to use the 'Assets' panel available from the'Window' menu. Here you will find that Dreamweaver has organised all your media intocategories. To insert this media onto the page you can drag and drop it onto the page tomake laying out your Web page a breeze. This is also useful for creating colour schemesbecause colours used on your site are recorded.

j a r ~h M d M fl | i f « i 0

IM(« m «CCMM IMKI |PJ 'KCOOW"

G ^ < S ) € « 3

24 Link coloursClick on the links' category at tine left-side of the pop-upwindow. Change the links to '*CCOOOO' with the 'RolloverLink' set to '*660000'. Change the underline style to 'Showunderline only on rollover' then click 'OK' to return to editingyour page.

O 'b .

r » f W i . 8 5

?— m

Q 1J "'J n

I , » « ( » ' ) . C M C I . i f *

25 Add a tableFrom the 'Insert' bar, click on the 'Table' icon and make thetable five rows by one column with a width of 780 pixels.

Change the 'Cell padding', 'Cell spacing' and 'Borderthickness' to zero-pixels and then click 'OK'. Give the pagethe title 'Home Style' in the 'Title' box.

26 Insert imagesPosition your cursor inside the first cell of the table and thenclick on the 'Image' icon in the 'Insert' panel. Browse to your'Images' folder and select your header panel file, beforeclicking 'OK'. Position your cursor in the cell below andbrowse again for the text header file you created.

' . - r f w . I o T .

C M M y t a D t f t w t w * f o r . p e i

* M n t i

9 •9 ! ' a " "9 t© ^ « - ' a

" 1P *

I

29 Add some linesClick on the 'Border' category and fill the details as shownabove. Click 'OK' to leave the 'CSS palette and with yourcursor in the third cell click on the '<td>' tag at the bottomof the 'Document' window. From the 'Properties' paletteselect 'menuTop' from the 'Style' drop-down menu.

v w w I f i w n M q J W y T « ) W

0

t w i ^ ( W W r t l B p I f f • ! / B t i lW w . H i M i w t fl 1 ^ ' M ^ r o w ' . l ' i l l K c w t ' $C 0 > i » i 9 r t w . . T J w ™ ; « i _ < > u *'■ift vpt ertwn y w . It i j It* rj'" ' •

30 Add linksin the grey menu cell type the links and separate them witha vertical pipe, highlight the word 'home' and give it the link'index.html' in the 'Properties' palette, highlight theremaining words in turn giving them the links'catalogue.html', 'about.html' and 'checkout.html'.

v n w M K r f y T w i C w m w o ^

. . . 9 % t a A S ( QW W W '

7 — - -

« • » n . ^ i i ■■ 4 ^ '» ; s u ( i n t * )

m£ J U l t - y r ,

31 Split the cellPosition your cursor in the fourth cell down and select the

'Split Cell' icon from the 'Properties' palette. In the windowthat appears choose to split the cell into three columns thenclick 'OK. With your cursor in the first column make thewidth 180 with the vertical alignment to top.

34 Dotted styleGive the 'verticalLines' style a background colour of'*FFFEBD', Click on the 'Border' category on the left-handside. Fill out the details as shown above giving a one-pixeldotted grey line to the right and left border Click 'OK' andthen create another 'New CSS style' named 'rightColumn'.

35 Pad it outSelect the 'Box' category on the left-hand side and a 10-pixel padding to the top with a 20-pixel padding to the right,bottom and left. Click 'OK'. Click inside the first column and

select the '<td>' tag at the bottom of the document andapply the 'leftColumn' style.

36 A touch of stylePlace your cursor in the middle cell then select the '<td>'tag from the bottom of the 'Document' window and applythe style 'verticalLines' from the 'Style' drop-down menu.Place your cursor in the right column and again select the'<td>' tag applying the style 'rightColumn' to it.

eCOMMERCE I PRACTICAL WEB PROjECTS I J3

Page 34: Practical WebProjects 19

eCommerce project 3uild a stylish front-end for your eCommerce store

Lingo leveller

Technical terms bulldozed

■ CSSCSS stands for 'Cascading Style Sheet' and is a way ofcontrolling the design of many elements on the page. HTMLwas never meant to be a design tool yet it soon became usedas that, so CSS was created to control the design and try to

separate the design from the content.

■ Split the cellTables are frequently used to control the areas of content andas such have become an essential asset in designing Websites. Splitting ceils allovi, the designer to build complexformatting from simple tables so that content can be controlledon the page.

■ TemplatesTemplates are a great way of setting up common features thatwill be found on every page to save having to re-create them

every time a new page is started. Areas of the design can belocked down but this can sometimes cause difficulties for

complex formatting later on.

How does i t work?

Table alignment■ Tables have become an essential tool for the Web designer,they are a great way of providing formatting on a page so thecontent can be controlled and designed to fit a certain browserinstead of just wrapping to fit. Tables can be placed so that textruns around them, which is put fo great use on the catalogue

page. By clicking on the table you can change the alignment intfie 'Properties' palette. The alignment is set to defeuft when

you create a table but if you change it to 'Left' or 'Right' thenthis causes the text to flow around the table, which is useful for

displaying the images next to the text on the catalogue page.

C f t M « C h a i r

T U k t u n k y C h j k f » )c t i M i t n k M J i J k i tn b l u * . » « M k k i * . r a c

t A d y t l o o . r . « h i t «» ( • « • « » > «

< 2 0 0 0 • • o h

- l O O f l l O J ' — t

E a s y K l t c K e nC n a t r

A n o t H t t f o i O r y C l i fl rj v j b k k h l o K

b l u 4 . r a t f i n 4 v « i > w .

■ * h f t j m i t M t < * * l

^ 1

Dining RoomTa b i f t a n dt a t .

T t i s t J b * * « n 4 « h j k

S k t a t a b l e

S * n » Ht h k f M c U k l t k «

« t h j l f M V O I 1

'ipi« t tQhCduww

37 Add some contentIn the left column type in the headline then piess 'Return' toadd a product image. Then add the remainder of the textbelow it. Place your cursor in the right-hand column andadd the text as shown. Add an image (you can use the'home-page-room.jpg' dummy file as a guide).

39 The final styleCreate another 'New CSS style and name it 'horizontalLines'.Click on the 'Box' category and add a five-pixel cell paddingto all, then click on the 'Border' category and fill the detailsin as shown above. Click 'OK' to save the style then clickinside the bottom cell of the table.

41 Create a templateTo save the page choose 'Save as template' from the 'File'menu. Name the template 'store' and click 'Save'. In the

page delete all content in the right and left column makingsure that the style is set to 'none'. After doing this put thecursor in the left column.

38 Headline styleCreate a 'New CSS style' and name it 'heading'. In the 'CSSDefinition' window fill out the details as shown above, thenclick 'OK'. Highlight 'Special Offer' in the left-hand columnand apply the heading style to it, then do the same for the'Welcome' text.

J || 1j JO H t h e i l y f t N K J M t t n

U k t i f M < 7 9 0 0

£ 1 4 0 , 0 0

b o & t > < u b l « > <

F o r m M N e « i « Styl. horiZOOtelLfel- TTl IB IT] [SifliirBif o n t A r t a J , U t t v e i i c , @ S I m 1 0 j g j ^ c o o o o ! « « « •

40 Apply the styleSelect the '<td>' tag in the bottom of the 'Document'window and apply the 'horizontalLines' style to it. Type inthe links as you did in step 30 adding the appropriatehyperlinks to each of the words so that they are the sameas the top menu.

I I

42 Editable regionsSelect the '<tr>' tag from the bottom of the documentand then select the 'Insert' menu, choosing the 'TemplateObjects' option and then 'Editable Region'. Name the area'content', save the template and close the page downbecause it is now finished.

34 I PRACTICAL WEB PROjECTS I eCOMMERCE

Page 35: Practical WebProjects 19

i n i l 11 Ti

W I T H E V E R Y N E W W E B H O S T I N G A C C O U N T

^ Web Hosting from CheapnamesOur web hosting packages offer outstanding value for money and tlie flexibility togrow, whatever your needs.

T h e s e f e a t u r e s a r e s t a n d a r d :• Free email and telephone support• Free d ia l -up access• W e b - b a s e d e m a i l• U n l i m i t e d e m a i l a l i a s e s• Graphical site statistics• On l i ne con t ro l pane l• C G I - P e r l 5 . 8• Server S ide Inc ludes (SSI )• U n l i m i t e d F T P A c c e s s• Denial of Service (DOS) protection• Redundant power supplies to servers• Redundant connectivity

Many more great features! Visitwww.cheapnames.co.uk/hosting.html

^ Advanced Email Protection

f Virus ScanningProtect your computer againstworms, viruses and trojans withour virus protection system.

Spam filteringAdvanced protection fromunsolicited junk mail.

"Cheapnames hasproven Itself many

times to be fast,r e l i a b l e a n d

professional. Veryeasy site to use and

t h e c u s t o m e r s e r v i c eI s f a n t a s t i c "

S T S B u s i n e s s S e r v i c e s

S t a r t U p H o s t• 5 0 M b W e b s p a c e• 5 E m a i l A c c o u n t s• 1 G B D a t a t r a n s f e r• W e b - b a s e d e m a i l• S i t e S t a t i s t i c s• R u n o w n C G I

only

£4 .99per monthor £49.99 p.a.

S t a r t U p H o s t *1 0 0 M b We b s p a c e1 0 E m a i l A c c o u n t s2 G B D a t a t r a n s f e rSecu re webspaceMySQL, PHP, ASPFrontPage Extensions

o n l y

£ 7 . 9 9per monthor £89.99 p.a.

B u s i n e s s H o s t

• 250Mb Webspace• 2 5 E m a i l A c c o u n t s• 4 G B D a t a T r a n s f e r• W e b - b a s e d e m a i l• S i t e S t a t i s t i c s• F i r e w a l l

only

£13.99per monthor £149.99 p.a.

B u s i n e s s H o s t +

350Mb Webspace5 0 E m a i l A c c o u n t s6 G B D a t a t r a n s f e rSecure webspaceMySQL, PHP, ASPFrontPage Extensions

o n l y

£ 1 6 ' ®per monthor £189.99 p.a.

o Broadband/ADSL productsH o m e S O O

U p t o S O O k b s c m ,d o w n s t r e a m , r a t eadaptive 64kbs-250kbs upst ream per month

. 9 9

O f fi c e S O O

Up to SOOkbsdownstream, up to250kbs upstream

only. 9 9

per month

3 Turn your donnain name Into a fullyf e a t u r e d e m a i l a d d r e s s

CheapNames'call US today on 0870 120 8888 or order at www.cheapnames.co.uli

Namesco Limited. Est. 1996. Britannia Court, 5 Moor Street, Worcester. WR1 3DB. *Prices quoted exclude VAT at 17.5%. Cheques and major credit/debit cards accepted.

Page 36: Practical WebProjects 19

eCommerce project Build a stylish front-end for your eCommerce store

Power users' tips

Useful tricks and shortcuts

■ S S T

;C5D

■ Upload your filesTo upload your files to your Web site you must first fill in theFTP details of your site setup. Go to the 'Site' menu and choose

'Manage Sites', and then choose the site from the list and pressthe 'Edit' button. Click on 'Next' until you come to the 'FTPdetails' and then fill in for your host.

Files] Assets

Style L o c a l v i e w

I <5- ^ ^ ^ ! E^ Connects to remote host Marias iBook Users.

7 -OL

a '▶ y

about.html

catilogi s htmlhomeStyle.css

imagesi n d e x . h t m l

Templates

■ Connect to the Web hostOick 'Next' once the details are filled in and then click the

'Rnish' button on the 'Site setup', then 'Done' to finish managingyour site. If your site files are not visible then go to the 'Window'menu and choose 'RIes'. To connect to the host, click on the'Connect' button In the 'Pies' palette.

LjHome Style TT) ■ Local view | j j

a

ite - Ho Put nie(5)arl^s IBoolcUsers.a b o u t . h t m l 'cat alogue.htmlhomeStyle.CSSimagesi n d e x . h t m l

Te m p l a t e s

■ Upload the siteClick on the first Web page in the 'Files' palette, then Shift-clickthe last file and press the blue arrow to upload to the Webserver You will be asked to include dependent files, choose'Yes' for this to upload files such as images, style sheets andother media you may have on your page.

h T I TA . , - -

o L i

43 New from the templateFrom the 'File' menu choose 'New,' in the pop-up windowchoose 'Template' and select the 'Store Template'. When thenew page opens save it as 'catalogue.html' in the 'ProjectStart' folder. In the left column add an image and text asshown in the above screenshot.

45 Make the catalogueIn the first of the smaller cells add the text shown aboveand then place the cursor before the first heading andchoose 'Insert Table.' Make the table one row by onecolumn, 100 pixels wide with five for the cell padding andeverything else set to zero, then click 'OK'.

47 A new pageFrom the 'File' menu choose 'New' and create a new pagefrom the template. Save the page as 'about.html' and thenplace your cursor in the left-hand column. Add anotherimage based on the 'about-us-room.jpg' file and the text asshown in the above screenshot.

44 Divide the pageIn the right-hand page select the 'Split Cell' icon from the'Properties' palette and split it into four rows, typing'Catalogue' into the top cell and applying the style ofheading. Now split the bottom three cells into two columnsand apply a 250-pixel width to each column.

^ - J ' I t « .

C h M C M r

r a s a ' a r

f " " " "

: tJT a M * w i « 4 n « i i

M M I M M

JCampuMrDMkl C M M T M *

i -O

46 Add imagesWith the new table selected choose 'Align Right' from the'Properties' palette. Click inside the table and add a productimage. You can use the dummy image 'chairijpg' from theCD as a guide. Add a table like this for every cell and addthe image to match the description before saving the page.

48 Final textPlace the cursor in the right-hand cell and add the final textbefore saving your file If you open 'index.html' in yourbrowser you can navigate around the site and see how itworks, with your style sheet controlling the maiority of thesite's design.

36 I PRACTICAL WEBPROjECTS I eCOMMERCE

Page 37: Practical WebProjects 19

use T'

,v\V\®

I f e r ^ • i T T - '

W %^,

unique customers - unique hostin|j

Domain Name Registration less than £4.50 paYour own .co.uk, .me.uk, .org.uk - £8.95 tor 2 yearsYour own .com, .net, .org, .info, .biz - £8.95 for 1 year

At Hostway we understand that every hosting customer has unique demands. But there are some thingsyou all agree on.

You want rock solid systems reliability so you can be confident your website is up first time, every time someonevisits. You want the highest quality support and customer service so whenever you need help or have a problem,there's someone with a solution on the other end of the line when you call. You also want innovative, easy-to-useadministration tools because your time is better spent creatively, or on managing your business. That's not allthough. You want support for the latest technologies, and the flexibility that will allow you to build your website andsustain it as it grows, with minimum hassle. And you want all of this at a competitive price.

Too much to ask for? No, we don't think so either.

Universal Features- No set-up fees and a 30-day money back guarantee- Professional support 24/7/365- 99.9% network uptime reliability- Two-tier firewall system- SiteControl 3.1 Control Panel

Supported Technologies- ASP 3, Microsoft® .NET PHP 4, XML- ColdFusion MX- MS Access, MS SQL2000, MySQL

Additional Options- NEW! Hostway Site Builder- Urchin Advanced website analytics- ReaWV/indows Media Server- Dedicated SSL

M e r c h o n tM o n o 0 e r

Featuring H/lerchant ManagerCreate an impressive online store using just yourbrowser with our complete Shopping Cart System.Customise lock & feel, organise by product categories you define, track visitors & Inventory in realtime, analyse 'hot-selling products' and your customer data, send targeted newsletters. MerchantManager is powerful, easy-to-use and UK paymentgateway ready (WortdPay, Paypal etc).

For more information, please visit:hostway.co.uk/ecommerce/merchantmanager/

cail us now on 0808 180 1880 • [email protected] • www.hostway.co.uk _ ( O S T ( N G C O M P A N Y

domain registration • web hosting • resellers • e-commerce • dedicated servers | Australia • Canada • Germany • Korea • Netherlands • United Kingdom • United States

P a r k & I V I a i l f r o m £ 2 9 . 9 5 p aOur Email-only plans feature a full P0P3/SMTP service,business holding page, domain fonwarding and web-basedaccess wherever you are.

Windows® or Linux Shared Hosting

S i l v e r P l a n f r o m £ 7 . 9 5 p c m100Mb web space, 1Gb Traffic, 5 POPS email

G o l d P l a n £ l 4 . 9 5 p c , .200Mb web space, 4Gb Traffic, 10 POPS email

ColdFusion MX Gold Plan £l 9.95 pcm200Mb web space, 4Gb Traffic, 10 POPS email

Ecommerce Gold Plan £24.95 pcm200Mb web space, 4Gb Traffic, Merchant Manager, VSSL

Hostway Dedicated Servers from £149 pcmManaged or Unmanaged, our cost-effective range ofWindows® and Linux dedicated servers are built to satisfythe most exacting of demands. Exceptional performance,scalability, and value for money, using premium Intelhardware, from Celeron to Xeon.Visit www.hostway.co.uk/dedicated/ for further details.

Page 38: Practical WebProjects 19

eCommerce profect Build a banner ad to announce your special offersYour expert guide:

▶ThomasWatson

THOMAS WATSON is the editor of Practical Internet Web Designer, one of tfie UK'slongest-running Internet magazines and has been building Web sites for more thansix years. St ish page furniture is his signature and you'll find examples in both the

1 GoLive 6.0 and Flash MX issues of Practical Web Projects. Visit www.paragon.ra.ukL for more on Practical Internet Web Designer

Build a banner adto announce yourspecial offersDon't expect people to root out any special deals themselvesshow them the way with a cool animated banner created inFireworks MX 2004

▶The brief

Task: Build a banner ad for

your Web siteDifficulty: EasyTime I need: 20 minutes

hile not as unpopular as pop-ups or spam, banner ads are still classedby many Net users as nothing more than an irritation that they must put

H up with. Most people are very wary of clicking on any banner ad, but

▶ On the CD

Ail files for this project canbe found on the CD

why is this the case? Well, this is all down to the way in which many banners areused - most are called in from external sites to advertise a third party productand gain the Webmaster in question a few extra bob in the process.

The advertised products aren't always particularly relevant, and are often nothingmore than unsubtle ploys to hook you onto the site in any way possible. Look at asite like Amazon, Boots and NME, however, and you'll see how banner ads can beincorporated onto your site in a way that not only benefits you, but makes yourvisitors' lives that little bit easier. These sites all contain banners for special offerswithin their own site, drawing attention to an offer the visitor Is likely to be attractedto - after all, they must be on the site for a reason.

We're going to show you how to create an animated banner for our furniture storeIn Fireworks MX 2004. While many of you might be used to Photoshop, Fireworksoffers more In the way of Web-speclfic features, allowing you to create frame-basedanimations without having to open additional tools. Fireworks also has a goodselection of drawing and editing tools that make It very easy to generate the lookyou're after. We're going to create something that will stand out on the page, butwon't tarnish our site. Open up Fireworks, and let's get ready to create our banner.

1A new fi leCreate a new file 936 x 120 at 72 dpi, then select the 'Circletool in the main toolbar and draw a circle that stretches outover the canvas, as you see above. Fill it with a red colour,then apply a drop shadow and a 'Bevel Boss' bevel fromthe 'Effects' menu.

5 Bitmap actionWe're using transparent TIFFs on our sofa images so that wecan apply a background to them. Click on 'Control' 8. 'R' toplace the image anywhere on stage Right-click, and convertit to a 'Graphic' symbol. Delete the original from the stage touse a symbol In the 'Library'.* Create an effective banner

This shape is nothing morethan a cirde - most of thearea of the circle is outsideof the stage, which is whyyou see only this shape

I Our animation uses sixframes, incorporating sixdifferent image positionsand two different sets of text

I We had to create symbolsfor the sofas and the siiced

rectangles, making our livesmuch easier in the process

SAVE A PACKET ONYOUR NEXT SUITE

We deliberately aea^ ouranima^on at exactly twicethe size we needed it - thisnot only helped us workbetter, but also impmved theefhc t o f the fina l an imat ion

I We've used drop shadowsthroughout to help lift thebasic shapes from the page,and give it deptij

We used the PasteInside' option toplace our imagesinside each of theslanted rectangles

9 Picture rotation

Click on 'frame two' to edit this, drag the purple slicecarefully over the green one. We want to create the effect ofthe slices rotating to make the animation more interesting,so repeat this with the blue and green slices, then followthe same principles to adjust 'frame three.

38 I PRACTICAL WEB PROjECTS I eCOMMERCE

Page 39: Practical WebProjects 19

Build a banner ad to announce your special offers eCommerce project

5 ^\ /

. ^ 4

^ « .Q A

y

Ct 9'.a « ■SAVE A PACKET ON■YOUR NEXT SUITE

•"ao / /0 < K

2 Banner textClick on the 'Text' tool, then enter your banner text and styleit up using the 'Properties Inspector' (we've gone for the'Impact' font, and we've made the bottom line larger).Having done this, apply a drop shadow then adjust the sizeof your circle to fit perfectly with the text.

3 More shapesDraw a rectangle around 140 x 300 pixels anywhere on thestage. Click on 'Control' & 'T' to enter the 'Free Transform'mode, then rotate the rectangle by around 30 degrees.Once you've done this, place this rectangle just to the rightof the circle's edge.

4 A splash of colourClick on your rectangle, then press 'Control' S. 'Alt' &, 'D' toduplicate this shape. Space it out evenly then repeat this sothat you have three evenly spaced shapes. Colour each inusing the 'Fill' palette in the 'Properties Inspector' - we'vegone for green, blue and purple.

6 Paste inside

Drag an instance of the sofa symbol onto the stage thenright-click on it and choose 'Cut'. Click on your first slantedrectangle, right-click on it and choose 'Paste Inside'. Youshould now see your image inside the rectangle,maintaining the background colour that was there before.

7 And repeat...Repeat the above two steps for the other two slantedrectangles, until you end up with something like the above.We've also applied a drop shadow to each for added effect.Right-click on each rectangle in turn and choose 'Convert toSymbol' and turn each one into a 'Graphic' symbol.

8 More frames pleaseOpen the 'Frames' palette at the bottom right of theinterface, then double-click on the first frame and changethe duration to '50% of a second'. Click on the 'Menu'

button and choose 'Duplicate'. In the dialog box thatappears, enter '2' to create two duplicate frames.

'TT'S *^--*1"-

13% \m i» l f . !

i fl i f

x i t i j — I f - — - — j

10 The second half

We've done half our animation, so let's start sorting out thesecond bit. Thankfully we've done the hard graft, so click oneach frame in turn, then choose 'Duplicate'. Make sure youchoose '1' and click on the 'At the end' radio button. You

should end up with six frames at the end of this.

11 Different text

Click on 'frame four', then on the 'Text' tool. Select all of thetext then write the above over the top Again, we've madeeach line have a slightly different font size to make it all fitbetter Click on the 'Select' tool, choose the 'Text' box, thencopy and paste it into frames five and six.

12 Export it outGo to 'File', 'Export Wizard', then click on the 'File' tab and

change the dimensions to '5096 of original size'. Next up,tinker with the 'GIF' settings to try and get the bestcompromise between size and quality When you're happyclick on 'Export' to save your file for the Web

cCOMMERCE I PRACTICAL WEBPROjECTS I 39

Page 40: Practical WebProjects 19

eCommerce project Create a pop-up window to show extra informationYour expert guide;

T h o m a sWatson

THOMAS WATSON is the editor of Practical Internet Web Designer, one of the UK'stongest-running Internet magazines and has been building Web sites for more thansix years. Stylish page furniture is his signature and you'll find examples in both theGoLive 6.0 and Flash AAX issues of Practical Web Projects. Visit www.paragon.co.ukfor more on Practical internet Web Designer

Create a pop-upwindow to showextra informat ionIf used properly, pop-up adverts can benefit your visitors byletting them see additional information on a particular offer orproduct. We'll show you how this is done

The brief

Task: Build interactive pop-

ups for your siteDifficulty: EasyTtme 1 need: IS minutes

On the CD

All files for this project canbe found on the CD

0

sk virtually any Web user and they'll say that their two least favouriteparts of using the Net are spam and pop-ups. We've all been infuriated

I at some point by that irritating barrage of unwanted exit pop-ups andpop-unders, making it extremely difficult to actually find the page you werebrowsing for in the first place.

Let's face it, most pop-up ads are annoying and offer the visitor nothing in theway of extra value. This needn't be the case however, because pop-ups can actuallybecome a key part of your site, offering your visitors vital extra information withoutasking them to keep clicking back. How many times have you visited a site likeAmazon or Dabs to be confronted with pop-ups regularly during your spell on thesite? These pop-ups don't rile people, however, because they're there as much forthe benefit of the visitor as the site itself

In our tutorial, we're going to show you how to create a pop-up window thatdisplays information about a special deal that's currently available on the Web site.In essence, it is advertising in a similar way to most pop-ups, but our pop-up onlycontains references to our site, and aims to show the visitors how they can savemoney - if they don't like it, they will close the pop-up, but they won't feel like we'rebombarding them with advertising.

We're actually going to create three different pop-ups. The first will appear assoon as the main page is loaded, while the second is less intrusive and will onlypop up when the visitor moves their mouse over a button. The third method willdisplay a pop-up when the visitor chooses to click on a link, representing the leastintrusive method of popping up information available.

T h e R o s « K « r R e g e n t y

7 Take a look

Believe it or not, that's all the coding you need to makeyour pop-up appear every time someone visits your mainpage. To test the pop-up, press 'F12' on your keyboard whileworking on the main page to preview this page - the popup window should appear as the main page loads.

8 Another method

Delete your behaviour with the sign and then dick onthe 'Special Offers' button under the logo on the main page.With this selected, go to the 'Properties Inspector' andremove the 'javascript::' text from the 'Link' box. Replace thiswith a to make th is but ton act ive.

1 The existing siteOpen up 'home page blank.htmr from the cover disc inDreamweaver MX 2004. You'll notice that the page isactually finished - this is so we can start working on ourpop-up. Click on 'Control' & 'N' to create a new document,then on the 'Restore' button in the top-right of the interface.

W H E N Y O UP U R C H A S EA P A R K SC R E S C E N TT O D A Y !

4 Tying up the pop-upFinish the pop-up by entering some text and importing'logosmall.ipeg'. Once you've done this, press 'Control' 8. 'f tobring up 'Page Properties'. Choose 'Title/Encoding', and thenenter a title for your page With this done, save your file as'popup.html' then head back into your main page.

9 Different action

Apply the same 'Open Browser Window Behavior' as before.Click on the part that says 'OnPageLoad' to bring up a dropdown menu. Browse through this menu and choose'OnMouseOver' to trigger the pop-up when the visitormoves their mouse over the button.

40 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 41: Practical WebProjects 19

Create a pop-up window to show extra information eCommerce project

How does it work?

He Types /Ettorr0ODx«)O,><toninecO(B32 X 62^, Maxn«2«0(1024x768, Maidmed)(WebTV)

Pap-t4)

> ! Ve e d : : S 6 . 0 v K l c ^ p e r w c fl n d

2 The right fitOne of the main characteristics of a pop-up is its size; solet's fix that. Click on the right-hand status bar at the bottomto bring up your page sizes - click on 'Edit Sizes'. Enter thefigures '340 x 380' and rename this 'PopUp'. Back in theinterface, choose this window size using the 'Status Bar'.

5 The first methodThe first way of linking a pop-up is to have it appear whilethe page loads. To achieve this click anywhere on the bodyof your main page and then on the '+' sign, which you'llfind under 'Behaviors' before selecting the 'Open BrowserWindow' option.

3 Design your pop-upMost of the best pop-ups you see are basic affairs, keepingtheir message simple. Import the 'savebigmoneyjpeg' filefrom the cover disc and insert the sofa image. This formsthe basis of our pop-up, although you should feel free totinker with the basic design as much as you like.

6 Somewhere to linic toThis will automatically bring up the 'Open Browser Window'dialog box. Click on the 'Browse' button and navigate yourhard drive to find your 'popuphtm' file. Once you've donethis enter the dimensions for your new window - exactlythe same as the 'popup' file ('340 x 380').

Basic behaviours for your wincdow■ You'll discover in this tutorial we're using basic behavioursfor the pop-up window. You might be wondering why we're

bothering with this technique, when the '_blank' option whitesetting links will open any page in a new window. It's all downto the specific size we want our window to be - as you cansee, using behaviours allows you to tell Dreamweaver exactlywhat size you would like the linked window to appear on thescreen. If you used other methods you'd run the risk of thepop-up opening in a maximised window, which wouldcompletely ruin the effect you're after.

10 And anotherTo see the final method in action, remove this behaviourfrom the button in question then select the Click here' text.Change the 'Link to and apply an 'Open BrowserWindow Behavior' - this time change it to 'OnClick, so thepop-up will only appear when the visitor clicks on the link.

Lingo leveller

11 In action

Press 'F12' to see your pop-up in action. While the endresult looks the same, you've learned three different waysof bringing pop-up windows to your visitors' screens. Thislast method is the most visitor-friendly but if you have a bigoffer, you might want to use either of the other two options.

Technical terms bulldozed

■ Behav io rsThese built-in components in Dreamweaver use DHTML and

lavaScript to ^ve you a wide array of additional functionality.Our tutorial uses the same behaviour each t ime with different

settings, showing you the huge amount of options at yourdisposal. Other behaviours allow you to play sounds or controlpop-up menus, although you can download more behavioursfrom the Macromedia Web s i te (www.macromedia .com) .

■ Properties InspectorThis section of Dreamweaver MX 2004 contains most of tfie

options that you are likely to use for a wide variety of toolswithin the program. This is possible because the panel iscontext sensitive, meaning that it changes its options accordingto the tool currently seleaed - Macromedia has attempted toensure that this version of Dreamweaver is the easiest ever,because the 'Properties Inspector' has been improved so much.

eCOMMERCE I PRACTICAL WEB PROjECTS I 41

Page 42: Practical WebProjects 19

eCommerce project Use ASP to add a product database

Rache l

A n d r e w

RAO<EL ANDREW runs her own Web solutions firm at www.edgeofmyseat.confi and is a memberof the Web Standards Project on the Dreamweaver Task Force, which is designed to promote bestpractices in the support and use of W3C Standards in Dreamweaver. When not developingdynamic applications using a wide range of scripting languages, Rachel enjoys nothing more thanspending time with her daughter and updating her Web log at www.rachelandrew.co.uk

« d g e i j < n i y * e » t ^

Use ASP to add aproduct databaseDiscover how to manage your product catalogue more easily aswe demonstrate how to add a database to your store using ASP

The br ief

Task: Implement a productdatabase on your site

using ASP and AccessDifficulty: IntermediateTime I need; 2 hours

On the CD

All files for this project canbe found on the CD

0Lingoleve l le r

Technicalt e r m sbul ldozed

■ ASPAaive Server Pages (ASP)isn't a language in itselfbut is a Microsoft

technology. You can usea variety of scriptinglanguages for ASR mostcommonly used areVBScript and Iscript.

■ VBScriptVBScript is the scriptinglanguage used in thisproject. It is a Microsoftscripting language and ismost commonly used forASR making it easier tofind articles and tutorials

for VBScript.

nee you have created an anractive Web site, you need to get yourproducts on there. One way of doing this is to add the products one at atime to the Web site's HTML pages, formatting each produa Individually.

However, this approach can be very time-consuming.Unfortunately things get worse if you need to change or remove a product - if

you have pages displaying eight products at a time and you need to delete one,you'll have a gap where that product was. You then have to reformat the page,moving the other products to fill the gap Also, if you decide the products would lookbetter in a different order, you have to remove them all and format the pages again.

Adding your products to a database means they can easily be displayed on thepage that is using ASP Because you are using Dreamweaver to build your site youcan utilise the built-in functionality to facilitate this - and to create a basic database-driven catalogue you won't need to do any hand coding at all!

In this tutorial we will be using Microsoft Access to create a database for ourfurniture store. Although it's technically a desktop database. Access can besuccessfully used on the Web to store data and provide a user-friendly interface todesign and create your database. Once the products are stored in the database, we'lluse Dreamweaver's Server Behaviors to add free extensions to get the data from thedatabase to the page. By the end of the tutorial you'll be able to design a database,connect to it and use Dreamweaver to create a database-driven product catalogue.

( X ? O M

f f , » y s « *

" i s r ;

c - i T T

Manage your catalogue more effectivelyOnce you have connected to the database in Dreamweaver you can see it in the 'Databases'panel. To use the data you need to create a 'Recordset', which contains data from the databasethat you can use on your pages. We drag placeholders that represent the dynamic data fromthe 'Recordset' in the 'Bindings' panel into the 'Design View". The real data appears whenviewed either in 'Live Data View', or in the browser

I f l i t S t . i r w r t T « a k l i M M

[ 3.^.^ \

f 3 ^' m H m m *

\ ^

. t L

1 Create the database

The first step is to create an Access database for products.Open Access and select 'File', 'New'. Access will then promptyou to save the new database. Select a location on yourhard disk - it doesn't need to be within your site - andsave your new database as 'homestyle.mdb'.

i Mkros^ Access • [tbIProducts: Table]1 : 3 R t e ^ looto ^JKndow H e * J

. - > ± :F k l d u m c 1 D M a T v n 1

1 productID A u t o U j m b e rproductName T e x t

productOesc M e m o

productPnce CurencyI p r o d u c t P h o t o T e x t l V

4 Complete the table designThe fields set as 'Text' need to have their size set to ensurewe can insert our data into them. Select 'productName', setthe 'Field Size' to '200', and set 'productPhoto' to '100'. Right-click on 'productID' and select 'Primary Key' to make it thedatabase tab le

Stt rMMtta i for lkMi i i ; m

S i t e D e fi n i t i o n

Do ycu wart lo vntk Mith • M

ONo, ldono l«<Mnt t< iu te<® Ym. I w«nt to UOT a Mcvt

M tedYiotogi «uch «»

sfvw tectnctoav

xASP.NET.ASP,JSP,OtPHP?

j a

7 Open DreamweaverWe can now combine the database and our site inDreamweaver. Open the site in Dreamweaver and tell it youare working with ASP In 'Manage Sites', edit the site to use aserver technology and select 'ASP/VBScript' as the requiredserver technology

M I PRACTICAL WEB PRO|ECTS I eCOMMERCE

Page 43: Practical WebProjects 19

Essent ia ltechnique

Use ASP to add a product database eCommerce projectTo develop with Dreamweaver MX, Access and ASP you will need to install IIS (Windows2000/XP Professional) or PWS (Windows 98) on your computer. IIS will be on your Windows CDand can be added from 'Add/Remove programs', 'Add/Remove Windows Components'. In thelist of available 'Windows Components', check 'Internet Information Services (IIS)' and clicic'Next' to begin the installation. To check the installation, visit http://localhost with your browser.

Power users' tipsMicrosoft Access • [tbiProducts : Table]lU Fie £dit vtew Inser t loo ts Window Be lp

UR d d N m e 1 D » t » T v o e 1

productID T e x t

productName T e x t

p r o d u c t D e s c T e x t

productPnce T e x t

T e x t

I [

13 Microsoft Access • {tbiProducts : Table]B t e e d i t » e w I n s e r t l o o t s b e t p

F w M M a m 1 C U t a T v c e 1

Il 1 1 1 1 1 1 1 1 II M 1 U 1 IIp r o d u c t I D t u t a H j n t t ix o d u c t N s n e T e x t

p r o d u c t D e s c M e m op r o d u c t P r i c e Q x r e n c y |p r o d u c t P h o t o T e x t

2 Create the products tableThe products on the catalogue page have a name, price,description and photograph, which need to be stored in thedatabase. Create a table In 'Design View' In Access. Save as'tbiProducts' and create fields for 'productID', 'productName','productPrlce', 'productDesc' and 'produaPhoto'.

3 Set the Data TypesAccess creates the new fields as a 'Text Data Type', which Isa field for the Input of text. We need to change some of ourfields - 'productID' needs to be an AutoNumber','productName' remains as 'Text', 'productPrlce' Is 'Currency','productDesc' is 'Memo' and 'productPhoto' stays as 'Text'.

^ M f c r o i o f t t e t w t • ; T i M H3 9 t e * t » « » » w >

- i a fi A i f ' i f t ' r - i i y r i U ,iWlky cKw bl

hgN Mm I«l aid y«Naw Fmiutm p«i•(<IO9<IX<90'

5 Add productsWe can now add the products to the table Use the sampleproducts to add them one per row. For example, under'productName', add 'Childs Chair', under 'productDesc' add adescription and so on. The 'AutoNumber' field for 'productID'will be completed automatically on moving to a new row.

6 Add the photographsWe are not going to actually store the photographs in thedatabase; instead we store the name of the image file.Save all product images in a separate folder from the othersite images and then add the relevant filename to the field'productPhoto' for that item in the table

" P r o v i d e r = M i c r o s o f t . J e t . O L E D B . 4 . 0 ; D a t a

S o u r c e = C ; \ p a t h \ t o \ h o m e s t y l e . m d b ; J e tO L E D B : D a t a b a s e ? "

8 Change the document type to ASPOpen 'catalogue.html'. We need to turn this page into anASP page to add dynamic catalogue data to It. In the'Databases' tab of the 'Application' panel, clicl<. 'Document

Type". In the dialog box that opens, select 'ASP/VBScrlpt'. Thefile extension will change to .asp and linked pages updated.

9 Connect to the database

Click on the '+' in the 'Databases' tab and select 'CustomConnection String'. Under 'Connection Name', type'connCatalog'. For 'Connection String' type the code shownabove. The path under 'Data Source' must be the path towherever you saved your database. Click 'Test' to check It.

Useful tricks and shortcuts

ftbtProductj ; Tsbte

c r a i » < n l D

f f o m c n m T « i ( tv o d i c C i * * : H a w

e r i ) d ^ l P > < « C u r e n c ya a i u i i ^ i D T n t

r t i M V ,

N m M t Y t S j N O

r « .

■ Hiding out of stocl( productsIf products frequently go out of stock and then come back inagain, you won't want to keep deleting and then re-creatingthem. To be able to hide products, create a new column in yourdatabase, call it 'productActive', make it a 'Data Type' of 'Yes/No'and give it a 'Default Value' of 'Yes'.

Recordset

N * " ® ' I r s P r o d u c t s ' ^ |Connedion: jconn^taiog jviH Define.., ]

S e L E C T "SQL; RlOM tbl>roducts

WHERE productActive • true

Variables: ^ -jN a m e D e f a u l t V a l u e R u n - t « n e V a l u e

■ In or out of stockIf products are in stock, the field 'productActive' is 'Yes'. If theyare out of stock, the field is obviously 'No'. Edit your 'Recordset'by opening it and switching to 'Advanced View'. Edit the SQL toread; 'SELECT ♦ FROM tbiProducts WHERE productActive - True'.This will only selea the active product rows.

■ Make sure it worksIf you set some of your products to be active and some not,you can test it all works from within Dreamweaver by clickingthe 'Test' button in the 'Advanced Recordset' dialog. You shouldonly see rows that are set to 'Yes'. Remember that you need toset new products to 'Yes'!

eCOMMERCE I PRACTICAL WEB PRO|ECTS I 43

Page 44: Practical WebProjects 19

eCommerce project Use ASP to add a product database

Online resources

Find out more on the Web

Name of site: DMXZoneURL: www.dmxzonG.comDMXZone is a huge and constantly g^wing resource fordevelopers who use Dreamweaver - with a focus on dynamicsite development. The site has a range of tutorials, extensionsand other resources.

Name of site: The Dreamweaver TeamURL: www.dwtGam.comIf it's Dreamweaver expertise you're after, this site has it oozingout of every pixel, and is packed with articles, tutorials,extensions and support.

Lingo leveller

Technical terms bulldozed

■ RecordsetA 'Recordset' is the collection of records that is retumed

when we make a connection to the database and use SQL torequest information. A 'Recordset' might contain all of the datafrom one table, one row, or combine data from several tables

using a join.

■ SQLStructured Query Language or SQL is the language used to talkto databases. In Dreamweaver, the 'Simple Recordset' dialog weuse here can write basic SQL queries to retrieve data. For moreadvanced queries you will need to use tfie 'AdvancedRecordset' dialog and understand more of the SQL language.

■ OLE DB Conneaion StringAn OLE DB Connection doesn't need to go through ODBC andtends to be fester than a DSN connection, which may be thetype of connection you have seen before. In the case of Access,databases are more stable when multiple users are connectingto the database.

. . . . .

. i - 51

• n i l ^ 1 m i l V

10 View the connectionYour new connection will appear in the 'Databases' tab ofthe 'Application' panel - expand the tree to view tables andcolumns inside them. A new folder named 'Connections'has been created, which contains the 'connCatalog' file,included on any page that uses this connection.

15 View with Live DataTo test whether your product is being displayed from thedatabase, click the 'Live Data Mode' button to the right ofthe 'Design View' button in Dreamweaver It can sometimestake a few seconds to display but it should show your firstrow from the database, including the photograph.

20 Install the extensionAfter downloading the extension, double-click it to launchthe 'Extension Manager' and install it in Dreamweaver Onceit's installed, you will need to restart Dreamweaver to beable to use the extension. In the 'Server Behaviors' panel,click'+' and select the 'Horizontal Looper 2.

N d m e ; r s P r o d u c k s

CofxwctMn: ;||||||||j|||||[| I I ITfltte; jtfaProducts

0*™=: ® Al O Selecttd;1 3 L

(Advanoad

: h

11 Create a RecordsetTo display dynamic items we need to create a 'Recordset' ofthe data in our table Click the 'Bindings' tab of the'Application' panel, click the'+' and selea 'Recordset'. Call theRecordset 'rsProducts', selea 'connCatalog' as the connectionand Dreamweaver should then display the table 'tbIProducts'.

16 Format the currencyNow that you have viewed with Live Data you can probablysee that the price of the product is displayed as 29 insteadof 29.99. We need to use VBScript to format this as currencySelect 'productPrice' in the 'Bindings' panel and, under'Format', select 'Currency' and '2 Decimal Places'.

21 Use the extensionSelect the entire contents of the table cell - you may findthis easier in 'Code View'. In the 'Server Behaviors' panel,select the 'Horizontal Looper' extension. In the 'Horizontal

Looper' dialog that opens, set it to show two rows and twocolumns of data. Click 'OK' to apply the behaviour

M I PRACTICAL WEB PROIECTS I (COMMERCE

Page 45: Practical WebProjects 19

Use ASP to add a product database eCommerce projectEssent ia ltechnique

Password protecting your database means that even if somGone downloads it, they will not beable to open it. To protect your database open Access, and then select file'. Open'. Chooseyour database and then click the arrow on the 'Open' button and select 'Open Exclusive'. Withthe database open, select 'Tools', 'Security', 'Set Database Password' and add your passwordto the dialog. Add: 'Password=YOUR_PASSWORD' to the end of your ASP connection string.

• Q

- i i

L s .

J*.

'» T

12 Your Recordset dataA 'Recordset' is a collection of data pulled from yourdatabase. Clicic 'Test' to see the data in this 'Recordset',which is everything in the table. Cliclc. 'OK' to create the'Recordset'. In the 'Bindings' panel, you can now expand the'Recordset' to see the fields that are inside.

1 ^ 1I'lPTOOUCM prCpflWWMn*) > EHifK*ri«n flk

mn ' -nn ' t t i r " '

13 Display data on the pageSelect the name of the first product on the catalogue page- 'Childs Chair'. To get this data from the database, while

keeping this text selected, drag the 'productName' field fromthe 'Bindings' panel to replace the text. Do the same for the'productDesc' and 'productPrice' fields.

— , i

OO

- s s

' S S r[ E -

14 Display a photoWe stored the names of the photos in the 'productPhoto' fieldwhen creating the database. Select the photo for the record,and select 'productPhoto' in the 'Bindings' panel. Under'Binding', select 'img.stc'. In the 'src' field in the 'PropertiesInspector', add the directory name before the 'ASP' code.

17 Add dynamic alt textTo add alt text to a dynamic image, you can have an 'alttext' field in your database or use the product name. Givethe image empty alt text in the 'Properties Inspector', switchto 'Code View' and drag the product name from the'Bindings' panel to between the quotes.

18 Delete the static dataDelete all of the other items from the page. If all has gonewell, you should be left with the one item that we havecreated as a dynamic item, which is pulled from thedatabase. Only one item will be displayed in 'Live Data' or inthe browser

I t o a o fi

19 Horizontally loopingWe need to display all of the data in 'wo columns, thismeans that the default 'Repeat Region' behaviour will repeatthe data down the page. However, there is a free extensionthat will help Go to www.dwteam.com/extensions iddownload the 'Horizontal Looper' extension.

22 Add the classesThe original design used the 'rightColumn' class on the tablecells that contain the product data. We can add this class tothe cells created by the horizontal looper by selecting thecell while in 'Live Data View' and applying the class to it,which will apply to all cells.

23 Previous and nextTo view all of the products without showing them on onepage, we need to add 'Previous' and 'Next' links. At thebottom of the page, underneath the products table, add thetext links 'Previous' and 'Next'. These will allow customers topage through the data.

24 The Next linkSelect 'Next' and in the 'Server Behaviors' panel, select'Recordset Paging', 'Move to Next Record'. In the dialog thatopens, select the 'Recordset rsProducts'. If you preview thisin your browser, the page should initially load with fourproducts. Clicking 'Next' will display the final two products.

eCOMMERCE I PRACTICAL WEB PR0IECT5 I M

Page 46: Practical WebProjects 19

eCommerce project Use ASP to add a product database

Power users' tips

Useful tricks and shortcuts

■ Upsizing to MS SQL ServerAccess is good for small, low traffic sites but if your site is verybusy you may find it slow and unreliable. Fortunately it is veryeasy to upsize an Access database to MS SQL Server. With thedatabase open in Access, select 'Tools', 'Database Utilities','Upsizing Wizard'.

Uptl^ Wizard

After you dhjc the Next button, youl su

C**cd I

■ Create a new databaseIf you don't haw SQL Server installed locally or permission tocreate databases, you can selea to use an existing database,because you will be using a SQL Server database created onyour Web hosting company If you have SQL Server locally andhaven't yet created a database, selea Create New Database',

■ Finishing offEnter your database login information for creating a database, orselect a DSN on your machine that connects to the livedatabase. Selert the tables that you wish to export and stepthrough the wizard. For a simple database, accept the defaultsand click 'Rnish' to export tables and data.

Blo asp*1 Code Split I Design TttJe: Home StyteToniirie FumitLre< 1 8 L A N G U A G E - - V B S C R I P T - I ><% 8LANGUAGE--^SCRIPT - % >

< ! - -♦ i n c l u d e f i l e - ^ C o n n e c t i o n s / c o n n C a t a l o g . a a p " — >< %

D i m r s P r o d u c t a

Dim raProducc3_numRows

Set raProducta » Server,CreateC^i iectCADODB.RecordaetraProducca.ActiveConnection « J«<_connCat«log_STRINGr a P r o d u c t a . S o u r c e « " S E L E C T * F R O M t b l P r o d u c t a "

r a P r o d u c c s . C u r a o r l y p e » 0

r a P r o d u c t a . C u r a o r L o c a t i o n « 2

25 The Previous link

Repeat for the 'Previous' link, using 'Move to PreviousRecord'. If you get a browser error, Dreamw/eaver has addedan additional statement. In 'Code View', comment out one<96@LAN6UAGE.'VBSCRIPT''%> with a single quote<%'@LANGUA6E."VBSCRIPT"%>. Remove the comment.

{WToaurtisi iw

j

fl S R H- -

H O C o r o a n

• t a * j m t

H * 9 U C . h M K t a i «

Q t t r . " i .

27 Hide the Next linkSelect the 'Next' link in 'Design View'. We are going to dothe opposite of what we did for 'Previous' and hide the'Next' link when we have displayed all items in the'Recordset'. In the 'Server Behaviors' panel, select 'ShowRegion' and then choose 'Show Region If Not Last Record'.

26 Hide the linksSelect the 'Previous' link in 'Design View". In the 'ServerBehaviors' panel, select 'Show Region' and choose 'ShowRegion if Not First Record". This will hide the 'Previous' link ifthere are no previous items in the 'Recordset' that can bedisplayed - therefore making this page the first page

Recordset -

IrsProductsjcomCatafog i r 1 Otfn... 1

Ta b l e ; t b I P r o d u c t s J iColumns: 0 Al Q Selected:

w o d j C t A r t i v e

^ v o d i C t l D 1D t ( x k j c t N 4 n ep r o c k j c t P f « t o

L Cancel

Sort: prodixtName

28 Reorder productsTo reorder the products in the database you can edit the'Recordset'. Double-click on the 'Recordset' in the 'ServerBehaviors' panel to edit it. At the bottom of the 'Recordset'dialog is a label. 'Sort' will organise the 'productName' filedalphabetically 'Ascending' sorts from A-Z.

29 Test your siteTest your new produa catalogue in the browser. You shouldbe able to view your products on the page four at a time.Click the 'Next' and 'Previous' links to see the rest of the

catalogue Add products to the database and tweak thedesign until you are happy

30 Upload your siteTo upload your site to a live server you will need to uploadyour database to the location specified by your host. Theonly thing you will need to change is the path to thedatabase in the connection. Check with your host what thepath to the database is.

46 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 47: Practical WebProjects 19

unique customers - unique hosting

Domain Name R||j|Kfation less than £4.501Your own .co.uk, .™| rg.uk - £8.95 for 2 yearsYo u r o w n . i n f o , . b i z - £ 8 . 9 5 f o r 1 y e a r

At Hostway we understand that every hosting customer has unique demands. But there are some thingsyou all agree on.

You want rock solid systems reliability so you can be confident your website is up first time, every time someonevisits. You want the highest quality support and customer service so whenever you need help or have a problem,there's someone with a solution on the other end of the line when you call. You also want innovative, easy-to-useadministration tools because your time is better spent creatively, or on managing your business. That's not allthough. You want support for the latest technologies, and the flexibility that will allow you to build your website andsustain it as it grows, with minimum hassle. And you want all of this at a competitive price.

Too much to ask for? No, we don't think so either.

- No set-up fees and a 30-day money back guarantee- Professional support 24/7/365- 99.9% network uptime reliability

- SiteControl 3.1 Control PanelFeaturing IVIerchant IVianager

S u p p o r t e d Te c h n o l o g i e s C r e a t e a n i m p r e s s i v e o n i i n e s t o r e u s i n g j u s t y o u r- ASP 3, Microsoft® .NET, PHP 4, XML I'^ser with our complete Shopping Cart System.

r w c ' ^ / l Y C u s t o m i s e l o o k & f e e l , o r g a n i s e b y p r o d u c t c a t e g o -- C o l d l - u s i o n M a ^ i n v e n t o r y i n r e a l -- MS Access, MS SQL2000, MySQL time, analyse 'hot-selling products' and your cus

tomer data, send targeted newsletters. MerchantA d d i t i o n a l O p t i o n s M a n a g e r i s p o w e r f u l , e a s y - t o - u s e a n d U K p a y m e n t- N E W ! H o s t w a y S i t e B u i l d e r ( Wo r i d P a y, P a y p a i e t c ) .- U r c h i n A d v a n c e d w e b s i t e a n a l y t i c s , 1 3 ; , .- Rea lA /VindOWS Med ia Serve r hos tway.co .uk /ecommerce /merchan tmanager /- Dedicated SSL

from £29.95 paOur Emait-onlyplans feature a full P0P3/SMTJ|p e,business holding pa| domain foijiiw{dji i |[ -ased access wherever you are.'

Windows® or Linux Shared Hosting

S i l v e r P l a n f r o m £ 7 . 9 5 p c m100Mb web space, 1Gb Traffic, 5 POPS email

G o l d P l a n £ 1 4 . 9 5 p o m200Mb web space, 4Gb Traffic, 10 POPS email

ColdFusion MX Gold Plan £19.95 pcm200Mb web space, 4Gb Traffic, 10 POPS email

Ecommerce Gold Plan £24.95 p™200Mb web space, 4Gb Traffic, Merchant Manager, VSSL

Hostway Dedicated Servers from £149 pcmManaged or Unmanaged, our cost-effective range ofWindows® and Linux dedicated servers are built to satisfythe most exacting of demands. Exceptional performance,scalability, and value for money, using premium Intelhardware, from Celeron to Xeon.Visit www.hostway.co.uk/dedicated/ for further details.

call us now on 0808180 1880 • [email protected] • www.hostway.co.ukdomain registration • web hosting • resellers • e-commerce • dedicated servers | Australia • Canada • Germany • Korea • Netherlands • United Kingdom • United States

Page 48: Practical WebProjects 19

eCommerce project Create a complete eCommerce site with ActinicROB CLYMO is the Editor of Web Pages Made Easy, one of the UK's longest runningmagazines dedicated to creating Web sites. Rob has been contributing to Practical WebProjects since the first issue and has worked extensively as a freelance Web designerin the past. You can see an example of Rob's work for a Lymington-based watch shopat www.discountwatchshop.com

Create a completeeCommerce sitewith Act inicCreating a great looking and highly profitable eConnmerce Website might sound extremely difficult, but thanks to ActinicCatalog 6 it couldn't be easier

The brief

Task: Create your ownonline eCommerce store

with Actinic Catalog 6

Drfficulty: EasyTime I need: 2 hours

On the CD

All files for this project canbe found on the CD

hile it is possible to create a great looking online store usingDreamweaver before adding a robust product database using server-sidescripting, you can also craft a slick Web-based enterprise without the

need for any real technical skill or programming know-how, thanks to off-the-shelfeCommerce applications such as Actinic Catalog 6.

This powerful eCommerce application has been around in various guises forseveral years now, and the latest version bristles with the sort of tools normallyreserved for bespoke sites designed by hardcore programmers. Combining back-endfunctionality with a raft of attractive templates, Actinic is ideal for the novice user, oranyone who needs an online eCommerce presence without investing hours of time.It also means that you can create and manage your entire eBusiness operation fromwithin the space of one small application on your computer.

Our cover disc software gives you the chance to get started, allowing you tocreate a secure online catalogue with up to 25 products. The program containseverything from design templates to high-tech features such as the ability toconfigure your site to take credit cards in a risk-free environment.

For further information pop along to www.actinic.co.uk where you will be able tofind out about the software and check out the other mighty eCommerce applicationswithin the Actinic range.

Set up shop online in just two ho

\ Adding your own

donm . .oume,including makingthe provision forlarger imagesthat open up inpop-up windows

1 Find your siteKick off by Installing the Actinic software from the CD. All ofthe files relating to your first eCommerce store will becontained Inside a central directory, which will be called'Sltel' by default. You'll find this in the 'Sites' folder tuckedinside the application.

' M4 Pick a productLocated Immediately underneath these pages Is the'product catalogue'. This is effectively a database that canbe modified using the dialog windows as shown, which willappear whenever you dick on a specific product or arealocated Inside the Interface.

ItCitaieg |c?0.d« )

1 9 8 « P o r t » U « l p

a H o r n .B S p N > i i O f » «

e (Sa I n b o d u e t e na W « l c a i i » P « g *B A b ( M i U « P « o eB H o w To r t M i U < P » g eB C o n t a c tB S p e 6 i l . P « 0 »B U ^ P « g e

O f f i n . P « 9 < i F W * C W ^

NswPioduci QrM> ]t * t t t m

f M C M ^

7 Basic productsWith what Is effectively a blank canvas, adding a newproduct to the structure of your site is now easy Right-clickon the small green 'Online-Catalogue' Icon as shown andthen select the 'New Section' option from the pop-upmenu. This will open a window for you to fill In the details.

W I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 49: Practical WebProjects 19

Essent ia ltechnique

Create a complete eCommerce site with Actinic eCommerce projectAll businesses have to adhere to trading laws and have its own code of practice along withfollowing the straight and narrow where things like VAT matters are concerned. Use the'Business Settings' option, which is located under the 'View' menu to edit these very settings.Outline your terms of business, add any relevant contact details and VAT descriptions. It's notglamorous but an essential area of the program, which shouldn't be overlooked.

f i l e Ed i t ^ l ew aa» ion H f l uwkeepmg lapo " * Advanced Helpm - / [ ^ [ S # # # > 0

llCMIeg ^OrdmHeme

IB Special Offet) d Mwe Page*

m Welcome PageB| About Ut Pagego HoMToFmdUtPtgem Contact Ut PageBE SpeoaltPegem Link» P«0«OB) Newt Page' B Online Catalogue

t « 8 a » i o P t o d u c t ti£ Ptoduott with Optional ENttatffi H ProduettBuilthomAdd-Ont$ 13 Select Itemt Itom a U*t

2 The Catalog ExplorerYou'll see the interface window appear as shown in ourscreenshot. This is known as the 'Catalog Explorer' and willbe the place where you carry out the creation and editingof your site pages along with overall management of thefiles. Click on the '+' symbols to expand categories.

r

: S X " 3 i » r = =

- 3 J S J ■« . I

3 Your brochure pagesThe first few pages located in the default shop set up areknown as 'Brochure Pages', which allow you to revealinformation about your online business. There is a homepage along with other important details such as a 'ContactUs' page. All of these pages can be edited to suit the style.

Lingo leveller

Technical terms bulldozed

■ ThemesThe great thing about Actinic Catalog 6 is that it offers a greatdeal of flexibility. The 'Theme Manager' enables the site builderto select a style for their Web site from any one of dozens ofpre-defined templates found under the 'Themes' menu. It ispossible to pick from specific designs, which are ready to godesigns through to 'Clean Layouts', which act as a neutralcanvas for someone who wants to create a custom design fromscratch. More experienced users can import previously designedActinic 'Themes' with ease, meaning that the style of apreviously created site can be transferred to a newerincarnation without losing any of its integrity. Found under the'Design' menu, 'Themes' mean that it is possible to build a sitethat looks completely unique even though you are using atemplate-based design system and pre-defined Web pages.

m Links Page(IB New$ Page

B Online CatalogueB Bas ic Products^ Calculator

0 [[J Products with Optionit xtras@ C i i a r y■ Diary Inserts for Next Veai

3 ■ M o v i eT-Shirt

B 131 Products Built from Add-OnsSI ft Desktop PC

j : ^ 17inchMonitoi^ 19inchMoniloiS 17inrhTFTFU>c:rr^.^n

E 4 « C « « n W s b f T t o

jepOrdm )5 A Home

m H o f n t01 Sp«cial Offw

6 11 Mwe P«g««m I n t r o d u c t i o nm W« ieom« P«gem About U* PageQOi How To Find Ut Pas*m Conttct Ut Pagem S p « i a l » P a 9 »OB Linki Page{H Newi Page

^ Online Catalogue!T] US Satic Ptoductt

6 Calculate

5 Products with Optional E)(tfe»V # Oiyy

Beport* ^"ivenced Helpr* 10 99 ^9;

£ « g a O r d « .

Watnr^ManagSj teUpg iadw

Backup

5e6u*h__

How does it work?5 Delete example content'Sitel' actually contains content, although this is just to showyou how the program works. Any area can be deleted if youdo not wish to use it. Highlight a section or page in thestore and press the 'Delete' key Repeat this for any otherareas that you do not wish to keep

6 Purge the CatalogOnce you have selected some or indeed all of the areasthat you wish to remove from the 'Sitel' set up, go to the'Housekeeping' menu and pick the 'Purge' option. Click onthe 'Purge Catalog' menu and this will then remove all ofthe unwanted elements from your new online store.

l l " * . l u o * . I^ HOTK 11 ■ I "■ H e m *a SMiMlOttw

B M O P W X

■ '

I r U i d t o n W i b S M■

G«nwtl|u«iM|M«UT«e»|F>i(ip«tiM!Plo«je«l

f i t E d t I H O M W « b H g u M k M p r i g a * C « r t t 6 « i v t r > c * d B « l | 9• i 9 ^ r . ^

}H a m *

■ S l M O d O f l *

■ W*lca(n*P*Ben Atuul Ut P«e«B l H M To F n d U t P t g *(■ CtnttetUiPagc■ SpMi«kP*9»■ i j n k t P t s t

L i f t e m .O t t

8 A new sectionIn the window that appears, type in any of the details thatyou wish to add. We are creating a small site that sellsstationary online Therefore, we will need to create varioussections for the products to cover items such as pens,pencils and paper.

9 New product detailsNow that you have your new section located in the site,right-click on it in order to add a new product. Select the'New Product' option from the drop-down menu and thenfill in all of the details that you need to add in order toexplain what it is. You can add a picture of the product too

Preview your site■ Creating an eCommerce Web site can be a real challenge butit's good to know that at any point during the design processyou can check the final outcome using the 'Preview' optionfound inside Actinic. The other options are 'Offline Preview' and'Offline Page Preview', The former option allows you to viewthe complete site via a browser installed on your own localmachine, while the latter enables you to view a single page.You can jump back and forth while building to ensure thatpages are looking just as want them to. Create and edit anyareas that need modification and then jump back to the'Preview' mode in order to check the changes. Easy.

£Je £dit yiew Catign | W«ti Hfiu«Jt9epr)g a*P«'* Advanced

r,c^ Its-o^ 1

a«fe

- S 7 ? ^ ? .

U p d a t e W e b t t t C t f W jBBSp^^Offer EahathWebrte

P HI Mwe Page*BE ItifoAiction SendemAB l l W . i c 0 m . P a 9 am About Ut Page.B HoMToPndU) Conhgue^ebSiteDetaitt..ai Contact Ut P.( CotVigue £xp(y Penodt)m a t w w r e a e

fl I L i r k t P a g .D Newt Page

e O m i n e C a t a l o g u e

^ Batic Produett: £ P t o d u c t t v r t h O f t i o r i a l E x t i a t% g PfoduettBuiUhomAdd nt

1 1 * . P S s t e r t l l « m t h a m a L i « t 1

eCOMMERCE I PRACTICAL WEB PRO|ECTS I U9

Page 50: Practical WebProjects 19

eCommerce project Create a complete eCommerce site with Actinic

Power users' tips

Useful tricks and shortcuts

F i e £ d i t ^ i e w Q e « i g n H o u s e k e e p i n g Q e p c v U ^ a n c e d t l e l p

AHoiae■ H o m en Special Offer

f d Moie Pages

ga HowToFmdUtPage■ Contact U$ Page■E SpedatePageH Ur IuPageM N e m P a g e

^ Or^ Catalogue

■ Master the business seningsThe concept behind Actinic is a straightforward one and despitehaving many powerful options, the program can be edited tosuit your needs within the space of a few steps. Click on the'Business Settings' icon in the main toolbar In order to configureeverything from pricing through to postage costs and VAT.

■ Handle complex mattersInside the 'Business Settings' window you will find that everyaspect of your online creation can be edited. Amend tiesettings using the dialog boxes to suit tfie style of your ownbusiness. Even complex matters like VAT and other taxationtopics are handled using this method

0«in| Oidaiitt

i\r rodjM

t

g t y Z a i t ^ 3 S 5 C

3 I S

t Riir^EU —5—

_J£°

■ Get that moneyOne of the big;est benefits about eCommerce Web sites is that

they open up your business to a global market. Aainic Catalog 6handles this challenge with ease, allowing you to change thepricing structure and currency of your site to suit any territorythat is needed. It also allows you to handle credit cards.

10 Add other optionsif more substantial product details are needed then click onthe Advanced' button, which is located under the 'Cancel'button on the right-hand side of the window. This opens upanother selection of options for you to fill in. Alternatively,click the 'Simple' button to return to the default window.

B SpectabPage

B N e m P a g e3 ^ Or*«Cat^ogue

a g P e m

•S gl BaticPiaduct»^ Cui ^ CM»Xa a Produdf^ihct Ccw Cbw:a S Produc(*Bulff3 a SetectHeimhcl Of**PasePisvw* CW+A

N « w £ e c i w n C W » SN e w R o d j c t C b i * P

N e w C fi m p o n e n l C b M

Q a t e t e D « t

E * > d C t t » f

14 Add more choices

Right-click on the produa you have created and then selectthe 'New Attribute' option. You will now be able to enterimportant information, such as the colour options that areavailable. Repeat this each time another colour is addedand they will be displayed under the main 'Pens' category

" ' J r s ^

18 Fill in the detailsType in the information that you want to be displayed in thepop-up window and also specify how the window willappear using the checkboxes. You can also add a largerversion of the image giving the customer a much betterview of the product than in the thumbnail version.

B A I > o u l U « (B HowToFi ' b i a c l . b t j « o r r « d r * .

an in a choca of ^ Tati Traatrnam

B C o n l a e t U :B S p e c i f PB L r t c » P a g <B N e m P a gO f * » C a t ^

^ Pmz J

^ BMCPTOC^ ftodiCt* ¥>1 PradK4*ES Setodlten

Image fC \WINOOW$SOeiklap\b«:_p«« pg' 6 c e 4 a . W ! . ( w V, - ^ .

. 6«nMf(Pnnvt« (CtiwMMMMMbanj FP Sbxi Honltxng

Ettonated Stock In Hand ) ■M

WamlfBalcwr jSutpandOfdatlfgaioxr | 0 U ( e

. « • .

M 4 U v a k j » ( j l 2

11 Manage stockThe 'Advanced' window enables you to set up a stockmanagement system, by keying in the levels of stock thatyou have and to also issue a warning should those levelsfall to a certain number. This is easy to configure but iscrucial to the day-to-day running of your eBusiness.

(5= -

y |r Nw^Line

HtMt j

□ I

15 Editing AttributesDouble-click on each of these colour 'Attributes' in order tocarry out any editing that needs to be done Again, awindow will open that enables you to change any or all ofthe settings relating to that individual component part of thesite. Click 'OK' when you're done with the alterations.

^ * » o r « p « m t o c < ^ T t » c h o < e « f l l ^ T « T■ r r -

^ Vv)wOOWSV£»«M««tejMntfig6«n«4| ftMPHj Stock EKwfadWoiiMfM,P CanaJMEtpupPage

'm ~^at(SLI

L i t p o u f

^' 3 . w I I

19 Add extra window optionsCreating the larger option for your image that will appear inthe pop-up window also has extra possibilities. Forexample, use the drop-down menu as shown to create apage that is a specific size and utilises a unique layout.You'll also be able to specify how the window is opened.

50 I PRACTICAL WEBPROIECTS I eCOMMERCE

Page 51: Practical WebProjects 19

Create a complete eCommerce site with Actinic eCommerce projectEssent ia ltechnique

How does it work?

Don't forget that at any time during the site construction process, or indeed even after youhave finished it, your page's look and feel can be edited or completely changed by using the'Design Options' menu selection. Inside here you will be able to pick from a series of tabs thatwill affect the outcome of your new eCommerce site. Default settings can also be used but foranyone who needs a bespoke design, then here is the place to really go to town.

12 Preview the productsClick 'OK' when you've added all the details. You will nowsee the product in the main interface window. Right-click onit and select the 'Offline Page Preview' option, which willdisplay your new page in a Web browser for you to check.Now you can repeat the process for any other products.

i Cb d » » < V / * S t o

pmpmmI PMdLcti :

1

I

' I ^

I ^

OxMtte D#ai4 SMingK T

0 t M i d « c n P t O ( b c t P m » r $ Q ^ M d Ta C J i t e ( « o n i M i P 4 g »

• if' Ou««l <tihoni>i0Ca(

16 Change section linksDouble-click on the 'Pens' section to open the dialogwindow and then click 'Advanced'. Click on the 'Layout' taband then uncheck the 'Use Parent Settings' option. This willautomatically update the customers' shopping cart eachtime they amend their order

■f News MageB Onlrie Calak}gue

B lij PernrBd$c ProductsPfoducU with C Products Bui f ISeiedUefns frc-

CutCopy

O fl + XCtri+C

Dr}+S

New Product CW+PNew CorrjponenJ Orl+ONew Attribute D r W

Entef

Qelete D e l

Find Clri+F

20 Keep tabsYou'll notice that the product shown in the interface nowhas a '+' sign, indicating that you have added extra featuresto this area of the site. This makes it easier to keep track ofmodifications, especially if your site is a multi-paged affair.To check, right-click and choose 'Offline Page Preview' again.

- i J . ^ a i ^ J L t

b i cp e r ^ s

13 A style statementNow you can see our new product in its storefront guise.Note, however, that at this point the site itself is still in theActinic default state. We'll be personalising that look later onin the tutorial. In the meantime, the next job is to add moreproducts and other options to our site set up.

w m

■ i c s s s s r -

T « ( N « w D N t a n T * . . .« f I t f t O O j

JM l S M .

rai«MteE«»MJPa9»

^ rP c p i « P w »

r . . . •

= i j • ■ r- p r - . . . ,

H - I - I

17 Add pop-up windowsPop-up windows enable you to list even more informationabout your products. Double-click on 'Bic Ballpoint Pens'and select the 'Extended Information' tab as shown hereYou then need to select the 'Generate Pop-up Page' optionby checking the box with your mouse cursor.

21 Additional site pagesNow that you've seen how to create and add products toyour growing eCommerce site it's time to take a look at theoverall style of the site. Double-click on the 'Special Offer'page under the 'Home' icon and you will then be able tocustomise the details in the dialog window as shown.

Tweaking the design■ One of the best aspects of Actinic Catalog is that it is perfectfor anyone who has limited technical expertise. For example,under the 'Design' menu you will find a 'Themes' option. Selectthis and you will be presented witfi a whole raft of ready to gotemplates for Web sites that can be tweaked to suit your ovwineeds. Altfiough they are pre-defined, the template themes canbe customised in all manner of ways, from changing the overallcolour throughout the site design through to altering fonts andtypefeces so tfiat they fit in witfi the style of your businessstationary such as letterheads and business cards.

SpwAcOMVn i ClMnU)ioutsSpecic Deagnt (non CSSJ J CMm Thaim

I

Onl ine resources

Find out more on the Web

Name of site; UK Online for BusinessURL: www.ui(oniineforbusiness.gov.ukGet to grips with the world of eCommerce using this excellentWeb site. Keep up with emerging technologies and take a peakat new business trends with up to the minute information.

Name of site; ClickdocsURL; www.clickdocs.co.ukStay on top of business-related issues via this site, whichincludes essential information on the eCommerce world thatcannot be ignored. In particular, take a look at the informationon the Data Protection Act and other legal related matters thatcould affect the way your new store can operate.

eCOMMERCE I PRACTICAL WEB PROIECTS I 51

Page 52: Practical WebProjects 19

eCommerce project Create a complete eComnnerce site with Actinic

Power users' tips

Useful tricks and shortcuts

^ i i w t > I

■ Optimising ImagesWhenever you build a Web site its crucial to pay close attentionto optimising your images. This means that piiotographs shouldbe opened in an image editor like Paint Shop Pro to ensure thatthey're in the correct tile format (|PEG) and that the image size iscorrect. If not, ensure you resize them before adding to your site.

■ Check the previewThe great thing about software like Paint Shop Pro is that youcan preview the amount of compression that is being applied toyour image doesn't spoil the overall look and feel of thegraphic. If you've overdone it, go back and run through theprocess again, applying less compression than the first time.

1 0 0 * ^ f Bl i n c a n p r w t w i 11 0 , 6 3 6 ComptMMd:11.072 bytes

OptirrRttdtD*

F te rae . IIKbijUwTim»todcwnto«d<l 56K 2.0Mcond»

TInw to download «t 126K a S t w o n d t

Tr m t o d o w n l o a d A t S e O K 0 . 3 M C o n d *

Tlrw to download «t 0 . 2 M C o n d i

O o w n l M d t i m M t h o u M b « « « guidskne on^. ActtMl hrrw* v«y »tgnficantt>.

)|\U**Wa«d{ OK 1 C«ic<l 1 Hit: I

■ Download timesIfs also essential that you test the download times of yourpictures, which can be done in the Paint Shop Pro window asshown to make sure that your image isn't too large. eCommerce site will contain lots of graphics, so optimisation ofall the elements is paramount if you're to enjoy site success.

22 Brochure elementsIn just the same way as we created the produa pages,these 'Brochure Pages' can be customised to suit your ownneeds. You can add text and any images that are relevant tothe site. Go back to 'Offline Preview' mode whenever youneed to check on just how things are shaping up.

x n r « / ♦ « « ! ? ? > ?

[ — j a• "P

J IJ I

sm

26 Pick a schemeThe 'Color Scheme' dialog box has everything needed tochange the look of your site On the left-hand side of thescreen you'll see a list of ready to go style options. Apreview of the look is then shown immediately below this.The right side, meanwhile contains all the colour palettes.

30 Your own logoWe've created a logo in Paint Shop Pro and added it to theroot folder of the site It's possible to use the original, whichis inside this folder, and modify it to your own style. Revisingit will then ensure that it's placed in exaaly the same placewithin the design of the Web page.

$iNeMeOMlB»NineRC«St I CU«I«AT»wiimy,p» Ip««e0«»v>* I

IBuiUMKS

lEI«9«yF l o u n t h

Fufikj 'F u l u l l t l KL i n « «

|M*chr«R»Cltngul«R * l r «

23 Look and feelAnother important task in the creation of any site is to getthe colour and overall styling right. To get started on this, goto the 'Design' menu in the main interface and select the'Themes' option. Choose a layout from the menu - we'll beopting for the 'Specific Designs' option.

27 Create a custom shadeAside from using the pre-defined style templates, it is alsopossible to combine using these with selecting othercolours from the drop-down menus as show. If you'refeeling more adventurous then it's possible to create acustom colour, using the option at the bottom of the bar.

31 Update the siteUsing the 'Offline Preview' option it's possible to locate otherimages in your site that you can swiftly change in an imageeditor. Right-click on the image such as this one on thehome page It will then tell you the file name Create analternative and then save it with the same name

52 I PIWCTICALWEBPROjECTS I eCOMMERCE

Page 53: Practical WebProjects 19

Create a complete eCommerce site with Actinic eCommerce projectEssent ia ltechnique

How does it work?

A Web site really needs to look the part if people are going to take it seriously and part withtheir hard earned cash. In that respect, it is important to pay attention not only to the colourscheme of your site, but also to ensure that the fonts and typefaces are consistent throughouteach page. Actinic Catalog 6 allows you to customise fonts, which is ideal for matching thesame font as one that you might have used on traditional print stationary.

r % Q « • a . 9 9 Q ? ? 1 ^ ?

e w H cI a

^ OntowCMtopi*> J P « »

ai e*acPK>*jet<J P K i ^ j e t o i M i O p m3 P.oduol*B<«hcM/

^ i i :W « M « V « u « » t » d % « n 9 » « » • «

^ II I

24 Change the themeIf you select one of the templates from the scrolling list inthis window, bear in mind that you will then change thecomplete style of your site, although the structure will bepreserved. You'll see this warning first though, so thinkcarefully if you're happy to press ahead.

25 A splash of colourActinic is also highly flexible when it comes to changingcolour, typefaces and other design elements. To achieve thisyou'll need to go to 'Design' and then 'Colors' in order tostart editing the predesigned template style to fit thebranding of your store.

^ 7 ? « 7

C K w : - - : . " ' - M M

1 - ' 1 ^ 1

1 - i

Pick a colour■ It's possible to change any aspect of the colour schemewithin your site using the 'Colours' palette. If you have no ideaof how colours work then select one of the predesigned stylesfrom the built-in 'Colour' menu. More adventurous users,however, can also opt to create a custom shade and add it toany aspect of the site, from backgrounds to pop-up windows.Due to the way the program is engineered, it also means thatany shade that you opt for is also automatically made Websafe meaning that it will preview correctly when the site isfinally uploaded and appears on the Intemet, This is also auseful tool for ensuring that the colour scheme matches yourtraditional business stationary

Lingo leveller

28 Import a schemeIf all of these options weren't enough, you can also importan external Actinic style if you wish by clicl<ing on theImport' button at the bottom of the dialog box. This isuseful if you have created another Actinic site and wish toemulate the same theme. Click. 'Select' when you're done.

29 Choose a site styleNow you'll need to use the 'Options' selection from underthe main 'Design' menu if you wish to add, edit or removeany of the site elements such as graphics, logos and otherimages used in the overall site. This multi-option dialog boxoffers the ability to change just about anything.

32 Keep tabsIf you overwrite any images in this way, they willimmediately show up in the Web site when you preview it.Note that all of the images contained in your site can belocated in the main 'Sitel' root folder should you need tomake any further adjustments to logos and other images.

33 Edit other detailsAlongside style issues, it is also possible to change otherimportant details like pricing. Go to the 'Design Options'menu and select 'Miscellaneous'. Click on the checkboxes inorder to configure the cost with or without tax. You can alsotailor the site to show prices in other currencies too.

Technical terms bulldozed■ SectionsAnother aspect of Actinic Catalog 6 that offers the budding sitebuilder tfie ultimate in flexibility is the 'Sections' area of theprogram. 'Sections' are at the core of how you set up your newonline eCommerce store. If you're creating a complex shop withlots of different departments all selling different items then the'Sections' tools mean that you can add, edit and ultimatelysegregate all of your content into neat, bite-sized chunks. All ofthese separate components can be edited to look, feel andoperate just as you want them too using the pop-up dialogwindows that offer both basic and advanced options. The best

thing about these is that, although you don't need any realtechnical knowledge to set them up, they offer an unparalleledlevel of flexibility and also look good when the end result isunveiled. Pop-up windows and other highly advanced featurescan be configured in this same area for the ultimate onlineshopping experience.

eCOMMERCE I PRACTICAL WEB PROJECTS I 53

Page 54: Practical WebProjects 19

122 126 High RoSftL o n d o n , N W 6 4 H Y

E m a i l , We b &Act in ic Host ing

The only web host to provideGeograph ica l l y Separa ted Load

Ba lanced Hos t ing w i th in twos e p a r a t e D a t a C e n t r e s , t h a t

ALL can afford! - Coming Soon!U K - L o n d o n L o c a t i o n s

Emai l Accounts f rom £14.99 p.a.

Web Host Accounts from £25 p.a.

Act inic Host Accounts from £25 p.a.

State of the art host ing

faci l i t ies, backed up bygeograph ic load ba lanced

h a r d w a r e t h a t e n s u r e s t h a t

your si te never goes offline.

Coming Soon at no extra cost!

R e s e l l e r A c c o u n t s

A v a i l a b l e N o w !

2 0 % R e s e l l e r D i s c o u n t s

A C T I N I C

D o m a i n N a m e s

A c t i n i c E c o m m e r c e S o f t w a r e

C a t a l o g V 6 : — i !£ 2 9 4 ( R R P 3 7 9 )

I n c l u d e s : 6 m o n t h sAct in ic P lus Host ing Acc ' t

& A c t i n i c S h a r e d S S L

B u s i n e s s V 6 ;

£599 (RRP 799)I n c l u d e s : 9 m o n t h s

Act in ic P lus Host ing Acc ' t& A c t i n i c S h a r e d S S L

4

S S T T. -

D e v e l o p e r V 6 :

£1175 (RRP £1250)

m m

Order Manager:

£140 (RRP £150)

COMflKUWrttr

N o m i n e t U K D o m a i n s£8.50 - 2yr Regis t ra t ion. co .uk , me .uk , o rg .uk. l td .uk , p lc .uk , sch .uk

G l o b a l & A l t e r n a t e D o m a i n s£25 - 2yr Reg is t ra t ion

.com, .biz, . info, .org, .net

f rom £20 - 2yr Regis t ra t ion

.gb . com, gb .ne t , uk . com

.uk .ne t , eu .com, us .com

Al l reg is t ry fees inc luded.Free web park ing .

N O R e l e a s e F e e s [

A f fi l i a t e A c c o u n t s

A v a i l a b l e N o w !5 - 1 0 % A f fi l i a t e R e t u r n s

G e t a n E X T R A 2 5 % O F FAccount Orders p lace

Saturday 17th Apri l 2004,using discount code "EC-PWP0304"

(Practical Web Projects Offer - Not to be used in conjunction with any other offer)

Catalog V6:

"^294 (RRP 379)B u s i n e s s V 6 :

£ 5 9 9 ( R R P 7 9 9 )

D e v e l o p e r V 6 :

£1175 (RRP £1250)

Technical Support Available by Phone,

F a x a n d E m a i l fAll Major Credit & UK Debit Cards Accepted

Te l : 0 8 0 0 6 9 8 3 7 3 7 - F a x : 0 8 0 0 1 9 7 3 7 4 3

w w w. 4 S u r e H o s t i n g . c o . u ks a l e s @ 4 s u r e h o s t i n g . c o . u k

All Prices Exclude VAT @ 17.50/0

Techno-Web Ltd ( t /a 4SureHost ing)Registered Office: 21 St. Thomas Street,

B r i s t o l . B S l 6 J S - C o . # 4 1 1 4 4 1 6

Page 55: Practical WebProjects 19

Create a complete eCommerce site with Actinic eCommerce project

J

U ^ l

3 ^

M '

5fj:=dl i l _ 5 S U

. - r - l r — - L ^ r : -" S S u i ^ - . —

- ^ - i I ^ I ■ *

34 Layout adjustmentsPresenting your products in the right way is crucial, so if youneed to edit the settings for this, go to the 'Design Options'and 'Layouts' area. Go to the 'Default Product Layout' fieldand click inside it. Select an option from the list and press'OK'. This will update the way you display your products.

35 Text changesThe 'Design' menu can also be used to change words orphrases within your site. Go to this menu and select the'Text' option. The dialog box that appears allows you to usethe powerful 'Search' facility to track down any specificareas that need to be amended.

36 The finished articleHere we have our finished home page which visitors willsee when they visit our 'Write On' domain. It is thenpossible to click on the 'Shop' button to the left, which iscomplete with a rollover image, and then proceed to startplacing orders using the power of Actinic Catalog 6.

The Actinic Catalog interface laid bare

All of the content

of your site isconta ined in them a i n i n t e r f a c ew i n d o w a ss h o w n o n t h el e f t - h a n d s i d e o f

y o u r s c r e e n

I Products arestored in var iouss e c t i o n s w i t h i nthe program andcan be edited in

t h i s w i n d o w

I Images andother Web s i tecontent can be

easily managed,e d i t e d a n d

upgraded usingt f j / s w indow tolocate yourselected graphics

^ Catalog > Online CatalogueRe £djt View Oe£tgr» Wefe Hou^ .eeping Reports Advariced Help

- . ID I x |

Catalog j|?p Orders ja A Home

m Homein Special Offer

•g) More PagesBl| Infroduiiliiin

® ? ? k ?

IBil Welcome PagiIB About Us PagfH How To Find L^ Contact Us Pam Specials PageIB Links Pageig News Page

-] Online CatalogueiB Basic Product;3 P r o d u c t s w i t h I

Name: |Basic Products

f Hide on Web Site

OK

Cancel

M v a n c e d

Image: jsectionJmage.gif Browse... |Description:

1

The 'Quantity' field and the 'Other Info' and 'Date' fields will appear on the web page for this section, as the 3• S h o p p i n g M o d e ' ( i n t h i s s — ' ' — ^ — p — i - - ' n — '

(±1 Select Items fti

Z] CommonOCC□ PreviewHTML2) SNpConttdIjSiteHTMLg 120-«-e0-64-2powered-by-act^ 120-x-60-G4-powered-bjp-acti

5 120-x-60-poweied-b)i-actinic§ 120-i(-G0-powered-by-actinic2g 120i!90-rectang-GR0W-still-1Sl25*125-squa(e-GROWS 468*60-full-banner-GROW1K 468x60-full-banner-GR0W-mod

2J JFile name:

Files of type: |lmage fites (".jpg.'.jpeg/.gifApng)Open

C a n c e l

For Help, pfess F1 I IHDmI

T h e m a i n m e n ua l s o e n a b l e s

pinpoint editingof your site andits settings, alongw i t h an o f fl i ne

preview so youcan check that i tworks okay

W All of the editingtools can be

expanded byclicking on theA d v a n c e d '

button, whichfeatures in them a i n w i n d o w

I Actinic is able touti l ise al l of the

popular Webimage formatssuch as GIFs and

ff*EGs for shovingoff the products inyour store

eCOMMERCE I PRACTICAL WEB PRO|ECTS I 55

Page 56: Practical WebProjects 19

O MtamPLET-Taia.uHBudget PC KitA IV IDXP2200+S K U : 1 2 1 0 5 7

The kits are bundles of partsthat we know work great

together. Komplett do notbuild the parts together, but

you would have been a bitmiffed if yourfirst lego kitcame built wouldn't you?;-)So what are you waiting for,

get your order in for one ofthese kits and build yourdream PC!!! £ 2 5 5

i n c . VAT

GRAPHIC CARDS 128IVIBS K U P r o d u c t n a m e P r i c e I n c . V A T1 2 0 3 2 5 P o w e r C o l o r R a d e o n 9 2 0 0 S E £ 3 41 2 1 4 2 0 S a p p h i r e R a d e o n 9 6 0 0 S E f 5 11 2 1 7 2 3 G a i n w a r d G e F o r c e F X a e O O X r £ 7 21 2 1 5 0 3 P o w e r C o l o r R a d e o n 9 6 0 0 X 7 £ n o1 2 1 4 2 3 S a p p l i i r e R a d e o n 9 8 0 0 S E £ 1 2 51 2 0 6 4 8 G a i n w a r d G e F o r c e F X 5 9 0 0 U l t r a £ 1 3 5120903 Hercu les 3D Prop l ie t 9800SE A lW £103120066 Sapphire Radeon 9800Pro All in Wonder £258

GRAPHIC CARDS 256MBS K U P r o d u c t n a m e P r i c e I n c . V A T1 2 1 4 0 7 S a p p h i r e R a d e o n 9 2 0 0 £ 5 51 1 8 6 3 0 G a i n w a r d G e F o r c e F X 5 2 0 0 £ 6 91 2 1 7 9 7 M S I G e F o r c e F X 5 6 0 0 X T £ 9 41 2 1 4 2 1 S a p p h i r e R a d e o n 9 6 0 0 X T A t l a n t i s £ 11 61 2 1 7 2 0 G a i n w a r d G e F o r c e F X 5 7 0 0 U l t r a £ 1 5 8119629 Sapphire Radeon 9800Pro Ultimate Ed. £ 2731 2 1 3 8 2 H e r c u l e s 3 D P r o p h e t 9 8 0 0 X r £ 3 3 4121444 Crea t i ve 3D B ias . GeForce FX 5950 ULTRA £374

NEC DVD-recorderN D - 2 5 0 0S K U : 1 2 2 6 0 9

£ 8 8i n c . VAT

N E CDVD recording is taking

over. NEC continue to

push the fold.

UPGRADE KITSS K U P r o d u c t n a m e P r i c e i n c . V A T112188 XP2200+, 256MB DDR, A7V8X-MX £ 125120878 XP2500+, 256MB DDR, A7N8X-X £ 139115453 XP2600+, 512MB DDR, A7V8X-MX £ 161118334 Intel P4 2.8GHz, 512MB DDR, AbitlS7 £246

MAINBOARD (INTEL CPU)S K U P r o d u c t n a m e P r i c e i n c . V A T1 2 3 0 8 2 A b i t V T 7 S ATA , AT X , D D R , L A N , R A I D £ 5 1122992 MSI 865PE NE02FISR SATA,FW,Dual-DDR £86117437 MSI857PNE0-FIS2RSATA,ATX,LAN,Dual-DDR £121119657 Abit[C7-MAX3SATA,GbUN,FW,Dual-DDR £141

MAINBOARD (AMD CPU)S K U P r o d u c t n a m e P r i c e i n c . V A T119665 EpoXEP-8RDAE.SocketA, DDR nForce2 £34122995 MSI K8TNE0-FISR Socket 754,SATA/ATA £74121245 AbitAN7, Socket A SATA,Ultra400,Firewire £76121261 EpoXEP-8HDA3+,Socket754,SATA/ATA,UN £94121241 Abit KV8-MAX3,Socket 754,SATA, FW,LAN £118

Samsung 17" LCDSyncmaster 173TS K U : 1 2 2 3 8 9

No matter how youlook at it, SainsungLCD Monitors offer aview tliat is pictureperfect every time.

Gainward GeForceFX5700 ULTRA 128MBS K U : 1 2 2 4 2 1

We endeavour to have

the latest graphic cardsforthe greatest prices.If it's a top pixel pusher,we have It. £ 1 2 9

I n c . VAT

I n c . VAT

MONITORSS K U P r o d u c t n a m e P r i c e i n c . V A T1 1 2 9 3 0 H a n s o l l 7 " C R T 7 3 0 E T C 0 - 9 9 £ 8 5120139 Samsung 15" LCD Syncmaster 152V £2521 1 5 9 6 3 E i z o l 5 " L C D F I e x S c a n L 3 6 7 T C 0 - 9 9 £ 2 6 41 2 0 4 3 5 L G 1 5 " L C D L 1 5 1 0 T T C O - 9 9 £ 3 1 61 2 1 1 6 3 L G 1 7 " L C D L 1 7 1 0 B T C O - 9 9 £ 3 5 511 9 0 6 7 E i z o l 7 " L C D F I e x S c a n L 5 5 7 T C - 0 3 £ 3 7 4121957 Samsung 17" LCD Syncmaster 172X £ 3981 1 7 9 8 9 E z i o l 9 " L C D F I e x S c a n L 7 6 7 K T C O - 9 9 £ 7 1 511 7 9 8 7 E z i o l 9 " L C D F I e x S c a n L 7 6 7 T C O - 0 3 £ 7 1 5

PRINTERSS K U P r o d u c t n a m e P r i c e I n c . V A T11 9 5 6 3 S a m s u n g L a s e r p r i n t e r M L - 1 7 1 0 £ 1 2 0121682 Oki Matrix ML380 24pin, 80 coloums £200121680 Oki Matr ix ML280 Spin, 80 coloums £211121676 Ok i Laser B4300 18 pages , 16MB £2381 1 5 9 5 6 H P D e s k J e t 4 5 0 C B I £ 2 4 01 1 8 4 8 5 H P C o l o r L a s e r J e t 1 5 0 0 L £ 5 0 4115212 Oki Colour Laser C5300N 12 pages £768

DVDS K U P r o d u c t n a m e P r i c e i n c . V A T11 3 5 2 3 N E C D V D - r e c o r d e r N D - 1 3 0 0 R e t a i l £ 6 41 2 0 5 5 6 M S I D V D - r e c o r d e r D R 4 - A R e t a i l £ 7 5123201 LG DVD-recorder GSA-4081B Bulk £ 881 2 2 5 2 0 M S I D V D - r e c o r d e r D R 8 - A R e t a i l £ 1 0 511 9 6 3 2 P l e x t o r D V D - r e c o r d e r P X - 7 0 8 A £ 1 7 5

CDS K U P r o d u c t n a m e P r i c e I n c . V A T119871 Sony CD- reco rde r 52x /24x /52x Bu lk £22119289 MSI CD-recorder 52x/32x/52x Retai l £ 25122619 Sony CD-recorder 52x/32x/52x Bulk £ 29115295 LG CD- reco rde r 52x /32x /52x Re ta i l £3511 9 1 8 6 L G C D - r e c o r d e r 2 4 x / 1 0 x e x t e r n a l £ 1 0 2

CASESS K U P r o d u c t n a m e P r i c e i n c . V A T114706 Q-Tec Midi Tower ATX 6022MD300W £33121478 Q-Tec Midi Tower TL-MDw/sidedoor Silver £41122072 AC Ryan Acryl Case-Clear Midi Case w/oPSU £73117913 ChieftecBX Tower w/door Black W/360WPSU £74120647 Shuttle SB51G Barebone PC Socket 478 £ 176

NETWORKINGS K U P r o d u c t n a m e P r i c e I n c . V A T11 7 8 0 5 S M C E Z C a r d 1 0 / 1 0 0 P C I , F i r e w i r e £ 9119883 Sunsway /ST Lab B roadband Rou te r £23117861 MSI USB Bluetooth Key - 20m area £331 2 2 7 9 6 C n e t N w a y S w i t c h 1 0 / 1 0 0 M b p s £ 5 7119947 SMC Barricade Wireless G54 Mbps £64

SCANNERSS K U P r o d u c t n a m e P r i c e i n c . V A T1 2 3 2 5 9 M u s t e k B e @ r P a w 2 4 4 C U U S B 2 . 0 £ 3 711 6 9 5 0 C a n o n C a n o S c a n L i d e 5 0 U S B 2 . 0 £ 8 11 1 9 9 8 4 C a n o n C a n o S c a n 5 0 0 0 F U S B 2 . 0 £ 1 2 61 1 9 9 8 2 C a n o n C a n o S c a n 8 0 0 0 F U S B 2 . 0 £ 1 8 61 1 8 7 5 4 C a n o n C a n o S c a n 9 9 0 0 F U S B 2 . 0 £ 3 0 91 1 7 0 2 2 N i k o n C o o l s c a n L S - 4 0 E D £ 4 1 11 1 0 0 1 7 N i k o n F i l m s c a n n e r L S - 4 0 0 0 E D £ 8 9 4

24/7 online shoppingat KompletLco.ultPrices and specifications are subject to availability and change without prior notice, see www.komplett.co.uk or www.komplett-ie for updated prices. Prices are correct at the time of going to press. Pictures are representative only. See website for terms and conditions

Komplett are not responsible for errors or omissions In the information published. We reserve the right to cancel any orders. An Order Confirmation is a confirmation that we have received your order and is not a binding contract.

Page 57: Practical WebProjects 19

oU t € a m t = » L E T T c a , u H

AMD Ath lon64 3000+2.0 GHzS K U : 1 2 2 8 11

AMD is proud to bring you the AMDAthlon 64 processor, with AMD64

technology for dramatically higherperformance and built-insupport for future 64-bitapplications.

£ 1 5 5AMD PROCESSORSS K U P r o d u c t n a m e116244 AMD A th lon XP2500+ 1 .833 GHz116245 AMD Ath lon XP2800+2.083 GHz116242 AMD Athlon XP3000+2.167 GHz120919 AMD Athlon 64 3200+2.0 GHz123016 AMD Athlon 64 3400+2.2 GHz

I n c . VAT

Price inc. VAT

£ 5 7£ 7 5

£ 1 1 5£ 1 9 6£ 2 9 3

INTEL PROCESSORSS K U P r o d u c t n a m e P r i c e i n c . V A T118900 Intel Celeron 2.6 GHz Boxed PC400 £57117320 Intel Pentium 4 2.6 GHz Boxed PC800 £ 10711 3 0 5 3 I n t e l P e n t i u m 4 2 . 8 G H z B o x e d P C 5 3 3 £ 11 2123629 Intel Pentium 4 3.4 GHz Boxed PC800 £ 284

CPU FANSS K U P r o d u c t n a m e P r i c e i n c . V A T119402 Spire CPU-tan WhIsperRock IV Socket A £71 2 0 1 3 3 C o o l e r M a s t e r A e r o 4 L l t e l n t e l A l u m l n i u m £ 1 41 1 7 8 9 4 C o o l e r M a s t e r A E R 0 7 + A M D £ 2 6120136 Cooler Master AERO 4 Intel Pure Copper £ 26

Trust 460P SoundforceSpeaker Stereo DesktopS K U : 1 2 2 7 6 2

Trust provides acomplete, innovativeand affordable rangeof technologicalproducts. The keyprinciple in developingproducts Is to offervariation, pleasure,re laxa t i on and

excitement to the user,a principle Trust aimsto fu l fi l l .

DIGITAL CAMERASS K U P r o d u c t n a m e P r i c e I n c . V A T1 2 2 4 2 5 K o d a k E a s y S h a r e C X 6 2 3 0 2 . 0 M P £ 9 711 7 3 6 8 O l y m p u s C a m e d i a C - 3 5 0 3 . 2 M P £ 1 4 61 2 2 4 1 2 C a n o n P o w e r S h o t A 7 0 3 . 2 M P £ 1 9 91 2 3 6 0 5 S o n y C y b e r S h o t D S C - C l 5 . 0 M P £ 3 5 01 2 3 7 8 1 S o n y C y b e r S h o t D S C - T l 5 . 0 M P £ 3 9 91 2 2 5 8 2 F u j l f i l m F l n e P i x S 7 0 0 0 6 . 3 M P £ 4 8 7

CAMERA MEMORYS K U P r o d u c t n a m e P r i c e I n c . V A T1 1 2 8 9 7 T w I n M O S M e m o r y S t i c k 3 2 M B £ 1 41 1 1 3 6 8 T w i n M O S S e c u r e D i g i t a l 6 4 M B £ 1 81 0 3 0 8 1 Tw I n M O S C o m p a c t F l a s h 1 2 8 M B £ 2 31 1 1 8 3 8 T w I n M O S M u l t i m e d i a c a r d 1 2 8 M B £ 2 5112460 Crucial Compact Flash Card 512MB £ 76121854 Sony Memory Stick PRO 256MB £84

MEMORYCARD READERSS K U P r o d u c t n a m e P r i c e i n c . V A T1 1 3 7 4 9 e M a g I c P C - C a r d A d a p t e r f o r C F £ 81 1 9 6 0 5 D a t a f a b U S B 2 . 0 6 i n 1 C a r d R e a d e r £ 1 61 2 0 8 8 4 U S B 2 . 0 A l l i n o n e C a r d R e a d e r £ 2 5113873 O lympus MAUSB- lOxD-Card Reader £301 1 8 7 5 0 T r u s t U S B 2 . 0 6 I n 1 C a r d R e a d e r £ 3 5122107 Gainward Hollywood@Home Media Xtender £ 61

MPS PLAYERSS K U P r o d u c t n a m e P r i c e I n c . V A T1 1 8 2 6 8 I R i v e r l F P - 3 4 0 6 4 M B m e m o r y £ 6 2120171 MSI MEGA STICK 128MB, FM Radio,Voice Rec £ 651 2 0 9 6 6 J a z P i p e r U b i t 2 5 6 M B m e m o r y £ 9 2122428 JOS MP110,Dictaphone,FM Radio, 512MB £214122886 iRiveriGP-100MP3,WMA,ASF,OggV.FM £246121447 iRlverlHP-120dictaphone,FM Radio, 20GB £307

PEN-DRIVE/USB MEMORYS K U P r o d u c t n a m e P r i c e i n c . V A T1 2 1 6 0 6 V e r b a t i m U S B 2 . 0 S t o r e N " G o 3 2 M B £ 1 81 2 1 7 5 4 T w i n M O S U S B 2 . 0 M o b i l e D i s k I I I 1 2 8 M B £ 2 71 2 1 7 5 5 T w i n M O S U S B 2 . 0 M o b i l e D i s k I I I 2 5 6 M B £ 4 91 2 1 5 8 5 Tw i n M O S U S B 2 . 0 M o b i l e e D i s k I I I 5 1 2 M B £ 9 71 2 1 6 1 0 V e r b a t i m U S B 2 . 0 S t o r e " N ' G o 5 1 2 M B £ 1 2 51 2 2 4 7 0 Tw i n M O S U S B 2 . 0 M o b i l e D i s k I I I 1 0 2 4 M B £ 1 8 3

DDR-DIMM MEMORYS K U P r o d u c t n a m e P r i c e i n c . V A T11 3 5 1 7 T w i n M O S P C 3 2 0 0 2 5 6 M B C L 2 . 5 £ 2 7117209 CorsairValueS. PC3200 256MB CL2.5 £291 1 3 5 1 8 T w i n M O S P C 3 2 0 0 5 1 2 M B C L 2 . 5 £ 5 2117212 Corsa i rVa lueS.PC3200 512MB CL2.5 £58118498 TwinMOS PC3200 1024MB Dual Pack £ 1081 1 8 7 3 7 C o r s a i r V a l u e S . P C 3 2 0 0 1 0 2 4 M B k i t £ 1 1 7

SPEAKERSS K U P r o d u c t n a m e P r i c e i n c . V A T122764 Trust SP-6018 300W Speaker Stereo Desktop £4122761 Trust 1600P 2.1 Soundforce Speaker, sub £22118819 Logitech Z_640 Speaker 5.1 Satel. +Sub £63122101 Altec Lansing Speaker 5100 Subwoofer £89115663 Creative Speakers Megaworks 550THX 5.1 £ 20211 4 0 6 3 L o g i t e c h Z - 6 8 0 S p e a k e r s 5 . 1 £ 2 8 9

Fuiifilm Q1 DigitalSilver 2 Megapixel ^.S K U : 1 2 2 4 8 0

^ FUJIF ILMFujlflim Q1 Digital is perfect forthenewcomer to digital photography.

Featuring everythingyou'd want froman entry-level model the Q1 Digitaloffers both style and substance.

£ 5 9i n c . VAT

Apple iPod MP3-Player 40GBS K U : 1 2 2 4 3 9

•AppleIt needs no

i n t r o d u c t i o n . E v e n

your mum wantsone of these. £ 3 5 0

inc. VAT

HARD DRIVESS K U P r o d u c t n a m e P r i c e i n c . V A T11 6 4 3 6 S e a g a t e B a r r a c u d a 8 0 G B ATA / 1 0 0 £ 4 811 5 5 6 0 M a x t o r D i a m o n d M a x P l u s 9 1 2 0 G B S - ATA £ 6 9118008 SamsungSpinPointPBO 160GBATA/133 £71118875 Western Digital Caviar 250GB S-ATA SE £158119032 Max to r MaXL ine I I 300GB ATA /133 £180

KEYBOARDSS K U P r o d u c t n a m e P r i c e i n c . V A T1 2 0 5 3 5 T r u s t P o w e r P l u s K e y b o a r d £ 51 2 1 5 5 8 L o g i t e c h I n t e r n e t N a v i g a t o r £ 2 3121545 Log i tech Cord less Desk top De luxe £ 34121552 Logitech Cordless Desktop MX Bluetooth £ 119

MICES K U P r o d u c t n a m e P r i c e i n c . V A T1 1 9 2 6 4 L a b t e c 3 - B u t t o n M o u s e P S / 2 £ 3120879 Log i t ech Co rd less Mouse USB/PS2 £20114123 Mic roso f t No tebook Opt i ca l Mouse £ 22106437 Logitech Cordless Mouseman Optical £ 43

[email protected], ■ - F a x : 0 8 7 0 1 3 8 3 5 5 4 P h o n e : 0 8 7 0 8 7 2 7 1 0 7

www.komplett.iePHces and specifications are subject to availability anil change without prior notice, see www.komplett.co.uk or www.komplett.le for updated prices. Prices are correct at the time of going to press. Pictures are representative only. See website for terns and

conditions. Komplett are not responsible for errors or omissions in the Information published. We reserve the right to cancel any orders. An Order Conflrmatlon Is a confirmation that we have received your order and is not a binding contract

Page 58: Practical WebProjects 19

eCommerce project Set up a payment processing system for your Web store

m.I* NICK SWEENEY builds Web sites for a living, as well as writing about online culture

and/or dead poets, depending on his schedule. He's nostalgic for the days when theZX Spectrum was all the rage, and remembers how the TABLE tag was once cutting-edge. You can enter Nick's world by swinging by one of his own sites at www.only.orgor www.not.only-org

Set up a paymentr o c e s s m

or yourns system

^ Web storeFind out how to start taking money on your site by adding creditcard payment facilities using ClickCartPro

The br ief

Task: Create a shoppingcart with GickCartPro

Dif^culty; AdvancedTime I need: 3 hours

On the CD

The software for this proiectcan be found on the CD

nsuring you have the best payment system on your site is a vital part ofany successful eCommerce strategy, especially when you consider thatmore Web-based orders are left abandoned in their virtual shopping

carts than actually paid for.When buying online, consumers can visit other sites to compare prices, or change

their mind about buying the product, and many do just that, especially if paying foran order is too confusing, cumbersome or plain irritating. Throw in the fact thatonline customers are generally impatient and wary of flashing their plastic at any oldsite, and it's easy to see why the process of parting your customers from their hard-earned money needs to be as 'friction-free' as possible.

Fortunately there's a growing range of software that allows the humblest ofonline shopkeepers to give impatient customers the polished eCommerce experiencethey expect. ClickCartPro (vwvw.clickcartpro.co.uk) is one of the best; it combines abroad-based backend with a relatively straightforward Web-based administrationsystem. Best of all, it scales with your needs, allowing database integration foradvanced inventory and accounts control, and providing seamless access to all theUK's major online payment processing services. You'll find a trial version on thisissue's cover CD, and to give you a feel for it, we'll guide you through setting up anonline shopping cart system that accepts payment through PayPal.

Adding secure online payment facilities

h o m i ' n h o e m n T f j r t l c h t e f c o u t

o n l i n e s t o r e

I The breadcrumb trailreflects the categoriesyou've specified in eachproduct catalogueentry. Any item canbelong to more thanone ca tegory

k The product detailimage can besupplemented by extra-large detailed irrjagesand t i iumbnai ls in t / ie

category listings.a id (Card* ro sca les themto fit the template

i i m p k i i u a n d S e n o f f t n U i i f » « t . w i t kle ts a r t i fie i c l mwl i tba l Mo i t rm i teLnCr t fa la t toos .

v o o M S w i t h s 6 ' i M c i U A n d 4 8 ' n « d « f r o m!i tsh-d«uity >U«1 ptpini with ntt tproof plut le

c e « t « i ) | . A | M ( « a n i i l f a ^ - s o r i t e w t t h o u r n i f t e n M r i .

h i h i s t ) t « a e l > e k t h ( A d d To C a r t b u t t p n t c c M t h «

' ■ D iDoUsanqu i r vd f i dd .

Q u a n t i t y I t

T M a I i £ 4 9 . o o

A i t P r i c M l n d V

fThe categories inyour productcatalogue areautomaticallyl isted in the order

you entered them

i The shopping cartprovides anongoing record ofyour purchases,including anyrecurring totalsfor i tems suchas subscriptions

E z n

M All items areindexed by theirn a m e s a n d

categories, and byany additionalkeywords thatyou add w theproduct catalogue

k e y « - > F i l ea c c e p t a n c e o f

E d i t M o d e s e a r <t N e l i c e n s e a g r e o M

: h B u f f e r s w i n d o w s s y 5 t <

S o f t w a r e v e r sP a c k a g e o a t e :A u t h o r :

A u t h o r E M a i l :

I o n : 5 . 1 . 3 C t 1 k l >J u l y B O , 2 0 0 3W i c k H e n d l e r . v e b M s t e r . x r y p t r o n l c . I n c .webMaste /ckrypt rom c . cow

E d i t t f » es o f t w a r e

f o l l u w l n s p a t h s a mp a c k a g e t o e x e c u t e

i l u i t s t o s e t u p t h i sp r o p e r l y .

T h e s e r v <

T t M s e a r <

e ! r _ * _ p a t h v a r i a b l e st s o f t h i s s o f t w a r eE i g i - b i n * , ' d a t a ' a ne s e r v e r p a t h s a n d 1

a r e t h e p a t h s t o t h e d i f f e r . ,p a c k a g e . E n t e r b e l o w t h e p 4 '

i ' w e d i a ' d i r e c t o r i e s ,l o t ( K L S .

v e r _ s c r 1 p t _ p « lv e r _ d a t « „ p a t h >v e r _ M e d 1 a _ p a t h

^ - V d a t a / v h o s t / n i c k s M e e n e y . c o i / c g l - b l n / c c p S i i : ,' ' ' / h a M v V D u r . . a c c o u n t / W M W / c c p 6 i / d « t a ' ' : 1- ' / h o w / Vo u r ^ a c c o u n t / W M w / c c p s i / V K d l a * ' ;

T t i e u r 1 _ * _ p a t h v a r i a b l e s a r e t h e p a t h s t o t h e d i f f e r e n tc o B p o n t e n t s o f t h i s s o f t w a r e p a c k a f K - E n t e r b e l o w t h e p . -

r " — - t o t h e ' c g i - b l n * a n d ' a e d i a * d i r e c t o r i e s .T t i e s e a r e U R L p a t h s a n d s h o u l d b e e n t e r e d w i t h a • h t t p ' .

- J r d 0 . 3 " ) . :I ' l ' i t - a c i , : C D a i + 5 l n ,. c o l f D c r l l 7 7 / ^ ? i r -

1 Upload to your serverThe most obvious step is to get ClickCartPro up and runningon your Web server. Follow the instructions in the READMEfile and edit the HTML redirects in the 'default.htm' and'index.htm' files in the root directories to point to the relevantCGI scripts.

@ I n s e r t C aC O N F I R K A T l O H t o t i a n t a r a d t i a a b a a n I n a a r t a d i n t o t h a d a t a b a

To inaart an Itam into th« databaaa. u>a tha mt.

• - Danota* a faqui fwJ f ia ld.

Catagory Nama *

1 [Landrng Net IDMplay On Stoi SpiaaK Paga ^ t m a g a N a m a

|y.s v| I r x K V t . g r f 1

Sub Catagor i«« To Diaplav Par Row Sab Catagory Ut t ing Oi .pUy Typa «

[Three D e f a u l t F o r m a t v

4 Create product categoriesNow let's start adding the store's inventory. From the mainmenu, select 'Store Catalog' and click on 'ManageCategories'. You'll see a list of categories: select the link toinsert a new item, and then enter a category ID and adescription. Click on 'Submit' and repeat for each category

B a c k g r o u n d I m a g * N a m e '

I wte_bgrQund.gif

U m B a c k f l r o u n d I m a « « *

U n k C i M o r '

1109966

A c t i v a L i n k C o l o r *

|109966

M a r g i n H a t g h t ( N a U c a p a ) '

To p M a r g i n ( M S I E ) *

1 0 "

M a r g i n W i d t h ( N a t K a p a ) '

B o t t o m M a r g i n ( M S I E ) *

10

7 Style your shop windowTo customise the basic appearance of pages within theonline store, go to the main menu, select 'Global Settings',and click on 'Manage HTML Settings'. You'll see the globalstylesheet for the site: change the settings for fonts, coloursand particular phrases as if you were editing a CSS file.

58 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 59: Practical WebProjects 19

Set up a payment processing system for your Web store eCommerce project

Lingo leveller® Uiidate User A< c<To updata tha databata antry fw tha it»fn you talactad, usa t>i

> • Danotas a raquirad haW.

I H a n t a c n a ' P a a a w e r d '

la cntarfaca praaantad balon.

A c c « » » L « v a t < S a a a w a t O -

M J r a t i *

6 8 . 1 1 S . t « 0 . 3 2

M d n a g r S i t e S t - t t i n g v

2 Set yourself up as WebmasterFire up a Web browser and go to the 'admin' directory. Entersome registration information and then log in as'webmaster'. Go to the main menu and select 'ManageUser Accounts'. Click on 'Update' next to 'webmaster', andenter a new password.

' A c l a s s i c l a n d x c g i t c o n f e n u c o O K r e f f u l a c i o c s .

S l B C ) 1 c i & s a s d S o n c f C e r s c b l s c l a s s i c l a c d i o q a e c < w l e h I c ba r c i f x c l a l a e s h t h a t c o n f e r M t o O T r e g u l a c l o a a . C o m e s w l c f t

h a n d l e a a d 4 S » e x t e n s i o n , m d e I r o n h i a t - d c M i t y s t e e l

piping with znstproof plastic coatla^. & pececeial favoucic

5 Stack the shelvesFrom the category page, click on the 'Manage Products'sidebar link. You'll see a list of example products. As before,click on the link to insert a new item, and add yourinventory one product at a time, supplying a unique ID,product name, short and long description, and the price.

Update HTML Page (Sys> u p d r t * d a u b a t a • n t r v f o r t K a i t i

• O a n o t a c a F i a l d .

:Sp«ash (Welcome) Page

P » 9 « C <

< T D V a L I G M - " T O P " > < F C « I

r *CE—(CSIVAR)hcml_fc*9e_ront_f«ce(/CStVAR)"SIZE-"(CGIVAR)hc«l_b«»«_foac_si«e( /CGIVAR)•COtOR-" (CGIVAft)hti*l_ba3e_font_ctiloK (/CGIV*R) •>

v i l e s t z « t i g « o f r o d s , l i n e , x e e i a , w e t a n d d r y t l l e a , l u x e sA n d s p o o n s c o t h e g A i a e A n ^ l i a g e o m u n i c y & x o u n d c h e w o r l d !

B e o f C h e b i g h l i . g } i c e d I t e n s x c o u x

8 Touch up your templatesTo change the basic arrangement of a pre-defined page, goto 'HTML Pages & Elements' from the main menu, click'Manage FITML Pages (System)' and choose the pagetemplate to change. For the moment, stick to customisingthe page content.

: l« i y« io i«pa9 tResd

a Hwf tysRyMhngEnip ;

3 Put your name on the doorNow to customise some of the basic settings. Go to themain menu, click on 'Global Settings' and select 'ManageSite Settings'. Fill in the blanks, choose a site-wide nameand title, and decide whether you want to include bannerads. Lastly select which of the five different logs you want.

® Configure RDBMS Connertinir fvtbngn hava net baan confi^urad to uiin i> ln4 )A CSV «ntv moda. I t t t to chan-a ne taUa* utln« an altarnata «

> n a l t a m a t a R O S M S

it If ro<J »ra upsmdins from v«

to using tha uma latbngs for bcth in > e n * a r a : U « a a d c f f a r a n t K D M S w

; MySQL {my.'?' Unix/Lffiux/Windows v

MySQL (mysc^ Dnver • UrwAJnu

PoalQfeSt^nver - Un«/L)fiPor tOfeSQL (OOeC Dnvet -

6 Link up a databaseIf you have a stock inventory stored on a database system,ClickCartPro talks nicely with all the major RDBMS formats.Select 'Database Utilities' from the main menu, create aconnection, map existing table fields to ones used byClickCartPro, and customise the way those fields are handled.

Manege HTMLPages (System)

ManageCategory Lis fangCHsjrfays

R e f e r e n c e N a m e * E l e m e n t N a m e *

Sr(e HTML Layout

E l e m e n t C o n t e n t *

Manage ProductDetait Displays

< T ^ - # H e s s a c r e I n i e r i i o o " "

M a n a g eCategoryProduct Displays

itCGIGET TYPE—SOB" VALUE—»te_«*ec_ness«g«-)

Manage SiteE l e m e n t s

< • — ♦ C o t j c e n c S e e c t o f t

Manage MattE l e m e n t s

|(CGIGET TYPE-'SOB" VALOE-'sce «*ec elenenfjpARAKS-" (CGIVAR) elftMenc_l<l (/CGIVAR) - )j J

Manage SystemM e s s a g e s

: < B R > < B R >

|</foncx/td>

9 More template tweaksOnce you've added new content to the site templates, youcan make more detailed changes by altering the codesnippets. To change these, select 'Manage Site Elements'and choose the element that corresponds to the variablename. Now edit the code to suit your preferences.

Technical terms bulldozed

■ BackendThis is the part of a site that isn't on display to visitors. Thebackend of eCommerce sites normally handles inventory,

calculating order prices, maintaining customer accounts andprocessing payments.

■ RDBMSRelational DataBase Management Systems, the posh name forthe type of database that pretty much every seriouseCommerce site uses, in which data is stored in a set of tablesthat can be combined, manipulated and generally made to doclever things,

■ Third party secure processingThis is v\/hen you outsource the authorisation and billing processto another site, such as PayPal or WorldPay, rather than runningyour own secure processing server.

How does i t work?

Designing slick templates■ While ClickCartPro's browser-based editing means that you'renot juggling dozens of files, it can also restrict users who wantto make big changes to the default templates, especially sincethey're laden with mid-90s era HTML. One way to make thingseasier is to use ClickCartPro's database-driven interface to use

CSS styles rather than 'TABLE' and 'FONT SIZE' tags. You'll find arun-down of exactly how to do this in the Power Users' Tips,which is overleaf.

I WELCOME TO OUft STOKE'

eCOMMERCE I PRACTICAL WEB PROfECTS I 59

Page 60: Practical WebProjects 19

eCommerce project Set up a payment processing system for your Web store

Onl ine resources

Find out more on the Web

Name of site: ClickCartProSkinsURL: vvww.clickcartprDSkins.comWant to give your online shop a distinctive looit and feel? For arelatively small outlay, you can pick up one of a range of pre-buift layouts that you can then customise, or splash out for abespoke design incorporating your logos and design scheme.

Name of site: Microsoft bCentral eBusinessGuideURL: www.bcentral.co.uk/marketjng/ebusinessMicrosoft knows how to make money that's for sure, and itsbCentral site offers a wide range of advice for small businessesespecially those with online aspirations.

How does i t work?

Instant payment notification■ Since our shopping cart uses third-party processing withPayPal you're probably wondering how OickCartPro knowswhen an order's been completed. Fortunately, PayPal provides a

nifty payment verification service that saves online sellers fromhaving to change the status of orders from 'Pending' to'Completed' by hand. The PayPal server sends a HTTP request aparticular URL on your site, which includes an additional uniquecode, providing notification that the order has been completed.Then, to ensure that a sneaky hacker isn't 'spoofing' Paypal,ClickCartPro sends that code back to PayPal's verification server

« » o n M e c i e t »

□ □

€f

th» information balow uplcwd a fit* to this vcbs«rver. In order to uponm of th« folloMing •xtsncions; .{jif, .jpg, .t»r, .tsr.gz, .atp, .pdf. mu«t crnumerit charactar artd canrvet begin vwth the words or 'default'. Uptosdi1 5 0 D i o l c ^ y t « . ^

- D e n o t e s a r e q u i r e d fi e l d .

S e l e c t T l i e l v p e O f 1 * T o U p f c w d *

j Image'PTO<hK:tDetail' S e k c t T l w F A e T o U p l D M l *

[sl<ltH)\d«cktat shop ifnptansyjf&^

10 Upload your imagesYou can add images of your products through ClickCartPro'sinterfece, which makes them easy to manage. From themain menu, selea 'File Utilities', and then 'File Upload'. Foreach image, select the category and the file you wish toupload. To see these files, selea 'Manage Files'.

U M r O e i M e fl C s i c u l a t o nC a t c u M M O n To t a l k m C o s tCstculafeon On Total torn WetgC e i c i i l a k o n O n To e i t e m Q a n

O f T p i B l l l B f n C o a i

14 Going postalClickCartPro is flexible when it comes to working out postageand packing. You'll need to specify delivery charges on aper-product basis in the product inventory: don't worry toomuch about the 'realtime' options, choose whether tocharge by weight, specify a cost, or use a custom script.

A f x c z - v e z x l y u B y a a z c x d e r l a i i' B u i l t . ' b B t l o s , y c B b e d :

S I M I D e m e z y a a r p m y m a t u H i

u u j r U r U n g - c t et o P a y ^ 1 ' # » e c B x «

i t u m . C k e e y e a r p m y w B B tr i l i a fl , y t m b e a i x e c t e d

l o t b i s v A S i t e f o r y o u r o r d e r

18 Time to pay, palFrom the 'Payment methods' page, scroll down to 'PayPal -Request Form', and dick on 'Update'. On the next page,change 'Active Status' to 'Active', and scroll down to the codefor an HTML form. Replace 'Your-Email' with the emailaddress you've registered with PayPal, and click 'Submit'.

DispUy Extra Large Image Pofntp * Prorft irt Extra Lar)

|No ,^i gif

Product Dwftad Image Name

[simpkins.gif

Category Produc t

rtone gtf

PrcKlMct Detaf Oispby Type *

1 Defeirft Fom»al 1 ^

Centered Image DisplayN o i m a o e D t s p l a v e d

11 Rule of thumbnailInstead of cropping images in Photoshop to fit the template,ClickCartPro can scale them. To customise this, select 'GlobalSettings' from the main menu and click on 'Manage ImageSize Settings'. You can then change the default width forproduct images; thumbnail-size is a good idea.

! Prices Include VAT

N o V A TPnces Exclude VAT

r V A T n o « < t n « ) • Disiibv PriHiiKt Inug* in CMt •

Yes v]

15 Remember the taxmanClickCartPro comes with default international settings thatreflect who needs to pay VAT but you'll usually also wantyour customers to see prices with VAT included. To do this,go to 'Global Settings', click on 'Manage Store Settings' andset 'Manage VAT to 'Prices Include VAT'.

P a y m e n t N o t i fi c a t i o n P r e f e r e n c e

a v m e n t N o t t fi c n t t o n

Payment Notification integrates PayPst payment notification andtxm witfi your web»t«'s badi-end operations. Chedi ttvs box to activateyment Notiftcation, and enter ttie Uf&. at wtKti you wil recenw the payment•«s betow. Ttw LW. should foe a URL whK^i you own and at wt»ch yoo receive

t you can support the notificatwo and authenticatKin system.

19 Check that PayPal's been paidTo double-check everything works, log into PayPal go to the'Merchant Tools' menu and enable 'Instant PaymentNotification' for your shop's URL. Return to ClickCartPro andadd a unique password or phrase in the 'Transaction

Key/Password' field.

60 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 61: Practical WebProjects 19

Set up a payment processing system for your Web store eCommerce profectIt's important to specify a shipping method for your products. One way to simplify things is tocreate a custom script and malce this the default for every item. Go to 'Shipping Charges', clickon 'Manage Shipping Settings', and add a new item containing your script. Now go to theStore Catalog, select 'Manage Products', and for each product, change the 'Delivery Method' to'Custom Shipping' and change the 'Custom - Shipping Script' to the script you've created.

Power users' tipsDisplay Extra Large Image Popup * P r o d u c t E x t r a U m

|Yes v| simpktns.jpg

Product Detail Image Name Category Prodnc

l i impk in t . j pg J simpktns.jpg

Product Detail Display Type *

! Default Form^1

No Image Dtsoiaved ^

U p d a t e

U p d a t e

D « l e t e C o u n t r y

U z b e k i s t a n

it«ractiY«ty search the database for items belo-vr. Th

Country Name ^ Contains String

12 Link images to inventoryNow link items to their respective images. Go to the 'ProductCatalog' and update each item by adding the filename ofthe image you've uploaded for each relevant displaycategory One useful shortcut is to use the same image forboth 'Category' and 'Product Detail'.

13 Choose your marketWhile the Web maizes it possible to sell w/orld»/ide, you maynot w/ant to get in the business of sending antique vases toVanuatu. To hone down your market, go to 'Orders &Payment' from the main menu, and click on 'ManageCountries'. Prune out the countries that aren't in your list.

U p d a t e P a v ' n ^ ' n t M e t

te upd>t« th« di « n t r v ( O f t h * c

* ■ D e n o t e s a r * a u l r * d ^ i « 4 d .

P v v p f w m t M a t l M d '

ConlKt Customer |

tProvid* yoiB payment nfonrt 1 Con tac t C i r r t ome f f

i I<-|»C>V» • V N o V

r o d * F M P t a m * *

c p - a p p trackin9_fe8pnopay

Wwiw ■! R Hwfvy't FtyAfhing Emponum

C « t « » e f y ! S p o o n S R v c r r a l o n "* M r « M I t ' 1 S M « U n «

C M i M v t O o f » *

.Pt14Gf| J'.tomtrr. unrt«d Kingdom

16 Make 'em payNow, we'll set up payment handling, so customers will bedirected to PayPal for processing. From the main menu,select 'Orders and Payment', 'Manage Payment Methods'.Click on 'Update' next to the 'Contact Customer' entry andalter the drop-down form entry for 'Active Status' to 'Inactive'.

17 Get a PayPal accountYes, it's stating the obvious, but in order to use PayPal youneed to register for an account at www.paypal.co.uk. Andeven if you're already signed up, you may need to upgradeto a Premier or Business account in order to receive credit

card payments or accept payments using a business name.

D e e r ( C G I VA R ) b i l l i n g _ n « a e ( / C S r v w t )

r b e a k y o u f o r o r d e r x a g f r o w (CGrv3Ul>htsa_Bi te_BaaBi ; /CSIVAR).

fi e e s e c b e e k t h e d e t a i l s o f1 S 7 0 1 C C f o r y o u r r e c o r d s :

y o u r o n l i n e o r d e r a n d p r i s t t h i s

O r d e r N u x u b e r :

I ^ t e :T i J n e :

1 C G I V A R ) t r a c k i s g i d ( / C G Z V A R )(CGIVAR) tr«cking|| date (/CGIVAR)(CGIVAR) traclr ioc_t i i»e ( /CGIVAR)

S t a t u s :

( C S Z VA R ) d i 0 p l a y _ t r s c k i a g _ 8 t <i t u s ( / C G I V A R )

( C S I G C T T Y P E — S O B - V A L r J E — s t

<

;e_order_ewda sp" PARAMS-' I tem>

1

Q a M t r t T i t K s t M t C

i t o r ^ n o i i c i

© Standard UK Dtlirery-£4.500 £U Delivery- - £10.000 Ontadethc EU - fag.oo

t f m i f f f u i

t > r I V l c ^ • s t a

u t s s h

W K I | } |

20 Spread the good newsOnce it's confirmed the order status has been changed to'Completed', notification emails are sent to the buyer andseller To customise these, go to 'HTML Pages & Elements'and select 'Manage Mail Elements'. Now 'Update' theconfirmation email template entry to suit your needs.

21 Testing, testing...Thoroughly test your store before it goes live. Play at beingthe world's most annoying shopper: add items, and thenremove them. Try to break things. But most of all, follow anorder through to the final invoice, and make sure that thecorrect payment details are being processed by PayPal.

Useful tricks and shortcuts

;CSS Styttftwt

W e l r s r e o a d - c o l o c s i c e i v w t }' • • r n * ' i 9 p « ;. b A c k g i o m d - M M ? * :

prl (' (CUJVMi) (/CSIVMJ -)<coJer: <C5I'vj«iH»tsa_liak_colct l/CSIVRit) j

• feo le r t t ce iV3Uimw*J_«c t i ' »e_ l»a ic_eo lo r ( /CSIVJW)»

■ Create a CSS page elementFrom the main menu, select 'HTML Pages &. Elements', click on'Manage Site Elements' and insert a new item. Give this the'Reference Name' 'ste.css', and 'Element Name' 'CSS stylesheet'.Insert your preferred styles, either directly into the text area orby cutting and pasting from Dreamweaver. For greaterintegration, use ClickCartPro's (CGIVAR) tags. Click on 'Submit'.

Mafn* ** E W m w t N « m « *

r t * _ l a y o u t ^HTML Layout _ JE W m e i t t C w t t c i r t *

< H T > £ L >

< H I A D >

< M E 7 a f I f t H E - ' ' G E N I R A T C « -CCWTENT-" (CGIVAR) adJaiE^ 5eBer« tor_B»et«_ te* t ( /CGIVAR) • :

< S T y i £ T Y P E - t e * t / C S S >

< / B t y l e >

■ Integrate your stylesheetOnce your CSS element is complete, it's time to ensure that it'sincluded in your templates. Qick on 'Manage Site Elements' andupdate the 'Site HTML Layout' at the top of the list. Scrollthrough the code in the text area until you see the <STYLE>tags within the 'HEAD' of the page. Insert (CGIGET TYPE="SUB"\/ALUE="ste_css") within those tags.

Splasti (W«lcom«) Page

<rCNT rJiCI-" (CGIVJIR) btml_fc«8«_£ciLt_r*ce (/CGIVAR) "S I Z E « " ( C G I V W l j f c t n a b a s e f o a t s i s e ( / C S I V A F ) "COIX*-- (CerVMl) StJiI_b«ee_f cct_color (/CSIVftF) ->— >

R * z t l e y * 9 n y t i s b i & oC s ^ o z i u a , o fl e n c g t h e w a a e s t z t Z Q * c f l i s e , r e e l a■ v e t « n ( i d r y f l i e * . s p o c n a « C ( i l u x e s t o t f c e g e a e a s g l i c g

conraonity aro«aci tfte world !</p> J

< p c l e « 9 < * ' ' w e l c o a e ' * > P r e s e B t e d b e l o v e r e s c n e o f t & eh i 9 h j . a . 9 h t e d i t e w i s o u x o a l i o e s c o r e . < / p >

■ Clean up your HTMLNow that your prefened look and feel is implemented as CSS,there's no need to have old-style FONT FACE tags in yourtemplate HTML. To clean things up, go back to the HTMLtemplate pages and comment out those elements, inserting CSSstyle tags in tfieir place. 'Submit' your new templates and testhow they look. If all seems well, delete the commented HTML.

eCOMMERCE I PRACTICAL WEB PROJECTS I 61

Page 62: Practical WebProjects 19

The eCommerce gallery

Proving that the dotcom boom wasn't just a flash in the pan, thisissue's gallery lool^s at the best online retailer sites and finds outthe secret of their success

I few years ago the doomsayers werepredicting the death of the high street store,

i The rise of the Internet shop was throwingthe future of established retailers into jeopardy, andit was hotly suggested that shoppers would cease totraipse the streets in favour of purchasing fromwithin the comfort of a Web browser.

This turned out to be nonsense because over the

years the market has settled down to afford real-worldand online retailers a comfortable share of trade.However, while it's now difficult to move around on

the Web without periodically ending up at an eShop,some sites have managed to get the business ofdistance selling so finely-tuned that they now standout as paradigms of the digital retail age.

Nothing puts shoppers off faster than a poorlydesigned Web site, so it follows that the mostsuccessful stores have worked hard to make their sitesas user-friendly as possible. There's much to belearned from looking at them, so for some great andinnovative retail ideas, check out the following qualityInternet shops for some hands-on research.

■ DABSwww.dabs.co.ukCurrently the king of the electricalgoods and computer component e-retailers, the UK arm of the Dabs onlineretailer boasts more than a millioncustomers who can choose from morethan 21,000 products available for sale.Taking its name from the combinedinitials of co-founders David Athertonand Bruce Smith, besides providing afirst class Internet store Dabs also offersa wealth of other services to helpconsumers to decide what to buy DabsTV is a great case in point, whichshowcases a range of the hottest newproducts and demonstrates theirfeatures to prospective buyers.

■ AMAZONvvww.amazon.co.uk

Probably the most identifiable of allonline retailers, Amazon tends to be thefirst name that comes to mind whenthinking of successful eCommercecompanies. Starting out in 1996 as anindependent online bookseller calledBookpages, the store has become thepremier Internet shopping location.Expanding its range to include DVDs, CDsand electrical goods, the first classcustomer service and streamlined

purchasing system make for an easy andtrustworthy shopping experience.Recently updated to include aMarketplace, where members can selltheir unwanted goods within the store.

■ APPLE STOREhttp://store.apple.com/Apple/WebObjects/ukstore/Mac users will be familiar with the

Apple Store, the premier place tobrowse and purchase products fromthe company's entire range of computerhardware, software and accessories.While the design of the home page is

unnecessarily cluttered, productcategories are listed in the left-handpanel to make navigating easier. Butperhaps the best site feature is the in-depth product descriptions that appearwhen an i tem i s se lec ted . Far f rom the

usual brief explanations, shoppers canget the low-down on products withouthaving to cross-reference other sites.

— Sloft —f Switth } .M« I QuickTimt f ppon } me OS XO r ^ n 0 * S 4 t M M u *

Choose your IMac.tawerfui features And opckms.N m t » M l « 4 4 H < r M n n « t L £ 0 A t p t o yU M M h l O M i # * w K 6 4

Uf W >«• OOD

n a : : .

» a n « I h r t t U M 2 « p M

i r C o m b o

£ 9 9 9 . 0 0

15^ f l«p«rw lTrTa<»tH iy1 G H r P o w e r i » C G 4

2SeM8 DOft333 SDRAM

R P P L E S T O R E

irSuperOr ive£ 1 , 4 4 9 . 0 01 7 - * » C h f l i t | M n ^ 1 T T d » ( H # y1 2&6HZ PowerPC 64

C)OA333 rwnp iy8 C K ^ u t r a ATA t f r ^ e

I^NVtMA OefOfM FX 5200 UUrs" i l 9 D O R v l t f M m M u r y

20" SuperOrive

£ 1 , 7 4 9 . 0 0 ^20-lncti fl«tptfl«ITFT0i»pl»y1.2$0Hz PowerPC 642 f6UB ODR333 nwnwry600B Ut ra ATA t fnveWCIA 6eForce FX S200 Ut ra64MB OOfi vOeo rrwinory

62 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 63: Practical WebProjects 19

I k■ ■

I k . ■■■■ m m m r■

L I ■

■ CRUCIALwww.cruc ia l .com/ukTech-heads out there mayknow that Crucial's parentcompany, Micron, is one of thetop-three computer memorymanufacturers in the world, butanyone will be impressed withits online store. Offering top-class components at excellentprices, Crucial's products aredelivered in the UK for free.Crucial attracts customers withinnovative site features such asthe 'Memory Selector' to easethe process of upgrading, plusa 30-day no-risk money backguarantee on all products.

■ BOYS TOYS UKwww.boystoysuk.co.ukOne of many sites to successfully attractthe disposable income of the modernbachelor. Boys Toys UK stocks all theinnovative items that the up-and-cominggadget-freak could want. Set up by themail order company Gadgets UK, this siteoffers everything from spy tools toTwister duvet sets. Navigation is fairlyeasy by using the extensive list ofcategory links, and its colourful, friendlyinterface suits the mood perfectly.Customers also have the opportunity tosupply feedback on items they havepurchased, which is an excellent way ofquickly stacking up endorsements andadditional product information.

■ DOMINOS PIZZAwww.dominos.CQ.ukThere's nothing quite like thepleasure of having piping hotfood delivered to your door,which is something that one ofthe UK's leading takeawaypizza chains knows all toowell. With a franchise that hasspread to the vast majority ofUK towns and cities, you cannow take advantage of theirproximity by ordering your foodonline. After plugging in yourpostcode, the site allowshungry shoppers to create theirown pizza or choose from aselection of popular choicesand will then deliver the goodsin a matter of minutes. Fastfood for the Internet age.

B o y s To y a U ^ c o . u k

Car GadgetsC o o t t o o t s

o g o f c a m e r a sO r t o o c t t u f tExecutive toysE f o o c

Gadget pensC a m e «

H o m e a u t o m a t i o n

K e y r m c s

L a i e r P o n t e r s

t.aughsL a v a L a i r v s

UghCertHotMte phone oadgetsP a r t *

® t 3 l a c k s t a r . c o . u k_ L . L - i

Browse » \ DVD Charts » | Pre-Orders | f wtwre TWes » [ Sptxiat* »

fuS/D ^(QOt { rSetectanopnon 31d v d c i e t a i l s . . . : U K D E U V E R Y !

Finding Nemo (Aninuited) (Two Discs) (DVD) (widescreen) (2003)

, starring; Albert Brooks (Voice). Alexander Gould (Voice), Ellen t(Voice), Wiilem Dafoe (Voice), Brad Garrett (Voice), AHson Janney (^S t e p h e n R o o t ( Vo i c e ) , A u s t i n P e n d l e t o n ( Vo i c e ) , J o e R a n f t ( Vo i c e ) , ^

I (voice)I Directed by: Andrew Stanton, Lee Uniu-ichI When Nemo, » young downfish, is unexpectedly carried far from home, h»s 0I father, Marhn, Dory, a friendly but forgetful regal blue tang fish embark on a: journey that leads to erKounters with vegetanan sharks, surfer dude turtles, hJ

jettyfrsh and hungry seaguHsl Pm<^ ftemo's break^ough computer animation |dehghtful viewRig experierKe.

I e / n a i i ^I e x t r a s . . .

^One: Widescreen version. Turn your TV mto a virtual aquanum with i^commentary inckidtr>g deleted scenes and recordir>g sessions. 'Maki

■ eBaywww.ebay.co.ukIn much the same way as the Amazonbrand has dominated the onlineretailing world, so eBay rules the moremarket-like domain of the Internetauction. The site allows users to registerand then put their unwanted items upfor sale to the highest bidder, it's like theworld's largest car boot sale right thereinside their Internet Explorer Althoughnot perhaps as safe a shoppingexperience than that from Amazon,there's plenty of bargains to be foundand the simple payment and deliverysystem makes exchanging products abreeze. Its success is in its simplicityand efficiency and as a result it justkeeps on growing.

ebYch o m e

I Browse | Search [ Seil | My«B«y | Cocmmtnlty

■ BLACKSTARwvm.blackstar.co.ukBlackstar's history as an online DVD andvideo store is something of a mixedbag. The site originally became popularwith shoppers due to its personalservice, excellent prices, wide range oftitles and free postage. However, thingswent downhill when they began tocharge for shipping, which quickly putregular customers off. Since then, anexpanded product range and free UKshipping has seen customers floodback, serving as a good lesson for allonline retailers because customers arenot going to pay for something thatthey are used to getting for free.

I savices silemac Mge

W e l c o m e,j AM Cat«90nes Search |

CloChlfKi 8, ActcieoriesC o i n sC o l l e c t a b t e s

C o m p u t I n QC o n s u m e r E l e c t r o n i c sD o l l s . D o l l H o u w sD V D s . F H m * T VH o m e . G a r d e n * F a m i l yJ e w e l l e f v » W a t c h e sM o b i l e t H o m e P h o n e sM u s i cPC « Video GamingP h o t o ( y a i > h v

P ^ r i t G U ^ m

Buyir^ rtew items brsnd names andcollectables on eBsy 13 simpleHei* s how i t works

^ FindDoni t>* daunted by the hundreds ofthousands o f i tems ava i lab le fo r sa le ITs

easy to find the item you want to buyQuickly and efficierrtlyHow to ind an item qujckly and efficiently

BuyFind out bow to get the item yoo want ata pnce you kkea d w i t h c o n fi d e n c eIntroducing Buy-it-Now

PayeSay is one of the safest places to shopon the web Discover the safeguards andseiwces in p lace to protect yourt r a n s a c t i o n s

Why eBay is safe

You must register to bid or btiy.It's fast, easy and FR£E!

0

■ Y o u r f s w u n t e s M d s e a r c h e s• M o s t - w a n t e d - i t e m n o t i f i c a t i o n s■ Access to last-mmute bargains■ Buyer Protection Pfogramme

AI ,ea< lvR^Mgi« l?S«r l f i

n n e f t h a n t s h » e e q u a l

opportunity to buy and settnew or used goods at fair pnces

eCOMMERCE I PRACTICAL WEB PROIECTS I 63

Page 64: Practical WebProjects 19

The eCommerce gallery

T h e C o l l e c t i o n

« y«u r«quir« 6f\Vmy b«tw««n VMnnOa/f 11 to Monday 1« Tetmianr. plMt* pise* your order i»mg theVatef«inc'« or DMi^wd to Or{ler m(vk«» (accowd Iron) Che menu «bov«).

Fi9e £20 oR wuctter for ytwr «rvt Dtdsr «Mth Vi(B«n Wmes only when you place an witer witti Inteiflor? CO (lid For fr

mLMshbfyB

Clidt NFOiorcokwfopbons^ £ 5 5 « *r £ 7 5 W

V i b r a n t H a n d 4 ^Citck NFO for colour options

( f £ 4 0 0 0 *r £ 5 5 0 0

Rose i L«y Hand-U«dCkk ItFO for colour options

<P£39 50 -r £ 5 2 5 0

Rmo & Gert iera BasketClick INFO for colour options

£39 50

Scented Uy Vase( Va a e > t c M e c O

C l K k M F O f o r c ( ^ o p t n r t s£ % W

( M D

Rose & Camatwn Hand twdCbck INFO for colour optwns

^ £ 3 4 6 0 '

Premwrn Sou^fuetCkck INFO for colour options

£ 3 2 5 0 -r £ 4 2 5 0

I N T E R F L O R R

Scented PetAe Hand-(>e<JClick INFO for colour options

( f £ 3 0 0 0 'r £ 4 0 0 0■ t t t d p * * '

C lass ic BasketClid'tff'O for colour options

£ 2 9 5 0 *r U 2 5 0• A » » »

Traditional BouquetClick MFO for cofoui options

r £ 3 7 5 0

Sroi fOB&gRl

■ LASTMINUTEwvwv.lastminute.comA few years ago, the premier online store for impulse buyers got off to a shaky startamidst the famous dotcom boom and bust period. Now things have changed for thebetter and it has never been easier to book a holiday theatre tickets and days out.The site is well ordered and the familiar navigation panel makes finding your wayaround easy In addition, the detailed descriptions also mean that you always knowthe fine print for what you're purchasing.

l a s t m i n u t e . c o m

W h a t ' s n e w ?L o v e 2 0 0 4W e e k e n d sSict hotklays

T r a v e lHobdaysS u m n % « r 2 0 0 4F l i gh t sH o t e l sFlight -f HotelT a i l o r - m a d e h o t s

C a r h t r eT r a m t i c k e t sC r u i s eT r a v e l i n s u r a n c e

E n t e r t a i n m e n tR e s t a u r a n t s

T h e a t r eM u s i c

F i h n

D a y s o u tS p o r tU K a c t i v i t i e s

Spring into style atL o n d o n F a s h i o nWeek-End - f o rinformation. 2-for-1t i cke ts and muchm o r e , c l i c k h e r e

^ Flight*Hotcl-SAVE «« HoUdav*^ ^ £ H j » i r g

L R s r m

^ tntertainment ^ Gifl»^ Ret taurmf

Flight > Hot^P e p a r t u f # p o i m . D e p a r t u r e d a l e D e p a r t u r e l i r n eI Sckct 3 117 *1 iFebruao' 3 ^ 1 | Idonlmnd^D w t i n a t i p n c i t y . R « t u m P a l e R i u m t i m e

l ^ ' - " ^ p F r j l f t b u a , , _ j M JC l a s s A i r l i n e s e n i o r a d u t * c t i i l d f » i

II don\ mnd ▼ i | Idonlmind

Show dii»ot flights only y e i v j i L i

' i i . m

( e s * i

■ INTERFLORAwww.in terflora.co.ukThere's no better way to say you're sorry than with a bunch offlowers, but as most men out there will tell you, taking thetime to pick out a selection, write a card and sort out thedelivery details in a high street florists can take up a lot oftime. So, recognising the plight of such time-strappedmisogynists, worldwide flower distributors Interflora has nowmade it possible to order a bunch of daisies online, from thecomfort of your own desk. The service is fast and efficient,and although prices are not cheap (the price of redemptionnever is), the careful and secure delivery will definitely makeit all worthwhile in the end.

V i b r a n t H a n d - t i e d

Vibrant and modem, this exquift* hand-twd is guarantesdto tmghten the day of any reciptert A beautiful iksplay ofShamrock Chrysanthemum L i l ies Getber* . Germmi .Spray Carnat ions and Spray Chrytanthemums A'aaa rv l

This product is available m s ran^e of colours Pleaseselect yow colour option from the Net then piess the orderbu t ton bekw

Login I MyTroHey | MyAccoum | Storet.ocator | Careers | Help

CICS3Q3SHn?(33OT. ;M u s i c O V D V k t e o G a t M S D i g i t a l

Z E R 0 7 r y m c o n w t o M V C x o w U kFirst t ime v is i tor? I Check out our pfe-order pagesS e a r c h o u r 2 0 0 . 0 0 0 C D s , D V D s a n d G a m e s '

G i f t Vo u c ^ w r s S p e c i a l O n e r s P o v r e r S e e r c h

M V C c o . u k RRingtones / /&L090S U

D V C

6 a n « e

P r o r t p t e o e

f m s i m

D V D P r e O r d e r s

gfit>«»qWCTW*TY?tgrYf L w t e d O f f e r )

P V O U

K W £ 4 1 t »

£ 2 0 . M l f a i V i ^ i

j t i l M V fi i a s s l o v o i i

TTve Matrw Revotrtcns Ovti ts

I FiHina Netnp tCotectors« W £ 3 H »

I CK-MQEol®RWEI8.B6 £12.W f*iiVii6w1» f w £ 2 2 i e £ 1 5 . M i w r r M Q w i

£ 4 0 . M i f a W M O M t l

cds for £4.99I Pre OtTtef Mustc

■ MVCw w w . m v c . c o . u k

Not that long ago, the high street retail giants were beginning to be hit hard by themigrating shopping habits of customers who were swapping real shops for themyriad of new online stores. The most common reason for the switch was thatprices were uniformly cheaper on the Internet, and most high street shops who didupload their products onto the Web did so wholesale, without adjusting prices andoften charging steep delivery costs. However, music and video giant iVIVC seems tohave the right idea, with its online shop offering competitive prices and cheapdelivery (£1 per order) to make it a genuine alternative to the currently morepopular Amazon and Play Web sites.

tu I PRACTICAL WEB PRO|ECTS I eCOMMERCE

Page 65: Practical WebProjects 19

A V

■ SHOESDIRECTw w w . s h o e s d i r e c t . c o . u k

No-one can deny that the fashionindustry is big business with a lot ofmoney to be made. So it comes as nosurprise that the success of mail orderclothes firms has proved that people aremore than willing to purchase items froma catalogue and try them out at home.Carrying this tried and trusted formulaonto the Internet, ShoesDirect offers thesame levels of service, only itconcentrates solely (sorry - Ed) on shoes.It features thousands of brand names inan easily searchable archive, with free UKdelivery to boot (sorry again) and no-quibble returns, the focus on customerservice has ensured that this site is

walking away as a winner (okay that's it).

has made it easy to buy yourweekly groceries online andhave them delivered to yourd o o r Te s c o h a s w o r k e d h a r d t o

make the site as user-friendlyand accommodating aspossible, with all thepromotional prices available inreal stores emulated online soyou won't miss out on abargain. In addition, the abilityto pick a delivery slot meansthat you won't be kept waitingfor your goods.

TESCOI

■ WHSMITHw w w . w h s m i t h . c o . u k

The popular high streetbookseller has toughcompetition online, thanks tothe established high-profilestores such as Amazon alreadyenjoying a very loyal share ofcustomers. However, WHSmithdoes have a few tricks up itssleeves by allowing shoppersto purchase gifts, stationaryand even magazinesubscriptions via the Web sitestore. Delivery charges to yourdoor are high, but you can haveitems delivered to a local storefree of charge, which means it'seasier to get hold of hard tofi n d i t e m s .

■ SONY STYLEwww.sonystyle.co.ukSony is perhaps the most identifiablebrand of electrical entertainment goodsin the world, so it comes as no surprisethat the company has managed to setup its own in-house online store sellingeverything from computers and laptopsto Hi-Fis and DVD players. The Sony-style site is slickly designed and easyto navigate, but as with most in-houseretailers it does sell goods at list price,meaning it's often cheaper to check outother stores for more competitive priceson Sony products. That said, it's a greatplace to check out product specs anddetails and if you look closely you canstill pick up a bargain.

s o n y s t y l eO n N n e s h o p

W « l c o m « , p t M « « « H ^ h * r t t o t o 9 l n P r o c K w t *

S e a r c h

My AcMunt About U*

A c c t i « o r i « «

:>VAIODt>MopPC*:-VAJOi«p<opw:t:• Como«t»r

^ P r o ^ o r tVCUtPOA

> C » f T i c o r « » » r »

:♦ Mtrncfy JtJch> P h o t o P r » m « r «

P o r t o b t * A w c M o

U M w w H i l o . r W G B z w M B o v t v a ) - a w

F P E E S U n d ^ & h i o e i n e '

■ WOW WOMANw w w . w o w w o m a n . c o m

A newly launched store from the samepeople that own the popular CD-WOWmusic and DVD Internet shop, WOWWoman is attempting to tap into theniche market of lingerie, cosmetics andjewellery in an effort to gain thecustom of the discerning modernwoman. Its distinctly feminine palettemakes it instantly recognisable, and theextensive list of brands means it's oneof the most promising new stores onthe Web. The prospective shopper hasbeen considered because, like its sistersite, the offer of free delivery on allpurchases makes the packageextremely attractive to the wearyshopper There'll be no need to dragthemselves round the shops anymore.

eCOMMERCE I PRACTICAL WEB PROIECTS I 65

Page 66: Practical WebProjects 19

eCommerce profect Reach out to your customers with a PHP mailing list1

Rache l

A n d r e w

Rachel Andrew is Director of Web solutions company edgeofmyseat.com(www.edgeofmyseat.com) and is an experienced Web developer across a range of technologiesand platforms. She is a member of the Web Standards Project (www.webstandards.org) on dieDreamweaver Task Force, and is also a published author. She has recently worked as a co-authoron The Dreamweaver Developer's hstant Troubleshooter published by APress

Reach out to yourcustomers with aPHP mailing listCreate a mailing list using PHP and MySQL to improve customerrelations and promote special offers on your site

The br ief

Task: Set up a mailing listin PHP and MySQL

Difficulty: IntermediateTime I need: 1 hour

On the CD

All files for this project canbe found on the CD

Lingoleve l l e r

Technicalt e r m sbul ldozed

■ PHP functionsPHP like any scriptinglanguage, has Its own inbuilt functions to help

you to do standard taskssuch as sending an emailor connecting to adatabase. We are usingseveral in-buitt functions

in this tutorial.

■ QueryA query is any commandexecuted on the

database, for example toinsert or delete data.

he ability to create a list of email addresses to send out mailings is auseful feature to have on your site. If customers are interested In yourproduct or service you can offer to keep them in touch through your list -

perhaps by emailing a list of special offers or newsletters once a week. By doingthis you will have visitors coming back for more time and again.

You could use a third party service to collect the email addresses and send outthe emails, or you could ask people to sign up for a service like Yahoo Groups. Youcould set up an announcements only list to contact everyone in one go. This Is quickto set up, although people may not be willing to go through the extra steps ofsigning up for the third party service if they are not already a member

Creating your own mailing list is not difficult and you also have control over thedata to offer assurances as to what you will do or not do with the email addressesbecause people are wary of submitting their details.

In this workshop we will use PHP and MySQL to create a mailing list for your Website. This script is suitable for any site that has the capability of using PHP andMySQL and the email addresses will be stored in a table in a MySQL database.

F I f fi r t t i j B W fi t ) fi o o k r o r t e T o o t e

Send Newsletter

To send the newsletter to all sut)$crtt)ers, enter your subject line and tnessagettten dick the send button betow.

S u b j e c t ;

Message:T h t e t o s i e n y o ut o o v z l a t e s t s p e c i a lc f f e r a - i f y o o d o » o tt o r e c i e - r e e s s a a l s f x o B u «

n o r e t S s e s p l e « 9 « v x s x t

Sendl

D o n e

Creating an opt-in email newsletterThe script will allow users to add their email addresses to the list. If they enter an emailaddress that is already subscribed they are given the option to remove it. They are sent aconfirmation email to ensure that people cannot add or remove someone without theirknowledge and that the address works. The list administrator can then write a messageand send it out to all confirmed email addresses on the list.

C R E AT E TA B L E t b l E m a i l (emaillD INT NOT NULL AUTO_INCREMENT PRIMARY KEY,e m a i l A d d r e s s VA R C H A R ( 2 5 5 ) ,e m a i l U n i q V A R C H A R ( 1 6 ) ,e m a i l C o n fi r m e d T I N Y I N T D E F A U L T 0 ) ;

1 Create the databaseWe need to create the database table in which we willstore the email addresses and information needed toconfirm them. In a new or existing database create a tablenamed 'tblEmail' with the fields 'emaillD', 'emailAddress','emailUniq' and 'emailConfirmed'.

) e l s e {S u n i q « u n i q i d C " ) ;m y s q l . q u e r y C I N S E R T I N T O

tblEmail (emailAddress, emailUniq) VALUES ( " ' .$ _ P 0 S T [ ' e m a i l ' I . . $ u n i q .

4 Adding addressesIf the address does not already exist then add it to thedatabase. We create a unique identifier for the recordusing the PHP function 'uniqO' so that we can use this toidentify the record when confirming email addressadditions and removals by email.

? > < ) D O C T Y P E h t m l P U B L I C " - / / W 3 C / / D T D X H T M L 1 . 0T r a n s i t i o n a l Z / E N "

" h t t p : / / w w w . w 3 . o r g / T R / x h t m l l / D T D / x h t m l l -t r a n s i t i o n a l . d t d ' ' >

< h t m l >

< h e a d >

< t i t l e > A d d / R e m o v e E m .

l i s t < / t i t l e >

< l i n k r e l « " a t y l e s h e e t " h r e f « " m a i n . c 8 S "t y p e = " t e x t / c s s ' ' / >

< / h e a d >

< b o d y >

l a i l A d d r e s s f r o m m a i l i n g

7 Open the HTML documentYou'll see that the first six sections of code are above the'html' tags and will be passed by the server before thedocument gets to the browser. Open an HTML documentas normal in order to print out the forms and messages tothe user

66 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 67: Practical WebProjects 19

^each out to your customers with a PHP mailing list eCommerce project

< ? p h p5 c o n n =

mysq l_connec t ( " l oca lhos t " , "USERNAME" , "PASSWORD" ) ;m y s q l _ s e l e c t _ d b ( " d b M a i l i n g L i s t " , $ c o n n ) ;

2 Connect to the databaseTo use the data in the database we need to create a

database connection using the 'mysqLconnectO' functionin PHB which needs the location of the database, yourMySQL username and password. Then use the'mysql_select_dbO' function to select the mailing list.

$ i n e s s a g e = " T h a n k y o u f o rs i g n i n g u p t o o u r m a i l i n g l i s t . B e f o r e w e c a n s e n dy o u e m a i l s w e n e e d t o c o n fi r m y o u r e m a i l a d d r e s s .P l e a s e c l i c k o n t h e U R L b e l o w t o c o n fi r m y o u ra d d r e s s : \ n \ n h t t p ; / / p w p / c o n fi r m . p h p T c f = " . $ u n i q ;

$ s u b j e c t = " T h a n k y o u f o rs i g n i n g u p t o t h e m a i l i n g l i s t " ;

$ f r o m =

" F r o m : i n f o ^ e d g e o f m y s e a t . c o m " ;m a i l ( $ _ P O S T [ ' e m a i l ' ] ,

$ s u b j e c t , $ m e s s a g e , $ f r o m ) ;$ a c t i o n = " a d d " ;

}

5 Send the confirm emailSend a confirmation email using the 'mailO' function. Thisstops people from signing up other people who do notwant to be on the list, because the owner of the emailaddress must confirm it before they will be sent any of therequired messages.

< ? p h pi f ( $ a c t i o n = = " a d d " ) < ? >< p > < s t r o n g > T h a n k y o u f o r a d d i n g y o u r e m a i l a d d r e s st o t h e m a i l i n g l i s t . < / s t r o n g > < / p >

8 Provide confirmationIf the user has added their address we'll display amessage letting them know it has been successfullyadded. You might also want to give some information onwhat happens next, how they need to confirm theiraddress, how to remove their address and so on.

i f ( $ ^ P O S T [ ' b t n A d d r e s s ' ] ! = " " ) {i f ( m y s q l _ n u m _ r o w s ( m y s q l _ q u e r y ( " S E L E C T

e m a i l l D F R O M t b l E m a i l W H E R E e m a i l A d d r e s s = .

$ _ P O S T t ' e m a i l ' ] . " ' " ) ) 1 = 0 ) {$ a c t i o n ■

3 Validate the addressCheck to see if the field 'btnAddress' is in the 'POST'. If it isthen someone has clicked the 'Post' button. From here

you will need to check to see if the email address exists. Ifyou discover that it does then we will ask the user if theywould like to remove their email address.

} e l s i i f ( $ _ P O S T [ ' b t n R e m o v e ' ] 1 = " " ) {$ r e s u l t = r a y 8 q l _ q u e r y ( " S E L E C T e m a i l U n i q

F R O M t b l E m a i l W H E R E e m a i l A d d r e s s - .$ _ P O S ' T [ - e m a i l ' ] .

$ r o w • = m y s q l _ f e t c h _ r o w ( $ r e s u l t ) ;$ u n i q = $ r o w [ 0 ] ;S m e s s a g e « " Y o u h a v e r e q u e s t e d t h a t y o u r

e m a i l a d d r e s s b e r e m o v e d f r o m t h e m a i l i n g l i s t . I ft h i s i s c o r r e c t t h e n s i m p l y c l i c k o n t h e l i n k b e l o wt o r e m o v e y o u ra d d r e s s . \ n \ n h t t p : / / p w p / r e m o v e . p h p ? r m - " . $ u n i q ;

$ s u b j e c t « " P l e a s e c o n f i r m t h a t y o u w i s ht o b e r e m o v e d " ;

$ f r o m » " F r o m ; i n f o 8 e d g e o f m y s e a t . c o m " ;

m a i l ( $ _ P O S T [ ' e m a i l ' ] , $ s u b j e c t ,$ m e s s a g e , $ f r o m ) ;$ a c t i o n = " d e l e t e d " ;

6 Call to actionIf the user has submitted the 'Delete' button, we need tosend them an email requesting they confirm this action.Once again, this prevents people from unsubscribingothers just by knowing their email address. The confirmemails contain the 'uniqid' value, which is hard to guess.

< 7 p h p} e l s e i f ( $ a c t i o n ~ " r e m o v e " ) { ? >< p > Y o u r e m a i l a d d r e s s i s a l r e a d y a d d e d t o t h el i s t . I f y o u w o u l d l i k e t o r e m o v e y o u r e m a i la d d r e s s f r o m t h e l i s t t h e n c l i c k t h e

< s t r o n g > R e m o v e M e l < / s t r o n g > b u t t o n b e l o w . < / p >< f o r m m e t h o d = " p o s t " a c t i o n = " m a i l l i s t . p h p ' ' >< i n p u t t y p e = " h i d d e n " n a m e = " e m a i l " i d = " e m a i l "v a l u e = " < ? = $ _ P O S T l ' e m a i l ' ] ? > " / >< p > < i n p u t t y p e = " s u b m i t " n a i t i e = " b t n R e r a o v e "i d = " b t n R e m o v e " v a l u e = " R e m o v e M e i " / > < / p >< / f o r m >

9 Removing an addressIf the email address exists we will show the user a

message and also write out a form that contains a hiddenfield for the email address and a button. If they wish toremove their address from the mailing list they can clickthis button.

Power users' tips

Useful tricks and shortcuts

P u T T V

Caleooiy:

a

Session

a Te r m i n a l

KeyboardS W i n d o w

A p p e a r a n c eTranslat ionSelect ion

C o l o u t

e C o n n e c t i o nTe lne tSSH

Ba«c options foi your PuT TY sessioiSpecify your conr)®ction by host niHostNwwjmy.setvet.corn

, Protocol:^ R a w

Port

" I ^■ Te lne t

Load, save or delete a stored session

»ev»dSe«iiom

■ Back-up dataOnce you are collGcting addresses in your database, you w/illneed to back it up regularly. If you have ssh or telnet access to

your server you can do this frorTi the cortimandline. Connect toyour hosting account using your ssh / telnet client as instructedby your hosting company

# frwillLlft Notepad

" MySQL dump 9,09

- - H o s t ; l o c a l h o s t

— S e r v e r v e r s i o n

D a t a b a s e : d b M a i l ' f n g L l s t

4 . 0 . 1 5 - n t

" T a b l e s t r u c t u r e f o r t a b l e ' t b l e m a i V

CREATE TABLE tbiemall (l i o I n t ( l l ) N O T N U L L a u t o . l n c r e i n e n t ,l A d d r e s s v a r c h a r ( 2 5 5 ) d e f a u l t n u l l ,l u n i q v a r c h a r ( 1 6 ) d e f a u l t N U L L .I c o n fl r m e d t i n y 1 n t ( 4 ) d e f a u l t 0 \m e d t i n y 1 n t ( 4 ) d e f a u l t

i P R I M A RY K E Y ( e m a i l I D )j) TYPE-MyiSA«;- - D u m p i n g d a t a f o r t a b l e t b l e m a i l *

■ Replace the locationTo back up the data use the 'rTiysqldurTip utility'. Type

'Mysqidump database.name -user=USERNAME-password=PASSWORD > /home/directory/backup.sqr.The path Vhome/directory/backup-sql' should be replaced witha location where you can grab the file. On shared hosting this is

likely to be your home directory that you can FTP into.

■ Download ttie SQL fileIf your server offers a Web-based admin tool such asPHPMyAdmin you should be able to create the script using that.In 'PHPMyAdmin' select the 'Export' tab in the interface and thenunder 'Export' selea the 'SQL radio' button. Click the 'Go' button,download and save the 'sql' file.

eCOMMERCE 1 PRACTICAL WEB PRO|ECTS 1 67

Page 68: Practical WebProjects 19

eCommerce project Reach out to your customers with a PHP mailing list

Onl ine resourcesi m m m H

Find out more on the Web

» ' > < * O • ' «

5 5S H a ,S t a g ,

I t '

SS5ii255E=-

3 S "

Name of site: WBSchools PHP TutorialURL: www.w3school5.com/plipWBSchools offers a range of excellent tutorials on variouslanguages and subjects. Its PHP tutorial is a great introductionto the language, or a point of reference for experienced PHPdevelopers.

Name of site: PHP on SitepointURL: www.sitepolnt.com/subcat/98Sitepoint offers a wide range of tutorials for the PHPdeveloper They cater for all levels of expertise from buildingyour first database-driven site to nnore complex andadvanced subjects.

< ? p h p} e l s e i f ( $ a c t i o n « = " d e l e t e d " ) { ? >< p > Y o u h a v e b e e n s e n t a n e m a i l . C l i c k i n g o n t h el i n k i n t h e e m a i l w i l l r e m o v e y o u r a d d r e s s f r o mt h e l i s t . < / p >

10 Confirm the removalIf the user has clicked the 'Remove' button a form will be

sent to them confirming their removal from the email list.After sending that email we show the user a message sothey know what they need to do now to ensure they areremoved from the mailing list.

< l D O C T y P E h t m l P U B L I C " - / / W S C Z / D T D X H T M L 1 . 0

T r a n s i t i o n a l / / E N "

" h t t p : / / w w w . w 3 . o r g / T R / x h t m l l / D T D / x h t m l l -t r a n s i t i o n a l . d t d ' ' >

< h t n k l >

< h e a d >

< t i t l e > C o n fi r m y o u r e m a i l a d d r e s s < / t i t l e >< l i n k r e l = ' ' s t y l e s h e e t " h r e f = ' ' m a i n . e s s "t y p e = ' ' t e x t / c 9 S " / >< / h e a d >

< b o d y >< h l > M a i l i n g l i s t a d d r e s s c o n fi r T i i a t i o n < / h l >< p > < ? = $ m e s s a g e ? > < / p >< / b o d y >< / h t m l >

14 The documentIn this document we show the contents of the variable

'Smessage', which will indicate to the user that they arenow signed up or explain that we couldn't find theiraddress. We can then ask them if they want to sign up orto try signing up again.

< ? p h p} e l s e { ? >< f o r m m e t h o d = " p o s t " a c t i o n » " m a i l l i B t . p h p " >< h l > P l e a s e e n t e r y o u r e m a i l a d d r e s s < / h l >< p > < i n p u t t y p e » " t e x t " n a i n e = ' ' e m a i l " i d - " e m a i l "c l a s s = ' ' t x t " / > < / p >< p > < i n p u t t y p e = ' ' s u b m i t " n a m e = " b t n A d d r e s s "i d « " b t n A d d r e s s " v a l u e = " s u b m i t " c l a s 8 « " s m t ' ' / > < / p >

< / f o r m >

< 7 p h p>?>< / b o d y >< / h t m l >

11 Show the initial formThis is the initial form which will be displayed when a userfirst comes to the page. It will give them a field in which toenter their email address. Once they've done that they willbe presented with two options: they can either add a newaddress or remove an existing one.

< ? p h p$ c o n n « m y 8 q l _ c o n n e c t ( " l o c a l h o s t " ;i " y s q l _ s e l e c t _ d b ( " d b M a i l i n g L i s t ' ' , $ c o n n ) ;if(mysql_num_rows(my8ql_query("SELECT emaillD FROMt b l E m a i l W H E R E e m a i l U n i q - . $ _ G E T [ ' r m ' ] .! = 0 ) {

m y s q l _ q u e r y ( " D E L E T E F R O M t b l E m a i l W H E R Eemai lUn iq = ' " . $_GET[ ' rm ' ) .

$ m e s s a g e = " Yo u h a v e n o w b e e n r e m o v e df r o m t h e m a i l i n g l i s t . " ;> e l s e {

$ m e s s a g e = " W e c o u l d n o t fi n d y o u re m a i l a d d r e s s , i f y o u a r e s t i l l r e c e i v i n g u n w a n t e dm e s s a g e c o n t a c t u s a n d w e w i l l e n s u r e y o u a r er e m o v e d . " ;>m y s q l _ c l o s e ( $ c o n n ) ;7 >

15 Remove an addressThe page 'remove.php' is the confirmation page that userscome to after receiving a remove address confirmationemail. It acts just like the 'confirm.php' page but here amatched unique ID will result in the record being removedfrom the table rather than updated.

Lingo leveller

Technical terms bulldozed

■ mailOThe 'mailO' function allows you to send mail. You need to haveset up details of your SMTP service in the 'php.ini' for the mail

sending to work. The 'mailO' function requires the 'to' address,'subject', message' and any additional headers (such as 'from')to be included as parameters.

■ MySQL functionsDatabase connectivity is achieved by funrtions specific to thedatabase you are using. For example 'mysql_connect'Clocalhost', 'usemame', 'password') will connect you to thedatabase server on the localhost with a username of usemame

and a password of password and mysql_query(query) willexecute the query on the mysql database that you haveseleaed. If you are using a different database adjust your codeto use the correct functions.

< ? p h pi f ( $ _ P O S T I ' b t n S e n d ' ] 1 - " " ) {

$ s u b j e c t = $ _ P O S T [ ' s u b j e c t ' ] ;$ m e s s a g e - $ _ P 0 S T [ ' m e s s a g e ' ] ;$ f r o m = " F r o m ; i n f o ^ e d g e o f m y s e a t . c o m " ;

e c h o " < h l > N e w s l e t t e r s s e n t t o

u s e r s < / h l > '

e c h o " < u l > " ;

$ r e s u l t » m y s q l _ q u e r y ( ' ' S E L E C Te m a i l A d d r e s s F R O M t b l E m a i l W H E R E e m a i l C o n fi r m e d -

1 " , $ c o n n ) ;

18 It's in the postSet up variables for the emails if the form has beenposted. The subject and message come from the formpost and are what was completed in the form. The fromaddress is whatever email you want to use to address thesent mail from.

19 Retrieve the addressesWe use the 'mysqLqueryO' function to get a list ofaddresses in the database. The 'WHERE' clause ("WHEREemailConflrmed - D filters the addresses so that we onlyget those addresses that have been confirmed by theowner of the address on the 'confirm.php' page.

68 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 69: Practical WebProjects 19

Reach out to your customers with a PHP mailing list eCommerce projectIf you are trying to use the Windows SMTP server to send mail via the script you may receivean SMTP relaying error. To get it working go to Admin Tools', 'IIS' and right-click 'Default SMTPServer', then select 'Properties'. Select the 'Access' tab and in 'Relay Restrictions' select 'Relay'.In the top two radio buttons selert All except the list below'. Click 'OK' then 'Restart' the SMTPservice. Turn off the service when they're not in use.

Lingo leveller< ? p h pm y s q l _ c l o s e ( $ c o n n ) ;? >

< ? p h p$ c o n n =

m y s q l _ c o n n e c t ( " l o c a l h o a t " , " U S E R N A M E " , " P A S S W O R D " ) ;m y s q l _ s e l e c t _ d b ( " d b M a i l i n g L i s t " , $ c o n n ) ;i f ( m y 8 q l _ n u i n _ r o w s ( m y s q l _ q u e r y ( " S E L E C T e m a i l l D F R O Mt b l E m a i l W H E R E e m a i l U n i q = . $ _ G E T { ' c f ' ) . " ' " ) )1 = 0 } {

m y s q l _ q u e r y ( " U P D A T E t b l E m a i l S E Te m a i l C o n f i r m e d = 1 W H E R E e m a i l U n i q » .$ _ G E T ( ' c f ' ] .

$ m e s s a g e ■ " T h a n k y o u f o r c o n f i r m i n gy o u r e m a i l a d d r e s s . " ;} e l s e {

$ m e s s a g e - " W e c o u l d n o t fi n d y o u r e m a i la d d r e s s / i f y o u w i s h t o j o i n t h e m a i l i n g l i s t e n t e ry o u r a d d r e s s < a h r e f = \ " m a i l l i s t . p h p \ " > h e r e < / a > . " ;}m y s q l _ c l o s e ( $ c o n n ) ;? >

12 Close the database connectionAfter using a database connection you should close it atthe end of the script or once you are finished using it. Bydoing this you'll be freeing up your resources. On a verybusy site you might start to get connection errors if youdon't do this, so it's worth remembering.

13 Update the databaseThe link, that the user clicks will contain the 'uniqid', whichmeans that you can update the record in the databasewhich has that id and set the 'emailConfimed' variable to

one rather than the default 'zero'. If you can't find therecord then show a message.

Technical terms bulldozed

■ Database serverWe are storing our email addresses in a MySQL database.MySQL is a database server so, unlike a file-based databaselike Microsoft Access, you do not upload a file to your hostingaccount but a database is created in the MySQL databaseserver that you can connect to.

■ Database tableWithin a database there are tables, you can have lots of tableswithin one database and they may relate to each other. If you

already have a database on your site that is used for otherfunctionality you can still create a table for this script - if youhappened to already have a table named 'tblEmail' in yourdatabase you can rename this table and make sure you

change the names in any queries.

How does i t work?

< I D 0 C T Y P E h t m l P U B L I C " - / / W a C Z / D T D X H T M L 1 . 0T r a n s i t i o n a l / Z E N "

" h t t p ; / / w w w . w 3 . o r g / T R / x h t m l l / D T D / x h t m l 1 -t r a n s i t i o n a l . d t d ' ' >

< h t m l >

< h e a d >

< t i t l e > R e m o v e y o u r e m a i l a d d r e s s < / t i t l e >< l i n k r e l - ' ' s t y l e s h e e t " h r e f - " m a i n . c s s "t y p e = " t e x t / c s s " / >< / h e a d >

< b o d y >< h l > M a i l i n g l i s t a d d r e s s r e m o v a l < / h l >< p > < ? ! = $ m e s s a g e ? > < / p >

< / b o d y >< / h t m l >

< ? p h p$ c o n n =m y s q l _ c o n n e c t { " l o c a l h o s t " , " U S E R N A M E " , " P A S S W O R D " ) ;m y s q l _ s e l e c t _ d b ( " d b M a i l i n g L i s t " , $ c o n n ) ;? > < ! D O C T Y P E h t m l P U B L I C " - / / W 3 C / / D T D X H T M L 1 . 0

T r a n 3 i t i o n a l / / E N "

" h t t p : / / w w w . w 3 . o r g / T R / x h t m H / D T D / x h t m l l -t r a n s i t i o n a l . d t d " >

< h t m l >

< h e a d >

< t i t l e > S e n d N e w s l e t t e r < / t i t l e >

< l i n ) t r e l = " s t y l e s h e e t " h r e f = " m a i n . e s s "t y p e » " t e x t / e s s " / >< / h e a d >

< b o d y >

16 The html pageHere we write out the messages to the user to explainwhether or not their remove request has been successful.Some information here on what to do if they still receiveunwanted emails after unsubscribing will ensure they don'tfeel you are spamming.

17 Send the emailsThis is the page from which the administrator sends theemails out to the mailing list. In a real-world situation youshould secure this page so that only someone whoauthenticates with the correct username and passwordcan send the mails to your users.

w h i l e ( $ r o w = m y s q l _ f e t c h _ a r r a y ( $ r e s u l t ) ) {

m a i l ( $ r o w ( ' e m a i l A d d r e s s ' ] , $ s u b j e c t , $ i n e s s a g e ,$ f r o m ) ;

e c h o " < l i > " .

$ r o w [ ' e m a i l A d d r e s s ' ] . " < / l i > " ;}e c h o " < / u l > \ n < p > < s t r o n g > A l l e m a i l s

s e n t < / s t r o n g > < / p > " ;} e l s e { ? >

< h l > S e n d N e w s l e t t e r < / h l >

< p > T o s e n d t h e n e w s l e t t e r t o a l l s u b s c r i b e r s , e n t e ry o u r s u b j e c t l i n e a n d m e s s a g e t h e n c l i c k t h e s e n db u t t o n b e l o w . < / p >< f o r m m e t h o d = " p o s t " a c t i o n = " s e n d . p h p " >< p > S u b j e c t : < b r / >< i n p u t t y p e = " t e x t " n a m e = " s u b j e c t " i d = " s u b j e c t "c l a s g = " t x t " / > < / p >< p > M e 8 s a g e ! < b r / >< t e x t a r e a n a m e = " m e s s a g e " i d = " m e s s a g e " r o w 8 = " 6 ' ' c o l s =" 2 0 " c l a s 3 = " t x t m u l t i " > < / t e x t a r e a > < / p >< p > < i n p u t t y p e = " s u b m i t " n a m e = " b t n S e n d " i d = ' ' b t n S e n d "v a l u e = ' " S e n d " c l a s s » " s m t " / > < / p >< / f o r m >

< ? p h p}m y s q l _ c l o s e ( $ c o n n ) ;? >

< / b o d y >< / h t m l >

20 Send to each address

Loop through the list of email addresses sending an emailto each one. After sending the email we write it out sothat the administrator knows it has been sent. After

sending out all of the mails write out a message showingit has completed.

21 Show the newsletter formThis is the newsletter form. The administrator completestheir subject and message in the form fields, which is thenposted back to the page. The subject and message fieldsthen become the subject and message of the email thatis sent out.

Use MySQL at the commandline■ To connect to your local MySQL server you can use the'commandline'. Open a command prompt in Windows byselecting 'Start', 'Run' and then typing 'cmd' in the box.Change tfie directory to the MySQL bin directory, which is 'cdmysql\bin'. Then launch the MySQL monitor with 'mysql-user=USERf^ME -password=PASSWORD'.

If you have entered the correct username and passwordyou will find yourself in the MySQL monitor. If you type 'SHOWOATi ASES;' you can see a list of any databases that you havecreated. To work with one type 'USE databasename,' (wheredatabasename is the name of the database). All commands

typed in MySQL must end in a semi-colon.

eCOMMERCE I PRACTICAL WEB PRO)ECTS I 69

Page 70: Practical WebProjects 19

eCommerce project Analyse your site stats with Sawmill

NeilNEIL WrTHNALL has spent years learning the technical and practical aspects of Web

■PHmH design, which has helped his cause as a freelance Web developer. Over the course of hisW i t h n a l l

career, the diverse roles he's taken have helped him identify and evaluate new g — — , mtechnologies, and given him the insight to produce sites focused on usability and

c s i ^ 1 3

accessibility See what he's capable of at wvvw.lumencorporation.com— - a s —

Analyse your sitestats with SawmillDiscover how to mould your online business into a profitableempire by keeping track of customer activity on your site andanalysing statistics using Sawmill

The br ief

Task; Analyse Web serveraccess logs usingSawmi t I 6

Dtfnculty: IntermediateTime I need: 15 minutes

On the CD

All files for this project canbe found on the CD

owever popular a site may be it's fair to say that customers rarely givefeedback to businesses on the success (or otherwise) of their sites.Consequently, it's vital that the best possible use is made of all the

electronic tools available to them to gauge customer response to products andservices. Access logs are ideally suited because they are directly compiled fromdata generated by Web servers during every site visit.

A quick glance at the logs might initially make this goal seem impossible. Due totheir inherently technical nature most end-users would baulk at the prospect ofhaving to search through reams and reams of code containing IP addresses andHTTP response codes to try and ascertain any kind of 'meaning' from the raw data.For this reason the Sawmill log analysis software was developed to highlight specificsite trends while also offering the ability to focus on individual log elements byorganising the statistics into a variety of graphical formats and relational datastructures. As well as being easy to use and administrate Sawmill also offers anunsurpassed level of support for all major Web log formats, the results from whichwill enable you to improve your site by profiling the data critical to its success - thepages that receive the most hits, the search engines people use to find your site andthe length of time they spend looking at it when they get there.

The project takes you through everything needed to install and configure thelatest trial version of Sawmill featured on this month's cover disc, though it can alsobe followed using the full version of Sawmill 5 from the CD. You'll learn how toanalyse your access logs to help you improve the effectiveness of your site.

Understand the Sawmi l l in ter face

I Generate sitestatistics analysisresults directlyfrom live Webserver logs

I R I A L V K R S I ( ) N - - F ( ) R E V A L l AT I O N L S K O N LYFilters: TMs p«g« ahows hit* for ail th« lo« data /«(!»)

j9 d jFeb ^ |2002 ^ « |7 Oct2002 tJ App ly |- v i m i h c t r a f fi c o i

Track your users'process througha site by filteringthe results bytheir IP address

I Sef individualpreferences andaccess pr iv i leges ^ (c)tor your site's log

I Automaticallycreate pie chartsand bar graphsto visualise yours i te 's t rends

^ S a w m t l l me

Use Sawmtll ^

ht tp : / /127.0.0 .1 :8987/

1 Crank up SawmillInstall and run Sawmill so that it will launch the Web serverresponsible for maintaining and supplying the access loganalysis results. To enable other users to access the servermake sure that Sawmill is installed on a networkedmachine that others can connect to using a Web browser.

P l e a s e c h o o s e t h e l e v e l o f d e t a i l f o r t h i sconfigura t i on

TIh; lonw*! of ymr kip data is Aparbc/NC'S.A C'umbtord F«niMt W Wi Server r>4ifniiin \K«r Ihrtc

PtmsicI'bnow thcinfoimttton >-(hi «int totnck u vnur<LdahMc.TbcmiiRmfMnotxnt y-ou twk.ihcklaLr » buikl your hmI Ihe Uipcr yourdatiha.'* »»ll be See OitLiKm; betml fnr oimpteig tnfcmthe^c optMot mean

r Track aN rKU> day-by^y (uw cakmiar. »Sk>* e^pntmn <»( daujTrack ho*t</lP5 ndivKiuaQ) tiathcr ihun ttackmf onty tup-kvel doimmst

P * l i K t i M i c h n i k c n l m k « v « r % n » l a i M « ; »

F l i K h M k H I O a i a b a M . - •

laclwlc pafc vkwv mlormtdjuti m ilalab«« OF l » c K H l e l W « i l < i n i H i U i > a a i d a ) i ^ < « 0

F l f K l w l c b » n d « H i l h m ( i t t i n M M x i « < l a ( a b * j < 9

" " V

5 Set the variables

To make the view of the statistics as simple (or complicated)as you require, Sawmill will let you choose which logelements will be analysed. It's a good idea initially to selectall of the available options to get an overview of the widevariety of analysis tools on offer.

dl^MS j -1? j j lflct zl *I>PW I* ^ traffic on fiji ofW iiie Tmiiw IB

0 p t l o n « ; Sort; by page vltws

9 Popularity contestIf you have separate pages for each product or service it'spossible to compare page hits to reveal which areas of yoursite are the most popular. The statistics also show youwhich pages use the most bandwidth and whether this isproportional to the number of hits they receive.

70 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 71: Practical WebProjects 19

Essent ia ltechnique

Analyse your site stats with Sawmill eCommerce projectAn important aspect of SawmlU's functionality is the ability to apply filters to site statistics toprovide an in-depth analysis of the results. In the 'Session pages' view you can filter theresults by IP address to find out not only which pages the user in question looked at whenthey visited the site, but also how long they spent looking at specific pages and how manytimes they returned back to those pages.

U c s m i n go f S M w m i l l b . n u ( v v t t k e n M i t

Pkitkc enter your IwenM; in the fiekt . iuid click Aild Ltccn^ic.

I A d d U c « n 5 « {

U you (kHi't have a iiccnte. you con lUil ti\ Sawmilt for fitc (or 3() <iay<i by clicking b<

TfySjftvmlllOf 3Q0*ys j

Please choose a Sawmill password<ci'uriiy, nwnv of Sawmill»(>rctunt m psHccieJ b>- u p*!<»w »«l, Pleiiw chtxne ihi* mt* ;

:RicTi(«bcncvciy(Ki wdiuutpcrfiMUiiny Mt'uiv actiixi in ihc futtiic.

PJcowv-ho t tM ap iMw im j '

Plfatuwyt* iht (WMword-.j^**-*

Click Qwh.-k i&un bekiw rt>r ib« laMcM pottiMe nwk M«m; yiHir Ouiti StMt w ill tuk «^heteuMi w»ni hi trwrfc.wkt whatyut) wMit mcnll ynur OatiiUc^. rhm M «^til tewJ your )o|t« tntii a djuUunc anttatKtkn nM»c«hiiely Jl"* »|u»J »«y (i> tlMt u«in(5 Savnwll. bwi ir yiw'd ruAcr gw urtuiN «»ihf AdminiiSjM'nuD't ntoin menu, u hK'h kIm voniuinti ti link Ihe lull atKumcnbitiim). you cm vkk Adrmn Menu

i Q m t > t | p o 1 A d r n i n M w

Where is the log data?Pkax »|KCify « here you smxiU like S«wmill k> get your k>f tiM fiotn

O Click here fur more iniomwtiun 4ni exumplet.

Log«wre« {Get l«« fil«» from locil tbiktype-

P a l h n i m i e ; t r w w t . . .

^ Pioces* fi ln in MthdiRdonex

r P#«cm(nien«ncii»«rcptfa»re*prt<ision

Utt Muhtpl* U>g SwjftM I Show M«<h)rt9 yilM |

D o n ' t m M k t e i i k > i ! l o m M i

2 Start the programThe Sawmill application is administered directly from a Webbrowser This makes Sawmill user-friendly but also meansthat the application can be configured remotely From thestart page activate the 30-day trial period if you're using theSawmill 6 program, or launch the full version of Sawmill 5.

3 Choose a passwordSawmill requires you to enter a password to administratethe program. Mac OS users should be aware that due toincompatibilities with Apple's Safari software Sawmill mustuse an alternative browser With the passwords entered clickthe 'Quick Start' button to continue.

4 Where's the log?You're now ready to specify the location of the access logs.In the example shown logs are processed from a copy ofthe Apache Web server running locally on the test machine.Sawmill can also obtain access logs directly from externalWeb sites using FTP

T < r t » ) h l t » ( 3 , 3 0 3. . T o t a l p a « a v t a w f : 3 , 2 0 8

T o U l w t a K c r t : 6 0 0• T o U l I r a n i f B f T B d ; 9 . S 3 M e g

d a y : 0 9 / F e b / 2 0 0 2' e n d i n g d a y i 0 7 / 0 c t / 2 0 0 2

• r M > T o t a l d a y * c o v a r a d ; 2 4 1

» t - A v a r a g * H i t * p a r d a y ; 1 3

«wt *t«M J1 f .♦ I»"ii |r«pb of il»7/»rtW oVef iAit«'i>i"i< •"«£( tor ji«ui| how lh« i^iv ptuimttn cbmnjid%,M< «tio« tb« uafic (n ewb iimt ptnoi. mi tiK ttKKMiiif gnph thott t ikt loul cttcwjUt)\c tiW

i H i b B B a n J » i d t h

6 Create your profilesWhen processing log data from several sites you need tocreate separate profiles for each one. This is becausedifferent Web servers have their own specified formats that

may be incompatible with others. Separate configurationswill allow you to set different access privileges for each log.

7 Getting resultsYou're now taken straight to the results home page showinga general overview of the site statistics. The menu buttonson the left allow you to navigate between the different datatypes and the yellow table at the top of each page gives abrief description of the information featured.

8 Traffic reportsAs well as displaying the number of hits over time in aneasy-to-use format the traffic graphs can also be used toevaluate the response received from specific time-relatedevents such as marketing campaigns or promotions. Thishelps to give an overall picture of the general growth trends.

» tbuwiillw iDdtvidualieaKliwrm^pcopieuMit in iwiirch engine* (o find ibc tile TlxiCMnihc ni• ' ' • • . . . . . . . . » t o w i t i t « p u i « i K ) n - . i l i u v i f w t n s y bu (hu( iIk (i»(a in Ihii \ iew it cHkulated uhidk m fhmib!t c i h « n « H h e f M e w » . ( m o r c m » i r u c t i « o » }

Sort: I bv pagt views

B H e f « : T I > h » t a a h o « > a m a W / m / a « t t > W / O d > i l W i ( • « r 8 5 t 5 ^S e s s i o n fi n e r y : ( i w w ) ( a t f t t )

jfh» vw*<l)Milb<<i(l»ti»<>aitK>euw>ii turipH(Kui*rpa(t <l vt~ 'fimmilbr imoiniuK pRdtKwaniii the <ewi»fl» alwir lb«> «VM w (tbe iinniedi"»»Kr.of cboo« apa(< n> the "lof p,—.—

P a g e : ^

< n / l o t K b o m k / a x X M h t

rx^rwn.'togKtemii/p-bwOcrMin ;

10 Analysing search enginesThe 'Referrers' view plays a vital role in helping you toassess the success or effectiveness of paid-for advertising.This is also applies to search engine listings or reciprocallinks, by telling you exactly which links in other Web sitesvisitors clicked on to get to yours.

11 On your own termsAlthough it's helpful to know which search engines peopleuse to find your site Sawmill goes one better bycategorising the individual search terms used. This provesinvaluable in helping you to evaluate the success of searchoptimisation techniques and reasons for the user's site visit.

12 Tracking user activitySawmill also allows you to focus on individual pages andsessions, documenting visitors' progress through a site anddemonstrating the level of detail available for analysis. Fulldocumentation on Sawmill's unique features is availablefrom the 'admin' menu.

cCOMMERCE I PRACTICAL WEB PROIECTS I 71

Page 72: Practical WebProjects 19

eCommerce project Discover how to boost your search erngine rankirngsYour expert guide;

N i c kSweeney

i NICK SWEENEY builds Web sites for a living, as well as writing about online cultureand/or dead poets, depending on his schedule. He's nostalgic for the days when theZX Spectrum was all the rage, and remembers how the TABLE tag was once cutting-edge. You can enter Nick's world by swinging by one of his own sites at www.only.orgor www.not.only.org

Discover how toboost your searchengine rankingsHowever attractive your eCommerce site may be, it's not worth ahill of beans unless potential customers can find it. Read on anddiscover how to come out on top of search engine rankings

The brief

Task: Improve your site's

ranking in the Web's maiorsearch enginesDifficuJty: Easy to moderateTime I need: 15 mins -1 hr

On the CD

All files for this project canbe found on the CD

S

ow that your eCommerce site is ready to go live, it's time to alert themillions of users who are poised to descend with their credit cards at theready Well, if only that were true. On the high street, a combination of

good publicity eye-catching signs and a smart window display will turn browsersinto customers. On the Web however, window-shopping works very differently.Before people appreciate your gorgeous design or competitive prices, they have toknow your site exists. That relies, most of all, on getting your site positioned niceand high in search engine rankings.

Out of all the major search engines, only Inktomi scans keywords these days.Instead, big hitters such as Google demand a radically different approach, basedupon providing rich, relevant textual content, well-labelled links and a healthy supplyof outside references. Fortunately, all these things will actually make your site better,as well as driving up its search ranking.

Our guide deals with ways to fine-tune your site to make it more attractive to theautomated 'spiders' that index the Web for search engines. However, it also coversan increasingly important process: that of integrating your new site in the Web atlarge, through submission to directories and searches, reciprocal links, paidplacements and sponsored search terms. Combining an attention to internal detailwith external outreach pays off quickly in terms of rankings - consider it theessential last piece of your eCommerce investment.

- M O I V - - C o n t e n > : - T y p * - C O t r r B * T - - t e K t / h e » l ; c b a r M C - l s e - i

< T l T L f > l ( i e x o » c f t C o r p o r « t i o a < / ' T l T m >< I B T A b t e p - « q a i « * * P I C S - L a > « l ' O M t w t * ' I P I C S - I . l« q u o c < h c t p i y / i n w . i « a c . o r g / x a c i & 9 a v 0 1 . h t > i i 4 q u o t ; 1 9 « e c < u « r ( « a

' p r o d u c t s ; h e f t d l i n c a ; d o w 9 l o » < U ; ( M

• o f t v a r c ; e o s t « a e a > i v « w a ; « / je O « m r r « - T h e • n t r y p « 9 «

M r s , a u t v o n . a n d H x c r o a o f tL o c j o i * c c ( m i r T - - ' E M - a s * / >

a P . O . ' / >

1 What's the meta?

You'll probably know that meta tags play an important rolein site rankings, but you may not know what they actuallyare. If you go to any popular site, and 'View Source', you'llsee that the first section of HTML usually contains a set ofmeta tags describing the page content for search engines.

4 < h e a d >

5

€ < m e t a n a m e - ' d e a c r i p t i o n " c o n c e n t - " » e l c a o t e t o J . R . H a

f l i e s , l u r e s a n d e q u i p R e n t a c r o s s t h « w e b . C h o o a e f rf a s t o n l i n e o r d e r i n g . " / >

A t t r t o u t e : N a m e v V a l u e : k e y w o r d s

Content: J.R. Harttey, flyfishing, flies, fishing, li^es. fishwig tacWe, ^

4 Add some keywordsAdd a list of keywords to describe your site Again, eitherusing the Dreamweaver wizard or create a meta tag withname-'keywords', followed by the keywords themselves inthe 'Content:' field. Stick to a handful of terms that reflectwhat visitors would enter into a search engine.

^Code|; S(]>t[ ,j| Dcagn TtUe: |J.R. Hjii 'inYftihrig&npw [ Q« l i v l d « " c o n c e n t " >

< h l > W e l M « > e t o J . R . B w t l e y ' a r i y f i a h i n g E a ^ r i u B , B r i t a i n ' s b e s t - ;

t a e l c i e a n d e q u i f M e n t f o r fl y fi s h i n g a a d g a n e a n g l i n g . < / b l >

< h 2 > N e s t o c k r o d s , r e e l s a n d l i n e s f r c n a l l t h e l e a d i n g i c a n u f a c t u r e

v a r i e t i e s o f fl i e s , s p o o n a a n d l u r e s f c r t r o u t a n d s a l B o n fi s h i n g ,

w e g u a r a n t e e n e x t - d a y d i s p a t c h f o r a l l o u r c u s t a a e r a . W e ' r e b a s e d

■a i n l a n d B r i t a i n c a n e s p e c c t o r e c e i v e t h e i i o r d e r s w i t h i n t h r e e w

J<h3>0ur site also offers a wide range of tutorials on flyfishing,I rod, or selecting the proper taclcle for a particular location, alon

a r t o f fl y - t y i n g . S o w h e t h e r y o u ' r e j u s t c u r i o u s a b o u t fl y - fi s h

I broaden your alti l ls, or a fully-seasoned gaae angler, there's Isoue^your eye.., even if you're not a salison!</h3:j J1 </div>

b r e f - * r o d « . h i * l * > < i a 9 9 t c - " r o d _ » e t i o . g i f * « l t " " r i y f i s h i D g r o d j " / x / a x / l i >M e l » * r e « l i . h t * l ' * x i « g • t c » " t e e l _ * n u . 9 i f " a l t - T l y f l s h i a f f r e e l s * / x / « x / l i ;

h r e f - * w e c f l L e 9 . h t « l ' x i a g a r o ' w e t f l y . a e n a . g i f * a l o H e t f U e s " / x / a x / l i >b r e f " " d r y f l i e « . h t » l " x i « 4 » r c « " d r y f l y _ ® e n u . g l f " t t l t - ' D r y f l i e s " / x / « x / l l >

l i r e f « * l u r e s . h u i l * x i m 3 9 r c » " l u r e _ » e n u . g i f " a l t - ' L u r e a " , ' x / a x / l i >6 r « f - ' » p o o e « . h T a l " x i a g » t c - * s p o o o _ » e f t a . 3 i f • I t ^ ' ^ t o o o a " / x / a x / l i >t i r e f ' * b u y e r j Q u l < l e . h a t l * x i B g 9 r e " * l ! u y e r s g u i < i B _ » e n u . g l f ' a l c - ' r i y f l f h l B g t u y e )

(vref-"tucotial».btal'xi*g arc-*tgeor:(tl_aenu.gif' «lt""nyfiahing totoniala'

Src lutDnal.1wru.9f <>0 PM#«)g wonalcl V® Ij*T a r g e t v B o r d e r S S S

L o w S r c O e ^ v

Tifc; J.B.Har«t,'sFly«shnBEmi>o. |„A V. C [»!.

Text tutorials on flyfiahng

L r i c ; t u t o n a t e . K t m l

T a r g e t : ^

Tttie: flyfishng tutonals

3

Access key: | (Tab wydex: '{

> o f f e r s a w i d e z a n g e o f i n c l u d i n g h o v t <

g C h e p r o p e r c a c i c l e f o r a p a r t i c u l « r l o c a c i o D , a l o n g w i t h a n i n t r iy l n g . S o t r t i e t h e r y o u ' r e j u a t c u r i o u s a b o u t fl y - fi a h i n g , a n f c e g i r i B '

7 Create keyword-rich contentAnother of Google's preferences is sites that are rich inrelevant keywords. That doesn't mean slapping a hundredrandom buzzwords at the bottom of your pages: instead,write clearly, using the terminology (and brand names) yourpotential customers are likely to enter into a search engine.

8 Add alt text to imagesThink of 'spiders' - the programs that scour the Web onbehalf of search engines - as if they were users with nointerest in your Photoshop skills That means your carefully-crafted icons count for little if you don't label them withtextual descriptions via the 'Alt' element of the 'img' tag.

9 Use keywords for internal linksGoogle regards 'anchor text' as one of the best ways todetermine the relevance of the page. There must also belinks from other pages contained in the anchor text, so yoursite's internal text-based links should use relevant searchkeywords to summarise the content of the linked page.

72 I PRACTICAL WEBPROIECTS I cCOMMERCE

Page 73: Practical WebProjects 19

Discover how to boost your search erngirne rankings eCommerce project

i t a l x B l i u

> e « l >

Design Title; jUniHlBdDoajnefrt S t i r f . c mD O C T Y K t t m l P O T L I C • - / / H 3 C / / D T D J C H T O L i . O I r » M i t i o n « l / / E H -

i l t p : / / w w . w 3 . o r a / T R / * h t * i l / O I D / * h t i m - t r a n 3 i t i o M l . f t t < l " >

• * h t t p ; / / w w w . w 3 . o r a / 1 9 9 9 / x h c s l ' * >

A t t r t u t e : ; N w w v M k j e : d e s c r p t o n

Cofitott Ths s the front page of mv srte

He>> I

2 Prepare meta tagsMeta is a self-enclosed tag (like 'img') witli two parts: a'name' value, followed by textual 'content'. Most importantly,it must go in the <HEAD> section of your HTML file. Createblank tags and fill in the details, or use Dreamweaver'swizard (go to 'insert', 'HTML', 'Head Elements', 'Meta').

A t t r ibu te : Name V Value; I description

Content; Welcome to J.R, Hartlev's flyfishing Emporium,

; <

B Describe your pageCreate a meta tag with name-"description", and place yourdescription inside the 'Content:' field. Use one sentence todescribe the entire site and a second to describe the

specific page. Try to include some of the key terms thatyoud like search engines to associate with your site.

Lingo leveller

Technical terms bulldozed

■ ALT textA textual description of an image file included within a HTML

page, designed to improve accessibility and indexing.

■ Anchor textThese are textual elements that can be clicked on to providelinks either within a page or another page (i.e. the text within<A> tags).

■ M e t a d a t aInformation within Web pages designed to provide backgroundinformation on a page or site, including the author date of

publication and a summary of content.

|^a)de[j:^Sptt|^Deggr. T.te: T "1 ^■TxyrTYPr htni poblic '-//wacz/DTD XHTML l.Q TralPocumentTitteE

" h t t T: / / w w w. w 3 . o r g / T R / * » i a i l l / O T D / * h t a l l - t r a n s i t i o n a l . d t d ' J2

3 < h t B l m l n a « " h c t p : / / w w w . w 3 . Q r g / 1 9 9 9 / x h t i 8 l " >

4 < b e a < l >

5

6 <®e ta naae- ' desc r lp t i o t i " con ten t - 'We lcc iae to J .R . Har t l ey ' s F l ylures attd equlpnent across the web. Choose frca a variet

f a s t o n l i n e O K t e r i n g . * / >

6 < « t a n a a e - ' k e y w o r d s " c o n t e n t « " J . R . H a r t l e y, f l y C l s h i D Q , f l i e s ,t a c l c l e , a n g l i n g , " / >

' I11 < t i t l e > a . R . H a r t l e y ' s F l y l i s h i n g E n q p a r i U B : o n l i n e s a l e s o f fl y f

t i t l e >

> 1 # e l c a n 5 M J . R . H a r c l « y ' 3 n y f i s h m j I n ^ y .- i R d e i ^ u L j o e r t f o r fl y f L i h t n g * r . d j a n e i

5 2 < h 2 > W e s t o c k r o d o , r e e l s a n d l i n e s f r c a a a l l t h e l e a d i n g m

v a r i e t i e s o f fl i e s , s o o o n a a n d l u r e s f o r t r o u t a n d s a l m o n

<tx)dv> <(tv«honzon> <dv#wra(3oer> <dv*cpntefit>:<h 1 >

Format' Headng 1

F o n t - n rS S I

i 3 = t i

iPeEPfOE

I Courier New, Courier, trGeorgia, Tmes New Roman, Tmes, serifVerdana, Anal, Helvetica, sans-serifGeneva, Anal, Helvetica, sans-senf

5 Give your page a titleGoogie doesn't look at metadata so concentrate on visibleHTML elements. All search engines focus on the 'title' tag inthe 'head' section. Ensure each page has a title and that thetitle provides a brief description of your site and indicatesthe page's relationship within the site's structure.

Got)gle Site Map

10 Map out your siteOne final piece of design advice is to create a 'site map': apage devoted to a hierarchical list of the pages in your site,each with its own keyword-friendly link. Google's site mapshows how to do this properly It also helps to keep pagesseparate and text-based, which helps spiders.

6 Use headings for emphasisMany search engines encourage the use of 'structuralmarkup' by adding weight to content within 'header tags'. Ifsections of your page's textual content are bolder or larger,use CSS styles, via Dreamweaver's 'Properties' bar, toredefine <hl>, <h2> and so on.

1 1

a h « ™ y w i r p « « : . ® n U » M t w t t h u r c w w O p a o n .1 = o r S N i O w n e r *

AAwtistngPniBiifMw » » d d * i < l u p ( » a i « » « < » ( » • t o w K K l M t w t n i i w t i o c f i M i t l t i # * * *

S « » c h S o l u u « i U f t H n o u t m i l K f n d « o c » n n i i ( m r t t » y p c * < l i e i K i n » « j i < M f « * » y g uGoogle AdvtttWngUotwtg Sun t

> W t i l d w i M

t w n t W o r *> 0 < « v i e w

c« »» yew k) t»i G»otf»

F>lMM*(Miya«lutim. iicludinBt»>«w.x{>:// pttts For •Handle. iubwk • httpwonni.eiMwK.ean/ Y«um«yit»oiddcDmmet*t» i.aogtn U&wimk»y»«rttltMdMcnb»lteconl«n(iityouipm» TtiMtmiiMd only tor |o< Wok PoWWMitw # i n t o m « H * i i n d ( ) o T W ^ f e c t h o w v # u r { i « 9 » i » n ( l » « H * u » « l b y t d t t M m M c h

' Induftfy m««nc»

> P t w H i i f n S a m c « F A Q

• In-d^iCh look

, ■ 1 'LSSggjU nooMiwM Only torn ihsMnnocMtiiy ytude MrMcn — ard tnaximae

fMirMdUiMbrwlMctindMduatpagt Owctawto GcogMol M«<it yowadi«<«nu« LttiaMa loMthaml Goa j l eL ipda lm t t> id»x«n i t«g i t ob«M 00 mora

M o i f o f o u t c r d a x c n D U t i M l c i M i t w h M M i ^ a a u e n t n n d n

• P f M M y o m a dt o g h• Cmtpaign tsgn

GoogtoAdWocdt b54iia• O i o i v i r i i r

lta«dWrMM><».>ll*<m«Goo«l«?Fe(tnoi»<n(oimaliot) sk&tSB

11 Submit yourself to GoogleWe've mentioned Google a lot, because it's the mostpopular search engine and powers other sites such asYahoo!. The Googlebot (Google's 'spider') normally noticesnew pages within a couple of weeks. Visit www.google.com/addurl.html and enter the top-level URL for your site.

How does i t work?

The Open Directory■ The Open Directory (www.dmoz.oii), with its distributed,open framework, offers a good alternative when seeking tocategorise your site alongside its peers. Anyone can submit aURL to a given category in the directory and these submissionsthen go to a set of volunteer editors with expertise in thatcategory. Once the editors have the URLs, they go through themand decide which sites are worth adding. Sites and users canalso use a Web-based form to provide updated URLs, ensuringthat the Directory never misses an update or a change ofd o m a i n n a m e .

Top: Rrsloaah Etiraptt I'nitfd Kinidom: Busiorss and Econom)-; Sbopplag; Rkaod Sports; Sports: Cowntr^- Sports; Fkhfatg (46,i

. R e c r e a t i r a ; O i t d « « n : F i s k a f : ( ? 7 S j

. R«ttOMl: Evrope; I'litrd Ki^doa: Recr«atio« *mI Sports: Sports: Coutn Sports: Fbl. Skopp iq : RKr«a tkw: 0« tdaor$ : Fbk i i t m: )

. A n g f c v D i f c t - V « i i s i . B i B " * " w r f < i e i p « t a B d s q j p f c d b >

. A o f k D g L i i n O d f a e b s y . K l m d a c h a r a r c a p & l i B g t a c k i t C o p f e h n g h o U i y t ^ a i

. A i i ^ C K - D n d i o n ' fl f U K fi s l B g t a c k l r s h o p s . o t a a g e d f a y c o i K y

. Aqoi\st»-Spec«stcBpfaJiage<|iipiaei*.rodbold«l$,fl«c«,<j»fcd«isi«d»-*oi*o«fe

eCOMMERCE I PRACTICAL WEB PRO|ECTS I 73

Page 74: Practical WebProjects 19

eCommerce project Discover how to boost your search engine rankings

Online resources

Find out more on the Web

Misc Tips: Web Site Promotion Do's andD o n ' t s

3 S S I

k t r t D M « e r i M f c

• a M f t o O a i i t t l u « ' • » >■« ) *■ c a o a c k « » » J t t i M

$ « « e k E o f n r R a t a l O o ' i

Name of site; Search Engine WorldURL: vwvw.searchengineworld.comSearch Engine World isn't the most up-to-date resource, but it's

among the most thorough, setting out broad-based strategies toensure your site catches the eye of all the main search engines.

Name of site: Aboutcom's Search EngineOptimization 101URL; http;//websearch.about.com/library/weekly/bl-seolOlPart of a guide to mastering search queries and tuning your site.About.com's beginner's guide covers everything from selectingappropriate keywords to writing search-friendly copy.

How does it work?

Do you Yahoo?■ As one of the longest-running directories on the Web, Yahoo!has long been helping surfers find the sites they're looking for.

Listings on the site are maintained by a lai^e team of editors,and there are two ways of submitting your site for review. Youcan register free simply by entering a few details about yoursite, but you don't get a timescale on when the listing willappear, if at all. Alternatively, you can pay a one-off fee of £199to guarantee that your business will get listed on Yahoo! withinseven vwjfking days.

t o Y i h o o l U K > l r t < > n < l

Standard pr9c«»»f r M !

■E f L r r. - r r - - "

d I U h e u j e b• • f i n ( j t t I I I • • •

FrcquMitfy A(Md QwMbomi J i

A M t o y « u r M M

3ttoi*«d wi»tutiiWX»ndi*MwitcAah>W»c»Bi WvdaMt

I ^ o LS i i f c m W D n C o 4 » ; L C P T T O L *

URLleaM. WpM»wn»)»>i«i fcy

CSMia

12 Notify the other search engines 13 Premium rate submissionWe'll start with the dwindling number of free submissionservices, which now lend to come with plenty ofdisclaimers such as the ones offered by AIITheWeb athttp://addurl.alltheweb.com. There's no guarantee of instantsubmission, just enter your top-level URL and click on 'OK'.

F i s h i n g i n t h e U n i t e d K i n g d o m

c n t n ^ p o l i c v b y .

16 Read all about.com itThe wide array of subject-orientated guides at About.comrank highly in most search queries, and you can build onthis popularity to drive traffic to your site by buyingsponsored links on pages covering the particular subject orinterest group that your site caters for

Googlm

Advinead S«arch Pi«f»rancn Languagt Toot* Se«chT)p<

J GoogHSMrch~lS««ch OtNw*b®pa9«$fromth«UK

mo* bfowwfs you can pist W th« ftturn k>v wrtead of cfcctang on the wifch button

UK Fishrng Tffckle*rTacW*A:lJcot* vmty of equpment DwcotM UK fshng ucUe here*

D»d you mean fly ff«/)/oatacWe shops

Fishing Tackle Shops Onkne Retatiers and Auctions in England UK^ English Ffyfithing Shop Engksti Fly Shop W« stock war 600 trad«onal mlnow lly tithing flie9.^S^twat«rwannwattr and frMimtwaiglMgtccUeMld ...www (ishmgoci com/EA9iaraM»hMg_tackte.fhof)c Itm - 3SI( - Cached - Swnlar iwgM

V\tars new - latest addrbons to the Fishtng tn Wales wet) site^Fiyftthing Jargon^buctw 8Nov2000 Owtwnaiyof

ih GwyTMdd guNl* 4 Noy2000, Whwe to tsti tecUe thopt accommodm tehng-m-wales c«n/Wnnvftuff htm - 22k - CaclMd - S«nit« pegn

20 Make a word your ownThere's a guaranteed way to put your site at the top ofGoogle's rankings; pay for the privilege. The AdWordsscheme allows you to sponsor individual words or terms byusing a competitive per-click bidding system. To get started,go to http://adwords.google.com

For fast submission to search engines other than Google,you'll need to pay Most sites charge a fee of around $40per URL per search engine. Don't feel compelled to paysubmission fees, because you'll soon see there are betterinvestments to build your ranking.

S a l e s P r . i w

r d i i M r w t

i t U L fl l )

tUl Hc», nt &>«««• Safe), a M t» fte <1

' • ' H i m i ' . r i M

C 1 k t W f a l . k

F i « < 9 K n * « . U » ' m m m » t m

~ ■ - - c F w s w A * .

• - g n u , I I I VmifM. im te Tmtm Pa Shop Iw bM* ■; c a a a n m t o p c t a a a

I n f o m u i t i o oi a J t o i a e i

' '■ i r i i M R P i i ' r i i

UiW

I s * S»VkaiP<i*aik«4L-K ikt Mwe h Mfe

17 Don't be afraid to link awayMany business owners are afraid that providing links toother sites will drive away customers. In feet, linkinggenerously conveys honesty and Web-awareness, and ifsite owners see your URL in their 'referer logs', they're morelikely to provide valuable reciprocal links.

ES]^33w teywerdt and maxlmuni c««tHMr<c»a.

i i i < « « a i « « r ^ c k » » « i i i i

21 Bid for AdWordsThe Google AdWords wizard will ask you to choose theregion and/or language you wish to covet Pick the searchterms to sponsor and see an estimate of the daily cost. Setyour daily budget, which determines the frequency andprominence of your link, sign up and then pay!

74 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 75: Practical WebProjects 19

Discover how to boost your search engine rani ings eCommerce profectIf you use Dreamweaver, make adding meta tags a painless process with the free MetaManager extension, available at Massimo's Corner (www.massimocorner.com). lust downloadthe extension to your desktop and double-click the icon. Launch Dreamweaver and go to the'Commands' menu and select 'Page Properties', 'Meta Manager'. Fill in the blanks and selectthe drop-down 'File(s) affected' menu to apply the tags

Lingo leveller

14 Mass site submissionIf you'd rather deal with a single provider, there are a few tochoose from. In general, paid site-submission providerssuch as www.isubmit.com are the most reliable. Be wary,

though, because software offering mass site submission aredesigned to pipe email addresses to spammers.

" S x H o o r,

jSuggest'a Sto to Y»hooi UK & lr*l*nd '

Thcf»a(»twe««ytyouc«n«ubmit*M»l«thtyi t ioolUKil t«landDne1ary »you choottYMoof Exprtt t m9UVIIXW thM yOU( M» vmII b* r«vi«««d by Yatao'i «dil«nal ati# within T buwMSt 4fy«

Yl|MExpr«M7* Day Ouar«nt«*GBK199 orw.t»m*.

rSteftdwINoB-ComtMrcWP r e * !Ho ravitw thiM guirdnt**

' Rtqurad for coinnwei*! Iittingt but

c o M i d w M i M o f c i n n « i g u * n n t M « i i m « < y C M i * i d * ( i

y«uf »ubmi«ioniMthw7 buiKWM«iy»

augfl»rtvttI Sl»ftd>rtiCoft»d«mmrri

15 Directory enquiriesOnce the search engine spiders have been alerted, youshould think about including your site in at least one of themajor site directories, such as YahooL With the OpenDirectory click on 'Suggest URL'. Commercial sites require'express' consideration at a cost of around £199.

Technical terms bulldozed

■ Meta tagsTagged information added in the 'head' of an HTML page toprovide a description, keywords and other information that canthen be used by search engines.

■ PageRankGoogle's patented (and top secret) method of judging thepopularity of pages based upon their inbound links.

■ SpiderAn automated program that scans the Web for new sites andupdated pages, and then adds them to the index of a particularsearch engine.

K i 9 A r t i c l e sThe Anatomy of a Nib

In Milhm to rKogmicoimMnltnguagt about peri nita 1 hei« gseflBrt »ihcl» 1#cwiwung the n*'i MWomy T>m lotoiMng art ttimt n u** laMltaa meiAiMtdht Mnictunof

1 SeerctTMiStte 1

S e r v i c e s

R < M u i ; M H t i . A A r r

S a l e s

f r i O l M f M I

oii<si>r

C » U i « > . f 1 ' f « »

C b d W r t l t r l i a

* ■ l ' »

MpamtlyThitcoiAiMncoitnunMlav «ncoun»m» pw>pla (o thrti thai ftfilacamar* F>*a iwvwiiaga tourtam paiH ar* rM«y trnm*)

Body

mmU P| '

How does it work?18 Do a little social engineeringIf you provide niche services, remember that you're part ofan online community complete with Web-basedenthusiasts. Pick out a few related sites, and send a politeemail to the owner, mentioning that your eCommerce site isset to go online. (You could always offer a discount!)

19 You're not just a catalogueThink about what makes customers choose offlineenterprises. It isn't just low prices, fast delivery or a money-back guarantee: it's the quality of advice as well. Spend alittle effort creating buyers' guides and tutorials on your siteand you'll have sticky pages to help generate external links.

totavncht t f v l i i o n - v i a - t n t f n g t t t i v l c a . w g « « n » o l d

of counc, ■ pom dl* or two) that v« tnstwtly> irfft yoar tatevlston. thanks to abiasHvcr

uslni tk#1nt«tnlnRov*tint<n the space. However, untMS they dpijllirtflcwt heavyweight content provt<len, theyt hcu«tomen with thefr cufrent orteriofi (wMd» leewe)it«nsi««). Theyte dMiiRiited toDRM-Men WIfldr<tai"t expect to be playln( your own D\t) b«iutps captured as MWGt• n y t l m t w a n .

22 AdSense makes senseGoogle's AdSense scheme syndicates relevant AdWords linksto Weblogs and other small-scale sites. The Google AdSensesidebar at FVRblog (vwvw.pvrblcg.com) has earned siteowner Matt Haughey a tidy income in referrals, while drivingtraffic to relevant online suppliers of digital video recorders.

10 s Got Th« Ideas?

3 has some interesting awnments on the current statethe Democratic Party and its supporters. He first Uml)asts

Eva K le in . Jesse 's par tner in er i iM, t r ies to Just i fy

sn««k in< around camp^ f inance re form laws on the

rounds that they *411 lead to 'parity." But for thecause of iV>ancUI parity, the OeMOcrats are wittnt to

ceepreeHe on their pr inciples, Kke takinf the moneyout of peKlics. If you lose yourseif to win an election,

do you r«* ly wM

m a k e s a c o m m o n m i s t a k e h e r e c o n f u s i n g m e a n s a n dI have rw special tove for campaign finance reform bits,

•y are simpV a means to somethirtg t do have a special love. potttical system that prizes good poHcy and broad

»port at>oye wealthy donors and special interest pandering,hy I want futt public financing of alt elections. So what

1 2 3 C C T V S e c . r i t s

C a m e r a S T t e i U a e c e

tome or bu»tnet« security::amerBS at incredibly low

p r i ces '

t n G o d W e T r u s t . . .

A M o t h e r s w e w e t c h i

23 Consider the blogsWhile many Weblogs use Google's link sponsorship service,many political and issue-based sites use Blogads.com,while others offer their own sponsored link service. If there'sa popular enthusiast site which deals with your field ofcommercial interest, and it offers paid links, give it a go.

Google PageRank■ The creators of Google created controversy in 1998 whenthey decided to ignore meta tags in compiling their searchrankings. The decision seemed understandable because it wastoo easy to use meta keywords and descriptions to boostirrelevant sites. Instead, Google introduced PageRank, using thecollective judgement of tfie Web to pick out the most usefuland valuable sites. PageRank treats inbound links to a page asvotes of confidence in its content. It also gives extra credit tolinks that come from highly-ranked sites. That's wrtiy it pays toproduce an informative site that others want to link to.

r m - T T T F i i i r n n g g E ^ ^ — —The technology behind Googie'e great reeulU

As i GoogI* uMr. youl* iarmliar wilfi antf accuracy cif a Geogla laaiclmanaji to Ind the ngw iMiila for query aa (|u*My »*« doea^ The haait cPigaonRank™. * synem far ranlong wet pays drielopwl by Geofllekiundws U

BuMn9MP«nih*bt*aMhr«u9hwort(oiB F St(K<rw. Pag* arMtBriri laMoneilllt(PCs) coutd b« u»ad ro compula the rrttw Mehia af web pagea f»««r than humaalgMhim And wMaGoagI* haaduant of angiiMera tMrtunglomfrmeeiery it>e». Pigaei^iMlt cmtnuea IS prmda m* fcatta far at of our web se«i«>i tool*

Why Oooflie'i patented PigeonRand"* wortti ao weH

KHil Google

Help Centra

GoogK Future*

Other Ways To Google

eCOMMERCE I PRACTICAL WEBPROIECTS I 75

Page 76: Practical WebProjects 19
Page 77: Practical WebProjects 19

20 ways to make yj ur eStore fly Feature

eCOMMERCE I PRACTICAL WEB PROIECTS i 77

WAYS TOM A K E Y O U ReSTORE FLY. .

NOW THAT YOU 'VE NA ILEDTOGETHER YOUR ONLINE STORE,IT 'S TIME TO START MAKING SOMEM O N E Y E C O M M E R C E G U R U C H R I SBARLING PROVIDES HIS TOP TIPS ONHOW TO TURNOVER A PROFIT ONT H E W E B

he wild west of the Internet has been largely tamed and lots ofpeople are now succeeding in making a success of their businessonline. Creating a slick online store is just the half of it though, andthere are lots of issues you need to consider if you want to make abig noise in the world of Web business. Chris Barling, CEO of populareCommerce software supplier Actinic (www.actinic.co.uk) revealssome of the good practices that have been extracted from the lastfew years of dotcom turmoil, helping you to transform your site intoa profitable empire.

Page 78: Practical WebProjects 19

Feature 20 ways to make your eStore fly

^ IT'S NOT THE TECHNOLOGY, STUPIDInternet technology has enabled the whole eCommerce revolution tohappen. But if we focus on technology we will never succeedcommercially. The rules of eCommerce are like those for any otherbusiness. You have to have something that customers want, at a pricethat they can afford and where you can make money. Then you haveto let your prospects know about it. It's as simple as that.

^ MARKETING, MARKETING, MARKETINGyy If your great idea is ever to be profitable, people have to know about

it. You need to find out how people search on the Internet. What arethe keywords that they use for your type of product? What other waysdo they look online? Talk to lots of people and try to understand a bitmore about it all. Here are some sites that can help:vwvw.searchenginewatch.com, www.overture.com, andwww.webmasterworld.com (look under 'Ecommerce' and TheMarketing World').

I f u < 4 « « n i n 0 r l > n d a n « > > < » « * k « n 4 t h « v * r « c u

The 'Ecommerce' section of the Webmaster World site is a great place to hang out for gettinginvolved with eBusiness-related banter

M A R K E T O F F L I N EIt's true that all of your prospects are online, but it's also true that theyare all offline more of the time. Somewhat ironically my company builtinitial awareness almost exclusively offline. You need to ask whethertraditional marketing like advertising, PR or direct mail can help andsometimes the answer will be no, but the important thing is you can'tafford to miss any tricks.

R E M E M B E R Y O U R E X I S T I N G C U S T O M E R SOnce you are up and running, always remember that existingcustomers are your best customers. Make sure that you encouragethem to return by making special offers and letting them know whatyou are doing at your store.

U S E S T U F F T H AT A L R E A D Y W O R K SUse technology that works, not stuff that's a masterpiece in progress.This really speaks for itself, doesn't it? I must declare a bias because Iwork for an eCommerce software developer, but why bother debuggingsoftware from some start-up or paying thousands for a bespokesolution that leaves you reliant on the designer ever after, when youcould be using stuff that is already working on thousands of onlinestores ou t there .

S E L L F R O M T H E S E C O N D T H E Y A R R I V EWhen someone arrives at your site the marketing is over and theselling begins. Leave the smooth talk out and make it easy to find yourproducts. Have a clear link like 'Shop Here'. And don't ask them toregister before they can look at your catalogue because there will beplenty of time to get their name and address once they go to buy

MAKE SURE YOUR SITE WORKS FOR YOU,NOT YOUR DESIGNERThe Direct Line red telephone continues to be used in ads because itworks, however irritating it is. The same principle applies online. Don'tlet a fantastic design spoil your business because, for instance, thedesign stuff takes so long to load that everyone just clicks away. Makeeverything the servant of the business objective, which islo mateenough sales to be profitable.

GET A GOOD ONLINE PAYMENT PROVIDERYou need to be able to take payments online and it makes sense toteam up with a good one because this is important for your site andits customers. You can find a comprehensive list of UK paymentproviders by going to this link www.actinic.co.uk/services/occs.htm

SIGN UP WITH A GOOD HOSTING COMPANYYour online store needs to be hosted somewhere and there are plentyof great deals around for good, low cost Web hosting. Looking in thismagazine is a very good place to start, but I would recommend signingup with the companies that solely concentrate on hosting, rather thana company trying to be a jack-of-all-trades. You want to be as specificas possible in order to get what you want.

ARRANGE FOR THE SHIPPING OF ORDERSArranging for shipping is not as daunting as you might think becausethere are many specialist firms that can help. Many eCommercemerchants ship abroad without any problems. The big boys are UPS,Fedex, DHL and ParcelForce, but there are many others. Asking foradvice from local businesses that ship their goods can be helpful here.

C A S E S T U D Y: S U R F - WA X

Surf-Waxwww.sur f -wax.co.uk)o Morecroft set up this site in 2002 without any eCommerce plans. Fast-forward 18 months andSurf-Wax is now a profitable online business. Initially designed as a showcase for her Webdesign skills (her main job) and her extreme sports photography )d quickly found the numberof visitors coming to the site gave her scope to cover her costs by selling videos, DVDs, surfwear and equipment. But instead of getting in lots of stock and increasing her overheads, theSurf-Wax site acts as a portal for a variety of suppliers. Orders are forwarded to the appropriatevendors who ship the goods and e |o a commission that generates a monthly revenue ofaround £1,200. The site cost around £1,000 and uses Actinic's eCommerce engine because of itssearch-engine friendliness. T>iis and her optimisation work means the site is now getting 30,000unique visitors per month and rising. Another reason for the business' success is its stiddness.The content contains extreme sport location reviews, beginners' guides, activity information,schools, even local weather and is updated regularly for customers to come back.

78 I PRACTICAL WEB PROJECTS I eCOMMERCE

Page 79: Practical WebProjects 19

20 ways to make your eStore fly Feature

DON'T MISS OPPORTUNITIES ABROADSurprisingly, it's fairly straightforward. If you're eating out in France andyou pay by credit card then the restaurant will be paid in Euros. Theopposite is also true, so when foreign buyers visit your site you can bepaid in pounds and they will be charged in their local currency

B E L E G A L A N D D E C E N TeCommerce is surrounded by a maze of regulations and any slip-upsyou make are there for the world to see, so it's important to be legal.The following five tips try to pull together some of the areas that youneed to think about, they shouldn't be taken as definitive - it's yourjob to comply with the law - but they are a good place to start.

THE EU DISTANCE SELLING DIRECTIVEUnder the EU Distance Selling Directive, you must provide full contactdetails including an address and phone number. This is a good practicefor building trust. Also, you must accept goods for return within sevenworking days, so why not make this a selling point?

G E T Y O U R TA X R I G H TYou must be VAT registered if your annual sales exceed £56,000. Ifyou're not registered it's against the law to charge VAT When selling tothe EU you should charge VAT at your usual rate, but there are someexceptions. If you should exceed the individual VAT threshold forGermany or France for example, then you should charge VAT at theappropriate rate when selling into that country, not the usual UK 175percent rate. If your customer is a non-UK business in the EU and isregistered in its own country the buyer can quote their VAT registrationto be exempted. You don't charge VAT when selling outside the EU.

CASE STUDY: ORATE

Orate Telecoms Solutionswww.orate.co.ukImagine going from a monthly turnover of £20,000 to zero in four w eeks. That's what happenedto Richard Atkins and his telecoms consultancy in April 2001 when the dotcom bubble burst.Fortunately he already had an eCommerce channel (powered by Actinic Business) sellingtravellers' international pre-paid SIM cards plus mobile accessories (over 6,000 lines in all) tocompanies and consumers based in the UK & across the EU - and this is now moving to 80percent of his turnover. This is because he is tapping the 'white label' market to third partieswho want to offer their customers the largest possible range of mobile accessories but don'twant to stock them. So Richard brands his catalogue with their look and feel, and when thecustomer places an order it goes through to Orate who handles everything in the name of thethird party. Richard has also improved all his sites' earnings by re-jigging the way goods arepresented. For example, you shop by the model of phone you use rather than by produrtname. It tumed a 0.78 percent conversion of browsers to buyers rate to 2.5 percent.

ALLOW FOR DISABLED VISITORS - IT'S THEL A W !Make sure that you comply with the disability law, which is effectivefrom late 2004. The key requirement is that you have to take'reasonable' steps to provide access to people with disabilities, and thisincludes your online store. One way of doing that is to make sure thatall images have alternate text tags so visually impaired people can stillnavigate your site.

informationW e l c o m e t o t h e I n f o r m a t i o n C o m m i s s i o n e r ' s O f fi c e

> j FMdb»ck I Em»il •! I 1 »

I Information Commissioner's Office

0 « t « P r o t a r t i o n

PnvifiY f tp j S iBCtrenic

« r t t h * « b i « i > g i t 4 u * a « b l t . I

.k( to MC(lv« «h«n th# iyrt»fn i« rut>nin»I

I IA d v a n c e d S e a r t

Qu ick UnksA p p r o v e d P u t i i c d t i o nSdiemts

. N o t i fi c a t i o n' N o t i f y O n l i n e

Pub l i c Reg i s te r O f Da ta■C o n t r o l l e r s

W t i a t ' s N e wf r e e d o m o f I n f o r m a o o n- S u r v e y fi n d i n g sCCTV Ac ld< t i ona l Gu idanceP u r a n t v F S A - N e w: G i i t d a n c e

* P ress Re leases - 2004

The Data Protection Act is one of the most important documents you'll ever encounter as abusiness, and it's a good idea to register online

P R I VA C Y M AT T E R SYou will probably need to register with the Data Protection Registry at(www.dpr.gov.uk). Registering takes just a few hours of careful thoughtand work.

COMPLY WITH THE RULES ON SENDING EMAILYou are only allowed to send direct email marketing to individuals whohave agreed to receive it by directly opting in. It is not sufficient tosimply provide an opt out. However, if you obtained their details in thecourse of making a sale the rules are different. You are allowed tocontinue communicating with them provided there is a free method ofopting out each time you send them an email.

TURN BURDENS INTO A BENEFITAssuming that you are legal and decent, let the world know. Anythingthat adds to your credibility will help online. So why not list all of thethings that you have done to show your visitor.

A V O I D F R A U DThere are problems with any business and no one has managed toeliminate shoplifting yet and it's true that foreign orders from somecountries seem to be more likely to be fraudulent than others. If indoubt, stick to ones from Western Europe and North America.To help avoid fraudulent orders look out for these indicators;

•They tend to use the most expensive shipping method available•They tend to choose the most expensive products•They tend to use free email addresses such as Yahoo or Hotmail

In addition you can check whether an order is fraudulent by asking fora fax of a copy of the back strip of the credit card or asking for otherforms of proof Most fraudsters give up at the first hurdle and you don'thear from them again.

G O F O R I TFinally you may have been wondering for a while whether eCommercewould be worth it. Well the results are now firmly in, and it's very clear.eCommerce is on the rise, while conventional retail is relatively static.In the UK, around 6% of all retail sales are made across the Web Sowhat's stopping you getting your share of this growing pie?

eCOMMERCE I PRACTICAL WEB PRO|ECTS I 79

Page 80: Practical WebProjects 19

eCommerce FAQ

eCommem FAQ▶ Having problems getting your Web business off the ground? Fear not, because we'reon hand to solve your trading troubles, payment problems and marketing mishaps

Email of the speciesOld really like to send out an email newsletter tomy customers. How do I avoid this being

perceived as junk mail and ensure that I get someresponse at the same time?

Sam Bumel l

M It may be described as a new media* promotion', but email newsletters are still a

form of direct marketing. And, like all forms of directmarketing, they rely on a relevant message beingtargeted at an appropriate audience.

So, it is certainly worth thinking before you startdrafting copy If your objective is to cultivate a senseof community or loyalty among your existingcustomers, you will probably create something quitedifferent from a newsletter that primarily aims tostimulate additional business.

lust as a mailshot letter and a telemarketing scriptrequire different copy, email marketing has its ownpeculiarities. Most people expect emailcommunication to be concise and you have theopportunity to use hyperlinks to draw peoplethrough to your Web site. On the other hand, manybusiness people are sick and tired of unsolicited andirrelevant emails. So, apart from ensuring that youobserve Data Protection rules, it pays to becourteous and give people an opportunity to optout. If you are womed about falling foul of the latestemail marketing laws, then pay a visit to the DirectMarketing Authority at www.dma.org.uk

With HTML newsletters, you can send out anewsletter that is nearer to an online publicationthan an email message. However, focus on thebasics first (targeting and message) beforeconsidering graphical presentation.

If you re wonied that you might fall foul of any of the latest emailmarketing laws then pay a visit to www.dma.o^,uk and find out

Foreign nonsenseQls it possible to get the addresses of importersfrom the Internet? If so, can you please

suggest some useful Web sites?Neil Peniy

A Yes, there are many sites available designedspecifically to encourage UK firms toundertake international trade. Not surprisingly, UKGovernment sites such as

wvvw.tradepartners.gov.uk and the Customs &Excise site at www.hmce.gov.uk are among thebest known and most informative.

You specifically asked for recommendations forsites that provide details of UK importers, and thisinformation is available at www.lrade-statistics.com, which claims to offer a database of125,000 UK companies who import from outside theEU. UK Trade Info (www.uktradeinfo.com) isoperated by HM Customs & Excise and providesdetailed information on UK imports and exports.

Assuming that you plan to undertake a mailshotor telemarketing campaign to get your name known,you are quite right to think very carefully aboutwhich data source to use before you instigate anyother plans. The quality of your list isunderstandably the most influential aspect of anyform of direct marketing.

Don't forget other offline sources of information.Publications such as Importing Today may offeropportunities to reach your target audience, andyour local Chamber of Commerce is probably asource of useful information and advice about

exporting and importing.

U > |

r/.-ESFV- I

fFabntan 24, 2004

thtir •.cpoft IH

n i n C a m a b C K U lt T t i f n t » n n t

w* can h«)p• < c | K > r t M p a M t i * * a n d

p t o i r o t * t < » * f t a d v i c * ,d j t * , ^

« r * M t w * n 3 0 0 { Mw o f W w t d * t n H a r a a nm W W 4 5 1 * o f f K w

for bowrtMfM *•«( nato Mt <« or ««p4nd n ttw ur

t o f o u r r » < n H .w « w « f t d o t a h » 0 i t h *

Engtah regional d»»rtopwint

4«>«4opnMM *e*nc»««ScotiM], Wal** ano Nort^•tn

Ln9 to lOMt* «i tfw UK.

M T r a O *P « ( t T M f ( U K « A d t n v M C U r .b M A P 4 f t o f S r ( M h T r * d 4• • - • » « X > 4x i t r t j t r t i gn r fiM o t r

For more inhrmation on importing and exporting from the UK youshould check out the inhrmation at www.uktradeinfo.com

0S«urtty

n g < « ^ - p r « c t i c « t o r » m 0 b u t o m n

IYour business data could be at risk from Web-based securityproblems, so go to www.esecurity4britain.org for some sound advice

Affordable tech supportQl operate a small consultancy business, whichis largely dependent on a couple of PCs. I want

to reduce the risk to my business in case of technicalproblems, but I also want to avoid paying for costly ITexperts. What do you suggest?

Adrian Corser

A Inevitably, IT consultancies and supportcompanies tend to target firms with large PCnetworks, where they are more likely to makemoney. But, of course, small businesses still need toprotect themselves.

Firstly, remember that PC manufacturers often havesuperb support services. For a peace-of-mindsolution look at www.mypcsgonewrong.com, whichprovides an annual support package from as little as£200 for a single PC.

Finally, don't forget that your business data facesWeb-based risks as well as potential technicalproblems. The excellent www.esecurity4britain.orgsite provides a wide range of advice, informationand solutions to combat this growing risk to smallfirms such as yours.

i a s t m i n u t e . c o m

Ttll us whatyou thmk!

c l i c k o n

a n y a r t a

W« war4 to makft you (aiftiMm* a » y a t p o 8 * « M 4

iryou t)av9 any commsnts you wouta part oft t ie t l t«. cMck a button on tt ican l«av« feedback on a« many top

Pl«a«« note that wtiMe we will ready o u r f e e d b a c k , w e w M n o t b e a b l e k

you need a retponee to a specdic cc o n t a c t c u s t o m e f t e n t i c a

Providing customers with the opportunity to give feedback « Cfudai toand Lastminute.com (wwwJastminute.com> does this with aplomb

80 I PRACTICAL WEBPROjECTS I eCOMMERCE

Page 81: Practical WebProjects 19

eCommerce FAQ

Onl ine resources

Find out more on the Web

Name of site: Beyond Bricks EcademyURL: hnp://beyondbricl(S.ecademycomStnjggling for inspiration for your online store? Finding it hard toattract customers? Pop along to this community site for Netentrepreneurs where you can check out the latest news, readeCommerce features and pick up tips from big cheeses withinthe industry to help your venture soar

Name of site: Clicl<zURL; www.clicla.comGetting your store into the public's consciousness is one of thehardest aspects of building an eBusiness. However, with a bit ofplanned marketing, you can ensure that everyone knows you.This site offers regularly updated articles on online marketingand is ideal for keeping abreast of the available options.

Positive feedbacic

Qln your opinion how important is it to provideemail feedback to visitor actions, sucii asregistration and order placement?

Paul Edwards

A Because there is no face-to-face contact in anInternet transaction it's vital that you give yourvisitors instant feedback, especially if they arepurchasing from your site. If your Web site requiresregistration, ensure that you provide instantfeedback via the site, and email them to tell themthe registration has been successful.

Make sure that if a visitor purchases from your sitethey receive instant confirmation of their order,which should Include full details of their purchaseincluding delivery date, and have links to enablethem to track or cancel their order. Many companiesforget how vital feedback is to a Web site. ^

y Choosing a suitable domain name

QI'm currently putting my fashion shoe business on the Web and I'm struggling to find a suitabledomain name. All of the domain names that I try to register aren't available and I don't want tosettle for something that confuses my customers, is there any way 1 can find out who has registered adomain name, so I can buy the name from them?

Scott Murray

A You aren't the first person to lose out as a result of the scramble for domain names, and it canseem like all the good domains have been registered. However, this doesn't mean you have tosettle for a name you don't like. If you're a little creative in your thinking you can come up with a Webaddress that people will remember. If your business name has already been taken, try to think of ashort, catchy tag that customers are likely to remember. It's always best to come up with somethingbased on a common phrase that has as much business potential as possible. You could try using adomain name generator such as Nameboy (ww»/.nameboy.com) to help you pick the perfect name.

name: XV*d B P i a t n i M * c h

^ nameboyI S d o m a i n ^ ^ a i s a l .

Entw#taw lt«¥WOfCl»to(ln<l,r«8l»tw»ndbick-ord«rr#l«t«d»valHb(» domainw d M r u f B e d o m a n n s r r w B b K i d e fi t h f k a y w r t y o o - -«■ y(3i;ctnr»giat«rofbi<3,-ord«rth«mr(ghth»f#'you Ctn r«giat«r

Primary Word:

• r t h ^ m n g h t h

8*eondary Word : (ofi fon t f ) m $ 1 5.'nW

N o w I I

1 ^ vwM M iwow h» dCKwn m z s B»^V«urUywcKli

Phymt * > n o w n s t n o m o r * c o m

i".

D o N o t S p a m L i s tJ o i n G l o b a l R e m o v a l

1 LOW to tat(« advantaot ot NameBeyt Domir Cart. NameBoy wl tttriyoutoyoucarred5iar>»(niifei amo. ya/l be aM to add r« names

' « o n e c c r v t f M l o c a l o n • n o m a w y e u t e ^ s t m d r e m '

lip; You are notn a m e s y e u ' w c n . - . .10 mtraoe rwm lorn one al

bade to rasultfi to add mofe namas I arid r^amas I pan I Iqq in

r Available com, nel, org, us, biz and Info domains

st?-* ' fashtonshoe net

nameni?9r3KSI nameboyM « r c h I s S I d o m a i n a p o f a t s a !

•N. >

Ml otaT HMD b

O B a s _ P B D B , t » i M W

M c M e a r w - w "« » « w i f » - » '

c « n r B w r ^ o i g f l "a m ■ w r « -m D M i ■ m ■ w » ^ t * r , » r « r

M m l " M l w g M O W f » < ' t e ' ' m ' '« o n m t « « r M O w : ( « r m t u , r• o m . t w ^ 0 . 9 t » r m r« e m r W n « i g M e W i t * ' o c '

1 What's in a name?Point your browser at www.nameboy.com where you canuse the service to suggest available domain names basedon keywords related to your business. Enter a word thatrelates to your business in both the 'Primary' and'Secondary' search boxes and click 'go nameboy go'.

2 Check availabilityA list of matching domain names will now be displayed. Ifa domain appears in brown, then it's already beenregistered, but if it's green, no one has yet snapped upthat name. If you find an available name that you like,check the relevant box and click 'Add these names to cart".

, l a s h l o n e h o e s . c o m I s t a k e n .

S n u - S i e l i

Secure H

E v a n t h i s d o m a m n a m e a l r a a t l y b M n

"rwxj n irti" r af>d wheritherwraBacomes avaiabiar^Of tha for you for one_>i»

W b s l i

k) Owns H?

vqura (on your behaV at no axtia charoa

I i n v i V « « I T .

e.mdudrtob^. . .Any change n tTie status or avaiC^y be e-rna<ed toyou m the weekly Snai/^8 newsi«ter And you canmor«or addional rwriaiWCSO oar 40 rtarwB

ftuo a NamaBoy Whole search on thw name (o And out

3 Purchase your domain nameYou're now given the option to purchase the domainname you're interested in. By clicking on the 'Buy thesenames now!' button you can acquire the domain for yours'lte by completing a series of online forms and arrangingfor the relevant payment.

4 Track a domain nameIf you've come across a domain name that you reallywant but it is already registered, you can find out whoowns it and track any changes in its status via theNameboy site by clicking on the underlined domain suffixin the results page

eCOMMERCE I PRACTICAL WEBPROjECTS 1 81

Page 82: Practical WebProjects 19

eCommerce FAQ

eCommene FAQLingo leveller

Technical terms bulldozed■ ePaymentsThese are online payment systems which allow you to processcredit card transactions securely without shelling out on amerchant account. Networks such as WorldP&y and PayPal buildon the existing infrastructure of bank accounts and credit cards,

allowing customers to make payments without physically givingout their card details to the company they're buying from.

■ HyperlinkA piece of text or a graphic on a Web site that transports you toanother Web page or a different part of the same page.Hyperlinks are generally created in HTML and are also used toload multimedia files on a Web page.

■ UsabilityUsability refers to the ease in which a user can operate, interpretand navigate a Web site, and is the key to ensuring thatcustomers don't desert an online store. The need for Web siteusability is perhaps best summed up by Jakob Nielsen's Law ofthe Internet Experience, w hich states: "Users spend most of theirtime on other sites."

Useful tricks and shortcuts

onyoursit0.net Vbifa^ iifo asfMrr>C e l U c t R n d D l

r»ui iH«.n»lprowi<(«du<hn,

&S « < v k : > m t M t t m e r

h K r m m a n n r l M l c e m m u n t l }•nyoiHtlt* by atlowtng vn>1ort la ptdicipM* in r««i«w>ngy f t u r p r o ^ g c l t i t n r i C f *

p r e « 4 « t f b y t t

C l i c k t o .

■ Add customer reviewsCustomer reviews provide an effective way of boosting theuptake of products on your site, and have been used to greateffert by sites such as Amazon. Add objectivity to your site byallow/ing people to write reviews of the products they buy Visitwww.onyoursite.net to discover how to add reviews.

' m d o u r u M l ^ l l 7

rel your frtrvlf «idccteaguesi

■ik» 6*porter i« *1 interm«oofi »ervt« »br Bfiwh E*porter»,idtetttd to providn9 qutdi, *cajr<t» «nd up to d

your cracDcai 4nd reguUtory quMOont Oo te x p o r t l e e n c e ? D o » * p o r t » ( 0 r e q u r t « C t r v t K M o fOngm? wh« « pr*-«hiprT*nt ir»p«e«»o tna wf*h couf»im*rwiurt It? jjrtLE

b L J W

- c a d s l i m « < i p r i c t > c 4 i: j t f M O I t n t h *

T h t K i m < > « » k r i i r t ( h « A O , I i B p t e i « » e o p v t r ?Omo Corporation. Oittti Chemicalm d u s t m j L t d , T h e N i p p o n S y n t h e o c < m m « e ( iC f i t m a t I n d u t t r r C o L t d « r > d U t n o n n c t M t p r eC h e m e a H I n d u s t r y L t d h a d o p * r « t a d a « * f o r « ?e a r t t i k ( h t s o r b a t t * m a r k « t b e t w e e n f l M A J1 9 7 9 a n d 1 9 9 6 . . r m n t a v i K p H n

If you're looking to set up business or utilise customers abroad thentake a look at www.lexicoexponer.co.uk for ideas on how to do it

Heart of Asia

Ql am currently looking into how I can get somedetailed information on the possibility ofgetting into business in South East Asia.

Nadia Kausur

A You're certainly right to do your researchbefore embarking on this course of action.The costs and time required to start trading overseasare significant for any organisation and the taskcould consume all the resources of a small firm.

A good place to start Is Trade Partners UK. Its site(www.tradepartners.gov.uk) enables you to searchfor background information about different countriesand markets. Among other services, It even providesa mechanism to match UK suppliers to potentialoverseas customers. You might also want to take alook at www.lexicoexporter.co.uk.

While it may be costly to start trading abroad, bearIn mind that grants and soft loans are available -particularly if your business Is located in agovernment-supported area of the country. Yourlocal Business Unk should know about this,although It might be quicker to take a look at thewww.j4b.co.uk Web site.

The name gameQl would like to set up an event business online,but I don't even know how to register a name

that is not already in use. Can you help?Oiodhna Harkin

Alt's well worth taking time to sort out thename of your business at the outset. You mayfind two Web sites of particular help. Even if you arenot planning to set up a limited company, it is worthlooking at the Companies House Web site(www.companieshouse.gov.uk). Among the'Guidance Booklets & FAQs' section you'll find adviceabout selecting company and business names.Certain words and expressions cannot be used or

may require approval. If you are planning to set up alimited company, however, you can search Xtve ^current company names to find those that are

currently in use.It might also be worth your while to take a look at

www.patent.gov.uk - the Patent Office Web site.Along with offering information on patents, designsand copyright issues, there is a huge amount ofadvice about trademark registration. This may benecessary to avoid confusion with products andservices offered by other businesses, plus you'll beprotecting your own business in the future.

All of this may seem to be a laborious and time-consuming task at a stage when you are probablymore concerned about cash flow and customers. You

may even feel it is worth employing the professionalservices of a trademark lawyer. However you tacklethe Issues, It is worth getting this right to avoidpotentially costly problems later on.

Regardless of whether you're planning to set up a limited company ornot it's worth looking at www.companieshouse.gov.uk for information

Balancing the booksQ Because I'm running my own business alone itleaves me little time for book-keeping. Are

there any time-saving aids for small firms?

Sally Beard

A Although the shoebox full of receipts is anunfair stereotype of the average small firm,you are probably typical of most people runningtheir own business. Book-keeping, VAT returns andother financial matters (apart from invoicing, ofcourse) are often perceived as a necessary evil.

Market-leading products, such as Sage(www.sage.com) and QuickBooks(www.quickbooks.com), offer affordable andsophisticated software solutions and some of thesehave been adapted for life on the Web. But often, alot of small firms find that they demand too muchtime - to learn and to use. More recent productssuch as MyBusiness seem better tuned into thelifestyle of small firms. As well as book-keeping, thisalso covers other business routines, such asmanaging tasks, diaries and business contacts.

Page 83: Practical WebProjects 19

eCommerce FAQ

Accepting credit card payments

Ql have a small Web site and want to acceptpayments from It. I have to admit that whenI found out the charges involved for setting up amerchant account I nearly collapsed. The paymentsI want to collect are going to be fairly small. I haveheard of third party verifiers in America who takethe payments for you and charge a percentage andthen pass on the rest of the payment to you oncethe funds are cleared. Are there any similar setupsavailable in the UK?

Raj Khuti

CEcca/-

The way to send and receive money onHne

S i a n t n » t o r v o u r F R E E P a v P a l a c c o u n t

Ace oniii t cjrt pJViMrtWp»y*ir> M«eh»it Tooh.

M B H H )t a w s

1 Sign up with PayPalPayPal offeis you the ability to accept credit cardpayments on your site through its secure ePaymentsystem. To sign up for a PayPal account, visitwww.paypal.com and dick on the 'Merchant Tools' linkbefore clicking 'Sign up today'.

A There are many choices for credit cardpayment services, the most obvious beingbanl(5 that provide merchant acquirer facilities.They will settle transactions conducted with themain card-issuing associations (Visa, Mastercard,etc) for a fee. Alternatively, there are specialisedePayments service providers. These havemultiplied over the past three years and includePayPal and WorldPay among others.

All of these charge transaction fees that can varyenormously. The best way to reduce fees is to

e e j j c a r S i H L i i B 1 m l n i M f c

Sign Up For • PayPal AccountC k P S M V M i r A c c a a n t T y p * - C h M M m c q u M u p * U r m t mt n t r * M i y * I n m . t n t i » n » • • W i a nw i c w t c r t d i t c * r 4 t e m t r t T l W t

« . • ! p W 8 o S 5 T O B f F 3

i - i

1 1 1 1 S M U T * . !

' J X

a S l B M S t

A l l n « h t > r M t r v H .

2 Choose an account typeNow you need to select the type of account that youwish to set up. You can either register for a personalaccount, which allows you to purchase goodselectronically as a customer or, as in this case, sign up fora business account, which lets you accept card payments.

have an excellent credit rating, combined with astrong trading record in a low-risk activity, thoughthis is near impossible for most small businesses.

Some companies, such as Planet Payment(www.planetpayment.com) offer a variety ofvalue-added services. It charges a smallpercentage of the transaction value, a small flat feeper trade and a facility access fee. The higher feescover the cost of Planet Payment protecting itselfagainst its client's potential financial failure throughinsurance bought from a financial institution.

3 Enter your detailsIt's now just a case of completing all of the necessaryinformation in the sign-up forms. Besides the name andaddress details of your company you'll need to supplycustomer service information, including a valid emailaddress where customers can reach you.

There have been attempts to launch online bookkeeping services, but there are few that have reallyhit the target yet. However, there certainly are onlineservices that can provide small firms with helpfulinformation and advice. Smallbiz(www.smallbiz.uk.com) is also well worth looking atfor information on keeping your finances updated.

I t : 1l ^ i M ' l ' l M

• " n a a -

1 M l ) 1

Automated book-keeping tools such as QuickBooks help you get your^nances in check without eating into your valuable time

News of the world

QI'm keen to add some extra content to mybusiness site to increase its value, and Iunderstand it's possible to add live news feeds to Websites. How is this done and what does it cost?

Brian Scargill

A This sounds like a superb idea for any site andis likely to improve the quality of your site, aswell as the amount of visitors you can expect to visit.There are plenty of firms that provide live news feedsfor Web sites. US companies such aswww.moreover.com has established a solidreputation in this area, and sell tailored newsservices to Web sites.

If you're looking for something with more of a UKflavour, check out www.newsnow.co.uk, whichoffers a range of options, including a free 14-day trialof its news services. Before you add a news feed toyour site, it's worth considering first whether it will

If you're looking for a news feed with a UK emphasis pop along towww.newsnow.co.uk and sign up for a free trial

help or hinder your business. For a start, ensurethat the topic of your news feed is relevant to theinterests of your customers. Also, ask yourselfwhether a live news feed is going to 'add value' toyour site, or just obscure its purpose. Once you'resure go ahead and add the news feed to your site.

eCOMMERCE I PRACTICAL WEB PROIECTS I 83

Page 84: Practical WebProjects 19

B o o k r e v i e w s

revi ews▶ If you are looking for a little more information to help you get your online business on track checkout these mighty eCommerce manuals for some advice from those who have conquered the Web

Complete Guide to Internet PublicityAUTHOR: stem O'KMfeISBN: 0-471-10S80-5

PUBLISHER: WileyBUY ONLINE: w«nw.wriley.toiii I PRICE: £21.95

onsidering you're just one of over a billionWeb pages, getting your eCommerce site tostand out from the crowd is never going to

be an easy task.However, there are a tew tricks at your disposal

that will turn the eyes of the world towards you, andthis insightful guide talks about some of the keytechniques at your disposal to help you ensure thatyou don't end up on the dotcom scrap heap.

Don't worry if you are still unsure about how muchyour site will actually benefit from online marketingbecause the opening chapter of the book outlines thepower of Internet publicity The book continues byexamining some of the mistakes made by flawed

sites in the early days of eCommerce, and goes on toemphasise the importance of formulating a solidpublicity strategy It provides a detailed look at someof the PR and marketing secrets behind the Web'smost successful online stores, and the guide iscomplemented with case studies of eCommerce sitesthat have employed these tactics to great effect.

O'Keefe covers the ins and outs of making a namefor your site, including a thorough examination of thelatest promotional technology, such as search engineoptimisation, email marketing, email merge softwareand syndication, plus affiliate programs. It's not justabout the technological aspect though, and the bookcovers the theory behind some of the greatest online

campaigns, covering everything from how to write theperfect email news release to using contests andpromotions to lure customers to your site.

While it doesn't profess to take the hard work outof marketing your site, the Complete Guide to InternetPublicity does feature some very practical tips that youcan employ today to help beckon people towards yoursite, such as posting on discussion groups, adding anonline newsroom to your home page, and submittingto search engines and directories.

The guide concludes by providing some sensibleadvice for implementing your strategy explaining howto mastermind a winning PR campaign withoutshelling out too much cash in the process.

84 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 85: Practical WebProjects 19

B o o k r e v i e w s

E-Commerce User ExperienceAUTHORS: NidSM, Moiidi, Ssydcr, Farf«HI S B N : O - f U M m O l

PUBLISHER: Niefsen Norma* GfoopBUY ONLINE: wvvwji i^

I P R I C E : £ M 5 0

akob Nielsen is to Web design whatYoda is to waving a light sabre, and ifhe says something you generally sit

b a c k a n d a b s o r b h i s w i s d o m .

▶in 2000, Nielsen and his team of usability"t^set about testing the ease of use of 20

different business-to-consumer online stores,

interviewing users of the sites to gauge theirexperiences. Despite being almost four years old.

the subsequent report makes for fascinating

reading for anyone running an eCommerce site.Acting as a blueprint for how a perfect online

store should function, the full-colour report isdivided into nine chapters, covering everythingfrom strategy issues such as pricing andavailability to the fundamentals of checkout andregistration. The book is laid out as a series ofobservations from the study, providing tips on how

to achieve the things users liked and avoid the

things that they didn't. Each section is clearlyillustrated with screenshots from the sites inquestion, with graphs and charts to highlight keypoints, making for an easy-to-digest reference.

Although you might think it is a little pricey fora 389-page book, in the long term, E-CommerceUser Experience could end up making youthousands of pounds in extra revenue.

Amazon.com For DummiesA U T H O R : M a r a F r i e d m a nI S B N : 0 - 1 « 4 5 - S S * 0 - 4

PUBLISHER: Fo r DummiesB U Y O N L I N E : i M w w. d u m m i e s . c o i n

I P R I C E : a * J » 9

ou know you've truly made it In life whenyou have a For Dummies book dedicatedto you. Therefore, Amazon should feel

privileged to get the idiots' guide treatment from theinnovative publisher.

While you may at first question the need for abook that tells you how to use a Web site, when youconsider just how vast this online store is, you'llrealise that it's more than just your average two-bitshopping site. Not only does the guide take youthrough the process of registering an account and

perusing the goods on offer, it also goes on to coverother aspects of the store, such as its specialistsections, community features and online auctions.

Perhaps most interesting of all is the section of thebook dedicated to making money on Amazon, whichexplores some of the various ways you can exploitthe eCommerce giant to strike it rich. Here, you learnhow to become a merchant or partner with the site,and how to offer your wares to a global audience.Everything is presented in a step-by-step manner, soanyone can master the world of Amazon.

E-Commerce Fundamentals and Applicationsk AUTHORS: Own, Ue, INHoa, Clumg PUBLISHER: MMcy t PRICE: £24.99r ISBN: 0-«71-49303- l BUY ONLINE: www.wiiey.tom

hile many eCommerce books simply talkabout the theory behind doing business onthe Web, this guide is one for those who

like to get their hands dirty and learn as they work.After providing a succinct introduction to the worldeCommerce, explaining how it works and analysing

the different types of online business, the bookthrows you straight into client-side programming withan excellent overview of Web building technologies.This includes a series of primers on using HTML,javascript and CSS to nail your elements together

The book then encourages you to master server-side programming languages to build applications tohelp you manage your store. It explores databaseconnectivity, session tracking and security issues,before examining practical ways to handle payments,promote your site and make it usable.

After digesting the information served up by theguide, you're invited to have a stab at building acomplete virtual book store yourself in the form of aseries of step-by-step exercises, which are designedto be practiced over the course of a few weeks.

Homepage Usability▶ AUTHORS: |akofa mISBN: t t -nn -1102 - :

N i e l s e n a n d M a r i e I M i i r PUBLISHER: New RidersB U Y O N L I N E : w w w. i i e w r j d e i $ . c o m

I PRICE: £».»»

hat does your home page say about you?That's the question posed by usabilityeggheads Nielsen and Tahir, as they run

the rule over 50 of today's top Web sites.The duo seek to find out how well equipped each

home page is at grabbing the visitor's attention andnavigating them through their site.

Putting the likes of BBCi, Amazon, General Motorsand Microsoft under the microscope, this beautifullyillustrated, full-colour guide provides a well-presentedsynopsis of what works and what doesn't. This

includes an overview of the page layout, a review ofthe window title and tag line, plus a pie chart outliningthe make-up of the screen 'real estate' for each site.Nielsen and Tahir then present an annotatedscreenshot of each home page, pointing to the variousdesign and navigational elements used, and givingtheir expert opinion on what they like and what theydon't about each one. You'll find yourself analysing thehome of your site much more critically borrowingideas from some of the most usable sites around, andsteering clear of the howlers that occur on others.

cCOMMERCE I PRACTICAL WEB PROIECTS I 85

Page 86: Practical WebProjects 19

■ Digita Video ■ Digital Audio

■ D i g i t a l I m a g i n g B 3 D & A n i m a t i o n

Page 87: Practical WebProjects 19

A TA MAGAZINE FOR All DIGHU. CREAnVES

PHOTOSHOP ILLUSTRATOR PAINTER FREEHAND PREMIERE ENCORE •COMBUSTION

THE MAGAZINE FOR CREATIVE COMPUTER USERS

P H O T O S H O P C S P O W E R G U I D E

C R E A T i ' t

ssisye?FROM PHOTO TO ILLUSTRATION -lACEY SHOm YOUHOW TO RECREATE THIS STUNNING COVER%RTWORI

H* Windcws .. Mac

SPECIAL ERECTS. , /Spice up your OV footage IfrHh sxpft -primers for After Iffects am! CofiN&iiHon t EXPE!

PUJS'-TUTORW- i XI S S U E 0 9 £ 5 . 9 9

O N S A I E N O WAvailable from all good newsagents, or call for a copy direct on 0870 444 868

Page 88: Practical WebProjects 19

WebPfm^Your hands-on guide to the best Web creation software

Issue 13Web DesignWe depart from our usual topics and bring you an all-encompassing lookat the tips, tricks and techniques that every Web designer needs. Includedare features on planning and executing the perfect site, tutorials on thelatest Photoshop, Dreamweaver, Flash and Fireworks techniques, and aprimer on designing Web content in 3D.

On the CD; Another packedPractical Web Projects CD is proudto include demos ofDreamweaver, Flash, Fireworks,Photoshop (PC only), Swift 3D,project files for every tutorial inthe magazine and a host ofroyalty-free graphics, clip art,backgrounds and Flash fonts.Price: £6.99 (includes postageand packing)

I s s u e 1 5DreamweaverWe revisit Dreamweaver to discover what delights lurk in the brand newversion of Macromedia's Web editing application. We get the inside trackon the best techniques by asking some top Web designers to spill thebeans on their favourite editing tips. There's also 50 pages of projectsincluding guides to adding slick site navigation, setting up eCommercefacilities, implementing user-authentication, and your own online forum.

On the CD: We crammed demosof the brand new versions ofFlash, Dreamweaver andFireworks onto the disc, alongwith FreeHand MX andColdFusion MX. Also, 30 freeDreamweaver extensions, 75fonts, and a book chapter! Plusall the files you need to completethe projects.Price: £6.99 (includes postageand packing)

I s s u e 1 7D r e a m w e a v e rIf you've always wanted to build a top class Web site then look no furtherthan this almighty guide to creating slick pages with Dreamweaver In adeparture from our usual format, we demonstrate how to build acomplete Web site through a series of inter-linking projects, providing youwith all you need to know to design graphics, shape pages,work with interattive Flash elements, add databases andset up eCommerce facilities. The issue also explainsprofessional page design andways to promote your site. o i r fOn the CD:The CD is crammed with £250worth of Web design software. Itcontains full versions of 4D andOuask FormArtist Presto, plusdozens of Dreamweaverextensions, scripts, and artwork.Price: £6.99 (includes postageand packing)

D R E A i y i W E f O l k n

Issue 14Flash DesignTaking an in-depth look at the brand new version of Flash, we explain howto tap into its hot new features to bring your Web pages to life. Featuresinclude a guide to finding the tastiest Flash resources online, along with adetailed exploration of Flash MX 2004 and Flash MX Professional 2004Plus, we show you how to create a stylish preloader, build your own Flashmedia player and knock up an old-school Space Invaders game.

On the CD: The action-packed CDon this month's issue is crammedwith resources to help youimprove your site with Flash.Along with a demo of Flash MX,you get a bumper collection ofquality Flash source files, fontsand a range of audio samples.Price: £6.99 (includes postageand packing)

FLAi^DGSian

I s s u e 1 6

PliotosiiopWe uncover the secrets of Photoshop CS, explaining how it can be put towork to create even better Web graphics. We also take a look at plug-ins,revealing how they can be used to transform the way you manipulategraphics and add more power to Photoshop Among the in-depth projectsin this issue are guides to creating pixel art icons, cool textures and a slicknavigation bar for your site.

On the CD: If you're looking to getinvolved with the new version of

Photoshop then our cover CD willbecome your new best friend.The disc includes over an hour of

step-by-step video tutorials in theshape of Total Training for AdobePhotoshop CS. We also cram on acollection of essential Photoshopplug-ins, actions and fonts.Price: £6.99 (includes postageand packing)

I s s u e 1 8Web GraphicsProviding a complete guide to making the Web look gorgeous, we showyou how to master the worid's greatest graphics software. You'll discoverprofessional design secrets as Web graphics experts reveal their favouritetricks and techniques for using Photoshop, Fireworics, FreeHand, Illustratorand Paint Shop Pro. You'll then be well equipped to sink your teeth intoour gripping graphics projects, which will have you designing slickinterfaces, creating stylish image maps and conjuring up glorious pages.

On the CD:The packed Web Graphics CDfeatures a triple-header of fullversions in the shape of XaraWebstyle 2, Xara 3D 3 and SerifPhotoPlus 6, worth a total of£150, We also feature a demo of

Photoshop CS and all the filesneeded to complete the projects.Price: £6.99 (includes postageand packing)

G R J V P H I C S

CALL OURHOTLINENOW ON:0 8 7 0 4 4 4 8 6 8 2

WebPra^YOUR DETAILS

Telephone No:

Email ;

I WOULD LIKE TO ORDER:

□ ISSUE 13 □ ISSUE 14 □ ISSUE 15□ ISSUE 16 □ ISSUE 17 □ ISSUE 18All issues cost £6.99, including postage and packing, and aresubject to availability. Overseas prices available on request

METHOD OF PAYMENT (no cash please)

Please indicate your choice of method

□ CHEQUE Please make payable to Highbury Entertainment Ltd□ CREDIT CARD

S - H T e c B□ Delta n Visa □ Mastercard □ SwitchCard number :

□□□□ □□□□ □□□□ □□□□ I□ □

Ifappkable

Expiry date: □ □ / □ □Issue No. nim (Switch only)

Signature:

Please return this order form or a photocopy of it together witii yourcheque/postal order (if applicable) to the following address: HighburyEntertainmer7tLtd, FREEf>OST NAm809, (CustomerInterface), SOMERTON.TAll 62A. h won 't cost you a penny in stamps if posted in the UK.Alternatively, call the subscription hotline on 0870 4448682, fax your orderon 01458 271146 or email us at subs<§>paragon.co.uk

□ From time to time, Highbury Entertainment Ltd sends out news aboutexciting new products and opportunities that are of interest to our readers. Ifyou do not wt^ to receive such information, please tick this box.

Page 89: Practical WebProjects 19

"They laughed when I said I waswaiting for Broadband to be less

than £10 a month before I bought it.But guess who's laughing now?!"

Its finally here! Broadband prices that are affordable. We've been working hard to lowerthe prices of Broadband to help you jump onto the Broadband bandwagon without riskingpaying too much. We've worked hard for the last 3 years perfecting our services, makingthem cheaper, faster and helping our customers every step of the way. You can now getBroadband for less than the cost of dial-up and you can upgrade to faster Broadbandpackages at the click of a button! Make sure you visit our web site for the latest offers!

B r o a d b a n d 1 5 0Up to 3 times faster than a standard dial-up connection.Our cheapest Broadband ever! £9.95 for the first 3 monthsthen £15.95 after that. Suitable for 24/7 access, surfing,chat, emailing and downloads. You can upgrade yourpackage anytime after signing up!

r ^ ^ P p e rM a m m o n t h

£B r o a d b a n d 2 5 6Up to 5 times faster than a standard dial-upconnection. Great for online gaming, sending largeemails and downloading files faster.

B r o a d b a n d 5 0 0Up to 10 times faster than a standard dial-upconnection. This is the most popular package - 80% ofour Broadband customers sign-up to this package.

B r o a d b a n d 1 0 0 0Up to 20 times faster than a standard dial-up gmconnection. Twice the speed of your standard Broadband connection, yet cheaper than some ISP's 512k package!

1 79 5p e rm o n t h

p e rm o n t h

p e rm o n t h

B r o a d b a n d 2 0 0 0Up to 40 times faster than a standard dial-upconnection. This is strictly for the geeks! When you'vegot a 2mb Broadband line you know you're the man!

V i s i t w w w. G i o l n t e r n e t . c o mor Call 0870 922 4000 Now! I

Broadband availability subject to location. Terms and conditions apply

£39®®Z L m o n t h

Page 90: Practical WebProjects 19

-dUKHOStS cor^order; http://www.ukhosts.coni e-mail: [email protected] tel: 0800 587 2409

jdomain hostingi £60! ♦VAT

p a

f r e e d o m a i nwith hosting

\Mn2000 & Linux: includes control p«n*l. lOOmbwebspac*, w*b maM, untimilad POP3 & a-maii forwarding.ASP, PHP, CGI-BIN. FrontPaga, Raady Mad* Scripts

I +VATp a. c o . u k £ 5 !* minimum 2 years

. c o m £ 1 0 !* register tor up to 10 years

m a n y o t h e r d o m a i n s a v a i l a b l e

I +VAT

no hidden extras - all prices include all fees - no transfer charges

domain cloal<ing£ 2 ! - 5

* cloaking to an existing donnain* 5 e-niail torwardings + catch all e-mail

, * metadata - description & keyvvords

v i s i t u l ( h o s t s . c o mfor special offers

u k h o s t s . c o m" rea l peop le - no t robo ts "

now in our 5 th year

order: http://www.ukhost5.com e-mail: [email protected] tel: 0800 587 2409

U K H O S T M U1 □□O M b S t o r a g e S p a c e

2 5 G B M o n t h l y B a n d w i d t h

F r e e D o m a i n N a m e

U n l i m i t e d E m a i l & F T P

U n l i m i t e d P H P & M y S Q L

□ P a n e l & F a n t a s t i c o

t W e b H o s t i n g 1 I B r o a d b a n d 1 C W e b D e s i g n ] [ D e d i c a t e d S e r v e r s ]

P : . 0 a 7 0 , 9 2 . 0 4 S S i i n i { | | | { | i | l 8 l | | | | | i | | |E : S A L E S ( a ) U K H O S T 4 U . C a M U K H 0 S T 4 U . C 0 H

- " " M

1H O S T W A YT H E H O S T I N G C O M P A N Y

. .

The #1 Global Hosting Providerunique customers - unique hosting

L o w C o s t D o m a i n s

.co.u l ( , .me.uk

£8 .95/2 years.com, .net, .org, .info

£8.95/1 yearS h a r e d W e b H o s t i n

All our plans are built on 99.9% uptime reliability,managed security, the best tools and softwareout there, and Professional Support 24/7/365.Whatever your level, trust Hostway to look afteryour unique website.

E m a i l O n l v P l a n sA reliable, professional email service that'seasy to use. Configure your email client oruse web-based SiteMall wherever you are.E m a i l S t a r t e r E m a i l P l u s- 2 P 0 P 3 e m a i l s - 5 P O P S e m a i l s- 20Mb Disk Space - 50Mb Disk Space- U n l i m i t e d a l i a s e s - U n l i m i t e d a l i a s e s

£29.95/year £49.95/ye3r

S i l v e r-100Mb Disk Space• 1 G b B a n d w i d t h• 5 P O P 3 e - m a i l s. P H P / A S P / X M L

G o l d- 200Mb Disk Space- 4 G b B a n d w i d t h

- 1 0 P O P 3 e - m a i l s- P H P / A S P / X M L

-1 MySQL/Access DB

„£7.95 pcm £l4.95p

Exclusive to Hostway...Merchant Manager (NEW!)Open for business! Hostway's fullycustomisable, merchant-ready onlineShopping Cart system.S i t e C o n t r o l - T h e l a t e s t e v o l u t i o n o fo u r r e n o w n e d C o n t r o l P a n e l t a k e seven more strain out of managingyour hosting environment.SiteBuilder - Create your ownprofessional, customised websitein minutes - no programmingknowledge required.

f r« iub jK( t»ch«n9* .

[email protected],uk 0808 180 1880 www.hostway.co.uk

UK's Better Value DomainName Registrat ion Service.,T H E E U R O P E A N D O M A I N N A M E S P E C I A L I S T S

FREE UNLIMITED EMAIL FORWARDINGSet Up To 100 Email AddressesFREE WEBSITE FORWARDINGBanner Free Cloaked or Standard ForwardingFREE DOMAIN PARKINGReserve your Domain until you need to use itFREE EXPERT SUPPORTBy Email &TeleplioneFREE ONLINE CONTROLExclusive Domain Management Tools

All domain prices per year ■ Minimum 2 Year Term + VAT Applies

. C O

. r o

FOR A FULL UST OFAVAILABLE DOMAINS

PLEASE VISIT:

W W W. S I M P LY. C O M

.uk .me.uk .org.uk

£ 2 . 8 9.com .net .org

£ 8 . 9 9.biz . info .us

£ 9 . 9 9www.simply.com

TEL; +44 [0] 1684 893020E M A I L : S A L E S @ S I M P LY. C O M

r simply® & simplynet' are registered trademarks of Simply.Com LtdSIMPLY.COM LTD. Enigma Commercial Centre. Malvern. WR14 UJ . UK

Page 91: Practical WebProjects 19

Dependable Hosting forU n l i m i t e d We b s i t e sHost as many websites as you wish^n your choice of UNIX/Linux or Windows 2003web servers. QuicWy set-up new sites and manage existing ones using our industryleading control panel.Define hosting plans for your customers and customise their control panels with yourbrand enabling you to offer high end, profitable hosting solutions to your clients.

■ ASP, .NET, Perl, PHP,FrontPage & CGIscripting

■ mySOL, SOL Server &A c c e s s d a t a b a s e s

■ Graphical usages t a t i s t i c s

■ U n l i m i t e d

mai lboxes,f o r w a r d e r s & a u t oresponders

■ S S L s e c u r e s e r v e r

■ U n l i m i t e d c l i e n tcontrol panels

I Personal servern a m e s

I Exceptionalcustomer support■ Money backguaran tee

^ "/can thoroughlyW r e c o m m e n d

Donhost to anyone

^ looking Jora trulyf professional and

competitive ISP."Howard cuff-

Call: 0845 226 5918O r v i s i t : w w w. d o n h o s t . c o . u kBusiness packages also available from f 8.99/month

\ S / C N U P N O WSPECIAL OFFER!

Sign up NOW and enjoy / daysfree service.Simply enter the special code - PV\/H\ - at:

www.donhost.co. ukor call0845226s9i8

I N S TA N T S E T U PLogin and sUrt using the account straight

away whetheryou sign up onhne or over the telephone.From £39*99 per month or

d o n h o s t .power in your hands

M i c r o s ^. n e t 1P o w e r e d b y F m B S D

W i n d o w s 2 0 0 3 T H E P O W E R

N e t S e r v e r T O S E R V E

Ripe_ ' i v c cN o m i n e t . M A ;

Cisco^ o w M d N W w o f k

Hosting is provided on our lightning fast state of thelfftwrvers.No expense has been spared in providing fast and reliable hosting.

»

<NI 1 bUHOSTING ws/tus; UnitedHosting.co.ukCallus: 0870 011 6547

Proudly hosting over 6000 websites!

quality web hosting?Featured package:

200MB Diskspace5GB Monthly Transfer5 0 M a i l b o x e s

Spam FilteringW e b C o n t r o l P a n e l

...from just £5 per month

Page 92: Practical WebProjects 19

D i s c o u n t < s ^Inkjet Cartr idges & Suppl ies

Compat ib lesE p s o n

Non ChippedB l a c kC o l o u rTw i n P a c k s

Ch ippedB l a c kC o l o u rTw i n P a c k s

BT PaperjetPJ55M B Ik

C a n o nBCI-15 BIkB C I - I S C o lB C M S B I k y C o lBCI -3 B IkBCI-3 C, M or YBCI -6 B IkBCI-6 C, M or YBCI-21 BIkBCI -21 Co lB C I - 2 4 B I kBCI -24 Co lB C I - 2 4 B I k / C o lB C - 0 1 B I kB C - 0 2 B I kBC-05 Co lB C - 0 2 / - 0 5 B l k / C o lB C - 2 0 B I k

X e r o x8 R 7 9 7 1 B I k8 R 7 9 7 2 C8 R 7 9 7 3 M8 R 7 9 7 4 Y

£ 0 1 . 9 9£ 0 2 . 9 9£ 0 3 . 9 9

£ 0 2 . 9 9£ 0 3 . 9 9£ 0 6 9 9

£ 2 4 . 9 9

£ 0 5 . 9 9£ 0 7 . 9 9£ 1 2 . 9 9£ 0 1 . 9 9£ 0 1 . 9 9£ 0 1 . 9 9£ 0 1 . 9 9£ 0 0 , 9 9£ 0 1 . 9 9£ 0 1 . 9 9£ 0 2 . 9 9£ 0 3 . 9 9£ 0 5 . 9 9£ 0 5 . 9 9£ 0 8 . 9 9£ 1 4 . 9 9£ 0 7 . 9 9

£ 0 2 . 9 9£ 0 1 . 9 9£ 0 1 . 9 9£ 0 1 . 9 9

HP Recycled5 1 6 2 5 C o l5 1 6 2 6 B I k5 1 6 2 9 B I k5 1 6 3 3 B I k5 1 6 4 1 C o l5 1 6 4 5 B I k5 1 6 4 9 C o lC I 8 2 3 C o lC 4 8 4 4 B I kC 5 0 1 0 C o lC 5 0 11 B I kC 6 5 7 8 C o lC 6 6 1 4 B I kC 6 6 1 5 B I kC 6 6 2 5 C o lC 6 6 2 8 B I kC 6 6 5 6 B I kC 6 6 5 7 C o lC 6 6 5 8 P h o t oC 8 7 2 7 B I kC 8 7 2 8 C o l

T w i n P a c k s5 1 6 2 6 / 2 55 1 6 2 9 / 4 95 1 6 4 5 / 4 15 1 6 4 5 / C 1 8 2 35 1 6 4 5 / C 6 5 7 8C 5 0 1 1 / 5 0 1 0C 6 6 1 4 / 5 1 6 4 9C 6 6 1 5 / 1 8 2 3C 6 6 1 5 / 6 6 2 5C 6 6 1 5 / 6 5 7 8C 6 6 5 6 / 6 6 5 7C 8 7 2 7 / 8 7 2 8

£ 0 8 . 9 9£ 0 6 . 9 9£ 0 6 . 9 9£ 0 6 . 9 9£ 0 9 . 9 9£ 0 6 . 9 9£ 1 0 . 9 9£ 1 0 . 9 9£ 11 . 9 9£ 11 . 9 9£ 0 8 . 9 9£ 1 1 . 9 9£ 0 6 . 9 9£ 0 7 . 9 9£ 1 1 . 9 9£ 1 1 . 9 9£ 0 8 . 9 9£ 1 3 , 9 9£ 1 1 . 9 9£ 11 . 9 9£ 1 3 . 9 9

£ 1 4 . 9 9£ 1 6 . 9 9£ 1 5 . 9 9£ 1 6 . 9 9£ 1 7 . 9 9£ 1 9 . 9 9£ 1 6 . 9 9£ 1 7 . 9 9£ 1 8 . 9 9£ 1 8 . 9 9£ 2 1 . 9 9£ 2 4 . 9 9

Lexmark Recycled1 0 N 0 0 1 6 B I k1 0 N 0 0 2 6 C o l1 2 A 1 9 7 0 B I k1 2 A 1 9 7 5 B I k1 2 A 1 9 8 0 C o l1 2 A 1 9 8 5 C o l1 2 A 1 9 9 0 P h o t o1 3 6 1 9 H C C o l1 3 4 0 0 H C B I k1 5 M 0 1 2 0 C O I1 5 M 0 1 2 5 C o l1 7 G 0 0 5 0 B I k1 7 G 0 0 6 0 C O I1 8 L 0 0 3 2 B I k1 8 L 0 0 4 2 C o l

T w i n P a c k s1 0 N 0 0 1 6 / 2 61 2 A 1 9 7 0 / 8 01 2 A 1 9 7 0 / 1 2 01 2 A 1 9 7 5 / 8 51 3 4 0 0 r e i 91 7 G 0 0 5 0 « 01 8 L 0 0 3 2 / 4 2

I n k R e fi l l K i t sB l a c k + C o l o u rB l a c kC o l o u rP h o t oChip Setter

B u l k I n k s6 0 m l B l a c k2 5 0 m l B l a c k60ml C, M or Y250ml C.M or Y

7 ^ F r e e D e l i v eInkjet & Laser Cartric

F o r u n b e a t a b l e

i Onl ine - No Minimum Order

£ 1 3 . 9 9£ 1 4 . 9 9£ 0 9 . 9 9£ 1 0 . 9 9£ 1 0 . 9 9£ 11 9 9£ 1 2 . 9 9£ 1 0 . 9 9£ 0 9 . 9 9£ 1 1 . 9 9£ 1 2 . 9 9£ 0 9 . 9 9£ 1 0 . 9 9£ 1 3 . 9 9£ 1 5 9 9

£ 2 7 . 9 9£ 2 0 . 9 9£ 2 0 9 9£ 2 1 9 9£ 2 3 9 9£ 1 9 . 9 9£ 2 8 . 9 9

£ 0 7 . 9 9£ 0 3 . 9 9£ 0 4 , 9 9£ 0 3 . 9 9£ 1 3 , 9 9

£ 0 2 , 9 9£ 0 7 , 9 9£ 0 2 , 9 9£ 0 9 , 9 9

iry;s available for all manufacturers from Appsals on ALL printer consumables order online

lie to

b o x - s h i f t . c o . u kor call 0870 011 2005 (12 lines open Mon - Fri)All prices quoted are based upon purchasing multiple quantities and exclude vat @ 17,5%

>■' (a

Earn Money OnlineCreate your own dating web site

www.iliy-ilating.comwww.diy-dating.com

more than just CheapNames'• < 4 . 0 0 " " A - O O£^GO.uk £w.com

FREE TELEPHONE AND EMAIL TECHNICAL SUPPORT

Honest, value for money domain registration, domainmanagement systems, email packages and fast, reliable

web hosting. Fully inclusive price with many morein ternat iona l domains ava i lab le .

F R E E . c o . u kA d o m a i n n a m ewith all new web hosting accounts j

call us today on 0870 120 8888o n l i n e w w w. c h e a p n a m e s . c o . u k

Namesco Limited, Est. 1996. Britannia Court, 5 Moor Street, Worcester. WR1 3DB.Prices quoted per annum unless ottienvise stated and exclude VAT at 17.5%. Ctieques and major credit/debit

^ web hosting toostartup Startup Business Business Enterprise Enterprisi

Webspace Mb 50 1 0 0 2 5 0 3 5 0 500 750

P0P3 email boxes 5 10 2 5 5 0 100 2 0 0

Data transler pern 1GB 2GB 4GB 6GB 10GB 15GB

Account manager ■ /Secure connection ✓ yMySOL, PHP, ASP / " V ~ /

/

FrontPage 2002 / / /Virus & Spam Filter V r / > /Firewall / /Physical security V /24/7 monitoring y V \ VWe b - b a s e d e m a i l y V / 7 VFull FTP access y - T -

" /

CGI Perl 5.8 V V y" V

SSIJ

V / V "' V

Web site statistics /' 7 ' r -

wControl panel / - r -

^ /y " /

25 visual tutorials / V/

J

/Per Month £ 4 . 9 9 £ 7 . 9 9 £ 1 3 . 9 9 £ 1 6 . 9 9

" £21.99£24.9<

Per Year £ 4 9 . 9 9 £ 8 9 . 9 9 £149.99 £189.99^ £249.99 '

£ 2 8 9 . 9

accepted.1 WM

E I « c t r o f tM M S d O © S

Page 93: Practical WebProjects 19

o f ^sk sp6GB of data transfer per

t m m m ' FrontPage extensions • Unlimited P0P3 [email protected]• Unlimited mail forwarding [email protected] • Email is filtered for Spam and viruses' Unlimited subdomains of your domain name e.g.http://subdomain.yourdomain.com

• Account management via control centre • CGI-BIN • Perl 5 • PHP 4 • SSI (server side includes)• MySQL Database • phpMyAdmin for MySQL management • SSH access • Full FTP access• Detailed visitor statistics • Close control downflow air conditioning units• UPS system and Generator back-up

A l l o f o u r w e b s e r v e r s c o n t a i n D u a l P r o c e s s o r s1GB memory minimum and ultra wide SCSI Hard Disk Drives with raid 1.Our network consists of multiple lOOmbs fast Ethernet connections.

■■■■ ^ T ; : - ' . . . -

Established 1995

' affordable and reliable hostingO R D E R O N L I N E N O W

w w w . w e b - m a n i a . c o m * s a l e s @ w e b - m a n i a . c o m

Established 1995

M l A G b m a n S a• affordable and reliable hosting

T e l : 0 8 7 0 0 8 0 ^ 2 4 7

^ WWW. HAISOFT. CO.UJ<SHAOED HOSTING^n^ DOMAIN NAMES RESELLER AD

i a o M B a f , w t B s n i a

m m m m s m

m i a fi \ i m s p a a ,

I S D B M j l M N S m

39:S3P/o:UKnME

^Casstop !N'etworunvw.gCasstop. net '

. l t d . u k . c o . u k . o r g . u k

(Domain names from £9.99. m e . u k t v

c o m

. p l c . u k . i n f o

Free holding page or web forwardingwith every domain name.

Orderonfine now @ unvw.gCasstop.netinfo@g[asstop. net

Buy onUne turn'

"WeS Jiostingfrom £20 per yearWeb Stat is t icsWeb Based e-mai lPersonal control panelVacation e-mail facilityCGI, PHP, SSI script enabledMySqlPersonal Emai l accountsSupport forumFrontpage extensions

+ Much Much More

Wo setupfees - 5Vo hidden costs

B H H i a E i B Affordable Web Hosting Solutions

An amazing service at an amazing price.> web space (mb) 1 0 2 5 5 0 1 0 0 ?> pop3 mailboxes 1 0 2 5 5 0 1 0 0 ?> bandwidth (mb) 5 0 0 5 0 0 5 0 0 5 0 0 ?

Price per year £ 1 0 £ 2 5 £ 4 0 £ 7 0 A s k

> advanced Control Panel and Admin Centre to manage single or multiple accounts> feature packed with a wealth of exciting add-ons standard with all hosting packages> safe & secure with spam filtering, file & password protection, IP deny, anti-hotlinking> free ecommerce solutions, guest-books, forums and many tools, tricks and scripts> run cron jobs, access handlers, create mailing lists, trace emails, protect your site

Why pay more for [email protected], http://www.saffas.com, 0781-628-2991

MySQL and a choice of shopping carts now come as standard with all new accounts.

SHOPPINGS E A R C H . S H O ' P . S A V E

WWW. Shopping .net

Page 94: Practical WebProjects 19

eCommerce What's on the disc

Look out forthe logo

Every time you see thislogo in the magazine,you can be sure ^at thefiles for the relevant

projert or a demo of theapplication you need tocomplete the project canbe found on your free CD.

All files for this project canbe found on the CD

D r e a m w e a v e rM X 2 0 0 4

As the weapon ofchoice for manyprofessiorwl developers,Dreamweaver has helpedto build some of the best

eCommerce sites on the

Web. The latest version of

the application is arguablythe most powerful siteeditor ever, boasting a

range of new featuresincluding secure FTP tools,PHP sen/er behaviours

and cross-browser

validation. Load up eitherthe PC or Mac demo from

the CD and turn to page28 for a guide to buildingthe perfect storefront for

your site in Dreamweaver

FireworksMX 2004

B Providing ttie perfeaaccompaniment toDreamweaver, the latestversion of Rreworks allows

you to create and manageall of your site's graphicswith relative ease. Our

guide to building deluxebanner adverts for yourstore, which you'll find onpage 38, proves wrfiy everynight is a Fireworks night int h e P W o f fi c e .

Find out how to get the most from your free CD!

What's on the discActinic Catalt 25 (v6.1) iSlTake your first steps to becoming a dotcom success bycreating a slick online catalogue with this powerful application

rom skateboard shops to purveyors of frilly underwear,

I Actinic Catalog has helped countless eBusinesses earn aprofit from the Web, and the full version of Catalog 25 on

the CD provides you with the perfect springboard to dotcom success.The fully-functional version of the eCommerce software on the

cover disc allows you to easily create robust, secure cataloguescontaining up to 25 products. Once you've built your product catalogueand created the site using the built-in templates, you can add orderprocessing facilities, shipping calculations, and everything you need tosell from your site. Check out our in-depth project on page 48 todiscover how to harness Catalog's powerful features to build yourselfa profitable store.

Register with Actinic at http;//shop.actinic.com and you can claim30 days free hosting for your online store, plus a free copy of the

A C T I N I C C A T A L O GeBook 85 Top Tips For SellingSuccessful Online. We're also offeringFWP readers the chance to upgradeto the latest unlimited version ofActinic Catalog, which supportsup to 10,000 products, for thes p e c i a l p r i c e o f £ 2 9 9 , "representing a saving of £80 off the normal retail price. For highervolume and more sophisticated sites you might want to upgrade toActinic Business, which adds customer account management, custompricing schedules and dynamic linking to an external database orspreadsheet. You can save £100 by taking advantage of the specialreader upgrade price of £699. Hurry though because both of thesespecial deals expire on 31 April 2004.

Quixelvideo Dreamweaver MX2004 video tutorialsDiscover the art of creating stunning Web pages by following this hour-longhands-on guide to mastering Dreamweaver

eaching methods have become a lot more civilised inrecent times, meaning that learning is a much moreinteractive experience, especially since the advent of

hands-on video training.The cover disc features 60 minutes of hands-on Dreamweaver MX

2004 video tutorials, courtesy of CD-ROM training specialistQuixelvideo, covering the latest version of Macromedia's popular Webeditor, including Fireworks integration. Flash media elements, CSSstyling and browser validation. Simply fire up your copy ofDreamweaver (there's a free trial on the disc), open the video tutorialsin QuickTime, and follow the on-screen instructions.

The Dreamweaver tutorials provide a taster of the CD-ROM trainingoffered by Quixelvideo, which includes hours of interactive primers ona range of Web building disciplines. The collection includes Flash MXCapabilities, featuring seven hours of video footage leading youthrough everything from video components to ActionScript and XMLexamples. There are also two Cleaner training videos - MasterEncoding with Cleaner XL and Master Encoding with Cleaner 6 for Mac,which provide hour-upon-hour of professional advice for mastering theintricacies of authoring Web video.

You can find out more about Quixelvideo's range of training titles byvisiting wvvw.quixelvideo.com, or emailing [email protected]

r : . - ^

(IUKTU}t i i i r i i i i i i n n i

— m94 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 95: Practical WebProjects 19

What's on the disc eCommerce

Help!What to do if you experience problems with the CDHaving problems getting your CD to work with your CD-ROM drive? Experiencing difficulties getting some of the programs or plug-ins torun? First of all, make sure you read any special instructions listed here or in the 'Read Me' file supplied with the application or utilitycausing the trouble. If this doesn't work, you can email our multimedia department for help at [email protected]. Our disc editorsalso field calls from the public on Wednesdays between 2pm and 5pm on 01202 200259. Please only call during these hours for help.

EROL 3 SmallstoreLine your pockets by setting up a great online shop withthis powerful eCommerce utility

Ithough there are many eCommerce products that allowyou to build and manage a robust catalogue of products,few can claim to give you the same control over the design

of your storefront than EROL.The program has long been a favourite among the design

community, because it applies no restrictions on store layout anddoesn't force you to apply store-wide templates, as is the case withmany other eCommerce packages. EROL also integrates tightly withDreamweaver, allowing you to export EROL templates to theMacromedia Web editor with ease. The program allows you to previewyour store offline, so you can hone its design before unleashing it onthe world.

The version of EROL Smallstore 3 on the CD allows you to get youronline business off the ground by building a complete store with up to10 products. The software is crammed with features such as automaticsecure online order retrieval, EU and International tax options, virtual

live stock control and theability to email individualor multiple customerst o l e t t h e m k n o w

the s ta tus o f t he i r

orders. EROL supports seven different payment service providers,including Barclays ePDO, PayPal, Netbanx and Worldpay

If you're pleased with the results you get after setting up an onlineshop with Smallstore why not take advantage of our great specialoffer to upgrade to EROL 3 Business Edition? This version applies nolimits on store layout and includes a number of improved eCommercefeatures. PWP readers can upgrade to the Business Edition for just£386.57 - a saving of £60 off the standard price. You'll even get a freeupgrade to version 3.5, available from April 2004. To take advantage ofthis offer follow the upgrade link from within Smallstore edition, or call0870 747 9141, quoting reference code HE404-PWP

Sawmi l l

■ Our project on page 70explains how easy it is toanalyse your eCommercesite using Sawmill. The CDincludes a full version of

Sawmill 5, worth £195, andwe've teamed up w/itJi the

developers to offer readersthe chance to upgrade tothe latest version at a

special rate. To qualify for a50 percent discount email

[email protected],call them on +44 (0)870 741

87^ or visit the Web site atv w v w. t h e s a w m i l l . c o . u k .

Remember to ment ion

Practical Web Pra/ecrs when

you order.

Dedicar t

1 Set up shopAfter registering your free copy of EROL, click onthe 'Build Manager' button. The Build Manager isdivided into four sections, each representing aframe on the finished page. Click the 'Pages' tab,enter a name for your shop and set the font size.

2 Edit the home pageClick on the 'Home Page' icon in the tree view onthe left. A panel will appear listing all of theobjects that appear on the home page. Click, onthe 'Welcome Text' message to edit it, andchange the introduction in the panel that appears.

3 Add imagesYou can insert an image or logo by clicking the'Add Display Item' panel on the left of the window.The right-hand screen will switch to the item'sproperties. Type a name and press 'Browse' oradd some HTML to insert an image into the page.

4 Describe your siteClick the 'Home Page' icon in the 'Store Pages'view and then on the 'Scripts' tab on the right.Press 'Meta tags' and enter a description of yourstore, followed by some keywords to help yoursite get highly ranked on search engines.

5 Backgrounds and coloursClick on the 'Properties' tab to change thebackground image or colour of the site Press'Browser' to insert a background image, or selecta colour from the drop-down list. Alternatively,press the 'Palette' button to choose a colour

6 Building up pagesTo start inserting product pages into your store,click the 'Pages' tab and highlight the 'Home Page'icon to access the tools. You can add a new pageby clicking the Add Page' button, then use thecontrols to edit the name and background colour.

H Your cover CD includesa demo of Dedicart Lite, a

mighty eCommerceapplication featuringeverything a businessneeds to buiid, design, andmanage a sophisticatedonline store. Boasting otherspecialist tools such asaffiliate tracking, stockcontrol and product reviews

ready to plug-in as your sitegrows. To find out more, orget hold of the full versionof the shopping cart appv i s i t w w w. d e d i c a r t . c o m o r

call 0870 747 4005.

Clickcart Pro

I Processing paymentsfrom your Web site is adoddle thanks to Click Cart

Pro, as you'll have probablydiscovered from the projerton page 58. The 15-day trialversion of the software on

the CD allows you to sellfrom your site by acceptingall major credit cardprocessors, and gives youthe ability to process ordersoffline. To find out more

about the software, visrt

www.clickcartpro.com

eCOMMERCE I PRACTICAL WEBPROjECTS 195

Page 96: Practical WebProjects 19

eCommerce What's on the disc

Site buildingut i l i t ies

■ Besides the fullversions and demos on

the CD, we've also

squeezed on a collectionof freew/are and

shareware eCommerce

utilities for PC and Mac

users. Anvong the

programs included arepassword managementtools, link checkers, metatag optimisers, HTMLeditors and Web log

analysing utilities.

ShopFactory Light v4Start selling online today with your free full version ofthis popular eCommerce application

I f you're looking to get your first break In eBusiness anddon't want the hassle of having to spend hours chained toyour desk then look no further than ShopFactory Light.

The program represents the ideal introduction to the world ofeCommerce, supporting one shop department with up to 50 differentproducts. No programming skills are needed, because everything canbe achieved within the program through a series of easy-to-use yetpowerful wizards, which allow you to customise the look of yourstorefront and add products and multimedia links with point and clicksimplicity You can even define tax and shipping regions to allow theshop to calculate tax and shipping costs for your customers.

There's a fully working version of ShopFactory Light v4 on the coverCD, which you can install by running the '.exe' file and following theon-screen instructions. In order to activate the full version, click on the

'Register' button while connected to the Net, before completing theonline form. The details are needed to unlock the software and the

relevant code will then be emailedto the address that you registeredwith on the site.

We've teamed up withShopFactory's developer to offerPWP readers the chance to

upgrade the program and save30 percent on the cost of thelatest ShopFactorysoftware. This means you canupgrade to ShopFactory Pro for just £171.90, ShopFactoryDeveloper for £410.42; Sales Manager for £111.03; Import Wizard 5 for£88.83; Language Link for £204.80; or ShopFactory International Editionfor £574.92.

To take advantage of this incredible offer contact ShopFactory UK bycalling 01959 578383 and mentioning Practical Web Projeas.

' - 3 m .—

i t M U M T

u 1 ;

r = r - i ^

i

1 w m m v 9 L W n u ra m

■» M

1 Configure your storeGetting started with ShopFactory is easy thanks toits configuration wizard. After launching theprogram, the first step is to enter the name ofyour store, plus a short description of what yourbusiness is all about before clicking 'Next'.

2 Choose a styleNow you need to decide upon a layout for youronline store Select a style by scrolling through the

preset templates available and pick one byhighlighting it. Registered developers can createtheir own shop styles for more variety

3 Customise your stylesAfter choosing a language for your site from thelist displayed, you can modify the layout of yourproduct catalogue using the 'Display Styles' menu.Here you can change the text size font andbackground texture of your storefront.

Project files

Ail of tfie files needed to

complete the eCommerceprojects in this issue of PWPhave been included on the

cover CD:

28-36 Design a storefront38-39 Create a banner ad

40-41Pop-up masterclassW- 4 6 A d d a d a t a b a s e

48-55 Build an Actinic store

66-69 Set up a mailing list72-7S Get on search engines

) — w w a f s y

esf

p V V 5 v - v v r

&

i m f m

1 1

M

4 Choose a button styleNext, pick a button style from the list displayed inthe 'Next Wizard' menu. There are several differentbuttons available, and you can view each one inthe 'Preview' window, before clicking 'Next' toconfirm your selection and move on.

5 Shop settingsThe next menu allows you to configure thelogistics of your online store. This includesconfigure the currency weights, discounts andcookie settings. You can even add meta datasuch as descriptions and keywords. Click 'Finish.

6 Add productsRight-click on the 'Department' field in the treemenu structure and click 'Add Item' to start adding

goods to your catalogue. You'll be invited to insertan image of the product, along with a descriptionand pricing information.

96 I PRACTICAL WEB PROIECTS I eCOMMERCE

Page 97: Practical WebProjects 19

ON SALE NOW!interne t » FreeHand • Photoshop • Flash animation . Droamwoaver > eCommerce > PHP

WBU>esign»THE ULTIMATE RESOURCE FOR WEB DESIGNERS Luinmius^ mpc.tr /

D R E AP OTap into Dreamsccrcts and getawe-inspiring

FULLY-WORKINGSOFTWARE WORTH £36-xtreemesitexpertTi" " t i m eWith ifHs must have software (PC)

PLUSrESSEWflABUILDING RESOURCES

FREE WrTH PRACTICAL INTERNET WEB DESIGNER 91

T Vr O R I A L F I U S :Must have resources toMp you get tf>« mostfrom our P*|>ert projtfK ts

R BUILDING THE[l WEB'S FUTURE

1 Discover how Fantasy' Interactive builds the most> i n n o v a t i v e s i t e s o n t h e W e b

• f i x o i o . f l n i h i i G

More than 50 pages of in-depth Web design tutorials in every issueEssential advice from leading Web professionals and experts

Developer workshops to help you stretch your Web design skillsInspirational interviews and profiles with successful Web designers

To order call 01454 642442 or email [email protected]

Page 98: Practical WebProjects 19

Sounding off... Andy Houldsworth

...wSOUNDING OF

ANDY HOULDSWOR'Having created eCommerce solutions for companies ranging fromfootball clubs to jewellery merchants, Digital Ink's managingdirector Andy Houldsworth knows how to build an effectiveonline store. We find out what makes his shopping carts tickWhat VKfe the major mistakes that online firmswere malting when the dotcom bubble burst?I think that the business models were so

experimental and so wacky it was bound to happen.For example, we heard of a company that built aneCommerce site to sell Coffee to traders In the city attheir desk, by bringing the coffee in by bicycle. Wealso saw the vast majority of the venture capitalbeing spent on advertising rather than infrastructure,because the VC companies often got their moneyback on the moment the company floated. So theydidn't stay around afterwards to see if the businessconcept worked.

What key elements should a designer considerwhen putting together an eCommerce site?The most important aspect is to have a simple, easy-to-use user Interface. We have built a lot of sportssites - including Premiership football and rugbyclubs, and unlike visitors to a commercial Web site,they give immediate feedback if they are able to useor find something quickly This feedback has helpedus in our commercial site development wherecustomers can often simply give up and leave if theyface a confusing array of choices.

Digital Ink creates online stores for many businesses, working from avariety of needs and briefs

Which of your own eCommerce sites are you mostproud of and why?I think that Spabreak (www.spabreak.co.uk) is acontender because it has a complete bookingmanagement system for spas and health farms, ourclient has control over all content and pictures andeven the meta tags. On the sports side I wouldchoose Charlton Athletics' shop (www.cafc.co.uk)because the club has a great range of products andgot us really good photography, which makes it easierto look good.

How do you ensure that the site attracts as manycustomers as possible through search engines?We build the sites with as many graphics as possiblealt-tagged and store them in folder names that reflectthe key search phrase. We also use the search phraseto name the '.ess' files and the '.js' files to increasekeyword density. We also use 'robots.txt' files, andmake extensive use of meta tags.

What software do you favour when creating anonline store and why do you like it?We manually code everything in ASCII text editors. Iknow it sounds old-fashioned but I can see no realbenefits in speed terms in using WYSIWYG Websoftware if we are trying to build bespoke sites. Wehost our own servers locally on Win2000/2003, Linux,Unix and even Mac. We also have written sites in anumber of middleware and database packages,including PHR ASP ColdFusion, and Lasso.

Do you prefer to build your own shopping cart orintegrate a pre-built solution?We always build our own. We have used off-the-shelfsolutions for clients who insisted upon it but we willcustom-build shops and shop management systemswhen they work the way the client wants it to andthe client doesn't have to adapt their products.

C H A R L T O N A T H L E T I C

m o

" i

1 11 1 W « K » m « 1 0 t M U l t i t t m

9 u p « t « t 0 r * l l i i n o w p « M l M d

•up«r«sriiiTh«Vfil«t Ournl» r d « n n « M i * m w f c M

• n r t t M p f r t » l « « T w

r t n i i u i i i A M M a

1 1□1 1

r m f W I f F r f c i w o n U / V 9 4 4 $ u

« * < * £ ! ! £ !■

□n1 1

[ = ]

Charlton Athletic's online shop benefited from the impressive artworkgiven to Digital Ink in creating its store

How do you enable a client to maintain theironline store once it's been completed?Since 1999 virtually all of our site development hasincluded a content management system. All oureCommerce sites have product editors allowingclients to edit prices. They can easily take an item outof stock. They can also remove a single colour or sizeof item out of stock. We also build secure cardmanagement systems and sales reports that showthem easily which products are selling and the totalvalue of sales.

What's the best piece of advice you can give tosomeone looking to build their first online store?Make sure you get paid a proper fee for the job.Make sure you pay a proper fee if you are thestoreowner. Building an online shop is the same asbuilding and fitting out a shop in real life. Making theshop easy to find is just as important, so you needsearch engine optimisation. Making it obvious whatyou are selling when somebody looks in the windowis also important as is making it easy to get in andfind the products. You should also ensure that ordersare processed quickly and easily and that you alwaysknow who your customers are and what theirrequirements are.

Andy Houldsworth is managing director of Digital Ink(Solutions) Ltd. For more information of theeCommerce sites fashioned by the agency, visit theirhome page at www.digital-ink.com

Practical Web Projects issue 20 On sale 29 April 2004Available from all good newsagents or by calling 0870 444 8682

98 I PRACTICAL WEBPROfECTS I eCOMMERCE

Page 99: Practical WebProjects 19

\

\

V 2 1 S T A N D A R D

2 2 4 H o u r s p m' I n p"M I I I I ' ? I I I . I s ■ I 1 •

j n

4 H o u r c u t o f fyou can redial straight away

Techn ica l Suppor ta t l o w N a t i o n a l R a t e c a l l c o s t s

t I

I Support for modemstandards upto V90 & 64k ISDN

Online account managementv i a s e c u r e c o n t r o l p a n e l ;

VISIT: www.v21.co.uk or call the sign up hotline on:

080010^9 21 21I ^

Page 100: Practical WebProjects 19

The UK's Better ValueDomain HameRegistration ServiceINCLUDED WITH EVERY DOMAIN AT NO EXTRA COST:

O FREE UNLIMITED EMAIL FORWARDINGSet Up To 100 Email Addresses

O FREE WEBSITE FORWARDINGBanner Free Cloaked or Standard Forwarding

O FREE DOMAIN PARKINGReserve your Domain until you need to use it

OFREE EXPERT SUPPORTBy Email & Telephone

OFREE ONLINE CONTROLExclusive Domain Management Tools

jfull list of available domains_ W Wv i s i t w w w . s i m p l y . c o m -

. c o . u k . c o m. m e . u k . n e t ; ^ . i n f o.org.uk .orgg^^^£ 2 . 8 9 [ 9 9

P E R A N N U M PER ANNUMfiER NmcmDEsmaiiEBisTm FEES

The European Domain Specialists

V s

" As usual, your service was

excellent and that's why Irecommend www.simply.com

to everyone who needshosting & domain names"

Sarah Baker, Success PR.

.dk. c o . u k

. e s

Quality Hosting - Great Prices!

European Domains""Svailableitfom:

lTAN^

lin prices per year-

^ANNUM

2 Year Term + VAT Applies

O THE SIMPLY GUARANTEEFor Maximum Peace Of Mind

O ONLINE CONTROL PANELFor Complete Account Management

© FREE EXPERT SUPPORTBy Telephone & Email

O POWERED BY THE SIMPLY.NET NETWORKFor Maximum Uptime

Email & Web Hosting Plans:

INKTOMI QUICKSUBMIT

125 search enginesevery 48 hours...

visit www.simply.com for more

f r o m £ 3 . 9 9 p/l t l

M u l t i - D o m a i n R e s e l l e r P l a n s :

f r o m £ 1 9 . 9 9p / m

All plans payable annually: Set-Up fee • £9.99 + VAT Applies

TEL: +44 [0] 1684 893020EMAIL: [email protected]

www.simply.com

r . c o m' simply' & simplynet are registered trademarlts of Simply.Com LtdSIMPLY.COM LTD. Enigma Commercial Centre. Malvern. WR141JJ . UK