Jim Gerland NCCC Logo Advanced Web Design (DIG 112) Spring 2015
Tues/Thur 9:30 am - 10:45 am D-BLDG 106
Niagara County Community College

Course Description

Advanced Web Design builds upon the basic HTML5 and CSS skills learned in Introduction to Web Design. This course introduces the student to various techniques, standards, and software packages that are used to add interactivity, responsiveness, and multimedia-style effects to web pages. Topics include: Cascading Style Sheets for layout and formatting of web pages, forms, server side technologies such as PHP: Hypertext Preprocessor, Search Engine Optimization, coding for mobile devices, file management, and web site maintenance. Technologies such as File Transfer Protocol (FTP), JavaScript, embedding video and audio, and accessibility issues are also addressed. The web design software package, Adobe Dreamweaver, is used to for coding, file management, and file transfer to the web server. Prerequisite: DIG 111 or permission of instructor

Prerequisites: Digital Media 111 as PREQ
General Requirements: (Course or Test: DIG 111 Minimum Grade of D-
May not be taken concurrently.)

Instructor Information

Name: Jim Gerland
Office: D-Bldg 101
Office Hours: Tuesdays/Thursdays 9:00 AM - 11:15 AM, or by appointment
Office Phone/Voice Mail:
Email: (The best way to reach me)

Course Identification

Credit Hours: 3
Course meeting times: Tuesdays/Thursdays 9:30 AM - 10:45 AM (D-BLDG 106)

Expected Student Outcomes

Upon the successful completion of this course, a student will be able to:

Class Schedule

Date Textbook Reading Chapter Assignments
January 20 Introduction to Dynamic Web Content Nixon 1
Krug 1		 Create Your Home Page
January 22 Exploring JavaScript
(Why document.write()?)		 Nixon 14 Create JavaScript Page
Brief Introduction Due
January 27 Expressions and Control Flow
in JavaScript		 Nixon 15
Krug 2		 Home Page Due
January 29 Expressions and Control Flow
in JavaScript		 Nixon 15
February 3 JavaScript Functions, Objects
and Arrays		 Nixon 16
Krug 3
February 5 JavaScript Functions, Objects
and Arrays		 Nixon 16
February 10 Setting Up a Development Server Nixon 2
Krug 4		 Setup Web Server
February 12 Introduction to PHP Nixon 3 PHP Page
JavaScript Page Due
February 17 Expressions and Control Flow in PHP Nixon 4
Krug 5
February 19 Expressions and Control Flow in PHP Nixon 4 Web Server Due
February 24 PHP Functions and Objects Nixon 5
Krug 6		 Loop/Function/Arrays
February 26 PHP Arrays Nixon 6
Krug 7
March 3 CCI Day - No Class
March 5 PHP Arrays Nixon 6
Krug 8		 PHP Page Due
March 10 Practical PHP Nixon 7
Krug 9
March 12 Practical PHP Nixon 7 Create a PHP I/O Page
March 17 Introduction to MySQL Nixon 8
Krug 10		 Loop/Function/Arrays Due
March 19 Introduction to MySQL Nixon 8
March 24 Mastering MySQL Nixon 9
Krug 11
March 26 Mastering MySQL Nixon 9
March 31 Accessing MySQL Using PHP Nixon 10
Krug 12		 MySQL Table
PHP I/O Page Due
April 2 Using the mysqli Extension Nixon 11 PHP MySQL Form Page
April 7 Spring Recess
April 9 Spring Recess
April 14 Form Handling Nixon 12 MySQL Table Due
April 16 Form Handling Nixon 12 Final - Krug Web Site
April 21 JavaScript and PHP Validation
and Error Handling		 Nixon 17 PHP/MySQL Table Due
April 23 JavaScript and PHP Validation
and Error Handling		 Nixon 17
April 28 Bringing It All Together Nixon 26 PHP MySQL Form Page Due
April 30 Bringing It All Together Nixon 26 Krug Web Site Due
May 5 In-Class Presentations
May 7 In-Class Presentations Last Day of class
All Work Due By 11:59 PM tonight
Back to Top

Textbook

Learning PHP, MySQL, JavaScript, CSS & HTML5 CoverLearning PHP, MySQL, JavaScript, CSS & HTML5 3rd Edition
Robin Nixon (O'Reilly 2014, ISBN 978-1491949467)
Chapter Data Files (zip) (Unzipped)
Book is Required!

Free Bonus

This book also includes a free license for CSE HTML Validator Standard v12 for Windows, an HTML and CSS editor and validator, which can also check PHP syntax with an additional free download. Use this product to validate your web projects so that they are less likely to contain bugs, and are more likely to run on as many different platforms as possible.

To start using your free license, please download and install the program.

To register the program, please:

  1. Install and run CSE HTML Validator
  2. Select the license key in the panel below
  3. Press Ctrl-C to copy the key
  4. Choose 'Register Program' from the CSE HTML Validator 'Help' menu
  5. The license information will be automatically entered into the registration dialog

DMMT Revisited Don't Make Me Think Revisited
A Common Sense Approach to Web Usability
Steve Krug / Pearson Education / 2013 / 216 pages
ISBN-13: 978-0-321-96551-6
Book is Required! Three (3) copies are available on Library Reserve

* USB Flash Drive is highly recommended

Grading

Assignments

Nine (9) Individual Assignments worth a total of 81 points.
Final Web Site: 10 points
In-class/Discussion Forums participation: 9 points

Assignments and Methods of Evaluating Student Progress

All assignments are due at the start of the class noted on the schedule. They must be submitted in the appropriate Discussion Forum unless otherwise specified. Late assignments lose .5 point per class late up to a maximum of three (3) late points.

Format

Assignments are to be professionally prepared, documented, cited, and organized. Proofread and spell-check all assignments, include your name, date, course number and description/comments of the assignment.

Extra Credit

There are no opportunities for extra credit. Please plan accordingly

NCCC Grading Scale

Letter GradeTotal Points
A95 - 100
A-92 - 94
B+89 - 91
B85 - 88
B-82 - 84
C+ 79 - 81
C75 - 78
C-72 - 74
D+69 - 71
D65 - 68
F64 - 0

Assignments

Home Page | JavaScript Page | WAMP/MAMP | PHP Page | Loop/Function/Array | PHP File I/O | MySQL Table | PHP/MySQL Table | PHP/MySQL Form | Final

Create Your web2.niagaracc.suny.edu Web Page (9 points)

For this Assignment you will use your existing HTML, CSS, and JavaScript knowledge to create a web page named index.html in your web2.niagaracc.suny.edu account web space which will be used as the starting page for the rest of your Assignments for this course. You may modify an existing index.html file to meet the requirements below. Your web page should should be HTML5 and CSS3 compliant, should be well-designed, user friendly, easy to navigate and utilize the HTML5 tags, CSS3 styles and JavaScript. You will need to upload an image of yourself to your NCCC Web Space. You web page should:

  • Use appropriate <!doctype html> tag indicating that this is an HTML5 web page.
  • Use appropriate <html>, <head>, and <title> tags to give your page a title that contains your name. Appropriate <meta> tags with content describing keywords for the author, text-editor used, and SEO information.
  • Use appropriate HTML5, CSS-styled tags that identify this as your web p age including your name, an <img> tag with appropriate src and alt values, along with width, and height CSS Styles that insert a graphic image of yourself on your page and a brief paragraph about yourself.
  • Display an ordered list of the assignments for this course. In future assignments you will be converting each of these entries to web links that will allow me to view each assignment.
  • Use appropriately identified and styled <div> tags for the various areas of your page layout.

You *MUST* use the W3c validator page at http://validator.w3.org/ to verify your code andhttp://jigsaw.w3.org/css-validator/ to verify your CSS styles.

Your web URL to view your web page is: http://web2.niagaracc.suny.edu/~your-userid/

When you have this Assignment ready for me to view and grade you should post a note in the Home Page Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_new").

Back to Assignments

Add JavaScript to Your web2.niagaracc.suny.edu Web Page (9 points)

For this Assignment you will modify your home page, index.html, in your web2.niagaracc.suny.edu account web space. You will replaces the static HTML5/CSS ordered list with JavaScript. This modification should:

  • Use a JavaScript array store the names of the assignments for this course.
  • Create a JavaScript function that generates HTML5/CSS code to create an ordered list of these assignments. In future assignments you will be converting each of these entries to web links that will allow me to view each assignment.

You *MUST* use the W3c validator page at http://validator.w3.org/ to verify your code andhttp://jigsaw.w3.org/css-validator/ to verify your CSS styles.

Your web URL to view your web page is: http://web2.niagaracc.suny.edu/~your-userid/

When you have this Assignment ready for me to view and grade you should post a note in the JavaScript Page Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_new").

Back to Assignments

Setup Your WAMP (Windows) or MAMP (Mac) Web Server (9 points)

For this Assignment you will download and install either the WAMP (Windows, Apache, MySQL, and PHP) or the MAMP (Macintosh, Apache, MySQL, and PHP) software bundle on a local machine. You will test and verify this installation by creating a screen capture of the start page, the phpInfo, phpMyAdmin, and the SQLBuddy (Windows) or SQLite Manager (Mac) pages. You will then upload these four (4) images (server.png, phpinfo.png, phpmyadmin.png, and either sqlbuddy.png (Windows) or sqlitemanager.png (Mac)), to your NCCC Web Space. You will then create a web page named myserver.html in your account web space. This web page should:

  • Use appropriate <html>, <head>, and <title> tags to give your page a title that contains your name.
  • Use appropriate <img> tags (and values) to display the four (4) above named screen shots indicating your successful installation of WAMP or MAMP.

You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.

You *MUST* use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.

When you have this Assignment ready for me to view and grade you should post a note in the Web Server Setup Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window.
Back to Assignments

Create Your First PHP Web Page (9 points)

For this Assignment you will create a web page named dig112.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.html file. This web page should:

  • Use PHP to generate the following HTML:
    • An appropriate <!doctype html> tag indicating that this is an HTML5 web page.
    • Appropriate <html>, <head>, and <title> tags to give your page a title that contains your name. Appropriate <meta> tags with content describing keywords for the author, text-editor used, and SEO information.
    • Appropriate HTML5, CSS-styled tags that identify this as your web page including your name, an <img> tag with appropriate src and alt values, along with width, and height CSS Styles that insert a graphic image of yourself on your page and a brief paragraph about yourself.
    • You should use appropriately identified and styled <div> tags for the various areas of your page layout.
  • Use appropriate PHP comments throughout your code.

You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.

When you have this Assignment ready for me to view and grade you should post a note in the PHP Page Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments

Create a PHP Web Page That Uses a Loop, a Function, and Arrays (9 points)

For this Assignment you will create a web page named dig112_lfa.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This web page should:

  • Use appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
  • Use PHP to generate the following HTML:
    • An appropriate <!doctype html> tag indicating that this is an HTML5 web page.
    • Appropriate <html>, <head>, and <title> tags to give your page a title that contains your name. Appropriate <meta> tags with content describing keywords for the author, text-editor used, and SEO information.
  • Use PHP to:
    • Create a function that generates an HTML5/CSS table of three (3) columns: the month number, name of the month, and number of days in that month.
    • This function should use PHP Arrays to the store name of the months and days in each month.
    • This function should use a PHP Loop to walk through the months names array and generate HTML5/CSS to display the table.
    • This function should use a PHP conditional (if) test to determine whether the row is odd or even and use appropriate CSS to make the even rows a different background/foreground color than the odd rows.
  • Use appropriate PHP comments throughout your code.
  • Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.

You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.

When you have this Assignment ready for me to view and grade you should post a note in the PHP Loop/Function/Array Page Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments

Create a PHP Web Page That Reads and Writes a Text File (9 points)

For this Assignment you will create a web page named dig112_io.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This web page should:

  • Use appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
  • Use PHP to generate the following HTML:
    • An appropriate <!doctype html> tag indicating that this is an HTML5 web page.
    • Appropriate <html>, <head>, and <title> tags to give your page a title that contains your name. Appropriate <meta> tags with content describing keywords for the author, text-editor used, and SEO information.
  • Use PHP to:
    • Create a function that reads the text file dig112_io.txt which can be downloaded from the Course Documents area of our NCCCBlackboard course.
    • This function should use PHP Arrays to store records (each line is a "record").
    • This function should use a PHP Loop to walk through the months names array and generate HTML5/CSS to display the table.
    • This function should use a PHP conditional (if) test to determine whether the row is odd or even and use appropriate CSS to make the even rows a different background/foreground color than the odd rows.
    • Create a function that writes the text file dig112_ior.txt (reverse order).
    • This function should use PHP for loop to walk through the Array in reverse order and write each Array entry (line/record) to the dig112_ior.txt file.
  • Use appropriate PHP comments throughout your code.
  • Appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
  • You should use appropriately identified and styled <div> tags for the various areas of your page layout.
  • Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.

When you have this Assignment ready for me to view and grade you should post a note in the PHP Input/Output Page Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments

Create and Populate a MySQL Table (9 points)

For this Assignment you will create a well-designed HTML5/CSS page, mysql_db.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.php file. This web page should:

  • Create a form with a simple "Import Months" button.
  • When that button is clicked, call a PHP function that:
    1. Connects to your MySQL server.
    2. Generates MySQL commands to CREATE a MySQL table, monthsTable, with these fields: monthsID (INT), monthName (CHAR, 10), monthDays (INT, 2). Good idea to have your first SQL statement be: DROP TABLE IF EXISTS monthsTable;
    3. If the table CREATE command is successful, call a PHP function (reuse the function from the PHP I/O assignment) that reads the text file dig112_io.txt which can be downloaded from the Course Documents area of our NCCCBlackboard course.
    4. This function should use PHP to generate MySQL commands to INSERT each line (record) in that file, as it is read, INTO the monthsTable.
    5. Displays a "Successful" or "Unsuccessful" message when complete.
  • Use phpMyAdmin to Browse the monthsTable. Save a screen capture of this page and upload that image (mysql_db.png) to your NCCC Web space.

You will modify the JavaScript for this item in your index.html page to add a link to your mysql_db.png that allows me to view your work.

When you have this Assignment ready for me to view and grade you should post a note in the MySQL Table Page Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments

Create a PHP Table Page From a MySQL Table (9 points)

For this Assignment you will create a page, php_mysql_table.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.php file. This web page should:

  • Use PHP to:
    • Create a PHP function that:
      • Connects to your MySQL server.
      • Requests (SELECT) all records in (FROM) the monthsTable.
      • Generates HTML5/CSS to display the results set as an HTML table.
  • This function should use a PHP conditional (if) test to determine whether the row is odd or even and use appropriate CSS to make the even rows a different background/foreground color than the odd rows.
  • Use appropriate PHP comments throughout your code.
  • Appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
  • You should use appropriately identified and styled <div> tags for the various areas of your page layout.
  • Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.

You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.

When you have this Assignment ready for me to view and grade you should post a note in the PHP/MySQL Table Page Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments

Create a PHP Form Page That Writes to a MySQL Table (9 points)

For this Assignment you will create a page, php_mysql_form.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.php file. This web page should:

  • Create one (1) table named contactsTable.
  • This table would have three (3) fields: contactID (INT), contactFrirstName (CHAR, 15), contactLastName (CHAR, 30), contactAddress (CHAR, 30), contactCity (CHAR, 30), contactState (CHAR, 2), contactZipcode (CHAR, 9), contactPhone (CHAR, 10), contactEmail (CHAR, 60), contactComments (LONGTEXT), and contactDate (DATE).
  • Use HTML5/CSS to create well-design form that collects the necessary information.
  • Use PHP to process the form data:
    • Validate each field again. If something doesn't validate redisplay the form with the data entered, a message to the user, and places the user in the offending field and allows the user to correct and re-submit.
    • If the data is valid then use PHP to create MySQL code to insert the data into the contactsTable.
    • Displays a "Thank You" page (that may include the user's name and email, etc.).
    • Displays the form again.
  • Use JavaScript and HTML5 to validate the form fields as the user enters them and uses JavaScript to place the user's cursor back into the field which does not validate (focus()).
  • Use appropriate PHP comments throughout your code.
  • Appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
  • You should use appropriately identified and styled <div> tags for the various areas of your page layout.
  • Note: This assignment can be approached in various ways:
    • You could create three (3) pages:
      1. A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value of the <form> tag calls a separate PHP page, processform.php.
      2. A PHP that process the form data and then displays "Thank You" page (header('Location: thankyou.html');).
      3. A separate HTML page, thankyou.html, that thanks the user for their input.
    • You could create two (2) pages:
      1. A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value of the <form> tag calls a separate PHP page, processform.php.
      2. A PHP that process the form data and then displays a PHP generated HTML page that thanks the user for their input (that may include the user's name and email, etc.).
    • You could create a single PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value of the <form> tag calls itself and has PHP code at the top that decides whether the form has been submitted, and if it has:
      1. Processes the form data.
      2. Uses the PHP header function to call itself and passes a ?thankyou=TRUE parameter.
    • If the thankyou parameter is TRUE then display the a "Thank You" message (that may include the user's name and email, etc.) and then displays the form to allow the user to submit again.
      If it hasn't been submitted and thankyou is not TRUE then simply display the form.
  • Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.

You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.

When you have this Assignment ready for me to view and grade you should post a note in the PHP/MySQL Form Page Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments

Create a Krug PHP Web Site (10 Points)

For this Assignment you will create a well-designed web site demonstrating your understanding and comments about the Steve Krug book Don't Make Me Think! A Common Sense Approach to Web Usability on your local server. This site should:

  1. Contain seven (7) pages: a home page (about this site), 5 pages covering the guiding principles of the book, and a final "Contact Me" form page.
  2. Use a well-designed navigation so that the user can get to any page from any other page in this site. You may want to create a separate krug-nav.php file and use the php_include_once to use the same navigation throughout the site.

You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to grade your work.

When you have this Assignment ready for me to view and grade you should post a note in the Final Krug Web Site Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments

Classroom Policies and Procedures

Attendance Policy

Class attendance is required at all times. If you must miss a class please talk with the instructor. There are no make-up opportunities for assignments or tests.

Cheating/Plagiarism

Cheating or plagiarism will not be tolerated. If detected, the following procedure will be followed:

1. A failing grade of F or 0% will be entered for the test or other educational activity in question. 2. If the activity is a major test, the student will be assigned a failing grade for the course, mid term or final. 3. The College system for reporting cheating or plagiarism will be followed. See Student Handbook.

Ethical Conduct

Each student is responsible for adhering to the Code of Student Conduct as stated in the student handbook. Students involved in any unethical activities in the class are subjected to discipline at the instructor’s discretion. Students are responsible for completion of assigned work. As would be expected of workers in any work environment, students are expected to work independently, to use their initiative in solving problems, and to have professional pride in their work.

Disabilities and Health Issues

Students with disability issues which might make it difficult to complete any assignment, activity or test required in the course should notify the instructor as soon as possible so that appropriate arrangements can be made.

Class Web Sites

Sara Accardi Marissa Banach Brian Bannister
Brittany DAngelo Jesstin Kolacz Darrell McCoy
Brittany Merritt Brian Mrugalski Lauren Sosnowski