• Author / Uploaded
• Miguel Sanchez

Citation preview

Ciudad de México,08 de mayo de 2020.

Página Web de Agencia de Coches Problemática Diseñar una página web a partir de la entidad-relación siguiente: Se desea diseñar una base de datos para almacenar y gestionar la información empleada por una empresa dedicada a la venta de automóviles, teniendo en cuenta los siguientes aspectos: La empresa dispone de una serie de coches para su venta. Se necesita conocer la matrícula, marca y modelo, el color y el precio de venta de cada coche. Los datos que interesa conocer de cada cliente son el NIF, nombre, dirección, ciudad y número de teléfono: además, los clientes se diferencian por un código interno de la empresa que se incrementa automáticamente cuando un cliente se da de alta en ella. Un cliente puede comprar tantos coches como desee a la empresa. Un coche determinado solo puede ser comprado por un único cliente. El concesionario también se encarga de llevar a cabo las revisiones que se realizan a cada coche. Cada revisión tiene asociado un código que se incrementa automáticamente por cada revisión que se haga. De cada revisión se desea saber si se ha hecho cambio de filtro, si se ha hecho cambio de aceite, si se ha hecho cambio de frenos u otros. Los coches pueden pasar varias revisiones en el concesionario. Objetivo general Crear y diseñar una pagina web para una agencia de coches para publicidad y revisiones a clientes que así lo soliciten. Desarrollo 1. Para poder empezar a trabajar la página Web, la correcta forma de trabajar paginas dinámicas donde manejamos datos o alojamos datos simplemente es empezando por crear o diseñar la base de datos donde alojaremos dicha información. Creamos el diagrama Entidad-Relación en base a la problemática que anteriormente se nos dio y quedaría de la siguiente forma:

Ciudad de México,11 de mayo de 2020.

2

Ilustración 1. Diagrama Entidad-Relación de la base de datos.

Inmediatamente creamos la base de datos que es donde almacenaremos los datos que nos proporcionan los clientes al momento de comprar, además del catalogo de coches disponibles a la venta:

Ilustración 2. Base de datos "agencia_coches".

2. Empezamos por diseñar la pagina web de la agencia de coches, para este caso se invento el nombre y un logo para la misma. Se empezó con la pagina de inicio de la agencia “AUTO-MEX”:

Ciudad de México,11 de mayo de 2020.

3

Ilustración 3. Logo de la agencia "AUTO-MEX".

3. Una vez teniendo la forma en que la base de datos va a operar las peticiones en la página web, debemos seleccionar un framework para la base de nuestra página, el que seleccione fue “Bootstrap”:

Ilustración 4. Framework utilizado en la página.

4. La forma de implementarlo es muy sencilla, se debe de contar con “XAMPP” como servidor local y la plantilla que vayamos a utilizar de Bootstrap se implementara de la siguiente manera:

Ciudad de México,11 de mayo de 2020.

4

Ilustración 5. Implementación de Bootstrap en Xampp.

Como se ve en la ilustración 5, la parte encerrada de color rojo es la implementación de Bootstrap en estilos y JavaScript para nuestro sitio web, así como elementos adicionales de diseño que se implementaron en la página. 5. Empezamos por programar toda la parte de la presentación de la pagina web como es el inicio, misión, visión e información de contacto de la agencia de autos: Empezando por la pagina de bienvenida tenemos el siguiente código que básicamente es la cabecera y aparece en prácticamente toda la página web:

Ciudad de México,11 de mayo de 2020.

5

Ilustración 6. Cabecera del sitio web.

La parte que se encuentra encerrada en rojo, es el menú lateral de todo el sitio web para movernos entre los diferentes accesos a la página web.

6. La demás parte de la sección de la pagina de bienvenida, simplemente es una slider de imágenes alusivas a la agencia de coches, la muestra del logo y un pie de página:

Ciudad de México,11 de mayo de 2020.

6

Ilustración 7. Programación de slider.

Ilustración 8. Programación de la imagen del logo y el pie de página.

Ciudad de México,11 de mayo de 2020.

7

Como podemos observar en la ilustración 7 simplemente es la colocación de las imágenes utilizadas en el carrusel de la pagina de bienvenida y esto es así de simple ya que Bootstrap implemente la programación del slider por su cuenta y simplemente se necesita de colocar las imágenes. Y en la ilustración 8 simplemente de forma estética se coloco el logo por debajo del carrusel y un pie de pagina con la parte encerrada en color rojo de la ilustración.

7. Como ya mencionamos que el encabezado es prácticamente el mismo para todas las secciones de la página, entonces nos enfocaremos en el desarrollo de lo que contiene cada sección del encabezado, empezando por la misión de la empresa:

Ilustración 9. Desarrollo del texto de la sección misión.

8. De la misma forma la sección de la visión de la empresa:

Ilustración 10. Desarrollo del texto de la sección visión.

Ciudad de México,11 de mayo de 2020.

8

En esta sección para mejor diseño, como lo estamos manejando aspectos en forma de listas, se implementaron viñetas en HTML con estilos como se observan en la parte encerrada de rojo de la ilustración 10. 9. Para concluir la parte de las secciones del encabezado tenemos el de información de contacto de la empresa:

Ilustración 11. Desarrollo del texto de la sección información.

Hasta aquí tenemos toda la parte de bienvenida de la pagina web, una bienvenida, misión, visión e información de contacto. Aun no se utiliza la conexión con la base de datos.

10. En el encabezado contamos con una sección que se llama “Inicio”, no es más que el catálogo de los vehículos que se ofertan en la agencia AUTOMEX (se colocaron pocos ejemplares para que sirvan únicamente de forma ejemplificativa), cabe destacar además que el encabezado sigue estando de la misma forma en esta sección, pero lo que cambia es lo siguiente:

Ciudad de México,11 de mayo de 2020.

9

Ilustración 12. Creación de un menú en forma de lista dentro de la sección del catálogo.

Con los estilos y diseño de Bootstrap se creo ese pequeño menú en forma de lista que contiene varias secciones adicionales que nos llevaran al registro de clientes y revisiones que se realicen a los vehículos.

Ilustración 13. Catálogo de los vehículos disponibles.

De igual forma con estilos de Bootstrap se implemento la parte de los catálogos de los vehículos con forma de mosaicos y un dato importante para mostrar una pequeña descripción del articulo y una imagen alusiva al vehículo, se uso JavaScript como se muestra en la parte encerrada de color rojo de la ilustración 13. Eso mismo se repite para los 6 vehículos que sirven de muestra para esta práctica. Ciudad de México,11 de mayo de 2020.

10

11. Ahora si empiezan las conexiones con la base de datos “agencia_coches” para ello primero mostrare la implementación de la comunicación que ocuparan varios archivos PHP en la práctica:

Ilustración 14. Establecimiento de la conexión a la base de datos.

Después manejamos el primer elemento del menú en forma de lista del catálogo, que no es mas que nada que las características de los vehículos que oferta la agencia en forma de tabla directamente consultada a la base de datos o en tiempo real:

Ilustración 15. Consulta en forma de tablas de los vehículos disponibles.

En la ilustración 15 hay dos aspectos a explicar, primeramente, con la parte encerrada en color rojo tenemos la instanciación de la conexión de la base de datos que tenemos en la ilustración 14 además de la consulta a la tabla en

Ciudad de México,11 de mayo de 2020.

11

concreto que contiene los datos que necesitamos y en la parte encerrada de color amarillo cada vez que se consulto una fila la va ir almacenando en una tabla ya definiendo sus columnas.

12. Para la siguiente sección del menú en lista tenemos un formulario que registra clientes en la base de datos y la estructura del formulario seria la siguiente:

Ilustración 16. Programación del formulario para el registro de clientes.

Claro que el formulario por si solo no puede enviar los datos que almacena en el a la base de datos para ello es necesario implementarle la acción de hacia dónde va a mandar la información y a través de que método (en este caso es POST), como se observa en la parte encerrada de color rojo.

Ciudad de México,11 de mayo de 2020.

12

Ilustración 17. Inserción a la tabla Cliente.

Simplemente el formulario dirigirá toda la información a este archivo PHP de la ilustración 17 e insertará a la tabla correspondientemente a las variables que tenga asignadas (parte encerrada en color rojo).

13. En la última sección del menú en forma de lista tenemos un formulario que revisara ciertas condiciones del automóvil mediante un checklist y lo implementamos de la siguiente forma:

Ciudad de México,11 de mayo de 2020.

13

Ilustración 18. Implementación del formulario tipo "checklist".

Como observamos de igual manera es un simple formulario, pero en la parte encerrada de color rojo tiene la acción de adónde va a dirigir la información y por qué método lo va a realizar (POST). Y también debemos de colocar la programación que va a realizar la carga de la información a la base de datos mediante en siguiente archivo PHP:

Ciudad de México,11 de mayo de 2020.

14

Ilustración 19. Implementación de la conexión a la base de datos.

Ilustración 20. Parte de la inserción de la información a la base de datos.

Ciudad de México,11 de mayo de 2020.

15

Simplemente se realiza una nueva colocación de la información que el encargado coloca de cada vehículo quitando el formulario y al mismo tiempo realiza la inserción de esos datos en la base. Resultados A continuación, se mostrarán las capturas de pantalla del producto final implementada la programación previamente explicada:

Ilustración 21. Página de bienvenida (parte 1).

Ilustración 22. Página de bienvenida (parte 2).

Como podemos observar en la parte que esta encerrada en rojo de la ilustración 21, es el encabezado que acompaña a prácticamente todas las páginas del sitio Ciudad de México,11 de mayo de 2020.

16

web. Para las demás paginas simplemente se mostrará el contenido y no el encabezado.

Ilustración 23. Página de la sección misión.

Ilustración 24. Página de la sección visión.

Ciudad de México,11 de mayo de 2020.

17

Ilustración 25. Página de la sección información.

Con las imágenes anteriores tenemos toda la parte de la presentación de la agencia “AUTO-MEX” y ahora nos dirigimos a la parte de la sección de Inicio y tenemos lo siguiente:

Ilustración 26. Página de la sección de Inicio (Catalogo).

Cabe destacar que en esta sección de la ilustración 26 tenemos una pequeña previsualización dando clic en donde dice “Ver detalles>>” y nos arrojara lo siguiente:

Ciudad de México,11 de mayo de 2020.

18

Ilustración 27. Página emergente de detalles seleccionada.

De igual forma con la sección de “Automóviles en venta” como se muestra en la siguiente imagen:

Ilustración 28. Página de la sección de "Automóviles en venta".

En la ilustración 28 vemos que aparece una lista en forma de tabla que esta es consultada en tiempo real con la base de datos de la agencia. También con la sección “Registro de clientes” que no es mas que un formulario de registro que enviara directamente los datos a la base, como se muestra a continuación: Ciudad de México,11 de mayo de 2020.

19

Ilustración 29. Página de registro de clientes.

Y por último tenemos el formulario de la sección de “Revisión de automóviles” como se muestra en la siguiente imagen:

Ilustración 30. Página de la sección de revisión del automóvil.

Ciudad de México,11 de mayo de 2020.

20

En esta sección una vez llenado y enviado la información de la revisión de unos de los coches nos mostrara lo siguiente dependiendo de la información que ingresemos:

Ilustración 31. Descripción de la información ingresada.

Y básicamente eso seria todo el funcionamiento de la pagina web de la agencia “AUTO-MEX”, implementado los formularios necesarios, así como un catálogo de forma únicamente demostrativa y funcional.

Ciudad de México,11 de mayo de 2020.

21

Conclusiones El uso de tecnologías es cada vez más común y por ello son necesarias para la implementación de actividades que únicamente antes podíamos hacer de forma presencial como ir a una agencia y ver modelos de automóviles. El uso de las paginas web como una ventana para poder ver y hacer estas acciones es cada vez más frecuente y como estas están cada vez mas avanzadas en cuanto a diseño, animaciones e interacciones con las páginas. Implementación de lenguajes como HTML, CSS y PHP van de la mano para la realización de páginas dinámicas e interactivas que sirven como recolectores de datos dependiendo de las necesidades de las mismas.

Ciudad de México,11 de mayo de 2020.

22