Y9 IPT Drupal Incursion One Day to eCommerce Ross Parker For 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 ProjectOur ProjectReal World Project TeacherTeacher + ClientClient DidacticDialecticDialectic (Socratic) Imposed outcomesNegotiable imposed outcomesNegotiated outcomes Clear guidelinesFrameworkNo guidelines GroupTeam SimulationReal GradesGrades + AltruismPayment Fixed lifeFixed life + continuationOpen-ended ConvergentConvergent & Divergent

All the materials used today are available online in the Resource Package at:

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: – e.g.

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/StartPort ableApps.exe Click on the app you need

FTP with Filezilla Connect 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 All 5.Follow prompts 6.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 (

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/the mes/ 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/module s/ 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?

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 Home Page Shipping Information Contact Us About Us 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 ( – – 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 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:

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