Web Developer 2


Week 13 - No assignments due this week - See below for Final Exam Project

This will be the last posting for this semester.  Chapter 5 in the ASP book deals with sending E-Mail programmatically via ASP.  You should familiarize yourself with the process by reading Chapter 5.  The code referenced in the text book is a little dated.  I'm posting some updated code in a file called sendMail.zip.  Inside sendMail.zip, you'll find 2 ASP files.  The first file demonstrates how to send e-mail from your ASP pages if you DO NOT have Windows Server 2003 (including Sun ONE Web Server and Sun ONE ASP).  The second file demonstrates how to send e-mail if you HAVE Windows Server 2003.  The only difference is that the Object ID and a few of the properties are different.  Programmatically, the process is identical.  I just looped through the form fields and populated a String to send to the specified e-mail address.  PLEASE MODIFY THE FILES TO USE YOUR OWN E_MAIL ADDRESS.  I get enough junk mail!  Also note that the form that points to the sendMail.asp file must use "post" as its method.

The reason there are no assignments due this week is because the free hosting accounts - including Brinkster - don't allow you to send e-mail this way.  If you have access to your own server or you are paying hosting fees, the techniques I've presented will work just fine.  You must, however, ensure that the Virtual SMTP (Simple Mail Transfer Protocol) Server is installed and enabled.  For IIS , the Virtual SMTP Server is installed and enabled by default.  You should be able to see the Server via the IIS snap-in.  Alternatively, send an e-mail to your host provider to see what's possible.

Final Exam Project
Last week, you had the opportunity to download my e-commerce system.  If you have not downloaded it, you will need to download it.  Your final exam project is to build an administrative system for the Books table in the bookstore.mdb database.  Your admin system should allow users to:

  1. Add New Books
  2. Modify Books
  3. Delete Books

Please post a link to your admin system on your Home Page by Tuesday, December 14, 2004.  This will be your Final Exam.

Week 12 Assignments - Due Sunday, November 21, 2004, 11:59 PM

This week ( and probably next ) will address the subject of e-commerce.  For the most part, e-commerce consists of the following:

1. A searchable catalog for users to browse items

2. A Shopping Cart to "hold" items users wish to purchase

3. A check out and payment mechanism for users to buy items

4. An order fulfillment process

Chapter 5 in the ASP book presents an e-commerce system that covers the catalog, shopping cart, and check out mechanism using a text file for the database and the Session object to hold the shopping cart.  You should definitely read Chapter 5 and focus on the Session object implementation.  The Session object allows you, the developer, to "remember" each individual user programmatically.  Without the Session object, e-commerce would be far more difficult than it needs to be.

I am not, however, crazy about the text file approach for a data store.  I've written an e-commerce system that uses an Access database for both the catalog and the shopping cart.  While implementing the shopping cart in the database might not be the way to go if you are stuck with Access, it certainly is a viable alternative if you are using a more "full strength" database such as Oracle, SQL Server, or even MySQL.  You can download my e-commerce system here.

My system doesn't cover payment or order fulfillment either as those components are almost always tailored to a specific implementation.  In other words, each individual e-commerce site is built differently than any other.  Those differences might be slight or huge - but they'll exist nonetheless.  For now, don't worry about it - just focus on the other components that every e-commerce system have in common.

For this week's assignment, see if you can get either the text book system or my system up and running in your web space.

Week 11 Assignments - Due Sunday, November 14, 2004, 11:59 PM

As you've probably figured out, I've got the topics and chapters in the ASP book mismatched at the end of the syllabus.  This week we'll explore using ASP as a user interface for manipulating a database as in Chapter 4 of the book.

I'm posting two well-documented examples for you to investigate instead of "lecturing" here this week.

1. Read Chapter 4 in the ASP book

2. Read the Guest Book Database Example lesson

3. Create a database driven Guest Book for your site using the code available from the Guest Book Example page.

4. Read the Asset Manager Example lesson

Week 10 Assignments - Due Sunday, November 7, 2004, 11:59 PM

Mostly reading this week as we prepare for working with databases.  The samples in the book as well as my samples use Microsoft Access as the database.  While technically you don't need Access installed on your machine, it would make you life a LOT easier.  NCC has Access installed on every PC in all Open Labs.  If you don't have Access, and can't get a copy, I suggest you budget some time at the school to look at the data in the databases at the very least.

1. Read Chapter 3 in the ASP book

2. Read the Barebones Access, Creating a DSN, and Beginning ADO lessons on the Instruction page

3.Create the Search Field described at the top of page 83 - post your application to your web space.

Week 9 Assignments - Due Sunday, October 31, 2004, 11:59 PM

Reading and writing to files is a characteristic of every programming paradigm and ASP is no exception.  ASP provides a robust API for manipulating files on the server.  You can use the FileSystemObject to write applications that manipulate either text or binary data.  In this week's reading, you'll see how to write a guest book application using a text file.  Later, You'll see how to migrate the guest book to a database.  I'll let you decide which approach is better!

1. Read Chapter 2 from the ASP book

2. Read the File Manipulation Lesson from the Instruction Page

3. Create a Guest Book for your site and link to it from your home page

4. Complete bullets 2 and 5 from the "Ideas for Hacking..." section on page 37 of the ASP book
(I think there's an easier way to complete bullet 5 than what the author states.  See if you can write to the front of the file rather than the back to get the newest entries to show first - i.e. store the file in memory and append it to the new entry.)

Week 8 Assignments - Due Sunday, October 24, 2004, 11:59 PM

It's time to start Active Server Pages!  There is a lot of background material to get you started writing server-side web applications so this week's assignments include a lot of reading.  You'll also need to ensure that your development and deployment environments support Active Server Pages.  One of the benefits that is inherent with Brinkster is that they support ASPs.  You can use Brinkster as both a development and deployment platform.  You may choose, however, to develop ASPs on your machine by setting up ASP support.  In any case, your deployment environment MUST support ASP - or I will be unable to view your work.  If you need to change your URL, let me know ASAP.

1. Set up your development and deployment environment

2. Read the Introduction and Chapter 1 from the ASP book

3. Read the Beginning Active Server Pages Lesson

4. Read the ASP Intrinsic Objects Lesson

5. Re-name your home page to default.asp and complete the second bullet of the Advanced Projects on page 11, Chapter 1.

Week 7 Assignments - Due Sunday, October 17, 2004, 11:59 PM

Object Oriented JavaScript is a thorny subject to some Object Oriented purists.  Technically speaking, JavaScript lacks many of the features of Object Oriented languages.  The three pillars of Object Oriented languages are Inheritance, Polymorphism, and Encapsulation.  JavaScript possesses prototype based inheritance, some encapsulation features, and you can mimic polymorphism.  So, is JavaScript Object Oriented?  Not really - but it helps to think in terms of objects when writing JavaScript.

Most of the difficulty in writing objects in JavaScript is creating the function that renders the object on the screen.  You'll find yourself writing long, complex strings of HTML interspersed with object properties.  The good news is that once you've written the rendering function you won't have to touch it again.  You'll be free to create as many of the objects as you'd like and they'll all share the functions you write - including the rendering function.

One final note: the goal of Object Oriented coding is two-fold - code reuse and simplification.  If an object oriented solution doesn't provide you with those benefits, bypass it for something simpler.  That is, Object Oriented programming is not the be all and end all of programming.  Usually it's the best solution but that's not always the case.

1. Read Chapter 11 of the JavaScript Book

2.Read the following articles

Rotate Content Easily with Object-Oriented JavaScript

Create an Object Oriented JavaScript Calendar

Create an Object Oriented Tree Control with JavaScript

Generate Tabbed Interfaces Automatically With JavaScript OOP

Encapsulate your JavaScript

3. Complete last week's bookstore assignment.

Week 6 Assignments - Due Sunday, October 17, 2004, 11:59 PM

With the convergence of the Document Object Models within the most recent browsers, DHTML has become a viable technology to create user interface components on the web.  The combination of HTML, CSS, and JavaScript, along with a single DOM, has made it possible for Web Developers to write one script and be relatively sure that the script will work well in all of the most recent browsers.

Frequently, in the past, you needed to write separate scripts for each of the browsers or include complex branching logic to first determine which browser the client was using and then react to the browser.  Fortunately that's no longer the case.  You can be relatively (around 98%!) sure that users support JavaScript 1.2, XHTML, and CSS 2.  That's incredibly good news!

With DHTML, you can now build user interface components that mimic the components that users see in most applications.  Things like tabs, menus, and trees can now be implemented on web pages rather easily.  Users are used to seeing these structures and immediately know how to interact with them.  That's cool because users don't want to have to learn how to use your site - they just want the information to be easily accessible.  Using common metaphors is a great way to go.

Finally, most DHTML user interface components serve a second purpose.  They allow you to include more information on the page without taking up a lot of screen real estate.  That is, you can hide a lot of information and make it accessible to the user at their request.  Take a look at the menu bar across the top of your browser.  Imagine if all of the menus needed to be expanded all the time.  You'd have no place to put the web pages!  The fact that the menu items are hidden until the user clicks the menu trigger is what makes menus such a good user interface component.

1. Read Chapter 10 from the JavaScript book.

2. Read the following articles:
Create a Tabbed Interface

Pop Goes the Menu

Creating Multi-Page Forms

Build a JavaScript Tree Control

How to move items between lists with JavaScript

3. Create a navigation system that uses DHTML user interface components  for the Bookstore we've been building.  I'm being intentionally vague but you might use a tree that users could drill down to get access to more detailed information.  Or you might build a menu system that does the same thing.  You might present the user with a series of tabs - one for each category.  You might combine some of the components.  In short, there are plenty of ways to go with this one - use your imagination and make the bookstore as intuitive to use as possible.  

4. Your bookstore site will now need details pages for each of the books.  You have all of the information you need at http://www.bright-moments.com/webdeveloper2/bookstore/books.html.  Users should be able to view books by category and then, with a single click, view details on the book they've selected.  Include an "Add to Cart" mechanism (but don't implement it) on the details pages.  Your store should have the check out page you've already built as well as the banner ad mechanism located on each page.  Your goal is to build an e-commerce site that entices users to buy books - build the best site you can!

5. This assignment will count as your mid term grade.  Please note that you have 2 weeks to complete it.  I will be assigning things next week (mostly reading) so check back here next week as well - even though nothing is due.

Week 5 Assignments - Due Sunday, October 3, 2004, 11:59 PM

Image manipulation via JavaScript is a fundamental skill that all JavaScripters must learn.  In fact, image manipulation is the reason that JavaScript was invented!  This week's reading focuses on using images dynamically on your pages.  You should read all of the material carefully.  Almost certainly, if you continue in the field of web development, you will be using and writing scripts that manipulate images on a nearly daily basis.

1. Read Chapters 7 and 9 from the JavaScript book

2. Create an Advertising Banner that rotates images on your site.  I'll leave the companies that advertise up to you (Note: this is fictitious!).  Your Banner Ad should include at least 5 advertisers and should allow the user to click on a banner to navigate to that vendor's web page.  The vendor's page should appear in a separate window.  Each Banner should be an image (i.e. not just text).  Feel free to "borrow" graphics from wherever you'd like.  Place the banner along the bottom of your home page.

3. Read the following lessons on the Instruction page:
Timing is Everything
Replacement Animation
Image Rollovers

4. Read Rotating Content at DevX.com, an article I wrote on rotating content using Object Oriented  JavaScript.

Week 4 Assignments - Due Sunday September 26, 2004, 11:59 PM

This week's reading deals with browser detection and incompatibilities between them.  You should know that, for the most part, incompatibilities between the more current browsers are evaporating rather quickly.  As browsers move toward supporting the W3C standards for XHTML and XML, the code needed to write JavaScript applications becomes more homogeneous.  That is, it is now possible to write a single script and have it execute in IE exactly the same way as it does in Netscape 7, or Mozilla, or Opera.  That's a relatively new development.  In the bad old days of the browser war (IE vs. Netscape) you needed to either write separate scripts for each browser or include a bunch of conditionals to determine which browser the user was running.  It wasn't any fun!

In today's world, though, supporting Netscape 4.x is a thing of the past.  FYI, I gave up supporting Netscape 4 more than a year ago in my professional life.  I believe that if we continue to create content that is viewable in Netscape 4, we are enabling its use.  In other words, users would have no reason to upgrade to the newer technology that makes our lives as developers easier!

The problem, of course, is that at some point in your web career you are likely to be exposed to legacy code that supports older browsers. At the very least, you should know how to read the code and debug it if necessary.  So, here are your assignments for the week:

1. Read Ch. 6 from the JavaScript book.

2. Read how I detect the browser via object detection:
Intro to DHTML

3. Create "The Ultimate Client Detector" and post it to your site.
I'm being intentionally vague here.  As you can see from Chapter 6, you can get a lot of information from the client when a request is made for your pages.  I'm asking you to process that request and display information about the client (i.e. browser, browser version, operating system, etc).  I'll leave which information to display up to you.

Week 3 Assignments - Due Sunday, Sept 19, 2004, 11:59 PM

Arrays represent a programming construct available in nearly every programming language and JavaScript is no exception.  Arrays are a way for you, the programmer to access elements in a collection by their position in the collection.  So, you can get to the 1st member an array just as easily as the 5th or 100th or last. 

Arrays also make looping through a collection easy as an array has a length property - you'll always know how many elements are in the array.  Since you know how many elements are in an array, you'll usually use for loops when looping through an array - although a while loop could be used.

In JavaScript, arrays can be used to store anything you'd like.  In fact, in JavaScript, the elements of the array don't even need to be the same type of data.  In other words, the first element of an array might be a String, the second an number, the third a boolean... you get the idea.  This flexibility, however, comes at a price - it's up to you to keep track of what each element's type as well as its value.

1. Read through Chapter 5 in the JavaScript book.

2. Create a JumpList box for a bookstore.  The List elements should represent categories of books for sale.  Use the following categories as the display text for the drop-down:


Each choice should be linked to a page that will display the books from that category.  You'll find an HTML file containing a representative sample of books at http://www.bright-moments.com/webdeveloper2/bookstore/books.html.  Use the contents of that file to construct category pages for each of the categories listed above.  The category pages need only display the Title and category for each book.

3. Design a home page for the bookstore (I'll leave the name of the store up to you) and place the JumpList on the page.  Include a link to the check out page you created last week.  Link to the Bookstore home page from your home page.

Week 2 Assignments - Due Sunday, September 12, 2004, 11:59 PM

NOTE:  This assignment's due date is Wednesday, September 15, 2004.  See the discussion board for details.

Here we go...

This week's topic is form validation.  Client side JavaScript plays a major role in form validation as it relieves the computational burden from a potentially overworked web server.  It just makes sense to use the client's machine to do as much of the work as possible - chances are it's a Pentium class machine just sitting there doing nothing!

1. Read Chapter 4 in the JavaScript text book.

2. Read an article I wrote on Form Validation available at : http://www.devx.com/gethelpon/10MinuteSolution/16474

3. Create an e-commerce check-out form and use JavaScript to validate the form prior to submission.  Include a hidden form field in your form, name it "myEmail" and set its value to your e-mail address.  Set the form's method attribute to "post" and its action attribute to "http://www.ncc.commnet.edu/webdev2/sendMail.asp".  Your form must include a field named "eMail" which must be validated as an e-mail adress.  The sendMail.asp file does 2 things - it echoes what was entered on the screen and sends an e-mail with the form results to the address specified in the "myEmail" field. 

Your form must also properly validate credit cards in terms of formatting (note: you DO NOT have to validate the credit card in terms of funds - you need only insure that the card number has the proper format for the card type.  Make sure you read the above article before asking any questions).  The rest of the form is up to you - it should include all the things you think necessary for a check out form EXCEPT for the Shopping Cart contents - we'll get to that later!  I've posted a sample form at: http://www.bright-moments.com/webdeveloper2/formCheck.htm.  Note that my form doesn't do any validation - it just shows you how to initialize the form.  Make sure you change the e-mail address in the myEmail field to YOUR address BEFORE testing.  I get enough junk mail, thank you!

4. Post your form to your web space.  I'll be posting links to your space on the the Links page this week.  Make sure the link I post to your space points where it should.  If it doesn't, let me know.  Note that if your link is correct, you DO NOT have to contact me!

Week 1 Assignments - Due Sunday, September 5, 11:59 PM

The Web Developer 2 class is intended for students to become proficient JavaScript coders over the course of the semester.  You'll start the term by adding to the JavaScript skills you gained in the Web Developer 1 class and then progress through Dynamic HTML (DHTML), Object Oriented JavaScript, and Active Server Pages.  The class will be code-intensive beginning with the week 2 assignments.  Please be prepared to put the time and effort into writing code.  There is a plethora of information about JavaScript on the web that you can use as a supplement to the instruction provided here and the textbooks I've chosen.  I suggest you use as many resources as possible.  Here are the Week 1 assignments:

1. Respond to the Introduce Yourself discussion thread.

2. Secure A URL.
You'll need space online to post your work.  There are many free web host providers.  I recommend signing up for the Educational Account at Brinkster.com.  It's free, has an easy to use File Manager, and doesn't include any advertising on your pages.  You are free to use any web host provider you'd like.  Many ISPs include web space in their connection fees.  Check with your ISP to see if you've got space.  Later in the class, we'll be working with Active Server Pages.  It is in your best interests to select a host provider that supports ASPs now rather than later.  Brinkster's free account will support 90% of what we do in class.

3. E-Mail me the the URL to your web space.
Your URL will be the mechanism by which I'll grade your work.  If I can't find your work, I'll assume you didn't do it.

4. Set Up your development environment
Decide which text editor you'll use and install it if necessary.  Upgrade and/or install at least one newer browser on your machine (See Home Page for links).  Decide if you will install your own web server or use an external web server (such as Brinkster) for testing.  Install the web server if necessary.

5. Read Chapters 1,2,3 from the JavaScript book.

6. Review Web Developer 1 Material if necessary
You can review the content for the Web Developer 1 class at http://www.bright-moments.com/webdeveloper.  I'll assume that you know HTML, CSS, and have a very basic understanding of JavaScript.