MM 270
Writing in Multimedia - Week 5 Lecture Topics


The following topics were written and organized to be read in order.

XML

Chapter 20 provided a useful example of how you can use an XML file.

XML is really a data storage markup language, as opposed to HTML, which is a Web page creation markup language. XML is basically a text-based database. This article from Developer's Tutorial has a useful overview of XML:

eXtensible Markup Language or XML as its commonly called is primarily used to facilitate the interchage of information between environments that are not compatible natively (that is, they don’t support each other’s default file format). An example here would be a database server that doesn’t import Access files and has its own propriety data format.

The key word in XML is extensible. This means that the structure of the file is left entirely up to the creator. There are simply a few rules that you must follow to create XML (one such rule being that there can be only one root element). Other than that, the end user has free reign as to the tags that he may use, attributes, etc.

One more thing about XML that we must understand is that there is no tag set for XML. Like HTML, which has a set of tags (<p>, etc.), XML has no pre-set tags. It is up to the end user to define tags for a file. In XML, a tag can be almost anything:

XML:
1. <jim>info about jim</jim>
2. <address type="home">555 Main Street</address>

In XML, an element is an open and close tag group including its text, like <jim>text here</jim>. An element is also referred to as a node.

A few more rules about XML and we will be on our way to our PHP code. XML documents must be well-formed. This means that there can be only one root element (the top most element), all child elements must be nested properly, and all elements must have end tags.

This is proper nesting: <p>foo<b>bar</b></p>

This is not proper nesting: <p>foo<b>bar</p></b>

Once these simple rules are understood, we can start creating a XML document that a XML parser will understand.

You can find more related information here:

http://www.developertutorials.com/tutorials/php/parsing-xml-using-php4-050816/page2.html

Also, consider this more in-depth article excerpt from IBM:

XML fundamentals
Some background about XML will allow you to understand its importance to the PHP developer and allow you to understand and create straightforward XML documents.

About XML
Extensible Markup Language (XML) is described as both a markup language and a text based data storage format, depending on who you talk to. It is a subset of Standard Generalized Markup Language (SGML); it offers a text-based means to apply and describe a tree-based structure to information. XML serves as the basis for a number of languages/formats, such as Really Simple Syndication (RSS), Mozilla's XML User Interface Language (XUL), Macromedia's Maximum eXperience Markup Language (MXML), Microsoft's eXtensible Application Markup Language (XAML), and the open source Java XML UI Markup Language (XAMJ). As the many flavors of XML demonstrate, XML is a big deal. Everyone wants to get on the XML bandwagon.

Writing XML
XML's basic unit of data is the element. Elements are delimited by a start tag, such as <book>, and an end tag, such as </book>. If you have a start tag, you must have an end tag. If you fail to include an end tag for each start tag, your XML document is not well-formed, and parsers will not parse the document properly. Tags are usually named to reflect the type of content contained in the element. You would expect an element named book to contain a book title, such as Great American Novel (see Listing 1). The content between the tags, including the white spaces, is referred to as character data.

Listing 1. A sample XML document

<books>
  <book>
   <title>Great American Novel</title>
   <characters>
    <character>
     <name>Cliff</name>
     <desc>really great guy</desc>
    </character>
    <character>
     <name>Lovely Woman</name>
     <desc>matchless beauty</desc>
    </character>
    <character>
     <name>Loyal Dog</name>
     <desc>sleepy</desc>
    </character>
   </characters>
   <plot>
    Cliff meets Lovely Woman.  Loyal Dog sleeps, but wakes up to bark
    at mailman.
   </plot>
   <success type="bestseller">4</success>
   <success type="bookclubs">9</success>
   </book>
  </books>

XML element and attribute names can consist of the upper case alphabet A-Z, the lower case alphabet a-z, digits 0-9, certain special and non-English characters, and three punctuation marks, the hyphen, the underscore, and the period. Other punctuation marks are not allowed in names.

XML is case sensitive. In this example, <Book> and <book> describe two different elements. Either is an acceptable element name. It's probably not a good idea to use <Book> and <book> to describe two different elements, as the possibility of clerical error seems high.

Each XML document contains one and only one root element. The root element is the only element in an XML document that does not have a parent. In the example above, the root element is <books>. Most XML documents contain parent and child elements. The <books> element has one child, <book>. The <book> element has four children, <title>, <characters>, <plot>, and <success>. The <characters> element has three child elements, each of which is a <character> element. Each <character> element has two child elements, <name> and <desc>.

In addition to the nesting of elements that create the parent-child relationships, XML elements can also have attributes. Attributes are name-value pairs attached to an element's start tag. Names are separated from values by an equal sign, =. Values are enclosed by single or double quotation marks. In Listing 1 above, the <success> element possesses two attributes, "bestseller" and "bookclubs". There are different schools of thought among XML developers about the use of attributes. Most information contained in an attribute could be contained in a child element. Some developers insist that attribute information should be metadata, namely information about the data, and not the data itself. The data itself should be contained in elements. The choice of whether to use attributes or not really depends on the nature of the data and how data will be extracted from the XML.

Strengths of XML
One of XML's good qualities is its relative simplicity. You can write XML with basic text editors and word processors, no special tools or software required. The basic syntax for XML consists of nested elements, some of which have attributes and content. An element usually consists of two tags, a start tag and an end tag, each of which is bracketed by an open <tag >and a close < /tag >. XML is case sensitive and does not ignore white space. It looks a lot like HTML, which is familiar to a lot of people, but, unlike HTML, it allows you to name your tags to best describe your data. Some of XML's advantages are its self-documenting, human, and machine-readable format, its support for Unicode, which allows for internationalization in human language support, and its stringent syntax and parsing requirements. Unfortunately, UTF-8 is problematic in PHP5; this shortcoming is one of the forces driving the development of PHP6.

Weaknesses of XML
XML is wordy and redundant, with the attendant consequences of being large to store and a huge consumer of bandwidth. People are supposed to be able to read it, but it's hard to imagine a human trying to read an XML file with 7 million nodes. The most basic parser functionality doesn't support a wide array of data types; therefore, irregular or unusual data, which is common, is a primary source of difficulty.

Well-Formed XML
An XML document is well-formed if it follows all of XML's syntax rules. If a document is not well-formed, it is not XML, in a technical sense. An HTML tag such as <br> is unacceptable in XML; the tag should be written <br /> to be well-formed XML. A parser won't parse XML properly if it is not well-formed. Additionally, an XML document must have one and only one root element. Think of the one root element as being like an endless file cabinet. You have one file cabinet, but there are few limits as to what and how much you can fit into the file cabinet. There are endless drawers and folders into which you can stuff information.

You can read the complete article here:

http://www.ibm.com/developerworks/library/x-xmlphp1.html

 

 

Jump back up to the top

 

 

Server-Side Scripts

Server-side scripts or scripting languages are scripts that are contained in files that will execute (run) on the server and affect the behavior of the server, as opposed to client-side scripting languages like Javascript that are executed by your browser and run on your personal computer. After the server-side script file does what it needs to on the server, it sends the results back to the client-side (the Web page you are viewing in your browser).

Server-side scripts cause the server to spend more time dealing with their file activity, however because the scripts are executed on the server, the browser that displays the file does not need to support scripting at all. Also, because the files exist on the server and may not be directly accessible from your browser, they are more secure and can be protected from unauthorized access more easily.

The W3Schools.com site has this to say about Server-Side Scripts:

What can Server Scripts Do?

You can read the complete article and learn more about server-side scripts here:

http://www.w3schools.com/web/web_scripting.asp

 

The two most popular server-side scripting languages are PHP (open sources) and ASP or ASP.Net (Microsoft). There are many others as demonstrated in this Web Platforms information table.

ASP

ASP or Active Server Pages is Microsoft's version of a server-side scripting language. You can identify ASP by the following major distictions:

 

PHP

PHP or PHP Hypertext Preprocessor (yes, odd that the first P stands for PHP) is an open source (free to use by anyone) server-side scripting language. You can identify PHP by the following major distinctions:

CFML

Currently an Adobe product, ColdFusion's related CFML or ColdFusion Markup Language is a server-side scripting language that you can identify by the following major distinctions:

<cfset msg = "Hello World!" />
<cfoutput>#msg#</cfoutput> 

 

Use of Server Side Scripts

You will often use a server-side script file in conjunction with a Web page HTML form. The form can send data to the server-side script file, which then processes the data to send it along to a database, back to another Web page, or out to an e-mail address.

At PCC, the Student Web Server (SWS) supports limited ASP and an older version of it as well. Unfortunately, the configuration of the SWS doesn't allow data submission from forms or sending e-mail messages. We'll be using PHP with either your server (if you have or can get one) or with my host, Netfirms. (See below on more information about using my Netfirms account to test your PHP scripts with forms.)

PCC offers more in-depth courses in the use of ColdFusion, ASP and PHP. Check the current class schedule and catalog for the most recent information.

 

Jump back up to the top

 

 

Making Forms Work

To make forms work, you have to work with two files: the HTML form in a Web page file and the server-side script file that processes the submitted form data. The browser handles the Web page form and how it captures data (client-side) and the server-side script receives the data and sends it along from the server (server-side).

Be sure to follow the instructions in Chapters 13 and 20 to set up your form.

Instructor Note:
It's very important to remember: a form consists of one form tag, and all of the input, textarea and Spry fields are nested inside that one form tag . That's ONE FORM TAG. You are doing it correctly in Dreamweaver if, in Design view, you have only one red dashed box surrounding all of the fields of the form.

Consider the disaster if you have multiple form tags. If your Submit button is in a separate form tag by itself, it has no relationship to the fields that are in other form tags. When you click that Submit button, it submits nothing.

Unfortunately, in Dreamweaver Design, if you forget to start off with a form tag, everytime you insert a field, it automatically surrounds it with a new form tag... a new form tag for EVERY field... thus making your form useless... ugh!

To make the form work is another matter and the textbook doesn't describe this process.

There are two important attributes used with the form tag that you need to work with, method and action:

  1. The method attribute can have the values "GET" or "POST". Get means to pull information from a database or other source and this is the value used by search engine forms to pull search data into your Web browser. Post means to send data from the form and this is typically used with a form that is meant to send an e-mail message or put data into a database.

  2. The action attribute should include the name of the server-side script file. To make forms work, you have to reference the server-side script file in the action value -- be sure to include the location location if the server-side script file is not in the same folder as the Web page the form is on. The form on the Web page will send the data entered and submitted to the server-side script file for processing. This is why you should name the file form_processor.php or something that describes the action it's performing.

Consider this form example with PHP processing file on my Netfirms site. Remember, you are working with two files: the HTML form and the PHP script file that processes the submitted form data.

Here's the HTML of that form page, form_example.html above. Feel free to copy this into an HTML color-coded Code view to examine it in Dreamweaver. Of particular importance are the method and action attributes in the form tag.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Form Example</title>

</head>

<body>

<h1>Form Example</h1>

<form name="input" method="post" action="form_processor.php">

Type your<br />

First Name:<input type="text" name="fname" size="15" /><br />

Last Name:<input type="text" name="lname" size="20" /><br />

<input type="submit" value="Submit">

</form>

<p>If you click the "Submit" button, you will send your input to a new page called form_processor.php</p>

</body>
</html>

 

 

Here's the PHP file, form_processor.php, that is referred to in the action attribute in the form tag above. Feel free to copy this into an HTML color-coded Code view to examine it in Dreamweaver. Note that the PHP script is placed directly into the HTML framework of this page. Also, note that in Code view, PHP script is color-coded red. Even though the file has a .php extension, it is still dealt with like a Web page by the Web browser thanks to the doctype declaration and the proper use of XHTML.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Processed Response</title>
</head>

<body>
<h1>Form Processed Response</h1>

<p>Hello <?php echo $_POST["fname"]; echo " "; echo $_POST["lname"]; ?>!</p>

<p>You wonderful person, you!</p>

</body>
</html>

 

 

Instructor Note:
Remember, even though Dreamweaver can handle copying and editing the PHP code, you can't preview or test it in Dreamweaver. PHP, as with all server-side scripts, must be uploaded to a server that allows that script to function properly -- yes, that's why they are called server-side! Netfirms, my server host, allows PHP script.

This is a very basic use of a form to send data to a server-side script file for processing.

A better and more useful example is in the Nifty project. You will be creating a contact form to capture and send data from a form to the server-side script and from their it will process the data and e-mail it to a pre-established e-mail address. Because the pre-established e-mail address is in the .php file, it cannot be accessed by the client-side browser, so that e-mail address will remain confidential.

Keep in mind that the SWS doesn't have the SMTP (Simple Mail Transfer Protocol) set up, so making forms e-mail from the server doesn't work properly. For the purposes of testing a form, feel free to use the my Netfirms server -- I've set up an area for students to use. This Netfirms server is a LAMP platform, so you will be using PHP as your server-side scripting language to send e-mail messages from the form. See the instructions below to use my Netfirms server.

There are many online resources to generate form HTML and the related server-side script processing files. Check out the following address for a simple form generator that automatically generates your choice of PHP or ASP server-side script code and the form HTML for the purpose of sending data by e-mail from the form:

Tele-pro.co.uk Website Contact Form Generator

 

Jump back up to the top

 

 

Netfirms PHP Server

For the past few years, I've had my gregkerr.net site hosted by Netfirms.

Below is the login information for the secondary account I've established on my Netfirms server.

To use this Netfirms server

  1. Log on to the server through this ftp address:

ftp://gregkerr.2@gregkerr.netfirms.com

  1. Create a folder (your name) to put the files you are testing. For example, if your name is Jane Doe, create a folder called janedoe on the Netfirms server.

  2. Create a site definition for this server in Dreamweaver, using this information:

Site name: Netfirms

Type of upload: FTP

FTP address: gregkerr.netfirms.com

Login (user) name: gregkerr.2

Your folder (see 2 above): /yourname/

Password: a43f9

  1. To view your Web pages, use the following address in a browser

http://www.gregkerr.net/student/yourname/yourfile.html

Note that your user folder is a sub-folder of the student folder which you won't see when you FTP to that server. The Web page yourfile.html is the name of the file you uploaded that you are testing.

  1. Remember to stay logged on to this server briefly because only one student can use this account at a time. If you can't access it, someone else is probably logged on, so wait 15 minutes or so, then try again.

Feel free to use this Netfirms secondary account (within reason!) to test some other PHP form processing.

 

Jump back up to the top