Edinboro University


CSCI 323 Web Development
Fall 2014

Special Note - We need to keep this schedule very flexible, I want you to get the most out of the course.  To make that possible we may need to move/add/delete some topics depending on our pace and how the class is doing.  I will continually tweak this web site, so check it often to see what's going on.

 

Week
Starting

    
8/25

Introduction to the course

  • Go over syllabus
  • What you'll learn
  • What you need
  • Assignments
  • Grading
  • Expectations
  • Lab time
  • Edinboro Network
  • Take roll
  • Make sure all of us can run the Adobe software

Your Homework Website:

Implement the following today:

  • Figure out how to access the cs server area for your web site

Web Site Work flow:

  1. Define scope of project, objectives, target audience, schedule & available resources
  2. Develop Design strategy and establish the look and feel of the web pages
  3. Develop Prototype (This will be our actual site)
  4. Present to client
  5. Assemble & create the web site.
  6. We'll have a csci323 domain for this course.
  7. Location of files:
    /home/cs/d123456t/public_html
  8. Your Web area (sample)
    http://csci323.cs.edinboro.edu/~d123456t

Chapter 1 - Setting the Scene

 
9/1

Chapter 2 -Establishing a Web Presence

  • Chapter 2 Notes
  • This includes some screen shots of FileZilla and PuTTY
  • Download:
  • Work on our initial web pages. We can save to a flash drive if you don't have an account or public_html directory yet.
  • Make a page for our assignments.

Chapter 3 - XHTML for Content Structure

  • Chapter 3 Notes
  • Add table and hyperlinks to our page
  • Continue working on our initial pages
  • Intro to Photoshop
    • Text as image
      • Create a heading for your project
      • text effects
    • Colors
    • Cropping
    • Backgrounds
      • getting from web
      • Centering on page
    • Save for Web
    • Transparancy
    • File types
  • Looks like SSI is not working
9/8

Chapter 3- XHTML for Content Structure

  • Continue on the table & hyper links exercise
  • Start Chapter 4
  • Some CSS examples
  • Good web site for colors
    colourlovers.com

 

Chapter 4 - CSS for Content Presentation

  • Chapter 4 Notes
  • Create a simple CSS file for our site.
  • Make a class
  • Make use of an ID to style one particular item on your page.
  • Let's make a div style parameters and see what is available.
  • Look at Navigation

9/15

Chapter 4 - CSS for Content Presentation

  • Continue on the CSS style sheet exercise
CS Majors:
Hamilton basement for Common Hour Tues, Sept 16th at 12:30 (to talk to freshmen-- pizza provided)?

And Tues, Sept 23rd at 12:30 in Pogue MPR for College fair?

Chapter 5 - XHTML Forms for Data Collection and Submission

I have a interesting independent study project if anyone is interested:

  • Working with Geosciences on a Web site that display real-time seismometer data.
  • Web site with the drum plot data

http://dtucker.cs.edinboro.edu/EUP_Seismograph/

9/22

Chapter 6

Chatper 6

  • Work on validating your Products and Survey page
9/29

Review

Exam 1
10/6

Chapter 7

Review of Exam1:
go over example of making in-line block type of menu for our site.

Chapter 7
10/13

 

  • Reading Day

Chapter 8

  • Start Chapter 8
  • Make a simple php web page and test it
10/20

Chapter 8

  • Finish Notes
  • Make a simple PHP page to create a text file on the server

Chapter 9

  • Review basic concepts of database
  • Propose a simple E-R diagram
  • Lab time to work on PHP E-mail and collection of data for your project.
  • Chapter 9 Notes

 
10/27

Chapter 9

 

Chapter 9 or 10

 

11/3

Review for the Exam

 

Chapter 10
11/10

Exam 2 - Chapters 5 through 9

Go over Exam
11/17

Chapter 11

Project Day

  • I'd like to see the status of your last project
11/25 & 12/4

Extra

Project day

Chapter 12


Final Exam ; Thursday at 12:30
List of US States


Subject to change Assignments
Due Date Description
8/29

Exercise 1.12 & 2.10 - Idea for your parallel project; save it to my_business.txt index.html
** Let's tweek this a bit and make it a HTML page and post it to our web directory
* Make a directory for this assignment Call it

9/5

Exercise 3.16 - Adding to your homework page with multiple pages and approiate link.  Make a graphic in Photoshop for the top. (refer to page 61, top for a sample of what it should look like.  Save this as Index.html in a folder called Chapter3 on the web server.

What you need:

  • Heading graphic
  • Menu to skeleton pages
  • some text about your company
  • footer with links to dummy pages.

Notes:
9/12

Parallel project from Chapter 4

  • Use a seperate CSS style sheet
  • CSS styled menu
  • Have skeleton pages that follow the same format

Sample:

Sample
9/19

Parallel Project for Chapter 5

Chatper 5 Sample

Sample of Survey Page
9/26

Chapter 6 - 6.15 Exercises on the Parallel Project

Validate all that makes sense to do so. 

On my example I would validate

  • Quantity
  • First Name
  • Last Name
  • E-Mail
10/15

Parallel Project Exercise p. 255

  1. Gather some images that relate to the product that you are selling
  2. Add the rotating image functioinality talked about in this chapter
  3. Add the drop down menu functionality to your home page.
    1. I know there are other options but use javascript for this
    2. Modify your other pages accordingly

Sample:

Chapter 7 Sample
11/7

Chapter 8 Parallel Project: p. 302

  • Welcome Message on Home page that changes every time the page is accessed
  • Server-Side PHP processing for your feedback form
    • You recieve an e-mail message
    • The user gets an e-mail confirmation message
    • New web page confirming the feedback submission
    • Save teh feedback to a text file on the server like in class
  • Server-Side PHP processing for an order
    • Same features as above when the user submits an order
11/14

Chatper 9 Parallel Project: p. 362

Answers questions 1 through 6. Remember not to make it to big, not way near as big as the author's. I'm thinking 3 or 4 tables max.

Make me a simple web page with a screen shot of your E-R diagram from PhP MyAdmin.
12/2

"The Big Project - Putting it all together"

Chapter 10 Parallel Project: p. 439 - (Final Project)

incorporate all of your previous work, but make it its own link.

More specifically: "When I run your web site"

  • Overall good design
    • Tabs/block style links
    • Consider colors
    • Wrapper that is centered
  • "Today's Date" on the home page or some sort of updating.
  • Survey / Feedback page with PhP e-mailing
    • User gets a confirmation
    • Send to your edinboro account the actual question
    • Append to a text file.
  • I'd like to be able to add a customer (using your previous form; maintain your previous validation)
  • Add some dummy data to your tables - customers, products and transatctions
  • Run a query to display all the customers
  • Simple page to add a product, make simple admin link, you don't need to log in. Put near bottom of home page near copyright.
  • Validation on all forms
    • Doesn't have to be perfect at a minimum make sure the fields are not blank.
    • But use the regular expressioin check for the e-mail
  • Run a query to display all products (like your are shopping)
    • 10 Bonus points if you include an image of the products
    • Customer can Purchase a product
    • Its ok if you can only purchase one or more of a single product at a time.
    • Provide the total cost (quantity * cost + tax)
  • Query to see all purchases
    • Customer and product
    • Quantity

Tables (for example only, yours will probably differ):

  • Each table should have its own ID as primary key
  • Customer Table:
    • Customer ID
    • First Name
    • Last Name
    • e-mail
    • Address
  • Products Table
    • Product ID
    • Price
    • Quantity In Stock
    • Description (memo)
  • Transaction Table
    • Transaction ID
    • Customer ID
    • Product ID
    • Quantity