Here is a single PHP/HTML script that will read a journal entry from a MySQL database, show the entry on the current web page, and add selected text from the displayed web page into the appropriate category choosen with buttons that have cool mouseover effects. The plum of this code is the use of the getSelection JavaScript function to grab text from the web page. Much of this app is documented in our web and database areas. Here is the code:
<html>
<head>
<title>Journal Entry Keyword Selection</title>
</head>
<script language="JavaScript">
person_h =new Image(); person_h.src = "images/personh.gif";
person_nh = new Image(); person_nh.src = "images/person.gif";
place_h =new Image(); place_h.src = "images/placeh.gif";
place_nh = new Image(); place_nh.src = "images/place.gif";
thing_h =new Image(); thing_h.src = "images/thingh.gif";
thing_nh = new Image(); thing_nh.src = "images/thing.gif";
function personover() {
document.person.src=person_h.src;
}
function personout() {
document.person.src=person_nh.src;
}
function placeover() {
document.place.src=place_h.src;
}
function placeout() {
document.place.src=place_nh.src;
}
function thingover() {
document.thing.src=thing_h.src;
}
function thingout() {
document.thing.src=thing_nh.src;
}
function addperson(){
var sl=window.getSelection();
window.location.href=window.location.href+'&person='+sl;
}
function addplace(){
var sl=window.getSelection();
window.location.href=window.location.href+'&place='+sl;
}
function addthing(){
var sl=window.getSelection();
window.location.href=window.location.href+'&thing='+sl;
}
</script>
<?php
require_once("config.php");
$db1=mysql_connect($dbhost, $dbuname, $dbpass);
mysql_select_db($dbname);
if ($place != ""){
$query="INSERT INTO places SET date=\"".$date."\", place=\"".$place."\"";
$result=mysql_query($query);
$ref="please";
}
elseif ($person != ""){
$query="INSERT INTO people SET date=\"".$date."\", person=\"".$person."\"";
$result=mysql_query($query);
$ref="please";
}
elseif ($thing != ""){
$query="INSERT INTO things SET date=\"".$date."\", thing=\"".$thing."\"";
$result=mysql_query($query);
$ref="please";
}
if ($ref == "please"){
echo "<meta http-equiv='Refresh' content='0; URL=j.php?date=".$date."'>";
}
$query="SELECT * FROM entry WHERE date = \"".$date."\"";
$result=mysql_query($query);
$row=mysql_fetch_array($result);
$type=$row["type"];
$title=stripslashes($row["title"]);
$entry=stripslashes($row["entry"]);
?>
<body bgcolor="white">
<? echo "<b><font color=blue>".$date." - "; ?>
<? echo $type." - "; ?>
<? echo $title."<br /></b></font>"; ?>
<hr>
<img onmouseover="personover();return true;"
onmouseout="personout();return true;"
onclick="addperson();"
name="person"src="images/person.gif">
<?php
$query="SELECT * FROM people WHERE date = \"".$date."\"";
$result=mysql_query($query);
while ($row = mysql_fetch_row($result))
{
echo $row[1]." -- ";
}
?>
<br />
<img onmouseover="placeover();return true;"
onmouseout="placeout();return true;"
onclick="addplace();"
name="place" src="images/place.gif">
<?php
$query="SELECT * FROM places WHERE date = \"".$date."\"";
$result=mysql_query($query);
while ($row = mysql_fetch_row($result))
{
echo $row[1]." -- ";
}
?>
<br />
<img onmouseover="thingover();return true;"
onmouseout="thingout();return true;"
onclick="addthing();"
name="thing" src="images/thing.gif">
<?php
$query="SELECT * FROM things WHERE date = \"".$date."\"";
$result=mysql_query($query);
while ($row = mysql_fetch_row($result))
{
echo $row[1]." -- ";
}
mysql_close($db1);
?>
<hr>
<br />
<? echo $entry; ?><br />
</body>
</html>
|
Here you can see a keyword selected (Seattle), and the place icon highlighted with the mouseover code:
Here you can see that the keyword has been added to the database, and listed next to the place icon:
Here I have added some more things and places:
This is all done on a single page using meta refreshes and parameter passing on a URL. This is how I’m able to pass data between JavaScript and PHP. As I’ve noted in some of the other related articles, this works on Firefox 1.0.7 and on Mozilla 1.7.5. That pretty much covers the browsers I use, and so I’m done. IE6 does not support DOM to the extent of Mozilla, but I hope that over time this changes. The DOM specifies exactly the kind of functions that I need to make this application. It crosses my mind that if all browsers supported the full DOM spec, then the importance of dedicated desktop applications diminishes. Hmmmm… I sense a conflict of interest here w/ IE. I’m sure there are better ways to do this, probably AJAX, but this does work and is pretty compact and easy to understand. I actually did look a bit at using some AJAX libraries to do this, but, really, the above code is much simpler. Plus, I’m pushing the browser compatibility issue to the limit. The getSelection function, in particular is relatively new, and not well supported. The meta refresh and URL passing is definately a hack, and it is certainly a place where the code could be improved. The rest of the journal app is pretty boring. The keyword categorization was the hard part. Keep an eye on SignalQ for the full application. It could be awhile. I’m basing the entire back-end on stock XAMPP, since this is not intended to be public. The entire system can be backed up to a CD. See this article for details on how to bring up an entire O/S with MySQL, PHP, and Apache on around 500 megs total for the system. It is kind of interesting when you think about information that way. The system to represent the information is key. I can store my entire journal, including all of the apps needed to run and view the journal on one CD. Ten, twenty years from now, I will still be able to view the information. This is a key idea to a lot of the battles currently taking place with free software. As time goes on, having control of the software that runs the application ensures you still have access to the information/documents you create.
