Open main menu

CDOT Wiki β

Changes

BTC640/ProcessingPrereq

1,540 bytes added, 14:07, 5 March 2012
JSON
== JSON ==
You can think of JSON is as a data structure. It can be modified using native JavaScript methods, and many languages have libraries that allow you to create a JSON string from an object, or even create a native object from a JSON string.
The [http://json.org/ JSON website] has a description/illustration of how you can store strings, numbers, arrays, and associative arrays in JSON.
= Lab =
In the lab you're going You are welcome to practice your JavaScript skills, JSONcollaborate with other students and use online resources, and your understanding of but please make sure the DOM. Implied in that is your understanding of HTML. We're not going to do any PHP or Javacode you submit you wrote yourself.
Create a webpage (on your local machine, no need to put it up on a server) where the user can input a variable number of people's contact info. By default only one set of fields (for one record) will show up. When the user clicks the "+" button an extra field is to be added at the bottom.== Part 1 - client side ==
Make sure even rows have white background In the lab you're going to practice your JavaScript skills, JSON, and odd rows have a gray background. Set your understanding of the background using the appropriate DOM.style attribute for the appropriate Implied in that is your understanding of HTML/DOM element.
* Create a webpage (on your local machine, no need to put it up on a server) where the user can input a variable number of people's contact info.* By default only one set of fields (for one record) will show up.* When the user clicks the "+" button an extra field is to be added at the bottom. * Make sure even rows have white background and odd rows have a gray background. Set the background using the appropriate .style attribute for the appropriate HTML/DOM element. * Write a JavaScript function that will be executed when the user clicks the submit button(this should be an input type "button", not "submit"). That function should create a JSON object from all the fields (filled-in or not) on the page; then use JSON.stringify() to print your variable into the field just below the form (do not use submit an alert).
This is a sketch to quickly give you an idea of what it should look like:
[[Image:lab6.png]]
* It needs to work in Firefox. Normally you would have to worry about browser compatibility but we won't have time for that in the lab.* Submit your HTML file (and if your JS is separate - your JS file too). If you choose to use jQuery or another JS library - please submit that as well, unless you're referencing it online. == Part 2 - server side == This part is only required for degree students. Now we'll add a server side component. * Create the file mailform.php in your public_html folder on matrix. You can collaborate with other students use Zenit or another system if you prefer.* Add an "Email" button to the page you created in step 1 and make sure when that button is clicked - the data will be passed to your php file on the server. Use the JavaScript .submit() function or use online resources, an old school submit button but please make sure the code you submit data added dynamically is part of the form.* Make sure your JSON is part of the data sent to the server. That will happen automatically if your JSON field is part of the form.* In your PHP use the json_decode() function to extract all the names from the JSON.* Please try to email yourself the list of names using the PHP mail() function. This may not work, depending on the setup of the PHP server and your mail server. If it doesn't, that's ok - just pretend that it works. * Submit your php file to Moodle. Later we're going to look at XSS, header injection, and SQL injection which the scripts you just wrote yourselfare likely vulnerable to.