A Web Notes System for Bloggers and Other Web Publishers

If you find it a irritatingly inconvenient to make notes while surfing the web, here is a system that works well.

We call it the Web Notes system.

No need to copy 'n paste. Instead, drag selected text into the Web Notes form.

At the end of the note-taking session, the final page has a place for an email address to send your notes to.

The Web Notes system uses the multi-page forms and database emailing features of Master Form V4 — version 4.5.1.4 of December 24, 2006 (or later) is required.

The templates to implement the Web Notes system are allready created for you.

This is a user-friendly system for taking notes while surfing the World Wide Web. You could even call it a "No-Brainer"!

How It Works

The Web Notes form has fields (all optional) for web page URL, web page title, and web page notes.

There are two windows, your surfing window and a smaller window with the Web Notes form. The Web Notes form can be in a regular or popup window.

You select text in the surfing window and drag it into the Web Notes form. The web site's URL (in the browser's address bar) can also be dragged into the form.

You can, of course, make manual notes if you're so inclined.

Save the notes by clicking a button. Then another form comes up for the next batch of notes.

The first or initial page of the Web Notes form sets up some hidden fields and provides the opportunity to specify where on the server the notes file shall be put. These are the only required fields.

Subsequent Web Notes form pages are all optional.

When you're done, the last page lets you email the notes file to yourself.

Implementing the Web Notes System

First, you'll need a copy of the latest version of Master Form V4 installed. (See /master/formV4/ to buy it if you don't already have Master Form V4. It's a free upgrade if you already own a copy.)

The Web Notes system has 5 templates, all copy 'n paste:

The database template file.
The email template file.
The initial notes form template page.
The subsequent notes form template page.
The session end template page.

The database and email templates are complete templates. The web page templates are complete pages -- CSS, JavaScript, and everything.

The placeholders (text between double square brackets) used in the various templates are described in the Master Form V4 manual.

JavaScript is used in the Web Notes form pages to remember the most recent Web Form database location, to set up the branch to the final page when the checkbox is checked (and undo the setup if it is unchecked), and to remember the most recent email address used on the final page. The remembering parts are done with cookies.

1. The Database Template File

Copy the Web Notes database template. Save it as a file named WebNotesData.txt

When you paste the template into WebNotesData.txt, you'll notice a blank line at the top of the file, above a divider line of tilde characters. The blank line is there to force white space between Web Notes.

The placeholders may appear somewhat confusing. Use the file as is. When you have time and the inclination to do so, study the Master Form V4 manual and change the placeholders as you please.

In the directory where Master Form V4 is installed, create a "templates" subdirectory. Put the WebNotesData.txt file into that subdirectory.

2. The Email Template File

Copy the email template. While not strictly necessary (for most servers), consider changing the "From:" address to your own. Save the template as a file named WebNotesEmail.txt

The email template uses certain placeholders to cause the contents of the Web Notes database to be inserted into the email and also to be attached. You may removed one or the other, if you don't want both methods.

Put the WebNotesEmail.txt file into the templates subdirectory created in step 1.

3. The Initial Notes Form Template Page

Copy the initial notes form template. Save it as a file named notes_start.html

If you have Master Form V4's automatic submission protection turned on, the protection code must be inserted immediately above the cancel </form> tag.

<html>

<head>

<title>
My Note Taker (start)
</title>

<style type="text/css">
body { 
	background:white; 
	margin:15px; 
	font-family:sans-serif; 
	}
td,p { 
	font-size:12px; 
	line-height:14px; 
	}
input, textarea { 
	font-family:monospace; 
	font-size:14px; 
	padding-left:5px; 
	padding-right:3px;
	width:300px;
	}
.button { 
	font-family:sans-serif; 
	background:red; 
	color:yellow; 
	font-weight:bold; 
	}
</style>

<head>

<body>

<!--
This is the first page of the Web Notes system.

See http://bontragerconnection.com/library/web_page_notes.shtml 
   for an article introducting this system.
-->

<h3>Web Notes (start)</h3>

<!-- Developers: The JavaScript above and below the FORM and cancel /FORM tags need to be there. -->

<script type="text/javascript">
JSflowto = "";
</script>

<form 
	name="NoteForm" 
	method="post" 
	onsubmit="javascript:return RecordFormInformation();" 
	action="/cgi-bin/MasterFormV4.cgi">

<input 
	type="hidden" 
	name="firstpage" 
	value="">

<input 
	type="hidden" 
	name="flowto" 
	value="/WebNotes/notes_continue.html">

<input 
	type="hidden" 
	name="nocarry" 
	value="URL, Title, Notes, adjustment">

<input 
	type="hidden" 
	name="filetemplate" 
	value="templates/WebNotesData.txt">

<p>
Output file:<br />
<input 
	type="text" 
	name="dbfile" 
	size="35">
</p>

<p>
Page URL:<br />
<input 
	type="text" 
	name="URL" 
	size="35">
</p>

<p>
Page Title/Heading:<br />
<input 
	type="text" 
	name="Title" 
	size="35">
</p>

<p>
Page Notes:<br />
<textarea 
	name="Notes" 
	cols="33" 
	rows="15">
</textarea>
</p>

<p>
<input 
	type="checkbox" 
	name="adjustment" 
	onclick="if(document.NoteForm.adjustment.checked==true){document.NoteForm.flowto.value='/WebNotes/notes_end.html'}else{document.NoteForm.flowto.value=JSflowto}" 
	style="width:12px">
Final web note of the session.<br />

<input 
	type="submit" 
	value="Submit This Web Note" 
	class="button" 
	style="text-align:left; padding-top:5px; padding-bottom:5px;">
</p>

<!-- If you have Master Form V4's automatic submission protection turned on, replace this entire comment/line with the protection code. -->

</form>

<script type="text/javascript">

// The JavaScript JSflowto value must be identical to the hidden field flowto's value.
JSflowto = "/WebNotes/notes_continue.html";

document.NoteForm.firstpage.value = document.URL;
var CookieName = 'GuessThisStock';
var DaysToLive = 14;
function GetCookie() {
if(document.cookie.length < 1) { return ''; }
var cookiename = CookieName + '=';
var cookiebegin = document.cookie.indexOf(cookiename);
if(cookiebegin < 0) { return ''; }
cookiebegin += cookiename.length;
var cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
return document.cookie.substring(cookiebegin,cookieend);
}
function RecordFormInformation() {
var CookiePieces = new Array();
CookiePieces[0] = document.NoteForm.dbfile.value; //###
var CookieString = new String();
CookieString = CookiePieces.join('\t\t');
CookieString = escape(CookieString);
if(DaysToLive > 0) {
	var now = new Date();
	then = now.getTime() + (DaysToLive * 24 * 60 * 60 * 1000);
	now.setTime(then);
	exp = '; expires=' + now.toGMTString();
	}
document.cookie = CookieName + "=" + CookieString + exp;
return true;
}
function RestoreOtherFields() {
var CookieString = GetCookie();
if(CookieString.length < 3) { return; }
CookieString = unescape(CookieString);
var CookiePieces = CookieString.split('\t\t');
document.NoteForm.dbfile.value = CookiePieces[0]; //###
}
function FillForm() { RestoreOtherFields(); }
FillForm();
</script>

</body>

</html>

In the document root directory of your server (where your site's index/main page is at), create a "WebNotes" subdirectory. Put the notes_start.html file into that subdirectory.

4. The Subsequent Notes Form Template Page

Copy the subsequent notes form template. Save it as a file named notes_continue.html

If you have Master Form V4's automatic submission protection turned on, the protection code must be inserted immediately above the cancel </form> tag.

<html>

<head>

<title>
My Note Taker (continue)
</title>

<style type="text/css">
body { 
	background:white; 
	margin:15px; 
	font-family:sans-serif; 
	}
td,p { 
	font-size:12px; 
	line-height:14px; 
	}
input, textarea { 
	font-family:monospace; 
	font-size:14px; 
	padding-left:5px; 
	padding-right:3px;
	width:300px;
	}
.button { 
	font-family:sans-serif; 
	background:red; 
	color:yellow; 
	font-weight:bold; 
	}
</style>

<head>

<body>

<!--
This is the second/subsequent page of the Web Notes system.

See http://bontragerconnection.com/library/web_page_notes.shtml 
   for an article introducting this system.
-->

<h3>Web Notes (continue)</h3>

<!-- Developers: The JavaScript above and below the FORM and cancel /FORM tags need to be there. -->

<script type="text/javascript">
JSflowto = "";
</script>

<form 
	name="NoteForm" 
	method="post" 
	action="/cgi-bin/MasterFormV4.cgi">

[[INSERT_HIDDEN_FIELDS]]

<p>
Page URL:<br />
<input 
	type="text" 
	name="URL" 
	size="35">
</p>

<p>
Page Title/Heading:<br />
<input 
	type="text" 
	name="Title" 
	size="35">
</p>

<p>
Page Notes:<br />
<textarea 
	name="Notes" 
	cols="33" 
	rows="15">
</textarea>
</p>

<p>
<input 
	type="checkbox" 
	name="adjustment" 
	onclick="if(document.NoteForm.adjustment.checked==true){document.NoteForm.flowto.value='/WebNotes/notes_end.html'}else{document.NoteForm.flowto.value=JSflowto}" 
	style="width:12px">
Final web note of the session.<br />

<input 
	type="submit" 
	value="Submit This Web Note" 
	class="button" 
	style="text-align:left; padding-top:5px; padding-bottom:5px;">
</p>

<!-- If you have Master Form V4's automatic submission protection turned on, replace this entire comment/line with the protection code. -->

</form>

<script type="text/javascript">
JSflowto = "[[flowto]]";
</script>

</body>

</html>

Put the notes_continue.html file into the WebNotes subdirectory you created in step 2.

5. The Session End Template Page

Copy the session end template. Save it as a file named notes_end.html

If you have Master Form V4's automatic submission protection turned on, the protection code must be inserted immediately above the cancel </form> tag.

<html>

<head>

<title>
My Note Taker (session end)
</title>

<style type="text/css">
body { 
	background:white; 
	margin:15px; 
	font-family:sans-serif; 
	}
td,p { 
	font-size:12px; 
	line-height:14px; 
	}
input, textarea { 
	font-family:monospace; 
	font-size:14px; 
	padding-left:5px; 
	padding-right:3px;
	width:300px;
	}
.button { 
	font-family:sans-serif; 
	background:red; 
	color:yellow; 
	font-weight:bold; 
	}
</style>

<head>

<body>

<!--
This is the session end page of the Web Notes system.

See http://bontragerconnection.com/library/web_page_notes.shtml 
   for an article introducting this system.
-->

<h3>Web Notes (session end)</h3>

<p>
The web notes database is at [[dbfile]]
</p>

<!-- Developers: The JavaScript below the cancel /FORM tag needs to be there. -->

<form 
	name="NoteForm" 
	method="post" 
	onsubmit="javascript:return RecordFormInformation();" 
	action="/cgi-bin/MasterFormV4.cgi">

[[INSERT_HIDDEN_FIELDS]]

<input 
	type="hidden" 
	name="redirect" 
	value="">

<input 
	type="hidden" 
	name="Notes" 
	value="Emailed to: ">

<input 
	type="hidden" 
	name="emailtemplate" 
	value="templates/WebNotesEmail.txt">

<p>
Send database to:<br />
<input 
	type="text" 
	name="Email" 
	size="35">
</p>

<p>
<input 
	type="submit" 
	value="Send Database" 
	class="button" 
	onclick = "document.NoteForm.Notes.value+=document.NoteForm.Email.value;document.NoteForm.redirect.value=document.NoteForm.firstpage.value" 
	style="text-align:left; padding-top:5px; padding-bottom:5px;">
</p>

<!-- If you have Master Form V4's automatic submission protection turned on, replace this entire comment/line with the protection code. -->

</form>

<script type="text/javascript">
var CookieName = 'GuessThisStock';
var DaysToLive = 14;
function GetCookie() {
if(document.cookie.length < 1) { return ''; }
var cookiename = CookieName + '=';
var cookiebegin = document.cookie.indexOf(cookiename);
if(cookiebegin < 0) { return ''; }
cookiebegin += cookiename.length;
var cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
return document.cookie.substring(cookiebegin,cookieend);
}
function RecordFormInformation() {
var CookiePieces = new Array();
CookiePieces[0] = document.NoteForm.Email.value; //###
var CookieString = new String();
CookieString = CookiePieces.join('\t\t');
CookieString = escape(CookieString);
if(DaysToLive > 0) {
	var now = new Date();
	then = now.getTime() + (DaysToLive * 24 * 60 * 60 * 1000);
	now.setTime(then);
	exp = '; expires=' + now.toGMTString();
	}
document.cookie = CookieName + "=" + CookieString + exp;
return true;
}
function RestoreOtherFields() {
var CookieString = GetCookie();
if(CookieString.length < 3) { return; }
CookieString = unescape(CookieString);
var CookiePieces = CookieString.split('\t\t');
document.NoteForm.Email.value = CookiePieces[0]; //###
}
function FillForm() { RestoreOtherFields(); }
FillForm();
</script>


</body>

</html>

Put the notes_end.html file into the WebNotes subdirectory you created in step 2.

Using the Web Notes System

Once you have set up your own templates as directed, using the Web Notes System is easy.

First, open your browser, if you haven't already.

Next, use Control-N or Option-N to open a new browser window. (See the "Opening a New Browser Window for the Web Notes Form" section for alternatives.)

In the new browser window, load the page with the Web Notes form (notes_start.html). Resize the browser window to just accommodate the form.

In the Web Notes form, specify the location where the Web Form database shall be created and you're good to go.

While you surf, the Web Notes window floats on your desktop next to your surfing window. This makes it easy to drag text from the surfing window into the Web Notes form.

When you discover a web page of interest, the web page URL can be dragged into the Web Notes form "URL" field. With most browsers, this is done by dragging the icon at the extreme left of the address bar.

Select text on the web page of interest and drag it into the Web Notes form.

Save your notes from time to time by submitting the Web Notes form. When submitted, a new form is readied. The new form can continue to take notes from the current surfing page by leaving the URL and Title form fields blank.

When you're done, check the "Final web note of the session" checkbox and submit the form. You will then see a web page with a form field for the email address your notes shall be sent to. (The notes database is stored on the server in case you later need to retrieve it.)

Specifying the Location of the Web Form Database

The initial Web Notes form has a field to specify the location of the Web Notes database.

Do one of two things with the database location form field:

If you want to add notes to the same database as a previous session, specify the previous session's file.
If you want to start a new database, specify a file that does not yet exist.

The location of the form field must be somewhere that CGI programs can create files. Some servers have restrictions on that, others don't. If in doubt, type a location, then submit the form to see if the database file is created.

Opening a New Browser Window for the Web Notes Form

Different browsers have different methods of opening new windows. With many, Control-N or Option-N will work. If yours doesn't respond that way, check its menu system. Should all efforts fail, you can put a link into your start page to open a new browser window or a popup. ("Start page" is here assumed to be a custom web page you create for yourself that opens when you load your browser, containing links, news, reminders, and such).

This link will open a new browser window:

If your start page is loaded from your hard drive instead of from your server, replace the URL in the link with the absolute http://... URL to notes_start.html

To launch a popup instead of a new browser window, put this JavaScript and link into your start page:

If your start page is loaded from your hard drive instead of from your server, replace the URL in the JavaScript with the absolute http://... URL to notes_start.html. The width and height of the popup may also be adjusted.

—————

Happy surfing. Happing note taking. And Happy New Year!

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

WillMaster > Web Development Tools Reference Library > CGI Code, Scripts, and Tips

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

A Web Notes System for Bloggers and Other Web Publishers

WillMaster > Web Development Tools Reference Library > CGI Code, Scripts, and Tips

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

A Web Notes System for Bloggers and Other Web Publishers

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions