Want to make creations as awesome as this one?

Transcript

Código limpio

START

Buenas prácticas a la hora de limpiar el código

ESTRUCTURA TU CONTENIDO

[Subtítulo 0X]

Xampp

- BBDD: ejercicio1- Tabla: meteo- Datos

Xampp

ConexionPDO.php

Original

ConexionPDO.php

Código mejorado

Mejoras del código:- Cambiamos el usuario a root.-Introducimos el nombre de la base de datos.

meteodata.php

Original

meteodata.php

Código mejorado

Mejoras del código.- Manejo de los errores PDO a través de bloques try-catch.- Clasificamos el tipo de petición en función de si es de mapa o de ciudad.-Uso de un JSON encode para la salida de los datos.-Manejo de una API externa y manejo de errores de cURL.

- script: para coger el mapa de Google Maps.- script: libreria jquery, para editar HMTL.-body: dimensiones mapa.

maps.html

original

index.html

Mejoras del codigo

Mejoras del código:-Cambio de google maps a leaflet.-Inclusión de la hoja de estilo de leaflet.

funciones.js

Original

funciones.js

Original

Mejoras del código.- DOMContentLoaded: Espera a que la página cargue y ejecuta dos funciones. - obtenerUbicacionYEnviar(): Obtiene y envía la ubicación del usuario al servidor. - enviarUbicacionYMostrarEnMapa(): Centra el mapa, envía datos al servidor y maneja la respuesta y errores.

funciones.js

Código mejorado

Mejoras del código.- mostrarEnMapa(latitud, longitud): Crea un mapa centrado en las coordenadas proporcionadas. Agrega un marcador en la ubicación actual del usuario en el mapa. - cargarMarcadoresCiudades(): Obtiene datos de ciudades desde el servidor. Muestra los marcadores de las ciudades en el mapa.

Resumen

Código mejorado

Mejoras del código.- mostrarMarcadores- case- tamaño

funciones.js

Código mejorado

Resultado - Original

Resultado-Mejorado