Web-based Application Development

using a MEDITECH Data Repository &

Microsoft Visual Web Developer 2005

Glen R. D’Abate

Acmeware, Inc.

www.acmeware.com

Course Agenda

Introduction & History

Course Overview and Objective

Web Developer Implementation and Interact

Development Environment (IDE)

Using Web Developer Data Bound Controls

Example Project – Downtime Patient

Registration using the Data Repository

Questions & Discussions

Acmeware / Data Repository

History

Instructor background

Acmeware, Inc.

Recent Acmeware Application

Development Strategies (Access, Visual

Basic, Visual C++, Visual InterDev)

Why Visual Web-Developer 2005

Course Format

PowerPoint Presentation to keep me on Track

Demonstrate Concepts using active session of Visual Web Developer 2005

Demonstrate a Downtime Registration Routine that was written using Visual Web Developer

Encourage Questions and Comments During the Training

Objective

Be able to rapidly develop and deploy web-based applications that make use of the DR

Make these applications look, feel, and act like professionally developed web-based products

Minimize the need to develop code that has to be supported

Use application data marts with data derived from the DR

Don’t Reinvent the Web-Wheel

Web-Application programming tools from

Microsoft have been iffy at best Front-Page has limitation building a robust interactive

environment and database manipulation

Visual InterDev (Visual Studio 6.0 was a bust)

Other Products exist (e.g., Cold Fusion)

but we’ve tried to stay all Microsoft

Visual Web-Developer Finally brings all

of the pieces together!

Helpful Prerequisites

Familiarity with MEDITECH HCIS

Familiarity with Data Repository (we are using MEDITECH’s but applies to MSM or TSG)

Knowledge of SQL Server or RDMS

Web design basics (HTML tags…)

Programming experience (C# or Visual Basic are ideal, but we won’t be doing much anyway)

Familiarity with Microsoft development environments

Object Oriented Programming (i.e., Attributes, Methods, Events)

DR / Web Form Application

Development Schematic

Visual Web

Developer on

“Development PC” Internet Information

Server “Web Server”

Data Repository

“Data Server” Client PC running

the web-based

application using

DR data

Section #1

Installing Visual Studio Web Developer 2005 Express Edition &

Reviewing its Interactive Development Environment

About Visual Web Developer

Express 2005

Microsoft's Words: Easy to Use Fun Easy to Learn

Location where Visual

Web Developer can be

downloaded

Installing Web Developer

Typical Microsoft

Application Installation

Wizard

MSDN Provides Product

Documentation

SQL Server 2005 Express

Provides a Location to Build

Databases – We will use the DR

on a SQL Server 2000 Platform

Put aside a solid

hour to download

and install software

You must register

software or you can

only use it for 30 days

Visual Studio 8, ASP.NET

2.0 and SQL Server 2005

appear to run fine along

side of SQL Server 2000,

Visual Studio 7, and

ASP.NET 1.1

Launching Web Developer

Visual Web Developer and

Microsoft SQL Server 2005 will

be added to the Startup menu

Default Start Page

Microsoft Related News

MRU List

Other

Resources

Creating a New Web Form App

From Toolbar Menu,

Select New Web Site

Name the Web

Site Project

Select Language – For This

Course It Hardly Matters buy

we will Choose C# (VB or J#)

New Web Site Dialog

Web Developer New Project

Toolbox

Error List Property

Solutions Explorer

Page Design View(s)

Toolbars

Menu Bar

Design Views

Available for a

Specific Page

Page Tabs

Visual Studio File Locations

Project

Control

Files

Project

Pages

Demonstration #1 – Setting Up

Empty Project & Reviewing IDE

Section #2

IDE Details & Our First Application

“MUSE IS GREAT”

In This Section

Take a brief look under the hood of ASP.NET 2.0 and Web Application Processing

Add a Label and Button objects to a Web Page and modify object properties

Discuss Debugging Web Applications

Take a more detailed look at the IDE focusing on where and how code is entered

Create our first interactive Web Application project

What Happens When We

Running a Web Application? A page “request” is made to the web server based on some

action (e.g., default page opening, button selected, drop-

down box changed, etc.)

A page response is “served” from the web-server

(development server or IIS) to the client’s browser

In the process of serving the page, the code we develop for

a web page is essentially converted into a “mini-application”

that runs from beginning to end within the client’s browser in

milliseconds (as opposed to a typical executable)

The mini-application is constructed as HTML code using: HTML code we have placed on the page Server side objects we’ve place on the page Event handlers that are responding to an action that caused the page request

(e.g., selected a button) State information about the Application or Session that is stored on the server or

passed with the Page request

Design View with Objects

Button Object

Label Object

Label

Properties

Web Pages

Start Debugging

Drag & Drop objects

from Toolbox to Design

View

Debugging a Web Application

Visual Web Developer Express includes a Development Web Server that runs on a local system (no need for IIS)

This development web-server is completely secure to outside world (i.e., network attack)

Web.config file

is required for

debugging

Development server can be seen in

notification area application icons

More on Debugging

Powerful debugging and

tracing capabilities beyond

the scope of this course

ASP.NET 2.0 Web Site

Administration Tool

Source View of Web Page

HTML tags and Active Server Page (ASP) server

control code for those who are familiar

Runtime Engine

used to translate

ASP.NET 2.0

Code to HTML

Everything in Design View is

represented in Source View code –

nothing is hidden

View of Web App in Browser

Development server can be

seen in address window

Page Objects

The Web Page is “Posted” to the client

initially. User action in the Web Page

(e.g., pressing a button) can result in a

“Post Back” of the current Page or

initiation of a new Page

HTML Code Behind Web App

HTML Code

Input type of “submit”

creates a Button

Button Text

Absolute

Positioning

Label Text

ASP.NET “State” Information kept in

__VIEWSTATE as a hidden object.

An example would be data already

entered in a textbox control.

Code Behind

Double Mouse-Click on Object

to Bring up “Code Behind”

“Code Behind” can exist in .aspx file

(traditional), or in a dependant

aspx.cs file as shown here

Code Behind is processed

based on an event and is

used to construct the Page

Response in original Page

or Post Back

Code Behind Revealed

Looks Like DHTML

Code for those familiar

Also looks like Access

Event Handlers

The using statement is

similar to “Import” in VB

and is used by Intellisense

and the compiler

Intellisense brings up

“Text” property for

infoLabel Label object

This is about the extent of

“programming” we will

perform in this course

Intellisense & Tool Tips

Property

C# syntax

requires “;”

Intellisense brings

objects as well as

object attributes

and methods

Mouse over brings

up tool tip with

valuable information

Demonstration #2 – “Muse Is

Great” Application

Section #3

More on Web Controls, Web

Formatting, & Adding User

Interface Validation

In This Section:

Load Several new Controls onto our

Web Page and Discuss Commonly used

Attributes and Methods

Use the Visual Studio Tools to Layout

our Page

Create a Mini Provider Dictionary Form

Add Data Validation Testing to Our Form

Add a new Web Page to Project

Select Web

Form Again

Name it

Again, We’ll

Select C#, But it

Hardly Matters

We Will Place the Code in

a Separate aspx.cs File

Many Types of File Templates are

Available. We Will Only Look at a Few

Provider Dictionary Controls

New Files

Our Provider Dictionary

Will Collect the

Following Information:

1. Provider Name,

Relative Versus Absolute Positioning

Layout Controls

Position Controls

Absolute Positioning Allows Object to

Be Placed Anywhere on Page

Formatting Objects on the Page

Format Controls

Left Aligned

Evenly

Spaced

Always Set

ID Property

Objects Added to

our Test Page

CheckBox Properties

Set Default Value

Name Object (New Convention Uses

Descriptive Name Followed By Object Type)

Drop Down Control Quick Tasks Button Allows Easy

Access to Attributes and Methods

DropDownList Objects use

ListItem Collections. This

Dialogue is Available to

Hardcode Values into the

ListItem Collection.

Enter a Default Value of

“-SELECT-” to Prompt

User to Make An Entry

Data Can be Entered Directly using Edit

Items, or Can Be Derived From a Data

Source (e.g. the Data Repository)

Return a

Numeric Value

Radio Buttons for Specialties

RadioButtonList Also Uses a

ListItem Collection

RadioButtonList by Default

Forms a Group So The System

Knows that When Any Radio

Button Is Toggled On, All Other

Items in the Group Should be

Toggled Off

Provider Dictionary So Far –

in the Browser

No Default Value Entered

-SELECT- Entry (0)

Defaults to Active As Defined

Our Page Doesn’t

Really Do Anything Yet!

Data Validation Controls –

Required Field Validation

Validation

Controls

Entry for

Provider Is

Required

Text Attribute Determines What

Displays In Validation Control

Select Control to Which The

Validation Control is Validating

Compare Validation Control

Compares Selection with

Default Value of “-SELECT-

” to be Certain Selection is

Made

Summary Validation Control

A Summary Validation

Control is Used to

Consolidate All Errors

in a Single Place on

The Page

A Summary Validation Control is Used by the

Error Text Attribute of other Validation

Controls to Determine the Error Message

Demonstration #3 – Form Controls

and Data Validation

Section #4

Web Application State and the

Persistence of Data

In This Section

Discuss the Page Objects and the Major

Component Objects that Comprise the

Page

Review PostBack And How Data Is

Automatically Passed From Page to Page

Review Three Mechanisms to Maintain

State Variables in Your Application

Page Object - Components

Request Object (Information about the request from the web-browser. Data in an address bar, browser type, data in http://get, etc.)

Response & Form Object (Information sent back out to the web page in response to the users request. (e.g. Response.Write, Response.Redirect).

ViewState Object (Keeps a Page’s state values as it is posted back from the server

Application Object (Information about the application as a whole)

Session Object (Information about activity from a specific user at a specific time on our web site)

Request Object

Information in the Request object can be

seen by entering it in TextBoxes and

displaying this information on a Page

Request Object attributes can be used to

determine what action to take in Event

handler code. An application could be

written to function differently for a “super

user” and a regular user using the

Request object

Response Object

The Response Object is

used generally to

invoke its methods and

perform some response

action to a users event

input action

Redirect it is a

PostBack to this Page

Objects on Response.aspx

example Page First Post of Response

Page in browser

Page Load

Event

Objects Maintaining State

This Event Handler Explains How

Label Gets Value

What Explains Why the TextBoxes Still

Have Their Values After PostBack

__ViewState

__ViewState Keeps state

information on Page objects.

This can be used to maintain

continuity in the application __ViewState is also be used by

the server to identify changes in

values and trigger events!

__ViewState coded value

encapsulating controls & values

Testing Variable State App

We will create this application

four times over the next few

slides, each time demonstrating

how we maintain state from Page

to Page in our application

When UP is selected, counter

increments. When DOWN is

selected, counter decrements.

Creating ViewState Variables

Code behind of ViewState application with Three

events to perform actions based on the event

During page initialization (i.e., when

not PostBack, create the __ViewState

variable called “Counter” and set it to

a value of zero

Increment Counter variable

Decrement Counter variable

Counter Application with ViewState

The hidden __VIEWSTATE

object on the web page contains

information about the controls

and their values (including the

counter) so that when the Page

is Posted Back,

VIEWSTATE encrypted value has the state information of the current page

which is compared with the objects during a Page Request to determine if

something has changed (e.g. button pressed signaling a button select event)

Application & Session Variables

Application and Session Variables are

kept on the Web Server in memory

There is a special file named

Global.aspx where Application and

Session variables can be initialized

Application and Session variables are

“Added” to the Application and Session

objects using the .Add() method and

retrieved using the .Get() method

Creating Session Variable

Looks & Functions the same as

the __VIEWSTATE solution, but

rather than passing the values

back and forth between Pages,

the Session Counter value is

maintained on the Web Server

Session Object Initialized

when Page is first posted

Session Variable Counter

Counter will be set to zero for each user session

on this web application and incremented or

decremented based on the button selected

Global Application Class

The Global Application Class

file gives us access to initialize

and clean up Session or

Application variables

Global.aspx Events Five Global events

where code can be

entered

Session Start & End

Application Start & End

Application Error Handling

Application Variables

Application State

transcends Sessions so

multiple IE instances will

impact each other’s state

Problems with ViewState and

Global.aspx Variables

Not Strongly Typed

Not Available in Intellisense

Data is stored in Web Page for

ViewState…can make big web pages that

are slow when served over the Internet

Application and Session variables are

stored in memory, which can be a problem

if there are lots of Web application users

Profile Object – New in ASP 2.0

Profile Objects solve the problems with

__VIEWSTATE and Session/Application

variables

Uses Web.config file to define the Profile

Object and any associated variables

(properties)

Profile variables are typed, are available

to intellisense, and can be designated to

a data structure

Enabling Profile Object in

Web.config File Code added to Web.config file.

Currently this must be hand coded

but I suspect this will change

Using the Profile Variables

Profile object is accessible

through Intellisense as is

the “ProfileCounter”

variable we create

Note “ProfileCounter” was

typed as an integer,

therefore it can be treated

as an integer in code

without any conversion

Demonstration #4 – Web Application

State and Persistence of Data

Section #5

Using Data Sources

In This Section:

Another Look at the Drop Down List Control, this

time using a DR Table to Populate Values

Add a SqlDataSource to the Project that is used by

our Drop Down Control

Create a Connection String that Gets stored in the

Web.config file and is available to any DataSource

Add SQL filter logic to our SqlDataSource and

discuss the use of Tables, SQL Text, and Stored

Procedures and the Pros and Cons of each.

DropDownList Quick Tasks Options

DropDownList can be DataBound to specific

values that populate the list box. Note, this is

different than being DataBound to a ResultSet

Record. A DropDownList on a Form can be

populated from one DataSource, but

DataBound to a different DataSource

Can force a PostBack so the Page

redraws (or is Redirected()) based on

changing the SelectIndex of the

DropDownList

Last time we hand entered values

Selecting a Data Source

If a DataSource has already been

defined for this Page, it can be selected.

Otherwise, a new DataSource can be

defined using the Wizard

Options for Where Data Resides

SQL Server database where DR resides

Give it an easily

identifiable name

Must Create a Connection String

to the DR Database

The connection string provides the

information the DataSource to connect to

a database. This can be saved and

used anywhere in the Project

New Connection Wizard

Adding a

Connection

Classic MDAC

Connection Dialog Box

Data Repository Server

or Data Mart Server

Authentication Mode

Database (DR)

Saving the Connection in

Web.config File for Later Use

When deploying (i.e., going from

Acmeware’s development

environment to this laptop), this file

can easily be modified

Can be used on any

Page in the Project

Connection String in Web.config

Connection String

Note, if you use SQL Server

Authentication, the Password is stored

in this file so it must be secure

Choosing the Table / View SP / or

SQL Statement

MEDITECH DR MIS

Financial Class Dictionary

Only select one column

(Name) in this example.

Probably should include

the ClassID as unique

identifier, though it

wouldn’t be displayed in

the DropDownList

Filters Results

Distinct Records

Sorts Results

Options for Updateable Datasets

Adding a WHERE Clause Filter

Lots of powerful

options available!!

We are only interested

in Active Financial

Classes, so we

hardcode the Filter to a

value of “Y” as it is

stored in the DR

Testing the SQL Data Source

Testing the DataSource

SqlDataSource in Design View

SqlDataSource in

Design View

Databound Control

DropDownList in

Web Browser

Active Financial Class in

the DR DMisFinancial

Class Dictionary

Demonstration #5 – SQL

DataSource

Section #6

Useful Databound Controls

In This Section

Configure a new DataSource using the

Data Repository

Create a DataBound Grid View Control

and Configure Its Attributes (View Only

version)

DetailsView Control (View Only)

In-Line Editable GridView

FormView Control (Enter / Edit / Delete)

GridView Control Quick Tasks

Quick Tasks

GridView show Data

Records in Table Format

We will create a new

DataSource to populate

the GridView

SQL Data Source linked to a

Medical Records Table

Named for MriPatients

(DR) table

SQL Server (Or other

OLE DB) Data Source

Select Statement in DataSource

In this example, we are interested

in the Patient’s Name, Sex and

DOB, but we return the PatientID

as a unique identifier

We recommend using SPs

for support reasons, but in

this example we will simply

chose the MriPatients

Choosing table actually results

in a simple SQL statement

Auto Format Option

The Auto Format Quick Task

options allows an easy

mechanism to provide a nice

look to the control

Paging, Sorting, Selection

GridView Control in IE

Automatically sorts on

selected column header

Easy paging through a

large number of records

Select option

allows an

individual record

to be identified,

then event

action can occur

based on the

selected record

Look at Control’s Source Code The GridView Control has no

Code Behind, all of the

source Code is generated as

Server Control Tags

Adding a DetailsView Control

The Details View is designed

to show Detail of a specific

data record in a Form format

Details View Data Source

In this example, we will

select the same MriPatients

DR table again, but choose

many more fields to display

in our Details View

Linking Controls

The SelectIndexChange

event is used to trigger a

change in the PageIndex of

the DetailsView sot that it

equals the new GridView

Selected Index

As different GridView items

are selected, the details for

the specific patient are

displayed in the DetailsView

control

Lab Results Data Mart Next, we will use Visual Web

Developer controls to modify

and update data. In this

scenario, we would not link

directly to the DR. However,

we might use DR data to

create a Data Mart, to which

we link our controls. We create a table to store

Lab Result values for patient

accounts on specific dates

SP to Create My Lab Data Mart

This is a simple SQL Stored

Procedure that loads Lab

Results into a table

(MyLabResultsDataMart)

In-Line Editable GridView

A GridView that is editable is

the same as a GridView that

is View only, the difference is

in the DataSource

configuration

We will create a new

SqlDataSource using a

connection string to our

“downtimedr” database

Data Mart Data Source

Again, the Database option

for the DR

In-Line Editable GridView

Select the Data

Mart we defined

Make sure to

include the Primary

Key (ID) column

Advanced Button We can now choose to

allow Insert, Update, and

Delete statements

automatically with our

GridView

Quick Task options for

Editable GridView

Choosing checkbox

adds the corresponding

Select, Edit, or Delete

selection options as

columns in the GridView

Editable Grid View with no Code

When Edit is selected,

each column of the

GridView for the

corresponding record is

placed into a TextBox,

where it can be edited

Changes can be

accepted using the

Update option or

Cancelled

Form View Control

The FormView Control is the equivalent to the

DetailsView, but has the same Insert, Edit, Update and

Delete capabilities using Templates for each Form

Demonstration #6 – DataBound

Controls

Section #7

Downtime Registration Example

Downtime Registration Process

Provides the ability to continue to register patients

as if system never went down

Works during planned or unplanned downtime

Use demographic recall (and any other required

data) from the DR

Can be developed and deployed in hours with

virtually no coding

New registration information can be easily scripted

back into Admission Module when it is back up (or

transmitted through HL7 into InBox)

Demo Recall MRI Lookup A TextBox is used to enter information to

perform a Demo Recall lookup for the

patient

Patient demographics are displays to help Identify

Once the patient is identified, she is selected which

generates a new downtime record with default values and

opens the FormView control to allow editing

SQL Side Development

New Database called “downtimedb”

New Tables Visits (this is the core table and used to script the downtime

registration data back when the system comes back up

Providers

Locations

Services

New Stored Procedures First Searches the Demo Recall data to find match to input data (By

Name, Past Account #, Unit #, SS#, etc.)

Once Demo Recall record is selected which initiates a CacheNewVists stored procedure that either

Inpatient Long Form (Downtime)

Demonstration #7 – Downtime

Registration Routine

Questions