Your First Tiered ASP.Net Web Application (Part 1)

Intro: This is the first article of a multipart series that will walk you through setting up a typical merchant storefront website.  It is intended to give a very quick walkthrough using Visual Studio.Net and demonstrate how quickly a three tiered web application can be created.  The first installment gives an overview of the project and how to create a simple data tier of the web application.

For years, I have been an OOP programmer stuck in a scripting language programmers body.  With Microsofts latest rebirth of ASP as ASP.Net, I can finally get back to my roots and show off my skills as an OOP web developer.  It is for this reason; I am thrilled to share some basic ASP.Net skills through a series of walkthroughs to setup a basic three-tiered web application that can be tailored for your needs. 

This is the first article of a multipart series that will walk you through setting up a typical merchant storefront website.  Although I recommend Visual Studio.Net highly, it is not necessary to complete the exercises   The source code will be provided and can written in notepad and compiled using the (FREE!) .Net Framework SDK. 

(http://msdn.microsoft.com/downloads/default.asp?url=/downloads/sample.asp?url=/msdn-files/027/001/829/msdncompositedoc.xml)  Screenshots and instructions will be mainly for VS.Net developers, however.

We will be creating a web storefront for an imaginary childrens clothing wholesaler, called Mom and Pops Children Wholesale.  Some of the main features to be included will be: a catalog of their inventory, a search engine, a user login system, and a web service to which retailers can check inventory and orders.  Mom and Pops Children Wholesale is a small operation with a low budget but high growth expectations.  For that reason, we will be using an Access database (and OleDb) which can be scaled to SQL later.

First, let us define a database structure.  The starting point can be downloaded here (Right click and Save)
(http://www.msd2d.com/pub/MomAndPop.mdb).  You can see that the database is fairly simple, composing of three tables initially.  Users contains registration data from clients.  Product contains information about products, such as product id, title, and descriptions.  POTW is a table containing product id numbers that can JOINed with a SQL statement with the product table to return a list of the Products of the Week.

Now that we have a database structure to start with, fire up Visual Studio.Net.  Create a new C# ASP.NET Web Application project, named 'MomAndPop'.  Create a new folder called 'data' under the root, and drag and drop your Access database there.  You may also need to edit the read-write permissions in IIS to allow this file to be modified.  This can be done in [Internet Information Services] under [Administrative Tools] in your [Control Panel] if you have IIS.



(Fig 1: New Project)


Open up the Server Explorer panel, and right click on [Data Connections] and click [Add connection...].  Select the [Provider] tab, and from the listbox, select [Microsoft Jet 4.0 OLE DB Provider].  Go back to the [Connection] tab. Type or browse for the server path of your MomAndPop.mdb file.  (It should be drive:\Inetpub\wwwroot\MomAndPop\data\MomAndPop.mdb) You should now see the new data connection in your [Server Exporer].  You can expand it to see the tables, views, and stored procedures.

Now turn your attention to the [Solution Explorer].  From this panel, you can see your solution composing of several projects and the files or classes associated with them.  Right click on the text at the top of the tree, [Solution 'MomAndPop' (1 project)], and [Add] a [New project].  This time you will create a C# [Class Library] named 'Common'.  Repeat this and create two more C# class libraries named 'BusinessRules' and 'DataAccess'.



(Fig 2: Solution Explorer)


We will now create our datasets to work with our data.  This is extremely simple with Visual Studio.Net and requires no coding.  Open your server explorer and solution explorer.  (Hint: Click the thumbtack in the upper right hand corner to  have the panel dock to VS.Net)  Expand the tree in the [Server Explorer] until the table names are visible for your Access db.  Right click the 'Common' project in your [Solution Explorer] and [Add New Item...].  Create a DataSet named 'UserDataset'.  Now for the fun part, drag the table named 'Users' from the [Server Explorer] to the work area where your newly created dataset is open (the yellow area).  Voila! Your dataset now contains the same structure as your Access db and can be filled with a data adapter or data reader (We will get to this soon).  Repeat this and create a 'POTWDataset' and a 'ProductDataset'.

Up to this point, we have not written a single line of code, and we're not quite ready to do so yet!  Right click on the 'DataAccess' project in your [Solution Explorer] and add a new item similar to how you added a dataset earlier.  This time create a C# [Component Class] named 'UserCommand'.  You will see it open in your workspace.  Click the [Toolbox] Panel (usually next to the [Server Explorer]).  This toolbox contains your basic components that are appropriate to the type of file (dataset, webform, component, etc...) you are working.  For a component class, you should see under the components section, [OleDbDataAdapter].  Drag this to the work area of your newly created 'UserCommand' component class.  A wizard will pop up.  Select your Access/JET connection to your database.  Since this is an Access db, only one Query type will be available [Use SQL Statements].  If we were using a MSSQL database, the other options would be available.  Click [Next] to see the [Generate the SQL Statements] dialog box. Click [Query Builder] to see yet another wizard pop up.  Select the Users table.  You can now see the table added to your query.  From this view, you can finish typing the SQL statement, run tests of your queries, or give additional criteria.  For now, just click [* (All Columns)] and click [OK].  Click [Finish], and we're done.  In your work area, you can see an OleDbDataAdapter along with an OleDbConnection that VS.Net has generated for us.  Right click the work area or the 'UserCommand' file in the [Solution Explorer] and select [View Code].  From here, you can see the underlying code VS.Net has generated in the 'UserCommand' class.  The DataAdapter generates all the functions to opens connections and execute sql for us to manipulate the server-side data later.  Click the [Save All] icon on the top toolbar (5th icon of the the multiple disks).

This week, we have created most of the data tier of our web application without writing a single line of code.  This is intended to be a very simple and quick overview of ASP.Net and VS.Net to give you a glimpse of VS.Net's power and intuitiveness.  Next week, we will tweak some of the code and add our own functions to the generated classes and start on the business logic tier.  I will explain more how our pieces will fit together, as well, as how the .Net framework interacts.  Look forward to some diagrams and flowcharts of how this fits together next week, as well.  In the coming weeks after our foundation is built, we will start focusing more on ASP.NET, security, and databinding.

Questions? Comments? Gripes?  I would love to hear from you.  [email protected]

Click Here for Part 2.

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish