Chapter 28 Use ASP.net development server to test web applications Use a web browser to request documents from a webserver Expecute an asp.net web application If you don’t have visual web developer you can download it from

Chapter 28 Instead of windows application we will now develop web application We will develop a bookstore application –The first page displays a list of books –The user selects the book and clicks the button –The second page retrieves the information about the book from the database and displays.

Chapter 28 Multi-Tier application (or n-Tier apps) –Divide functionality into separate tiers –Maybe on the same or different computers –Shields one layer from the other –Creates robust applications

Chapter 28 A three tier application –The architecture on this slide is a three tier application Information Tier or Data Tier or Bottom tier is the database server Middle Tier or business logic tier controls interaction between webbrowser and database Client tier provides the user interface.

Chapter 28 Webserver: Specialized software that responds to the requests of the clients like web browser. We will use visual web developer 2005 express edition. This also comes with the asp.net development server that can be used to test web apps.

Chapter 29 Lets develop a three tier application now Start the Visual Web Developer File  create a new website  asp.Net website  In location, select fileSystem  save it in BookStore folder  select visual basic in the language  click ok Right now you see the web form designer. Click design button in the lower left corner of the web.

Chapter 29 Rename the default.aspx to books.aspx In the properties box change the name of the title page to Books List Change the color of the apx page by changing the bgColor in properties to light blue Add a label web control… you will have to drag and drop this.

Chapter 29 Rename the label to availableBooks by changing the IDProperty. Change the text of the label to Available Books Change font to Tahoma, size to XX-Large, height of control to 42px and width to 221px Set absolute positioning of controls so that you can drag the controls on the form

Chapter 29 Tools  Options  Show all settings  HTML Designer  CCSPositioning  Select change positioning to …  absolutely positioned To select the exact position of the label, select format > Style … This brings up site builder dialog.  Select position  select 16 from the top and 208 from the left

Chapter 29 Add horizontal rule control below available books. (This is available under HTML) Rename the id to booksHorizontalRule Change the position by altering the style property. Top:80, Left: 8, Height: 4, Width:100%

Chapter 29 Add another label  change id to instructionsLabel  change text to, “Select a book and click button to view details” Add a list box and rename to bookTitlesListBox Add a button and rename to informationButton and text to view information.

Chapter 29 Add a RequiredFieldValidator. This ensures that the book is selected before the button is pressed. Rename to bookRequiredFieldValidator In the controlToValidate property select the bookTitlesListBox Change the error message to “Please select a book first”  Save all

Chapter 29 Design a new BookInformation.aspx page Website  Add New Item  Web Form  Rename to BookInformation.aspx  Check the place code in a separate file. Change the background color to blue Add a label which will display the book title. Since we do not know the book title yet, clear the text and rename the label to bookTitleLabel.

Chapter 29 Change the font size to x-large and set the foreColor (color of text) to blue Change position in the style menu (right click to get the menu) to H:41, W:700, T:15, L:20 Create a horizontalRule and rename to informationHorizontalRule T:64, L:0, W:100%

Chapter 29 Add another label: authorsLabel, change font size to large, Clear the text, H:34, W:700, T:82, L:20 Add image control: bookImage, Set borderStyle to Outset and BorderWidth to 5. These can be found in the properties control box. Set T:122 and L:20. Leave the height and width unchanged so that the box can adjust to the size of the image. Add a button: Text: BookList, ID:bookListButton, W:80, T:267, L:270

Chapter 29 Add detailsView control (This is available in the dataGroup) –ID: BookDetailsView –BorderStyle: Outset –BorderWidth: 5 –Gridlines:Both –W:220, T:127, L:200 The information right now is unknown and will be displayed later. Save the application.

Chapter 29: Testing Set Books.aspx as the start page Start debugging. If debugging is not enabled, then enable it. Check if the button is working

Chapter 30: Writing the code Information Tier or Database Pseudocode –When books page is requested, retrieve the book titles from the database and display in list box –When user selects book and button is clicked store selected book in the variable and redirect the user to bookinformation webpage –When bookinformation webpage is requested, retrieve the details of the book and display.

Chapter 30 Existing database (Bookstore.mdf) will be used. It has eight fields: –ProductID –Title –Authors –Copyright –Edition –ISBN# –CoverArt –Description

Chapter 30 Add the bookStore database to the application. To do this, in the solutions explorer, under App_Data, right click and click addExistingItem and add bookstore.mdf. Now your connection is active. Add the dataSet: Website  From template select dataset  rename to BookDataSet.xsd  select yes to place dataset in App_Code Folder.

Chapter 30 Table adapter wizard opens. TableAdapter extracts information from the database and returns to application. Click next. Accept default for the connection string Next we select the method (sql) that is used to query the database. (hit next). Click the queryBuilder. Add the products table  Select all products and click ok. Finally click finish.

Chapter 30 Notice the Filter statement is missing so the query will give return the entire product table. This is good to populate the listBox. To populate the details view add another query. In the dataSetDesigner right click on productsTableAdapter  Add Query  Select which returns rows  Query Builder  uncheck (Title, authors, coverArt)

Chapter 30 In the table below, uncheck the output field associated with the productID and in the filter add Rename to fillbyProductID and getDataByProductID. Click Finish and OK to the popup. Now to connect the database queries with the webpage.

Chapter 31 Double click on books.aspx.vb to show the books.aspx code-behind file. This class includes event handlers, initialization code, methods, and other supporting codes. Change the default name of the class from _default to books Partial Class Books Inherits System.web.UI.Page End Class

Chapter 31 This class inherits from the page class. The page class defines the basic functionality for the aspx page as form class defines the functionality for a windows form. In the webCode window of books.aspx change the first line from Inherits=“_default” to Inherits=“Books”

Chapter 31 Now define the information button event handler Session("ProductID") = bookTitlesListBox.SelectedItem.Value Response.Redirect("bookinformation.aspx") Session: Since values are not maintained across aspx pages, session allows sharing values among aspx pages. Session allows information to be maintained across BookStoreApplication.

Chapter 31 To populate the listBox, the data is bound using a businessObject like TableAdapter. Right click in the list box and click “show smart tag” or click on the little arrow Select chose data source  from drop down select new dataSource. Select object and change id to bookObjectDataSource

Chapter 31 In the next screen select booksDataSetTableAdapters.ProductsTabl eAdapter Hit Next and select the getData() returns productsDataTable (Because we need the full table on firstPage). On the next page select Title in the display box and productID in the value box.

Chapter 31 Add images to the bookstore folder. You can get these images from the completed example Now coding the BookInformation Pages code-behind file. Make sure the class name is bookInformation Insert the page load event handler.

Chapter 31 From pageEvents select load event Create a productsDataTable object to hold the bookstore database information. 'creates productsAdapter of type ProductsTableAdapter Dim productsAdapter As New BooksDataSetTableAdapters.ProductsTableAdapter() 'Create data table to store the values in the database Dim productsTable As BooksDataSet.ProductsDataTable = productsAdapter.GetData() 'subtract one from the productid of the selected book to find 'the row number of the selected book in table (listBox starts at 0 table at 1) Dim rowNumber As Integer = Convert.ToInt32(Session("ProductID")) - 1 bookTitleLabel.Text = productsTable(rowNumber).Title authorsLabel.Text = productsTable(rowNumber).Authors bookImage.ImageUrl = productsTable(rowNumber).Coverart

Chapter 31 Create the book list event handler Response.Redirect("books.aspx") Now finally only one thing is remaining. Populate the DetailsViewControl No coding required here. On the small arrow  chooseDataSource  NewDataSource  Object  rename to information object

Chapter 31 Select getDatabyProductID In parameter source select session In sessionField Type productID and finish Click edit fields and remove productID, Authors, title, and coverArt. Finish and Finish