Upload
abner-leonard
View
222
Download
2
Tags:
Embed Size (px)
Citation preview
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.