• 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 Instructor: Craig Duckett Lecture 01: Tuesday, January 6, 2015 BIT285 Course Orientation and Introduction to Web Applications and ASP.NET 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 REQUIRED by Mary Delamater and Anne Boehm 24 Chapters, 822 Pages, 358 Illustrations Published August 2013 ISBN: 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 REQUIRED by Simon Smart 24 Chapters, 822 Pages, 358 Illustrations Published August 2013 ISBN: 978-1-890774-75-2 Companion 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 Syllabus Grading: 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 ecommerce 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 Versions The 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 visaversa, 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 .NET Applications Visual Basic Visual C# Visual C++ Visual F# .NET Framework .NET Framework Class Library Windows Forms classes ASP.NET classes Other classes Common Language Runtime Managed applications Common Type System Intermediate Language Operating System and Hardware Windows 7 Windows 8 Other Operating Systems Web Applications and State A 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. Client Browser Browser Browser Server First HTTP request: The browser requests a page. 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 server Web server 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. How State is Handled with ASP.NET Applications 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 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) page directive: • Language • AutoEventWireup • CodeFile • Inherit DOCTYPE Runat="server" REQUIRED FOR ALL ASP.NET FORMS onclick event aspx code The code-behind the Default form (Default.aspx.cs) Page_Load IsPostBack / !IsPostBack IsValid Code-behind code (C# code) 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 Exercise From 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.