Dr. Azeddine Chikh IS444: Modern tools for applications development.

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

Web Forms and ASP.NET Programming Right from the Start with Visual Basic.NET 1/e 12.
DT228/3 Web Development WWW and Client server model.
DT211/3 Internet Application Development Active Server Pages & IIS Web server.
1 Chapter 12 Working With Access 2000 on the Internet.
XP Browser and Basics1. XP Browser and Basics2 Learn about Web browser software and Web pages The Web is a collection of files that reside.
Introduction to Web Database Processing
Web-Based Applications
Introduction to Web Interface Technology (CSE2030)
Chapter 11 ASP.NET JavaScript, Third Edition. 2 Objectives Learn about client/server architecture Study server-side scripting Create ASP.NET applications.
1 Chapter 20 — Creating Web Projects Microsoft Visual Basic.NET, Introduction to Programming.
Web Programming Language Dr. Ken Cosh Week 1 (Introduction)
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Christopher M. Pascucci Basic Structural Concepts of.NET Browser – Server Interaction.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Chapter 9 Web Applications Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved. McGraw-Hill.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
INTRODUCTION TO WEB DATABASE PROGRAMMING
9-1 aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf.
Server- Side technologies Client-side vs. Server-side scripts PHP basic ASP.NET basic ColdFusion.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
FALL 2005CSI 4118 – UNIVERSITY OF OTTAWA1 Part 4 Web technologies: HTTP, CGI, PHP,Java applets)
Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.
Introduction to ASP.NET. Prehistory of ASP.NET Original Internet – text based WWW – static graphical content  HTML (client-side) Need for interactive.
Copyright © cs-tutorial.com. Introduction to Web Development In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for.
Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Object-Oriented Application Development Using VB.NET 1 Chapter 12 Web Forms, HTML, and ASP.NET.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
© 2011 Delmar, Cengage Learning Chapter 9 Collecting Data with Forms.
Chapter 1: Introduction to Web
Chapter 16 The World Wide Web Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Describe several.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Dynamic Action with Macromedia Dreamweaver MX Barry Sosinsky Valda Hilley.
Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications.
Chapter 6 The World Wide Web. Web Pages Each page is an interactive multimedia publication It can include: text, graphics, music and videos Pages are.
Creating Web Applications Using ASP.NET Chapter Microsoft Visual Basic.NET: Reloaded 1.
Chapter 9 Programming with Web Forms Programming In Visual Basic.NET.
ASP.NET Web Application and Development Digital Media Department Unit Credit Value : 4 Essential Learning time : 120 hours Digital.
Web Programming: Client/Server Applications Server sends the web pages to the client. –built into Visual Studio for development purposes Client displays.
Tutorial 121 Creating a New Web Forms Page You will find that creating Web Forms is similar to creating traditional Windows applications in Visual Basic.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. Programming with Visual Web Developer Chapter 9.
© 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Active Server Pages  In this chapter, you will learn:  How browsers and servers interacted on the Internet when the Internet first became popular 
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
Kingdom of Saudi Arabia Ministry of Higher Education Al-Imam Muhammad Ibn Saud Islamic University College of Computer and Information Sciences Chapter.
Introduction to ASP.NET1. 2 Web applications in general Web applications are divided into two parts –The server part –The client part The server part.
Introducing ASP.NET 2.0. Internet Technologies WWW Architecture Web Server Client Server Request Response Network HTTP TCP/IP PC/Mac/Unix + Browser (IE,
1 MSCS 237 Overview of web technologies (A specific type of distributed systems)
1 WWW. 2 World Wide Web Major application protocol used on the Internet Simple interface Two concepts –Point –Click.
Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
ASP-2-1 SERVER AND CLIENT SIDE SCRITPING Colorado Technical University IT420 Tim Peterson.
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
National College of Science & Information Technology.
Chapter 1 Getting Started with ASP.NET Objectives Why ASP? To get familiar with our IDE (Integrated Development Environment ), Visual Studio. Understand.
1 Chapter 1 INTRODUCTION TO WEB. 2 Objectives In this chapter, you will: Become familiar with the architecture of the World Wide Web Learn about communication.
Web Programming Language
Computing with C# and the .NET Framework
ASP.NET Forms.
Chapter 1 Introduction to HTML.
Web Forms, HTML, and ASP.NET
Section 17.1 Section 17.2 Add an audio file using HTML
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Presentation transcript:

Dr. Azeddine Chikh IS444: Modern tools for applications development

Part 3. Web Based application development Chapter 6: Web Forms, HTML, and ASP.NET

3 Objectives Review Internet and Web fundamentals Review HTML basics Use HTML forms Use ASP.NET to develop Web pages Create an ASP.NET Web application Create an ASP.NET survey application

4 Introduction Internet An interconnected system of networks that links computers worldwide Protocol used: Transmission Control Protocol/Internet Protocol (TCP/IP) World Wide Web (or the Web) Largest and perhaps most important segment of the Internet: graphics and animation capabilities Protocol used to process information: Hypertext Transmission Protocol (HTTP) Language used to present information: Hypertext Markup Language (HTML)

5 Understanding Internet and Web Fundamentals Uniform Resource Locator ( URL ) Used to identify and access a Web server ( Web address) A Web page A file with an.htm or.html extension Contains HTML ; might also contain other code Stored on a server Static Web pages Contain HTML tags only Simply display information Content does not change when requested by the user

6 Static and Dynamic Web Pages

Dynamic Web pages Content changes depending on the user’s request or preferences Cannot be created using HTML alone 7

8 Static and Dynamic Web Pages Dynamic Web pages can be created using Client-side code Server-side code Server-side technologies for providing dynamic content ASP ASP.NET Common Gateway Interface (CGI) Java Server Pages (JSP) ColdFusion Personal Hypertext Preprocessor (PHP)

9 Static and Dynamic Web Pages Classic ASP Allows creation of dynamic Web pages through: Embedding of program scripts in HTML Scripts are created using scripting languages, such as:  VBScript  JavaScript No Need with ASP.NET

10 Setting Up an IIS Server Internet Information Services ( IIS ) A Microsoft server software Must be used to use Microsoft’s Web development technology ships with Windows 2000 Windows XP Professional

11 Working with Web Directories Folders on a server can be specified using either A physical directory A directory physically located in the Web site’s root directory A virtual directory A directory that does not have to be physically located in the Web site’s root directory Benefits of virtual directories Shorter URLs Hide the physical directory structure

12 Reviewing HTML Basics HTML tags Define the format of a Web page Are predefined – have no relationship to the text they are marking Consist of A left angle bracket (<) A tag name A right angle bracket (>) Many come in pairs: A start tag An end tag: uses a slash (/) to differentiate it from a start tag May have attributes

Reviewing HTML Basics 13 HTML Element: the complete line, start tag through end tag Content: the part between the tags Empty elements or single tags For example: tag Code is not case sensitive

14 Exploring HTML Documents HTML documents Text or ASCII files Can be created using A text editor Visual Web development tools:  For example:  Microsoft FrontPage  Macromedia Dreamweaver

15 Using HTML Forms HTML forms Collect user data Created using the form tag pair ( ) Send the input values to the server with the user’s request. Server program accesses the user data and responds accordingly by: Dynamically creating an appropriate Web page Returning Web page to the client browser

16 Using HTML Forms Attributes of the start form tag NAME: sets the form name METHOD: can be set to POST or GET POST – user data is placed in the form collection of the request object to be passed to the server GET – user data is passed to the server by adding it to the end of the URL address ACTION: specifies to what file program control is transferred when the Web page is submitted

17 Using Form Controls HTML form controls Similar to many of the controls used in the Windows environment Also called form elements Most have ASP.NET equivalents

18 Using Form Controls

19 Using Form Controls

20 Classic ASP Web Development ASP Has been a very popular technology for building Web applications Allows the mixing of scripts with HTML code A file with the.asp extension is processed with the ASP script engine on the server

21 Classic ASP Web Development ASP allows Client-side processing Server-side processing Client-side scripting Validates data before sending it to the server Used for Web page presentation effects Server-side scripting Accepts user inputs Obtains data from a database, if required Processes, renders, and returns a Web page

22 Classic ASP Web Development

23 Using ASP.NET to Develop Web Pages Goal in developing the.NET framework and VS.NET was to provide an Integrated development environment (IDE) to support the development of both : Windows applications Web applications

24 Separating Code from Content Typical ASP Page includes programming script mixed with HTML tags Difficult to cleanly separate the code from presentation and content ASP.NET Separates Web page code from content and presentation (the GUI)

25 Separating Code from Content ASP.NET Uses the code-behind technique, which: Mimics the event-driven code-behind concept for Windows applications Web form file Contains presentation and content Has an.aspx extension Code-behind file Contains the code Has an.aspx.vb extension

26 Separating Code from Content

27 Using HTML, HTML Server Controls, and ASP.NET Server Controls ASP.NET can be used to develop Web applications using HTML HTML server controls ASP.NET server controls

28 Understanding the ASP.NET Page Event Life Cycle ASP.NET Page class has its own Properties Methods Events ASP.NET page event life cycle Page_Init event Fired when a page is requested Occurs before the controls are loaded onto the Web form Can be used to handle data connection and initialization

29 Understanding the ASP.NET Page Event Life Cycle Page_Load event Occurs after the Page_Init event Typically provides the location where the code to check for postback is included Postback Second and subsequent requests for a Web form page Can be used to write code that is executed only on the first request for the Web page form

30 Understanding the ASP.NET Page Event Life Cycle Page_Unload event Occurs After the page has been unloaded Before the page is sent to the browser Used to clean up processing before the page is unloaded Closing files and connections to data Disposing of unneeded objects

31 Understanding the ASP.NET Page Event Life Cycle

32 Creating an ASP.NET Web Application In VS.NET, a ASP.NET Web application can be created by Clicking the New Project button on the Start Page Clicking Visual Basic Projects in the Project Types list, if necessary Clicking the ASP.NET Web Application icon in the Templates list

33 Creating an ASP.NET Web Application Options for adding a control to the Web form Double-click the control on the Toolbox Select and drag the control onto the Web form runat=“server” attribute Specifies that the control will be processed on the server Exists for all the ASP.NET controls Can be added to an HTML control to make it an HTML server control

34 Creating an ASP.NET Web Application Choice of how to work in the ASP.NET environment Design view HTML view

Creating an ASP.NET Survey Application An application for Bradshaw Marina that consists of: A form to collect information about boat customers A Web page where the information from the first form is posted 35

36 Using the Code-Behind Window This application requires Navigation from one Web page to another Passing the collected data from the source Web page to the target Web page To accomplish this, the application: Uses custom page properties Redirects program control from the source Web page to another Web page

37 Using the Code-Behind Window

Creating the Results Web Page 38 Results Web page Requires the addition of a new Web form to the project

39 Creating the Results Web Page To add a new Web form to the project Right-click the project in the Solutions Explorer window Point to Add Select Add Web Form on the shortcut menu

Using ASP.NET Validation Controls 40 Data validation An important part of any application that accepts user input

41 Adding Validation Controls to the Survey Web Page Validation controls added to the survey Web page RequiredFieldValidator controls added to Text box controls for  First name  Last name  Desired slip features The radio button list ValidationSummary control added to The Panel control

42 Adding Validation Controls to the Survey Web Page

43 Using ASP.NET with a PD Class Example: Customer data entry Web form Used to create a number of Customer instances Results Web form Displays the values for each Customer instance that is created Displays all the Customer instances in a text box Allows the user to enter a phone number to locate a customer in the ArrayList of customers

Using ASP.NET with a PD Class 44