Tutorial by Jazzo the Great
DataBeast is a javascript tool for displaying XML databases on webpages. It takes data from an XML document and outputs it as an HTML table which can then be manipulated using CSS. The benefits of this over simply making an HTML table, is that multiple webpages can display the same database in a different manner and don't have to be updated separately. DataBeast is a javascript file that allows the table to be generated using a simple one-line command. This command can also be used to control how much, or which portions of the table are to be displayed. Before using DataBeast, I suggest having a knowledge of the following coding languages:
DataBeast is currently compatible with all current versions of major browsers. An example of DataBeast tables can be found here. All three tables are from the same database but display different parts. Everything will be explained in the tutorial to follow.
DataBeast requires a simple and easy to learn XML structure. It is similar to the structure of HTML tables but with different terms and syntax. Here is the XML file used in the example file on the previous page:
<?xml version="1.0" encoding="UTF-8"?>
<databeast>
<head>
<header>Name</header>
<header>Gender</header>
<header>Date of Birth</header>
<header>Favorite Color</header>
</head>
<body>
<entry id="jsr">
<item>Julian Rosenblum</item>
<item>Male</item>
<item>06/20/1996</item>
<item>Blue</item>
</entry>
<entry id="psr">
<item>Phoebe Rosenblum</item>
<item>Female</item>
<item>07/17/2001</item>
<item>Pink</item>
</entry>
<entry id="jsl">
<item>Joanne Lessner</item>
<item>Female</item>
<item>09/23/1965</item>
<item>Purple</item>
</entry>
<entry id="jdr">
<item>Joshua Rosenblum</item>
<item>Male</item>
<item>05/10/1963</item>
<item>Green</item>
</entry>
</body>
</databeast>
It looks complicated but is actually a simple structure. The top line is the XML declaration that appears at the top of any XML document. Below is the "databeast" tag which is the root tag. All content is inside of the "databeast" element. The "head" element signifies the declaratoin of the column heads. Within the "head" element are "header" tags. Each "header" tag is the header of the column and is displayed in a "th" element by DataBeast. The order is important, because that is the order the columns are referenced in the database. After the "head" element is the "body" element. The "body" of the database is the main information. Within the body element are "entry" elements. Each "entry" element can have an "id" attribute, but it is not required. An entry's ID can be referenced from the DataBeast javascript. The significance of the "id" attribute will be explained in the "Specific Entries" section of the tutorial. Within each "entry" element is an "item" element. The "item" element refers to a cell within an entry. The order of the "item" elements represent which header they will fall under. That is the basic structure of the XML document. You've finished the XML part, now on to the HTML and the Javascript.
A basic table simply displays the entire database as a table. The code is simple:
The top line is the "div" element in which the table can be placed. You can style it with CSS. The table tags that DataBeast inserts can also be styled with CSS. The next line is very important. That is the code that loads the DataBeast javascript file. You should copy and paste it as is. Below that is the javascript that you write, but because of DataBeast, you only need one line of code. The "document.getElementById('table').innerHTML" part is simply telling the browser where to insert the table. The id can be anything but it has to be the same in the HTML and the Javascript. The "dataBeast" function has only one required argument, and that is the url to the XML database it is using. It must be in single or double quotes. Replace "[YOUR DATABASE URL]" with your actual database URL. You've now learned all that is required to use DataBeast. The next two tutorials are simply ways of going more in-depth with your database.
If you don't want to embed the entire database, you can select how many of the entries you want to embed. It is as simple as adding another argument to the dataBeast function:
In this example, DataBeast will only show the first three entries of your database. The number 3 can be replaced with any number you like but should NOT be in quotes.
If you want to be even more specific then how much of the table to embed, you can pick and choose which specific entries are embedded in your HTML document. You reference these entries by their "id" attributes in the XML file. These IDs are then put in as arguments to the dataBeast function:
"ID" and "anotherID" represent IDs of different entries. In this example, only two entries would be displayed: then entry with the ID of "ID" and the entry with the ID of "anotherID". You can have as many or as few (at least one) of these ID arguments. Only the IDs you specify as arguments will be displayed.
Tutorial by Jazzo the Great
