CSCI 323 Web Development
Fall 2016

Week
Starting

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.

How to Host:

1. We'll have a csci323 domain for this course.
2. connect to cslab100.cs.edinboro.edu
3. Location of files:
   /home/cs/d123456t/public_html
4. Your Web area (sample)
   http://csci323.cs.edinboro.edu/~d123456t
5. Look at Chapter 2 notes for more info.

Chapter 1 - Setting the Scene

• Chapter 1 Notes

Chapter 2 -Establishing a Web Presence

• Chapter 2 Notes
• This includes some screen shots of FileZilla and PuTTY
• Download:
  • FileZilla - FTP Client
  • PuTTY - Terminal Emulator
• 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 - HTML for Content Structure

• Chapter 3 Notes -> We look at a trimmed version of these notes, we cover this material via demo.  Most should be a quick review from the 1st web course.
• Initial Pages
  • Add DIVs
  • hyper-links
  • CSS
  • Buttons ?
  • Look at competors web sites, steal ideas
• 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
  • Transparency
  • File types
• Looks like SSI is not working

Chapter 3- HTML 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/19

Chapter 4 - CSS for Content Presentation

• Continue on the CSS style sheet exercise
• How to fade an image like on my sample project page
  
  

Chapter 5 - HTML Forms for Data Collection and Submission

• Chapter 5 Notes

Chapter 6

• Chapter 6 Notes
• Discuss Regular expressions
  • sequence of characters that forms a search pattern
  • we are using these to validate the users input
  • we are "searching" for a pattern of characters
  • use in the javascript search() function
  • https://regex101.com/
• Work on Validating our feedback
• Add the products page

Chapter 7

• Chapter 7 Notes
• Java Script
• Work on rotating image div on your home page.

Review

• Finish 7 (Maybe - look at drop down menu)
• Exam 1 review

Exam 1

• HTML 5
• CSS w/sheet
• Write JavaScript
• Small Application
  

Reading Day

Chapter 7

• Review of Exam 1
• Go over example of making in-line block type of menu for our site.
• We need to add the rotating images
• Create a simple PHP pageto show the current time.

Chapter 8

• Start Chapter 8
• Make use of the PHP include
• Work on the Feedback Form
  • Send an email
  • Create and log the feedback responses to a text file on the server

Chapter 8

• Continue on Chapter 8

Chapter 8

• Finish Notes

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

Chapter 9

• Chapter 9 Notes
• database
• https://csci323.cs.edinboro.edu/phpmyadmin
• Username: your cs domain login
• Password: your birthday

A good site with examples of using PHP to connect -> examples

Good Summary of Database Theory

Chapter 9 or 10

• Email - should be working, Let's test it
• Database - Discuss our design
• phpMyAdmin - Login & create a table
• Connect - Write the PHP to connect

Review for the Exam

• Closed book
• Short answer questions
  • Similar to what we did in class for connecting to a database and printing data out.
• Understand how a form works
  • move the data to the next page and display it. ($_POST)
  • start a session
  • $_SESSION
  • POST, Action, onsubmit
• Write the SQL to display the data
• Write some generic SQL
  • Display data sorted
  • Display only certain data
  • Add a record
• Add data from form to database
• Some short answer database questions
  • relations ?
  • referential integrity
  • E-R diagram
  • Primary Key
  • Foreign Key
• Review the questions in the book at the end of the chapters.

Exam 2 - Chapters 5 through 9

Chapter 10

• Go over exam
• Start Ch 10
• Notes
• Connect to our database

Chapter 10

• Notes
• Let's add functionality to Update a record in the database.

Extra

• Project day
• I'd like to see the status of your last project

Thanksgiving

• No Class

Chapter 11

• Notes

Chapter 12

• Notes

Final Student Presentations: Thursday at 12:30

9/2

HW-1

In section 1.12 do questions 1 -> 3 but put #3 as a web page in your student directory.

Make a link from your homework page.

9/9

HW-2

Modified version of Exercise 3.16 - (refer to page 61, top for a sample of what it could look like.  Save this as Index.html in a folder called HW-2 on the web server.

What you need:

• One page, your initial page for your product
• Good layout like we did in class,
  • header, nav, main footer DIVs
  • centered
  • Appropriate and good color selection
• Heading graphic that we made in Photoshop
• Menu where the links go to dummy pages (a href="#")
• Some text about your company (borrow/steal from another site)
• footer put your copyright note there for now

Notes:

• Similar to the one we started in class. http://csci323.cs.edinboro.edu/~dtucker/CSCI_323_Fall2016/HW-2
• I wanted to have you use Server Side Includes but it looks like the ability to use them is not enabled on our apache server.
• Make sure you test your page!! - have a friend look at it or look at it off campus.

9/16

HW-3

Add much more CSS HW-2

Parallel project from Chapter 4 (But use CSS not javaScript for making your menus!)

• Use a separate CSS style sheet
• CSS styled menu
  • Box style menu
  • Good colors
  • Drop down menu when the user hovers
• Good placement and width of menu & buttons that fits most screens (1000px) But you can have a top banner all the way across if you want.
• I want DIVs for the Header, Nav, Main (text of page) and footer.  I also recommend a wrapper of the whole thing.
• Compare to other sites that sell what you are selling.
• Make it look like it could be a real e-commerce site.

9/23

HW-4

Parallel Project for Chapter 5

• Feedback Form
• Products selection Form
• Read the parallel project requirements carefully from the book.
• The CD ROM had good examples for this assignment
• And the stuff we did in class

9/30

HW-5

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

Parallel Project Exercise p. 255

1. Gather some images that relate to the product that you are selling
2. Add the rotating image functionality 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

11/11

HW-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 receive an e-mail message
  • The user gets an e-mail confirmation message
  • New web page confirming the feedback submission
  • Save the 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/18

HW-8

Chapter 9 Parallel Project: p. 362

Answers questions 1 through 6. Remember not to make it to big, no 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/6

HW-9

"The Big Project - Putting it all together"   

Check out --> Grading Rubric

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 transactions
• 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 expression 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