lecture2

Document Sample
lecture2 Powered By Docstoc
					HTML, GUI, ASP.NET

   Rina Zviel-Girshin
       Lecture 2



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




                             2
     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>

                                                                      3
      HTML page
            The HTML            Fred Foonly <BR>
            source file:        <I> Aventura Ave 23 <BR>
                                Palo Alto, CA. </I>

    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
    The HTML source file, as    Fred Foonly
    displayed by the browser:   Aventura Ave 23
                                Palo Alto, CA.
                                                           4
     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                           5
     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>


                                                                6
        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

        Suppose you want to set a link to a   Another multi-line document. You
        specific place in another document    defined , bookmarked .
        then the link you use should be.
                                              My bookmark.
                                              Another text.
                                                                                       7
     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>                                                 8
        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>




                                                                          9
      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]



                                                                  10
Select list example




                      11
     HTML page
   A User Agent (browser) asks
    for an HTML page by
    sending HTTP request to the
    web-server.                                   Server
   Web-server sends a response
    which includes the required      PC running
                                      UA – IE
    page including additional data
    objects.
   Browser displays the file.

   User can view an entire code
    using “view source” option.

                                                           12
     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.


                                                   13
    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.
                                                                     14
 ASP.NET in the Context of .NET
 Framework
VB     C++      C#   JScript   J#

 Common Language Specification




                                    Visual Studio.NET
      ASP.NET            Windows
Web Forms Web Services    Forms

        ADO.NET and XML

        Base Class Library

   Common Language Runtime

         Operating System
                                                        15
     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.


                                                                     16
       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.
                                                                                   17
     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.


                                                  18
         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"
More about
server controls
                      Text="The grade must be from 1 to 100!" runat="server" />
in the future
                                                                                  19
        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.


                                                                               20
    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.
                                                                21
     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.


                                                           22
    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




                                                           23
    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
                                                                    24
Output

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




                   25
  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"; }
}

                                                             26
  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>


                                                            27
The Code-Behind Example Output

                     After onclick
                         event




                                     28
     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
                                                 29
    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
                                                   30
Open a correct Project




                         31
Open a correct Project




                         32
33
34
35
36
37
38
An output

            After Button1 click




                                  39

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:3/3/2013
language:Latin
pages:39