SAE6B/SAZ6A UNIT: I - V SAE6B/SAZ6A WEB TECHNOLOGY

Size: px

Start display at page:

Download "SAE6B/SAZ6A UNIT: I - V SAE6B/SAZ6A WEB TECHNOLOGY"

Marion Ward
5 years ago
Views:

1 SAE6B/SAZ6A WEB TECHNOLOGY UNIT: I - V 1

2 UNIT: 1 Internet Basic Introduction to HTML List Creating Table Linking document Frames Graphics to HTML Doc Style sheet -Basics Add style to document Creating Style sheet rules Style sheet properties Font - Text - List - Color and background color Box - Display properties. 2

3 Internet The Internet is a network of computers spanning the globe. It is also called the World Wide Web. Reference: 3

4 INTRODUCTION TO HTML What is HTML? HTML is the standard markup language for creating Web pages. 4

5 HTML TAGS & SECTIONS HTML elements are represented by tags 5

6 LIST Lists must contain one or more list elements. Lists may contain <ul> An unordered list. This will list items using plain bullets. <ol> An ordered list. This will use different schemes of numbers to list your items. <dl> A definition list. This arranges your items in the same way as they are arranged in a dictionary. 6

7 Creating Tables in HTML The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. 7

8 Linking Documents A link is specified using HTML tag <a>,this tag is called anchor tag. Between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. 8

each section can load a separate HTML document.

9 Frames & Graphics to HTML Doc HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. The <IMG> tag is used to embed graphics in HTML pages. It has no end tag 9

10 Style sheet What is CSS? CSS stands for Cascading Style Sheets. How do I create a CSS? Tags Defined. After you have written the HTML code save it anduse the file extension.htm or.html.... Create a CSS File. Now create a new Notepad document. Click Start ->All Programs -> Notepad.... Link the Stylesheet. 10

Creating & Adding style to document Open a Web page for editing in Design view. On the Format menu, choose Document Styles. The current document appears at the top of the Document Styles window.

11 Creating & Adding style to document Open a Web page for editing in Design view. On the Format menu, choose Document Styles. The current document appears at the top of the Document Styles window. Choose the Add Style Sheet icon at the top of the window. A collapsed <STYLE> node appears in the Document Styles window. In the HTML markup for the page, <STYLE></STYLE> tags are inserted into the <HEAD> section of the document. Syntax 11

12 Style sheet Properties Multiple Properties 12

13 Text Box Color The color property is used to set the color of the text. If you define the color property, you must also define the background-color. The text-align property is used to set the horizontal alignment of a text. 13

14 Display Properties The display property is the most important CSS property for controlling layout. The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. 14

displayed visibility Specifies whether or not

15 Contd.. Hide an Element - display:none or visibility:hidden? display Specifies how an element should be displayed visibility Specifies whether or not an element should be visible Remove h1.hidden { display: none; } Hide Reset h1.hidden { visibility: hidden; } a{ display: block; } 15

16 Unit :2 Introduction to JavaScript Advantage of JavaScript JavaScript Syntax Data type Variable Array Operator and Expression Looping Constructor Function Dialog box. 16

JavaScript is a very powerful client-side scripting language.

17 Introduction to JavaScript JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time. JavaScript is a very powerful client-side scripting language. you can make your webpage more lively and interactive, with the help of JavaScript. 17

18 Advantages of JavaScript Less server interaction validate user input before sending the page Immediate feedback to the visitors no need to wait Increased interactivity work with mouse as well as keyboard Richer interfaces include drag-and-drop components and sliders 18

19 JavaScript Syntax JavaScript can be implemented using JavaScript statements that are placed within the <script>... </script>. <script language="javascript type="text/javascript"> JavaScript code </script> 19

20 Data types 20

21 Variables 21

22 Array 22

23 Multi- dimensional Array 23

24 Operators 24

25 Expressions 25

26 Looping Constructor 26

27 Contd.. Reference: 27

28 Function A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing the same code again and again. 28

29 29

30 Dialog box. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. PROMPT BOX ALERT BOX CONFIRM BOX 30

31 Unit :3 Introduction to JavaScript document object model Object in HTML Event Handling Window Object Document object Browser Object Form Object Navigator object Screen object Build in Object User defined object Cookies. 31

32 Introduction to JavaScript document object model The DOM is a W3C (World Wide Web Consortium) standard. (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." 32

33 Object in HTML The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages. 33

34 Event Handling 34

35 Contd 35

Global variables are properties & Global functions are

36 Window Object The window object is supported by all browsers. It represents the browser's window. Global variables are properties & Global functions are methods of the window object. Reference: 36

37 Document object Properties and Methods document.title - Sets or returns the title of the document document.url-returns the full URL of the HTML document document.write() - Writes HTML expressions or JS code to a document 37

38 Browser Object The Browser Object Model (BOM) is used to interact with the browser. The default object of browser is window means you can call all the functions of window by specifying window or directly. Ex: window.alert("hello javatpoint"); = alert("hello javatpoint"); Reference: 38

39 Form Object The Form object represents an HTML <form> element. You can create a <form> element by using the document.createelement() method: Example : var x = document.createelement("form"); Methods: reset() - Resets a form; submit() - Submits a form Collection: elements Returns a collection of all elements in a form You can access a <form> element by using getelementbyid(): Example: var x = document.getelementbyid("myform"); 39

40 Navigator object The JavaScript navigator object is used for browser detection. It can be used to get browser information such as appname, appcodename, useragent etc. 40

the window.screen object can be written without the window prefix.

41 Screen object The window.screen object contains information about the user's screen.the window.screen object can be written without the window prefix. Properties:screen.width,screen.height,screen.availWidth,screen.av ailheight,screen.colordepth,screen.pixeldepth 41

42 Built in Object 42

43 Built in Object Evaluates a string and returns a value. eval(expression) Parses a string argument and returns an integer of the specified radix or base. Syntax: parseint(string) parseint(string, radix) Parses a string argument and returns a floating point number. Syntax: parsefloat(string) These global properties return a simple value; they have no properties or methods. Infinity NaN undefined null literal Reference: obal_objects 43

44 User defined object All user-defined objects and built-in objects are descendants of an object called Object. Reference: oblemcomplete_detailed.php?problemid=682 44

45 Cookies. Cookies are data, stored in small text files, on your computer. When a user visits a web page, his name can be stored in a cookie. To Create a Cookie: document.cookie = "username=john Doe; expires=thu, 18 Dec :00:00 UTC; path=/"; To Delete a Cookie: document.cookie = "username=; expires=thu, 01 Jan :00:00 UTC; path=/;"; Reference: 45

46 Unit :4 ASP. NET Language Structure Page Structure Page event Properties &Compiler Directives. HTML server controls - Anchor, Tables, Forms, Files. Basic Web server Controls - Label, Textbox, Button, Image, Links, Check & Radio button, Hyperlink. Data List Web Server Controls - Check box list, Radio button list, Drop down list, List box, Data grid, Repeater. 46

47 . NET Structure ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites. 47

48 Page Structure The main components of an ASP.NET page are: Directives - <%@ Page Language="C#" %> Code Declaration Blocks ASP.NET Controls Code Render Blocks Server-Side Comments Server-Side Include Directives Literal Text and HTML Tags. Reference: 48

49 Page event & Properties 49

50 Compiler Directives. Directives specify settings that are used by the page and usercontrol compilers when the compilers process ASP.NET Web Forms pages (.aspx files) and user control (.ascx) files. Reference: 50

51 HTML server controls HTML elements within an ASP.NET file are treated as literal text and you cannot reference them in server-side code. To make these elements programmatically accessible, you can indicate that an HTML element should be treated as a server control by adding the runat="server" attribute. consider the HTML input control: <input type="text" size="40"> It could be converted to a server control, by adding the runat and id attribute: <input type="text" id="testtext" size="40" runat="server"> Reference: 51

52 Anchor, Images, HyperLink Control Creates a server-side control that maps to the <a> HTML element and allows you link to another Web page. <a id="anchor1" runat="server"> The HyperLink control is like the HTML <a> element. <asp:hyperlink ID="HyperLink1" runat="server"> HyperLink </asp:hyperlink> <asp:image ID="Image1" runat="server"> 52

53 Basic Web server Controls The Table Web server control enables you to create tables on ASP.NET pages that you can program in server code. The TableRow and TableCell Web server controls provide a way to display the content for the Table control. 53

54 Forms. Open Microsoft Visual Studio. On the File menu, select New Project.... Select the Templates -> Visual C# -> Web templates group on the left. Choose the ASP.NET Web Application template in the center column. Name your project BasicWebApp and click the OK button. 54

Files Web site applications can contain different file types. By default, some are supported and managed by ASP.NET, and others are supported and managed by the IIS server. asax - Application root.

55 Files Web site applications can contain different file types. By default, some are supported and managed by ASP.NET, and others are supported and managed by the IIS server. asax - Application root. ascx - Application root or a subdirectory- A Web user control file ashx - A handler file asmx An XML Web services file. aspx - An ASP.NET Web Forms page axd - A handler file that is used to manage Web site administration requests, The basic syntax of FileUpload is: <asp:fileupload ID= "Uploader" runat = "server" /> 55

56 Label, Textbox, Button, Check & Radio button Text box controls are typically used to accept input from the user. <asp:textbox ID="txtstate" runat="server" ></asp:textbox> <asp:label ID="tstate" runat="server" ></asp:label> Label controls provide an easy way to display text which can be changed from one execution of a page to the next. <asp:checkbox ID= "chkoption" runat= "Server"> </asp:checkbox> <asp:radiobutton ID= "rdboption" runat= "Server"> </asp: RadioButton> <asp:button ID="Button1" runat="server" onclick="button1_click" Text="Click" / > 56

57 Data List Web Server Controls The DataList Web server control displays rows of database information in a customizable format. The format for displaying the data is defined in templates that you create. 57

58 Basic Controls <asp:listbox ID="ListBox1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"> </asp:listbox> Basic syntax of drop-down list control: <asp:dropdownlist ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> </asp:dropdownlist> <asp:radiobuttonlist ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"> </asp:radiobuttonlist> <asp:checkboxlist ID="CheckBoxList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"> </asp:checkboxlist> 58

59 Data Grid DataGrid control to display data on the web page. It was introduced in.net 1.0 and now has been deprecated. DataGrid is used to display data in scrollable grid. It requires data source to populate data in the grid. Reference: 59

60 Repeater. The Repeater control is a container control that allows you to create custom lists out of any data that is available to the page. We must provide the layout for the Repeater control by creating templates. Reference: 60

61 Unit :5 Request and Response Objects Cookies Working with Data OLEDB connection class, command class, transaction class, data adaptor class, data set class Advanced Issues - , - Application Issues, - Working with IIS and page Directives, - Error handling. Security Authentication, IP Address, Secure by SSL & Client Certificates. 61

Request and Response Objects The Request object retrieves the values that the client browser passed to the server during an HTTP request. The Response object is used to send output to the client.

62 Request and Response Objects The Request object retrieves the values that the client browser passed to the server during an HTTP request. The Response object is used to send output to the client. At the top level is the ASP.NET runtime which creates an ' Appdomain ' which in turn has ' HttpRuntime ' with 'request', 'response' and 'context' objects. Reference: 62

63 Cookies A cookie is often used to identify a user. It is a collections of Response object: Cookies - Sets a cookie value. A cookie is a small file that the server embeds on the user's computer. The "Response.Cookies" command is used to create cookies. <% Response.Cookies("firstname")="Alex %> The "Request.Cookies" command is used to retrieve a cookie value. <% fname=request.cookies("firstname") response.write("firstname=" & fname)%> 63

64 Working with Data OLEDB connection class 64

65 Command class The DbCommand object represents the command or a stored procedure sent to the database from retrieving or manipulating data. 65

66 DATA TRANSACTION CLASS The SQL statements used to create, commit, and roll back the transaction can be entered manually when writing SQL scripts or creating stored procedures, or through programmatic means using either ADO.NET or the classes in the System.Transactions namespace. 66

The DataSet contains DataTable objects and DataRelation objects.

67 DATA ADAPTER CLASS & DATA SET CLASS The dataset represents a subset of the database. It does not have a continuous connection to the database. To update the database a reconnection is required. The DataSet contains DataTable objects and DataRelation objects. The DataAdapter object acts as a mediator between the DataSet object and the database. This helps the Dataset to contain data from multiple databases or other data source. 67

68 Advanced Issues - 68

69 Application Issues A group of ASP files that work together to perform is called an application. The object is used to tie these files together. Synchronization and Locking Excessive or unnecessary logging Code dependencies Underlying database issues Underlying infrastructure issues 69

Working with IIS and page Directives Defines page-specific (.aspx file) attributes used by the ASP.NET page parser and compiler. <%@ Page attribute="value" [attribute="value".

70 Working with IIS and page Directives Defines page-specific (.aspx file) attributes used by the ASP.NET page parser and compiler. Page attribute="value" [attribute="value"...] %> Page Language="VB" ContentType="text/xml" %> PreviousPageType attribute="value"[attribute="v alue"...] %> Reference Page ="somepage.aspx" %> Press Win+R->type inetmgr Connectionpane->ApplnPools>.net ->IIS 70

71 Error handling. Error handling in ASP.NET has three aspects: Tracing - tracing the program execution at page level or application level. Error handling - handling standard errors or custom errors at page level or application level. Debugging - stepping through the program, setting break points to analyze the code 71

72 Security - Authentication Authentication : It is the process of ensuring the user's identity and authenticity. ASP.NET allows four types of authentications: Windows Authentication Forms Authentication Passport Authentication Custom Authentication Authorization : It is the process of defining and allotting specific roles to specific users. Confidentiality : It involves encrypting the channel between the client browser and the web server. Integrity : Ex: implementing digital signature. 72

IP ADDRESS An Internet Protocol address (IP address) is a numerical label assigned to each device (e.g., computer, printer) participating in a computer network that uses the Internet Protocol for communication.

73 IP ADDRESS An Internet Protocol address (IP address) is a numerical label assigned to each device (e.g., computer, printer) participating in a computer network that uses the Internet Protocol for communication. An IP address serves as: A name indicates what we seek. An address indicates where it is. A route indicates how to get there. There are two versions of IP address, IPv4 contains IP address as 32 bit number, IPv6 which takes 128 bit to store the IP Address. 73

74 Secure by SSL & Client Certificates. IIS Authentication: SSL The Secure Socket Layer or SSL is the protocol used to ensure a secure connection. With SSL enabled, the browser encrypts all data sent to the server and decrypts all data coming from the server. At the same time, the server encrypts and decrypts all data to and from browser. The URL for a secure connection starts with HTTPS instead of HTTP. A small lock is displayed by a browser using a secure connection. By doing this, the server authenticates itself by sending its digital certificate. 74

75 Contd.. To use the SSL, you need to buy a digital secure certificate from a trusted Certification Authority (CA) and install it in the web server. Some of the trusted and reputed certification authorities are: SSL is built into all major browsers and servers. To enable SSL, you need to install the digital certificate. The strength depends upon the length of the key generated during encryption. More the length, more secure is the certificate, hence the connection. 75

CST272 Getting Started Page 1

CST272 Getting Started Page 1 1 2 3 4 5 6 8 Introduction to ASP.NET, Visual Studio and C# CST272 ASP.NET Static and Dynamic Web Applications Static Web pages Created with HTML controls renders exactly