Home arrow ASP arrow Page 5 - Building a WYSIWYG HTML Editor Part 2/2
ASP

Building a WYSIWYG HTML Editor Part 2/2


In part one of this two part article we took a look at a simple way to create a fully functional browser-based HTML editor. In this article Mitchell shows us how to put it to good use, creating a database driven news system using the WYSIWYG editor, ASP and SQL Server 2000.

Author Info:
By: Mitchell Harper
Rating: 5 stars5 stars5 stars5 stars5 stars / 105
April 12, 2002
TABLE OF CONTENTS:
  1. · Building a WYSIWYG HTML Editor Part 2/2
  2. · Creating the database
  3. · Implementing the WYSIWYG HTML editor
  4. · Implementing the WYSIWYG HTML editor (contd.)
  5. · Displaying the news posts
  6. · Conclusion

print this article
SEARCH DEVARTICLES

Building a WYSIWYG HTML Editor Part 2/2 - Displaying the news posts
(Page 5 of 6 )

As I'm sure you can guess, it's extremely easy to display the news posts. Let's create a web page to view the news posts now, sorted by either topic or author. Our example will implement frames, so create a new page called news.html and enter the following code into it:

<html> <head> <title>View News</title> </head>
<frameset cols="200,*">
<frame name="menu" target="main" src="menu.asp">
<frame name="main">
</frameset>
</html>


The menu frame will list both topics and authors for which we can view news. It will link to a page called viewnews.asp, which we will create in a minute. The source code for the menu frame resides in menu.asp and looks like this:

<!-- #INCLUDE file="db.asp" -->
<%
dim objConn dim objRS
set objConn = Server.CreateObject("ADODB.Connection")
set objRS = Server.CreateObject("ADODB.Recordset") objConn.Open
dbConnString objRS.ActiveConnection = objConn
Response.Write "<b>Topics:</b><br>"
objRS.Open "select * from newsTopics order by topic asc"
while not objRS.EOF
Response.Write "<a target='main' href='viewnews.asp?how=topic&topicId=" & objRS("topicId") & "'>"
Response.Write objRS("topic") & "</a><br>"
objRS.MoveNext
wend
objRS.Close Response.Write "<br><b>Authors:</b><br>"
objRS.Open "select * from newsAuthors order by name asc"
while not objRS.EOF
Response.Write "<a target='main' href='viewnews.asp?how=author&authorId=" & objRS("authorId") & "'>"
Response.Write objRS("name") & "</a><br>"
objRS.MoveNext wend
%>

 
Here's how the frame looks with menu.asp:
 
The menu.asp frame in action 

The right side frame loads viewnews.asp with the query string arguments from the links in the left frame. Its source code looks like this:

<!-- #INCLUDE file="db.asp" -->
<%
dim how
dim topicId
dim authorId
dim query
dim objConn
dim objRS
how = Request.QueryString("how")
topicId = Request.QueryString("topicId")
authorId = Request.QueryString("authorId")
query = "" set objConn = Server.CreateObject("ADODB.Connection")
set objRS = Server.CreateObject("ADODB.Recordset")
objConn.Open dbConnString
objRS.ActiveConnection = objConn
if how = "topic" then
query = "select * from newsPosts where topics like " & _ "'%" & topicId & "%'"
elseif how = "author" then
query = "select * from newsPosts where authorId = " & authorId
else
Response.Write "<b>ERROR: You didn't select a valid type</b>"
Response.End
end if
objRS.Open query
while not objRS.EOF
response.write "<h2>" & objRS("title") & "</h2>"
response.write "<b>Author Id: </b>" & objRS("authorId") & "<br>"
response.write "<b>Topics: </b>" & objRS("topics") & "<br>"
response.write objRS("newsPost") & "<br><hr><br>"
objRS.MoveNext wend
%>


Viewnews.asp works with the query string variables how, topicId and authorId, querying the database with a different query depending on whether or not we want to view news by topic or by author. The query is generated as a LIKE query, however an IN query could also be used. If I clicked on a topic in the left frame, then the query string and SQL query would look like this:

http://localhost/viewnews.asp?how=topic&topicId=6

select * from newsPosts where topics like '%6%'

Likewise if I clicked on an author in the left frame, the query string and SQL query would look like this:

http://localhost/viewnews.asp?how=author&authorId=1

select * from newsPosts where authorId = 1


Last but not least, here's a screenshot from when I clicked on the developer topic:
 
The result of clicking on the developer topic 

The news post's title, author ID and topic(s) are displayed as well as the HTML for the actual post. With just a bit of tweaking, this page could easily be changed to fit into any content driven web site, just like I've done with
Socket6.
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