[Installation] A Database for your Forumotion forum

[Ange TuteurAdministrator]

THIS PROJECT IS OUTDATED AND NO LONGER SUPPORTED.
**USE AT YOUR OWN RISK**

The content in this test is experimental, and all instructions SHOULD be READ and FOLLOWED. Failure to do so may cause unwanted side effects. USE WITH CAUTION !!

This topic is used for installation of a topic database. The database will be used for various plugins found in "tests" within the forum. The purpose of this topic is to layout the steps for installing the database. Furthermore, any updates to the database object will be posted here to alert you, so you have the most up to date features for your database.


Precautions

As we're going to allow members moderator status of the database forum, moderator status stuff will be visible to them, such as :

1. Ability to ban members ( if allowed )
   
2. Ability to edit profile fields ( if allowed )
   
3. Ability to see "Moderator" level content such as widgets
   

To make sure moderators cannot ban members go to Administration Panel > General > Security. Make sure Disallow moderators to ban members is set to Yes and save.

For point 2 go to Administration Panel > Users and Groups > Profiles. Ensure that moderators cannot edit any of your fields. Just go over each on to make sure to moderator box isn't ticked for "Who can modify the profile field value ?".


Allowance of unofficial forms

So the database can be updated without errors, you need to disable one security feature. Go to Administration Panel > General > Security. Find the option "Unauthorize unofficial forms to post messages and private messages on the forum", tick "no", and save.

The group

So our members can edit the database, they must be moderators. To do that we need to create a new group. Go to Administration Panel > Users and groups > Group administration > Create a new group.

Name : fa_db
Group status : Hidden
Group auto-subscribe : Yes
Minimum posts : 0

Fill in the rest of the fields as you like, then save. Next edit the group, tick 'no' for 'Group auto-subscribe', and save. This has to be done because auto-subscribe groups cannot be moderators

Creating the database

So we can store data, such as members who liked a post, we need to create a new category, forum, and topic. Go to Administration Panel > General > Categories and Forums.

Create a new category, make sure this is the title and save.

Code:

<span class="fa_database">Database</span>

Next create a new forum under this category.

Title : Database
Description : You can write what you like.

Save, and then edit the permissions. Allow your fa_db group moderation of your database and save.

For extra security, click "advanced" under the permissions, and disallow all groups from viewing the forum and save.

Go ahead to your new database forum, and create a new topic.

Topic title : Database
Message body : Paste the following into the editor
Depending on the beta test you're following, paste the table provided in that test, or you can paste a default table for the like system.

Code:

[table class="database_table" id="fa_likes"][tr][td]Post ID[/td][td]Users[/td][/tr][/table]

Go ahead and submit your new topic and you should be ready for the next part !


Installation

So our database and tables have a style, go to Administration Panel > Display > Colors > CSS stylesheet and paste the following code.

Code:

/* --- START DATABASE CP --- */
body.databaseBody { color:#666; font-size:11px; font-family:Verdana,Arial,Helvetica,sans-serif; background:#DEF; }
body.databaseBody a { text-decoration:none }
#db_wrap { background:#FFF; border:1px solid #CCC; width:80%; margin:40px auto; padding:3px; }
#db_wrap h1 { color:#479 !important; font-size:18px; border-bottom:1px solid #479; padding-bottom:3px; margin:3px 0; }
.database_table { background:#FFF; border:1px solid #CCC; border-spacing:0; width:100%; overflow:auto; }
.database_table a { background:none !important; display:inline-block; white-space:nowrap; overflow:hidden; max-width:100px; }
.database_table tr:nth-child(even) { background:#FFF }
.database_table tr:nth-child(odd) { background:#DDD }
.database_table tr:hover { background:#FFA }
.database_table td { border-right:1px solid #CCC; border-bottom:1px solid #CCC; padding:3px; }
.database_table tr.table_data { background:#EEE; box-shadow:0 10px 6px rgba(255,255,255,0.3) inset, 0 -10px 6px rgba(0,0,0,0.05) inset }
#db_list { background:#EEE; border:1px solid #CCC; float:left; width:150px; min-height:200px; padding:3px; margin-right:6px; }
#db_list .database { color:#999; text-shadow:1px 1px 0 #FFF; text-align:center; font-weight:bold; font-size:10px; background:none; border:1px solid #CCC; border-radius:3px; cursor:pointer; margin:3px 0; padding:3px; }
#db_list .database:hover { color:#479; border-color:#479; }
#db_list .database.dbactif { background:#DEF; color:#69B; border-color:#8BD; }
#db_tables { background:#EEE; border:1px solid #CCC; overflow-x:hidden; padding:3px; }
#innertable { height:400px; overflow:auto; }
.db_nav { text-align:right; background:#EEE; border:1px solid #CCC; padding:5px 3px; margin:6px 0; }
.db_nav a, .db_button, tr.table_data a { color:#999; text-shadow:1px 1px 0 #FFF; text-transform:uppercase; background:none; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px 6px; margin:1px 3px; cursor:pointer; }
.db_nav a:hover, .db_button:hover, tr.table_data a:hover { color:#479; border-color:#479; }
.db_nav a:focus, .db_button:focus, tr.table_data a:focus { color:#8BD; border-color:#8BD; }
.db_title { color:#479; font-size:12px; font-weight:bold; border-bottom:1px solid #479; padding-bottom:3px; margin-bottom:3px; }
.db_info { color:#58A; text-shadow:1px 1px 0 #FFF; text-align:center; background-color:#DEF; border:1px solid #BCD; border-radius:3px; padding:5px 3px; margin:6px 3px; }
.db_erreur { color:#C66; font-size:12px; text-shadow:1px 1px 0 #FFF; font-weight:bold; height:20px; }
.db_overlay { background:rgba(0,0,0,0.3); position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; }
.dbo_content { background:#EEE; border:1px solid #CCC; width:65%; height:50%; overflow:auto; padding:3px; position:absolute; top:20%; left:15%; }
.dbo_content.process { color:#996; text-shadow:1px 1px 0 #FFF; text-align:center; font-size:16px; font-weight:bold; width:30%; height:auto; padding:6px 24px; left:30%; top:40%; }
.db_textarea { color:#333; background:#FFF; border:1px solid #CCC; border-radius:3px; width:90% !important; height:50% !important; resize:none; display:block; padding:3px; margin:3px auto; }
.db_textarea:hover { border-color:#479 }
.db_textarea:focus { border-color:#8BD }
/* --- END DATABASE CP --- */

Now we need to setup our database control panel and methods to interact with it.. Go to Administration Panel > Modules > JavaScript codes managent and create a new script.

Title : fa_database
Placement : In all the pages

Code:

_database = new Object();
_database.tid = 'YOUR_DATABASE';
_database.ctid = _database.tid.match(/\/t(\d+)/)[1];
_database.name = 'Database';
_database.protect = 1;
_database.filter = [];

// database post method
_database.post = function(o) {
  if (!_userdata.session_logged_in) return; 
  o.state = 'OK';
  $.get('/post?p='+o.pid+'&mode=editpost', function(data) {
    var tables = $('#text_editor_textarea',data);
    if (RegExp('id="'+o.tableid+'"').test(tables.val())) tables.val(tables.val().replace(RegExp(o.update[0]), o.update[1]));
    else if (tables.val()) tables.val(tables.val().replace(/\[\/table\]$/,o.newRow + '[/table]'));
    else o.state = 'ERROR';
    $.post('/post?p='+o.pid+'&mode=editpost', {
      subject: _database.name,
      message: tables.val(),
      post: 1
    },function(d, s, x) {
      o.reload && window.location.reload();
      o.callback && o.callback(o.state, d, s, x);
    });
  });
};


// create a new database table
_database.newTable = function() {
  var a = document.createElement('DIV'), b = document.createElement('INPUT'), c, t = document.createElement('TEXTAREA');
  a.className = 'db_overlay';
  b.className = 'db_button';
  t.className = 'db_textarea';
  b.value = 'Submit';
  b.type = 'button';
  c = b.cloneNode();
  c.value = 'Cancel';
  a.innerHTML = '<div class="dbo_content"><div class="db_title">Create a new database table</div><p class="db_info">Here you can create a new database table. For it to appear in the database, make sure to give the table the classname <strong>database_table</strong>, and a unique ID.</p><div style="text-align:center;"><p class="db_erreur"></p></div></div>';
  a.firstChild.insertBefore(t,a.firstChild.lastChild);
  a.firstChild.lastChild.appendChild(b);
  a.firstChild.lastChild.appendChild(c);
  document.body.appendChild(a);
 
  b.onclick = function() {
    if (!t.value.length) return this.previousSibling.innerHTML = 'You cannot create a new database table with an empty message body.';
    a.innerHTML = a.innerHTML + '<div class="db_overlay"><div class="dbo_content process">Processing request, please wait...</div></div>';
    $.post('/post', {
      subject : _database.name,
      t : _database.tid.match(/\/t(\d+)-/)[1],
      message : t.value,
      mode : 'reply',
      post : 1
    },function() { window.location.reload() });
  };
  c.onclick = function() { document.body.removeChild(a) };
};

_database.checker = window.setInterval(function(){
  !_database.protect && window.clearInterval(_database.checker);
  if (typeof _userdata === 'undefined') return;
  window.clearInterval(_database.checker);
 
  if (_userdata.user_level != 1) {
    if (RegExp('/t' + _database.ctid).test(window.location.pathname)) return window.location.pathname = '/';
    if (/(mode=editpost|mode=delete)/.test(window.location.search)) for (var i=0; i<_database.filter.length; i++) if (RegExp('p=' + _database.filter[i]).test(window.location.search)) return window.location.pathname = '/';
  }
},1);
_database.notice = 'Forumotion Database System developed by Ange Tuteur - FM Design. Used to easily update and get topic database content for plugins.';

// database control panel
RegExp('/t' + _database.ctid).test(window.location.pathname) && $(function() { 
  var admin = '', type = _userdata.user_level;
  if (type == 1 && window.location.hash == '#edit') return $('.post').css('display','block');
  type == 1 && (admin = '<a href="#new" onclick="_database.newTable();return false;">New Table</a><a href="#edit" onclick="window.location.hash=\'#edit\';window.location.reload();">Edit Database</a>');
 
  document.title = 'Forum Database';
  $('body').append('<div id="theOverwrite"><div id="db_wrap"><h1>Forum Database</h1><p class="db_info">This database is for storing simple data for plugins. You should avoid storing personal data, and should consider making backups of your database tables whenever possible.</p><div class="db_nav">'+admin+'<a href="/forum">Return to index</a></div><div id="db_list"><div class="db_title">Database List</div></div><div id="db_tables"><div id="currentDB" class="db_title">Select a database table from the left</div><div id="innertable"></div></div><p style="color:#999;font-size:10px;text-align:right;margin:6px 0;">Developed by <a href="http://fmdesign.forumotion.com/u1" target="_blank">Ange Tuteur</a> | Version 1.02</p></div></div>');
  $('.database_table').hide().each(function() {
    if (type == 1) {
      var pid = $(this).closest('.post').find('.i_icon_edit').parent().attr('href').match(/\/post\?p=(\d+)&mode=editpost/)[1];
      $(this).find('tbody').prepend('<tr class="table_data"><td colspan="'+$(this).find('tr:last td').length+'"><span style="display:inline-block;padding:3px 0;text-transform:uppercase;margin:2px 0;">Table PID : '+pid+'</span><a href="/post?p='+pid+'&mode=editpost" class="db_edit_table" style="float:right;">Edit table</a></td></tr>');
    }
    $('#db_list').append('<div class="database">'+$(this).attr('id')+'</div>');
  }).appendTo('#innertable');
  $('#page-footer, #pun-foot, #gfooter, #gfooter + p').appendTo('#db_wrap');
  $('body').addClass('databaseBody').html($('#theOverwrite').html());
  $('#db_list .database').on('click', function() {
    $('#db_tables .database_table').hide();
    $('#db_list .database').removeClass('dbactif');
    $(this).addClass('dbactif');
    $('#' + $(this).text()).show();
    $('#currentDB').text($(this).text());
  });
  $('#db_list .database:first').click();
});

$(function(){
  $(function(){
    (_userdata.activate_toolbar && _userdata.user_level == 1) && $('#fa_menu a[href*="/admin"]').before('<a href="'+_database.tid+'">Forum Database</a><br>');
  });
});

Before you save the script, you need to replace YOUR_DATABASE with the path of the database you created. To do that, go to your database topic and copy the following portion.


You should then have the following, except with a different ID.

Code:

_database.tid = '/t79-database';

When finished, save this script and you've successfully setup your database !!


Management tips

Because this database is incredibly open, it is HIGHLY recommend that you create a new forum named "Backups" under your database category, which is only visible to Administrators. After this, simply create a topic to store your backups. For example, click "Edit database" from the DB control panel, then edit one of your tables, copy the table code, and paste it within your backup topic.

Your fa_db group needs to be managed regularly to add new members so they can send their likes to the database. To do this simply go to the group and add the new member. If your forum is very active with new members you can do the following :

1. Disallow fa_db moderation of your database
   
2. Edit the fa_db group and enabled auto-subscribe
   
3. Disable auto-subscribe and allow fa_db moderation of the database once more
   

You should also avoid storing personal data if you intend to use the database object to develop other plugins. I say this because the database contents are openly viewable by all members. This is only good for storing simple public data such as likes, posts, reputation, etc... It is quite an ugly way of storing data, but it shows you what's possible by using JavaScript and a little ingenuity.


If you have any problems with the installation, you can ask for help here.

[Ange TuteurAdministrator]

Update Version 1.01

I've been working on an update to both the functions and style of the database plugin. This update includes the following changes.

• Updated design
  
• Fixes and optimizations for other versions
  
• Added an option to quickly add new tables
  

Version 1.01 can be found below as well as in the installation instructions in the first post.

To update the design go to Administration Panel > Display > Colors > CSS stylesheet find the prototype version CSS and replace it with :

Code:

/* START DATABASE CP */
body.databaseBody { color:#666; font-size:11px; font-family:Verdana,Arial,Helvetica,sans-serif; background:#DEF; }
body.databaseBody a { text-decoration:none }
#db_wrap { background:#FFF; border:1px solid #CCC; width:80%; margin:40px auto; padding:3px; }
#db_wrap h1 { color:#479 !important; font-size:18px; border-bottom:1px solid #479; padding-bottom:3px; margin:3px 0; }
.database_table { background:#FFF; border:1px solid #CCC; border-spacing:0; width:100%; overflow:auto; }
.database_table a { background:none !important; display:inline-block; white-space:nowrap; overflow:hidden; width:100px; }
.database_table tr:nth-child(even) { background:#FFF }
.database_table tr:nth-child(odd) { background:#DDD }
.database_table tr:hover { background:#FFA }
.database_table td { border-right:1px solid #CCC; border-bottom:1px solid #CCC; padding:3px; }
#db_list { background:#EEE; border:1px solid #CCC; float:left; width:150px; min-height:200px; padding:3px; margin-right:6px; }
#db_list .database { color:#999; text-shadow:1px 1px 0 #FFF; text-align:center; font-weight:bold; font-size:10px; background:none; border:1px solid #CCC; border-radius:3px; cursor:pointer; margin:3px 0; padding:3px; }
#db_list .database:hover { color:#479; border-color:#479; }
#db_list .database.dbactif { background:#DEF; color:#69B; border-color:#8BD; }
#db_tables { background:#EEE; border:1px solid #CCC; overflow-x:hidden; padding:3px; }
#innertable { height:400px; overflow:auto; }
.db_nav { text-align:right; background:#EEE; border:1px solid #CCC; padding:5px 3px; margin:6px 0; }
.db_nav a, .db_button { color:#999; text-shadow:1px 1px 0 #FFF; text-transform:uppercase; background:none; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px 6px; margin:1px 3px; cursor:pointer; }
.db_nav a:hover, .db_button:hover { color:#479; border-color:#479; }
.db_nav a:focus, .db_button:focus { color:#8BD; border-color:#8BD; }
.db_title { color:#479; font-size:12px; font-weight:bold; border-bottom:1px solid #479; padding-bottom:3px; margin-bottom:3px; }
.db_info { color:#58A; text-shadow:1px 1px 0 #FFF; text-align:center; background-color:#DEF; border:1px solid #BCD; border-radius:3px; padding:5px 3px; margin:6px 3px; }
.db_erreur { color:#C66; font-size:12px; text-shadow:1px 1px 0 #FFF; font-weight:bold; height:20px; }
.db_overlay { background:rgba(0,0,0,0.3); position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; }
.dbo_content { background:#EEE; border:1px solid #CCC; width:65%; height:50%; overflow:auto; padding:3px; position:absolute; top:20%; left:15%; }
.dbo_content.process { color:#996; text-shadow:1px 1px 0 #FFF; text-align:center; font-size:16px; font-weight:bold; width:30%; height:auto; padding:6px 24px; left:30%; top:40%; }
.db_textarea { color:#333; background:#FFF; border:1px solid #CCC; border-radius:3px; width:90% !important; height:50% !important; resize:none; display:block; padding:3px; margin:3px auto; }
.db_textarea:hover { border-color:#479 }
.db_textarea:focus { border-color:#8BD }
/* END DATABASE CP */

Then to update the database object itself, go to Modules > JavaScript codes management edit your fa_database script and replace the contents with :

Also make sure to replace YOUR_DATABASE by your database location.

Code:

var notice = 'Database object developed by Ange Tuteur - FM Design. Used to easily update and get topic database content.';
_database = new Object();
_database.tid = 'YOUR_DATABASE';
_database.name = 'Database';

_database.data = function () {
  var db = document.createElement('DIV');
  db.style.display = 'none';
  return document.body.appendChild(db);
};

/* database get method */
_database.get = function(tid, code) {
  var db = _database.data();
  $(db).load(tid, function() { code(db, function() { document.body.removeChild(db) }) });
};

/* database post method */
_database.post = function(o) {
  if (_userdata.session_logged_in == 0) return;
  var db = _database.data(), tables;
 
  $(db).load('/post?p='+o.pid+'&mode=editpost #text_editor_textarea', function() {
    tables = $(this).find('textarea');
    if (RegExp('id="'+o.tableid+'"').test(tables.val())) tables.val(tables.val().replace(RegExp(o.update[0]), o.update[1]));
    else tables.val(tables.val().replace(/\[\/table\]/,o.newRow + '[/table]'));
    $.post('/post?p='+o.pid+'&mode=editpost', {
      subject: _database.name,
      message: tables.val(),
      post: 1
    }, function() { document.body.removeChild(db), o.reload && window.location.reload() });
  });
};

/* create a new database table */
_database.newTable = function() {
  var a = document.createElement('DIV'), b = document.createElement('INPUT'), c, t = document.createElement('TEXTAREA');
  a.className = 'db_overlay';
  b.className = 'db_button';
  t.className = 'db_textarea';
  b.value = 'Submit';
  b.type = 'button';
  c = b.cloneNode();
  c.value = 'Cancel';
  a.innerHTML = '<div class="dbo_content"><div class="db_title">Create a new database table</div><p class="db_info">Here you can create a new database table. For it to appear in the database, make sure to give the table the classname <strong>database_table</strong>, and a unique ID.</p><div style="text-align:center;"><p class="db_erreur"></p></div></div>';
  a.firstChild.insertBefore(t,a.firstChild.lastChild);
  a.firstChild.lastChild.appendChild(b);
  a.firstChild.lastChild.appendChild(c);
  document.body.appendChild(a);
 
  b.onclick = function() {
    if (!t.value.length) return this.previousSibling.innerHTML = 'You cannot create a new database table with an empty message body.';
    a.innerHTML = a.innerHTML + '<div class="db_overlay"><div class="dbo_content process">Processing request, please wait...</div></div>';
    $.post('/post', {
      subject : _database.name,
      t : _database.tid.match(/\/t(\d+)-/)[1],
      message : t.value,
      mode : 'reply',
      post : 1
    },function() { window.location.reload() });
  };
  c.onclick = function() { document.body.removeChild(a) };
};

/* START DATABASE CONTROL PANEL */
RegExp(_database.tid).test(window.location.pathname) && $(function() { 
  var admin = '', type = _userdata.user_level;
  if (type == 1 && window.location.hash == '#edit') return $('.post').css('display','block');
  if (type == 1) admin = '<a href="#new" onclick="_database.newTable();return false;">New Table</a><a href="#edit" onclick="window.location.hash=\'#edit\';window.location.reload();">Edit Database</a>';
 
  document.title = 'Forum Database';
  $('body').append('<div id="theOverwrite"><div id="db_wrap"><h1>Forum Database</h1><p class="db_info">This database is for storing simple data for plugins. You should avoid storing personal data, and should consider making backups of your database tables whenever possible.</p><div class="db_nav">'+admin+'<a href="/forum">Return to index</a></div><div id="db_list"><div class="db_title">Database List</div></div><div id="db_tables"><div id="currentDB" class="db_title">Select a database table from the left</div><div id="innertable"></div></div><p style="color:#999;font-size:10px;text-align:right;margin:6px 0;">Developed by <a href="http://fmdesign.forumotion.com/u1" target="_blank">Ange Tuteur</a> | Version 1.01</p></div></div>');
  $('.database_table').appendTo('#innertable').hide().each(function() { $('#db_list').append('<div class="database">'+$(this).attr('id')+'</div>') });
  $('#page-footer, #pun-foot, #gfooter, #gfooter + p').appendTo('#db_wrap');
  $('body').addClass('databaseBody').html($('#theOverwrite').html());
  $('#db_list .database').on('click', function() {
    $('#db_tables .database_table').hide();
    $('#db_list .database').removeClass('dbactif');
    $(this).addClass('dbactif');
    $('#' + $(this).text()).show();
    $('#currentDB').text($(this).text());
  });
  $('#db_list .database:first').click();
});
/* END DATABASE CONTROL PANEL */

This version made some minor changes to how new rows are added, so if you have installed the fa_likes plugin follow the steps below. Edit your fa_likes script and replace this :

Code:

newRow : '[tr][td]t'+window.location.pathname.replace(/\/t(\d+).*/,'$1')+'p'+id+'[/td][td id="likes'+id+'"]likes={'+_userdata.user_id+':'+_userdata.username+'}[/td][/tr][/table]',

By this :

Code:

newRow : '[tr][td]t'+window.location.pathname.replace(/\/t(\d+).*/,'$1')+'p'+id+'[/td][td id="likes'+id+'"]likes={'+_userdata.user_id+':'+_userdata.username+'}[/td][/tr]',

[Ange TuteurAdministrator]

Update Version 1.02

This version includes a number of technical changes, features to make installing plugins easier, and some security options.

• After being updated _database.get() has been removed, due to being a complete clone of $.get()
  
• The PID and an Edit button is now displayed on top of each database table to make modifications easier.
  
• If you're using the toolbar, a link to your database is now visible from the welcome menu.
  
• New options to protect your database and tables from modifications and viewing. ( info )
  

The latest version can be found below, and in the installation instructions.

Replace your fa_database script with the following. Also make sure to replace YOUR_DATABASE by your database URL.

Code:

_database = new Object();
_database.tid = 'YOUR_DATABASE';
_database.ctid = _database.tid.match(/\/t(\d+)/)[1];
_database.name = 'Database';
_database.protect = 1;
_database.filter = [];

// database post method
_database.post = function(o) {
  if (!_userdata.session_logged_in) return; 
  o.state = 'OK';
  $.get('/post?p='+o.pid+'&mode=editpost', function(data) {
    var tables = $('#text_editor_textarea',data);
    if (RegExp('id="'+o.tableid+'"').test(tables.val())) tables.val(tables.val().replace(RegExp(o.update[0]), o.update[1]));
    else if (tables.val()) tables.val(tables.val().replace(/\[\/table\]$/,o.newRow + '[/table]'));
    else o.state = 'ERROR';
    $.post('/post?p='+o.pid+'&mode=editpost', {
      subject: _database.name,
      message: tables.val(),
      post: 1
    },function(d, s, x) {
      o.reload && window.location.reload();
      o.callback && o.callback(o.state, d, s, x);
    });
  });
};


// create a new database table
_database.newTable = function() {
  var a = document.createElement('DIV'), b = document.createElement('INPUT'), c, t = document.createElement('TEXTAREA');
  a.className = 'db_overlay';
  b.className = 'db_button';
  t.className = 'db_textarea';
  b.value = 'Submit';
  b.type = 'button';
  c = b.cloneNode();
  c.value = 'Cancel';
  a.innerHTML = '<div class="dbo_content"><div class="db_title">Create a new database table</div><p class="db_info">Here you can create a new database table. For it to appear in the database, make sure to give the table the classname <strong>database_table</strong>, and a unique ID.</p><div style="text-align:center;"><p class="db_erreur"></p></div></div>';
  a.firstChild.insertBefore(t,a.firstChild.lastChild);
  a.firstChild.lastChild.appendChild(b);
  a.firstChild.lastChild.appendChild(c);
  document.body.appendChild(a);
 
  b.onclick = function() {
    if (!t.value.length) return this.previousSibling.innerHTML = 'You cannot create a new database table with an empty message body.';
    a.innerHTML = a.innerHTML + '<div class="db_overlay"><div class="dbo_content process">Processing request, please wait...</div></div>';
    $.post('/post', {
      subject : _database.name,
      t : _database.tid.match(/\/t(\d+)-/)[1],
      message : t.value,
      mode : 'reply',
      post : 1
    },function() { window.location.reload() });
  };
  c.onclick = function() { document.body.removeChild(a) };
};

_database.checker = window.setInterval(function(){
  !_database.protect && window.clearInterval(_database.checker);
  if (typeof _userdata === 'undefined') return;
  window.clearInterval(_database.checker);
 
  if (_userdata.user_level != 1) {
    if (RegExp('/t' + _database.ctid).test(window.location.pathname)) return window.location.pathname = '/';
    if (/(mode=editpost|mode=delete)/.test(window.location.search)) for (var i=0; i<_database.filter.length; i++) if (RegExp('p=' + _database.filter[i]).test(window.location.search)) return window.location.pathname = '/';
  }
},1);
_database.notice = 'Forumotion Database System developed by Ange Tuteur - FM Design. Used to easily update and get topic database content for plugins.';

// database control panel
RegExp('/t' + _database.ctid).test(window.location.pathname) && $(function() { 
  var admin = '', type = _userdata.user_level;
  if (type == 1 && window.location.hash == '#edit') return $('.post').css('display','block');
  type == 1 && (admin = '<a href="#new" onclick="_database.newTable();return false;">New Table</a><a href="#edit" onclick="window.location.hash=\'#edit\';window.location.reload();">Edit Database</a>');
 
  document.title = 'Forum Database';
  $('body').append('<div id="theOverwrite"><div id="db_wrap"><h1>Forum Database</h1><p class="db_info">This database is for storing simple data for plugins. You should avoid storing personal data, and should consider making backups of your database tables whenever possible.</p><div class="db_nav">'+admin+'<a href="/forum">Return to index</a></div><div id="db_list"><div class="db_title">Database List</div></div><div id="db_tables"><div id="currentDB" class="db_title">Select a database table from the left</div><div id="innertable"></div></div><p style="color:#999;font-size:10px;text-align:right;margin:6px 0;">Developed by <a href="http://fmdesign.forumotion.com/u1" target="_blank">Ange Tuteur</a> | Version 1.02</p></div></div>');
  $('.database_table').hide().each(function() {
    if (type == 1) {
      var pid = $(this).closest('.post').find('.i_icon_edit').parent().attr('href').match(/\/post\?p=(\d+)&mode=editpost/)[1];
      $(this).find('tbody').prepend('<tr class="table_data"><td colspan="'+$(this).find('tr:last td').length+'"><span style="display:inline-block;padding:3px 0;text-transform:uppercase;margin:2px 0;">Table PID : '+pid+'</span><a href="/post?p='+pid+'&mode=editpost" class="db_edit_table" style="float:right;">Edit table</a></td></tr>');
    }
    $('#db_list').append('<div class="database">'+$(this).attr('id')+'</div>');
  }).appendTo('#innertable');
  $('#page-footer, #pun-foot, #gfooter, #gfooter + p').appendTo('#db_wrap');
  $('body').addClass('databaseBody').html($('#theOverwrite').html());
  $('#db_list .database').on('click', function() {
    $('#db_tables .database_table').hide();
    $('#db_list .database').removeClass('dbactif');
    $(this).addClass('dbactif');
    $('#' + $(this).text()).show();
    $('#currentDB').text($(this).text());
  });
  $('#db_list .database:first').click();
});

$(function(){
  $(function(){
    (_userdata.activate_toolbar && _userdata.user_level == 1) && $('#fa_menu a[href*="/admin"]').before('<a href="'+_database.tid+'">Forum Database</a><br>');
  });
});

So your style is also up to date. Replace your database CSS by the following.

Code:

/* --- START DATABASE CP --- */
body.databaseBody { color:#666; font-size:11px; font-family:Verdana,Arial,Helvetica,sans-serif; background:#DEF; }
body.databaseBody a { text-decoration:none }
#db_wrap { background:#FFF; border:1px solid #CCC; width:80%; margin:40px auto; padding:3px; }
#db_wrap h1 { color:#479 !important; font-size:18px; border-bottom:1px solid #479; padding-bottom:3px; margin:3px 0; }
.database_table { background:#FFF; border:1px solid #CCC; border-spacing:0; width:100%; overflow:auto; }
.database_table a { background:none !important; display:inline-block; white-space:nowrap; overflow:hidden; max-width:100px; }
.database_table tr:nth-child(even) { background:#FFF }
.database_table tr:nth-child(odd) { background:#DDD }
.database_table tr:hover { background:#FFA }
.database_table td { border-right:1px solid #CCC; border-bottom:1px solid #CCC; padding:3px; }
.database_table tr.table_data { background:#EEE; box-shadow:0 10px 6px rgba(255,255,255,0.3) inset, 0 -10px 6px rgba(0,0,0,0.05) inset }
#db_list { background:#EEE; border:1px solid #CCC; float:left; width:150px; min-height:200px; padding:3px; margin-right:6px; }
#db_list .database { color:#999; text-shadow:1px 1px 0 #FFF; text-align:center; font-weight:bold; font-size:10px; background:none; border:1px solid #CCC; border-radius:3px; cursor:pointer; margin:3px 0; padding:3px; }
#db_list .database:hover { color:#479; border-color:#479; }
#db_list .database.dbactif { background:#DEF; color:#69B; border-color:#8BD; }
#db_tables { background:#EEE; border:1px solid #CCC; overflow-x:hidden; padding:3px; }
#innertable { height:400px; overflow:auto; }
.db_nav { text-align:right; background:#EEE; border:1px solid #CCC; padding:5px 3px; margin:6px 0; }
.db_nav a, .db_button, tr.table_data a { color:#999; text-shadow:1px 1px 0 #FFF; text-transform:uppercase; background:none; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px 6px; margin:1px 3px; cursor:pointer; }
.db_nav a:hover, .db_button:hover, tr.table_data a:hover { color:#479; border-color:#479; }
.db_nav a:focus, .db_button:focus, tr.table_data a:focus { color:#8BD; border-color:#8BD; }
.db_title { color:#479; font-size:12px; font-weight:bold; border-bottom:1px solid #479; padding-bottom:3px; margin-bottom:3px; }
.db_info { color:#58A; text-shadow:1px 1px 0 #FFF; text-align:center; background-color:#DEF; border:1px solid #BCD; border-radius:3px; padding:5px 3px; margin:6px 3px; }
.db_erreur { color:#C66; font-size:12px; text-shadow:1px 1px 0 #FFF; font-weight:bold; height:20px; }
.db_overlay { background:rgba(0,0,0,0.3); position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; }
.dbo_content { background:#EEE; border:1px solid #CCC; width:65%; height:50%; overflow:auto; padding:3px; position:absolute; top:20%; left:15%; }
.dbo_content.process { color:#996; text-shadow:1px 1px 0 #FFF; text-align:center; font-size:16px; font-weight:bold; width:30%; height:auto; padding:6px 24px; left:30%; top:40%; }
.db_textarea { color:#333; background:#FFF; border:1px solid #CCC; border-radius:3px; width:90% !important; height:50% !important; resize:none; display:block; padding:3px; margin:3px auto; }
.db_textarea:hover { border-color:#479 }
.db_textarea:focus { border-color:#8BD }
/* --- END DATABASE CP --- */

Plugins

If you were using one of the following plugins, it is advisable to replace your script by the ones below.


fa_likes

Remember to replace 270 by your PID.

Code:

$(function(){
  var pid = 270,
  i = 0,
  lang = {
    like : 'Like',
    loading : 'Loading...',
    people : 'People like this post.',
    person : 'Person likes this post.'
  };
 
  $('.post').each(function() {
    var plus = $(this).find('.vote-button:first a'), id = $(this).attr('id').slice(1), clear = $(this).find('.clear'), votes = 0, text = lang.people;
 
    if (plus.length) clear.after('<div class="fa_like_row"><a class="fa_like_button" href="'+plus.attr('href')+'">'+lang.like+'</a></div>');
    else clear.after('<div class="fa_like_row"><span class="fa_liked">'+lang.like+'</span></div>');
 
    if ($(this).find('.vote-bar').length) {
      votes = Number($(this).find('.vote-bar').attr('title').replace(/.*?\((\d+)\s.*/,'$1'));
      if (votes == 1) text = lang.person;
    }
 
    $(this).find('.fa_like_row').append('<div class="fa_like_text">'+votes+' '+text+'</div><div class="fa_like_list" id="fa_like_list'+id+'">Loading...</div>');
    $(this).find('.vote').remove();
 
  i++;
  if (i==$('.post').length) {
      $.get(_database.tid, function(data) {
      $('.post').each(function() {
        var id = $(this).attr('id').slice(1), dblikes;
          $('#fa_like_list'+id).html('');
          if ($('#fa_likes #likes'+id,data).length) {
            dblikes = $('#fa_likes #likes'+id,data).text().replace(/likes=\{(.*?)\}/,'$1').split(',');
            for (var i=0; i<dblikes.length; i++) {
              var comma = ', ';
              if (i==dblikes.length-1) comma = '';
              $('#fa_like_list'+id).append(dblikes[i].replace(/^(.*?):(.*?)$/,'<a href="/u$1">$2</a>'+comma))
            }
          }
      });
    });
  }
  });
 
  $('.fa_like_button').on('click', function() {
    var id = $(this).attr('href').replace(/^.*?p\_vote=(\d+)$/,'$1');
    $(this).after('<span class="fa_like_button">'+lang.loading+'</span>').hide();
    $.get($(this).attr('href'), function() {
    _database.post({
        pid : pid,
        tableid : 'likes'+id,
        update : ['\\[td id="likes'+id+'"\\]likes=\\{(.*?)\\}\\[/td\\]','[td id="likes'+id+'"]likes={$1,'+_userdata.user_id+':'+_userdata.username+'}[/td]'],
        newRow : '[tr][td]t'+window.location.pathname.replace(/\/t(\d+).*/,'$1')+'p'+id+'[/td][td id="likes'+id+'"]likes={'+_userdata.user_id+':'+_userdata.username+'}[/td][/tr]',
        reload : true
      });
    });
    return false;
  });
});

fa_views

Remember to replace 279 by your PID.

Code:

window.location.pathname.match(/\/u\d+/) && $(function() {
  var pid = 279, uid = window.location.pathname.match(/u(\d+)/)[1], mod = '#profile-advanced-right .module:first',n;
  $('.bodylinewidth').length && (mod = 'td[width="300"] .forumline:first td.row1.gensmall');
  $('.pun').length && (mod = '#profile-advanced-right .module:first .main-content');
  $(mod).append('<div class="fa_views">Profile views : <span id="view_total">0</span></div>');
  $.get(_database.tid, function(data) {
    n = $('#fa_views #u'+uid+'_views',data);
    n.length ? n = Number(n.text()) + 1 : n = 1;
    document.getElementById('view_total').innerHTML = n;
    _database.post({
      pid : pid,
      tableid : 'u'+uid+'_views',
      update : ['\\[td id="u'+uid+'_views"\\]\\d+\\[/td\\]','[td id="u'+uid+'_views"]'+n+'[/td]'],
      newRow : '[tr][td]'+document.title.match(/^.*? - (.*)$/)[1]+'[/td][td id="u'+uid+'_views"]'+n+'[/td][/tr]'
    });
  });
});

[Sponsored content]