Appointment Booking System
1
ItemDataBound
2
ItemDataBound
3
ItemDataBound
Figure 10-20
The outer Repeater, called repBookingObjects, has a single <ItemTemplate>. This template defines an <h1> tag that displays the booking object’s title. You also see another Repeater that displays the appointments that belong to the booking object that is displayed in the <ItemTemplate>. To see how this control gets its data, you need to look at the LoadData method that is called whenever a user selects a date from the calendar that is placed on the page:
Private Sub LoadData()
Dim dsAppointments As DataSet
If Not calAppointmentDate.SelectedDate = DateTime.MinValue Then dsAppointments = _
AppointmentManager.GetAppointmentList(calAppointmentDate.SelectedDate)
repBookingObjects.DataSource = _ dsAppointments.Tables(“BookingObject”).DefaultView
Chapter 10
repBookingObjects.DataBind()
If repBookingObjects.Items.Count = 0 Then lblNoRecords.Visible = True
End If End If
End Sub
If the calendar called calAppointmentDate has a valid date, a call is made to AppointmentManager
.GetAppointmentList, which returns a DataSet with two DataTables. Both the data access code for the GetAppointmentList method and the stored procedure follow a pattern similar to the code for the TimeSheet control, so it’s not repeated here. What’s important is that you recall that the DataSet holds two DataTables: one for the booking objects and one for the appointments. The two are related to each other with a DataRelation. It’s this relation again that is used to display the child records in the nested Repeater.
The DataSource for the outer Repeater uses the first DataTable with the BookingObjects. When DataBind is called, the Repeater creates an item (based on the <ItemTemplate>) for each row (a DataRowView to be precise) in the DataTable’s DefaultView. The DefaultView exposes the underlying data to the control, similar to a view in SQL Server. When the item is added to the Repeater, the control fires its ItemDataBound event. Inside that event, you can retrieve the appointments for the booking object that has just been added and add them to the nested Repeater:
Protected Sub repBookingObjects_ItemDataBound(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) _ Handles repBookingObjects.ItemDataBound
Dim item As RepeaterItem = e.Item
If item.ItemType = ListItemType.Item Or _ item.ItemType = ListItemType.AlternatingItem Then
Dim repAppointments As Repeater = item.FindControl(“repAppointments”) Dim myDataRowView As DataRowView = CType(item.DataItem, DataRowView) repAppointments.DataSource = _
myDataRowView.CreateChildView(“BookingObjectAppointment”)
repAppointments.DataBind() End If
End Sub
This code first checks whether ItemDataBound was called for an Item or an AlternatingItem. This is necessary because the same event is also called for other ItemTypes, such as the Header and the Footer. Then a reference to the nested Repeater is retrieved from the item object using FindControl, which is then stored in the variable repAppointments. The next line of code casts the DataItem (the underlying data used to build up the Repeater item) to a DataRowView because that is the actual object type of the DataItem. The DataRowView then has a convenient method called CreateChildView that accepts the name of a DataRelation as an argument. This method looks into the DataSet and retrieves all appointments that are related to the current booking object. The return value of this method can then be set as the DataSource for the nested Repeater. The final step is to call DataBind, which causes the nested Repeater to display all the appointments.
Appointment Booking System
When you call DataBind on the nested Repeater it starts adding rows based on the data to which it is bound. For each row it adds, it also fires its own ItemDataBound event, allowing you to do the same trick over again. This way you can have multiple nested Repeaters to display detailed information.
In addition to the name of the user that made the appointment and the date and time, the nested Repeater also displays a link to AppointmentDetails.aspx for each appointment. This page displays the full details of the appointment, including the user’s e-mail address and the comments. The code for this page uses the same techniques you have seen in other chapters, so it isn’t repeated here.
With the Appointments page done, you have a complete working Appointment Booking System. You can set the name of your booking objects and manage the actual items in the Management section. Users can sign up for an account, then check the availability of your booking objects and make an appointment. Once the appointment has been made, you can access its details in the Management section again.
With the entire design and code implementation behind you, you hopefully can’t wait to get the application installed and see for yourself how it works. The next section guides you through the process of setting up the application.
Setting up the Appointment Booking System
Because the Appointment Booking System has no dependencies other than the SQL Server database, setting it up is pretty easy. Once again, you can choose between an automated and a manual install. The automated installer process allows you to set up the application to run under IIS. This is useful if you want to deploy the system on your local intranet or Internet servers. If you want to look at the code in more detail and play around with it, you should choose the manual installation process.
Using the Installer
To install the Appointment Booking System with the supplied installer, open the folder Chapter 10 - Appointment Booking\Installer on the CD-ROM or from the code download and double-click setup.exe. Keep clicking Next until you get a confirmation that the application has been installed correctly and then click Close.
If you have a previous version of the .NET Framework installed on your machine, refer to Chapter 5 for instructions about configuring IIS to use version 2.0 of the framework.
Manual Installation
You can also manually install the Appointment Booking System so you can open the application with Visual Web Developer. To install manually, locate the folder Chapter 10 - Appointment Booking on the CD-ROM or in the code download and then open the Source folder. In that folder you’ll find a zip file called Chapter 10 - Appointment Booking.zip. Extract the contents of this file to a location on your hard drive; for example, C:\Inetpub\wwwroot\. It’s important that the files are extracted with the original folder structure. Depending on your extracting utility, this option is called something like Use Folder Names or Extract Pathnames. You should end up with a folder like C:\Inetpub\wwwroot\Appointment Booking that contains the files and other folders for the application.
Chapter 10
Configuring the Application
No matter which installation method you chose, you may need to configure the Web.config so it uses your installation of SQL Server. Open Web.config, located in the root of your installation folder, and locate the <connectionStrings> node. The SQL server that is used in the connection string AppointmentBooking is called (local)\SqlExpress, which is the default instance name for a SQL Server Express installation. If you installed SQL Server with a different name or on a different server, be sure to adjust the connection string.
If you’re using the full version of SQL Server, you can attach the supplied database as ASPNETDB through the SQL Server Management Studio application. Then you should modify the connection string again so it looks similar to this:
“Data Source=YourSqlServer;Initial Catalog=ASPNETDB;Integrated Security=SSPI;”
It’s also important that you grant the necessary permissions to the ASP.NET worker process to access this database. On a default installation of ASP.NET, this account is called ASPNET on Windows 2000 and Windows XP, whereas it is called Network Service on Windows Server 2003. If you don’t allow anonymous access to the web site, but use Windows Integrated Security instead, be sure to grant at least Read and Write permissions to the accounts (through group membership, for example) that need to access the Appointment Booking System.
Now that you know all about the Appointment Booking System, browse to this book’s download page at www.wrox.com for a walkthrough of possible modifications to the system.
Summar y
In this chapter you have seen how to design and create an online appointment booking system. You saw how the application can be configured dynamically to change the name of the so-called booking objects into a user-friendly description. Users of the application can sign up for an account, check availability of their favorite booking object, and make an appointment. Authorized users can manage the booking objects in the system and view the appointments that have been entered in the system.
You then got a good look at the design of the system. You saw the classes that make up the business and data access layer, and you saw the design of the database and its stored procedures.
The examination of the code showed you how it all fits together. You were introduced to the versatile Wizard control and saw how to dynamically create controls in the code-behind of a user control to create a unique user interface that cannot be created with the available ASP.NET server controls alone. You learned how to create stored procedures that return multiple result sets to create DataSets with related tables. You also saw how to bind these DataSets to a nested Repeater control.
Toward the end of the chapter the installation procedure for the Appointment Booking System was explained. The supplied installer allows you to deploy the application on a server with IIS installed, and the manual procedure allows you to examine and play with the code from within Visual Web Developer Express edition.
11
Greeting Cards
Most of the chapters in this book so far had a strong focus on many of the new and exciting ASP.NET 2.0 server controls. In addition to controls like the Wizard, the MultiView, and the new Navigation and Login controls, you also saw how to work with data-centric controls like the
SqlDataSource and the ObjectDataSource.
Because these controls are so easy to use, allowing you to build applications in no time using drag- and-drop, you may almost forget that ASP.NET 2.0 largely depends on the underlying .NET 2.0 Framework. This framework not only enables ASP.NET pages, but it also allows you to create Windows Forms application, Windows services, command-line tools, and many other types of applications. In addition to direct support for these applications, the .NET Framework also has a lot of technologies that are not directly tied to one of the application types, but that can be used in those applications.
One of those enabling technologies is called GDI+, which stands for Graphics Device Interface. GDI+ and its predecessor GDI have been around for a long time in various flavors of Microsoft Windows and provide the OS with vector graphics, imaging, and typography capabilities. With the advent of the .NET Framework version 1.0, the capabilities of GDI+ became available as managed code within the .NET Framework. This makes it very easy to create complex drawings and images in .NET.
Although Visual Web Developer Express edition is limited in a number of ways compared to its bigger brothers Visual Studio Standard, Professional, and Team System editions, you still have full access to the entire feature set of the .NET Framework. This also means you have full access to the huge GDI+ library that is part of the .NET Framework.
In this chapter you see how to use some techniques for working with images that are used frequently in many ASP.NET web sites. You see how to handle and save an uploaded file, rotate or flip it, crop it, and add text to the image on the fly.
This chapter uses a Greeting Card application to showcase all these techniques. However, because of the design of the application, you should find it very easy to use and reuse existing parts of this application in one of your own that serves a completely different purpose.
Chapter 11
To give you a feel for what can be accomplished with GDI+ in the .NET Framework, the next section guides you through creating your own greeting card. Once you’ve seen how to upload, alter, and e-mail an image, you see how the application is designed in the section “Design of the Greeting Cards Application.” After the design, you get a good look at the actual implementation in the section “Code and Code Explanation.” As usual, the chapter ends with instructions for installing the application.
Creating Your Own Greeting Card
If you’ve set up the application as per the instructions in the section “Setting up the Greeting Card Application” later in this chapter, you can start creating your own greeting card by browsing to http:// localhost/GreetingCards. The Greeting Card application allows you to upload one of your favorite images. You can then customize it by cropping and rotating it and by adding text to it. The final stage of the application allows you to send the customized picture by e-mail.
The first screen you see welcomes you to the site and invites you to click Start to create your own personal greeting card. On the next screen, you see a file dialog that allows you to select an image you can upload to the server. You can choose an image type like JPG, GIF, or PNG. It doesn’t really matter how large the image is because it’s scaled to the maximum dimensions of 640×480 pixels automatically.
Once the image has been uploaded, the Rotate or Flip page appears, shown in Figure 11-1, with the scaled version of your image.
Figure 11-1
Greeting Cards
On this page, you can use the controls on the right to rotate or flip the image. You can use the dropdown to try out the various rotate and flip options. Once the image looks good, click the Next button. You are presented with the Crop Image screen (see Figure 11-2), which allows you to select a portion of the image.
If you want the entire image to be used in the greeting card, click Entire Image; otherwise use the two sets of four navigation buttons on the right to move the crop area (the black rectangle in Figure 11-2) over the image and to resize the area. You can use the pixels drop-down list in each of the fieldsets to control the number of pixels the crop area is moved or resized. Once you have positioned the crop area at the correct location, click Preview Image and the image is cropped to the part that falls within the selection area. If you’re not satisfied with the results and want to make adjustments, click Undo and set a new crop area. Otherwise, click the Finalize Image button.
The next step is to add text to the image. Click the image at the location where you want the text to appear. Once you’ve clicked the image, the page refreshes and now shows a few controls visible in Figure 11-3 that allow you to enter text and determine that text’s font, color, and size. Click Add Text to add the text on the image. If you want to move around the text on the image, simply click its new location (the location where you click determines the upper-left corner of an imaginary box around the text) and the text is moved to that spot.
Figure 11-2
Figure 11-3
If the text doesn’t fit, or its color doesn’t look good on the background image, choose a new size, font, or color from the controls on the right side of the screen. Use the Add Text button again to update the image with the new font settings. If you want to start all over with the image from the previous step, click the Undo button.
If you’re happy with the results, click Next once more to go to the Send Mail page. Here you can enter your name, an e-mail address of the person you want to send the greeting card to, and a personal message to accompany the card. After you click the Send Mail button, the image and the personal message are e-mailed to the address you provided. Depicted in Figure 11-4, the image shows up as an embedded image in the mail message in the recipient’s e-mail program.
Now that you have seen the capabilities of the Greeting Card application, it’s time to look at its design to see what classes, methods, and properties are behind this functionality.
In the next section you see the design of the application; you see the four classes in the special App_Code folder and their methods. Once you have a good understanding of the important elements of the application, you see the actual implementation in the section “Code and Code Explanation.”
Greeting Cards
Figure 11-4
Design of the Greeting Cards Application
Unlike many of the applications you have seen in this book so far, the Greeting Cards application does not rely on or use a database. Although you could use a database to extend the application by storing user profiles or information about the cards that get sent, the current application does not need a reliable state storage. All the information the application needs is either saved as the actual image or stored in the page’s ViewState. This also means the application is not built around a three-tier architecture. You won’t find the familiar BusinessLogic and DataAccess folders in the App_Code folder of the site. Instead, you’ll find a separate folder called Toolkit with two files, visible in Figure 11-5. This folder contains code for the functionality to upload and resize images.
The name Toolkit is not completely arbitrarily chosen. Just as a regular toolkit, it contains all kinds of useful tools that you can easily deploy in multiple applications. These tools (the methods in the classes in the Toolkit) can perform complex operations while hiding the details of the complexity completely from you. The Toolkit has been designed in such a way that it is very easy to reuse the same code in other applications. All you need to do is copy the Toolkit folder to the App_Code folder of another application and you’re good to go.
If you own a copy of Visual Studio 2005 Standard, Professional, or Team System edition, you can even put this code into a Class Library project and compile it to a DLL file. You can then reference this DLL in your applications, including those you build with Visual Web Developer Express edition. A great advantage of a DLL file is that you’re reusing binary code, not the actual source file. This means that if you enhance the Toolkit or fix a bug, you don’t have to update all the individual files but only a single .DLL file instead.
Chapter 11
Figure 11-5
The other two files in the App_Code folder contain the application’s configuration class (AppConfiguration
.vb) and a class that derives from System.EventArgs, called FileHandlingEventArgs. Both these classes are discussed in detail later.
The classes that make up the Toolkit are discussed in the following section.
The Toolkit
If you look at the actions that the application is capable of performing, you’ll notice two distinct areas. The first deals with uploading files from the client’s computer to the web server. The behavior for this functionality has been put in the class UploadHandler. The second area deals with image processing; resizing, cropping, and so on. This is done by code in the Imaging class. To make these classes more accessible through IntelliSense and to avoid name collisions with existing classes with the same name, they have been put in the namespace Toolkit. You see more of this later.
The Imaging Class
The Imaging class is responsible for all the operations on images you saw at the beginning of this chapter, including resizing, rotating, flipping and cropping images, and adding text on top of an image. Figure 11-6 displays the class diagram with the methods of the Imaging class. When you take into account the overloaded versions of some methods, the Imaging class has 20 methods in total.
All of these methods are shared, which means they operate on the class rather than on an instance of that class. To stop calling code from creating useless instances of the Imaging class, its constructor (the New method) has been marked as Private. This is indicated by the little lock symbol in front of the New method in Figure 11-6.
