creando la aplicacion tutorial

Gabriel Flores

UNIVERSIDAD TÉCNICA DE AMBATO

FACULTAD DE CIENCIAS HUMANAS Y DE LA EDUCACIÓN

CARRERA DE DOCENCIA EN INFORMÁTICA

Aplicación Web

Sexto Semestre Docencia en Informática

Lenguaje de Programación II

Gabriel Flores

Gabriel Flores

CREANDO LA APLICACIÓN WEB

Ingrese a Visual Basic le damos clic en archivo y seleccione Nuevo proyecto.

Caso contrario sola mente le damos clic en nuevo proyecto en la presentación principal de Visual

Basic:

Gabriel Flores

De esa forma aparecerá una pantalla en la que vamos a crear el proyecto, colocándole nombre, la

ubicación y el tipo de aplicación que vamos a crear.

En el cuadro de diálogo Nuevo proyecto:

• Abra las plantillas de Visual C #

• Seleccione la plantilla ASP.NET MVC 3 de Aplicaciones Web

• Establezca el nombre del proyecto en nuestro caso sería MvcDemo3

• Ajuste la ubicación del disco a algo como c: \ w3schools_demo

• Haga clic en Aceptar

Cuando el cuadro de diálogo Nuevo proyecto se abre:

• Seleccione la plantilla de aplicación de Internet

• Seleccione HTML5 marcado

• Haga clic en Aceptar

Gabriel Flores

Visual Studio creará un proyecto muy parecido a esto:

Ahora vamos a explorar el contenido y a modificar los archivos y carpetas en la siguiente parte de

de éste tutorial.

Gabriel Flores

MVC Layout Agregar un Layout

El archivo _Layout.cshtml representan el diseño de cada página de la aplicación. Se encuentra en

la carpeta Shared dentro de la carpeta Views.

Ahora abra el archivo y cambie el contenido con esto:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Inicio", "Index", "Home")</li> <li>@Html.ActionLink("Listas", "Index", "Listas")</li> <li>@Html.ActionLink("Acerca de:", "About", "Home")</li> </ul> <section id="main"> @RenderBody() <p>Nadie supera nuestra calidad y nuestra atención</p> </section> </body> </html>

Gabriel Flores

Agregar Site.css

La hoja de estilo para la aplicación se llama Site.css. Se encuentra en la carpeta de contenido.

Abra el archivo Site.css y cambie el contenido con esto: body { font: Comic Sans MS, Arial, ; background-color: #165670; color: #000000; } h1 { border-bottom: 3px solid #17097D; font: Arial, serif; color: #0B156A; } #main { padding: 20px; background-color: #BBECFE; border-radius: 0 4px 4px 4px; } a { color: #F09732; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li

Gabriel Flores

{ display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 3.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #0D5E7C; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ table.data { background-color:#FFFFFF; border:1px solid #000000; border-collapse:collapse; width:100%; } table.data th { background-color:#e8eef4; border:1px solid #c3c3c3; padding:3px; } table.data td { border:1px solid #c3c3c3; padding:3px; }

Gabriel Flores

Home Controller

La carpeta de Controller contiene las clases de controladores encargados de la tramitación de entrada del usuario y respuestas. MVC requiere el nombre de todos los controladores para acabar con "Controller". En nuestro ejemplo, Visual Web ha creado los siguientes archivos:

"HomeController.cs" (para el hogar y sobre las páginas)

"AccountController.cs" (para el registro en páginas)

El archivo de controlador en nuestros "HomeController.cs" de aplicación, define los dos controles "Índice" y "Acerca de". Cambie el contenido del archivo de HomeController.cs con esto: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcDemo3.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Bienvenidos"; return View(); } public ActionResult About() { return View(); } } }

Gabriel Flores

Index. Cshtml

El archivo Index.cshtml representa la página de inicio de la aplicación. Es de archivos por defecto de la aplicación. Se encuentra en la carpeta Views dentro de Home, le da doble clic en el archivo

Coloque el siguiente contenido en el archivo: @{ViewBag.Title = "Home Page";} <font size=40 color="#ff9933" >Produ OnLine</font> <br></br> <img id="irc_mi" src="http://mec-s2-p.mlstatic.com/8418-MEC20004071529_112013-O.jpg" width="300" height="175" style="margin-top: 10px;"> <p>Compre productos para uso doméstico y oficina en casa online <p>Dirección: Av. El Ejercito y La A</p> <h1> </h1> <p>-Mantenimiento de electrodomesticos </p> <p>-Seguridad para dispositivos moviles</p> <p>-Almacenamiento online</p> <p>-Pagos de servicios</p> <p>-Recargas moviles</p> <p>-Simert</p>

Gabriel Flores

About.cshtml

El archivo About.cshtml representa la página “Acerca de:” de la aplicación. El archivo lo encontramos en la carpeta Views dentro de Home.

Coloque el siguiente contenido en el archivo: @{ViewBag.Title = "About Us";} <font size=40 color="#ff9933" >Hacerca de:</font> <p> </p1> <img id="irc_mi" src="http://cdn1.clasificados.com/co/pictures/photos/000/090/947/original_DSC01359.JPG" width="220" height="165" style="margin-top: 10px;"> <p>Somos una empresa destinada a la venta de productos importados, entregamos sus compras en su hogar con un pequeño pequeño pago extra por transporte. </p> <p>Nuestros precios superan a los de la competencia, con una buena atención y con productos de calidad. Gabriel Flores </p>

Gabriel Flores

Creando la Base de Datos

Visual Web viene con una base de datos gratuita de SQL denominado SQL Server Compact. La base de datos necesaria para este tutorial se puede crear con estos sencillos pasos: • Haga clic derecho en la carpeta App_Data en la ventana Explorador de soluciones • Seleccione Añadir, Nuevo elemento • Seleccionar base de datos de SQL Server Compact Local * • Nombrar la base de datos MvcDemo3.sdf. • Haga clic en el botón Agregar

Aparecerá la siguiente ventana, seleccionamos la opción de Base de Daros local SQL Server Compact 4.0.

Gabriel Flores

Colocamos el nombre de nuestra base de datos y clic en aceptar. Ahora aparecerá algo así:

Dándole doble clic en la Base de Datos creada, podemos acceder a otro lugar que se ve algo así:

Ahora abrimos la carpeta tablas y en el archivo ListasDBs le damos clic derecho y después en la opción editar esquema de tabla:

Gabriel Flores

Llenamos los datos de ésta forma:

Gabriel Flores

El modelo de base de datos necesaria para este tutorial se puede crear con estos sencillos pasos: • En el Explorador de soluciones, haga clic en la carpeta Models y seleccione Agregar y Clase. • Nombrar los ListaDB.cs clase, y haga clic en Agregar.

Editar la clase con el siguiente codigo: using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; using MvcDemo3.Models; namespace MvcDemo3.Models { public class ListaDB { public int ID { get; set; } public string Producto { get; set; } public string Calidad { get; set; } public string Procedencia { get; set; } public string Precio { get; set; } public string Observaciones { get; set; } } public class ListaDBContext : DbContext { public DbSet<ListaDB> Listas { get; set; } } }

Gabriel Flores

Agregar Controller

El controlador de base de datos necesaria para este tutorial se puede crear con estos sencillos pasos: • En el Explorador de soluciones, haga clic en la carpeta Controller y seleccione Agregar y Controller • Establecer nombre del controlador de ListaController • Seleccionar plantilla: Controlador con lectura / escritura acciones y opiniones, utilizando Entity Framework • Seleccione la clase del modelo: ListaDB (MvcDemo3.Models) • Seleccione clase de contexto de datos: ListaDBContext (MvcDemo3.Models) • Seleccione vistas Razor (CSHTML) • Haga clic en Agregar Colocamos el código siguiente en el archivo: using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; using MvcDemo3.Models; namespace MvcDemo3.Controllers { public class ListasController : Controller { private ListaDBContext db = new ListaDBContext(); // // GET: /Listas/ public ViewResult Index() { return View(db.Listas.ToList()); } // // GET: /Listas/Details/5 public ViewResult Details(int id) { ListaDB listadb = db.Listas.Find(id); return View(listadb); } // // GET: /Listas/Create public ActionResult Create() { return View();

Gabriel Flores

} // // POST: /Listas/Create [HttpPost] public ActionResult Create(ListaDB listadb) { if (ModelState.IsValid) { db.Listas.Add(listadb); db.SaveChanges(); return RedirectToAction("Index"); } return View(listadb); } // // GET: /Listas/Edit/5 public ActionResult Edit(int id) { ListaDB listadb = db.Listas.Find(id); return View(listadb); } // // POST: /Listas/Edit/5 [HttpPost] public ActionResult Edit(ListaDB listadb) { if (ModelState.IsValid) { db.Entry(listadb).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(listadb); } // // GET: /Listas/Delete/5 public ActionResult Delete(int id) { ListaDB listadb = db.Listas.Find(id); return View(listadb); } // // POST: /Listas/Delete/5 [HttpPost, ActionName("Delete")] public ActionResult DeleteConfirmed(int id) { ListaDB listadb = db.Listas.Find(id);

Gabriel Flores

db.Listas.Remove(listadb); db.SaveChanges(); return RedirectToAction("Index"); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } }

Agregamos la configuración para la Conexión de la base de Datos

En el Explorador de soluciones dan doble clic en web para colocar el código que viene a continuación:

<?xml version="1.0"?>  <configuration> <connectionStrings> <add name="ListaDBContext" connectionString="Data Source=|DataDirectory|\Listas.sdf" providerName="System.Data.SqlServerCe.4.0"/> </connectionStrings> <appSettings> <add key="webpages:Version" value="1.0.0.0"/> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings>

Gabriel Flores

<system.web> <compilation debug="true" targetFramework="4.0"> <assemblies> <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> </assemblies> </compilation> <authentication mode="Forms"> <forms loginUrl="~/Account/LogOn" timeout="2880" /> </authentication> <membership> <providers> <clear/> <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" applicationName="/" /> </providers> </membership> <profile> <providers> <clear/> <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/" /> </providers> </profile> <roleManager enabled="false"> <providers> <clear/> <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" /> <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" /> </providers> </roleManager> <pages> <namespaces> <add namespace="System.Web.Helpers" /> <add namespace="System.Web.Mvc" />

Gabriel Flores

<add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="System.Web.WebPages"/> </namespaces> </pages> </system.web> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <modules runAllManagedModulesForAllRequests="true"/> </system.webServer> <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" /> <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0" /> </dependentAssembly> </assemblyBinding> </runtime> </configuration>

Listo, la configuración está completa ahora vamos a mirar como quedo nuestro proyecto: Pantalla Inicio

Gabriel Flores

Podemos colocar imágenes gifs y cualquier gadget siempre y cuando sea en HTML obviamente en el lugar donde queremos que aparezca el elemento u objeto que queremos tener en nuestra página.

La creación y visualización de tablas la tenemos en la segunda pestaña de nuestra página Web Eso es todo, espero que les sirva este documento.

creando la aplicacion tutorial

Documents