Baillehache Pascal's personal website

Chishiki, a digital compendium as one single php file web app

Time for a new instance in my series "a simple web app as a single php file" (check for others here). This time I've made one to create digital compendiums: compilation of information organised as keywords referring to text and/or image, available as a single php file web app. Whether you want to keep track of your favourite coffee beans, are fed up to crawl the web garbages to find once again how to regex an email address, or simply believe in the dead internet theory and want to make your own secured source of whatever knowledge you need before it disappears, this app may interest you. Paper books are even better, sure, I do have a big pile on my desk. But the power of search and editing with a digital app can't be denied. Moreover, this app also comes with an import/export functionality, because knowledge is worth nothing if it can't be shared. The php file is available as a .tar.gz file here. As always, all you have to do is copy it somewhere in a php server like Apache, set the obfuscation parameter (cf below) and you're good to go.

Template for a single php file web app

All web apps of this series are based on the same model. Its first instance dates from 2023. It has improved little by little and I think now is a good timing to reintroduce it. If you want the boilerplate to make your own app then the current version is available here. The details about the app itself follows the introduction of the template.

The key points of this model are: one single php file with no dependencies or any assets, and an installation procedure as simple as copying a file and setting an obfuscation parameter. I also try as much as possible to keep these apps under 1k lines of code (a good part of it being the same template reused again and again), with a first working version generally written over a weekend. I take them as proof that there is really no need for all those bloated frameworks or AI for a human to create bare hand and in no time useful tools he/she entirely owns (both the data and the code).

The php file is divided into three sections: the php code, the html/css code, and the javascript code. The php section is as follow.

First of all I start the php session:

session_start();

Then I make sure the error reporting is turned off to ensure it won't mess up with API calls (normally they will be catched, it's just an additional layer of safety net).

error_reporting(0);

Next I make sure https is used to ensure the communication between the user and server will be encrypted. If the user tries to use http only the call is automatically redirected to https, except if the app is running on localhost, in which case it doesn't matter and simplify my life when I'm developping the app.

if ($_SERVER['SERVER_NAME'] != "localhost" && $_SERVER['HTTPS'] != "on") {
  $url = "https://". $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
  header("Location: $url");
  exit;
}

Now comes three global variables. The first one is used to obfuscate the filename of the SQlite database created by the app to save all the data. It should be set to a long password-like string of random alphanumerical characters. It avoids someone to access the database without using the app. The second one is the login for the guest account. If set, it allows to use a limited version of the app (what's "limited" depends on the app). And the third one is the app version. All the XXX and YYY are uppercase and lowercase versions of your app name.

define("XXX_DB_OBFUSCATION", "");
define("XXX_GUEST", "");
define("XXX_VERSION", "00.001.000");

Then comes the definition of the class implementing the app. The php section ends with the creation of an instance of this class, and based on the existence of the action parameter in the POST data I route between the methods API(), which process an API call, and Main(), which creates the DOM.

class XXX {
  ...
}
$YYY = new XXX();
if(isset($_POST['action'])) {
  $YYY->API();
} else {
  $YYY->Main();
}

The class definition is as follow. First comes the class properties and their getters.

  private $pathDb;
  private $db;
  private $login;
  private $guestAccount;
  private $token;
  private $opMode;
  private $dbObfuscation;
  private $dbDef;
  function GetLogin() { return $this->login; }
  function GetGuestAccount() { return $this->guestAccount; }
  function IsGuest() { return $this->login == $this->guestAccount; }
  function GetToken() { return $this->token; }
  function GetOpMode() { return $this->opMode; }
  function GetDbObfuscation() { return $this->dbObfuscation; }

The constructor initialises the properties and the database connection. In the template the database definition contains only the table for the users. You can add the definition of other tables needed for your app in dbDef and they will be created automatically. The automatic creation of the database is done by trying first to open it with SQLITE3_OPEN_READWRITE. If it fails it means the database doesn't exist, then we can create it by using SQLITE3_OPEN_READWRITE | SQLITE3_OPEN_CREATE and CreateDb() takes care of creating the tables as defined in dbDef.

  function __construct() {
    $this->login = "";
    $this->token = "";
    $this->opMode = 0;
    $this->dbObfuscation = XXX_DB_OBFUSCATION;
    if($this->dbObfuscation == "") {
      echo "The obfuscation parameter for the database hasn't been set. " .
        "Set it before using XXX.";
      exit(0);
    }
    $this->guestAccount = XXX_GUEST;
    $this->pathDb = dirname(__FILE__) .
      "/YYY." . $this->dbObfuscation . ".db";
    $this->dbDef = array(
      'User' => array(
        'Login' => 'TEXT',
        'Password' => 'TEXT',
        'Token' => 'TEXT',
        'Expiration' => 'DATETIME')
    );
    try {
      $this->db = new SQLite3($this->pathDb, SQLITE3_OPEN_READWRITE);
    } catch(Exception $e) {}
    if($this->db == null) {
      try {
        $this->db = new SQLite3(
          $this->pathDb, SQLITE3_OPEN_READWRITE | SQLITE3_OPEN_CREATE);
        $this->CreateDb();
      } catch(Exception $e) {
        echo "Exception caught:<br>" . nl2br($e);
        exit(0);
      }
    }
  }

The automatic database creation is done as follow. Loop on the database definition, create and execute the SQL command for each table creation. IF NOT EXISTS is used to be able to call that method more than once and create only non existing tables. It isn't useful in the template as it is now, and only left in preparation for future improvement of this model where an existing database would be automatically updated after dbDef is modified.

  function CreateDb() {
    foreach ($this->dbDef as $table => $tableDef) {
      $sql = 'CREATE TABLE IF NOT EXISTS ' . $table;
      $sql .= ' (Reference INTEGER PRIMARY KEY';
      foreach ($tableDef as $field => $fieldDef) {
        $sql .= ', ' . $field . ' ' . $fieldDef;
      }
      $sql .= ')';
      $this->db->exec($sql);
    }
  }

The destructor simply closes the connection to the database.

  function __destruct() {
    if($this->db) $this->db->close();
  }

The Main() method checks if the user is logged in and set opMode accordingly. In the html section the DOM will be created based on this property: either a login interface, either the app interface.

  function Main() {
    try {
      if($this->CheckLogin()) 
        $this->opMode = 1;
      else
        $this->opMode = 0;
    } catch(Exception $e) {
      echo "<div class='divTile'>Exception caught:<br>" . nl2br($e) . "</div>";
      exit(0);
    }
  }

The CheckLogin() method checks if the user is logged in, either because it has already logged in in the current session, or because it is providing credentials right now. If the guest account is set and it's the currently used account then the user is always considered logged in. If the user is providing credentials for login, they are checked against those saved in the database, or if there are no credentials yet then they are used to create the first (and single) user. The model currently allows for only one user (plus the eventual guest user). I plan to allow for several ones in the future once I find a solution that fits my taste. Upon login, a token is generated and used in API calls to ensure they come from a valid logged in user. Token also expires automatically after a given time.

  function CheckLogin() {
    $isLogin = false;
    if($this->guestAccount != "" && $_POST["login"] == $this->guestAccount) {
      $this->login = $_POST["login"];
      return true;
    }
    if(
      isset($_POST["login"]) && isset($_POST["pwd"]) &&
      $_POST["login"] != "" && ctype_alnum($_POST["login"]) &&
      ($_POST["login"] == $this->guestAccount || $_POST["pwd"] != "")
    ) {
      if($this->HasUser()) {
        $stmt = $this->db->prepare(
          "SELECT Password FROM User WHERE Login=:login");
        $stmt->bindValue(":login", $_POST["login"], SQLITE3_TEXT);
        $rows = $stmt->execute();
        if($rows) {
          $hashPwd = $rows->fetchArray();
          if($hashPwd && $hashPwd[0] != "") {
            $isLogin = password_verify($_POST["pwd"], $hashPwd[0]);
          } else {
            $isLogin = false;
          }
        } else {
          $isLogin = false;
        }
      } else {
        if($_POST["login"] != $this->guestAccount) {
          $hashPwd = password_hash($_POST["pwd"], PASSWORD_DEFAULT);
          $stmt = $this->db->prepare(
            "INSERT INTO User (Login, Password) VALUES (:login, :pwd)");
          $stmt->bindValue(":login", $_POST["login"], SQLITE3_TEXT);
          $stmt->bindValue(":pwd", $hashPwd, SQLITE3_TEXT);
          $rows = $stmt->execute();
          if($rows === false) throw new Exception("statement_failed");
          $isLogin = true;
        } else {
          $isLogin = false;
        }
      }
      if($isLogin) {
        $this->login = $_POST["login"];
        $this->token = password_hash($_POST["pwd"], PASSWORD_DEFAULT);
        $stmt = $this->db->prepare(
          "UPDATE User SET Token=:token, Expiration=:expiration " .
          "WHERE Login=:login");
        $stmt->bindValue(":login", $_POST["login"], SQLITE3_TEXT);
        $stmt->bindValue(":token", $this->token, SQLITE3_TEXT);
        $expiration = date('Y-m-d H:i:s', strtotime('+12 hours'));
        $stmt->bindValue(":expiration", $expiration, SQLITE3_TEXT);
        $rows = $stmt->execute();
        if($rows === false) throw new Exception("statement_failed");
      }
    }
    return $isLogin;
  }
  function HasUser() {
    $rows = $this->db->query("SELECT COUNT(*) FROM User");
    return ($rows && $rows->fetchArray()[0] >= 1);
  }

The token verification is done as follow. For each API calls a login and token are provided by the user request. The token is checked against the one created for that user during login, and its expiration is checked at the same time. Here again, the guest user is considered to always have a valid token.

  function CheckToken() {
    if(isset($_POST["login"])) {
      if($this->guestAccount != "" && $_POST["login"] == $this->guestAccount) {
        return true;
      }
      if(isset($_POST['token'])) {
        $stmt = $this->db->prepare(
          "SELECT COUNT(*) FROM User WHERE Login=:login AND Token=:token AND " .
          "Expiration>='" . date('Y-m-d H:i:s') . "'");
        $stmt->bindValue(":login", $_POST["login"], SQLITE3_TEXT);
        $stmt->bindValue(":token", $_POST["token"], SQLITE3_TEXT);
        $rows = $stmt->execute();
        if($rows === false) throw new Exception("statement_failed");
        if($rows->fetchArray()[0] > 0) return true;
      }
    }
    return false;
  }

API calls are processed by the method API(). First of all the token is verified. Then the request is routed based on the action parameter. This is here where we eventually reject actions not allowed for a guest user. The result of a request is returned as a JSON encoded dictionary, which contains at least the actionResult entry, equal to ok if the request succeeded. The exit(0) at the end of the method ensures there is no other output that would mess up the JSON data.

  function API() {
    try {
      if($this->CheckToken()) {
        if(isset($_POST['action'])) {
          if(
            $_POST['action'] == 'the_action' &&
            isset($_POST['the_param'])
          ) {
            echo $this->DoAction($_POST['the_param']);
          } else if(
            $_POST["login"] != $this->guestAccount &&
            $_POST['action'] == 'the_guest_action' &&
            isset($_POST['the_param']))
          ) {
            echo $this->DoGuestAction($_POST['the_param']);
          }
        } else {
          echo '{"actionResult":"no_action"}';
        }
      } else {
        echo '{"actionResult":"token_expired"}';
      }
    } catch(Exception $e) {
      echo '{"actionResult":' . json_encode($e->getMessage()) . '}';
    }
    exit(0);
  }

The template also contains a dummy DoAction() method as a boilerplate with all the select/delete/insert/update SQL commands.

  function DoAction($param) {

    $stmt = $this->db->prepare(
      "SELECT Reference as ref FROM ... WHERE ...==:p");
    $stmt->bindValue(":p", 42, SQLITE3_INTEGER);
    $rows = $stmt->execute();
    if($rows === false) throw new Exception("statement_failed");
    $row = $rows->fetchArray();
    return '{"actionResult":"ok", "ref":' . json_encode($row["ref"]) . '}';

    $stmt = $this->db->prepare('DELETE FROM ... WHERE ...==:p');
    $stmt->bindValue(":p", 42, SQLITE3_INTEGER);
    $rows = $stmt->execute();
    if($rows === false) throw new Exception("statement_failed");
    return '{"actionResult":"ok"}';

    $stmt = $this->db->prepare(
      "INSERT INTO ... (...) VALUES (:p)");
    $stmt->bindValue(":p", 42, SQLITE3_INTEGER);
    $rows = $stmt->execute();
    if($rows === false) throw new Exception("statement_failed");
    return '{"actionResult":"ok"}';

    $stmt = $this->db->prepare(
      "UPDATE ... SET ...=:p WHERE ...");
    $stmt->bindValue(":p", $ref, SQLITE3_INTEGER);
    $rows = $stmt->execute();
    if($rows === false) throw new Exception("statement_failed");
    return '{"actionResult":"ok"}';

  }

The html/css section is as follow.

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
...
    </style>
    <title> XXX </title>
  </head>
  <body>
    <div id="divTop">
...
    </div>
    <script>
...
    </script> 
  </body>
</html>

The following css generally gives me 99% of all I need. I complete it as needed for each app.

html { width: 100%; height: 100%; }
body {
  background-color: #aaaaaa; color: #433126;
  font-family:  serif; font-size: 20px;
  width: 100%; height: 100%; margin: 0;
}
#divFooter {
  text-align: center; font-size: 12px;
  margin: auto; margin-top: 20px; width: 100%; padding: 5px;
  background-color: #aaaaaa;
}
input[type="button"] {
  background-color: #fecb5e; box-shadow: 2px 2px 10px #888888;
  margin: 2px 5px; padding: 2px 4px;
  border: 1px solid #fee9aa; border-radius: 5px; color: #624838;
}
input[type="submit"] {
  background-color: #fecb5e; box-shadow: 2px 2px 10px #888888;
  margin: 2px 5px; padding: 2px 4px; height: 24px;
  border: 1px solid #fee9aa; border-radius: 5px; color: #624838;
}
select {
  background-color: #fecb5e; box-shadow: 2px 2px 10px #888888; color: #624838;
  margin: 2px 5px; padding: 2px 4px; max-width: 290px;
  font: 13px sans-serif; text-decoration: none; font: 13px sans-serif;
  border: 1px solid #fee9aa; border-radius: 5px;
}
#divTop { margin:auto; text-align: center; width: 90%;}
#divMain { margin:auto; text-align: center; width: 90%;}
#divTitle { font-size: 30px; margin:auto; text-align: center; }
.divTile {
   width: 45%; min-width: 400px; vertical-align: top;
  position: relative; margin: 10px; padding: 10px;
  border: 1px solid #888888; border-radius: 3px; background-color: #cccccc;
  display: inline-block; overflow: auto; box-shadow: 4px 4px 4px 2px #999999;
}
.divSubTile {
   width: 90%; min-width: 300px; vertical-align: top;
  position: relative; margin: 10px; padding: 10px;
  border: 1px solid #888888; border-radius: 3px; background-color: #cccccc;
  display: block; overflow: auto; box-shadow: 4px 4px 4px 2px #999999;
}
#divLogin { margin:auto; }
.divInput { display: block; }
.divInputLeft { 
  width: 48%; text-align: right; display: inline-block; vertical-align: top;
}
.divInputRight { width: 48%; text-align: left; display: inline-block; }

The DOM of the app is contained in the divTop. According to the login status, a login interface or the app DOM is created. In both cases a header, message area and footer are also created. The header displays the app name. The message area displays various information to the user. The footer contains general information like the version, and links to logout and download the database if the user is logged in and not the guest. The DOM of the app can be created differently for the user or a guest by using <?php if($YYY->IsGuest() == false) :?>.

<?php if($YYY->GetOpMode() == 0) : ?>
      <div id='divLogin' class='divTile'>
        <form action='index.php' method='post'>
          <div class='divInput'>
            <label class='divInputLeft'>Login:</label>
            <input type='text' placeholder='Enter Login' id='login'
            name='login' required class='divInputRight'>
          </div>
          <div class='divInput'>
            <label class='divInputLeft'>Password:</label>
            <input type='password' placeholder='Enter Password'
            id='pwd' name='pwd' class='divInputRight'>
          </div>
          <input type='submit' value='Login'>
        </form>
      </div>
<?php elseif($YYY->GetOpMode() == 1) : ?>
      <div class='divTile' id='divMain'>
<?php if($YYY->IsGuest() == false) :?>
        This part is inaccessible to the guest user.
<?php endif; ?>
         <div class='divSubTile'>
          <div id='divMsg'></div>
        </div>
      </div>
    </div>
    <div id="divFooter">
      Version <span id="spanVersion"><?php echo XXX_VERSION; ?></span>,
      copyright ... <a target="blank_" 
      href="https://...">...</a>,
      more info <a target="_blank"
      href="...">here</a>
<?php
if($YYY->GetOpMode() == 1) {
  if($YYY->GetLogin() != $YYY->GetGuestAccount()) {
    echo ", <a href=\"./YYY." . $YYY->GetDbObfuscation() .
      ".db\" download>download</a> the database";
  }
  echo ", logged as " . $YYY->GetLogin();
  echo ", <a href=\"index.php\">logout</a>";
}
?>

The javascript section is as follow.

First there are two utility functions. One to get a DOM element from its id (it's really just a shortcut). And the other to sleep the app (probably never used for something else than tests).

function elem(id) { return document.getElementById(id); }
function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms));}

Like for the PHP section, everything is encapsulated in a class. An instance is created on window.onload and the necessary initialisation is performed. One can branch the code between guest user and logged in user by using the condition if(YYY.login != YYY.guestAccount).

class XXX {
  ...
}
window.onload = function() {
  const YYY = new XXX();
  if(YYY.login != "") {
    if(YYY.login != YYY.guestAccount) {
      ...
    }
    YYY.PushInfoMsg("Welcome to XXX " + YYY.version);
  }
}

The class constructor sets properties used to communicate with the API (the login and token), and may do some other app-specific initialisations. The condition if(this.login != "") allows to branch between the login interface and the app interface.

  constructor() {
    <?php echo 'this.version = "' . XXX_VERSION . '"'; ?>;
    elem("spanVersion").innerHTML = this.version;
    <?php echo 'this.login = "' . $YYY->GetLogin() . '"'; ?>;
    <?php echo 'this.guestAccount = "' . $YYY->GetGuestAccount() . '"'; ?>;
    <?php echo 'this.token = "' . $YYY->GetToken() . '"'; ?>;
    if(this.login != "") {
      this.nbMaxMessage = 3;
      ...
    }
  }

Two methods allow to send messages to the message area. One retains a given number of messages (nbMaxMessage property), deleting the oldest to add the newest when it's full. The other replaces the last message with a new one (useful to display progression messages). Messages are automatically dated by default, that may be useful, or not, depending on the app.

  PushInfoMsg(msg) {
    const divInfo = elem('divMsg');
    while(divInfo.childElementCount >= this.nbMaxMessage)
      divInfo.removeChild(divInfo.firstElementChild);
    this.AddElem(divInfo, 'div',
      {'innerHTML':this.GetCurrentTime() + " " + msg});
  }
  UpdateLastInfoMsg(msg) {
    const divInfo = elem('divMsg');
    divInfo.removeChild(divInfo.lastElementChild);
    this.AddElem(divInfo, 'div',
      {'innerHTML':this.GetCurrentTime() + " " + msg});
  }
  GetCurrentTime() {
    const now = new Date();
    return String(now.getHours()).padStart(2, '0') + ":" +
      String(now.getMinutes()).padStart(2, '0');
  }

As most of the DOM is created dynamically I've made a convenient method to create new DOM element given its type and a dictionary of properties/values.

  AddElem(parent, type, properties) {
    const elem = document.createElement(type);
    for (const [prop, val] of Object.entries(properties)) elem[prop] = val;
    parent.appendChild(elem);
    return elem;
  }

Finally, probably the most important method, used to communicate with the API. It takes in arguments the request parameters, two handlers called on success and failure of the API call, and extra parameters for the handlers. Non blocking by default, it can be called in blocking mode by using await.

  async Request(reqData, params, success, failure) {
    try {
      reqData['login'] = this.login;
      reqData['token'] = this.token;
      const response = await fetch("index.php", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: new URLSearchParams(reqData),
      });
      if(response.ok) {
        const retData = await response.json();
        if(retData["actionResult"] != "ok") {
          throw new Error(retData["actionResult"]);
        } else return success(retData, ...params);
      } else throw new Error('API request failed.');
    } catch (err) {
      return failure(err, ...params);
    }
  }

A dummy method using Request() is also provided as a boilerplate:

  DoSomething() {
    const data = {
      'action': 'the_action',
      'the_param': 42
    };
    this.Request(data, [this],
      (retData, YYY) => {
          if(YYY.login != YYY.guestAccount)
            ...
      },
      (err, YYY) => {
        YYY.PushInfoMsg(err);
      });
  }

And this is all for the template. Developping an actual app using it consists of implementing the API entry points in the php section to edit/retrieve necessary data, and in the javascript section implementing the DOM creation (based on these data) and handlers for its elements event (connecting them to the API and making the app alive). The details below about the Chishiki app give a concrete example.

The Chishiki app

The database definition is as follow. There is only one table: Entry. Each piece of knowledge in the app is called an entry. Keys is the list of keywords (space seperated) which identifies one entry (strictly speaking, the app doesn't forbid to create two entries with the same keys). Text stores the text of the entry. ImageHeader and Image store the entry's image data. The text and image are optional, but an entry must have at least one of them.

    $this->dbDef = array(
      ...
      'Entry' => array(
        'Keys' => 'TEXT NOT NULL',
        'Text' => 'TEXT',
        'ImageHeader' => 'TEXT',
        'Image' => 'BLOB')
    );

The API has 5 entry points, 3 of them unavailable for the guest user. They allow to search for entries based on keywords; get one entry's text and image; add a new entry; update an entry; get the reference of an entry.

  function API() {
    try {
      if($this->CheckToken()) {
        if(isset($_POST['action'])) {
          if(
            $_POST['action'] == 'search_entry' &&
            isset($_POST['keys'])
          ) {
            echo $this->SearchEntries($_POST['keys']);
          } else if(
            $_POST['action'] == 'get_entry' &&
            isset($_POST['ref'])
          ) {
            echo $this->GetEntry($_POST['ref']);
          } else if(
            $_POST["login"] != $this->guestAccount &&
            $_POST['action'] == 'add_entry' &&
            isset($_POST['keys']) &&
            isset($_POST['text']) &&
            isset($_POST['image'])
          ) {
            echo $this->AddEntry(
              $_POST['keys'], $_POST['text'], $_POST['image']);
          } else if(
            $_POST["login"] != $this->guestAccount &&
            $_POST['action'] == 'save_entry' &&
            isset($_POST['ref']) &&
            isset($_POST['keys']) &&
            isset($_POST['text']) &&
            isset($_POST['image'])
          ) {
            echo $this->SaveEntry(
              $_POST['ref'], $_POST['keys'], $_POST['text'], $_POST['image']);
          } else if(
            $_POST["login"] != $this->guestAccount &&
            $_POST['action'] == 'get_reference' &&
            isset($_POST['keys'])
          ) {
            echo $this->GetReference($_POST['keys']);
          } else {
            echo '{"actionResult":"invalid_action"}';
          }
        } else {
          echo '{"actionResult":"no_action"}';
        }
      } else {
        echo '{"actionResult":"token_expired"}';
      }
    } catch(Exception $e) {
      echo '{"actionResult":' . json_encode($e->getMessage()) . '}';
    }
    exit(0);
  }

Keys received from the user are sanitized with the following method to avoid leading, traliing and duplicated spaces.

  function SanitizeKeys($keys) {
    return preg_replace("/\s\s+/", " ", trim($keys));
  }

Another method validates keys by checking that none of them starts with ":" which is reserved in Chishiki for special searches.

  function IsValidKeys($keys) {
    if(trim($keys) == "") return False;
    $keys_arr = explode(" ", trim($keys));
    foreach($keys_arr as $key) {
      if($key != "") {
        if($key[0] == ":") return False;
      }
    }
    return True;
  }

The entry point to add a new entry is as follow. First it checks for the validity of the keys, and the presence of at least one of the text and image. The image data, which are base64 encoded, are split into the header and body. This allows to decode the body and save it as a blob without loosing space due to the base64 encoded, and to keep the header separately in readable and easy to process format. The prepared data are finally saved in the database and the action result is returned.

  function AddEntry($keys, $text, $image) {
    if($this->IsValidKeys($keys) && ($text != "" || $image != "")) {
      $imageData = $this->SplitImageData($image, 2);
      $stmt = $this->db->prepare(
        "INSERT INTO Entry (Keys, Text, Image, ImageHeader) " .
        "VALUES (:keys, :txt, :img, :imgHeader)");
      $sanitizedKeys = $this->SanitizeKeys($keys);
      $stmt->bindValue(":keys", $sanitizedKeys, SQLITE3_TEXT);
      $stmt->bindValue(":txt", $text, SQLITE3_TEXT);
      $stmt->bindValue(":imgHeader", $imageData[0], SQLITE3_TEXT);
      $stmt->bindValue(":img", base64_decode($imageData[1]), SQLITE3_BLOB);
      $rows = $stmt->execute();
      if($rows === false) throw new Exception("statement_failed");
      $ref = $this->db->lastInsertRowid();
      $result = '{"actionResult":"ok", "ref":' . $ref .
        ', "keys":' . json_encode($sanitizedKeys) . ', "actionType":"add"}';
    } else {
      $result = '{"actionResult":"invalid_data"}';
    }
    return $result;
  }
  function CheckImageHeader($imageHeader) {
    return (
      substr($imageHeader, 0, 5) === "data:" &&
      substr($imageHeader, -7, 7) === ";base64"
    );
  }
  function SplitImageData($image) {
    if($image != "") {
      $imageData = explode(',', $image, 2);
      if(
        count($imageData) != 2 || 
        $this->CheckImageHeader($imageData[0]) === false
      ) {
        throw new Exception("invalid_image");
      }
    } else {
      $imageData = array("", "");
    }
    return $imageData;
  }

There is no entry point for deletion of an entry, but it's covered by the one used to update an entry: if both the image and text are null, then we consider it is a deletion and reroute toward the following method, which simply delete the given reference.

  function DeleteEntry($ref) {
    $stmt = $this->db->prepare('DELETE FROM Entry WHERE Reference==:ref');
    $stmt->bindValue(":ref", $ref, SQLITE3_INTEGER);
    $rows = $stmt->execute();
    if($rows === false) throw new Exception("statement_failed");
    return '{"actionResult":"ok", "actionType":"delete", "ref":"' . $ref . '"}';
  }

The entry point for update of an entry is as follow. It is similar to the addition of a new entry, except for the routing toward the deletion if necessary, and UPDATE for a given reference instead of INSERT.

  function SaveEntry($ref, $keys, $text, $image) {
    if($text == "" && $image == "") {
      return $this->DeleteEntry($ref);
    } else {
      $imageData = $this->SplitImageData($image, 2);
      $stmt = $this->db->prepare(
        "UPDATE Entry SET Keys=:keys, Text=:txt, Image=:img, " .
        "ImageHeader=:imgHeader WHERE Reference=:ref");
      $stmt->bindValue(":ref", $ref, SQLITE3_INTEGER);
      $sanitizedKeys = $this->SanitizeKeys($keys);
      $stmt->bindValue(":keys", $sanitizedKeys, SQLITE3_TEXT);
      $stmt->bindValue(":txt", $text, SQLITE3_TEXT);
      $stmt->bindValue(":imgHeader", $imageData[0], SQLITE3_TEXT);
      $stmt->bindValue(":img", base64_decode($imageData[1]), SQLITE3_BLOB);
      $rows = $stmt->execute();
      if($rows === false) throw new Exception("statement_failed");
      return '{"actionResult":"ok", "actionType":"update", "ref":"' .
        $ref . '", "keys":' . json_encode($sanitizedKeys) . '}';
    }
  }

The entry point to get the reference of an entry is straightforward. The only noticeable thing here is that here we consider an exact match for the keys in argument (different from the search entry point).

  function GetReference($keys) {
    $stmt = $this->db->prepare(
      "SELECT Reference as ref FROM Entry WHERE Keys == :keys");
    $stmt->bindValue(":keys", $this->SanitizeKeys($keys), SQLITE3_TEXT);
    $rows = $stmt->execute();
    if($rows) {
      $row = $rows->fetchArray();
      $result =
        '{"actionResult":"ok", "ref":' . json_encode($row["ref"]) . '}';
    } else {
      throw new Exception("statement_failed");
    }
    return $result;
  }

The entry point to get an entry is as follow. To simplify the code in the javascript section it accepts invalid reference (≤0), for which it returns an empty entry. For a valid reference, it returns the entry data, after taking care of reassembling and reencoding in base64 the image body and header because that's the expected format on javascript side.

  function GetEntry($ref) {
    if($ref <= 0) {
      $result = '{"actionResult":"ok", "ref":-1, "keys":"", "txt":"", "img":""}';
    } else {
      $stmt = $this->db->prepare(
        "SELECT Reference as ref, Keys as keys, " .
        "Text as txt, Image as img, ImageHeader as imgHeader " .
        "FROM Entry WHERE Reference == :ref");
      $stmt->bindValue(":ref", $ref, SQLITE3_INTEGER);
      $rows = $stmt->execute();
      if($rows) {
        $row = $rows->fetchArray();
        if($row["imgHeader"] !== "") {
          $imgData = $row["imgHeader"] . ',' . base64_encode($row["img"]);
        } else {
          $imgData = "";
        }
        $result = '{"actionResult":"ok", "ref":' . json_encode($row["ref"]) .
          ', "keys":' . json_encode($row["keys"]) .
          ', "txt":' . json_encode($row["txt"]) .
          ', "img":' . json_encode($imgData) . '}';
      } else {
        throw new Exception("statement_failed");
      }
    }
    return $result;
  }

The last entry point is the one used to search entries matching given keys. There is currently one special keyword defined in Chishiki: ":all". It returns all the entries in the database. For normal keywords, I search entries whose keys included the requested keys. For examples, the entry's keys "a b c" will match "a" or "a b" or "a c" or "b a" etc... but will not match "d" or "aa" or "a d". The SELECT command is generated dynamically from each key in the keys in argument (sanitized and split on ' ').

  function SearchEntries($keys) {
    if($keys == "") {
      return '{"actionResult":"ok", "entries":[]}';
    } else if($keys == ":all") {
      $stmt = $this->db->prepare(
        "SELECT Reference as r, Keys as k FROM Entry ORDER BY Keys");
    } else {
      $cond = "";
      $iKey = 0;
      $sanitizedKeys = $this->SanitizeKeys($keys);
      $keys_arr = explode(" ", $sanitizedKeys);
      foreach($keys_arr as $key) {
        if($key != "") {
          if($cond != "") $cond .= " AND ";
          $cond .= "(Keys LIKE concat(:k" . $iKey . ", ' %') OR ";
          $cond .= "Keys LIKE concat('% ', :k" . $iKey . ") OR ";
          $cond .= "Keys LIKE concat('% ', :k" . $iKey . ", ' %') OR ";
          $cond .= "Keys == :k" . $iKey . ")";
          $iKey += 1;
        }
      }
      $stmt = $this->db->prepare(
        "SELECT Reference as r, Keys as k FROM Entry WHERE " . $cond .
        " ORDER BY Keys");
      $iKey = 0;
      foreach($keys_arr as $key) {
        if($key != "") {
          $stmt->bindValue(":k" . $iKey, $key, SQLITE3_TEXT);
          $iKey += 1;
        }
      }
    }
    $rows = $stmt->execute();
    $result = "";
    if($rows) {
      while($row = $rows->fetchArray()) {
        if ($result != "") $result .= ",";
        $result .= '{"ref":' . json_encode($row["r"]) .
          ', "keys":' . json_encode($row["k"]) .'}';
      }
    } else {
      throw new Exception("statement_failed");
    }
    return '{"actionResult":"ok", "entries":[' . $result . ']}';
  }

The CSS styling has a few more definitions:

#inpSearch { width: 50%; min-width: 300px; }
#divResult { max-height: 100px; overflow: auto; }
#inpEntryKeywords { width: 100%; }
#txtEntryText { width: 100%; field-sizing: content; max-height: 500px; }
#imgEntryImage { max-width: 90%; }
#divListImport { width: fit-content; margin: auto; }
.divImportKeys { display: inline-block; width: 50%; text-align: left; }
.divImportSelect { display: inline-block; width: 50%; }

And the static DOM for the app is as follow:

<?php elseif($chishiki->GetOpMode() == 1) : ?>
      <div class='divTile' id='divMain'>
        <div class='divSubTile' id='divSearch'>
          <input type='text' id='inpSearch' placeholder='space separated keywords'>
          <input type='button' id='btnSearch' value='Search'>
<?php if($chishiki->IsGuest() == false) :?>
          <input type='button' id='btnExport' value='Export'>
          <input type='button' id='btnImport' value='Import'>
<?php endif; ?>
        </div>
        <div class='divSubTile' id='divEntries'>
          <div id='divResult'>
            <span>...</span>
          </div>
        </div>
        <div class='divSubTile' id='divEntry'>
          <div style="display: block; width: 95%; margin: auto; max-width: 600px; ">
            <div>
<?php if($chishiki->IsGuest() == false) :?>
              <input type='button' id='btnSave' value='Save new entry'>
              <input type='button' id='btnUndo' value='Undo'>
              <input type='button' id='btnSetImage' value='Set image'>
              <input type='button' id='btnDelete' value='Delete'>
              <input type='button' id='btnDeleteOk' value='Yes, delete' style='display:none;'>
              <input type='button' id='btnDeleteCancel' value='No, cancel' style='display:none;'>
<?php endif; ?>
            </div>
            <div>
              <input type='text' id='inpEntryKeywords'><br>
              <textarea id='txtEntryText'></textarea><br>
            </div>
          </div>
          <img id='imgEntryImage' style='display:none;'>
        </div>
<?php if($chishiki->IsGuest() == false) :?>
        <div class='divSubTile' id='divImport'>
          <div id='divListImport'></div>
          <div id='divToolsImport'>
            <input type='button' id='btnImportOk' value='Import'>
            <input type='button' id='btnImportCancel' value='Cancel'>
            <input type='button' id='btnRadioImportAll'
              value='Set all to "import"'>
            <input type='button' id='btnRadioIgnoreAll'
              value='Set all to "ignore"'>
          </div>
        </div>
<?php endif; ?>

Lastly, the javascript section for the Chishiki app is as follow. In the constructor, I initialise the flag to memorise if the current entry has been modified, and I set the current entry to a new one identified by the reference -1. I also add a new property which is the maximum size for the image of an entry.

  constructor() {
    ...
    if(this.login != "") {
      ...
      this.SetFlagModif(false);
      this.SetCurrentEntry(-1);
      this.sizeMaxImage = 1000000;  
    }
  }

The method to set the flag about modification enable/disable the 'save' and 'undo' buttons if they exist (the guest user has no access to edit functionalities).

  SetFlagModif(flag) {
    if(this.login != this.guestAccount) {
      this.flagModif = flag;
      if(flag) {
        elem("btnSave").disabled = false;
        elem("btnSave").style.color = "#624838";
        elem("btnUndo").disabled = false;
        elem("btnUndo").style.color = "#624838";
      } else {
        elem("btnSave").disabled = true;
        elem("btnSave").style.color = "#777777";
        elem("btnUndo").disabled = true;
        elem("btnUndo").style.color = "#777777";
      }
    }
  }

The method to set the current entry updates the interface's buttons (save, cancel, delete), memorise the current entry reference. Then it displays the entry using the method DisplayEntry().

  SetCurrentEntry(ref) {
    this.entryRef = ref;
    if(this.entryRef == -1) {
      if(this.login != this.guestAccount) {
        elem("btnSave").value = "Save new entry";
        elem('btnSetImage').value = "Set image";
        this.DeleteCancel();
        elem("btnDelete").disabled = true;
        elem("btnDelete").style.color = "#777777";
      }
      elem("inpEntryKeywords").value = "";
      elem('inpEntryKeywords').placeholder = elem('inpSearch').value;
      elem("txtEntryText").value = "";
      elem('imgEntryImage').style.display = "none";
    } else {
      if(this.login != this.guestAccount) {
        elem("btnSave").value = "Save entry #" + this.entryRef;
        this.DeleteCancel();
        elem("btnDelete").disabled = false;
        elem("btnDelete").style.color = "#624838";
      }
    }
    this.DisplayEntry(this.entryRef);
  }

The method to display an entry first checks if the current one is modified. If it is then it request the user save it or undo the modifications. Else, it send a request to the API to get the entry's data. Here we don't mind if it's a new entry because the API is made to handle the case of a new entry. This simplify the code. The success handler updates the keys, text and image in the interface. One must take care of replacing the line return in the text into br elements to ensure they are correctly displayed in the textarea. For the image, thanks to the base64 encoding there is nothing else to do than set the data to the src property of the img element.

  DisplayEntry() {
    if(this.flagModif) {
      this.PushInfoMsg("Save or undo the modified entry before selection.");
    } else {
      const data = {
        'action': 'get_entry',
        'ref': this.entryRef
      };
      this.Request(data, [this],
        (retData, chishiki) => {
          elem("inpEntryKeywords").value = retData["keys"];
          if(retData["txt"] && retData["txt"] != "") {
            elem("txtEntryText").value =
              retData["txt"].replaceAll('<br>', '\n');
          } else {
            elem("txtEntryText").value = "";
          }
          if(!retData["img"] || retData["img"] == "") {
            elem('imgEntryImage').style.display = "none";
            if(chishiki.login != chishiki.guestAccount)
              elem('btnSetImage').value = "Set image";
          } else {
            elem('imgEntryImage').style.display = "inline-block";
            elem('imgEntryImage').src = retData["img"];
            if(chishiki.login != chishiki.guestAccount)
              elem('btnSetImage').value = "Remove image";
          }
          chishiki.SetFlagModif(false);
        },
        (err, chishiki) => {
          chishiki.PushInfoMsg(err);
        });
    }
  }

The method to save an entry is as follow. First it checks if the user has provided keys. If not, it replaces them with the search keys. Then it sanitizes these keys. It's also done on the API side, it's just another layer of protection. The action is set according to the current entry reference (add a new one, or update an existing one). The data are gathered from the interface and the request is sent. The display property of the image is used to identify if the entry has an image or not. If both the text and image were null then the entry is deleted and a new search with the current search keys is automatically performed to update the search results. The automatic search also occurs if a new entry has been saved, again to update the search results.

  Save() {
    if(elem('inpEntryKeywords').value == "") {
      elem('inpEntryKeywords').value = elem('inpEntryKeywords').placeholder;
    }
    elem('inpEntryKeywords').value =
      this.SanitizeKeys(elem('inpEntryKeywords').value);
    let action = 'save_entry';
    if(this.entryRef == -1) action = 'add_entry';
    const data = {
      'action': action,
      'ref': this.entryRef,
      'keys': elem('inpEntryKeywords').value,
      'text': elem('txtEntryText').value.replaceAll('\n', '<br>'),
      'image': ""
    };
    if(elem('imgEntryImage').style.display != "none")
      data['image'] = elem('imgEntryImage').src;
    this.Request(data, [this],
      (retData, chishiki) => {
        if(retData["actionResult"] == "ok") {
          chishiki.SetFlagModif(false);
          if(retData["actionType"] == "delete") {
            chishiki.PushInfoMsg("Deleted entry #" + retData["ref"]);
            const displayDefault = true;
            chishiki.Search(displayDefault);
          } else {
            chishiki.PushInfoMsg("Saved entry #" + retData["ref"]);
            const displayDefault = false;
            chishiki.Search(displayDefault);
            if(retData["actionType"] == "add") {
              chishiki.SetCurrentEntry(retData["ref"]);
            }
          }
        } else {
          chishiki.PushInfoMsg("Failed to save the entry");
        }},
      (err, chishiki) => {
        chishiki.PushInfoMsg(err);
      });
  }
  SanitizeKeys(keys) {
    return keys.trim().replace(/\s\s+/g, " ");
  }

Undoing modifications is as simple as displaying again the current entry. This will reload the last saved data for the current entry and update the data in the interface.

  Undo() {
    this.SetFlagModif(false);
    this.SetCurrentEntry(this.entryRef);
  }

The search functionality also starts by checking if the current entry is modified to avoid loosing modification. Then, it sends the request for a search with the current search keys to the API and displays the result using the DisplayResult() method. An argument allows to control if we want to display the first entry in the result (when the user is searching), or leave the current entry (when the user is editing an entry and the search purpose is only to refresh the results).

  Search(displayDefault) {
    if(this.flagModif) {
      this.PushInfoMsg("Save or undo the modified entry before searching.");
    } else {
      const data = {
        'action': 'search_entry',
        'keys': elem('inpSearch').value
      };
      this.Request(data, [this, displayDefault],
        (retData, chishiki, displayDefault) => {
          chishiki.DisplayResult(retData);
          if(displayDefault) chishiki.DisplayDefaultEntry();
        },
        (err, chishiki) => {
          chishiki.PushInfoMsg(err);
        });
    }
  }

The default display of an entry consists of setting the current entry to the first one in the result if any, or to a new entry else.

  DisplayDefaultEntry() {
    if (this.data && this.data["entries"] && this.data["entries"].length > 0) {
      this.SetCurrentEntry(this.data["entries"][0]["ref"]);
    } else {
      this.SetCurrentEntry(-1);
    }
  }

The display of the results of a search is as follow. The result of the search are memorised for later use. The search result area in the interface is emptied, and its content is replaced with several buttons, one per entry in the result. Each button's label is the entry's keys, and is linked to SetCurrentEntry() with the reference of the corresponding entry. A reference to the chishiki instance is added to the button properties, which can then be retrieved with event.target.chishiki to call the method.

  DisplayResult(retData) {
    this.data = retData;
    const divResult = elem("divResult");
    while(divResult.childElementCount > 0)
      divResult.removeChild(divResult.firstElementChild);
    if (this.data["entries"].length == 0) {
      if(elem("inpSearch").value != "") {
        this.AddElem(divResult, 'span', {'innerHTML':"no match"});
      } else {
        this.AddElem(divResult, 'span', {'innerHTML':"..."});
      }
    } else {
      const divResult = elem("divResult");
      for(const entry of this.data["entries"]) {
        const btn = this.AddElem(
          divResult, 'input', {'type':'button', 'value':entry["keys"]});
        btn.style.backgroundColor = "#c8c5fd";
        btn.style.height = "auto";
        btn.chishiki = this;
        btn.addEventListener(
          "click", (event) => {
            event.target.chishiki.SetCurrentEntry(entry["ref"]);});
      }
      this.PushInfoMsg("found " + this.data["entries"].length + " match(es)");
    }
  }

The deletion of an entry is a two steps operation for security: the "delete" button displays two "ok" and "cancel" buttons. The "cancel" button simply hides these two buttons and shows back the "delete" one. The "ok" button actually deletes the entry. It expoits the fact that an entry with no text and no image is deleted, then it deletes these data in the interface for the current entry and triggers a "save" request.

  Delete() {
    elem('btnDelete').style.display = 'none';
    elem('btnDeleteOk').style.display = 'inline-block';
    elem('btnDeleteCancel').style.display = 'inline-block';
  }
  DeleteOk() {
    elem('txtEntryText').value = "";
    elem('imgEntryImage').style.display = "none";
    this.Save();
    this.DeleteCancel();
  }
  DeleteCancel() {
    elem('btnDelete').style.display = 'inline-block';
    elem('btnDeleteOk').style.display = 'none';
    elem('btnDeleteCancel').style.display = 'none';
  }

To set an image in the current entry, I use the FileReader and input type="file" element. The input allows the user to select the image, and the FileReader reads its content and returns it as base64 data, ready to be set in the img element of the current entry. The display property (none/inline-block) is used to known if the current entry has an image. Trying to set the image of an entry having one already is considered equivalent to removing the image (hence simply hiding it) to keep things simple.

  SetImage() {
    const imgEntry = elem('imgEntryImage');
    if(imgEntry.style.display == "none") {
      const fileSelector = document.createElement("input");
      fileSelector.type = "file";
      fileSelector.accept="image/*";
      fileSelector.chishiki = this;
      fileSelector.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if(file.size > event.target.chishiki.sizeMaxImage) {
          event.target.chishiki.PushInfoMsg(
            "file too large " + file.size + ">" +
            event.target.chishiki.sizeMaxImage);
        } else {
          const reader = new FileReader();
          reader.onload = function (event) {
            const base64String = event.target.result;
            elem('imgEntryImage').src = base64String;
            elem('imgEntryImage').style.display = "inline-block";
            elem('btnSetImage').value = "Remove image";
          };
          reader.readAsDataURL(file);
        }
      });
      fileSelector.click();
    } else {
      imgEntry.style.display = "none";
      elem('btnSetImage').value = "Set image";
    }
    this.SetFlagModif(true);
  }

The export function allows the user to share entries with someone else. Only the result entries of the current search are exported, giving some control on what you want to export. The data are exported as a text file in JSON format: [{"keys":"...","text":"...","image":"..."},...]. This also opens the door to interaction between chishiki and another application. The Export() method loops on the search result, requests each entry's data to the API, gathers them into a dictionary and save them on disk using an automatically triggered a element whose link is an ObjectURL created from a Blob of the JSON encoded dictionary. To avoid flooding the API with requests if the user tries to export many data at once, the request for entry's data are sent in blocking mode (await). In case this takes time, the user can follow the progress in the message area.

  async Export() {
    if(this.flagModif) {
      this.PushInfoMsg("Save or undo the modified entry before export.");
    } else {
      if(this.data === undefined) return;
      try {
        this.dataExport = [];
        for(const entry of this.data["entries"]) {
          const data = {
            'action': 'get_entry',
            'ref': entry["ref"]
          };
          await this.Request(data, [this],
            async (retData, chishiki) => {
              chishiki.dataExport.push({"keys":retData["keys"],
                "text":retData["txt"], "image":retData["img"]});
              chishiki.UpdateLastInfoMsg(
                "Exporting " + chishiki.dataExport.length + "/" +
                chishiki.data["entries"].length);
            },
            (err, chishiki) => {
              chishiki.PushInfoMsg(err);
            });
        }
        this.PushInfoMsg("Exported " + this.dataExport.length + " entries");
        const data = new Blob([JSON.stringify(this.dataExport)],
          {type: 'text/plain'});
        const a = document.createElement('a');
        a.href = window.URL.createObjectURL(data);
        a.download = "chishiki.json";
        a.click();
      } catch(err) {
        this.PushInfoMsg("Failed to export. " + err);
      }
    }
  }

The importation of exported data (or data generated by another app) is done in two steps. First the imported data are read from a file, then the user select what to actually import from a list. Entries already existing in the database with exact same keys are overwritten, hence the necessity for the user to have the choice between "keep mine" or "update it". These conflicting entries are made easily identifiable thanks to visual clue.

  Import() {
    if(this.flagModif) {
      // Ask the user to save or undo first
      this.PushInfoMsg("Save or undo the modified entry before import.");
    } else {
      try {
        const fileSelector = document.createElement("input");
        fileSelector.type = "file";
        fileSelector.accept = "*";
        fileSelector.chishiki = this;
        fileSelector.addEventListener('change', (event) => {
          const reader = new FileReader();
          reader.chishiki = event.target.chishiki;
          reader.onload = function (event) {
            try {
              event.target.chishiki.importData = 
                JSON.parse(event.target.result);
              event.target.chishiki.PrepareImport();
            } catch(err) {
              event.target.chishiki.PushInfoMsg(
                "Failed to parse the file content");
            }
          };
          const file = event.target.files[0];
          reader.readAsText(file);
        });
        fileSelector.click();
      } catch(err) {
        this.PushInfoMsg("failed to import. " + err);
      }
    }
  }
  async PrepareImport() {
    const divListImport = elem("divListImport");
    while(divListImport.childElementCount > 0)
      divListImport.removeChild(divListImport.firstElementChild);
    for(const [iEntry, entry] of this.importData.entries()) {
      if(("keys" in entry) && ("text" in entry) && ("image" in entry)) {
        let data = {
          'action': 'get_reference',
          'keys': entry["keys"]
        };
        await this.Request(data, [entry, this],
          (retData, entry) => {
            entry["ref"] = retData["ref"];
            if(entry["ref"] == null) entry["action"] ='add_entry';
            else entry["action"] ='save_entry';
          },
          (err, entry, chishiki) => {
            entry["ref"] = null;
            chishiki.PushInfoMsg(err);
          });
        let bgColor = ['#dddddd','#bbbbbb'][iEntry % 2];
        let divImport = this.AddElem(divListImport, 'div', {});
        divImport.style.backgroundColor = bgColor;
        let divKey = this.AddElem(divImport, 'div', {
          'innerHTML':entry["keys"], 'className':'divImportKeys'});
        if(entry["ref"] != null) divKey.style.color = "#fd3535";
        let divSelect = this.AddElem(divImport, 'div', {
          'className':'divImportSelect'});
        let label = this.AddElem(divSelect, 'label', {'innerHTML':'import'});
        let inp = this.AddElem(label, 'input',
          {'type':'radio', 'name':'radioImport'+iEntry, 'value':0});
        inp.checked = (entry["ref"] == null);
        label = this.AddElem(divSelect, 'label', {'innerHTML':'ignore'});
        inp = this.AddElem(label, 'input',
          {'type':'radio', 'name':'radioImport'+iEntry, 'value':1});
        inp.checked = (entry["ref"] != null);
      }
    }
    elem('divSearch').style.display = 'none';
    elem('divEntries').style.display = 'none';
    elem('divEntry').style.display = 'none';
    elem('divImport').style.display = 'block';
  }

Here again, to avoid flooding the API the import is done in blocking mode and the progress is displayed in the message area.

  async ImportOk() {
    for (const [iEntry, entry] of this.importData.entries()) {
      const radios = document.getElementsByName('radioImport' + iEntry);
      if(radios && radios[0].checked == true) {
        await this.Request(entry, [this, iEntry],
          (retData, chishiki, iEntry) => {
              chishiki.UpdateLastInfoMsg(
                "Importing " + (iEntry+1) + "/" + chishiki.importData.length);},
          (err, chishiki) => {chishiki.PushInfoMsg(err);});
      }
    }
    this.importData = {};
    this.ImportCancel();
  }
  ImportCancel() {
    elem('divSearch').style.display = 'block';
    elem('divEntries').style.display = 'block';
    elem('divEntry').style.display = 'block';
    elem('divImport').style.display = 'none';
  }

In the import tool, two buttons allow to set all entries at once to "import" or "ignore". This also is made with the view to simplify the usage when there are many entries.

  SetAllRadioImport(opt) {
    for(const [iEntry, entry] of this.importData.entries()) {
      const radios = document.getElementsByName('radioImport' + iEntry);
      if(radios) radios[opt].checked = true;
    }
  }

Finally, all the event handler are set in the window.onload handler.

window.onload = function() {
  const chishiki = new Chishiki();
  if(chishiki.login != "") {
    elem('inpSearch').addEventListener('input',(evt) => {
      if(elem('inpEntryKeywords').value == "")
        elem('inpEntryKeywords').placeholder = elem('inpSearch').value;
    });
    elem('inpSearch').addEventListener('keypress',(evt) => {
      if(evt.which == 13) {
        const displayDefault = true;
        chishiki.Search(displayDefault);
      }
    });
    elem('txtEntryText').addEventListener('input',(evt) => {
      chishiki.SetFlagModif(true);
    });
    elem('inpEntryKeywords').addEventListener('input',(evt) => {
      chishiki.SetFlagModif(true);
    });
    elem('btnSearch').addEventListener('click',(evt) => {
      const displayDefault = true;
      chishiki.Search(displayDefault);
    });
    if(chishiki.login != chishiki.guestAccount) {
      elem('btnSave').addEventListener('click',(event) => {
        chishiki.Save();
      });
      elem('btnUndo').addEventListener('click',(event) => {
        chishiki.Undo();
      });
      elem('btnExport').addEventListener('click',(event) => {
        chishiki.Export();
      });
      elem('btnImport').addEventListener('click',(event) => {
        chishiki.Import();
      });
      elem('btnRadioImportAll').addEventListener('click',(event) => {
        const choiceImport = 0;
        chishiki.SetAllRadioImport(choiceImport);
      });
      elem('btnRadioIgnoreAll').addEventListener('click',(event) => {
        const choiceIgnore = 1;
        chishiki.SetAllRadioImport(choiceIgnore);
      });
      elem('btnSetImage').addEventListener('click',(event) => {
        chishiki.SetImage();
      });
      elem('btnImportOk').addEventListener('click',(event) => {
        chishiki.ImportOk();
      });
      elem('btnImportCancel').addEventListener('click',(event) => {
        chishiki.ImportCancel();
      });
      elem('btnDelete').addEventListener('click',(event) => {
        chishiki.Delete();
      });
      elem('btnDeleteOk').addEventListener('click',(event) => {
        chishiki.DeleteOk();
      });
      elem('btnDeleteCancel').addEventListener('click',(event) => {
        chishiki.DeleteCancel();
      });
      elem('divImport').style.display = 'none';
    }
    chishiki.PushInfoMsg("Welcome to Chishiki " + chishiki.version);
    elem('inpSearch').focus();
  }
}

To end this article, a few screenshots of the app. The main interface after login:

The result of a search:

The import interface:

Example of an entry with an image:

Example in guest mode:

2026-07-16
in All, Web app,
9 views
A comment, question, correction ? A project we could work together on ? Email me!
Learn more about me in my profile.
This entire website was created without
any contribution from a generative AI.