Description

An intense and rigorous course in core web-related technologies, Designing for E-Commerce will provide the student with a thorough, hands-on approach to creating a hand-coded web site with e-commerce functionality. Using UNIX’s command line client to manipulate a web stack, each student will acquire facility with the Apache server, MySQL, PHP, HTML, and CSS.

Prerequisite

Multimedia Tools (WMM 602) is the prerequisite for this required course. In that class, you should have acquired a working knowledge of HTML and CSS. To establish a level HTML-and-CSS playing field, a thorough review of these languages will take place during the first month of class.

Objectives

  • You will learn to hand-code a Web site that fully conforms to the standards for XHTML 1.0/HTML5 and CSS2.1/CSS3.
  • You will acquire a deep understanding of how front-end, Web-based technologies interact with each other.
  • You will understand how back-end, server-side computer languages interact with each other, and with front-end languages, such HTML and CSS.
  • You will acquire an advanced beginner knowledge of MySQL, PHP, and JavaScript.
  • You will acquire a thorough comprehension of user interace, or UX, interaction.

Topics Covered

The following is a list of topics that will be covered in class, time permitting. They will not be covered in this order.

  • What is the Internet?
  • What is an ISP?
  • How do browsers and servers communicate?
  • What is Apache?
  • What is MySQL?
  • What is PHP?
  • MySQL and PHP for client-server interaction
  • What is a client-server architecture?
  • Configuring a WAMP/MAMP stack
  • The Document Object Model, or DOM
  • SSI
  • Forthcoming
  • Good coding style
  • Human coding vs IDE-based coding
  • Authoring compliant code for XHTML and CSS
  • XHTML
    • Semantic markup with XHTML
    • The difference between XHTML and HTML
    • Forms
  • An introduction to JavaScript
  • An introduction to CSS
  • An introduction to PHP
  • An introduction to MySQL
  • Collecting, analyzing, and using visitor data

Schedule

  • Where: Mac lab (room 207), Graduate School of Technology, Touro College, 43 W 23rd St (map)
  • Day: Wednesday
  • Dates: 6 February 2013 — 22 May 2013
  • Time: 6:15 PM — 9:15 PM

A 5-minute break will be given at the halfway point of each session.

The Topics section lists the material we’ll cover during the week that intersects the table along the left column, and the Homework section lists the homework due the following week. For example, on 6 February 2013, week 1, I’ll introduce the course, along with other web stack related concepts, and you need to read everything in our textbook from the preface to page 15, then answer questions 1 – 13 on page 15 for 13 February 2013 — week 2.

Every week, you’re homework will consist of reading the textbook, writing code, and answering questions at the end of each chapter. Your homework questions are neither graded nor collected, but the answers will be addressed at the beginning of each class.

Note: when reading the References section of the book, ignore and avoid any suggestions to use www.w3schools.com as a reference. You’re also advised to bypass any links suggested by Google in a search query. The site publishes many errors, and its popularity propagates these errors significantly through the Web. By not clicking on any Google search results, you’re helping to reduce the popularity of the site.

WeekTopicsHomework
One
(6 Feb 13)
  • Course introduction
  • Configuring a CLI
  • Configuring a WAMP/MAMP web stack.
  1. Read the preface, pages xvii – xxv
  2. Read Typographic and Other Conventions, pages xxv – xxvi
  3. Read Chapter 1, Setting The Scene, pages 1 – 15
  4. Answer questions 1 – 13 in the section Quick Questions To Test Your Basic Knowledge on page 15.
Two
(13 Feb 13)
  • HTML and XHTML
  1. Read Chapter 2, Establishing a Web Presence, pages 23 – 34
  2. Read Chapter 3, XHTML for Content Structure, pages 44 – 71
  3. Answer questions 1 – 11 in the section Quick Questions To Test Your Basic Knowledge on page 34.
  4. Answer questions 1 – 19 in the section Quick Questions To Test Your Basic Knowledge on page 72.
Three
(20 Feb 13)
  • More HTML and XHTML
  1. Read Chapter 4, CSS for Content Presentation, pages 84 – 71
  2. Answer questions 1 – 21 in the section Quick Questions To Test Your Basic Knowledge on page 130.
Four
(27 Feb 13)
  • More HTML and XHTML
  1. Read Chapter 5, XHTML Forms for Data Collection and Submission, pages 144 – 167
  2. Answer questions 1 – 11 in the section Quick Questions To Test Your Basic Knowledge on page 167.
  3. Study the first three chapters of the textbook. Make sure you’ve answered all the questions under the section Quick Questions To Test Your Basic Knowledge in each of the first three chapters. And, go over your notes from class — repeatedly. All this material is fair game for the first exam next week.
Five
(6 Mar 13)
  • Exam I
  • Finish HTML
  1. If you haven’t already, finish reading chapters 1 – 5.
  2. By this point in the course, you should be very clear about your final project. As such, it’s time to create the user interface, or UI, and the user experience, or UX, of the web site you’ll be building. To do so, you’ll either create your diagrams by hand with pencil and paper, or you’ll use wireframing software. Mashable has published a list of ten wireframing tools — some free, some paid. Sketch out — if you’re using the pencil-and-paper approach — or print — if you’re using software — the entire UI of your site, and document the UX for next week. Both are due next week in hardcopy form. Only wireframes submitted according to the following rules will be accepted:
    1. Printed on 8½" × 11"
    2. Stapled together
    3. Name appears on the first wireframe page
Six
(13 Mar 13)
  • Return first graded exam
  • Review first graded exam
  • CSS - session I
  1. Read Chapter 6, JavaScript for Client-Side Computation and Data Validation, pages 171 – 217
  2. Answer questions 1 – 21 in the section Quick Questions To Test Your Basic Knowledge on pages 218 – 219.
Seven
(20 Mar 13)
  • CSS - session II
  • Organizing your web site files
  1. Convert your wireframes into a web site, which is due on 3 April 2013 for the first code review. (The code review requirements are listed under the Code Reviews section below.) Come to class prepared to submit your work according to the following instructions:
    1. Put all your files and folders into one folder.
    2. Name the folder according to the following algorithm:

      last_name-code_review1-wmm_603-spring2013

      where last name is obviously your last name. Note: there should be no spaces in your folder name.
    3. Compress the aforementioned folder into a ZIP or TAR file. You can do this from your CLI. For example, student Gustavo Dudamel would run the following command (click the command to copy it to your clipboard):

      tar cvf dudamel-code_review1-wmm_603-spring2013.tar dudamel-code_review1-wmm_603-spring2013

      If Gustavo carried out the tar command successfully, he would have a file called dudamel-code_review1-wmm_603-spring2013.tar in the same folder as dudamel-code_review1-wmm_603-spring2013. This is the file he’d submit for his code review.
    4. Upload your compressed folder into the Google Drive folder I assigned to you. This is the only method I will accept for submission of this project.
Eight
(3 Apr 13)
  • CSS - session III
  1. Catch up on your reading
Nine
(17 Apr 13)
  • Code review I due
  1. Read Chapter 9, MySQL for Server-Side Storage, pages 309 – 359
Ten
(24 Apr 13)
  • Code review I returned
  • Forms
  • PHP
  • MySQL
  1. Read Chapter 8, PHP for Server-Side Preprocessing, pages 259 – 299
Eleven
(1 May 13)
  • More PHP
  • More MySQL
  1. Read Chapter 10, PHP and MySQL for Client-Server Database Interaction, pages 367 – 436
Twelve
(8 May 13)
  • Login, logout, and sessioning using PHP and MySQL
  1. Begin — if you haven’t already started — studying for the final exam. Seriously consider creating a study group.
  2. Begin — if you haven’t already — preparing your final presentations for 29 May 2013. In other words, continue developing your final projects.
Thirteen
(22 May 13)
  • Final presentations
  1. Your final exam on 29 May is cumulative. Make sure you know the following:
    • The DOM tree.
    • Applying Divine Proportion To Your Web Designs.
    • The four CSS combinators.
    • The difference between block-level and inline elements.
    • The difference between normal and important CSS declarations.
    • The CSS cascade.
    • The difference between block-level and inline elements.
    • Content- and physical-based styles.
    • Semantic markup.
    • Why wireframe?
    • The different image types supported by browsers.
    • PHP concepts discussed in class.
    • MySQL concepts discussed in class.
  2. Your projects should implement the following, at the very least:
    • A login component, featured prominently on your home page according to layout conventions. (Remember to use session_start() and the $_SESSION array to set variables indicating a successfully-logged in user.) Logging in to your web site should take the user to a home page that may only be accessed by members who are logged in to your site. For example, if I visit home.php at your web site and I’m not logged in, I should be redirected elsewhere.
    • A logout feature that destroys the current session (session_destroy()).
    • A registration feature that allows new users to register for an account on your web site.
    • A purchase/add member feature that allows users to add an item to their shopping cart or a person to their social circle.
    • A shopping cart/social circle snapshot that keeps track of items purchased or people with whom you’re connected.
  3. Prepare your projects for code review submission as follows:
    • The datastore (database) should be called store.
    • The datastore username should be username and password should be password.
    • The datastore file that you dump from MySQL should be called store.sql.
    • Only submit what is required for your projects to run. You will lose points for submitting superfluous files.
    • Refer to the enumerated list for class Seven on how to submit your project to the Google Drive, replacing any mention of code_review1 with code_review2.
Fourteen
(29 May 13)
  • Code review II due
  • Final exam

Textbooks

Only Web Programming and Internet Technologies: An E-Commerce Approach is required for the course. The CSS3 and HTML5 books are suggested. All assigned readings from the required text are listed under the Schedule section above.

[Cover image of Web Programming and Internet Technologies: An E-Commerce Approach.]
Title: Web Programming and Internet Technologies: An E-Commerce Approach
Edition: 1
Author: Porter Scobey and Pawan Lingras
ISBN 13: 9780763773878
Reading: REQUIRED

A digital copy of this text is available as a rental from CourseSmart® for $75.00. You’ll have access to the book for six months, and you can print its contents once.

The textbook itself—new—is about $150.00 from most online retailers.

We’ll start working from material in this book from the very first class, so make sure to purchase it during the first week of classes.

Note: when reading the References sections, ignore and avoid any suggestions to use www.w3schools.com as a reference. You’re also advised to bypass any links suggested by Google in a search query. The site www.w3schools.com publishes many errors, and its popularity propagates these errors significantly through the Web. By not clicking on any Google search results, you’re helping to reduce the propagation of incorrect information about web programming on the Web.

[Cover image of The Book of CSS3.]
Title: The Book of CSS3
Edition: 1
Author: Peter Gasston
ISBN 13: 9781593272869
Reading: SUGGESTED

A good, clear, concise guide to CSS3.

[Cover image of Introducing HTML5.]
Title: Introducing HTML5
Edition: 2
Author: Bruce Lawson and Remy Sharp
ISBN 13: 9780321784421
Reading: SUGGESTED

A nice, approachable book on HTML5.

Assigned Readings

All assigned readings are listed under the Schedule section above.

Announcements

13 March 2013
I will not hold office hours on Wednesday, 3 April 2013.
26 February 2013
The schedule has changed, per our conversation in class last Wednesday, 20 February. Specifically, our last class is now 22 May 2013. Check the Schedule section for more.
6 February 2013
Only the most important announcements will appear here. Most announcements will be posted to our internal Google group.
21 January 2013
If you have a laptop, bring it to the first class.

Hardware and Software Requirements

In terms of hardware, a computer running Windows, Mac OS X, or Linux will accommodate your web programming software without a problem. A Windows-based machine, however, will prove more difficult to set up. We’ll discuss this in class.

All the software you’ll need for this course—listed below—is free. However, if you find any of it useful, now or in the long run, you’re encouraged to donate to the developers.

Browsers

Download all the browsers available at Browse Happy.

Text Editor

The code you write will require a text editor. And, although Dreamweaver will suffice, a plain text editor will allow you to focus on code and not on the complexities of an IDE. Mac users should download TextWrangler and Windows® users should download Notepad++. Both are free.

A Command Line Interface

If you’re using a Macintosh or a variant of Linux, then you have The Terminal command line interface, or CLI. You won’t need to download any third-party software.

If, however, you’re using Windows®, download Cygwin, a UNIX-like CLI for Windows®.

A Syntax/Language Checker

HTML Tidy is a CLI-based syntax checker for your HTML/XHTML code. Download the appropriate version of Tidy for Linux, Mac, or Windows.

Web Developer Tools

Chris Pederick’s Web Developer Firefox add-on is a helpful XHTML/HTML and CSS debugging tool.

A Link Checker

The W3’s Link Checker utility verifies links on a web page so you don’t have to.

A Compression/Decompression Utility

If you’re using Windows® and you don’t have a compression/decompression utility, download 7-Zip, which is free and open source. (Mac™ and Linux/UNIX users already have free compression utilities installed at the command line.)

Grading Guidelines

Your grade for this course will be computed entirely on the basis of two code reviews, two exams, and a final presentation of your work. (A code review is a significant component of your final presentation.) The final presentation, each code review, and each exam is worth 20% of your grade, totaling 100%. There is no extra credit; I do not curve grades. Your final letter grade is converted from a numerical grade based on the following table.

Numerical RangeGrade
97—100A+
93—96A
90—92A-
87—89B+
83—86B
80—82B-
77—79C+
73—76C
70—72C-
68—69D+
66—67D
65D-
Below 65F

The following is quoted verbatim from the college's policy on grading.

Grades will be based primarily on exams, exercises and assignments, review of independent projects, attendance and class participation.

Completed projects will be graded using the following criteria: comprehension of the material, technical proficiency in using tools and techniques, project planning, design concept, executions, quality control, and a demonstration of aesthetic development. Each project deadline must be respected.

All projects will be turned in through Blackboard unless otherwise notified by the instructor. At the end of the course, all assignments will be assembled and turned into the instructor on a CD.

Attendance Policy

Students are expected to maintain good attendance throughout the course. Three absences will automatically lower the student grade by one point and each additional absence will lower the grade by an additional point. Lack of attendance may result in a failing grade. The professor will contact students who miss more than two classes. (Special arrangements must be requested in writing and signed by the professor.)

Make-Up Policy

Projects and homework must be turned in through Blackboard on time, otherwise the grade will be lowered or no credit will be given for the assignments. Class exercises must be done during class.

Missed Classes

You are responsible for the activities of each class period. If you anticipate a scheduling conflict, feel free to submit projects early. If you cannot take an exam on the scheduled day, contact the professor ahead of time to schedule a makeup exam. Students who miss classes must get necessary material from the instructor.

Academic Dishonesty

Plagiarism and cheating are serious offenses and may be punished by failure on exam, paper, or project; or failure in the course. For more information, refer to the ”Academic Dishonesty“ policy in the university handout.

Code Reviews

Code reviews are designed to check your progress, find errors, constructively criticize your source, and provide general feedback on your style.

Projects that earn grades of A meet the following requirements

  • Functioning or non-functioning project (invalid or buggy code is a serious coding offense)
  • Neatness (proper indentation and spacing)
  • Compliance (CSS must validate; XHTML/HTML must validate). This includes no warnings or errors. (The HTML5 validator is allowed to generate only two warnings: “Using experimental feature: HTML5 Conformance Checker” and “Using Direct Input mode: UTF-8 character encoding assumed” when you’re using the “Validate by Direct Input” option.)
  • Logical thinking (is your code semantic?)
  • Aesthetics (does your choice of design lend itself to proper a proper user experience?)
  • Comments (the code reader, which includes you, should be guided along in code segments that are complex)
  • User experience (UX)
  • Overly simple (you must have aesthetic reasons for your simplicity)
  • Unnecessarily complex (more code is not better code)

Resources

HTML

CSS

PHP

MySQL

Contact and Office Hour

You’re strongly advised to see me if you have questions, as I rarely ever do email nowadays. I’m available before class on Wednesdays between 5:00 PM–6:00 PM and on Mondays between 5:00 PM–6:00 PM in the Mac lab, room 207.