Building a Multi-Page Article System With ASP/PHP Author: Mitchell Harper Date Added: 05th Jan 2003 Type: Tutorial Rating: This is a printable version of "Building a Multi-Page Article System With ASP/PHP". For the complete online version, please visit http://www.devarticles.com/content.php?articleId=310
Page 1: Introduction When I originally started constructing the backend for devArticles.com from my bedroom in early 2001, I never intended to use it as the basis of a commercial product. I remember launching devArticles.com "officially" in November of 2001 to about 3 friends on ICQ and a couple more on mIRC. Back then it was just me. It wasn't much, but it was fun because it was my first ever attempt to create a web site that would serve as both a knowledge base for programmers and as a source of income to get me out of my job, which was developing and designing the TechBuy web site. A couple of months after I launched devArticles.com, things were going smooth and a friend wanted a login to the backend admin area to see how I was adding articles. I gave him access and he really liked the way you could add an article with up to 20 pages in it. He told me that I should tweak the backend and spruce it up a bit to sell it as a commercial product. I did. This was the birth of SiteWorksPro, which has gone on to sell close to 1,000 copies since we released it about 9 months ago. Anyway, I ended up showing this mult-article capability of SiteWorksPro to a lot of people and they all wanted to know how they could implement something like this into their web projects. Hence the writing of this article. Today I will be showing you how to build a multi-page article system which you can either use on its own, or integrate into your content management systems. I will explain everything generally, and then show coding and database examples for PHP/MySQL and ASP/SQL Server 2000. You can choose which examples you’d like to follow. Anyhow, let's get on with the article, shall we?...
Page 2: How Everything Will Work If you're a web developer and have business-orientated clients, then I'm sure that you either have -– or will have to –- construct some sort of content management system to manage articles or content. Some people would like to have you think that CMS's (content management systems) are hard to develop. Don't be fooled. They are easy. The one we are going to build today will let us store and display articles. Each article can have up to 20 pages, each of which will contain a title and some content. We will create one script to create new articles, and another to display them. A MySQL/SQL Server 2000 database will be used to store the articles. The Database Schema Our database will contain just 2 tables: 1 for the articles and 1 for the pages. Each page will link back to its parent article with the use of a primary key in the articles table, and a foreign key in the pages table. MySQL Database Details Jump to the MySQL command prompt and run the following code to create a new database and populate it with 2 tables, as described above: create database myCMS; use myCMS; create table articles ( articleId int auto_increment not null primary key, title varchar(250), summary text, datePublished timestamp, unique id(articleId) ); create table pages ( pageId int auto_increment not null primary key, articleId int, title varchar(250), content text, unique id(pageId) );
SQL Server 2000 Database Details Use query analyzer to create a new database and populate it with 2 tables, as described above: create database myCMS go use myCMS go
create table articles ( articleId int not null primary key identity(1,1), title varchar(250), summary text, datePublished datetime default GETDATE() ) create table pages ( pageId int not null primary key identity(1,1), articleId int, title varchar(250), content text )
Press F5 to execute the queries once you've copied them into the query analyzer window. Building Our Multi-Page System Our database is now in place. It's time to get creative with some JavaScript to build the multi-page article system. Here's how our page is going to look when we’ve finished:
As you can see, it's pretty simple. We will have an article title and summary, followed by a series of pages. Each of the buttons has an event linked to it in which JavaScript code is used to perform some operation on the current article page. Our article system will let us: ● ● ● ● ●
Add, edit and delete articles Shift the page order of each page in our article Remove all pages in one hit Delete pages on a page-by-page basis Update a page once it has already been created
[Note] Our article system will add articles only. It is beyond the scope of this article for me to show you how to load articles back from the database or delete them. [End Note] Adding an Article The good thing about our article system is that there's very little server-side code. It's mostly client-side JavaScript, meaning that if you didn't use ASP or PHP, then you could easily take the code and convert it to Perl, ColdFusion, ASP.Net, etc. Our basic layout is a couple of text boxes, a select box and a text box. The entire code for this article is available in the support material link on the last page. Let's now run through the steps of adding pages to an article. We will then look at the JavaScript code behind our article system. Here's a diagram to illustrate the order in which the "add article" form should be completed:
As you can see, we start by entering an article title and summary. Next, we move onto adding pages to our article. We start with the page title (step 3) and then the page content (step 4). Once we have entered those, we click on the "Add Page" button (step 5). The "Add Page" button fires off some JavaScript which we will look at shortly. We then repeat steps 3 to 5 to add more pages. Phew. OK. Now, let's get into the nitty-gritty and look at the JavaScript code behind it all. Don't worry, I will assume that you have limited JavaScript ability and I will try to explain everything as best as I can!
Page 3: The JavaScript Behind it All 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. Checkout our book page for a list of books that me and the other devArticles team members have read and recommend. 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 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= 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.
Page 4: Saving Articles to the Database When the form is submitted, we have a number of variables available to us. They are: ● ●
articleTitle articleSummary
● ●
pageTitle1 to pageTitle20 pageContent1 to pageContent20
If you match these up with the schema of our database, then you will see that we have all of the data we need to create entries in our database for each article. We will have 1 entry in the articles table and 1 or more entries in the pages table for each article. Each page is linked back to the article via the articleId field. Let's now look at the code to save an article to the database. ASP Code sub SaveArticle() %>
