BookMarkMe

An example of combining LiveCode Server, JavaScript, HTML, CSS and a MySQL database to create a browser based site bookmarking system.

Live Demo here.

Downloadable Zip at the bottom of this page.

There are 3 main elements used to create the system.

1. A chunk of persistent JavaScript in a HTML page (index.html) used to create a  button in the browser which when clicked passes the site URL and title to a LiveCode server script.

This is essentially a normal JavaScript link which when clicked appends the designated src with  the URL and Title elements of the open page. The info is passed via GET.

 

2. The LiveCode script (adddata.lc) that takes the passed URL and title, then formats and puts the data into the MySQL database.

<?lc
-- turn off error reporting, helps increase security
set the errorMode to "quiet"
-- include connection details for greater security, this should if possible be placed outside the public_htm directory for this demo this in the same directory as the other scripts
include "conndetails.lc"
-- connect to the database
put revOpenDatabase("MySQL", tDatabaseAddress, tDatabaseName, DatabaseUser, tDatabasePassword) into tResult
put tResult into tConnectionID
-- Get the passed data
-- edit these variables to match your database & table
-- this assumes a table called Table1 with 3 fields
put "Table1" into tTableName
put "date, title, address" into tFields
put $_GET["title"] into tTitle
put $_GET["url"] into tAddress
put the internet date into tDate
-- construct the SQL - the :1, :2 & :3 placeholders in the SQL will be filled by variables in the revExecuteSQL line
put "INSERT INTO " & tTableName & " (" & tFields & ") VALUES (:1, :2, :3)" into tSQL
-- send the SQL to the database, filling in the placeholders with data from variables
revExecuteSQL tConnectionID, tSQL, "tDate", "tTitle", "tAddress"
--Disconnect
-- if we have a connection, close it and clear the connection ID
if tConnectionID is a number then
revCloseDatabase tConnectionID
put empty into tConnectionID
end if
?>

For extra security the connection (conndetails.lc) details are pulled into the adddata.lc script. Ideally this should be in a location above the site root.

 <?lc
-- turn off error reporting, helps increase security
set the errorMode to "quiet"
-- set up the connection parameters - edit these to suit your database
put "localhost" into tDatabaseAddress
put "mydbname" into tDatabaseName
put "myusername" into tDatabaseUser
put "mypassword" into tDatabasePassword
?>

 

3. A combination of HTML, CSS, and LiveCode server script which retrieves the data form the MySQL information, tabulates and displays.

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>BookMarkMe</title>
<meta content="Andy" name="author">
<meta content="Bookmarking Demo for LiveCode and LiveCode Server" name="description">
<meta content="Bookmarking, LiveCode" name="keywords">
<link rel="stylesheet" type="text/css" href="tablestyles.css">
</head>

<?lc
-- turn off error reporting, helps increase security
set the errorMode to "quiet"
include "conndetails.lc"
-- connect to the database
put revOpenDatabase("MySQL", tDatabaseAddress, tDatabaseName, tDatabaseUser, tDatabasePassword) into tResult
-- check if it worked and display an error message if it didn't
-- & set the connection ID
if tResult is a number then
put tResult into tConnectionID
put "Connected to the database." & cr & "Connection ID = " & tConnectionID & cr
else
put empty into tConnectionID
put "Unable to connect to the database:" & cr & tResult &cr
end if
--results
-- construct the SQL (this selects all the data from the specified table)
put "Table1" into tTableName -- set this to the name of a table in your database
put "SELECT * FROM " & tTableName into tSQL
-- query the database
put revDataFromQuery(tab, cr, tConnectionID, tSQL) into tData
-- check the result and display the data or an error message
if item 1 of tData = "revdberr" then
put "There was a problem querying the database:" & cr & tData
else
set the itemdel to tab
-- table header
put "<div class='datagrid'><table width='90%'>"
put "<thead><tr><th>Date</th>"
put "<th>Title</th>"
put "<th>Address</th></tr></thead>"
put 1 into tCount
repeat for each line tline in tData
if tCount mod 2=0
then
put item 1 of tLine into tTitle
put item 2 of tLine into tAddress
put item 3 of tLine into tDate
put "<tr><td>"& tTitle & "</td>"
put "<td>"& tAddress & "</td>"
put "<td>"& tDate & "</td></tr>"
else
put item 1 of tLine into tTitle
put item 2 of tLine into tAddress
put item 3 of tLine into tDate
put "<tr class='alt'><td>"& tTitle & "</td>"
put"<td>" & tAddress & "</td>"
put "<td>"& tDate & "</td></tr>"
end if
add 1 to tCount
end repeat
put "</table></div>"
end if
--Disconnect
-- if we have a connection, close it and clear the connection ID
if tConnectionID is a number then
revCloseDatabase tConnectionID
put empty into tConnectionID
end if
?>

Download a Zip of all files – Download