Architecture & DesignFine Tuning the Development Process: Adding a Web Interface to the Electronic...

Fine Tuning the Development Process: Adding a Web Interface to the Electronic Notebook content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.


This is the fortieth installment in a series of articles about fundamental object-oriented (O-O) concepts and related object-oriented technologies. The material presented in these articles is based on material from the second edition of my book, The Object-Oriented Thought Process, 2nd edition. The Object-Oriented Thought Process is intended for anyone who needs to understand basic object-oriented concepts and technologies before jumping directly into the code. Click here to start at the beginning of the series.

In keeping with the code examples used in the previous articles, Java will be the language used to implement the concepts in code. One of the reasons that I like to use Java is because you can download the Java compiler for personal use at the Sun Microsystems Web site You can download the standard edition, J2SE 5.0, at to compile and execute these applications. I often reference the Java J2SE 5.0 API documentation and I recommend that you explore the Java API further. Code listings are provided for all examples in this article as well as figures and output (when appropriate). See the first article in this series for detailed descriptions for compiling and running all the code examples (

The code examples in this series are meant to be a hands-on experience. There are many code listings and figures of the output produced from these code examples. Please boot up your computer and run these exercises as you read through the text.

Last month, you changed gears a bit and learned about a technique to assist in the development process called an Electronic Notebook. This notebook is a great tool that allows you to identify, store, organize, and retrieve information. Perhaps, more importantly, the Electronic Notebook provides the infrastructure for backup and recovery. You defined some possible directory structures and methods for searching through these directories.

In this month’s article, you continue the discussion of the Electronic Notebook by showing how a simple web front-end can be added to enhance the productivity of the concept. The Electronic Notebook reinforces sound development practices and is intended to improve the integrity of your process—whether your application is software or otherwise.

Engineering Notebook

As Simple and Elegant as Necessary

Let me do a quick review of the concepts you covered last time. The complete article can be found at

As was noted in the last article, the beauty of this idea is that the user can implement the Electronic Notebook at a variety of levels—either quite simply or in a very comprehensive manner.

For example, suppose that a student is taking a programming class, although this technique is applicable to all disciplines. Suppose that in this class the work consists of the following categories:

  • Assignments
  • Notes
  • Worksheets
  • Vocabulary Lists

To implement an Electronic Engineering Notebook, the simplest thing to do is to create a directory called notebook as seen in Figure 1.

Figure 1: Engineering Notebook Directory.

Although this is obviously a basic task to complete (simply creating a directory structure), the power of storing everything in an electronic medium has many advantages. And while this example illustrates an academic scenario, the fundamental concepts are applicable to a business process as well as personal activities—the first time I used this technique was to help administer a fantasy football league.

In this example, which you created in the previous article, you laid the fundamental infrastructure for the notebook. Although this in itself is a very powerful tool, you can make it even more user friendly by adding a web-based user interface (front-end). This approach allows you to navigate through the directory structure by using a familiar client—that of a browser.

One other advantage is that, with the web front-end, you can copy the material to a server and access the notebook from any Internet connection (providing you consider the appropriate security issues).

For this example, I parallel the previous column by presenting the directory structures, in order, as they were presented while I then show what the web front-end might look like. A very simple, small section of HTML code is presented in the article to provide an example of what the code might look like. I present a portion of the code that illustrates what a single directory structure looks like. However, to save space, I do not present all of the code in print—the complete code infrastructure is provided as a download.

One thing I do want to note is that the code utilizes frames, which may not be considered the best approach for an industrial strength web site; however, it provides great flexibility in creating this simple web interface. Having the navigation frame separate from the content frame is one way to provide easy navigation. This allows you to simply copy the code infrastructure from one directory to another while only making slight code edits to the deeper directory levels.

The Code

Listings 1, 2, and 3 show the HTML code that provides the basis for all of the directories in the notebook structure.

This structure is divided into three separate files:

  • The main entry point to the directory, index.html (Listing 1)
  • The navigation bar for the directory, notebooknav.html (Listing 2)
  • The content frame for the directory, notebook.html (Listing 3)

Each directory of the notebook structure will have these three files with the appropriate edits made to them.

Figure 2 shows the directory structure that was presented in the previous article.

Figure 2: Engineering Notebook Directory Structure.

Note: You do utilize a simple cascading Style Sheet, navbar.ccs (included in the code download), for current and future standardization of the look-and-feel.

When you implement the web front-end, the result will look something like what is presented in Figure 3.

Figure 3: Engineering Notebook Directory.

Note that this initial implementation only deals with a single category, in this case a single course (History 101). You start with a single piece of the puzzle because one of the characteristics of this approach that you want to focus on is that it is extensible. you easily can propagate this structure by creating more directories in a horizontal as well as a vertical manner.

The file index.html (Listing 1) breaks the screen up into its component frames, NavBar and Main.


<FRAMESET framespacing="0" cols="150,*">
   <FRAME name="NavBar" target="Main" src="notebooknav.html"
   <FRAME name="Main" src="notebook.html" scrolling="auto">
   <BODY topmargin="0" leftmargin="0">
   <P>Your browser doesn't support frames.</p>
   </ BODY >

Listing 1: index.html

The file, notebooknav.html (Listing 2), creates the navigation bar. Note that you have created links to the component parts of the course, listed below:

  • Assignments
  • Notes
  • Worksheets
  • Vocabulary

There is also a link to the Main Page itself. These links control the content frame to display information.

<LINK HREF="navbar.css" REL="stylesheet" TYPE="text/css">
<base target="Main">
<BODY background="images/border.gif">
<LI><A HREF="notebook.html" TARGET="Main">Main Page</A>
<LI><A HREF="assignments.html" TARGET="Main">Assignments</A>
<LI><A HREF="notes.html" TARGET="Main">Notes</A>
<LI><A HREF="worksheets.html" TARGET="Main">Worksheets</A>
<LI><A HREF="vocabulary.html" TARGET="Main">Vocabulary</A>

Listing 2: Notebooknav.html

The file, notebook.html (Listing 3), creates the content frame. This frame will simply display any information that is desired. In this case, you simply display the title page for the specific course.

<TITLE>City College</title>
<BODY background="images/notebook.gif">
<P align="center"><B><font size="4">City College</font></B></P>
<P align="center"><B><font size="4">Main Campus</font></B></P>
<P align="center"><I><B><font size="4">Fall 2007
<P align="center"><font size="7" color="#000080">
   Electronic Notebook</font></P>
<P align="center"><font size="5" color="#FF0000">
   History 101</font></P>

Listing 3: Notebook.html

Now you can drill down to the specific course content by using the navigation bar. As an example, select the Notes link and navigate to that page, as seen in Figure 4. At this point, you can see a list of all of the notes files that were created to this point in the course.

Figure 4: Engineering Notebook Directory Structure.

The final step is to select the desired notes file. In this case, you decide that you want to look at the notes from September 4. This is captured in Figure 5’s screen shot. An added advantage of this approach is that you can navigate back and forth between the pages.

Figure 5: Engineering Notebook Directory Structure.

At this point, you have a web-based notebook implemented for a single class. As mentioned earlier, you now have an infrastructure in place so that you can propagate the directory structure in a very flexible manner.

For example, you can propagate the system horizontally by adding other classes, or you can propagate the system vertically by adding other levels, such as a level containing all the classes of various semesters.


Now, you can apply the propagation technique across multiple academic (and non-academic) disciplines. For example, as a student, you can combine all of your classes in a single place, as seen in Figure 6. As a professional, you could have separate directories for each customer. As a sports league commissioner, you could have separate directories for each team (or league, for that matter).

Figure 6: Engineering Notebook Directory—multiple classes.

To include this added directory level in the code, you simply have to copy the code from the history 101 directory and then do some simple text editing. For example, copy the notebooknav.html from the history 101 directory and then edit the file as seen in Listing 2.

<TITLE>Fall semester 2007</TITLE>
<LINK HREF="navbar.css" REL="stylesheet" TYPE="text/css">
<base target="Main">
<BODY background="../images/border.gif">
>Main Page</A>
<LI><A HREF="history/index.html" TARGET="_top">History</A>
<LI><A HREF="math/index.html" TARGET="_top">Math</A>
<LI><A HREF="programming/index.html" TARGET="_top">
<LI><A HREF="communications/index.html" TARGET="_top">

Listing 2: notebooknav.html for the 2007 Fall Semester Directory

The only coding issue that you must note when multiple directory levels are involved is how you navigate among the various index.html files. To display the appropriate navigation bars, you need to be aware of the following code, where the TARGET in the HREF tag is specified as “_top”. The "_top" loads the linked document in the topmost frame, thus the new page will fill the entire window, rather than just a single frame.

<LI><A HREF="../index.html" TARGET="_top">Main Page</A>

When this is implemented, you now have the ability to select from several possible courses, as seen in Figure 7.

Figure 7: Engineering Notebook Directory—multiple classes.

Tying It All Together

Finally, for this example you will expand the scope to include selections for the entire college career. You can design directories that represent entire semesters and then drill down to include the classes for each of these semesters. The directory structure for this is shown in Figure 8.

Figure 8: Engineering Notebook Directory—Several Years.

Again, the only work to do here is to copy the three infrastructure files from one of the directories and copy them to the new top-level directory.

<TITLE> Class of 2011</TITLE>
<LINK HREF="navbar.css" REL="stylesheet" TYPE="text/css">
<base target="Main">
<BODY background="images/border.gif">
<LI><A HREF="index.html" TARGET="_top">Main Page</A>
<LI><A HREF="2007 Fall Semester/index.html" TARGET="_top">
   Fall 07</A>
<LI><A HREF="2008 Spring Semester/index.html" TARGET="_top">
   Spring 08</A>
<LI><A HREF="2008 Fall Semester/index.html" TARGET="_top">
   Fall 08</A>
<LI><A HREF="2009 Spring Semester/index.html" TARGET="_top">
   Spring 09</A>
<LI><A HREF="2009 Fall Semester/index.html" TARGET="_top">
   Fall 09</A>
<LI><A HREF="2010 Spring Semester/index.html" TARGET="_top">
   Spring 10</A>

Listing 3: notebooknav.html for the Class of 2011 Directory

This code produces the screen shot seen in Figure 9, which is as far as you will go in this example. However, you could add as many levels as you like—as long as you can logically follow the directory design structure.

Figure 9: Engineering Notebook Directory—Several Years.

There are many benefits that come with the centralization of your notes in an electronic format and I discuss several of them in the next section.

Note that there is also a directory called images to holds all of the graphical images that may be used in the user interface. I don’t like to use a lot of images; however, I include a background here for the navigation bar and the notebook frame itself just to show how it is done.


As you saw in the previous article, using an Electronic Notebook is a great way to organize information. One of the primary concepts that I teach in my classes concerns the ability to process information, which includes the following organizational skills:

  • Identify what information is required.
  • Locate that information.
  • Store that information.
  • Retrieve that information when needed.

One of the major problems with a paper-based notebook system was that the information was only organized by time. Once a notebook was full, it was hard to include more information in it—you went on to the next notebook. If items in one notebook related to items in another notebook, the only way to truly relate them was via reference notes. And this was possible only if you could actually find the item that you were interested in from an earlier notebook. With an Electronic Notebook, you can always update and refine your notes.

One of the problems with an Electronic Notebook is that there are still some things that are not electronic. For example, what if you are taking a class, or are in a meeting, without your computer. In this case, you will need to take notes the old-fashioned way.

I often have students tell me that they learn better by writing out their notes. I also have students whose primary language is not English, and they like to hand-write their notes in their native language. This is where a scanner comes in.

Writing out notes is great; however, you still have the possibility of losing those notes. Even if you take all of your notes by hand, it is still a very good idea to scan your notes into an electronic format and insert them in your Electronic Notebook—which provides the ability to recover the information if lost. You can even use OCR to create documents that are in word processing format.

This works great for high-school students as well. How many times do high-school students leave their notebooks at home when needed at school or leave their notebooks at school when they are needed at home? If you make it a routine to scan your notes into your Electronic Notebook, the problem is minimized. And, if you email yourself the notes (or place them on a server), you can always retrieve them anywhere there is an Internet connection.

This practice has saved me in a work environment on several occasions. For example, once I traveled out of town to a customer site for a meeting that required several documents. When I got to the meeting, the overnight package containing the documents had not arrived and the CD I had brought as a backup would not work. I was able to get the documents from my server via an Internet connection.


In this article, you have literally slapped a user interface (front-end) on the directory structure that you built in the previous article. Many things can be included in an Electronic Notebook; the sky is truly the limit when it comes to actually designing the structure of a specific Electronic Notebook.

One possible enhancement that can be considered is to move the web-based notebook to a server. This would allow the information to be accessed from any Internet connection—assuming that security issues are properly addressed.

This is simply one variant on an idea that has seen many variations. There are several flavors representing many implementations of this concept. I have seen multiple variants of this idea called names such as Electronic Journal. There are also several commercial packages that provide much more functionality. However, the intent of this article was to present something very simple yet useful.


Background graphics can be obtained at

Download the Code

You can download the code that accompanies this article here.

About the Author

Matt Weisfeld is a faculty member at Cuyahoga Community College (Tri-C) in Cleveland, Ohio. Matt is a member of the Information Technology department, teaching programming languages such as C++, Java, C#, and .NET, as well as various web technologies. Prior to joining Tri-C, Matt spent 20 years in the information technology industry, gaining experience in software development, project management, business development, corporate training, and part-time teaching. Matt holds an MS in computer science and an MBA in project management. Besides The Object-Oriented Thought Process, which is now in its second edition, Matt has published two other computer books, and more than a dozen articles in magazines and journals such as Dr. Dobb’s Journal, The C/C++ Users Journal, Software Development Magazine, Java Report, and the international journal Project Management. Matt has presented at conferences throughout the United States and Canada.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories