Y9 IPT Drupal Incursion One Day to eCommerce Ross Parker For North Sydney Boy’s High School...

Y9 IPT Drupal IncursionOne Day to eCommerce

Ross ParkerFor North Sydney Boy’s High School

April/May 2010

2

0. Orientation

I bring to you an extremely difficult challenge...

Do you have what it takes to succeed? You brains may

swell and hurt...

Today you will work in teams to build a working eCommerce

website for a client (represented by me).

Does this sound difficult?

My job is to guide and teach you, but I will not give you all of the

answers.

Problem solving is one of the most valuable skills in IPT.

You will need to work with your teammates: an individual

cannot complete this task in the allocated time.

Communication, consensus, responsibility, specialisation,

commitment, trust.

Describing This Project

Normal School Project Our Project Real World Project

Teacher Teacher + Client Client

Didactic Dialectic Dialectic (Socratic)

Imposed outcomes Negotiable imposed outcomes Negotiated outcomes

Clear guidelines Framework No guidelines

Group Team Team

Simulation Real Real

Grades Grades + Altruism Payment

Fixed life Fixed life + continuation Open-ended

Convergent Convergent & Divergent Convergent & Divergent

All the materials used today are available online in the Resource

Package at:

http://tinyurl.com/onedayecommerce

9

2. About The Client

• touchIt:– is a startup

• small, new, moving quickly

– aims to sell iPhone and iPod Touch accessories– requires an online presence ASAP, including:

• a stylish home page• an online shop• 3 other pages, such as About Us or Contact

– current has 11 products in catalog• see “Client Materials” folder in resource package

– will award the contract to the best team–

11

2. How To Build A Website

3 Approaches to Websites

• Hand coding– Slow, precise, unconstrained, expertise required

• WYSIWYG– Quick, constrained, sloppy, no expertise required

• Content Management System– Very quick, unconstrained, middling expertise– Different systems for different needs:

• Drupal• Joomla• WordPress

How many of you have hand coding experience?

In my experience, using a CMS is the best approach.

But hand coding skills are important if you want to get the

most out of your CMS

Drupal is my Preference

• What is Drupal?– Web-based content management system that

allows users to post to a website.

• Why was Drupal chosen?– Free (speech & beer)– Generative– Challenging– Highly Productive– Collaborative– It can do (almost) anything...

Posts are also called nodes. By default, users can post either a story or page, but it is easy to build other node types, such as

product.

Who makes Drupal, and why do they give it away?

Our Server Environment

• Hardware• Apple MacBook Pro

• 2.26 GHz Intel Core 2 Duo• 2 GB DDR3 RAM• 16 GB thumb drive (instead of internal storage)

• Software• LAMP Stack

• Linux (Ubuntu GNU/Linux 9.10 Karmic Koala)• Apache• MySQL• PHP

16

3. Basic Skills

I am going to introduce some ideas to you that are vital to the rest of the day’s exercises. Take notes as

a team.

I will not repeat this information.

Accessing Your Drupal Install

• Each team has their own install to use• Point your browser to:

• http://[ipaddress]/team[number]• e.g. http://10.1.1.22/team1

Logging Into Your Drupal Install

• On the homepage enter your:• Username: root• Password:

team[number]• Once logged in, change your

password

Collect Your USB Drive

• Each USB drive contains:• Client Materials

• Catalog, product images, logo• Drupal modules• Portable Apps

• FTP• PeaZip• GIMP• Firefox

Portable Apps

• Allows you to run apps with no install

• To run:• Access your USB drive• Launch

PortableApps/StartPortableApps.exe

• Click on the app you need

FTP with FilezillaConnect to the FTP server:

Host: [ipaddress]Username: team[number]Password: team[number]

Navigate the server’s file system. Your files are stored in

/var/www/html/team[number]

Navigate the file system of your PC. You can upload files from one

side to the other

Drupal themes and modules come as .tar.gz files. Tar creates an archive. Gz compresses the archive.

.tar.gz with PeaZip

To extract .tar.gz with PeaZip:1.Drag and drop the .tar.gz file into PeaZip.2.Select Yes.3.Right click on the .tar file shown in the main panel.4.Select Extract All5.Follow prompts6.You now have a .tar file: repeat the above process to extract the files.

24

4. Building Up The Site

Here we will start to work on the site.

You will need the skills and techniques from the last

section.

Change Site Name

• Do the following:• Click Administer in left hand side menu• Click Site Information under Site

Configuration section• Enter “touchIt” into the Name field• Enter a Site Slogan• Press Save Configuration

Upload Logo

• Do the following:• Click Administer in left hand side menu• Click Themes under Site Building section• Click Configure against the Gardland theme• Unselect the Site Name checkbox• Under Upload Logo Image, upload

“touchIt Logo Small.png” the USB drive.• Press Save Configuration

This logo was made with Logo Creatr (http://creatr.cc/creatr/)

Create Place Holder

• Placeholder: temporary content for the home page• Do the following:

• Click Create Content in left hand side menu• Click Story• Give the story a Name and enter some

suitable Body text• Ensure Published to front page is checked

(under Publishing Options)• Press the Save button• Click on the site logo to return home

How Your Site Might Look

Themeing

• Themes: allow you to customise look and feel of your site

• Do the following:• Search the Web for a free Drupal theme• Download the theme (.tar.gz)• Extract the theme (folder)• Upload the theme to

/var/www/html/team[number]/sites/all/themes/

• Enable and Default the theme under Administer > Themes

How Your Site Might Look

After changing theme you will need to reset your logo and turn on Site Slogan.

You may also want to edit the logo to better fit the space available.

Users, Profiles, Roles, Permissions

• User: any person who can access your site• Profile: information stored about a user• Role: groups of users who can do different things:

• Anonymous users• Authenticated users

• Permission: an action that the site allows users to perform

• At the moment your site has one user: root

Users, Profiles, Roles, Permissions II

• Do the following:• Create a new role called admin• Assign the role all permissions

– Later, as you add modules, you will need to add more permissions to the role.

• Create a new user for each member of your team

• Stop using the root account, and use your own!

– If you want, look at the User settings page

Modules

• Modules: allow you to customise the functionality of your site

• Do the following:• Get the token, pathauto and admin menu

modules from the USB drive (.tar.gz)• Extract the modules (folder)• Upload the modules to

/var/www/html/team[number]/sites/all/modules/

• Enable the themes under Administer > Modules• Assign new permissions to admin role

Modules II

• Can you find out what these modules do?• Hints:

• Token does not do anything you can see, but it is used by pathauto

• Pathauto relates to URLs: try creating a new story and compare it’s address to the first one you created.

• Admin menu will speed you up!• Someone on your team might want to search for

useful modules on the web.

Planning And Making Decisions

There are tools to help us, but how can

we plan when we lack knowledge?

http://en.wikipedia.org/wiki/File:Pert_example_gantt_chart.png

Site Structure

• It is important to consider the structure of your site:– What pages do you have and/or need?– How are pages related to each other?

• For implementing site structure, Drupal offers:– Menus: structured groups of links– Taxonomy: ability to categorise and connect

• We will explore this more with Ubercart

38

Site Structure II

HomePage

ShippingInformation

ContactUs

AboutUs

Our Team

Site Structure III

• Teams should now:– Determine what pages are required (not including

the online shop)– Add the pages, and give them content

• You can use Lorem Ipsum if you like (– http://www.lipsum.com

– Put links for these pages into the Primary Menu• Also add a link to the Home Page

– Make the Primary Menu visible on the site

How Your Site Might Look

To make the home page cleaner Post Information has been turned off (e.g. who posted and when). This can be done from

Administer > Theme > Configure

To make the home page more attractive, an image has been added to the

Welcome to touchIt story. The Upload module allows images to be attached to

posts, where they can be displayed using the HTML <img> tags.

What’s Happening Behind the Scenes to Produce this Page?

42

5. Advanced Topics

Ubercart

• Ubercart: a module providing a shopping cart environment

• Before installing Ubercart, we need to install some prerequisites:– CCK– Image handling

CCK

• CCK: allows new fields to be assigned to posts• To install CCK:

– Extract and copy the CCK, filefield and imagefield modules to your modules directory.

– In Administer > Modules enable content, filefield, imagefield, number and text

Image Handling

• These modules allow Ubercart to manipulate and display images

• To install:– Extract and copy the imageapi, imagecache and

thickbox modules to your modules directory.– In Administer > Modules enable image API,

image API GD2, imagecache, imagecache UI and thickbox

– Under Administer > Store Administration > Configuration > Product Settings set the Product image widget to thickbox

Ubercart II

• Now we are ready to install Ubercart• To install Ubercart:

– Extract and copy the ubercart module to your modules directory.

– In Administer > Modules enable cart, conditional action, order, product, store and catalog

– Assign all relevant permissions to the admin role.

Ubercart III

• Ubercart has:– Created a new post type called Product

• This allows the creation of individual products

– Used CCK to assign fields to Product– Created a taxonomy called catalog

• This allows products to be categorised

Creating Product Categories

• Look at the product catalog provided by the client:– USB Drive > Client Materials > touchIt Catalog.xls

• As a team, decide on product categories, so you can fit each item into at least one category, then:– Under Administer > Taxonomy click on Add Terms

against Catalog– Add one term for each of your categories

• Add an image to each term to make the site more attractive

– Click on List to view your categories

Creating Products

• You can now create your products using the details given in touchIt Catalog.xls

• To add a new product:– Click Create Content > Product– Enter the product details

• You can upload multiple images

– Press Save

Make Your Catalog Public

• You can now add a catalog link to your Primary Menu, to allow users to access your catalog:– Administration > Menus > Primary Menu– The path for the catalog is simply “catalog”

• Click on the link and check out your store!

More Things To Try

• Enable checkout and credit card payment• Use the Test Gateway for credit cards

• Display a cart block on all pages• Create and set a favicon• Modify your theme

• Use CSS• WYSIWYG interface for text areas• Use jCarousel to build a homepage product

slider

How Your Site Might Look

53

6. Conclusion, Q&A, Feedback

Conclusion

• How do you all feel?• Drupal is not easy...

• ...but it makes development incredibly fast and flexible

• Teamwork is crucial...• ...especially as projects grow

• In this case, the client’s needs were clear...• ...generally determining such requirements is time

consuming and fraught with danger

• How does this all tie into the information process?

Q&A

• Now’s the time to ask any questions you might have...• ...building website and web applications• ...using Drupal• ...running LAMP (Linux, Apache, MySQL, PHP)• ...working in IT professionally• ...using Open Source Software• ...the meaning of life

Feedback

• I would love to know what you made of today’s session:

http://tinyurl.com/onedayecommerce

Licensing• All original work used here is licensed under the Creative Commons Attribution-Share Alike 3.0

Unported license. For more details please look at http://creativecommons.org/licenses/by-sa/3.0/.

• This license has been chosen to permit a high degree of sharing, whilst protecting the author’s control as to how the content is used.

• Please respect this license and use accordingly!• Recycled and borrowed works from other sources are used under appropriate licenses, which

are not affected by this license. The original source is always given. • All original work created by Ross Parker (Sha Tin College, English Schools Foundation, Hong

Kong), except where specified.