[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
UNIVERSIDAD TÉCNICA DE AMBATO FACULTAD DE CIENCIAS HUMANAS Y DE LA EDUACIÓN CARRERA DE DOCENCIA EN INFORMÁTICA
CRISTHIAN TAMAMI SEXTO SEMESTRE ING. MG. ANDRES MORALES OCTUBRE 2014- MARZO 2015
Diseñado por: Cristhian Tamami
Página 1
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
PRODUCTO 2DO ELEMENTO MANUAL INTRODUCCION MVC
Diseñado por: Cristhian Tamami
Página 2
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
MANUAL DISEÑANDO PAGINAS WEB EJEMPLO CREANDO DE UN MODELO (MOVIESMCV) DISEÑANDO UNO PROPIO Elaborar una aplicación web con tres páginas: Inicio, Producto, Acerca de: La página Inicio: debe tener un título, un párrafo de introducción. La página Producto: con al menos 5 productos y al menos 5 campos o columnas y debe permitir añadir más. La página Acerca de: información de productos, empresa ficticia, usted escoge. Aspecto personalizado (colores, fuente, fondo, etc…….). Primero copiamos y editamos según el código de:
CODIGO LAYOUTHG <!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("Reservaciones", "Index", "Hoteles")</li> <li>@Html.ActionLink("Acerca de", "About", "Home")</li> </ul> <section id="main"> @RenderBody()
Diseñado por: Cristhian Tamami
Página 3
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
<p style="color:blue">Sitio Web: www.hotelemperador.com</p> <p style="color:red">Diseñador: Cristhian Tamami</p> </section> </body> </html> Segundo copiamos y editamos el cogido site css que hace referencia al color de nuestra página web:
CODIGO SITE CSS body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } a { color: #034af3; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; }
Diseñado por: Cristhian Tamami
Página 4
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
ul#menu li a:hover { background-color: #ffffff; } /* 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 #c3c3c3; 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; } Tercero copiamos y editamos el código HOME CONTROLLER PARA NUESTRA PAGINA WEB:
CODIGO HOME CONTROLLER using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;
Diseñado por: Cristhian Tamami
Página 5
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
namespace MvcEmperador.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { return View(); } } }
Cuarto copiamos y editamos el código INDEX que nos servirá para mostrar información de nuestra página web:
CODIGO INDEX @{ViewBag.Title = "Home Page";} <h1 ALIGN =center style = "color: #CD853F">HOTEL EMPERADOR (AmbatoEcuador)</h1> <p ALIGN =center><b>BIENVENIDOS</b></p> <div align="center"><img 3144.png"></div
src="http://reservas.com.ec/images/establecimientos/213-
<p>Hotel EMPERADOR en la ciudad de Ambato, pioneros en el mercado Hotelero cuatro estrellas como en las mejores ciudades del mundo pone a sus órdenes nuestros servicios de Hospedaje, Alimentación, Spa y Organización de Eventos.</p> <p ALIGN =center><b>QUIENES SOMOS</b></p> <p><b>Misión</b></p> <hr size="1px" color="Silver" <p>Brindar un servicio de excelencia en un ambiente de confort y seguridad, convirtiéndonos en el hotel de elección para hombres de negocios y turistas nacionales e internacionales, ofreciendo diversión de primera clase en nuestro Casino y la mejor alternativa para organizar eventos sociales o corporativos.</p> <hr size="1px" color="Silver" <p><b>Visión</b></p> <hr size="1px" color="Silver" <p>Ser líderes en el mercado hotelero y de entretenimiento nacional por la calidad de nuestros servicios, la satisfacción de nuestros clientes y el compromiso de nuestros empleados.</p> <hr size="1px" color="Silver" <p><b>Objetivos</b></p> <hr size="1px" color="Silver" <p>Casino Hotel Emperador - Ambato, Ecuador
Diseñado por: Cristhian Tamami
Página 6
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
Ofertar servicios de alojamiento, entretenimiento, organización de eventos, restaurante, bar y Spa de primer nivel logrando la plena satisfacción de nuestros clientes y posicionarnos como el mejor Hotel y Casino de la ciudad. Casino Hotel Emperador - Ambato, Ecuador Elevar el nivel técnico y profesional de nuestros empleados propiciando su capacitación y entrenamiento continuo para lograr la idoneidad del 100% de los mismos. Casino Hotel Emperador - Ambato, Ecuador Incrementar el valor de nuestra oferta con servicios añadidos que permitan satisfacer todas las necesidades de nuestros clientes, estimulando la innovación permanente.</p> <hr size="1px" color="Silver" <p><b>Recursos Humanos</b></p> <hr size="1px" color="Silver" <p>Gerente General Alfonso Pérez Subgerente de Alojamiento Paulina Sánchez Director de Recursos Humanos Miguel Noroña Contadora Teresa Estrella Gerente de Marketing y Ventas Mary Córdova Jefe de Mantenimiento Carlos Rodríguez Chef Ejecutivo Mario Chagñay Housekeeper Josue Chuncha Parqueadero Rodrigo Escalante Sistemas Santiago García</p> <hr size="1px" color="Silver" Quinto copiamos y editamos el código INDEX que nos servirá para mostrar información de nuestra página web:
CÓDIGO ABOUT.CSHTML @{ViewBag.Title = "SERVICIOS";} <h1 ALIGN=center>SERVICIOS</h1> <p><b>"HOSPEDAJE"</b> </p> <p>Contamos con 59 habitaciones estándar, 3 suites ejecutivas y 1 suite presidencial. Todas excelentemente decoradas y equipadas, alfombradas, caja de seguridad, frigo bar, TV Cable y conexión inalámbrica a Internet.. Disponen de baño privado con tina y secador de cabello. Cierre de las habitaciones con tarjetas magnéticas único en la ciudad. </p> <p><b>"SALA DE CONVENCIONES"</b> </p> <p>Salones de uso múltiple Tres Juanes y Acrópolis: para seminarios, conferencias, reuniones sociales entre otros. </p> <p><b>"PISCINA Y SPA"</b> </p> <p>Piscina y SPA: con hidromasaje, gimnasio, sala de masajes, sala de relax, sauna y turco.
Diseñado por: Cristhian Tamami
Página 7
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
Disponemos de membresías especialmente diseñadas de acuerdo a su requerimiento. Consúltenos. </p> <p><b>"RESTAURANT Y CAFETERIA JULIO CESAR" </b></p> <p>Con capacidad para 100 personas. Ubicado en la última planta con una vista espectacular de la ciudad. Ofertamos excelentes vinos y coctelería internacional. Preparamos la mejor comida nacional e internacional. </p> <h1><p ALIGN=center><b>"UBICACIÓN" </b></p></h1> Situado en el centro de la ciudad de Ambato, en la arteria principal de la misma, cerca al parque Cevallos, en sus alrededores se desarrolla toda la actividad comercial de la cuidad. <img src="http://www.hotelesambato.com/imagenes/casinoemperador_mapa.jpg">
CREANDO LA BASE DE DATOS (TABLA) 1. Crear base de datos Nos dirigimos a App_Data (clic derecho)
En la carpeta tabla
2. Crear Tabla
Diseñado por: Cristhian Tamami
Página 8
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
3. Crear Modelo Carpeta Model Añadir Clase
Diseñado por: Cristhian Tamami
Página 9
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
CODIGO HOTEL DB.CS using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity;
namespace MvcEmperador.Models { public class HotelDB { public int ID { get; set; } public string Nombre{ get; set; } public string Apellido { get; set; } public string Cédula { get; set; } public string Email { get; set; } public string Teléfono { get; set; } public string Habitación { get; set; } public string Costo { get; set; } public DateTime Fecha { get; set; } } public class HotelDBContext : DbContext { public DbSet<HotelDB> Hoteles { get; set; } } }
Esta es una parte muy importante al crear nuestra página web cambiar mediante la base de datos que se tenga para que no genere errores.
Public class Hotel DB public class HotelDBContext : DbContext { public DbSet<HotelDB> Hoteles { get; set; } }
4. Añadir Controlador Carpeta Controlador (Agregar, Controller)
Diseñado por: Cristhian Tamami
Página 10
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
addController:HotelesController Template Model Class HotelDB(MVCEmperador.Models)
Volver a generar
Diseñado por: Cristhian Tamami
Página 11
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
Ejecutado correctamente:
5. Connectios. Nos dirigimos a web config Y solo modificamos esta parte:
CODIGO PARA LA WEB. CONFIG <configuration> <connectionStrings> <add name="HotelDBContext" connectionString="Data Source=|DataDirectory|\Hoteles.sdf" providerName="System.Data.SqlServerCe.4.0"/> </connectionStrings>
EJECUCIÓN: INICIO
Diseñado por: Cristhian Tamami
Página 12
[LENGUAJE DE PROGRAMACION II]
8 de Diciembre del 2014
RESERVACIONES
ACERCA DE:
Diseñado por: Cristhian Tamami
Página 13
[LENGUAJE DE PROGRAMACION II]
Diseñado por: Cristhian Tamami
8 de Diciembre del 2014
Página 14