Determining database needs

  • Article

In some respects, database projects are like the classic "chicken or the egg" question. You can't save data until you have a place to store it and you can't create the storage area until you understand what needs to be saved. In such cases, it helps to look at how the user might enter and update the data. Here we discuss how users interact with the webpage to associate tags, define custom titles, and so on. In turn, this provides a framework to determine data requirements.

When people visit your photo gallery, they'll view individual images in a webpage that includes a form for entering information about the image, as shown here:

<!doctype html>
<html>
<head>

  <style type="text/css" src="gallery.css"></style>
  <script type="text/javascript" src="stdutils.js"></script>
  <script type="text/javascript" src="ixgallery.js"></script>

  <script type="text/javascript">
     document.addEventListener( "DOMContentLoaded", doPageSetup, false );
  </script>

</head>
<body>

   <div id="divDataForm"><form id="fImageDetails">
      <img id="iGalleryImage" src="images/default.jpg" />

      <label for="inImgTitle">Title:</label> 
      <input id="inIImgTitle" name="newimage" type="text" /><br/>

      <label for="inImgDesc">Description:</label> 
      <textarea id="inImgDesc"></textArea><br/>

      <label for="inImgTags">Tags (comma separated):</label> 
      <input id="inImgTags" type="text" /><br/>
  
      <input type="submit" value="Save" />
      <input type="reset" value="Reset" />
   </form></div><br />

   <div id="divTagCloud"></div><br />
   <div id="divTagResults"></div>

</body>
</html>

In this example, the user is able to enter a custom title for the image, add a description, and to associate tags with the image using a comma-delimited list. When saved, the data entered by the user is broken into two separate entities: a JavaScript object containing the details of the image (the filename, URL, title, and description) and an array containing the tags the user associated with the image.

Utility functions can be used to create these objects and to manage the relationship between the form and the underlying database objects, as shown next:

This example defines three functions:

function collectFormData ( strImageURL ) {
// Gathers information from the form and packages it 
// for the database.

   var d = document;
   var oImageDetails = { };
   oImageDetails.ImageTitle = d.getElementById( 'inImgTitle' ).value;
   oImageDetails.ImageDesc = d.getElementById( 'inImgDesc' ).value;
   oImageDetails.FileURL = d.getElementById( 'iGalleryImage' ).src;
   oImageDetails.FileName = reduceFilename( oImageDetails.FileURL );

   var sTagCDL = d.getElementById( 'inImgTags' ).value;
   var aImageTags = sTagCDL.split( /\s*,\s*/ );
   saveImageDetails( oImageDetails, aImageTags );
} 

function updateFormData( oImageDetails, aImageTags ) {
// Updates the form with data passed through the parameters.

   var d = document;
   d.getElementById( 'inImgTitle' ).value = oImageDetails.ImageTitle;
   d.getElementById( 'inImgDesc' ).value = oImageDetails.ImageDesc;
   if ( aImageTags.length > 0 ) {
      d.getElementById( 'inImgTags' ).value = aImageTags.join( ', ' );
   }
}

function reduceFilename( sFullFilename ) {
// Given a URL, returns just the filename.
   var sResult = "";
   if ( sFullFilename != "" ) {
      var aTokens = sFullFilename.split( '/' );
      if ( aTokens.length > 0 ) {
         sRetval = aTokens[ aTokens.length - 1 ];
         }
   }
   return sRetval;
}
  • The collectFormData function gathers image details and places them into two separate objects:
    • A JavaScript object that represents the individual details describing the image.
    • An array that collects the tags associated with the image.
  • The updateFormData function takes the details passed in the parameters and updates the form on the webpage with the appropriate information.
  • The reduceFilename function is a utility function that extracts the filename from a fully-qualified URL.

As you review the examples in this series, you'll encounter a number of utility functions, including:

  • The getElementObject function, which uses the getElementById method to obtain a reference to an element object using the value of the element's id attribute.
  • The setTextContent function, which updates the textContent property of an element object.
  • The updateResults function, which logs notification messages to the user.
  • The handleError function, a general purpose error and exception handler.
  • The handleRequestEvent function, a general purpose event handler.

These utility functions perform common JavaScript operations, such as error handling, user notification, feature detection, and so on. Utility functions can be written in many ways, depending on the needs of the specific application and your personal coding style. To simplify the examples, the implementation of these functions is not shown.

At this point, it's possible to outline the database needs for this project. Specifically, there needs to be a way to:

  • Store image details as objects containing attributes.
  • Store an array of tags associated with an image.
  • Locate a given image in the database and return its details.
  • Locate a set of tags associated with an image.
  • Return a list of all tags in the database.
  • Return a list of all images associated with a given tag.

In Creating and opening IndexedDB objects, you learn how to set up IndexedDB objects to meet these needs. You'll also see the implementation of the doPageSetup function called from the DOMContentLoaded event handler.

Contoso Images photo gallery

Creating and opening IndexedDB objects

How to create a tag cloud using IndexedDB

Internet Explorer 10 Samples and Tutorials