February 28, 2021
Hot Topics:

Fine Tuning the Development Process: Adding a Web Interface to the Electronic Notebook

  • By Matt Weisfeld
  • Send Email »
  • More Articles »

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.

Click here for a larger image.

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 http://www.webweaver.nu/clipart/borders6.shtml.

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.

Page 5 of 5

This article was originally published on November 13, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date