Chapter 11: Building a Blog Application 377
Figure 11-1:
The page flow for the Blog application.
Figure 11-2:
The Blog Home page.
Default.aspx
Blog Home
page
Login.aspx
Login page
|
MyBlogs.aspx |
Blog.aspx |
|
Blog page |
|
My Blogs |
|
|
|
page |
|
Register.aspx |
|
|
Registration |
|
|
page |
Comments.aspx |
Comment.aspx |
|
|
Comments |
Leave |
|
page |
Comment |
|
|
page |
378 Part V: Building Community Applications
The Blog page
When the user selects a blog from the application’s Home page (or from the My Blogs page, as you’ll see in a moment), the Blog page is displayed, as shown in Figure 11-3. This page displays the most recent post for the blog as well as a list of older posts; the user can click and view the posts in this list as well. Beneath the post, a count of comments made for the post is displayed, along with a link to view the comments and a link to leave a new comment.
This page uses a FormView control to display the post itself and a GridView control to display the list of posts. The SELECT statement for the FormView control’s data source is tied to the SelectedValue property of the GridView control. As a result, the FormView control displays the post selected by the user. When the page is first displayed, the most recent post is automatically selected.
Notice that the URL in the address bar includes a query string named blog. This query string is set to the ID of the blog selected by the user in the Blog Home page. The Blog page uses this query string to determine which blog to display.
Figure 11-3:
The Blog
page.
Chapter 11: Building a Blog Application 379
The Comments page
When the user clicks the View Comments link in the Blog page, the Comments page is displayed, as shown in Figure 11-4. This page displays any comments left by other users. The comments are listed in descending date sequence, so the most recent comment is displayed first. A query string field named postid is used to determine the post whose comments are to be displayed. (The other query string fields shown in the URL for this page, post and blogid, are used so to remember which blog and post to display when the user returns to the Blog page. (There’s more to know about these query string fields; you can see it in the source code for the Blog.aspx page.)
This page also includes a Return link that returns to the Blog page and a
Leave Comment link that lets the user add a new comment.
Figure 11-4:
The
Comments
page.
The Leave Comment page
If the user clicks the Leave a Comment link on the Blog page or the Comments page, the Leave Comment page is displayed (as shown in Figure 11-5). Here the user can leave a comment that’s associated with a particular post. The Leave Comment page has text boxes for the user to enter his or her name and comment. Note that the user doesn’t have to register or log in to leave a comment. As a result, the user can enter any name he or she pleases in the Name text box.
380 Part V: Building Community Applications
This page also includes two buttons. To post a comment, the user clicks the Post button. To return to the previous page without posting a comment, the user clicks the Cancel button.
The Login page
If the user clicks the Log In link that appears in the Master page (and thus on each page in the site) or attempts to access the My Blogs page without first logging in, the Login page shown in Figure 11-6 is displayed. This page simply uses a standard ASP.NET Login control to prompt the user for a username and password.
In Chapter 4, you can find information about enhancing this login page by providing links that let the user change his or her password or retrieve a forgotten password.
Figure 11-5:
The Leave
Comment
page.
Chapter 11: Building a Blog Application 381
Figure 11-6:
The Login
page.
The Register page
To create a new user account, the user can click the Register link that appears in the Master Page. Then the Register page appears, as shown in Figure 11-7. This page uses an ASP.NET CreateUserWizard control to create a new user account. (For more information about this control, refer to Chapter 4.)
The My Blogs page
Figure 11-8 shows the My Blogs page, which is displayed when the user clicks the My Blogs link that appears in the Master Page and has logged in. This page displays the blogs the user has created, lets the user post a new article to one of his or her blogs, and lets the user create a new blog. To post a new article to a blog, the user simply clicks the New Post link for the blog. To create a new blog, the user enters the blog’s name and description and clicks the Create Blog button.
382 Part V: Building Community Applications
Figure 11-7:
The Register
page.
Figure 11-8:
The My Blogs page.
Chapter 11: Building a Blog Application 383
The New Post page
The New Post page is shown in Figure 11-9. This page is displayed when the user clicks the New Post link on the My Blogs page. It lets the user enter the subject and text for a new article to be posted to the user’s blog. Note that the blog the article should be posted to is passed to the New Post page as a query string field.
Figure 11-9:
The New
Post page.
Designing the Database
The database for the Blog application uses just three tables:
Blogs
Posts
Comments
Figure 11-10 shows a diagram for the database, and the following sections describe each table individually.
384 Part V: Building Community Applications
|
|
Blogs |
|
|
|
|
blogid |
Posts |
|
|
|
username |
|
|
|
postid |
|
|
|
name |
Comments |
|
|
description |
blogid |
commentid |
|
Figure 11-10: |
posts |
postdate |
postid |
|
subject |
|
A diagram |
|
commentdate |
|
|
post |
|
of the Blog |
|
username |
|
|
comments |
|
database. |
|
comment |
|
|
|
The Blogs table
The Blogs table records vital information about the blogs that have been created by users of the Web site. The columns for the Blogs table are listed in Table 11-1.
Table 11-1 |
|
The Blogs Table |
Column name |
Type |
Description |
blogid |
INT IDENTITY |
This column provides a unique ID |
|
|
number for each blog created by |
|
|
the site’s users, and serves as the |
|
|
primary key for the Blogs table. |
|
|
|
username |
VARCHAR(100) |
The name of the user that created |
|
|
the blog. |
|
|
|
name |
VARCHAR(255) |
The blog’s name. |
|
|
|
description |
VARCHAR(255) |
A short description of the blog. |
|
|
|
posts |
INT |
The number of posts that have been |
|
|
made to this blog. A trigger updates |
|
|
this field automatically whenever a |
|
|
row is inserted into the Posts |
|
|
table. |
|
|
|
The Posts table
The Posts table stores the posts that users have made to their blogs. Table 11-2 lists the columns defined for this table.
Chapter 11: Building a Blog Application 385
Table 11-2 |
|
The Posts Table |
Column name |
Type |
Description |
postid |
INT IDENTITY |
This column provides a unique ID |
|
|
number for each post, and serves as |
|
|
the primary key for the Posts table. |
|
|
|
blogid |
INT |
This column specifies the blog that the |
|
|
post is associated with, and serves as |
|
|
a foreign key to the blogid column |
|
|
in the Blogs table. |
|
|
|
postdate |
DATETIME |
The date and time the post was made. |
|
|
The default value for this column is the |
|
|
current date and time. |
subject |
VARCHAR(255) |
The subject title for the post. |
|
|
|
post |
VARCHAR(MAX) |
The text of the post. |
|
|
|
comments |
INT |
The number of comments that have |
|
|
been made to this blog. A trigger |
|
|
updates this field automatically |
|
|
whenever a row is inserted into the |
|
|
Comments table. |
|
|
|
The Comments table
The Comments table records comments made by visitors to the blog site. The columns of the Comments table are listed in Table 11-3.
Table 11-3 |
The Comments Table |
Column name |
Type |
Description |
commentid |
INT IDENTITY |
This column uniquely identifies each |
|
|
comment and serves as the primary |
|
|
key for the Comments table. |
postid |
INT |
The ID of the post the comment |
|
|
belongs to. This is a foreign key to |
|
|
the postid column of the Posts |
|
|
table. |
386 Part V: Building Community Applications
Table 11-3 (continued)
Column name |
Type |
Description |
commentdate |
DATETIME |
The date and time the comment was |
|
|
recorded. The default value for this |
|
|
column is the current date and time. |
|
|
|
username |
VARCHAR(100) |
The name of the person who left the |
|
|
comment. |
|
|
|
comment |
VARCHAR(MAX) |
The text of the comment. |
|
|
|
Creating the Database
You can create the Blog database by running the script that’s shown in Listing 11-1. To run this script, open a command prompt window and change to the directory that contains the script. Then enter this command:
sqlcmd -S localhost\SQLExpress -i CreateBlogDB.sql
As usual, you’ll need to change the host name from localhost if you’re not using SQL Server Express on your own computer.
Listing 11-1: The CreateBlogDB.sql script
USE master |
|
|
1 |
GO |
|
|
|
IF EXISTS(SELECT * FROM sysdatabases |
2 |
WHERE name=’Forum’) |
|
|
DROP DATABASE Blog |
|
|
GO |
|
|
|
CREATE DATABASE Blog |
|
3 |
ON (NAME=Product, |
|
|
FILENAME = ‘C:\APPS\Blog.mdf’, |
|
SIZE=10 ) |
|
|
|
GO |
|
|
|
USE Blog |
|
|
4 |
GO |
|
|
|
CREATE TABLE Blogs ( |
|
5 |
blogid |
INT IDENTITY, |
|
|
username |
VARCHAR(100) |
NOT NULL, |
|
name |
VARCHAR(255) |
NOT NULL, |
|
|
|
|
|
