WD-Assign11

Web Site Development

Assignment11 of 14 due in 1 week (note it may take longer - so be patient with yourselves)

  • Updated: 07/18/2017 by http://JilMac.com

  • eMail: Jil@JilMac.com or JilMac.MacRand@gMail.com

  • Phone: 802-254-8628 M-F 6am-8pm, S-S 8am-8pm or for additional hours call to setup

Read: Chapter 16 Forms TextBook Code Examples: http://htmlcssvqs.com/8ed/examples/#chapter-16

The PHP files on the TextBook's site are listed as .txt, but they are actually .php and to run them you need to substitute .txt to .php

Please note - that when you put these files on our Student Server you will be able to see the .php run and the following messages: This script needs to be run on a web server to work. Open this file in your text editor and read the comment that begins with "TO TEST THIS SCRIPT" for additional information.

Research: Forms - find 3 tutorials on Google Forms from YouTube, Create the Forms and embed them on your Google Site and give me 100+ words what you learned.

Extra Credit OR substitute for part of an assignment (note: 1 point for each 100 words) or create HTML forms for B+A;s : For those students who are really interested in creating HTML/CSS forms - do this tutorial:

Watch: Jen Kramer who teaches at Harvard Extension explain about HTML5 & CSS3 Forms

https://thegymnasium.com/courses/GYM/007/0/about

note: you will have to create an account with http://thegymnasium.com

If you are not comfortable giving your email then use your CCV email ... that is what it is for!

1 extra credit point for giving me 100 words what you thought of the tutorial

2 extra credit points if you can get the form working in your STWEB space, (there is a working copy in jam08260 directory)

Jen's tutorial is only for creating a FORM, there is no FIELD Verification, and the data does NOT get stored.

Workshops & Videos:

Google Forms - there are TONS of excellent videos in YouTube - here are some I found helpful:

1. Create A Google Form, Add it to a Google Site, Create Statistics https://www.youtube.com/watch?v=cm3KyqbaMJA

Advanced Questions, Headers, ect. https://www.youtube.com/watch?v=bsJbVRiB9aM

  • To create the form: in Google > Double-Click the Rubics Cube icon >

    • Click: Drive > New > More > Google Forms Create Form > Add Fields > Save

  • To Insert a form into a Google Site: Insert > Form > Select Form > Save > Save

    • You can either create a NEW Page or embed it into your Assignment 11 page.

  • To view Statistics in a Spreadsheet Form: Form > Show Summary of Responses https://www.youtube.com/watch?v=PrPjRo-QYBs

  • Edit the Form: More Actions > Embed > Paste into an HTML file

  • Customize the LOOK of your form (Fonts, Colors, Background Image, Borders, etc)

Google WebSite documents:

Create, edit, and format

Embedding a Google Form into an HTML page-

    1. Open the form.

    2. In the top right, click Send.

    3. At the top of the window, click the Embed icon .

    4. To copy the HTML that appears, click Copy.

    5. Paste the HTML into your website.

Before+After: do 3 Before & After examples

Note: there is only 1 example in Chapter 16 here is JilMac’s After code.

a ZIPPED file below will contain all the Chapter 16 examples:

http://jam08260.classweb.ccv.edu/WebDev/Assignment11/chapter-16/form-after.html

also Do 2 Google Forms - be sure to use ALL the different KINDS of Fields in each form.

put links to them on your Google Web Site's Assignment11 web page.

When you are ready for JilMac to grade you, put a LINK to the Google Assignment11 web page in Moodle.

NOTE: the examples in Chapter 16 to DISPLAY the data you input in your HTML Form - is a .php Server File

If you look at W3Schools their examples use a .asp Server File because they are a Microsoft system and that is a similar equivalent Programming Language.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_method

It may be a good time to begin the conversation about Client Side and Server Side programming and the Web.

Newsletter Servers (similar in function to Google Forms)

Please note - there is NO Assign11 Word Document everything is on this page.