Journal Editing Tutorial

Posted on by
Journal Editing Tutorial

Journal Editing Tutorial

You may think, further to testerday’s Journal Content Tutorial‘s “consideration list” …

  • format
  • display
  • styling
  • usability
  • navigation

… if we were to add to that “consideration list” …

  • editability

… we’d want to reinvoke interest in our textarea “underlay” to be an “overlay” here, it being a more natural text editing HTML element than an HTML div element? Well, HTML5 gave us the wonderful contenteditable=true where the onblur event of a div element can perform this functionality for us, and we, then, need no (no doubt, kind of “kludgy” feeling) “underlay, overlay” thinking, then, using …

<?php echo ”

function sedit(spano) {
if (spano.innerText != decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(/^null/g,'').replace(/^undefined/g,''))) {
try {
document.getElementById('nearby').value=window.btoa(('' + spano.getAttribute('data-ts')).replace(/^null/g,'').replace(/^undefined/g,'').replace(/\_/g, ' '));
} catch(hy) {
document.getElementById('nearby').value=('' + spano.getAttribute('data-ts')).replace(/^null/g,'').replace(/^undefined/g,'').replace(/\_/g, ' ');
}
try {
document.getElementById('wascont').value=window.btoa(decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(/^null/g,'').replace(/^undefined/g,'')));
//alert('0:' + document.getElementById('wascont').value);
} catch(hdfy) {
document.getElementById('wascont').value=decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(/^null/g,'').replace(/^undefined/g,''));
//alert('10:' + document.getElementById('wascont').value);
}
spano.setAttribute('data-oit', encodeURIComponent(spano.innerText));
try {
document.getElementById('nowcont').value=window.btoa(spano.innerText);
} catch(hdy) {
document.getElementById('nowcont').value=spano.innerText;
}
spanolast=spano;
document.getElementById('editsub').click();
}
}

“; ?>

… new Javascript, which only ever gets invoked should the Journal be accessed at the Journal originator’s “device place”, and building on the new HTML …

<?php echo ”

<form id=editf style=display:none; action='./journal.php' method=POST target=jjcont>
<input type=hidden name=nearby id=nearby value=''></input>
<input type=hidden name=wascont id=wascont value=''></input>
<input type=hidden name=nowcont id=nowcont value=''></input>
<input type=hidden name=relfile id=relfile value='" . $jtitle . "'></input>
<input type=submit id=editsub style=display:none; value='Submit'></input>
</form>
<iframe onload=\"if (!notfirsttime) { if (4 == 5) { setTimeout(function(){ location.href='./journal.php?fjname=" . $jtitle . "'; }, 20000); } } notfirsttime=false;\" src='/About_Us.html' id=jjcont name=jjcont style='display:none;'></iframe>

“; ?>

… and calling on new PHP …

<?php

if (isset($_POST['nearby']) && isset($_POST['wascont']) && isset($_POST['nowcont']) && isset($_POST['relfile'])) {
if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'))) {
$origcont=file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'));
$ocont=$origcont;
$tsis=str_replace('+',' ',urldecode($_POST['nearby']));
if (strpos($tsis, ' ') === false) {
$tsis=base64_decode($_POST['nearby']);
$wasc=base64_decode($_POST['wascont']);
$nowc=base64_decode($_POST['nowcont']);
} else {
$wasc=str_replace('+',' ',urldecode($_POST['wascont']));
$nowc=str_replace('+',' ',urldecode($_POST['nowcont']));
}
//file_put_contents('xa.xa', $tsis . "\n" . $wasc . "\n" . $nowc . "\n" . $origcont . "\n" . urlencode($wasc) . "\n" . urlencode($nowc) . "\n" . urlencode($origcont));
if (strpos($origcont, $tsis) !== false) {
$relcont=$tsis . explode($tsis, $origcont)[1];
if (strpos($origcont, trim($relcont)) !== false) {
//file_put_contents('xa.xa2z', $relcont . "\nvs\n" . $wasc);
}
//$relcont=explode($tsis, $origcont)[1];
//file_put_contents('xa.xa2', $relcont . "\nvs\n" . $wasc);
if (9 == 9) {
if (strpos(trim($relcont), trim($wasc)) === false || (strpos($relcont, explode("\n",$wasc)[0]) !== false && strpos($relcont, $wasc) === false)) {
//file_put_contents('xa.xa2g', $relcont . "\nvs\n" . $wasc);
$wsc=''; //explode("\n",$wasc)[0];
//file_put_contents('xa.xa2h', $relcont . "\nvs\n" . $wasc);
$afterrel=explode($tsis . $wsc, $origcont)[-1 + sizeof(explode($tsis . $wsc, $origcont))]; //$relcont)[1];
//file_put_contents('xa.xa2j', $afterrel);
$tsl=strlen($tsis);
//file_put_contents('xa.xa2k', $tsl);
$tslws=explode(' ',$tsis);
//file_put_contents('xa.xa2m', sizeof($tslws));
$afs=explode("\n", $afterrel);
//file_put_contents('xa.xa2n', sizeof($afs));
$ndone=false;
for ($jj=0; $jj<sizeof($afs); $jj++) {
if (!$ndone && (strlen($tsl) != strlen($afs[$jj]) || sizeof($tslws) != sizeof(explode(' ',$afs[$jj])))) {
$wsc.=$afs[$jj] . "\n";
} else if (strlen($tsl) == strlen($afs[$jj]) && sizeof($tslws) == sizeof(explode(' ',$afs[$jj]))) {
$ndone=true;
}
}
//file_put_contents('xa.xa2p', $relcont . "\nvs\n" . $wasc);
$wasc=trim($wsc);
//file_put_contents('xa.xa2aa', $relcont . "\nvs\n" . $wasc);
}
}
//if (strpos($relcont, explode("\n",$wasc)[0]) !== false) {
if (strpos($origcont, trim($wasc)) !== false && strpos(trim($relcont), trim($wasc)) === false) {
$relcont=$origcont;
}
if (strpos(trim($relcont), trim($wasc)) !== false) {
//file_put_contents('xa.xa2a', $relcont);
if (strpos($origcont, trim($wasc) . "\n") !== false && strpos($origcont, trim($relcont) . "\n") !== false) {
//file_put_contents('xa.xa2y', $relcont);
$origcont=str_replace(trim($relcont) . "\n", str_replace(trim($wasc) . "\n",trim($nowc) . "\n",trim($relcont) . "\n"), $origcont);
} else {
$origcont=str_replace(trim($relcont), str_replace(trim($wasc),trim($nowc),trim($relcont)), $origcont);
}
if (strpos($relcont, trim($wasc)) !== false) {
//file_put_contents('xa.xa3z', $relcont . "\nvs\n" . $wasc);
}
//file_put_contents('xa.xa3', $relcont);
if ($origcont != $ocont) {
//file_put_contents('xa.xa4', $relcont);
file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'), $origcont);
echo "<html><body><p>Did change</p></body></html>";
exit;
}
}
}
}
echo "<html><body></body></html>";
exit;
}

?>

… in our changed journal.php PHP Journal web application you can try for yourself Journal web application, which, with content, may look something like …

https://www.rjmprogramming.com.au/PHP/journal.php?fjname=Robert_Metcalfe-19590829-161454# which can be Bookmarked or be added to Favourites in your web browser

… and which you can also try below.

Previous relevant Journal Content Tutorial is shown below.

Journal Content Tutorial

Journal Content Tutorial

Further to yesterday’s Journal Privacy Tutorial we’re up to issues with “content” that involve …

  • format
  • display
  • styling
  • usability
  • navigation

… a lot of which do not suit yesterday’s content’s textarea format nearly as much as today’s overlaying nested div format. As you will know using textarea textual data there are really no easy ways towards any “smart” navigation functionality possibilities, but an HTML div with the content (and now navigational dropdowns and “breadcrumb” buttons) hosted by another div with display:flex (and thanks, here, to the advice from this great link) and absolute “overlaying” positioning …

<?php echo ”

function wbt(taow,tao) {
//alert(tao.value);
if (acontod && tao) {
if (!divelem) {
document.getElementById('helpout').style.backgroundColor='yellow';
document.getElementById('dcont').style.backgroundColor='yellow';
divelem = acontod.getElementById('djc');
gtao=tao;
var recto = tao.getBoundingClientRect();
if (divelem) { // thanks to ideas off http://stackoverflow.com/questions/12266320/copy-div-content-to-textarea-or-text-with-the-same-font-family-style
divelem.style.display='flex';
//divelem.style.alignItems='flex-end';
divelem.style.overflowY='scroll';
//divelem.style.flexFlow='column nowrap';
divelem.style.flexDirection='column-reverse';
divelem.style.fontFamily = window.getComputedStyle(tao,null).fontFamily || tao.style.fontFamily || tao.currentStyle.getCurrentProperty('font-family');
divelem.style.fontSize = window.getComputedStyle(tao,null).fontSize || tao.style.fontSize || tao.currentStyle.getCurrentProperty('font-size');
divelem.style.border = window.getComputedStyle(tao,null).border || tao.style.border || tao.currentStyle.getCurrentProperty('border');
divelem.style.padding = window.getComputedStyle(tao,null).padding || tao.style.padding || tao.currentStyle.getCurrentProperty('padding');
divelem.style.margin = window.getComputedStyle(tao,null).margin || tao.style.margin || tao.currentStyle.getCurrentProperty('margin');
divelem.style.overflow = window.getComputedStyle(tao,null).overflow || tao.style.overflow || tao.currentStyle.getCurrentProperty('overflow');
divelem.style.position='absolute';
divelem.style.left='' + recto.left + 'px';
divelem.style.width='' + eval(0 + recto.width) + 'px';
divelem.style.height='' + recto.height + 'px';
divelem.style.top='' + eval(-12 + recto.top) + 'px';
//alert('' + recto.top + ' ' + recto.height + ' ' + ' ... ' + 'eval(-12 + recto.top + recto.height)=' + eval(-12 + recto.top + recto.height));
//divelem.style.bottom='' + eval(-12 + recto.top + recto.height) + 'px';
divelem.style.zIndex='999';
divelem.scrollTop=divelem.scrollHeight;
tao.style.color='transparent';
}
}
var taovalue=tao.value.replace(/\</g,'&lt;').replace(/\>/g,'&gt;');
while (taovalue.indexOf(String.fromCharCode(10)) != -1) {
taovalue=taovalue.replace(String.fromCharCode(10),'<br>');
}
acontod.getElementById('djc').innerHTML='<div id=indiv title=\"Journal\" style=\"text-shadow:-0.5px 0.5px 0.5px #ff0000;background: linear-gradient(to right, #e0eafc, #ffffff);margin-top: auto !important;\">' + massage(taovalue) + '</div>';
}
return '';
}

“; ?>

… allows the div to look almost the same as the textarea but with the smarts and we leave a sliver of bottom textarea showing underneath to allow for a bit of resizing logic as well, here, today, in our changed journal.php PHP Journal web application you can try for yourself Journal web application, which, with content, may look something like …

https://www.rjmprogramming.com.au/PHP/journal.php?fjname=Robert_Metcalfe-19590829-161454# which can be Bookmarked or be added to Favourites in your web browser

Previous relevant Journal Privacy Tutorial is shown below.

Journal Privacy Tutorial

Journal Privacy Tutorial

We’ve managed to almost keep up the brevity … regarding blog posting titles, that is given a character here or there?!

Drilling down on the changed word, to “Privacy”, further to yesterday’s Journal Primer Tutorial more loose privacy, what are we getting at?

  • Privacy is a subjective term

    … what goes as “private” for one user can be a completely different set of standards to another user …

  • take, on the clientside of the “privacy and security equation” of online considerations, it is really hard as a programmer to arrange “sensible levels” of security to a user using web browser web inspectors to their full functionality … but as programmers …
  • we can attempt to make it “beyond the patience of those users” regarding the “privacy and security equation” … and in the case of our Journal web application …
  • it interfaces on the clientside to a unique combination of …
    1. device
    2. web browser

    … with our Journal web application via window.localStorage means to construct those right hand button or dropdown Recalling HTML element “aids” … and those users could get to that information via most modern web browser web inspectors … given, movie style, they quickly sneak onto the computer of the user just having used the Journal web application, presumably before the sleep manager kicks in, and gets to the relevant web browser’s web inspector’s functionality and copies two encrypted strings onto … it is the “wonderful USB” scene … presumably with a progress bar showing as they are just about to be discovered … and go away to decrypt at their leisure … Pina Colada, anyone? … but …

  • we can annoy such activity, perhaps, by encrypting both the window.localStorage relevant record content and key … which we’re starting to do today

We could go a stage further, and just work it within PHP but it is pointless to go too far along these lines because once the Journal link becomes like …

https://www.rjmprogramming.com.au/PHP/journal.php?fjname=Robert_Metcalfe-19590829-161454# which can be Bookmarked or be added to Favourites in your web browser

… well, everybody knows everything by then (to which end, as of today, there is less address bar argument usage going on as a user creates their content, because we now POST it rather than GET it, perhaps making it that wee bit harder for our “USB thief”), and that is why we could share that link with you all. If we went too far regarding privacy and security the whole web application loses all friendliness!

Also regarding Recall thoughts, users who use Name and Date of Birth access to a Journal may also be asked for a Secret Number, as well, as of today, depending on where they are when they access the Journal web application.

What is another privacy thing we had going, even as of yesterday? Would you believe it if we say the Journal data exists on a web server in it’s own non encrypted form in a file, but barring using sftp or some other way to get to the RJM Programming web server in a Terminal session, or such like, the general public can not get to that file, and specify it in some web browser address bar URL, in that we’ve stored it outside that (for Apache web server, up the web server folder tree from public_html “Document Root” folder) public access place. Keen programmers could also encrypt this data within the file, or use a database perhaps, or some other level of privacy/security, but again, we are not going to that level of security with our changed journal.php PHP Journal web application you can try for yourself Journal web application.

Previous relevant Journal Primer Tutorial is shown below.

Journal Primer Tutorial

Journal Primer Tutorial

It’s a new project day …. yay!!!

It’s a candidate for shortest blog posting title hereabouts day …. yay!!!

And so, with the brevity, we must explain that PHP serverside language is needed here, because writing to the RJM Programming web server, into files, is required for this project. If you do not like brevity though, we can toggle the title for you here!?

Am sure our vagueness about any differences between a personal “journal” and a personal “diary” may grate on some … and all because you asked for it!?

Anyway, the concept is …

  1. Identification …
    • user enters their name
    • user enters their 8 digit date of birth ( eg. 20041231 ) … then to round off on the “identification section” if you will the web application assigns a …
    • 6 digit secret number
  2. Posting …
    • web application assigns a default Journal Entry timestamp … you can change along with a textarea means of entering that time snapshot’s …
    • journal entry content … so far just text and 5000 character limit on this first draft
    • user clicks/taps the “Post to Journal” button to display the latest Journal version to the top left above
  3. Recounting …
    • even just completing an Identification that will be remembered as a button or dropdown displayed to the right for the user refiring up the Journal web application indicates a name of relevance onto which a click/tap/selection brings about …
    • a validation of either the 8 digit date of birth or 6 digit secret number … allowing access and display to the relevant Journal at the top left of the web application … or if you know the Journal filename … for example …
    • https://www.rjmprogramming.com.au/PHP/journal.php?fjname=Robert_Metcalfe-19590829-161454# which can be Bookmarked or be added to Favourites in your web browser

Pretty straightforward in concept, but the security aspects to protect data privacy, add to the complication somewhat in the journal.php PHP Journal web application you can try yourself.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Operating System, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *