Edinboro University

CSCI 323 Web Development
Fall 2021

Week
Starting

  
8/23

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 a web editor, likely the the Adobe software

Your Homework Website:

Implement the following today:

  • Figure out how to access the cs server area for your web site (if its up and running by now)

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

 

 
8/30

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.
9/6

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 competitors 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
  • SSI, look at how to make this work
  • Start Chapter 4
  • Some CSS examples
  • Good web site for colors
    colourlovers.com
  • Continue on the table & hyper links exercise

 

 

9/13

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
  • CSS style sheet exercise
  • How to fade an image like on my sample project page

Set up a PHP "Sand Box" page

  • Display time
  • Implement an include
9/20

Chapter 5 - HTML Forms for Data Collection and Submission

Chapter 6 - Java-script for Client-Side 1

  • 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


9/27

Chapter 7- Java-script for Client-Side 2

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

Review for the exam

PhpMyAdmin

Connect to phpmyadmin

Exam 1 - 10/1

  • HTML 5
  • CSS w/sheet
  • Write Java Script
  • Small Application
10/4

Chapter 8 PHP & Connect to Database
10/11

Chapter 8 -PHP

  • 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

 
10/18

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

 

 
10/25

Chapter 9

 

Chapter 10

  ERD Diagram

  • What we've covered so far:
    • Email - should be implemented and working on your feedback form
    • Database - Should have at least 4 tables by now, maybe discuss our design
    • phpMyAdmin - Should be comfortable using at this point.
    • Connect - Looks like everyone is doing this.

 
11/1

Review for the Exam

  • Closed book
  • Short answer questions
    • Java Script and its relationship to the DOM
    • What can javascript do for our sites
    • What is a regular expression
    • Understand how a form works
      • move the data to the next page and display it. ($_POST)
      • start a session
      • $_SESSION
      • POST, Action, onsubmit
    • Database Implementation
      • Advantage of using a database
      • Advantage of using a text file
      • Write some simple SQL
      • Display only certain data
      • Add a record
      • Normalize
      • Add data from form to database
    • Some short answer database questions
      • relations
      • referential integrity
      • E-R diagram (like we drew on the board in class)
      • Primary Key
      • Foreign Key
  • I'll try and post some review the questions in the book from the end of the chapters.
  • Review the status of the websites
  • Answer Questions

Exam 2 - Chapters 5 through (9 or 10) depending on where we are
11/7

 
11/8

Chapter 10

  • Go over exam
  • Start Ch 10 - More informaiotn on Interacting with a database using PHP and MySQL
  • Notes (PHP and connecting to database)
  • Answer questions on adding functionality to update a record in the database.

 
11/15

Extra

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

Chapter 11 - XML

 
11/22

 

Chapter 12

Thanksgiving

  • No Class Thursday

 

 
11/29

Open some student projects in class to critique

Review for Final Exam

Final Exam Period

Monday the 6th @ 10:15 am to 12:15


Helpful Homework Examples

If you want to see the admin and regular user interfaces:

    Admin Login:

    • UN: dtucker@edinboro.edu
    • PW: password

    Non Admin Login

    • UN: jwilson@edinboro.edu
    • PW: password

Assignments
Due Date Description

9/2

HW-1

Both Chapter 1 and Chapter 2 "Exercise on the Parallel Project" combined

At the end of the 1st chapter are the exercises (blue pages) do "Exercises on the Parallel Project". We'll put the results in your student web directly on the cs domain.

For the 2nd Chapter's "Exercise on the Parallel Project" Let's make a simple web page and put a link from your homework page to this assignment. Look at this in other browsers and make sure it looks ok.

Sample Homework Page (will expand as the semester goes on)

pdf file of Pages 16 & 17
pdf file of Pages 18 & 19
pdf file of Pages 36 & 37

9/17

HW-2

Chapter 3 "Exercise on the Parallel Project"

What you need:

  • 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 other placeholder pages
  • Some text about your company you wrote in the 1st assignment
  • footer; put your copyright note there for now

Notes:

  • Similar to the one we started in class.
  • Lets look into using 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/24

HW-3

Add much more CSS the previous homework assignment

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/29

HW-4

Create an Investment Calculator and post your homework page.

  • You could have radio buttons or drop-downs like we did in class.
  • Also add Validation for the input of Number of Years and Amount to Invest.
  • Should function similar (but not exactly) to this:

Put a link to this on your homework page.

10/16

HW-5

Parallel Project for Chapter 5 (Only number 2, the satisfaction survey)

From the book, Chapter 5 #2:

"Design and develop a web page containing a form that queries the user on the level of satisfaction with previously purchased products or services from your business. Use the first two categories from your form in exercise 1 above. Within each category have a checkbox for each item to indicate the user has purchased that product or service, and a sequence of radio buttons to indicate the level of satisfaction. For each category, also have a box where the user can enter comments about that category. Provide as well boxes for the user to enter his or her first and last names, and another for email. The form will also need the usual submit and reset buttons. Complete the web page by providing a suitable title and explanatory text, and format it in such a way that it is pleasing to view."

and parallel project for Chapter 6 (Only number 2)

From the book, Chapter 6 #2:

"Write a JavaScript script that validates all user entries for which it makes sense to do so in the form that permits your customers to give you feedback on their experience with your business. Report to the user if a particular entry is invalid, and be sure to tell the user that everything is OK if that is the case."


and part of chapter 8's parallel project (Only number 2)

From the book, Chapter 8 #2:

"Implement server-side PHP processing for your own feedback form that is analogous to what we described in this chapter. That is, when the user fills out and submits your feed- back form, the following things should happen:
• Your business receives an email version of the feedback.
• The user receives an email confirmation of the feedback.
• The user gets an immediate browser display confirming the feedback submission.
• A dated copy of the feedback is stored on the server. Use a textfile called feedback.txt in a subdirectory called data to log your feedback messages. Also, since your business may not yet actually be up and running and have a bona fide email address, the “business email address” can be your own email address. In fact, for testing purposes, you can be both customer and business, but the messages received should be at least slightly different in each case so that they may be distinguished from one another. This too is what we did in the text."

  • Create a feedback Form
  • Read the parallel project requirements from the book. This is based off of that but I want to make some changes like don't worry about #1 in chapter 5.
  • Validate all that makes sense to do so. 
  • Use a regular expression to validate the email (at least) You can use the built in HTML validator for the other fields.
  • Server-Side PHP processing for your feedback form
    • Business Owner (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
    • Make a link under the Admin menu to view the text file.

10/21

HW-6

Chapter 7 Parallel Project:

  • Using Java Script
    • Add "Today's Date" on the home page.
    • Create a welcome Message on Home page that changes every time the page is accessed
    • Gather some images that relate to the product that you are selling and Add the rotating image functionality to the home page
  • Add an "About" page

10/28

HW-7

Chapter 9 Parallel Project:

Using PHPMyAdmin create the 3 (maybe 4) tables (if you didn't do this already)

  • Customer
  • Product
  • Order
  • Line-item (possible 4th, this allows more then one item purchased per order)

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.

From the book, Chapter 9: Parallel Project Questions 1 -> 6:

1. Rethink the objective(s) of your business, from the point of view of the kind of data that you will need to handle, and the kind of information you will need to store and later retrieve. Virtually every business has products and/or services to sell and needs to have some kind of inventory management system to deal with all aspects of information relat- ing to those products and services. Time constraints may limit the scope of your effort, but give some thought to what is both reasonable and feasible to implement, given your particular situation.

2. Decide what tables you will need for your data, and the relationships between them.

3. Decide what attributes should go into each table, what data type each attribute should have, and what keys should be used to identify the rows in individual tables and connect the tables.

4. Think about any “business rules” that may be peculiar to your business and make sure they do not “break” your design. If you discover a business rule that is inconsistent with your database design, revise your design accordingly.

5. Implement your design in MySQL, using any combination of phpMyAdmin and the com- mand-line interface, but try to use both enough to enhance your familiarity with each.

6. Add enough data to each table so that you can perform some meaningful queries, and test your database until you are satisfied it is going to help you perform the necessary tasks your business requires.

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

Sample 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)
  • Order Table
    • Transaction ID
    • Customer ID
    • Product ID
    • Quantity

11/4

HW-8

Database Interaction: Add to your e-commerce web page the following:

  • Using PhpMyAdmin, add some dummy data to work with, For example 3 Customers and 3 Products
  • Customers Data Manipulation
    • Display all customers
    • Be able to add a Customer/Create an account (some simple validation)
    • Be able to edit a Customer (use a drop down selection like the class demo page)
  • Product Data Manipulation
    • Display all products
    • Be able to add a Product with some simple validation. In addition add the abiltiy to upload a photo of the new product.
    • Be able to edit a Product (use a drop down selection)

11/11

HW-9

Admin:

  • Add the ability to designate a user as an administrator
  • Add a separate menu drop down that show up if you are logged in as an administrator
  • Add the ability for administrator only:
    • move your add/edit functionality under the admin menu
    • move the viewing of the feedback under this menu

Sessions:

  • Add the functionality so that user login is carried from page to page for the user's entire visit
  • Have some sort of "Welcome Joe" on each page
  • Add the ability to see the logged in user's orders

11/18

HW-10

Product Selection:

  • Add a way to see certian types of products
  • Add a way to see "Specials"
  • Add a way to purchase a product, see Tucker Shoes for an example. When a users buys something just have the purchase added to the orders table and disply the user's orders.

 

This is the sum of all the other assignments

Putting it all together

Grading Rubric

Purchase a Product & Putting it all together for a final product:

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

  • Overall good design
    • Tabs/block style links
    • Consider colors
    • Wrapper that is centered
  • 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)
    • 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