COAP:COAP-2100/week7-2011

COAP 2100

COAP 2100 Archive

COAP:COAP-2100

COAP:COAP-2100/exams

COAP:COAP-2100/term project

COAP:COAP-2100/week1

COAP:COAP-2100/week2

COAP:COAP-2100/week3

COAP:COAP-2100/week4

COAP:COAP-2100/week5

COAP:COAP-2100/week6

COAP:COAP-2100/week7

COAP:COAP-2100/week8

Week 7 COAP 2100

Topics Covered

• Web server architectures
• Running a webserver on your own PC
• HTML5 for information ...
• HTML forms tutorial (continued)
• XML principles and demo of example applications, in particular SVG
• The concept of server-side scripting and web applications

Teaching materials

• HTML forms tutorial (includes both JavaScript and server-side scripting with PHP)
• HTML5 (just FYI)
• internet-intro.pdf
• Editing XML tutorial (Chapter 2 "XML Principles" only)

Monday

What do we mean by the Internet (part II - web application architectures)

• Slides used: internet-intro.pdf. I also just may use pictures from the HTML forms tutorial.
• Internet tutorial (first part of the slides above spelled out ...)

Using a web server

• Short demo of Modular Webserver System, including installation and configuration discussion
• To start the webserver, go to the mowes directory and click mowes.exe. Make sure that no other web server is running. Also shut down applications like Skype that do grab the "webserver port".
• Finding errors with php
  • Either look at the log file, i.e. ./apache2/logs/error.log
  • or make the following change to file ./php5/php.ini on line 538 (needs server restart):

display_errors = On

• Web hosting (demo by a student ?) and file transfer. What's different between a web server on a PC, a web hosting provider, and a server you own.
• If the web server or the mysql server doesn't want to start: You like have other ones running. Kill them !
• If you see "Access denied": Go to the www directory and kill the .htacess file.

Processing forms with PHP - a few things that you should know

• We shall make modifications to the example discussed in Processing forms with PHP
• Make sure to understand that you must either look at log files or change the PHP configuration if you plan to develop some PHP code and deal with errors.
  • Log file location: apache2/logs/error.log
  • If you change the php.ini file or one of the options in the Mowes control panel, you will have to restart the server. Also see the access denied problem above.
• Looking at the PHP configuration and the data that PHP will receive:
  • Insert the following line of code at the end of your PHP code: phpinfo(); and look at the PHP Variables (reload the file and then scroll down to end).

Playing with HTML and PHP

• Make sure that the webserver and the database is started (Modular Web Server icon in the status bar)
• Create a new quiz subdirectory under the mowes/www directory. The web server only will serve contents from this place
• Create two files: quiz.html and quiz-processing.php using the example code from Processing forms with PHP. You also may copy these from here. Grab the html and the *.phps file (not the *.php) and rename the *.phps to php.
  • If you are using Kompozer: Copy/Paste into the source window. Also, you probably need Kompozer 0.8xbeta to edit the PHP file. Else just use a text editor like NoteTab.
• Look at the files by opening the following URL: http://localhost/quiz/
• Make changes to the HTML and PHP and reload.

Wednesday

Topics

• HTML forms processing with PHP (continued)

• Short introduction to XML
  • Basic XML principles (see XML and/or Editing XML tutorial)
  • Short demo of important document standards like SVG, EPub, Open Packaging Conventions and Office Open XML (docx), etc.

Playing with some SVG

• Create a little drawing with SVG-edit, an online editor implemented in JavaScript
• Find a graphic in http://openclipart.org/, save it, then display it in your browser. Make changes with Inkscape.
• (If time left), demo of the XML Exchanger Editor.

The future of HTML

• Not covered since we don't have HTML5 browsers installed
• You may read HTML5 and if you can, install either Chrome 9beta, IE 9Beta, FF 4Beta or Opera 11 on your own PC. HTML5 is the future and more advanced students ought to start learning it...

Homework 7

Task

Create a PHP program that can process a simple quiz made with radio buttons. In addition, it should include 1-2 text input fields that ask for a name. Start from the example presented in the HTML forms tutorial.

• You can reuse elements from the JavaScript (hw 6) exercise. You also could relate the topic of the quiz to the term project.
• You may use questionnaire items from other sources, but do not plagiarize. If you reuse assets from another source, cite the source. Plagiarism is simply not accepted and will be sanctioned.

Note: CS students familiar with HTML forms and PHP can use other HTML forms but be warned that, for example, processing checkboxes is more difficult.

Tips

• Validate your HTML code
• Use the server log files for finding PHP errors or reconfigure PHP as explained above and then keep the following line at the start of your PHP code:

error_reporting(E_ALL);

Evaluation criteria

• Ergonomics and content (does the quiz "make sense" and is it interesting)
• User experience (does it look good)
• HTML and CSS code (is it valid)
• Style and presentation
• PHP (is your code running, does it compute ok)

Due

• Before Wednesday week 8 class

Submission

• Submit the files (*.html, *.php and if needed *.css, pictures, etc.) to the world classroom