Easy-Install Auto-Save Notepad

This article provides a relatively easy to install notepad. Its name is Auto-Save Notepad. The software is an upgrade of the previous version offered here in the Willmaster library.

A notepad, in this case, is a text box on a web page that a person can type in and edit what they type. Its general purpose is to record thoughts, tasks, and other items a person wants to be reminded of later. It would also generally be for personal use, but may be made available to others for their contributions.

The features are similar to the previous version, but the installation has been streamlined. The PHP script no longer has customization requirements. The part that goes on the web page is now one line instead of many. To implement the easier installation, much of the code has been rewritten.

The notepad area automatically resizes as needed to contain your notes. Text can be bolded, italicized, and/or underlined.

Further, the notepad automatically saves your notes. The separate "Manual Save" button can be tapped if you prefer not to wait for the auto-save to kick in.

Oh, yes, one more thing. The notepad is accessible to any of your browsers on your various devices.

It's a handy thing, this auto-saving notepad.

Your thoughts can be noted so they don't get lost. Impromptu lists can be created. Existing notes can be updated as needed.

The browser automatically does HTML markup for the note content you type in.

Auto-Save Notepad uses a plain text file for storing your notepad contents. Which means you can edit the file directly if you wish, including changing the HTML markup.

It's as simple to use as I could make it and still have what I consider essential and minimum features for a notepad.

The software is for one-person editing, though. If two or more people are editing simultaneously, one person's edits are highly likely to clobber another person's edits.

If your notes need to be confidential, install the system in a passworded directory.

Example Interface

A live interface is below. When you install at your website, you can change the border colors and design.

 
The software is self-contained. No JavaScript or other code needs to be imported from third-party websites.

Installation

The installation of Auto-Save Notepad is in two steps.

1. The server-side PHP script: This is software to store and retrieve your notepad notes. No customization is needed.

2. The notepad interface: This is one line of code to insert the notepad functionality into your website. This does require customization.

Step 1. Here is the source code for the PHP script.

<?php
/*
Auto-Save Notepad
Version 2.0
January 22, 2023
Will Bontrager Software LLC
https://www.willmaster.com/
*/
header('Cache-Control: no-store, no-cache, max-age=0, must-revalidate, proxy-revalidate');
$Global['SelfURL'] = (isset($_SERVER['HTTPS'])&&$_SERVER['HTTPS']=='on'?'https://':'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$Global['SelfURL'] = preg_replace('/\?.*$/','',$Global['SelfURL']);
$Global['SelfInfo'] = preg_replace('!^.*/!','',$Global['SelfURL']);
$Global['SelfInfo'] = __DIR__ . '/' . preg_replace('/\.[^\.]*$/','.notes.txt',$Global['SelfInfo']);
if( isset($_POST['PokeDiv']) ) { SendDivSourceCode(); }
elseif( isset($_POST['note']) ) { SaveNoteContent(); }
elseif( isset($_GET['content']) ) { SendNoteContent(); }
elseif( isset($_GET['div']) ) { SendJavaScript(); }
exit;

function SendDivSourceCode()
{
   global $Global;
   $Divs = <<<DIVS
<div 
   id="auto-save_notepad-system-container"
   style="position:relative;">
<div 
   id="auto-save_notepad-content"
   style="position:relative; padding:.5em; border-radius:.5em; min-height:.7in;"
   spellcheck="true"
   contenteditable="true"
   onblur="ASEN_SaveNotes()"
   onchange="ASEN_SaveNotes()"
   onkeyup="ASEN_StartCountdown()"
   onkeydown="ASEN_StartCountdown()">
</div><!-- id="auto-save_notepad-content" -->
<div id="auto-save_notepad-text_formatting_icons_container" 
   style="position:absolute; top:-12px; left:2em;
      border:1px solid {{BBCOLOR}};
      padding:0px 10px 0 10px;
      height:22px;
      background:white;
      border-radius:16px;
      font-size:14px;
      text-align:center;"
      onclick="ASEN_StartCountdown()">
<img style="cursor:pointer;" title="Bold" onclick="ASEN_FormatText('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
<img style="cursor:pointer;" title="Italic" onclick="ASEN_FormatText('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
<img style="cursor:pointer;" title="Underline" onclick="ASEN_FormatText('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
</div><!-- id="auto-save_notepad-text_formatting_icons_container" -->
<div id="auto-save_notepad-manual_save_button" 
   style="position:absolute; bottom:-.75em; left:7em;
      border:1px solid {{BBCOLOR}};
      padding:4px 10px 0 10px;
      height:23px;
      background:white;
      border-radius:1em;
      font-size:16px;
      font-weight:normal;
      cursor:pointer;"
      onclick="ASEN_SaveNotes()">
<div style="position:relative; top:-.1em; color:#333;">
Manual Save
</div>
</div><!-- id="auto-save_notepad-manual_save_button" -->
<div id="auto-save_notepad-status_area" 
   style="position:absolute; bottom:-.75em; left:2em;
      border:1px solid {{BBCOLOR}};
      padding:4px 10px 0 10px;
      height:23px;
      background:white;
      border-radius:1em;
      font-size:16px;
      font-weight:normal;
      white-space:nowrap;">
<div style="position:relative; top:-.12em; color:#333;">
status
</div>
</div><!-- id="auto-save_notepad-status_area" -->
</div><!--id="auto-save_notepad-system-container" -->
DIVS;
	if( ! isset($_POST['bbcolor']) ) { $_POST['bbcolor'] = '#cccccc'; }
   echo str_replace('{{BBCOLOR}}',$_POST['bbcolor'],$Divs);
} # function SendDivSourceCode()

function SendJavaScript()
{
   global $Global;
   if( ! isset($_GET['bbcolor']) ) { $_GET['bbcolor'] = '#ccc'; }
   echo <<<JS
function ASEN_OneLineRequestGETorPOST()
{
   var http = new XMLHttpRequest();
   if(! http) { alert("Something went awry"); return; }
   var params = new Array();
   params.push( "PokeDiv=" + encodeURIComponent("{$_GET['div']}") );
   params.push( "bbcolor=" + encodeURIComponent("{$_GET['bbcolor']}") );
   http.onreadystatechange = function()
   { 
      if(http.readyState == 4)
      {
         if(http.status == 200)
         {
            document.getElementById("{$_GET['div']}").innerHTML=http.responseText;
            setTimeout(ASEN_GetNotepadContent,1000);
         }
         else { alert("Something went awry. Status code: "+http.status+" "+http.statusText); }
      }
   }
   http.open("POST","{$Global['SelfURL']}",true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.send(params.join("&"));
} // function ASEN_OneLineRequestGETorPOST()
var ASEN_Seconds = 7;
var ASEN_CountdownSeconds = 0;
var ASEN_CountdownTimer = false;
function ASEN_PostStatus(s) { document.getElementById("auto-save_notepad-status_area").innerHTML = s; }
function ASEN_FormatText(cmd,value) { document.execCommand(cmd,false,value); }
function ASEN_StartCountdown()
{
   if(ASEN_CountdownTimer) { clearInterval(ASEN_CountdownTimer); }
   ASEN_CountdownSeconds = ASEN_Seconds;
   ASEN_CountdownTimer = setInterval(ASEN_AdjustCountdown,1000);
   ASEN_PostStatus('<div style="position:relative; top:-.05em;">'+ASEN_CountdownSeconds+'</div>');
}
function ASEN_AdjustCountdown()
{
   if(ASEN_CountdownSeconds>0)
   {
      ASEN_CountdownSeconds--;
      ASEN_PostStatus('<div style="position:relative; top:-.05em;">'+ASEN_CountdownSeconds+'</div>');
   }
   if(ASEN_CountdownSeconds<1) { ASEN_SaveNotes(); }
}
function ASEN_SaveNotes()
{
   clearInterval(ASEN_CountdownTimer);
   if(ASEN_CountdownSeconds<0) { return; }
   ASEN_CountdownSeconds = -1;
   var http = new XMLHttpRequest();
   if(! http) { alert("Something went awry, probably temporarily."); return; }
   ASEN_PostStatus('<div style="position:relative; top:-.05em;">saving&hellip;</div>');
   http.onreadystatechange = function()
   {
      if(http.readyState == 4)
      {
         if(http.status == 200) { ASEN_PostStatus('<div style="position:relative; top:-.05em;">saved</div>'); }
         else { alert("Unable to save note.\\n"+http.statusText); }
      }
   }
   http.open("POST","{$Global['SelfURL']}",true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.send("note="+encodeURIComponent(document.getElementById("auto-save_notepad-content").innerHTML));
}
function ASEN_GetNotepadContent()
{
   var http = new XMLHttpRequest();
   if(! http) { alert("Something went awry, probably temporarily."); return; }
   http.onreadystatechange = function()
   {
      if(http.readyState == 4)
      {
         if(http.status == 200) { document.getElementById("auto-save_notepad-content").innerHTML = http.responseText; }
         else { alert("Unable to find previously-saved note.\\n"+http.statusText); }
      }
   }
   http.open("GET","{$Global['SelfURL']}?content=1",true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.send("");
}
ASEN_OneLineRequestGETorPOST();
JS;
} # SendJavaScript()

function SendNoteContent()
{
   global $Global;
   if( file_exists($Global['SelfInfo']) ) { echo file_get_contents($Global['SelfInfo']); }
   else { echo ''; }
} # function SendNoteContent()

function SaveNoteContent()
{
   global $Global;
   file_put_contents($Global['SelfInfo'],$_POST['note']);
} # function SaveNoteContent()
?>

Save the above as notepad.php or other *.php file name. Upload it to your server. Make a note of its full https://... URL (for use in the next step).

Step 2. Here is the one line of code to put into your web page. Although it is only one line, it does need to be customized.

<div id="my-notes" style="border:1px solid #cccccc"></div><script src="https://example.com/notepad.php?div=my-notes&bbcolor=%23cccccc" type="text/javascript" async></script>

Place the above into a web page where you want the notepad to show up. Then, customize it.

Customizing steps:

1. Replace https://example.com/notepad.php with the https://... URL of your installation of the PHP script in the previous step.

   Note that the PHP script and the web page with your notepad must be on the same domain. That would be the same full domain name. If the PHP script is on www.example.com then the web page must also be on www.example.com (example.com, without the www., would be a different domain). This is an Ajax requirement.

   Also, the web page with your notepad and the PHP script must both use the same internet protocol, either http://... or https://... .

2. You'll see my-notes in two places. One is the div id value and one as a parameter value in the JavaScript URL.

   Those two places must have an identical value. If you change one, then also change the other.

3. Specify the button border color. That would be the borders of the small buttons, not the border of the notepad itself. (We'll address the notepad border in a moment.)

   You'll see %23cccccc in the line of code for inserting the notepad.

   The %23 part is to encode the "#" character. (Don't use the raw "#" character here; it must be encoded as %23.)

   Replace the cccccc part with the hex value of the color you want to specify. Most color pickers provide the hex value of colors you pick. Or, you may use the Color Selector for the Color Blind tool to obtain the hex value of a color you like.

4. Optionally, you may use CSS to design the notepad container — its border and background. The CSS may be inline (as you see in the one-line code, above) or it may be in a style element.

   Here is a style element example. It provides a border shadow, a border radius, and a background color.

   <style type="text/css">
   #my-notes {
      border: 3px solid #cccccc;
      box-shadow: 0px 0px 3pt 1pt #cccccc;
      border-radius:.5em; 
      background-color:#efefef;
   }
   </style>
   

   The above style element designs the notepad container by specifying a style for the div's id value.

   If you put the style element above the line that inserts the notepad, you would have something like this. (The inline CSS style has been removed; otherwise it would override the style element style.)

   <style type="text/css">
   #my-notes {
      border: 3px solid #cccccc;
      box-shadow: 0px 0px 3pt 1pt #cccccc;
      border-radius:.5em; 
      background-color:#efefef;
   }
   </style>
   <div id="my-notes"></div><script src="https://example.com/notepad.php?div=my-notes&bbcolor=%23cccccc" type="text/javascript" async></script>
   

Verify the web page with the notepad is on the same domain as the PHP script for maintaining the notepad. Test it.

If you'll look on your server, the PHP script makes a file named similar to itself, but .php replaced with .notes.txt. That is where the notes are kept.

Using Auto-Save Notepad

Auto-Save Notepad was made as simple as possible to install and use, and still be elegant and reliable software.

The notepad area expands and contracts as needed. Content can be formatted as bold, italic, and/or underlined. And the software is coded to automatically save your changes.

Will Bontrager