Home arrow ASP arrow Page 3 - Building a Multi-Page Article System With ASP/PHP
ASP

Building a Multi-Page Article System With ASP/PHP


Interested in building your own CMS? In this article Mitchell shows us how to build a multi-page article system that can be used in any web-based CMS...

Author Info:
By: Mitchell Harper
Rating: 4 stars4 stars4 stars4 stars4 stars / 35
January 05, 2003
TABLE OF CONTENTS:
  1. · Building a Multi-Page Article System With ASP/PHP
  2. · How Everything Will Work
  3. · The JavaScript Behind it All
  4. · Saving Articles to the Database
  5. · Displaying a List of Articles
  6. · Conclusion

print this article
SEARCH DEVARTICLES

Building a Multi-Page Article System With ASP/PHP - The JavaScript Behind it All
(Page 3 of 6 )

I love JavaScript because it's so flexible and powerful when used correctly (read: not used to popup ad's or confuse you). If you aren't competent with JavaScript then I would highly recommend reading up on it. 

Anyway, now to the JavaScript used in our article system. Each button is linked to a JavaScript function. Some of these functions are described below:

AddPage
This function is activated when the "Add Page" button is clicked. It takes the title and content and adds them to a JavaScript array which is used to keep track of all the pages contained in the new article.

Its code looks like this:

function AddPage()
{
var pageTitle = new String();
var pageContent = new String();
var acount = arrTitles.length;
var thisForm = document.frmAdd;

if(acount < 20)
{
pageTitle = document.frmAdd.contentTitle.value;
pageContent = document.frmAdd.contentBody.value;

if(pageTitle.length == 0)
{ alert('You must enter a title for this page first.');
document.frmAdd.contentTitle.focus();
return;
}

if(pageContent.length == 0)
{ alert('You must enter some content for this page first.');
document.frmAdd.contentBody.focus();
return;
}

arrTitles[acount] = pageTitle;
arrContents[acount] = pageContent;

document.frmAdd.contentTitle.value = '';
document.frmAdd.contentBody.value = '';

ReloadPages();

document.frmAdd.contentTitle.focus();
}
else
{ alert('This article can have a maximum of twenty pages. Adding this page would exceed the limit.');
document.frmAdd.contentTitle.focus();
document.frmAdd.contentTitle.select();
}
}


ClearPages
This function is activated when the "Remove All Pages" button is clicked. It empties the arrays that contain the titles and content for each of the pages in this article.

It looks like this:

function ClearPages()
{
if(confirm('Warning: You are about to delete all of the pages from this article. Click OK to continue.'))
{
var thisForm = document.frmAdd;

arrTitles.length = 0;
arrContents.length = 0;
ReloadPages();

for(counter=0; counter<thisForm.articlePages.length; counter++)
{ thisForm.articlePages[counter].selected = false; }

thisForm.contentTitle.value = '';
thisForm.contentBody.value = '';
thisForm.cmdAdd.disabled = false;
thisForm.cmdUpdate.disabled = true;

thisForm.contentTitle.focus();
}
}


MoveUp
This function is called when the "<" button is clicked. It moves the selected page up one spot in the list of pages. For example, if you selected page 2 in the list and clicked this button, then the MoveUp function would swap page 2 with page 1, this moving page 2 to the top of the list.

It looks like this:

function MoveUp()
{
var thisForm = document.frmAdd;

if(thisForm.articlePages.selectedIndex > 0)
{
thisIndex = thisForm.articlePages.selectedIndex-1;
tmp1 = arrTitles[thisForm.articlePages.selectedIndex-1];
tmp2 = arrTitles[thisForm.articlePages.selectedIndex];
tmp3 = arrContents[thisForm.articlePages.selectedIndex-1];
tmp4 = arrContents[thisForm.articlePages.selectedIndex];
arrTitles[thisForm.articlePages.selectedIndex] = tmp1;
arrTitles[thisForm.articlePages.selectedIndex-1] = tmp2;
arrContents[thisForm.articlePages.selectedIndex] = tmp3;
arrContents[thisForm.articlePages.selectedIndex-1] = tmp4;

ReloadPages();

thisForm.articlePages.selectedIndex = thisIndex;
}
}


DelPage
This function is called when the "x" button is clicked. It removes the selected page from the article. It does so by removing the title and content indexes in the JavaScript arrays for the selected page. It basically shifts any pages in front of the selected page one spot back in the array, overwriting the selected page with the one in front of it and reducing the size of the array by one.

It looks like this:

function DelPage()
{

var thisForm = document.frmAdd;
var thisIndex = thisForm.articlePages.selectedIndex;

if(thisIndex > -1)
{
if(confirm('Warning: You are about to delete this page from the article. Click OK to continue.'))
{

var a = 0;

var newTitles = new Array();
var newContents = new Array();

for(i = 0; i < arrTitles.length; i++)
{
if(i != thisIndex)
{
newTitles[a] = arrTitles[i];
newContents[a] = arrContents[i];
a = a + 1;
}
}

arrTitles = newTitles;
arrContents = newContents;

for(counter=0; counter<thisForm.articlePages.length; counter++)
{ thisForm.articlePages[counter].selected = false; }

ReloadPages();

document.all.contentTitle.value = '';
document.all.contentBody.value = '';
document.all.cmdAdd.disabled = false;
document.all.cmdUpdate.disabled = true;

thisForm.contentTitle.focus();

}
}
else
{
alert('Please select an article to delete.');
thisForm.contentPages.focus();
}
}


AddPages
This function is called when the "Add Article to Database" button is clicked. It loops through the title and content arrays which are used to hold the pages for the article and outputs each one into a hidden form variable which are then submitted with the form.

It looks like this:

function AddPages()
{
var thisForm = document.frmAdd;
var docLength = arrTitles.length;
var hasTitle = thisForm.articleTitle.value == '' ? false : true;
var hasSummary = thisForm.articleSummary.value == '' ? false : true;

if(hasTitle && hasSummary && docLength >= 1)
{
for(counter=0; counter < docLength; counter++)
{
x = counter + 1;
eval("thisForm.pageTitle"+x+".value = arrTitles["+counter+"];");
eval("thisForm.pageContent"+x+".value = arrContents["+counter+"];");
}
}
else
{
alert('Please make sure that you have entered an article title and summary and at least one page.');
thisForm.contentTitle.focus();
return false;
}

return true;
}


That's the bulk of the JavaScript. Don't worry if you don't understand it. Let's now get onto the ASP/PHP code to put our article into a database. I will also show you how to retrieve, list and display each article.
blog comments powered by Disqus
ASP ARTICLES

- Central Scoreboard with Flash and ASP
- Calorie Counter Using WAP and ASP
- Creating PGP-Encrypted E-Mails Using ASP
- Be My Guest in ASP
- Session Replacement in ASP
- Securing ASP Data Access Credentials Using t...
- The Not So Ordinary Address Book
- Adding and Displaying Data Easily via ASP an...
- Sending Email From a Form in ASP
- Adding Member Services in ASP
- Removing Unconfirmed Members
- Trapping HTTP 500.100 - Internal Server Error
- So Many Rows, So Little Time! - Case Study
- XDO: An XML Engine Class for Classic ASP
- Credit Card Fraud Prevention Using ASP and C...

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 
Support 

Developer Shed Affiliates

 




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