Creando contenido con énfasis al desarrollo web. Presentando este pequeño proyecto de desarrollado, creado en HTML con Bootstrap 5 y utilizando el lenguaje de programación PHP 8 y como gestor de base de datos Mysql 5.0.4. Sitio web de libros donde se visualizan las imágenes y un menú útil para la navegación en las distintas páginas, contiene un panel administrativo el cual es un crud donde se puede registrar, eliminar, modificar y visualizar el contenido así gestionarlos para que se visualicen en el sitio.
Active repository
PHPNo license
⑂ 0 forks◯ 0 issuesUpdated Nov 14, 2022
<!DOCTYPE html> <html lang="es"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <title>Area Propiedades</title> </head> <body> <header class="container-fluid bg-danger text-white"> <div class="row p-4"> <div class="col-lg-1 col-sm-1 col-md-1"> <img src="img/logo.png" class="img-fluid" alt=""/> </div> <div class="col-lg col-sm col-md pt-3"> <h1 class="text-waring text-center align-middle">Contacto</h1> </div> </div> </header> <section class="container-fluid pt-5">Contactenos <div class="row"> <div class="col-sm-6"> <div class="card"> <h5> <label for="nombre-txt">Nombre</label> <input type="text" id="nombre-txt"class="form-control"> </div> <div class="form-group mt-5"> <label for="nombre-txt">Apellido</label> <input type="text" id="nombre-txt"class="form-control"> </div> <div class="form-group mt-5"> <label for="nombre-txt">Correo Electrónico</label> <input type="text" id="nombre-txt"class="form-control"> </div> <div class="form-group mt-5"> <label for="nombre-txt">Número de Teléfono</label> <input type="text" id="nombre-txt"class="form-control" </div> <div class="form-group mt-5"> <label for="nombre-txt">Mensaje</label> <input type="text" id="nombre-txt"class="form-control" </div> <div class="form-group mt-5"> window.areapropiedades = []; window.mostrarErrores = (errores)=>{ let erroresDiv = document.querySelector("#errores-div"); let ul = document.createElement("ul"); ul.classList.add("alert","alert-warning"); errores.forEach((pablo)=>{ let li = document.createElement("li"); li.innerText = pablo; ul.appendChild(li); }); erroresDiv.appendChild(ul); }; //Genera la tabla de pokemones del lado derecho window.cargarPokemones = ()=>{ let tbody = document.querySelector("#tabla-pokemones > tbody"); tbody.innerHTML = ""; //Limpiar window.propiedades.forEach((p)=>{ // Página de Inicio Quienes Somos Nuestros Agentes Contacto //Por cada propiedad voy a: //1. Crear un tr let tr = document.createElement("tr"); //2. Crear un td para cada cosa let tdNombre = document.createElement("td"); //acceder a un atributo del objeto, properties tdNombre.innerText = p.nombre; if(p.legendario){ tdNombre.classList.add("text-warning"); } let tdDescripcion = document.createElement("td"); tdDescripcion.innerHTML = p.descripcion; let tdLegendario = document.createElement("td"); //Operador ternario (equivalente a hacer un if, pero en una linea) tdLegendario.innerText = p.legendario? "Sí": "No"; let tdTipo = document.createElement("td"); if(p.tipo != ""){ //Mostrar el icono //1. Crear el img //TODO: Definir esto en una clase tdTipo.style="width: 80px"; let img = document.createElement("img"); img.src = "img/"+p.tipo; img.classList.add("img-fluid"); //2. Agregarlo al td tdTipo.appendChild(img); } //3. Agregar los td al tr IMPORTANTE AGREGARLOS EN ORDEN tr.appendChild(tdNombre); tr.appendChild(tdTipo); tr.appendChild(tdDescripcion); tr.appendChild(tdLegendario); //4. Agregar tr al tbody tbody.appendChild(tr); }); }; window.guardarPokemon = (pokemon)=>{ //buscar personas para trabajar en el proyecto window.pokemones.push(pokemon); window.cargarPokemones(); }; //Esto es configuracion de tinymce tinymce.init({ selector: '#descripcion-txt', height: 200, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }); const botonRegistro = document.querySelector("#registrar-btn"); //document.getElementById("registrar-btn") //TODO: Hacer funcionar el botón limpiar botonRegistro.addEventListener('click', ()=>{ let erroresDiv = document.querySelector("#errores-div"); erroresDiv.innerHTML = "";//Limpia el div de los errores cada vez que se hace click //Hacer las cosas para validar el formulario. let nombre = document.querySelector("#nombre-txt").value.trim(); let descripcion = tinymce.get('descripcion-txt').getContent(); let tipo = document.querySelector("#tipo-select").value; let legendario = document.querySelector("#legendario-chx").checked; let errores = []; //array o lista, arreglo if(nombre === ''){ errores.push("Debe ingresar nombre"); } if(descripcion === ''){ errores.push("Debe ingresar una descripcion"); } if(errores.length === 0){ //Guardar un pokemon // let lista = []; // let obj = {}; let pokemon = {};//creando un nuevo "pokemon" pokemon.nombre = nombre; pokemon.descripcion = descripcion; pokemon.tipo = tipo; pokemon.legendario = legendario; window.guardarPokemon(pokemon); }else { //Mostrar errores por pantalla window.mostrarErrores(errores); } });