Web II - 01 - Introduction to server-side development
•
4 likes•744 views
Lecture slides for COMP 3512. Suitable for Web 2 course in a degree following CIT/CIS/CS ACM model curriculum.
![Overview ,[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Web II - 01 - Introduction to server-side development
Similar to Web II - 01 - Introduction to server-side development (20)
More from Randy Connolly
More from Randy Connolly (20)
Recently uploaded
Recently uploaded (20)
Web II - 01 - Introduction to server-side development
- 1. SERVER-SIDE DEVELOPMENT An Introduction 01
- 9. Dynamic Web Technologies (again)
- 14. Direct Output example public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<html>"); out.println("<body>"); out.println("<head>"); out.println("<title>Hello World!</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Hello World!</h1>"); out.println("</body>"); out.println("</html>"); } }
- 16. Example PHP Script <?php require_once("utilities/header.php"); ?> <?php $currentTime = date("F j, Y, g:i a"); $colors = array('white','black','red','green','blue','yellow','orange'); ?> <html> <head></head> <body> <form> The time is now <? echo $currentTime; ?> <br/> Choose a color: <select> <? for ($i=0; $i<count($colors); $i++) { echo '<option>'; echo $colors[$i]; echo '</option>'; } ?> </select> </form> </body> </html>
- 19. Hybrid <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Scrolling Grid</title></head> <body> <form id="form1" runat="server"> <div> <h1>GridView</h1> <asp:GridView ID="grdvSample" runat="server" DataSourceID="myAccess" GridLines="none" Font-Size="x-small" Font-Names="tahoma" BorderColor="black" BorderWidth="1"> <HeaderStyle ForeColor="white" BackColor="brown" Font-Bold="true" /> <RowStyle BackColor="palegoldenrod" /> <AlternatingRowStyle BackColor="beige" /> </asp:GridView> <asp:AccessDataSource ID="myAccess" runat="server" DataFile="~/App_Data/ModernEyeCatalog.mdb" SelectCommand="Select ArtistId,LastName,FirstName,Nationality,YearOfBirth,YearOfDeath from Artists" /> </div> </form> </body> </html> public class CustomPaging : System.Web.UI.Page { public void SortGrid( Object o, DataGridSortCommandEventArgs e) { // determine which column is to be sorted string sortField = e.SortExpression; // we must rebind data using the sort field BindData(sortField); } }
- 36. .NET Components
- 43. Sample MSIL Assembly ... .assembly extern mscorlib { .publickeytoken = (B7 7A 5C 56 19 34 E0 89 ) .ver 1:0:5000:0 } .assembly hello { .hash algorithm 0x00008004 .ver 0:0:0:0 } .module hello.exe // MVID: {F828835E-3705-4238-BCD7-637ACDD33B78} .class private auto ansi beforefieldinit MainApp extends [mscorlib]System.Object { .method public hidebysig static void Main( ) cil managed { .entrypoint .maxstack 1 ldstr "C# hello world!" call void [mscorlib]System.Console::WriteLine(string) ret } // End of method MainApp::Main .method public hidebysig specialname rtspecialname instance void .ctor( ) cil managed { .maxstack 1 ldarg.0 call instance void [mscorlib]System.Object::.ctor( ) ret } // End of method MainApp::.ctor } // End of class MainApp If we use the IL disassembler ( ildasm.exe ) to turn a binary assembly into a text assembly, we will see something similar to the following: Metadata MSIL Module
- 50. .NET Execution
- 57. HelloWorld.aspx Example <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC … > <script runat="server"> protected void Page_Load(object sender, EventArgs e) { myDate.Text = DateTime.Now.ToShortDateString(); } </script> <html> <head><title>Hello World Embedded</title></head> <body> <form id="form1" runat="server" > <h1>Hello World</h1> The date is <em> <asp:Label ID="myDate" runat="server"></asp:Label> </em> </form> </body> </html> Web server control Code declaration block Necessary to make this a web form Page directive
- 58. Code Behind Version <%@ Page Language="C#" AutoEventWireup="true" CodeFile="HelloWorldCodeBehind.aspx.cs" Inherits="HelloWorldCodeBehind" %> <!DOCTYPE … > <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Hello World Code-</title> </head> <body> <form id="form1" runat="server" > <h1>Hello World</h1> The date is <em> <asp:Label ID="myDate" runat="server"></asp:Label> </em> </form> </body> </html> using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class HelloWorldCodeBehind : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { myDate.Text = DateTime.Now.Date.ToString(); } } Page directive HelloWorldCodeBehind.aspx HelloWorldCodeBehind.aspx.cs
- 64. Code Behind Version <%@ Page Language="C#" AutoEventWireup="true" CodeFile="HelloWorldCodeBehind.aspx.cs" Inherits="HelloWorldCodeBehind" %> <!DOCTYPE … > <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Hello World Code-</title> </head> <body> <form id="form1" runat="server" > <h1>Hello World</h1> The date is <em> <asp:Label ID="myDate" runat="server"></asp:Label> </em> </form> </body> </html> using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class HelloWorldCodeBehind : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { myDate.Text = DateTime.Now.Date.ToString(); } } Page directive HelloWorldCodeBehind.aspx HelloWorldCodeBehind.aspx.cs
- 65. Result in the browser <html> <head><title>Hello World Embedded</title></head> <body> <form name="form1" method="post" action="HelloWorldEmbedded.aspx" id="form1"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJODExMDE5NzY5D2QWAgIDD2QWAgIBDw8WAh4EVGV4dAUKMDgvMDEvMjAwNmRkZDZPhFHJER4chf3nmlgfL+uq4W58" /> <h1>Hello World</h1> The date is <em> <span id="myDate">23/06/2006</span> </em> </form> </body> </html> Notice no <asp:Label> control. Notice also the hidden input tag with the name of __VIEWSTATE. We will learn more about this view state in Chapter 2.
- 72. Virtual Directories vs Physical Folders
- 77. Another Example Please enter your name: <asp:TextBox ID="name" runat="server" /> <br /> Choose favorite author: <asp:DropDownList ID="myList" runat="server"> <asp:ListItem>Choose an author</asp:ListItem> <asp:ListItem>Atwood</asp:ListItem> <asp:ListItem>Austin</asp:ListItem> <asp:ListItem>Hawthorne</asp:ListItem> <asp:ListItem>Melville</asp:ListItem> </asp:DropDownList> <br /> <asp:Button ID="btnEnter" Text="Enter" runat="server" OnClick="btnEnter_Click" /> <p> <asp:Label ID="msg1" runat="server" /> </p> public partial class EventTest : System.Web.UI.Page { /// <summary> /// Event handler will be called each time page is requested /// </summary> protected void Page_Load(object sender, EventArgs e) { msg1.Text = "In Page_Load<br/>"; } /// <summary> /// Event handler for button /// </summary> protected void btnEnter_Click(object sender, EventArgs e) { if (myList.SelectedIndex > 0) { msg1.Text += "Hi " + name.Text + "<br/>"; msg1.Text += "Your favorite author is "; msg1.Text += myList.SelectedItem; } } }
- 78. Using AutoPostback <asp:DropDownList ID="myList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="myList_SelectedIndexChanged" > <asp:ListItem>Choose an author</asp:ListItem> <asp:ListItem>Atwood</asp:ListItem> <asp:ListItem>Austin</asp:ListItem> <asp:ListItem>Hawthorne</asp:ListItem> <asp:ListItem>Melville</asp:ListItem> </asp:DropDownList> public partial class EventTest : System.Web.UI.Page { /// <summary> /// Event handler will be called each time page is requested /// </summary> protected void Page_Load(object sender, EventArgs e) { msg1.Text = "In Page_Load<br/>"; } /// <summary> /// Event handler for list box /// </summary> protected void myList_SelectedIndexChanged (object sender, EventArgs e) { if (myList.SelectedIndex > 0) { msg1.Text += "Hi " + name.Text + "<br/>"; msg1.Text += "Your favorite author is "; msg1.Text += myList.SelectedItem; } } } generates postback request when selection event occurs
- 79. Result in Browser (before selection) … <form name="form1" method="post" action="EventTest.aspx" id="form1"> <div> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzU4OTQyMTQyD2QWAgIDD2QWBAIDDxBkZBYBZmQCBw8PFgIeBFRleHQFEUluIFBhZ2VfTG9hZDxici8+ZGRkrdXaKhB9hfPCxWw0yH66jFyRptR2Yu651BApr5K68So=" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCQLE88HoBgL7uPQdAqqc94YFAuuUwb8PAqmgr5IGArOL1q0PAuny6fcEAoDL04ICAuPk/MoLgjX6O/3XiiMK8jlmzLdPmAFL2IAhN5e3vB01z5f+ToY=" /> </div> Please enter your name: <input name="name" type="text" id="name" /> <br /> Choose favorite author: <select name="myList" onchange=" javascript:setTimeout('__doPostBack(amp;#39;myListamp;#39;,amp;#39;amp;#39;)', 0) " id="myList"> <option selected="selected" value="Choose an author">Choose an author</option> <option value="Atwood">Atwood</option> <option value="Austin">Austin</option> <option value="Hawthorne">Hawthorne</option> <option value="Melville">Melville</option> </select><br /> <input type="submit" name="btnClick" value="Submit" id="btnClick" /> <p><span id="msg1">In Page_Load<br/></span></p> </form> Notice that both Javascript and HTML was generated by ASP.NET when the page executed.