[WikiDyd] [TitleIndex] [WordIndex

Laboratorium projektowania i wytwarzania systemów informatycznych opartych na graficznym interfejsie użytkownika


Materiały zostały opracowane w ramach realizacji Programu Rozwojowego Politechniki Warszawskiej.

http://prpw.iem.pw.edu.pl/images/KAPITAL_LUDZKI.gifhttp://prpw.iem.pw.edu.pl/images/EU+EFS_P-kolor.gif

http://www.pr.pw.edu.pl/ jest projektem współfinansowanym przez Unię Europejską w ramach Europejskiego Funduszu społecznego (działanie 4.1.1 Programu Operacyjnego Kapitał Ludzki) i ma na celu poprawę jakości kształcenia oraz dostosowanie oferty dydaktycznej Politechniki Warszawskiej do potrzeb rynku pracy. Będzie on realizowany przez Uczelnię w latach 2008-2015.

Ćwiczenie Nr 8

Realizacja prostego systemu internetowego opartego na wzorcu MVC

Autor: dr inż. Robert Szmurło

1. Cel ćwiczenia

Zapoznanie się z wzorcem projektowym MVC (Model - Widok - Kontroler) na przykładzie refaktoringu prostej aplikacji. Student zdobywa doświadczenie i praktyczną wiedzę dotycząca dostosowania istniejącego projektu aplikacji internetowej w technologii Microsoft .NET do wzorca MVC.

2. Zakres badań

Koncepcja wzorca MVC

Wzorzec umożliwia separację logiki programu (modelu) od tego, w jaki sposób użytkownik wprowadza zmiany w danych oraz od tego, jak dane są prezentowane użytkownikowi. W ten sposób modyfikacje jednego komponentu wcale lub minimalnie wpływają na pozostałe.

  1. Model - opisuje dane i całą logikę programu - wszystkie zależności między poszczególnymi danymi.
  2. Widok - wyświetla dane przechowywane w modelu, w pożądanej przez użytkownika formie; może istnieć wiele widoków tego samego modelu.
  3. Kontroler - przekształca żądania użytkownika na żądania zrozumiałe dla modelu; może istnieć wiele różnych kontrolerów dla tego samego modelu.

Schemat działania w modelu MVC:

  1. kontroler modyfikuje dane modelu
  2. model stosownie do zmian weryfikuje i ewentualnie zgodnie z zależnościami uaktualnia inne swoje dane;
  3. model informuje wszystkie widoki, że nastąpiły zmiany (może także wyszczególniać, które dane zostały zmienione);
  4. widoki są odświeżane stosownie do aktualnych danych modelu.

Wady i zalety MVC:

3. Program badań

Na samym początku należy uruchomić aplikację w wersji z pełnym kodem źródłowym na jednej stronie.

1. Kod aplikacji w jednym pliku:

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <%@ Import Namespace="System.Data" %>
   3 <%@ Import Namespace="System.Data.OleDb" %>
   4 
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6 <head runat="server">
   7     <title>Album płytowy</title>
   8     <script language="c#" runat="server">
   9         void Page_Load(object sender, System.EventArgs e)
  10         {
  11             if (!IsPostBack) {
  12                 String selectCmd = "select * from Plyty";
  13                 OleDbConnection myConnection =
  14                 new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source='c:\\Projekty\\svn\\pgui\\LN_2007\\NET\\baza.mdb'");
  15                     OleDbDataAdapter myCommand = new OleDbDataAdapter(selectCmd,
  16                         myConnection);
  17                         DataSet ds = new DataSet();
  18                         myCommand.Fill(ds, "plyty");
  19                         recordingSelect.DataSource = ds;
  20                         recordingSelect.DataTextField = "tytul";
  21                         recordingSelect.DataValueField = "id";
  22                         recordingSelect.DataBind();
  23             }        
  24                 
  25         }
  26         void SubmitBtn_Click(Object sender, EventArgs e)
  27         {
  28                 String selectCmd =
  29                 String.Format(
  30                 "select * from Nagrania where albumId = {0} order by id",
  31                 (string)recordingSelect.SelectedItem.Value);
  32                 OleDbConnection myConnection =
  33                 new OleDbConnection(
  34                 "Provider=Microsoft.Jet.OLEDB.4.0; Data Source='c:\\Projekty\\svn\\pgui\\LN_2007\\NET\\baza.mdb'");
  35                 OleDbDataAdapter myCommand = new OleDbDataAdapter(selectCmd,
  36                 myConnection);
  37                 DataSet ds = new DataSet();
  38                 myCommand.Fill(ds, "nagrania");
  39                 MyDataGrid.DataSource = ds;
  40                 MyDataGrid.DataBind();
  41         }
  42 
  43         protected void recordingSelect_SelectedIndexChanged(object sender, EventArgs e)
  44         {
  45         }
  46 </script>
  47 </head>
  48 <body>
  49     <form id="form1" runat="server" method="post">
  50     <div>
  51         Album płytowy (Atchitektura Jednolita (brak MVC))</div>
  52         <br />
  53         Wybierz płytę:<br />
  54         <asp:DropDownList ID="recordingSelect" runat="server" Width="332px" OnSelectedIndexChanged="recordingSelect_SelectedIndexChanged" AutoPostBack="True">
  55         </asp:DropDownList>
  56         <asp:Button ID="Button1" runat="server" Text="Pokaż" Width="99px" OnClick="SubmitBtn_Click" />
  57         <br />
  58         <br />
  59         <asp:GridView ID="MyDataGrid" runat="server" Width="433px">
  60         </asp:GridView>
  61       &nbsp;<br />
  62     </form>
  63 </body>
  64 </html>

2. W następnym kroku należy rozdzielić kod kontrolera-modelu pd kodu widoku.

Kod widoku:

   1 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
   2 
   3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4 
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6 <head runat="server">
   7     <title>Untitled Page</title>
   8 </head>
   9 <body>
  10     <form id="form1" runat="server">
  11         <div>
  12             Album płytowy (Widok-Kontroler)</div>
  13         <br />
  14         Wybierz płytę:<br />
  15         <asp:DropDownList ID="recordingSelect" runat="server" AutoPostBack="True" Width="332px">
  16         </asp:DropDownList>
  17         <asp:Button ID="Button1" runat="server" OnClick="SubmitBtn_Click" Text="Pokaż" Width="99px" />
  18         <br />
  19         <br />
  20         <asp:GridView ID="MyDataGrid" runat="server" Width="433px">
  21         </asp:GridView>
  22     </form>
  23 </body>
  24 </html>

Kod kontroler_widok:

   1 using System;
   2 using System.Data;
   3 using System.Configuration;
   4 using System.Web;
   5 using System.Web.Security;
   6 using System.Web.UI;
   7 using System.Web.UI.WebControls;
   8 using System.Web.UI.WebControls.WebParts;
   9 using System.Web.UI.HtmlControls;
  10 using System.Data.OleDb;
  11 
  12 public partial class _Default : System.Web.UI.Page 
  13 {
  14     public void Page_Load(object sender, System.EventArgs e)
  15     {
  16         if (!IsPostBack)
  17         {
  18             String selectCmd = "select * from Plyty";
  19             OleDbConnection myConnection =
  20             new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source='c:\\Temp\\baza.mdb'");
  21             OleDbDataAdapter myCommand = new OleDbDataAdapter(selectCmd,
  22                 myConnection);
  23             DataSet ds = new DataSet();
  24             myCommand.Fill(ds, "plyty");
  25             recordingSelect.DataSource = ds;
  26             recordingSelect.DataTextField = "tytul";
  27             recordingSelect.DataValueField = "id";
  28             recordingSelect.DataBind();
  29         }
  30 
  31     }
  32     public void SubmitBtn_Click(Object sender, EventArgs e)
  33     {
  34         String selectCmd =
  35         String.Format(
  36         "select * from Nagrania where albumId = {0} order by id",
  37         (string)recordingSelect.SelectedItem.Value);
  38         OleDbConnection myConnection =
  39         new OleDbConnection(
  40         "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=c:\\Temp\\baza.mdb");
  41         OleDbDataAdapter myCommand = new OleDbDataAdapter(selectCmd,
  42         myConnection);
  43         DataSet ds = new DataSet();
  44         myCommand.Fill(ds, "nagrania");
  45         MyDataGrid.DataSource = ds;
  46         MyDataGrid.DataBind();
  47     }
  48 }

4. Programy użyte w badaniach

Graficzny interfejs programu Okno menu głównego programu

5. Sprawozdanie

Sprawozdanie powinno składać się z następujących części:

  1. Działające programu skompilowanego do postaci wykonywalnej
  2. Archiwum zip z projektem
  3. Sprawozdania z dokładnym projektem implementacji wzorca MVC przygotowanym w UML

6. Literatura

  1. Materiały do wykładu.
  2. http://pl.wikipedia.org/wiki/Model-View-Controller


2015-09-23 06:44