Tvorba informačních systémů Michal Krátký 1, Miroslav Beneš 1 1 Katedra informatiky VŠB Technická univerzita Ostrava Tvorba informačních systémů, 2005/2006 c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 1/45
ASP (ActiveServer Pages).. Struktura, Web Forms. Vývojové nástroje. Uživatelské řídící komponenty. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 2/45
Skriptovací technologie na straně serveru Značkovací jazyk HTML, WML. Interpretovaný skript JScript, VBScript, JavaScript. Objektový model (Application, Server, Request, Response, Session+ COM komponenty). Chyby v návrhu Nedostatečné zapouzdření omezené opakované použití. Obtížné přizpůsobení různým klientům. Nedostatečná typová kontrola. Opakovaná interpretace všech požadavků. Obtížné uchováváni stavu formuláře. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 3/45
Příklad <%@ Language=VBScript%> <html> <body> <% Txt = " Helloworld! " %> Presny cas : <%=t i m e%><br> <%FOR i =1 TO 10%> <%=Txt%> <%NEXT%> < / body> < / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 4/45
Vývoj webových aplikací v libovolném jazyce podporovaném platformou.net. Kompilace aplikačního kódu. Přístup k rozsáhlým knihovnám.net (.NET classes). Jmenný prostor: System.Web.*. Web Forms. XML Web Services. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 5/45
Vývojové nástroje MS VisualStudio.NET 2005 Integrované vývojové prostředí. Komerční produkt. Vlastní WWW server. MS VisualStudio.NET (2003) + IIS. Integrované vývojové prostředí. Komerční produkt. MS.NET Framework + IIS Pouze řádkové překladače. MS Web MatrixProject http://www.asp.net. Volně dostupné integrované prostředí. Vlastní WWW server. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 6/45
Vývojové nástroje c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 7/45
Struktura namespace: System.Web.UI class Control - zapouzdřuje společné funkce prvků uživatelského rozhraní Controls, ID, Parent, EnableViewState, Visible, Context, ViewState,... class Page - reprezentuje webovou stránku Application, Request, Response, Server, Session, Cache, ErrorPage, IsPostBack, IsValid, Trace, Validators,... class UserControl bázová třída pro uživatelem definované komponenty. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 8/45
Web Forms 1/2 Vizualní aplikační komponenty. Značkovací jazyk HTML/WML. XML znaky pro řídící prvky. Stránka Web Forms - soubor.aspx. Blok: <% %>. Na rozdíl od ASP není blok interpretován, ale kompilován. Programová logika. Zpracování událostí. Libovolný podporovaný jazyk. Součást souboru.aspx (Code Inline) nebo kód na pozadí (Code Behind) v samostatném souboru. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 9/45
Web Forms 2/2 Výraz - <%= %>. <%="Hello World" %> vs. <% Response.Write("Hello World"); %>. <script runat="server"> blok definující proměnné a metody, které budou kompilovány do výsledné třídy. <%# %> data binding. <object runat="server"/> vytvoření instance třídy. <%-- Comment --%> komentář. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 10/45
Příklad: intro 1/5 c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 11/45
Příklad - intro.aspx 2/5 <%@ Page Language= "C# " %> <html> <head> < l i n k r e l = " s t y l e s h e e t " href= " i n t r o. css " > < / head> <body> <center> <form action= " i n t r o. aspx " > <h3> Name : <input name= "Name" type= t e x t value= "<%= H t t p U t i l i t y. HtmlEncode ( Request. QueryString [ "Name" ])%> " > Category : <select name= " Category " size=1> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 12/45
Příklad - intro.aspx 3/5 <% String [ ] values = { " Student ", " Programmer ", " S c i enter " } ; f o r ( i n t i = 0 ; i <values. Length ; i + + ) { %> < o ption <% i f ( Request. QueryString [ " Category " ]== values [ i ] ) { Response. Write ( " selected " ) ; } %>> <%=values [ i ]%> < / o ption> <% } %> < / select> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 13/45
Příklad - intro.aspx 4/5 < / h3> <input type= " submit " name= " Lookup " value= " Lookup " > <p> <% i f ( Request. QueryString [ " Lookup " ]! = n u l l ) { % > Hi <%=H t t p U t i l i t y. HtmlEncode ( Request. QueryString [ "Name" ] ) % >, you selected : <%=H t t p U t i l i t y. HtmlEncode ( Request. QueryString [ " Category " ] ) % > <% } %> < / form>< / center>< / body>< / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 14/45
Příklad: intro 5/5 c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 15/45
ASP.NET Controls (řídící komponenty) Standard/Server Controls - Label, CheckBox,..., Data Controls, Validation Controls, Login Controls, Navigation Controls - Menu, TreeView,..., WebParts Controls, HTML Controls - prvky HTML, User Controls - uživatelské značky. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 16/45
Server Controls Programovatelné objekty na straně serveru, typicky UI elementy na stránce (např. textové pole). Objekty se podílejí na vytváření stránky, mohou mít vlastní výstup. Jednoduché přizpůsobení potřebám programátora. Vlastnosti nastavujeme deklarativně (atributy značek) nebo programově (v kódu). c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 17/45
Práce se Server Controls Server controls (SC) jsou se stránkou identifikovány pomocí elementu obsahujícího atribut runat="server". Každý SC na stránce může mít přiřazeno jedinečné označení pomocí atributu id. Atribut id je pak použit při programové manipulaci s konkrétním SC. Ošetření událostí jméno události jako hodnota atributu. Např. asp:button obsahuje atribut Onclick. Implementace metody (události) se jménem shodným s hodnotou atributu. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 18/45
Server Controls namespace: System.Web.UI.WebControls AdRotator BulletedList Button Calendar CheckBox CheckBoxList DropDownList FileUpload HiddenField HyperLink Image ImageButton ImageMap Label LinkButton ListBox Literal MultiView and View Panel PlaceHolder RadioButton RadioButtonList Substitution Table TextBox Wizard Xml c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 19/45
Příklad - Server Controls 1/6 c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 20/45
Příklad - Server Controls, servercontrols.aspx 2/6 <html> <head> < l i n k r e l = " s t y l e s h e e t " href= " i n t r o. css " > < / head> < script language= "C# " runat=server> void SubmitBtn_Click ( Object sender, EventArgs e ) { Message. Text = " Hi " + H t t p U t i l i t y. HtmlEncode ( Name. Text ) + ", you selected : " + Category. SelectedItem ; } < / script> <body> <center> <form i d = " Form1 " action= " s e r v e r c o n t r o l s. aspx " method= " post " runat=" server " > c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 21/45
Příklad - Server Controls, servercontrols.aspx 3/6 <h3>name : <asp : textbox i d = "Name" runat=" server " / > Category : <asp : dropdownlist i d = " Category " runat=server> <asp : l i s t i t e m >Student< / asp : l i s t i t e m > <asp : l i s t i t e m >Developer< / asp : l i s t i t e m > <asp : l i s t i t e m > S c i e n t e r < / asp : l i s t i t e m > < / asp : dropdownlist> < / h3> <asp : button ID= " Button1 " text=" Lookup " OnClick= " SubmitBtn_Click " runat=" server " / > <p> <asp : l a b e l i d = " Message " runat=" server " / > < / form>< / center> < / body> < / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 22/45
Příklad - Server Controls, výstup 4/6 <html> <head> < l i n k r e l = " s t y l e s h e e t " href= " i n t r o. css " > < / head> <body> <center> <form name= " Form1 " method= " post " action= " s e r v e r c o n t r o l s. aspx " i d = " Form1 " > <div> <input type= " hidden " name= " VIEWSTATE" i d = " VIEWSTATE" value= " / wepdwulltexnza1njczmzapzbycagipzbycagcpdxy < / div> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 23/45
Příklad - Server Controls, výstup 5/6 <h3> Name: <input name= "Name" type= " t e x t " value= "mk" i d = "Name" / > Category : <select name= " Category " i d = " Category " > < o ption value= " Student " >Student< / o p t i o n > < o ption value= " Developer " >Developer< / o p t i o n > < o ption selected= " selected " value= " S c i e n t e r " > S c ienter< / o p t i o n > < / select> < / h3> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 24/45
Příklad - Server Controls, výstup 6/6 <input type= " submit " name= " Button1 " value= " Lookup " i d = " Button1 " / > <p> <span i d = " Message " > Hi mk, you selected : S c i e n t e r < / span> <div> <input < / div>< / form> < / center> < / body> < / html> type= " hidden " name= " EVENTVALIDATION" i d = " EVENTVALIDATION" value= " / wewbgkkjvwaawkbufqdat+pumufaqfcz+wja c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 25/45
Code Inline vs. Code Behind Code Inline - kód v jednom souboru Code Behind - kód na pozadí, ve více souborech. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 26/45
Příklad - Code Inline, inline.aspx 1/4 <%@ page language= "C# " %> < script runat=" server " > void Button1_Click ( o b j e c t sender, EventArgs e ) { Label1. Text = " Hello " + TextBox1. Text ; } < / script> <html> <head> < t i t l e > I n l i n e Pages< / t i t l e > < / head> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 27/45
Příklad - Code Inline, inline.aspx 2/4 <body> <form i d = " Form1 " runat=" server " > <h1>welcome to 2. 0! < / h1> <b>enter Your Name: < / b> <asp : TextBox ID= " TextBox1 " Runat= " server " / > <asp : Button ID= " Button1 " Text= " C l i c k Me" OnClick= " Button1_Click " Runat= " server " / > <br / > <br / > <asp : Label ID= " Label1 " Text= " Hello " Runat= " server " / > < / form> < / body> < / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 28/45
Příklad - Code Inline, výstup 3/4 <html> <head> < t i t l e > I n l i n e Pages< / t i t l e > < / head> <body> <form name= " Form1 " method= " post " action= " i n l i n e. aspx " i d = " Form1 " > <div> <input type= " hidden " name= " VIEWSTATE" i d = " VIEWSTATE" value= " / wepdwukltczmte0nti3oq9kfgicaq9kfgicb < / div> <h1>welcome to 2. 0! < / h1> <b>enter Your Name: < / b> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 29/45
Příklad - Code Inline, výstup 4/4 <input name= " TextBox1 " type= " t e x t " value= " 45 " i d = " TextBox1 " / > <input type= " submit " name= " Button1 " value= " C l i c k Me" i d = " Button1 " / > <br / > <br / > <span <div> <input < / div>< / form> < / body> < / html> i d = " Label1 " > Hello 45< / span> type= " hidden " name= " EVENTVALIDATION" i d = " EVENTVALIDATION" value= " / wewawkf187dbals0blrbgkm54rgbsdd2d1sm c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 30/45
Příklad - Code Behind, behind.aspx 1/5 <%@ page language= "C# " CodeFile= " behind. aspx. cs " I n h e r i t s = " behind_aspx " %> <html> <head> < t i t l e > CodeBehind Pages< / t i t l e > < / head> <body> <form i d = " Form1 " runat=" server " > <h1>welcome to 2. 0! < / h1> <b>enter Your Name: < / b> <asp : TextBox ID= " TextBox1 " Runat= " server " / > <asp : Button ID= " Button1 " Text= " C l i c k Me" OnClick= " Button1_Click " Runat= " server " / > c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 31/45
Příklad - Code Behind, behind.aspx 2/5 <br / > <br / > <asp : Label ID= " Label1 " Text= " Hello " Runat= " server " / > < / form> < / body> < / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 32/45
Příklad - Code Behind, behind.aspx.cs 3/5 using System ; p u b l i c p a r t i a l class behind_aspx : System.Web. UI. Page { protected void Button1_Click ( o b j e c t sender, EventArgs e ) { Label1. Text = " Hello " + TextBox1. Text ; } } c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 33/45
Příklad - Code Behind, výstup 4/5 <html> <head> < t i t l e > CodeBehind Pages< / t i t l e > < / head> <body> <form name= " Form1 " method= " post " action= " behind. aspx " i d = " Form1 " > <div> <input type= " hidden " name= " VIEWSTATE" i d = " VIEWSTATE" value= " / wepdwukltczmte0nti3oq9kfgicaq9kfgicb < / div> <h1>welcome to 2. 0! < / h1> <b>enter Your Name: < / b> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 34/45
Příklad - Code Behind, výstup 5/5 <div> <input <input name= " TextBox1 " type= " t e x t " value= "mk" i d = " TextBox1 " / > <input type= " submit " name= " Button1 " value= " C l i c k Me" i d = " Button1 " / > <br / > <br / > <span i d = " Label1 " > Hello mk< / span> < / div>< / form> < / body> < / html> type= " hidden " name= " EVENTVALIDATION" i d = " EVENTVALIDATION" value= " / wewawkkue+dbwls0blrbgkm54rgbkdj5pted c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 35/45
Sdílení kódu mezi stránkami Adresář kódu (Code Directory) Adresář App_Code. Možné podadresáře App_Code musí být registrovány v souboru Web.config. Global Assembly Cache.NET komponenty je nutné opět registrovat v souboru Web.config. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 36/45
Příklad - Code Directory, CodeFolder.aspx 1/3 <%@ page language= "C# " %> < script runat=" server " > void Button1_Click ( o b j e c t sender, EventArgs e ) { CustomClass c = new CustomClass ( ) ; Label1. Text = c. GetMessage ( TextBox1. Text ) ; } < / script> <html> <head> < t i t l e > I n l i n e Pages< / t i t l e > < / head> <body> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 37/45
Příklad - Code Directory, CodeFolder.aspx 2/3 <form i d = " Form1 " runat=" server " > <h1>welcome to 2. 0! < / h1> <b>enter Your Name: < / b> <asp : TextBox ID= " TextBox1 " Runat= " server " / > <asp : Button ID= " Button1 " Text= " C l i c k Me" OnClick= " Button1_Click " Runat= " server " / > <br / > <br / > <asp : Label ID= " Label1 " Text= " Hello " Runat= " server " / > < / form> < / body> < / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 38/45
Příklad - Code Directory, App_Code/CustomClass.cs 3/3 using System ; p u b l i c class CustomClass { p u b l i c S t r i n g GetMessage ( S t r i n g i n p u t ) { r e t u r n " Hello " + i n p u t ; } } c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 39/45
Příklad - práce s databází 1/3 <%@ Page Language= "VB" %> <html> <head runat=" server " > < t i t l e >GridView Bound to SqlDataSource< / t i t l e > < / head> <body> <form i d = " form1 " runat=" server " > <asp : GridView ID= " GridView1 " DataSourceID= " SqlDataSource1 " runat=" server " / > c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 40/45
Příklad - práce s databází 2/3 <asp : SqlDataSource ID= " SqlDataSource1 " runat=" server " SelectCommand= "SELECT [ au_id ], [ au_lname ], [ au_fname ], [ phone ], [ address ], [ c i t y ], [ s t a t e ], [ z i p ], [ c o n t r a c t ] FROM [ authors ] " ConnectionString="<%$ ConnectionStrings : Pubs %>" / > < / form> < / body> < / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 41/45
Příklad - práce s databází 3/3 c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 42/45
Příklad - User Controls, usercontrols.aspx 1/2 <%@ Page Language= "C# " %> <%@ Register TagPrefix=" tuo " TagName= " message " Src= " u s e r c o n t r o l s. ascx " %> <html> <body style=" f o n t : 10 pt verdana " > <h3>a Simple User Control< / h3> <tuo : message Text= " Hello World! " Color= " blue " runat=" server " i d = " Message " / > < / body> < / html> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 43/45
Příklad - User Controls, usercontrols.ascx 2/2 < script language= "C# " runat=" server " > p u b l i c S t r i n g Color ; p u b l i c S t r i n g Text ; < / script> <span i d = " Message " style=" c o l o r :<%=Color%>" > <%=Text%>< / span> c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 44/45
Reference http://www.asp.net Tutoriály http://www.asp.net/quickstart/ aspnet/default.aspx. c 2006 Michal Krátký, Miroslav Beneš Tvorba informačních systémů 45/45