View source for BTC640/ProcessingPrereq

= Lecture =

Before we dive into processing we have to make sure you remember some of the stuff you learned in the following courses:

{| class="wikitable" border="1"
! Course !! BSD !! CPA
|-
| XHTML and JavaScript || [https://scs.senecac.on.ca/course/bti220 BTI220] || [https://scs.senecac.on.ca/course/int222 INT222]
|-
| Server-side web programming || [https://scs.senecac.on.ca/course/bti320 BTI320] || [https://scs.senecac.on.ca/course/int322 INT322]
|-
| Java || [https://scs.senecac.on.ca/course/btp400 BTP400] || [https://scs.senecac.on.ca/course/jac444 JAC444]
|}

This week we're going to make sure you remember what you need from those courses and learn some new things too.

== HTML ==

This is a pretty basic topic, and every developer no matter in what field should know it - both because it's so simple, and because you'll certainly use it in your career.

We'll look at the most common HTML tags, inluding a, b, body, div, form, hX, img, input, li, noscript, p, table, and ul.

What makes HTML XHTML is more strict rules about how tags are used, and stricter (but not enforced) rules about formatting.

In XHTML formatting is preferably done using CSS. We'll look at some CSS examples.

== JavaScript, DOM ==

This trivial programming language has become quite important, and can be quite complex. We will not need to learn the most complicated things about JS such as closures, but we'll need a good working knowledge of the language.

Basics: <script> tags, .js files, alerts, variables, conditions, for and for..in loops, data types, pass by value and pass by reference.

Tools: the Firefox error console, firebug.

More serious work can be done with JS when using DOM methods. We can manipulate, create, show, hide, move almost anything on a webpage using JS and the DOM.

Browser compatibility: used to be a very serious issue, with IE not supporting any standards. These days all the recent versions of desktop web browsers support pretty much the same technologies. We have a new problem though, and that's mobile devices. Often mobile browsers, even if capable of interpreting JS, have it turned off to save bandwidth.

== Java ==

The Processing language is actually a wrapper around Java, so most things that work in Java will work in Processing. If you're working on porting an existing Processing project over to Processing.js you have to understand enough Java to know what the original author was trying to do.

Processing.js itself is a kind of translator - it reads Processing (Java) code and coverts it to JavaScript code. This is possible to do to an extent and many Processing apps will run just fine in Processing.js but there are differences that can require porting work. For example there are no data types in JS, so if your Java logic depends on data types (e.g. integer rounding) you will need to modify that code to work in JS.

== PHP ==

Much more can be done in a webpage if content is generated dynamically on the server. We'll review some PHP programming basics.

PHP doesn't have to generate only HTML. It is quite reasonable to generate JavaScript in PHP as well.

== JSON ==

You can think of JSON 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.

JSON is a great way to transfer data structures from the server to the client and back. I will show you a real word example of how it is used.

= References =

* http://en.wikipedia.org/wiki/Html_tags
* http://www.quirksmode.org/dom/w3c_core.html
* http://json.org/
* http://www.json.org/js.html
* http://stackoverflow.com/questions/920930/how-to-create-json-by-javascript-for-loop

= Lab =

You are welcome to collaborate with other students and use online resources, but please make sure the code you submit you wrote yourself.

== Part 1 - client side ==

In the lab you're going to practice your JavaScript skills, JSON, and your understanding of the DOM. Implied in that is your understanding of HTML.

* 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 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 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 an old school submit button but make sure the 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 are likely vulnerable to.