Download About the Presentations - School of Information Technology

About the Presentations
• The presentations cover the objectives found in
the opening of each chapter.
• All chapter objectives are listed in the beginning
of each presentation.
• You may customize the presentations to fit your
class needs.
• Some figures from the chapters are included. A
complete set of images from the book can be
found on the Instructor Resources disc.
ASP.NET Programming
with C# and SQL Server
First Edition
Chapter 1
Introduction to Web
Development
Objectives
In this chapter, you will:
• Study the history of the World Wide Web
• Learn about Web development
• Learn about Microsoft Visual Web Developer 2008
Express Edition
• Work with well-formed Web pages
ASP.NET Programming with C# and SQL Server, First Edition
3
Introduction to Web Development
• Original purpose of the World Wide Web was to
locate and display information
• With increasing commercial usage came demand
for more interactive and visually appealing Web
sites
• Initial response was JavaScript, but it has some
disadvantages:
– Runs on the client’s system
– Works only within a Web browser
ASP.NET Programming with C# and SQL Server, First Edition
4
Introduction to Web Development
(cont’d.)
• For a fully interactive Web site that accesses a
database on a server, you must use a server-side
scripting tool such as ASP.NET
– Combined with C#, ASP.NET is one of today’s most
popular Web site development technologies
ASP.NET Programming with C# and SQL Server, First Edition
5
Introduction to the World Wide Web
• Internet: a vast network that connects computers
all over the world
• Originally developed in the 1960s by the Advanced
Research Projects Agency (ARPA) of the U.S.
Dept. of Defense (later known as DARPA)
– Goal: to interconnect the main computer systems of
various universities and research institutions funded
by ARPA
– First implementation was called ARPANET
– Access was restricted to academic researchers,
scientists, and the military
ASP.NET Programming with C# and SQL Server, First Edition
6
Introduction to the World Wide Web
(cont’d.)
• At the end of the 1980s, commercial access to the
Internet was granted
• World Wide Web (or Web): created by Tim
Berners-Lee in 1990-91 at the European
Laboratory for Particle Physics (CERN) in Geneva,
Switzerland
– Purpose: to easily access cross-referenced
documents, through a method called hypertext
linking
• Hypertext link (hyperlink): contains a reference to
a Web page that can be accessed by a click
ASP.NET Programming with C# and SQL Server, First Edition
7
Introduction to the World Wide Web
(cont’d.)
• Web page: a document on the Web
• Uniform Resource Locator (URL): a unique
address on the Web
• Uniform Resource Identifier (URI): a generic term
for many types of names and addresses on the
Web
• Web site: refers to a location on the Internet of
Web pages and related files that belong to a
company, organization, or individual
• Web browser: a program for displaying Web pages
ASP.NET Programming with C# and SQL Server, First Edition
8
Introduction to the World Wide Web
(cont’d.)
• Request: when the user’s browser asks a Web
server for a Web page
• Web server: a computer that delivers Web pages
• Response: what the Web server returns to the
Web browser
ASP.NET Programming with C# and SQL Server, First Edition
9
Understanding Web Browsers
• Microsoft Internet Explorer: currently the most
popular browser on the market
• NCSA Mosaic: first browser, created in 1993
• Netscape Navigator: created in 1994, and
controlled 75% of the market until Internet Explorer
was released, starting the “browser wars”
• Incompatibilities among browsers for DHTML
elements resulted in creation of a set of industry
standards
• World Wide Web Consortium (W3C) oversees
development of standards for the Web
ASP.NET Programming with C# and SQL Server, First Edition
10
Understanding Web Browsers (cont’d.)
• A benefit of the browser wars was rapid
development and adoption of advanced Web page
standards, including JavaScript, CSS, and DHTML
• Mozilla Firefox: a new open source software
browser that has gained significant market share
• Open source: software for which the source code
can be freely used and modified
ASP.NET Programming with C# and SQL Server, First Edition
11
Using HTML
• Hypertext Markup Language (HTML): a markup
language used to create Web pages (HTML
pages)
• Markup language: a set of characters or symbols
that define a document’s logical structure – how it
should be printed or displayed
• HTML is based on Standard Generalized Markup
Language (SGML)
• HTML documents are text documents that contain
formatting instructions called tags
ASP.NET Programming with C# and SQL Server, First Edition
12
Basic HTML Syntax
• HTML tags: determine how data is displayed on a
Web page
–
–
–
–
Are enclosed in brackets (< >)
Usually occur as an opening and closing pair of tags
Closing tag starts with a / to define it as a closing tag
Data may be placed within the tag pair
• Element: a tag pair and any data it contains
• Content: the information contained within an
opening and closing tag
• Empty element: an element that does not require
a closing tag
ASP.NET Programming with C# and SQL Server, First Edition
13
Basic HTML Syntax (cont’d.)
Table 1-1: Common HTML elements
ASP.NET Programming with C# and SQL Server, First Edition
14
Basic HTML Syntax (cont’d.)
• Root element: contains all other elements in a
document
• <html> element: the root element for an HTML
document
• <head> element: contains information used by the
browser
– Occurs at the beginning of an HTML document after
the opening <html> tag
• <title> element: contains text that appears in the
browser’s title bar
– <head> element must contain a <title> element
ASP.NET Programming with C# and SQL Server, First Edition
15
Basic HTML Syntax (cont’d.)
• Document head: the <head> element and its
contents
• <body> element: contains the document body
• Parsing (or rendering): the process by which a
Web browser assembles and formats an HTML
document
• HTML is not case sensitive, but it is recommended
to use lowercase letters for all elements
• Attributes: parameters used to configure some
HTML elements
ASP.NET Programming with C# and SQL Server, First Edition
16
Basic HTML Syntax (cont’d.)
• Attributes are placed in the opening tag, prior to the
closing bracket
– Syntax: attribute = “value”
• Only recognized HTML elements and text are
processed by a browser
– Nonprinting characters such as tabs and line breaks
are ignored
• <p> element: creates a paragraph with a line break
before and after its contents
• <br> element: creates a line break
ASP.NET Programming with C# and SQL Server, First Edition
17
Creating a Web Page
• HTML documents are text files
– Can be created with any text editor, such as
Notepad or WordPad
– Cannot view the final result until the document is
opened in a browser
• HTML editor: an application designed for creating
HTML documents
• Examples: Macromedia Dreamweaver, Microsoft
FrontPage
ASP.NET Programming with C# and SQL Server, First Edition
18
Web Communication Protocols
• Hypertext Transfer Protocol (HTTP): manages
the hypertext links used to navigate the Web
• Host: a computer system that is being accessed by
a remote computer
• Domain name: a unique address for identifying a
Web server on the Internet
• Domain identifier: last part of a domain name that
identifies the type of organization
• URL may also contain directory and file names
ASP.NET Programming with C# and SQL Server, First Edition
19
Web Communication Protocols
(cont’d.)
Figure 1-3 Sample URL
ASP.NET Programming with C# and SQL Server, First Edition
20
Web Communication Protocols
(cont’d.)
• Transmission Control Protocol/Internet
Protocol (TCP/IP): a large collection of
communication protocols used on the Internet
– HTTP is a component of TCP/IP
• Hypertext Transfer Protocol Secure (HTTPS):
provides secure Internet connections
ASP.NET Programming with C# and SQL Server, First Edition
21
Introduction to Web Page
Development
• Web page design (Web design): refers to the
visual design and creation of documents on the
Web
– Quality Web design plays an important role in
attracting first-time and repeat visitors to a Web site
• Web page authoring (Web authoring): refers to
the creation and assembly of tags, attributes, and
data that make up a Web page
• Web development (Web programming): refers to
the design of software applications for a Web site
ASP.NET Programming with C# and SQL Server, First Edition
22
Understanding Client/Server
Architecture
• Server: usually refers to some sort of database
from which a client requests information
• Two-tier system: a system consisting of a client
and a server
• Client (front-end):
– Handles the presentation of the interface to the user
– Receives, formats, and presents the results returned
from the server
• Server (back-end): performs the heavy processing
such as calculations
ASP.NET Programming with C# and SQL Server, First Edition
23
Understanding Client/Server
Architecture (cont’d.)
Figure 1-4 The design of a two-tier client/server system
ASP.NET Programming with C# and SQL Server, First Edition
24
Understanding Client/Server
Architecture (cont’d.)
• Three-tier (multitier) client/server system:
contains three distinct pieces:
– Client tier: the Web browser
– Processing tier: handles the interaction between
the Web browser client and the data storage tier
– Data storage tier: stores data in a database and
handles requests from the processing tier
ASP.NET Programming with C# and SQL Server, First Edition
25
Understanding Client/Server
Architecture (cont’d.)
Figure 1.5 The design of a three-tier client/server system
ASP.NET Programming with C# and SQL Server, First Edition
26
Client-Side Scripting and JavaScript
• Static Web pages: pages that cannot change after
the browser renders them
• JavaScript: client-side scripting language used to
develop interactive Web pages
• Client-side scripting: refers to a scripting
language that runs on the user’s browser (on the
client tier)
• Scripting language: refers to any type of language
capable of programmatically controlling a Web
page
ASP.NET Programming with C# and SQL Server, First Edition
27
Client-Side Scripting and JavaScript
(cont’d.)
• Scripting engine: part of the browser that
executes scripting language code
• Interpreter: any program that executes scripting
language code
• Scripting host: a Web browser that contains a
scripting engine
• JavaScript allows creation of:
–
–
–
–
Web pages with interactive games
Dynamic modification of Web pages after rendering
Visual effects such as animation
Control of the Web browser window
ASP.NET Programming with C# and SQL Server, First Edition
28
Client-Side Scripting and JavaScript
(cont’d.)
• For security reasons, client-side JavaScript:
– Cannot be used outside of a Web browser
– Does not allow file manipulation
– Does not include mechanisms for creating network
connections or accessing databases
– Cannot run system commands or execute programs
on a client
– Cannot interact directly with Web servers operating
at the processing tier
ASP.NET Programming with C# and SQL Server, First Edition
29
Server-Side Scripting and ASP.NET
• Server-side scripting: a technology that
processes a request by executing a script on a
server
– Primarily used for communication between the client
tier and the data storage tier
– Common uses include shopping carts, search
engines, message boards, Web-based e-mail, blogs,
games, etc.
ASP.NET Programming with C# and SQL Server, First Edition
30
Server-Side Scripting and ASP.NET
(cont’d.)
Figure 1.6 How a Web server processes a server-side script
ASP.NET Programming with C# and SQL Server, First Edition
31
Server-Side Scripting and ASP.NET
(cont’d.)
• Active Server Pages (ASP).NET: server-side
scripting technology; part of Visual Web Developer
– Can use two languages with ASP.NET: Visual Basic
or Visual C#
• C#: an object-oriented programming language
based on the C++ programming language
• Object-oriented programming (OOP): refers to
the creation of reusable software objects that can
be incorporated into other programs
• .NET Framework: Microsoft platform for developing
Web applications
ASP.NET Programming with C# and SQL Server, First Edition
32
Should You Use Client-Side
or Server-Side Scripting?
• Use client-side scripting for:
– Controlling the Web browser
– Input data validation
– Light processing
• Use server-side scripting for:
– Accessing a database
– Performing intensive calculations
– Using data storage
• Web application: program that runs on a server but
is accessed by clients through a Web page on a
browser
ASP.NET Programming with C# and SQL Server, First Edition
33
Introduction to
Microsoft Visual Studio 2008
• Visual Studio: a suite of development tools
including Visual C++, Visual C#, Visual Basic, and
Visual Web Developer
• Express Editions: free but limited editions of the
tools in Visual Studio
ASP.NET Programming with C# and SQL Server, First Edition
34
Installing Microsoft Visual Web
Developer 2008 Express Edition
• Visual Developer can be used to create:
–
–
–
–
–
–
ASP.Net Web sites
HTML pages
Cascading Style Sheets
XML files
JavaScript code
Other types of files used on a Web site
ASP.NET Programming with C# and SQL Server, First Edition
35
Managing Web Sites
in Visual Web Developer
• To create a new Web site, use File menu – New
Web Site, then select the type from the templates:
–
–
–
–
ASP.NET Web site
ASP.NET Web service
Empty Web site
WCF (Windows Communication Foundation) Web
service
ASP.NET Programming with C# and SQL Server, First Edition
36
Managing Web Sites
in Visual Web Developer
• To add a new item to a Web site, use Website
menu – Add New Item
– Select item type from the list of installed
templates
• To add an existing item, use Website menu –
Add Existing Item
ASP.NET Programming with C# and SQL Server, First Edition
37
Figure 1.7 Add New Item dialog box
ASP.NET Programming with C# and SQL Server, First Edition
38
Managing Web Sites
in Visual Web Developer (cont’d.)
• Web site’s project settings are stored in two files:
– Visual Studio Solution file (.sln): contains settings
required by the project
– Solution User Options file (.suo): contains
customization options for the project
• These files are stored in the project folder
ASP.NET Programming with C# and SQL Server, First Edition
39
Using the Visual Studio Integrated
Development Environment (IDE)
• Integrated development environment (IDE):
the Visual Studio workspace in which you
create projects
• Project: the program you are writing (or the
Web site you are developing)
• Solution: can contain multiple projects
• Start Page: contains links to recent projects,
tutorials, developer information, and recent
news about Visual Web Developer
ASP.NET Programming with C# and SQL Server, First Edition
40
Figure 1.8 IDE Start Page
ASP.NET Programming with C# and SQL Server, First Edition
41
Using the Visual Studio Integrated
Development Environment (cont’d.)
• Solution Explorer window: used to manage the
files associated with the Web site
– Provides a hierarchical list of the project files
• Code Editor: used to edit programming code
– Includes statement completion IntelliSense
technology to automate tasks
• Text Editor: used to edit text that is not associated
with a programming language
• CSS Editor: used to edit CSS files
ASP.NET Programming with C# and SQL Server, First Edition
42
Figure 1.9 Solution Explorer window for the Cessna project
ASP.NET Programming with C# and SQL Server, First Edition
43
Figure 1.10 Statement completion in the Code Editor
ASP.NET Programming with C# and SQL Server, First Edition
44
Using the Visual Studio Integrated
Development Environment (cont’d.)
• Properties window: used to change
properties, attributes, and other settings
associated with a project
– Contains two columns: property column and value
column
• Certain types of windows in the IDE can be floating
or dockable
– Right-click the window’s title bar to change between
floating and dockable
ASP.NET Programming with C# and SQL Server, First Edition
45
Figure 1.11 Properties of the <form> tag displayed in the Properties window
ASP.NET Programming with C# and SQL Server, First Edition
46
Figure 1.12 Solution Explorer window with its dockable property turned on
ASP.NET Programming with C# and SQL Server, First Edition
47
Figure 1.13 Solution Explorer window with its floating property turned on
ASP.NET Programming with C# and SQL Server, First Edition
48
Building and Starting a Web Site
• Source code: original programming code
• Compile: to process and assemble the source
code into an executable format
• Use Build menu to compile source code
– Build page: compiles an individual file
– Build Web Site: compiles all source files
• Visual Web Developer automatically saves
changes to all open items during the build process
ASP.NET Programming with C# and SQL Server, First Edition
49
Building and Starting a Web Site
(cont’d.)
• Output window: displays status messages for
various IDE features, such as build progress
– Use View menu – Output to display the Output
window
• Error List window: lists any source file errors
found during the build process
– Use View menu – Error List to display this window
• Compiler error messages: show any syntax
errors in a source file
• Warning messages: occur for potential problems
ASP.NET Programming with C# and SQL Server, First Edition
50
Figure 1.14 Output window after building the Cessna Web site
Figure 1.15 Error List window displaying errors found in ASP.NET source file
ASP.NET Programming with C# and SQL Server, First Edition
51
Using the ASP.NET Development
Server
• ASP.NET Development Server: basic Web server
that can be used to test a Web site on your local
computer
– Designed to run under localhost, the name used by
a computer to refer to itself
– Use Debug menu – Start Without Debugging
• Port: represents the endpoint of a connection
between a client and a server
– Port 80 is reserved for HTTP communications
ASP.NET Programming with C# and SQL Server, First Edition
52
Working with Well-Formed Web Pages
• Current version of HTML is 4.01, released in 1999
• Extensible Hypertext Markup Language
(XHTML): replaced HTML for Web pages
– Supports devices other than traditional Web
browsers
• User agent: an application capable of retrieving
and processing HTML and XHTML documents
– Includes mobile phones, PDAs, browsers, search
engine crawlers, etc.
ASP.NET Programming with C# and SQL Server, First Edition
53
XHTML Document Type Declarations
(DTDs)
• Well-formed document: one that conforms to the
rules and regulations of XHTML
• Must include a <!DOCTYPE> declaration as the
first line of an XHTML document
• Document type declaration (DTD): defines the
elements and attributes that can be used in a
document
• Deprecated: term for elements and attributes that
are considered to be obsolete
ASP.NET Programming with C# and SQL Server, First Edition
54
XHTML Document Type Declarations
(cont’d.)
Table 1.2 HTML elements that are deprecated in XHTML 1.0
ASP.NET Programming with C# and SQL Server, First Edition
55
XHTML Document Type Declarations
(cont’d.)
• Three types of DTDs for XHTML documents:
– Transitional DTD: allows you to use deprecated
style elements
– Frameset DTD: identical to transitional DTD, but
also includes the <frameset> and <frame> elements
– Strict DTD: eliminates elements that were
deprecated in the transitional and frameset DTDs
ASP.NET Programming with C# and SQL Server, First Edition
56
Writing Well-Formed Documents
• A well-formed document:
– Must include <!DOCTYPE> declaration and <html>,
<head>, and <body> elements
– Must use <html> as the root element
– Is case sensitive
– Must have closing tags for all XHTML elements
– Must close all empty elements with a space and
slash before the closing bracket
– Must properly nest XHTML elements (an element
must be totally contained within another element)
ASP.NET Programming with C# and SQL Server, First Edition
57
Using Phrase Elements
• XHTML uses two types of inline elements for
formatting text:
– Formatting elements: provide specific instructions
about how their content should be displayed
– Phrase elements: primarily identify or describe their
content
• Recommended to use phrase elements to allow
compatibility with different user agents
ASP.NET Programming with C# and SQL Server, First Edition
58
Using Phrase Elements (cont’d.)
Table 1.3 Phrase elements
ASP.NET Programming with C# and SQL Server, First Edition
59
Working with Cascading Style Sheets
(CSS)
• Style: a single piece of CSS formatting information
• CSS information can be added directly to
documents or stored in separate documents
shared by multiple Web pages
• CSS design and formatting techniques are
independent of the content of a Web page
• Style declaration: creates a CSS style; consists
of:
– Property: refers to a specific CSS style
– Value: determines the style’s visual characteristics
ASP.NET Programming with C# and SQL Server, First Edition
60
Working with Cascading Style Sheets
(cont’d.)
• Three locations for style declarations:
– Inline styles: add style information to an individual
HTML element, using a style attribute
– Internal style sheets: add style information to an
entire document, using <style> elements within the
document head
• Selector: the element to which a specific style rule
applies
– External style sheets: separate text documents
with style declarations that are used by multiple Web
documents in a Web site
• Have a file extension of .css
ASP.NET Programming with C# and SQL Server, First Edition
61
Validating Web Pages
• Validating parser: program that checks whether
an XHTML document is well formed
• Validation: process of verifying that an XHTML
document is well formed and conforms to the
specified DTD
• W3C Markup Validation Service: free service to
validate both HTML and XHMTL
• Visual Web Developer automatically validates Web
pages
ASP.NET Programming with C# and SQL Server, First Edition
62
Summary
• World Wide Web created by Tim Berners-Lee in
1990-91 at CERN
• W3C established in 1994 at MIT to develop Web
standards
• Two-tier system consists of client and server
• Three-tier system consists of client, processing,
and data storage tiers
• JavaScript is a client-side scripting language
• Active Server Pages (ASP).Net is a server-side
scripting technology
ASP.NET Programming with C# and SQL Server, First Edition
63
Summary (cont’d.)
• Visual Studio is an integrated development
environment (IDE) including Visual C++, Visual C#,
Visual Basic, and Visual Web Developer
• Visual Web Developer includes the ASP.NET
Development Server for testing Web sites
• XHMTL is the current standard markup language
for Web pages
• A document type definition (DTD) defines the
elements and attributes that can be used in a
document
ASP.NET Programming with C# and SQL Server, First Edition
64
Summary (cont’d.)
• Use CSS to design and format the display of Web
pages
• A validating parser is a program that checks
whether an XHTML document is well formed
ASP.NET Programming with C# and SQL Server, First Edition
65