db2

Download
Share  Add to  Flag Embed
Uploaded from authorPOINTLite
Views:
 
Category: Entertainment
     
 
License:   All Rights Reserved

Presentation Description

No description available.

Comments

Presentation Transcript

Slide1: 

HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2

Overview: 

Overview HTML GUI in Web Environment ASP.NET Studio.NET

HTML: 

HTML HyperText Markup Language. Developed by Tim Berners-Lee in 1990. HTML file is a text file with hypertext (links) and tags (instructions) added to it The file contains no hidden instructions, only instructions how to display the text The general format for a HTML tag is: <tag_name>piece of text</tag_name> An opening tag: <title> , a closing tag: <\html>

HTML page: 

HTML page Basic idea: present all formatting information in a universally-agreed-upon mark up language Ship this text file from computer A to computer B On computer B, use a special program (browser) that uses the mark up instructions to render the document’s text on the scree

HTML tags: 

HTML tags You can learn html using my html tutorial at: http://www2.kinneret.ac.il/girshin/ip/myint/ex1.html Basically tags can be divided into the following groups: Text formatting tags:<b>,<font>,<I>,<u>,<code>,<pre> Formatting: <br>,<center>,<hr> Block level tags: <address>,<h1-h6>,<p>,<div> List tags: <ul>,<ol>,<li>,<menu> Table tags: <table>,<tr>,<td>,<caption> Forms: <form>, <input> ,<select>,<textarea> HTML is not a case sensitive language: <img>=<Img>=<IMG>=<iMg> and more

More about tags: 

More about tags Tags can have properties. Example: <body background="marble.gif" text=red> <font color=green size=7>This is a green text.</font> Exist a group of multimedia tags: Image: <img src=somefile> Video: <img> tag and dynsrc="FileName" attribute: <img dynsrc="FileName" loop=infinite> Sound: <bgsound SRC=“File.mid" loop=5>

Hyperlink to the specific location: 

Hyperlink to the specific location To create a hypertext you have to use an anchor tag <a> The link to this place is created using the following code: <a href=“address"> Jump to some text</a> An address can be: local (only file name directory) <a href=“my/rina.html"> global (computer name and protocol should be mentioned> <a href=“http://www.idc.ac.il/index.html"> Local or global – to a specific bookmark <a href=“http://www.idc.ac.il/index.html#definition"> But you have to create a bookmark: <a name="PlaceName"></a> tag before this specific place

HTML GUI tags and events: 

HTML GUI tags and events The most used form tag is an <input> tag. The type of input is specified with the type attribute. <type input=“type”> The most commonly used input types are: text password button checkbox radio file For almost every tag events can be defined. Additional tags: select, textarea <select> <option value='RED'>red <option value='WHITE' selected>white </select>

Input type button Example: 

Input type button Example <html><head></head> <body><center> <h3>Form Input Button Example</h3> <form> <input type=button value="RED" onclick="document.bgColor='red'"> <input type=button value="BLUE" onclick="document.bgColor='blue'"> <input type=button value="GREEN" onclick="document.bgColor='green'"> </form></center> </body></html>

Select list example: 

Select list example <html><head></head><body><center> <h3>Form Select List Example</h3> <form> <select name="s" onChange="document.bgColor=s.options[s.selectedIndex].value"> <option value='RED'>red <option value='WHITE' selected>white <option value='BLACK'>black <option value='GREEN'>green <option value='BLUE'>blue </select></form> </center></body></html> where Selected list item is -  s.options[s.selectedIndex]

Select list example: 

Select list example

HTML page: 

HTML page A User Agent (browser) asks for an HTML page by sending HTTP request to the web-server. Web-server sends a response which includes the required page including additional data objects. Browser displays the file. User can view an entire code using “view source” option. PC running UA – IE Server http request html page http response html page

Server side programming: 

Server side programming What happens if you want to hide the information. If you want to send only an output. You don’t want to reveal data base and table names. Use server side scripting languages.

Why ASP.NET?: 

Why ASP.NET? ASP.NET makes building real world Web applications relatively easy.  Displaying data, validating user input and uploading files are all very easy.  Just use correct classes/objects. ASP.NET uses predefined .NET Framework classes: over 4500 classes that encapsulate rich functionality like XML, data access, file upload, image generation, performance monitoring and logging, transactions, message queuing, SMTP mail and more ASP.NET pages work in all browsers including Netscape, Opera, AOL, and Internet Explorer.

ASP.NET in the Context of .NET Framework: 

ASP.NET in the Context of .NET Framework

ASP.NET page modus operand: 

ASP.NET page modus operand Usually ASP.NET page constructed from regular HTML instructions and server instructions. Server instructions are a sequence of instructions that should be performed on server. An ASP .NET page has the extension .aspx. ASP+ = ASP.NET If UA requests an ASP .NET page the server processes any executable code in the page (the code can be written in current page or can be written in additional file). The result is sent back to the UA.

Adding Server Code: 

Adding Server Code You can add some code for execution simply by adding syntactically correct code inside <% %> block. Inside <% %> block you write instruction that should be implemented on server machine. Example: <html> <body bgcolor=“silver"> <center> <p> <%Response.Write(now())%> </p> </center> </body> </html> Where now() returns the date on the server computer and adds it to the resulting html page. Response is a Response object and it has a write method that outputs it’s argument to the resulted text.

Dynamic Pages: 

Dynamic Pages ASP.NET pages are dynamic. Different users get different information. In addition to using <% %> code blocks to add dynamic content ASP.NET page developer can use ASP.NET server controls. Server controls are tags that can be understood by the server and executed on the server.

Types of Server Controls: 

Types of Server Controls There are three types of server controls: HTML Server Controls – regular HTML tags with additional attribute id and runat=“server”directive: <input id="field1" runat="server"> Web Server Controls - new ASP.NET tags that have the following syntax: <asp:button id="button1" Text="Click me!" runat="server" OnClick="submit"/> Validation Server Controls – those controls are used for input validation: <asp:RangeValidator ControlToValidate=“gradesBox" MinimumValue="1" MaximumValue="100" Type="Integer" Text="The grade must be from 1 to 100!" runat="server" /> More about server controls in the future

How to run ASPX file?: 

How to run ASPX file? To run ASPX file on your computer you need to install IIS, .NET SDK, IE6 and Service Pack 2. Now you can write asp.net pages using any text editor - even Notepad!  Exists many other tools Visual Studio.NET or Web-Matrix. Place your code to the disk:\Inetpub\wwwroot directory (or you can change this default directory). Now open your browser and request the following page: http://127.0.0.1/mypage.aspx or http://localhost/mypage.aspx It is a loopback call. Your PC now plays 2 roles: a client and a server.

Language Support: 

Language Support The Microsoft .NET Platform currently offers built-in support for three languages: C#, Visual Basic and Jscript (Microsoft JavaScript) You have to specify language using one of the following directive <script language="VB" runat="server"> or <%@Page Language=“C#” %> The last directive defines the scripting language for the entire page.

What’s in a name? Web Forms: 

What’s in a name? Web Forms All server controls must appear within a <form> tag. The <form> tag must contain the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. An .aspx page can contain only ONE <form runat="server"> control. That is why .aspx page is also called a web form.

Web Forms creation: 

Web Forms creation ASP.NET supports two methods of creation dynamic pages: a spaghetti code - the server code is written within the .aspx file. a code-behind method - separates the server code from the HTML content. 2 files – .cs and .aspx

Spaghetti code - Copy.aspx: 

Spaghetti code - Copy.aspx <%@ Page Language="C#" %> <script runat=server> void Button_Click(Object sender, EventArgs e) { field2.Value = field1.Value; } </script> <html><body> <form Runat="Server"> Field 1:<input id="field1" size="30" Runat="Server"><br> Field 2: <input id="field2" size="30" Runat="Server"><br> <input type="submit" Value=“Submit Query” OnServerClick="Button_Click" Runat="Server"> </form> </body></html> A server code is written within the .aspx file

Output: 

Output The output after inserting wwww to the first field and pressing the button.

Code-behind– myCodeBehind.cs file: 

Code-behind– myCodeBehind.cs file using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; public class myCodeBehind: Page { protected Label lblMessage; protected void Button_Click(Object sender , EventArgs e) { lblMessage.Text="Code-behind example"; } }

Presentation.aspx file: 

Presentation.aspx file <%@ Page src="myCodeBehind.cs" Inherits="myCodeBehind" %> <html><body> <form runat="Server"> <asp:Button id="Button1" onclick="Button_Click" Runat="Server" Text="Click Here!"></asp:Button> <br/> <asp:Label id="lblMessage" Runat="Server"></asp:Label> </form> </body></html>

The Code-Behind Example Output: 

The Code-Behind Example Output After onclick event

ASP.NET Execution Model: 

ASP.NET Execution Model Client Server public class Hello{ protected void Page_Load( Object sender, EventArgs e) {…} } Hello.aspx.cs First request Postback Output Cache

Studio.NET: 

Studio.NET Very simple Microsoft Environment for project development. You can use Studio.NET 2003 or 2005 (with web application) or Microsoft ASP.NET Web Matrix. How to work with web applications http://msdn2.microsoft.com/en-us/library/aa730880(VS.80).aspx More about web-applications http://forums.asp.net/thread/1279716.aspx

Open a correct Project: 

Open a correct Project

Open a correct Project: 

Open a correct Project

Slide39: 

An output After Button1 click