Introduction

Very few commercial Web sites utilize solely static content. Web sites that need to programmatically make decisions require an environment created with server-side code. This allows for a more complex Web site to be created if necessary. In this video, we will examine how the programming logic is built for interactive Web sites in Visual Studio 2005 and Dreamweaver 8.

Dreamweaver Section

Dreamweaver Version 8 allows you to create simple server-side code for a variety of technologies, including Microsoft ASP and ASP.NET, as well as Cold Fusion, JSP, and PHP. To get started, create a new Web page; in this case, we’ll call our page "EmployeesDW.htm." Then reference the Application panel and select the Server Behaviors tab. From here you are presented with the lists of tasks to complete in order to work with server-side solutions. First of all, the files you are working with must be inside a Dreamweaver site. If you have a set of files in a folder that you want mark as a Dreamweaver site, reference the Files panel and use the Manage Sites link. With the site now in place, you can modify a page to include server-side functionality by choosing a document type—in this case, an ASP.NET VB page will change the file extension of the page we’ve started to be an ASPX page, which is used by Microsoft’s ASP.NET technology. When working with server-side solutions, in order to perform testing, the solution must be deployed to a system that is capable of rendering the content. In this case, the local system has that capability so the defaults shown here will suffice. Before testing the solution, the DLL file to support these custom Dreamweaver specific controls needs to be deployed. This is done by selecting the Deploy link, which is also found in the Server Behaviors tab. Make sure that the right folder is referenced; in our case, it needs to be found under the sample Web site. The DLL itself should be placed under the Bin folder underneath that site. With these choices made, we can begin to add server behaviors by clicking the plus symbol (+) at the top of the panel. We can begin by adding a DataSet, and from the DataSet definition, defining a new connection. Once this is selected, we need to modify the connection string as appropriate. At this point, we can also test the connection if you’d like. Now I can choose a table and columns to present the data from such as the employees table in this case, and for columns, we’ll choose the first and last name and address. Notice that in addition to the DataSet code that was automatically put on the page, there is also a PageBind code. This performs a general page level data bind to make sure all controls that are expecting data will actually receive it. With these choices in place, let’s now present the information from our DataSet inside a DataGrid... by again using the plus (+) button at the top of the panel, we can add in a DataGrid and choose that its DataSource will be DataSet1. With this code in place, it is now time to save the ASPX file and preview the page in the browser of our choice. On this system, we can choose between the FireFox or Internet Explorer browsers. We see that the data connection was made and information from the database is now being presented. Although it is easy to create data-driven applications based on declarative code, Dreamweaver Version 8 does not offer ease of use features when extending this kind of solution to include additional functionality in "code beside" files such as those written in Visual Basic or C#. While these files can be created manually, only simple color-coding of keywords is provided by Dreamweaver.

Visual Studio 2005 Section

Visual Studio 2005 utilizes ASP.NET Web pages to generate the user interfaces in dynamic Web applications. An ASP.NET Web page presents information to the user in a browser and implements application logic through specialized server-side code which is most commonly written in Visual Basic or C#. To create a new Web form with the same capabilities as seen in the Dreamweaver sample, from the Context menu of the project, select "Add New Item..." and then select "Web Form." In this case, it will be called "EmployeesVS." With each form created in this way, note that the functionality is divided into two segments, the first being this user interface in this ASPX page; this describes the page content and structure. The second is the program logic that responds to the user interaction which is found in this .VB file. Developers familiar with tools like Visual Basic or Visual C++ will recognize the division between the user interface and the underlying program logic. The user interface portion in the ASPX file consists of mark-up language with HTML elements and ASP.NET server controls. This ASPX file works in tandem with additional logic created by the developer. For instance, you can add ASP.NET server controls such as this SqlDataSource. Referencing the Smart Tag of this control, you can select "Configure Data Source...," which allows you to establish a connection to a database. Choosing a server... log in credentials... and database name... Once you’ve configured a connection, its details can be saved in the Web.config file as a connection string. This is a very convenient place to hold this kind of data, which can also be encrypted to secure your database credentials.

In the next part of the Wizard, you can select a specific view or table to pull data from. To make sure you’re getting the right data back, you can use the Test Query option. With the DataSource in place, you can then use a GridView to display the data. From the design surface, the Smart Tag allows you to easy configure the properties of the control. First, specify a DataSource from the dropdown, which in this case will be SqlDataSouce, which we added previously... and then you can configure a visual format, selecting how you want the data to appear from the Auto Format option, such as this option called "Colorful." With these simple steps, you can now view the created page by clicking on the "Start Debugging" option from the Toolbar. This initial configuration was quite simple. Additional logic can also be easily simplified in the associated VB file, which his also called the "code beside" file for the Web Form. From here you can build the server-side logic that interacts with the controls on the page. Using the split page view of Visual Studio, we can see both the ASPX Web form and the Visual Basic code beside file at the same time. The code beside files in ASP.NET Version 2 take advantage of a new language feature known as "Partial Classes." Partial Classes allow the ASPX and code beside files to each contribute to a single class. In our example, this is called "EmployeesVS." This means that both the ASPX Web form and the code beside file have access to the same controls. Since we added the GridView to the ASPX Web form, we can see here in Visual Basic Intellisense that the GridView is available for programmatic access. Programming logic that is placed in the code beside file has to be compiled before it is used. This is easily done with the Build process from Visual Studio. Compiled code such as found in this EmployeesVS Class has several benefits. Compiled code is generally more stable since it is checked during compilation for syntax errors, type safety, and other possible problems. By catching these errors when the code is being compiled, you can avoid many common syntax errors. The logic in the code beside file is never sent to the browser, making it impossible to view from the browser’s view source option. Compiled code in the .NET environment can be built from source code written in different languages. For example, in addition to this ASP.NET Web form written in Visual Basic, you can add a source code file to the same project that is written in C# or J Sharp, so developers with varying backgrounds can work on the same project without having to learn a new language.

An alternative to pre-compiling your application is to use the ‘App_Code’ folder. ASP.NET automatically compiles any source code placed in the ‘App_Code’ folder the first time a user requests a resource from the Web site. This feature, known as dynamic compilation, allows you to copy portions of your application source code to the production Web server without requiring that you first build the application into an assembly. End users cannot request source code files from the ‘App_Code’ folder, keeping your logic secure. With coding features using Visual Studio you can easily create and enhance highly interactive Web sites such as Shopping Carts, Blogs, Content Management solutions, and more.

Conclusion

This concludes our introductory analysis regarding server-side code in Visual Studio 2005 and Dreamweaver 8. Additional features regarding database access will be described in the next video.