Hola bienvenidos a una nueva clase y como primera medida para este capítulo vamos a sacar algo que olvidé
en la clase pasada.
Yo bajé el link configuración aquí abajo y me olvidé de borrarlo de arriba así que rápidamente vamos
a hacer eso.
Bueno como pueden ver están acá los dos links voy a borrar suavemente el de arriba y con eso ya tenemos
que tener corregido el problema.
Bien ahora sí bueno vamos a empezar por llenar configuración vamos a crear este archivo para poder completar
todo el contenido.
Entonces vamos a hacer lo siguiente venimos acá principal ya que prácticamente todo se va a repetir
dentro de este PHP que estamos por utilizar lo único que vamos a cambiar es la parte central barra superior
barra izquierda y barra inferior.
Esto da igual.
Entonces le vamos a dar acá en duplicado para que nos hagan una copia del archivo Miren duplicara y
me pregunta cuál es el nuevo nombre.
Entonces le voy a poner configuración punto PHP
bueno cómo ves pasar.
También les dije es bueno tener a mano el panel original porque de ahí nos vamos a surtir de diferentes
botones cajas colores iconos.
Bueno acá ya ingresé al panel original y me vengo formularios elementos generales a ver elementos avanzados
a ver si hay algo de lo que necesito acá no yo necesito a donde estaba.
Elementos generales porque quiero traer a Vera quiero traer algo que me permita subir archivos y este
formulario me conviene porque tiene acá el botón para seleccionar Archivo.
Entonces es lo que necesito.
Entonces se dan cuenta de lo que quiero es un formulario para poder subir la imagen de perfil del usuario.
Eso lo vamos a hacer desde Configuración entonces en cualquier zona del formulario le voy a dar clic
derecho
a ver ahí inspeccionará y por lo general como se angosta la pantalla de perder un poco donde estaba
el formulario entonces yo lo vuelvo a buscar.
Así hago yo y me empiezo a deslizar hasta que se pinte más o menos lo que yo quiero y obviamente voy
leyendo las etiquetas y agrandar la letra para que sea más cómodo a ver esto.
Miren esta columna abarca varios formularios.
No quiero solo esta caja.
Entonces ya dije caja Bueno se trata de un Boggs formulario más arriba a ver ese es el box Geer ahí
está es este de acá la caja no quiero la columna entera con todos los formularios estamos hablando solamente
de la caja debía dar clic derecho Edit as HTML entonces me aparece acá el código y lo selecciono por
completo le voy a dar copiar y ya tengo el formulario que necesito me vio volver al código.
Ya estoy en configuración puntos PHP y tengo que identificar a dónde voy a poner esto.
Vamos a entrar a Configuración punto PHP para ponernos en contexto.
A ver si funciona el link al momento configuración listo.
No notaron porque es un gemelo no hay ninguna diferencia pero ya estoy en configuración punto PHP.
Bueno yo quiero ponerlo acá a este formulario.
Entonces vamos a ver cómo lo vamos a hacer a esto.
Acá tengo esto que me avisa que es la zona central.
Y veamos tenemos un robot o una fila y esto que empieza acá son las diferentes columnas que están llenas
con esas cajas verde y azul creo que eran entonces bueno lo que voy a hacer es borrarlas.
Por ahora no las voy a usar ahí está pero sí voy a dejar este ROV esta fila para la primera fila me
parece que voy a hacer varias filas una para contener la foto de perfil o el formulario que sube la
foto de perfil y vamos a hacer abajo otra Rou para contener el menú que nos va a servir para cambiar
la contraseña.
Es normal que el usuario quiera cambiar la contraseña por qué no.
Bueno entonces aquí adentro voy a poner el código que acabo de copiar a esta.
Veamos cómo luce
bueno esta de todo el ancho.
Incluso diría que está demasiado ancho porque no está dentro de una columna.
La verdad que a mí me convendría ponerlo dentro de una columna entonces a ver voy a hacer control zeta
para volverme a ver como estaba antes de borrar el contenido de esta ahí ven esto es la columna que
contenía las cajas de colores.
Entonces hoy no voy a borrar tanto salvar esa columna y acá adentro de esa columna a ver el efecto que
esto tiene y se va a entender mejor.
Ahí está bueno ya grabé y vamos a ver cómo luce esta no sé si han costado bastante de hecho ver cuando
yo lo empiezo a achicar bien responde bien ya tenemos esta caja mucho más angosta.
Incluso se me ocurre que podremos poner el cambio de contraseña al lado en vez de ponerlo abajo bueno
vamos a dejar el tamaño de la columna en 6 solamente así para que veamos la otra la otra caja también
de 6 de ancho.
Entonces recuerden que el ancho total siempre va a ser de 12 nos va a quedar una columna al lado de
la otra entonces de título vamos a poner.
Sube tu foto de perfil mono analicemos cómo es el formulario que hemos copiado como ejemplo y trae un
montón de cosas para llenar.
Es en realidad un email para poner una clave acá para chequear algo.
Yo no necesito nada de esto es simplemente la opción para poder subir el archivo en cuestión.
Al menos de momento.
Entonces piensa un poco y digo empiezo a buscar los pedazos digamos del formulario.
Acá tengo la parte a donde solicita el e-mail el input esto se va.
Acá tengo lo de la clave se va.
Esto es lo del archivo acá si vamos a tomar un poco prestar un poco atención tenemos el label éste es
simplemente para poder poner esto que vemos acá este título.
A ver acá Feil imput vamos a poner
imagen a ver si tiene sentido si lo vemos
a ver qué otra cosa tiene esto para bueno podemos poner un texto abajo a si queda muy reiterativo si
iba a poner una imagen para tu perfil pero la verdad que este es bastante obvio va a quedar muy reiterativo
a mí con esto me alcanza.
Miren el input es muy particular es de tipo Fail Por qué no estoy.
No estoy por ingresar un texto ni una contraseña ni es un textbook es de tipo fail porque me va a permitir
elegir un archivo.
Este check box que ya lo sabemos usar no lo voy a necesitar y me quedo con esto.
Después el formulario tiene un botón Submit que le vamos a poner subir o actualizar actualizar me parece
mejor actualizar foto de perfil.
Bueno veamos si es lo que queremos o si va tomando forma.
Si si me parece bien Moana después Auvers después seguramente vamos a kizas a mostrar la foto que se
sube aunque no estoy del todo seguro porque en cuanto la actualizas ya la puedes ver aquí y aquí no
tendría mucho sentido con esto por ahora me alcanza cualquier cosa mejoramos a futuro ya tenemos este
formulario por un lado y ahora vamos a crear el otro formulario a ver si todavía lo tengo copiado.
Si parece que sí.
Bueno vamos con el otro formulario y puedo utilizar lo mismo.
Entonces miren yo vengo desde aquí yo quiero copiar una columna al lado dentro de la misma fila.
Entonces lo que me conviene hacer es agarrar esta columna que es la que quiero duplicar la voy a minimizar.
Entonces miren aparte de que está muy bien comentado y señalizado empieza la columna termina columna
Por qué no veo todo el código porque está minimizado acá.
Esto es un buen truco lo selecciono esto copio y pego más abajo yo estoy pegando otra vez el formulario
original es largo grande sin editar.
Veamos cómo queda bueno y tenemos ah no perdón he copiado todo el formulario.
Bueno no importa no importa no importa.
Eso fue error mío lo que puedo hacer es venir rápidamente aquí copio esto.
Lo vamos a copiar rápidamente de nuevo eso quería el original.
No me di cuenta de que había copiado este otro y esto sería donde aquí abajo está en la segunda columna.
Es más para asegurar la minimizo selecciono todas y le pego encima el formulario completo.
Otra vez ver
algo salió mal.
A ver
bien no estoy respetando la columna ahí arriba ya me había borrado las columnas enteras
ahora sí.
Bueno miren qué interesante y sale bastante ordenado.
Recuerden yo estoy viendo esto exageradamente grande por el tema del video.
Bueno eso sería como tendríamos que verlo.
Depende también de la resolución que tengas en el monitor como lo vas a ver vos.
Bueno y esto va a ser para cambiar la contraseña
quizás como va a ser más grande.
Me parece que estéticamente lo voy a poner al revés.
Mira ya los di vuelta ahora sí sí me parece que va a quedar mejor así este contraseña.
Foto de perfil de derecha.
Veamos vamos a cambiar esto.
Sube tu foto de perfil y este lo tengo minimizado por acá a esta cambiar contraseña y esto es bastante
simple vamos a tener un imput qué va a decir.
A ver el primer input que le vamos a decir Howard va a ser el tipo password pero de Nein.
Con qué Naimi lo vamos a mandar a PSP.
Vamos a poner
nueva password.
Lo vamos a hacer simple.
Esto lo podemos complejizar hasta el infinito.
Yo simplemente voy a hacer que vos pongas una clave nueva y vamos a hacer que repitas esa clave password
please Holder decía en el email.
No tienen que decir ingresa la nueva clave.
Supongamos y vamos a pedir acá abajo así que ellos directamente copiar esto.
Bueno por supuesto que está mal nueva claro.
Ahora se copio todo esto.
Y lo voy a pegar acá abajo
y vamos a poner repique.
Transcripto bien
y el name va a ser nueva Pajuelo repite bien se la pide dos veces dos veces también por seguridad.
Claro está esto se lo podés agregar vos.
Ya les cuento.
Repite la nueva clave.
Esto se lo podés agregar vos el hecho de que haya primero un primer input a donde le pidamos la clave
actual porque si alguien se sienta en la compu y te lo cambia sin autorización podría ser peligroso
pero yo lo quiero mantener simple.
De momento si a vos te parece que hace falta no te va a costar porque vas a usar el mismo procedimiento
de control que usábamos cuando te lo habías mono un fail imput.
No vamos a usar un chip Boks mucho menos nos queda el botón que le vamos a poner cambiar.
Nos vamos a dar cuenta se dio algo mal cuando algo no funciona.
Es muy simple quiero bien están todos como clave
botón Cambiar.
Listo tenemos el HTML casi casi cocinado.
Seguro que puede faltar algo lo agregamos en otro momento.
No es problema.
Bueno vamos al PHP que es un duplicado de otro PHP ya tenemos una parte hecha.
Eso es bueno y no lo tendríamos que modificar a esto porque en todo archivo que estemos haciendo de
nuestra plataforma necesitamos chequear si la persona que ha ingresado tiene autorización y si no mandarla
al login.
Así que eso ya lo tenemos ahí listo.
Bueno puede ser instintivo y no está mal si todo el código para controlar esto lo empezamos a escribir
acá.
Lo que pasa es que ya nuestra aplicación empieza a cobrar cierta magnitud a hacerlo en el login y en
el Register.
No está mal hacerlo acá tampoco pero tendríamos que tratar de ordenar y aparte es la excelente posibilidad
de aprender algo nuevo.
Entonces lo que vamos a hacer es acá en PHP o en la carpeta click derecho Nightfall y crear un PHP que
se va a llamar funciones punto PHP.
Por último quiero que hagamos algo bien el formulario que usamos para enviar o para subir el archivo
o la imagen de perfil.
Voy a volver al código a dicho formulario y le vamos a agregar esto se había pasado por alto y es muy
importante.
Yo cuando llené el formulario que viene en el panel bueno como ya era un formulario de archivo lo di
por sentado al que esto estaba puesto no lo controle y se me pasó.
Es muy importante que tenga este atributo que es ENC Taipe le vamos a poner multipartes for Data.
No vamos a entrar en detalle pero básicamente es decirle al formulario que se tratan de archivos y cómo
los tiene que tratar.
Cómo tiene que codificar la información de estos archivos que va a enviar.
Como dijimos Vesa anterior no estaría de más que Tommen este formulario y lo guarden en esa nota.
En ese libro de notas útiles como un formulario modelo estándar que van a usar cada vez que necesitan
enviar archivos.
Bueno si yo grabo van a notar que esto no tiene no tiene ningún efecto visual sobre el formulario pero
sí es fundamental para que funcione correctamente.
Bueno ya hemos salteado de manera casi completa diría yo el HTML el frontend la parte visual de nuestra
configuración de la plataforma de la vista configuración de la plataforma y bueno sólo nos resta ahora
trabajar el Bakken el PHP cosa que vamos a hacer si me acompañan en la próxima clase.
Muchas.