• Sit in front of a computer• Log in, go to course web page at http://faculty.cascadia.edu/cduckett/bit285 • Introduce yourself to folks around you• Buckle up and prepare for Mr. Toad's wild ride!

BIT 285: (Web) Application Programming

Lecture 01: Tuesday, January 6, 2015

BIT285 Course Orientation andIntroduction to Web Applications and ASP.NET

Instructor: Craig Duckett

BIT285: (Web) Application Programming

Official Web Site: http://faculty.cascadia.edu/cduckett/bit285

Classroom: CC1-210

Class Times: Tuesday/Thursday 1:15pm-3:20pm

StudentTracker: BIT 285 (for Submissions and Grade Tracking)

Instructor: Craig Duckett

Instructor Email: cduckett@cascadia.edu

Instructor Office: CC1-203 (in alcove to right of second floor elevator)

Instructor Office Hours: Monday/Wednesday 9:30-11:00am; by appointment

Course Textbook (1)

Murach's ASP.NET 4.5 Web Programming with C# 2012 REQUIREDby Mary Delamater and Anne Boehm24 Chapters, 822 Pages, 358 IllustrationsPublished August 2013ISBN: 978-1-890774-75-2

File Downloads: https://www.murach.com/downloads/acs5.htm

Course Textbook (2)

Learn ASP.NET 4.5, C# and Visual Studio 2012 Essential Skills with The Smart Method REQUIREDby Simon Smart24 Chapters, 822 Pages, 358 IllustrationsPublished August 2013ISBN: 978-1-890774-75-2Companion Site: http://aspnetcentral.com/

Lynda.com Training Videos

We will be using five specified courses from the Lynda.com web training videos, as one of the course requirements. Please register at Lynda.com by following the instructions and the link that you received in an email invite. If you did not receive an email invitation from Lynda.com, please email me at cduckett@cascadia.edu and I'll add you to the student list on the Lynda.com site. The cost is $20, and you pay directly with a credit card.

• ASP.NET Essential Training• C# Essential Training• JavaScript and JSON• Up and Running with Azure• Visual Studio 2012 Essential Training

I HAVE NOT PULLED THE SWITCH ON THESE YET. THESE MAY PROVE HELPFUL BUT ARE NOT REQUIRED.

Syllabus and Grading

Syllabus: BIT285 Winter 2015 SyllabusGrading: 1000 Points Total for Quarter

Assessments Percentage Individual Points Total Points

(15) In-Class Exercises 30% 20 (x15) 300

(3) Programming Assignments 45% 150 (x3) 450

(1) Mid-Term Exam 12.5% 125 (x1) 125

(1) Final Exam 12.5% 125 (x1) 125

100% 1000 Points

Required Software/Tools

• Dreamspark https://www.dreamspark.com/ • On the Hub: http://onthehub.com/download/free-software/ • Windows (7 or 8)• Visual Studio 2010/2012 (Professional/Premium/Ultimate)• Microsoft SQL Server (for ICEs)• Cascadia VMWare Views (for remote access)• Microsoft Azure (6-Month Student account through invite)

A Look at the BIT 285 Website

http://faculty.cascadia.edu/cduckett/bit285/

BIT285 Class Survey

How many have successfully completed BIT112? How many have successfully completed BIT 142? How many have successfully completed BIT 275? What other web dev classes have you successfully completed? How is everybody working with Visual Studio? How is everybody working with C#? Does anybody in the class already have some ASP.NET experience? Does anybody in the class already have some JavaScript/jQuery experience? Does anybody in the class already have some JSON experience? Does anybody in the class already have any experience with MS Azure?

BIT 285 Online Survey: http://goo.gl/forms/xG4gzgVdDS

Instructor Note (1)*

The Psychology Of A One-Hit Wonder

Teaching BIT285 is a one-shot deal for me this quarter. I'm only teaching because Dr. Brian Bansenauer, who normally teaches this class, is gone Winter Quarter on a limited sabbatical and then will be spending half-a-quarter teaching in China. As such, as I have never taught this class before and likely will never teach it again, I have not been as "emotionally invested" in building out the course as I otherwise would have been if it was going to be a long-term and repeat assignment (much like my BIT112, BIT115, or BIT116 classes). This does not mean that I'm going to be giving you a shoddy product—I've already put in over 200 hours of unpaid time building out this gargantuan class—only that since I've had to construct this course from scratch knowing I'll never to teach it again, I will be counting on each of you more than usual to help me take up the stretches of slack or outright gaps. This means that we're all in the same boat together, and we are all expected to help each other out. So: we must all work together, or risk falling together. Capisce?

*The Fine Print

Instructor Note (2)

The Topics Covered Are Massive, Ponderous, Weighty, and Sometimes Unwieldy MONSTERS…and so is Visual Studio (But That's a Good Thing!)

We will be tackling five (5) heady topics in the course of this class: Visual Studio, ASP.NET, C#, Azure, and REST.

Any one of these is complicated enough not only to deserve its own class, but its own series of classes! It's own year! Since we will be addressing all five of these in the course of one class over one quarter, we cannot—I repeat, cannot!—touch on any of the topics broached very deeply, since we simply don't have the required time. You will likely find yourself doing things in Visual Studio or with code you don't understand completely, or even half way, and that's to be expected. The time for deeper understanding will come later, with months and months—or years!—of hands-on experience.

So, to wrap your head's around what this class is about, perhaps it is best you consider it a broad overview of web application programming, a survey of sorts, so you might see the potential that is ahead of you when/if you are ready to go further, drill deeper, or brave with machete in hand the tangled jungle of code and application features that await you.

Instructor Note (3)Unlike some of my other classes—bit115, for example—you will not be able to get by in this class simply through osmosis trickling in from the lectures alone. No way, Jose! Won't happen! Why? Because there's just so much additional content that needs to be uncovered. The lectures are just the tip of the iceberg. And it's a BIG iceberg!

So, here's a "Word to the Wise": If you want to do well in this class, then you will have to put in a lot of outside work to stay ahead of the game—reading, researching, opening and experimenting with example code, writing new code, watching videos, etc., and then starting over and doing it again. And again. And again. So, please, remember to…

Wash — Rinse — Repeat

Any Questions So Far?

What is a Web Application ?

NOTE: For the first few lectures I'll be sticking pretty closely with the Murach book, and then it will be used primarily for reference and self-learning. I'll also reference the Essential Skills material throughout the quarter.

What is a Web Application?

A web application consists of a set of web pages that are generated in response to user requests. The Internet has many different types of web applications, such as search engines, online stores, auctions, news sites, social sites, financial sites, sports sites, and games.

What is a Web Application? CONTINUED

Web applications consist of clients and a web server. The clients are the computers, tablets, and mobile devices that use the web applications. They access the web pages through web browsers. The web server holds the files that make up the pages of a web application.

A network is a system that allows clients and server to communicate. The Internet is a large network that consists of many smaller networks. The "cloud" represents the network or Internet that connects the clients and servers.

The Components of a Web Application

What is a Web Application? CONTINUED

Networks can be categorized by size. A Local Area Network (LAN) is a small network of computers that are near each other and can communicate with each other over short distances.

Computers in a LAN are typically in the same building or adjacent buildings. This type of network is called an intranet and it can run web applications that are used throughout a company or institution.

What is a Web Application? CONTINUED

In contrast, a Wide Area Network (WAN) consists of multiple LANs that have been connected. To pass information from one client to another, a router determines which network is closest to the destination and sends the information over the network. A WAN can be privately owned by one company or it can be shared by multiple companies.

An Internet Service Provider (ISP) is a company that owns a WAN that is connected to the Internet. An ISP leases access to the network to companies that need to be connected to the Internet. When you develop production web applications, you will often implement them through an ISP.

Business or School

Home

What is a Web Application? CONTINUED

To access a web page from a browser, you can type a Uniform Resource Locator (URL) into the browser's address bar. The URL starts the protocol, which is usually HTTP (Hypertext Transfer Protocol). It is followed by the domain name and the folder or directory path to the file that is requested.

If the file name is omitted in the URL, the web server looks for a default file in the specified directory. The default files usually include index.html or default.html.

The Components of an HTML URL

What is a Web Application? CONTINUED

A static web page is a web page that does not change each time it is requested. This type of web page is sent directly from the web server to the web browser when the browser requests it. You can spot static pages in a browser by looking at the extension in the address bar. If the extension is .html (or .htm) the page is a static web page.

Fun Fact: Technically today there is no functional difference whether you use the .html or .htm extension when creating your web pages. Whichever convention you use, you should follow it and stick to it throughout your entire web site. The use of .htm was a product of the older "8.3 naming convention" which was the only naming convention supported by MS-DOS and pre-Windows 95 (Windows 3.1 or earlier) machines.

What is a Web Application? CONTINUED

When a URL is typed into a browser's address bar or a link is clicked, the browser sends an HTTP request (Hypertext Transfer Protocol) to the web server. When the web server receives the request, it retrieves the requested file from the server drive. This file contains the HTML (Hypertext Markup Language) for the requested page, then the web server sends the HTML back to the client browser as part of an HTTP response.

When the browser receives the HTTP response, it renders (translates) the HTML into a web page that is displayed in the browser which the user can view. If the user requests another page, the whole process begins again.

How a Web Server Processes a Static Web Page

What is a Web Application? CONTINUED

A dynamic web page is a page that is created by a program on an application server. This program uses the data that is sent with the HTTP request to generate the HTML that is returned to the web server which will then later push it out to the client browser. Request, Response. Request, Response.

When the web server receives an HTTP request it examines the file extension of the requested page to identify the application server that should process the request, and then forwards that request to the application server.

What is a Web Application? CONTINUED

Next, the application server retrieves the appropriate program, and also loads any form data that the user submitted, then executes the program. As the program executes, it generates the HTML for the web page and, if necessary, also requests data from a database server or other media file server and uses that data as part of the web page it is generating.

When the program is finished, the application server sends the dynamically generated HTML back to the web server, and then the web server sends the HTML back to the browser in an HTTP response.

What is a Web Application? CONTINUED

When the web browser receives the HTTP response, it renders the HTML and displays the web page, however at this point the web browser has no way to tell whether the HTML in the HTTP response was for a static page or a dynamic page. It just renders the HTML.

When the page is displayed, the user can view the content. If the user requests another page, the whole process begins again.

This process of request-and-response is called a "round trip".

How a Web Server Processes a Dynamic Web Page

What is a Web Application? CONTINUED

There are different makes, models, and types of application servers used by web sites today that support and work with different protocols, including Java application servers, PHP application servers, and .NET application servers.

In this course, when we build web applications, we will be using Microsoft Visual Studio with ASP and C# as the programming environment, Internet Information Services (IIS) is used for the web browser, and ASP.NET is used for the application server. You'll also be using a variant of Microsoft's SQL Server for the DBMS (Database Management System) and Microsoft Azure as a cloud computing application and storage infrastructure.

What is ASP.NET ?

What is ASP.NET?

ASP.NET is one of the primary technologies for developing web applications today. Together with Microsoft's Visual Studio, it provides a host of productivity features that you let you quickly build professional e-commerce applications.

Because this class assumes that you already know the basics of C#, it gets you off to a fast start with ASP.NET. In fact, by the end of the quarter, you'll know how to use ASP.NET and Visual Studio to develop and test dynamic multi-page and database applications in the "Cloud" using Microsoft Azure.

Five Ways to Develop ASP.NET Applications

• ASP.NET Web Forms - Web Forms is the oldest and most established technology. It provides for RAD (Rapid Application Development) by letting developers build web pages by working with controls on a design surface.

• ASP.NET MVC (Model View Controller) - Relatively new to the .NET family. It addresses perceived weaknesses in Web Forms, such as inadequate separation of concerns and the difficulty of unit testing.

• ASP.NET Web Pages with Razor - A version of Web Forms that uses the Razor template engine for in-line data binding without having to use the MVC design pattern. It is used in simple scenarios.

• ASP.NET Dynamic Data Entities - A version of Web Forms that uses Entity Framework and Routing to dynamically generate data-driven web sites. It is used in simple scenarios.

• ASP.NET Reports Web Site - A Web Forms site that includes a report.

NOTE: Because 70% or more of ASP.NET web development is done with Web Forms, that's what we will focus upon in this class. Because most of the other 30% of ASP.NET web development is done with MVC, it will be introduced in the BIT286 class, and the last chapter in the Murach book introduces it as well.

ASP.NET VersionsThe Four Editions of Visual Studio 2012 Visual Studio Express 2012 for Web

Visual Studio Professional 2012

Visual Studio Premium 2012

Visual Studio Ultimate 2012

The Free Edition of Visual Studio for Web Apps Visual Studio 2012 Express for Web

What the Free Edition Includes IIS Express

SQL Server Express LocalDB

NOTE: At the time of this writing the college PCs had Visual Studio 2010 installed on them, but may have upgraded to Visual Studio 2013. Now the Murach book and Lynda.com videos are geared to Visual Studio 2012 so it is recommended that you use this on your personal computers, although if you are using Visual Studio 2010 or Visual Studio 2013 that is also okay—you will just have to transpose some of the instructions/screen caps to 'fit' the look and feel of the older or newer versions.

Three Environments for ASP.NET Development

• Standalone Environment - In a standalone environment, a single computer serves as both the client and the server.

• Intranet Environment - In an intranet environment, the clients are connected to the server over an intranet.

• Internet Environment - In an Internet environment, the clients are connected to the server over an Internet.

Standalone Environment

What You Need on Your PC Windows 7 or later

.NET Framework 4.5

Visual Studio 2012

IIS Express

SQL Server Express LocalDB

Intranet Environment

What You Need on Your PC Windows 7 or later

.NET Framework 4.5

Visual Studio 2012

Internet Environment

What You Need on Your PC Windows 7 or later

.NET Framework 4.5

Visual Studio 2012

The Components of the .NET Framework

The .NET framework is divided into two main components, the .NET Framework Class Library and the Common Language Runtime (or CLR) and these components provide a common set of services for applications written in .NET languages like Visual Basic or C#.

The .NET Framework Class Library consists of classes that provide many of the functions that you need for developing .NET applications. For instance, the ASP.NET classes are used for developing ASP.NET web applications, and the Windows Forms classes are used for developing standard Windows applications.

The other .NET classes let you work with databases, manage security, access files, and perform many other functions. The CLR provides the services that are needed for executing any application that's developed with one of the .NET languages. This is possible because all of the .NET languages compile to a common Intermediate Language (or IL), which is stored in an assembly. The CLR also provides the Common Type System that defines the data types that are used by all the .NET languages. That way, you can use the same data types no matter which .NET language you 're using to develop your applications.

NOTE: If you peruse the Interwebs looking for ASP.NET code, some of the code you find will be C# code and some will be Visual Basic code. When used correctly in programming with Visual Studio, both will accomplish the exact same thing! Whatever you can do in C# you can do in Visual Basic, and visa-versa, because of the Common Language Runtime (CLR), although this was not always the case. For the purposes of this class, we will be developing using C#.

Something of Interest: http://www.tutorialspoint.com/codingground.htm and https://ideone.com/

The .NET Framework

Operating System and Hardware

Windows 7 Windows 8 Other Operating Systems

.NET Framework

.NET Applications

Visual Basic Visual C# Visual C++ Visual F#

.NET Framework Class Library

Windows Forms classes ASP.NET classes Other classes

Common Language Runtime

Managed applications Common Type System Intermediate Language

Web Applications and StateA web application ends after it generates a web page. That means that any data maintained by the application, such as variables or control properties, is lost because HTTP doesn't maintain the state of the application. After the server processes the request and returns the page to the browser, it drops the connection. Then, if the browser makes additional requests, the server has no way to associate the browser with its previous requests. Because of that, HTTP is known as a stateless protocol.

ServerFirst HTTP request:The browser requests a page.

Client

Web server

First HTTP response:The server returns the requested page and the application ends.

Next HTTP request:The browser requests another page. The server has no way to associate the browser with its previous request.

Web server

Web serverBrowser

Browser

Browser

Please Note: The following slides represent a fast-and-furious overview of working with an ASP.NET web form, are meant for summary purposes only, and are not representative of the structure of the class. We will be going through ASP.NET web forms following a structured step-by-step pace starting with Lecture 2.

Although HTTP doesn't maintain state, ASP.NET provides several ways to do that, as summarized in the table on upcoming Slide 41.

First, you can use view state to maintain the values of server control properties. For example, you can use view state to preserve the values of the items in a drop-down list. Because ASP.NET implements view state by default, you don't need to write any special code to use it.

Second, you can use session state to maintain data between executions of an application. To make this work, ASP.NET creates a session state object that is kept on the server whenever a user starts a new session. This session object contains a unique session ID, and this ID is sent back and forth between the server and the browser each time the user requests a page. Then, when the server receives a new request from a user, it can retrieve the right session object for that user. In the code for your web forms, you can add data items to the session object so their previous values are available each time a web form is executed.

How State is Handled with ASP.NET Applications

How State is Handled with ASP.NET CONTINUED

Third, you can use an application state object to save application state data, which applies to all of the users of an application. For example, you can use application state to maintain global counters or to maintain a list of the users who are currently logged on to an application.

Fourth, you can use server-side caching to save data. This is similar to application state in that the data saved in the cache applies to all users of an application. However, caching is more flexible than application state because you have control over how long the data is retained.

Last, you can use the profile feature to keep track of user data. Although a profile is similar to a session state object, it persists between user sessions because it is stored in a database.

NOTE: We will use view, session, and application states as this class progresses. Because profiles are used infrequently, they aren't presented in this class.

State as Discussed in the Murach's Book

A Look at an ASP.NET Default Form

The Future Value Calculator application after user clicks Calculate button

A Look at an ASP.NET Default Form

The Future Value Calculator application with error message displayed

The Future Value Calculator in Design View of Visual Studio 2012

The files in the Future Value Calculator application.

Folder File

(root) Default.aspx

(root) Default.aspx.cs

(root) Styles.css

(root) Web.config

Images WinkusLogo.jpg

The .aspx file for the Default form (Default.aspx)

aspx code

page directive:• Language• AutoEventWireup• CodeFile• Inherit

DOCTYPE

Runat="server"REQUIRED FOR ALL ASP.NET FORMS

onclick event

The code-behind the Default form (Default.aspx.cs)

Code-behind code (C# code)

Page_Load

IsPostBack / !IsPostBack

IsValid

Lecture 01 Example: Lecture01_Example.zip

Suggested Links of Interest

• Getting Started with ASP.NET (Microsoft)

• ASP.NET Tutorials (W3Schools)

• ASP.NET Tutorial (TutorialsPoint)

• The Complete ASP.NET Tutorial

• ASP.NET Tutorial (DotNetTricks)

https://www.udemy.com

Lecture 01: In-Class ExerciseFrom the menu bar, select Lectures and go to the Lectures 01 bar and select Lecture 01 ICE to begin working on today's in-class exercises.