Build Your Own Blog: Part III

CodeTalk

LANGUAGES:VB.NET

ASP.NETVERSIONS: 2.0

Build Your Own Blog: Part III

The Externals Feedback System, Security, Archives, RSS

By Bipin Joshi

In PartII of this series we covered the master page creation for the blog,administrative pages, and displaying of blog posts. But any blog is incompletewithout the ability to post comments. In this final installment, we ll add the facilityto view and post comments. We ll also add the ability to view archives.Finally, we ll prepare the blog for syndication by exposing RSS feeds. Theadministrative pages are secured using forms authentication so that nobody canuse them without signing in.

Viewing and Submitting Comments

When a user selects a specific post from Default.aspx,they ll come to ShowPost.aspx, wherein the post is displayed (along withpreviously submitted user comments). The user can also submit their own commentfrom this page.

Add a new Web form named ShowPost.aspx and set its masterpage to MasterPage.master. Drag and drop onto it a DataList and a SqlDataSourcecontrol. In terms of layout, the DataList is going to be the same as the GridViewthat we developed for default.aspx. The only reason we use DataList instead ofGridView is that we don t need paging capability on ShowPost.aspx.

Remember that when we navigate to ShowPost.aspx from thedefault page, we pass the post ID in the query string. Configure the SqlDataSourcecontrol to select the record from the Posts table that matches the ID passed inthe query string. We achieve this by adding a QueryStringParameter named PostIdin the SqlDataSource control. Figure 1 shows the Command and Parameter Editordialog box; Figure 2 shows the markup for the SqlDataSource control.

Figure 1: The Command and Parameter Editordialog box.

ConnectionString="<%$ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Posts] WHERE ([Id] =@Id)"> Type="Int32" />

Figure 2: Markupof SqlDataSource control for displaying the selected post.

Next, we display all the comments for that post in anotherDataList. So, drag and drop another DataList and a SqlDataSource control. Thefeedback consists of Title, Name of the poster, URL, and the comment. Figure 3shows the markup of the DataList that displays these details. As you can see,we used the Eval method to bind various Label controls to the underlying data.

DataSourceID="SqlDataSource2" ForeColor="#333333" Width="100%"> ForeColor="White" /> ForeColor="#333333" /> width="100%"> Font-Bold="true" Text='<%#ctype(Eval("PostDate"),datetime) .ToLongDateString() %>'> Text='<%#Eval("title")%>'> Text='<%# Eval("message") %>'> Text='<%# Eval("postedby") %>' NavigateUrl='<%# Eval("Url") %>'> Text='<%# Eval("PostDate", "{0:g}") %>'> ForeColor="#284775" /> ForeColor="White" />

Figure 3: Markupof DataList showing selected post.

The SqlDataSource that supplies data to the feedbackDataList fetches all the records from the Comments table matching the givenpost ID. Figure 4 shows the markup for this SqlDataSource. Again, we useQueryStringParameter to pass PostId to the SELECT query.

ConnectionString="<%$ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Comments] WHERE ([PostId] = @PostId)"> Type="Int32" />

Figure 4: Markupof SqlDataSource control supplying data to the feedback DataList.

To add a new comment, provide a small form consisting ofTextBoxes and a Submit button. Also, add validations to the TextBoxes. Figure 5shows the markup for this comment submission form. Figure 6 shows the same formin VS.NET designer.

Figure 5: Markupof the comment submission form.

Figure 6: The comment submissionform in VS.NET designer.

Now add a third SqlDataSource control. This SqlDataSourcecontrol will be used to insert a new comment into the database. It will havefive parameters: four ControlParameters and one QueryStringParameter. The ControlParameterswill take their values from the four TextBoxes; the QueryStringParameter willget its value from the PostId query string parameter. Figure 7 shows the Commandand Parameter Editor dialog box for this SqlDataSource control. Figure 8 showsthe markup for this SqlDataSource control.

Figure 7: The Command and Parameter Editordialog box.

ConnectionString="<%$ConnectionStrings:ConnectionString %>" InsertCommand="INSERT INTO [Comments] ([PostId], Build Your Own Blog: Part III, [Message], [PostedBy], [Url]) VALUES (@PostId, @Title, @Message, @PostedBy, @Url)" > QueryStringField="id" Type="Int32" /> PropertyName="Text" Type="String" /> PropertyName="Text" Type="String" /> PropertyName="Text" Type="String" /> PropertyName="Text" Type="String" />

Figure 8: Markupof SqlDataSource control inserting the new comment.

We are now ready to see the ShowPost.aspx in action. Runthe application, select a post from Default.aspx, and you should see something similarto that shown in Figure 9.

Figure 9: Sample run ofShowPost.aspx.

Displaying Archives

Not all the posts can be displayed on the blog at onetime. We ll allow users to view archives of posts via another Web form named Archives.aspx.

The Web form basically displays a Calendar control and aGridView. The user can select a single day, a week, or an entire month in thecalendar and the posts from the selected date range are displayed in the GridView.Selecting a post from the GridView navigates the user to ShowPost.aspx, wherethe complete post, along with feedback, is displayed. Figure 10 showsArchives.aspx in design mode.

Figure 10: Archives.aspx in VS.NETdesigner.

Add a new Web form named Archives.aspx to your Web siteand design it as shown in Figure 10. Make sure to set the SelectionModeproperty of the Calendar control to DayWeekMonth. This will ensure that theuser can select a day, a week, or a month. Drag and drop a GridView control andadd one HyperLink field to it. This field will point to ShowPost.aspx and willcarry the post ID in the query string. Figure 11 shows the markup of theGridView.

AllowPaging="True" AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"ForeColor="#333333" GridLines="None" Width="100%"> ForeColor="White" /> DataNavigateUrlFormatString="~/showpost.aspx?id={0}" DataTextField="title" HeaderText="Archives for selected period" /> ForeColor="#333333" /> HorizontalAlign="Center" /> ForeColor="White" /> ForeColor="#284775" />

Figure 11: Markupof the GridView showing the archives.

Drag and drop a SqlDataSource control and configure it toselect all the records from the Posts table between the date range specified inthe Calendar control. Figure 12 shows the Command and Parameter Editor dialogbox of the SqlDataSource control.

Figure 12: The Command and ParameterEditor dialog box.

Note that we ve added two parameters, @stDt and @EndDt. Wepopulate values of these parameters in the Click event of the Show Archivesbutton. Figure 13 shows the code that goes inside the Click event of the ShowArchives button.

Protected Sub Button1_Click(ByVal sender As Object,

ByVal e As System.EventArgs) Handles Button1.Click

If Calendar1.SelectedDates.Count > 0 Then

SqlDataSource1.SelectParameters("stdt").DefaultValue =

Calendar1.SelectedDates(0)

SqlDataSource1.SelectParameters("enddt").DefaultValue =Calendar1.SelectedDates(Calendar1.SelectedDates.Count - 1)

Else

SqlDataSource1.SelectParameters("stdt").DefaultValue =

Calendar1.SelectedDate

SqlDataSource1.SelectParameters("enddt").DefaultValue =

Calendar1.SelectedDate

End If

GridView1.DataBind()

End Sub

Figure 13: The Clickevent of the Show Archives button.

Here, we first check whether the user has selected asingle date or a date range (week or month) by observing the SelectedDatescollection. If the SelectedDates collection contains more than one item, wegrab the first and last date and assign it to the StDt and EndDt parameters,respectively, of the SelectParameters collection. If the user has selected onlya single date, both of these parameters will take the value of the selecteddate. After we set the parameter values, we call the DataBind method of theGridView so the matching records will be displayed. Figure 14 shows a samplerun of Archives.aspx.

Figure 14: Sample run ofArchives.aspx.

Securing Administrative Pages

We have all the administrative pages in a folder calledAdminPages. However, that folder is not yet secured. To secure these pages, weimplement forms-based security. Open the web.config file from the root of your Website and add the following markup:

Here, we set the authentication mode to Forms and allowaccess to all the users. Now, add a new web.config file to the AdminPagesfolder and add the following markup:

Here, we deny access to anonymous users by adding the tag. This will ensure that only authenticated users are accessing the pages in theAdminPages folder.

Next, add a new Web form called Login.aspx. ASP.NET willautomatically navigate the user to this Web form if they try to access any pagefrom the AdminPages folder without signing in to the system.

Drag and drop a Login control and a Create User Wizardcontrol. The Login control will allow you to sign in to the system. The CreateUser Wizard control allows you to create new user accounts. Note that thiscontrol is required only for creating the administrative account. You shouldremove this control before deploying the application on the Web server so thatother users cannot create any accounts. Figure 15 shows Login.aspx in designmode.

Figure 15: Login.aspx in VS.NETdesigner.

Generating RSS Feeds

RSS is a standard way to share your Web site content withothers. RSS stands for Really Simple Syndication. RSS is nothing but astandardized XML markup that describes the content you want to share. BecauseRSS is a widely accepted format, your content immediately becomes ready to beconsumed by others. Figure 16 shows a sample RSS markup.

 www.dotnetbips.com

 DotNetBips.comLatest Articles

 Copyright (C)DotNetBips.com. All rights reserved.

 www.dotnetbips.comRSS Generator

 http://www.dotnetbips.com/displayarticle.aspx?id=239

 Descriptionhere

 Sun, 25 Jan 2004 12:00:00 AM GMT

Figure 16: SampleRSS markup.

Let s look at each markup tag closely: