Before we dive into processing we have to make sure you remember some of the stuff you learned in the following courses:
|Server-side web programming||BTI320||INT322|
This week we're going to make sure you remember what you need from those courses and learn some new things too.
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.
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.
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.
Much more can be done in a webpage if content is generated dynamically on the server. We'll review some PHP programming basics.
The 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.
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
- 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.
This is a sketch to quickly give you an idea of what it should look like:
- 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.
- 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.