Home arrow HTML arrow Page 2 - Using htmlArea and a Database to Maintain Content on a Website

Using htmlArea and a Database to Maintain Content on a Website

If you wish to develop a website that others can contribute to, one option is to have text files sent as e-mail attachments, convert these to HTML and then upload the file. There is, however, a better way! If the people making submissions to your site are capable of using a word processor then things can be done much more efficiently. This article will show you how to use a free component called htmlArea and a database to handle the addition and display of content on your website. Some knowledge of HTML, databases and server-side scripts is assumed.

Author Info:
By: Peter Lavin
Rating: 5 stars5 stars5 stars5 stars5 stars / 29
May 03, 2004
  1. · Using htmlArea and a Database to Maintain Content on a Website
  2. · Download and Install
  3. · Saving Content
  4. · How to Display the Saved Contents

print this article

Using htmlArea and a Database to Maintain Content on a Website - Download and Install
(Page 2 of 4 )

Excellent installation instructions are provided by interactivetools at their site so follow them and install htmlArea. However, there is one change you will probably want to make. If you follow the instructions given in the link above, you will need to place any page that uses htmlArea in the “htmlarea” directory. It is much more likely that you will want to access this control from a page in your server’s root directory. To do so, change the line of code that reads, _editor_url = ""; to _editor_url = "htmlarea/"; .

You can embed an htmlArea control that will work from your root directory using the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" 
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="your name" />
<script language="Javascript1.2"><!-- // load htmlarea
_editor_url = "htmlarea/"; // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac')        >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera')      >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
 document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
 document.write(' language="Javascript1.2"></scr' + 'ipt>');  
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// -->
<script language="JavaScript1.2" defer>
<p align="center">
<textarea name="contents" cols="40" rows="12" readonly>

Save this code, upload it to your server’s root directory and try it out. If you’ve done everything correctly you should see an htmlArea in place of the textarea named “contents”. Try out the various features and see what it is capable of.

Database Table

Let’s define the database table that will store the contents of an htmlArea. We’ll name the table “items” and give it the following structure:

Field NameData TypeProperties
idint(11)PRIMARY KEY
titlevarchar(35)Not Null
topicvarchar(35)Not Null
authorvarchar(15)Not Null
contentstextNot Null
reviewedtinyint (4)

A few more fields than you imagined perhaps, but they all do serve a purpose. The “id” field will be a unique identifier and should probably be “auto_increment” type. “title” and “author” are self explanatory and “contents” will hold what’s typed into the htmlArea. The ‘whenadded’ field is a ‘timestamp’ data type so it will record the date and time that a record is added. Depending upon your needs, the ‘reviewed’ field may or may not be necessary but it will allow you to vet (preview) content before it is posted to your site. For instance, a where clause in your SQL such as, “WHERE reviewed =1”, would keep items not yet reviewed from showing up on your site.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials