1
00:00:10,460 --> 00:00:20,270
Hola bienvenidos a una nueva clase y como primera medida para este capítulo vamos a sacar algo que olvidé

2
00:00:20,280 --> 00:00:21,760
en la clase pasada.

3
00:00:21,960 --> 00:00:29,700
Yo bajé el link configuración aquí abajo y me olvidé de borrarlo de arriba así que rápidamente vamos

4
00:00:29,700 --> 00:00:30,700
a hacer eso.

5
00:00:30,760 --> 00:00:38,160
Bueno como pueden ver están acá los dos links voy a borrar suavemente el de arriba y con eso ya tenemos

6
00:00:38,340 --> 00:00:39,950
que tener corregido el problema.

7
00:00:39,990 --> 00:00:50,190
Bien ahora sí bueno vamos a empezar por llenar configuración vamos a crear este archivo para poder completar

8
00:00:50,190 --> 00:00:51,440
todo el contenido.

9
00:00:51,510 --> 00:00:58,470
Entonces vamos a hacer lo siguiente venimos acá principal ya que prácticamente todo se va a repetir

10
00:00:58,470 --> 00:01:08,530
dentro de este PHP que estamos por utilizar lo único que vamos a cambiar es la parte central barra superior

11
00:01:08,530 --> 00:01:10,390
barra izquierda y barra inferior.

12
00:01:10,390 --> 00:01:11,150
Esto da igual.

13
00:01:11,350 --> 00:01:18,590
Entonces le vamos a dar acá en duplicado para que nos hagan una copia del archivo Miren duplicara y

14
00:01:18,590 --> 00:01:20,510
me pregunta cuál es el nuevo nombre.

15
00:01:20,600 --> 00:01:24,550
Entonces le voy a poner configuración punto PHP

16
00:01:28,950 --> 00:01:32,370
bueno cómo ves pasar.

17
00:01:32,370 --> 00:01:38,580
También les dije es bueno tener a mano el panel original porque de ahí nos vamos a surtir de diferentes

18
00:01:38,580 --> 00:01:41,610
botones cajas colores iconos.

19
00:01:41,620 --> 00:01:51,240
Bueno acá ya ingresé al panel original y me vengo formularios elementos generales a ver elementos avanzados

20
00:01:51,240 --> 00:01:56,360
a ver si hay algo de lo que necesito acá no yo necesito a donde estaba.

21
00:01:57,030 --> 00:02:04,680
Elementos generales porque quiero traer a Vera quiero traer algo que me permita subir archivos y este

22
00:02:04,680 --> 00:02:09,530
formulario me conviene porque tiene acá el botón para seleccionar Archivo.

23
00:02:09,700 --> 00:02:11,670
Entonces es lo que necesito.

24
00:02:11,700 --> 00:02:17,420
Entonces se dan cuenta de lo que quiero es un formulario para poder subir la imagen de perfil del usuario.

25
00:02:17,440 --> 00:02:23,280
Eso lo vamos a hacer desde Configuración entonces en cualquier zona del formulario le voy a dar clic

26
00:02:23,280 --> 00:02:23,900
derecho

27
00:02:26,590 --> 00:02:34,100
a ver ahí inspeccionará y por lo general como se angosta la pantalla de perder un poco donde estaba

28
00:02:34,370 --> 00:02:36,680
el formulario entonces yo lo vuelvo a buscar.

29
00:02:36,680 --> 00:02:42,590
Así hago yo y me empiezo a deslizar hasta que se pinte más o menos lo que yo quiero y obviamente voy

30
00:02:42,590 --> 00:02:49,500
leyendo las etiquetas y agrandar la letra para que sea más cómodo a ver esto.

31
00:02:49,620 --> 00:02:53,920
Miren esta columna abarca varios formularios.

32
00:02:53,950 --> 00:02:56,410
No quiero solo esta caja.

33
00:02:56,610 --> 00:03:03,940
Entonces ya dije caja Bueno se trata de un Boggs formulario más arriba a ver ese es el box Geer ahí

34
00:03:03,980 --> 00:03:10,140
está es este de acá la caja no quiero la columna entera con todos los formularios estamos hablando solamente

35
00:03:10,140 --> 00:03:20,450
de la caja debía dar clic derecho Edit as HTML entonces me aparece acá el código y lo selecciono por

36
00:03:20,450 --> 00:03:27,110
completo le voy a dar copiar y ya tengo el formulario que necesito me vio volver al código.

37
00:03:27,190 --> 00:03:35,220
Ya estoy en configuración puntos PHP y tengo que identificar a dónde voy a poner esto.

38
00:03:35,220 --> 00:03:39,450
Vamos a entrar a Configuración punto PHP para ponernos en contexto.

39
00:03:39,450 --> 00:03:44,850
A ver si funciona el link al momento configuración listo.

40
00:03:44,990 --> 00:03:51,410
No notaron porque es un gemelo no hay ninguna diferencia pero ya estoy en configuración punto PHP.

41
00:03:51,430 --> 00:03:53,950
Bueno yo quiero ponerlo acá a este formulario.

42
00:03:54,400 --> 00:03:58,250
Entonces vamos a ver cómo lo vamos a hacer a esto.

43
00:03:58,300 --> 00:04:00,480
Acá tengo esto que me avisa que es la zona central.

44
00:04:01,440 --> 00:04:09,070
Y veamos tenemos un robot o una fila y esto que empieza acá son las diferentes columnas que están llenas

45
00:04:09,070 --> 00:04:15,240
con esas cajas verde y azul creo que eran entonces bueno lo que voy a hacer es borrarlas.

46
00:04:15,250 --> 00:04:25,030
Por ahora no las voy a usar ahí está pero sí voy a dejar este ROV esta fila para la primera fila me

47
00:04:25,030 --> 00:04:31,450
parece que voy a hacer varias filas una para contener la foto de perfil o el formulario que sube la

48
00:04:31,450 --> 00:04:38,770
foto de perfil y vamos a hacer abajo otra Rou para contener el menú que nos va a servir para cambiar

49
00:04:38,770 --> 00:04:40,350
la contraseña.

50
00:04:40,480 --> 00:04:44,170
Es normal que el usuario quiera cambiar la contraseña por qué no.

51
00:04:44,200 --> 00:04:50,800
Bueno entonces aquí adentro voy a poner el código que acabo de copiar a esta.

52
00:04:50,800 --> 00:04:51,820
Veamos cómo luce

53
00:04:54,580 --> 00:04:56,990
bueno esta de todo el ancho.

54
00:04:58,560 --> 00:05:03,430
Incluso diría que está demasiado ancho porque no está dentro de una columna.

55
00:05:03,540 --> 00:05:08,970
La verdad que a mí me convendría ponerlo dentro de una columna entonces a ver voy a hacer control zeta

56
00:05:09,390 --> 00:05:16,970
para volverme a ver como estaba antes de borrar el contenido de esta ahí ven esto es la columna que

57
00:05:17,510 --> 00:05:20,300
contenía las cajas de colores.

58
00:05:20,300 --> 00:05:27,490
Entonces hoy no voy a borrar tanto salvar esa columna y acá adentro de esa columna a ver el efecto que

59
00:05:27,490 --> 00:05:29,400
esto tiene y se va a entender mejor.

60
00:05:29,560 --> 00:05:40,030
Ahí está bueno ya grabé y vamos a ver cómo luce esta no sé si han costado bastante de hecho ver cuando

61
00:05:40,030 --> 00:05:52,460
yo lo empiezo a achicar bien responde bien ya tenemos esta caja mucho más angosta.

62
00:05:52,460 --> 00:05:59,420
Incluso se me ocurre que podremos poner el cambio de contraseña al lado en vez de ponerlo abajo bueno

63
00:05:59,520 --> 00:06:07,260
vamos a dejar el tamaño de la columna en 6 solamente así para que veamos la otra la otra caja también

64
00:06:07,380 --> 00:06:08,470
de 6 de ancho.

65
00:06:08,480 --> 00:06:13,560
Entonces recuerden que el ancho total siempre va a ser de 12 nos va a quedar una columna al lado de

66
00:06:13,560 --> 00:06:17,970
la otra entonces de título vamos a poner.

67
00:06:17,970 --> 00:06:27,810
Sube tu foto de perfil mono analicemos cómo es el formulario que hemos copiado como ejemplo y trae un

68
00:06:27,810 --> 00:06:29,890
montón de cosas para llenar.

69
00:06:29,890 --> 00:06:35,600
Es en realidad un email para poner una clave acá para chequear algo.

70
00:06:35,640 --> 00:06:41,270
Yo no necesito nada de esto es simplemente la opción para poder subir el archivo en cuestión.

71
00:06:41,340 --> 00:06:42,550
Al menos de momento.

72
00:06:42,780 --> 00:06:51,180
Entonces piensa un poco y digo empiezo a buscar los pedazos digamos del formulario.

73
00:06:51,180 --> 00:06:55,640
Acá tengo la parte a donde solicita el e-mail el input esto se va.

74
00:06:55,800 --> 00:06:58,040
Acá tengo lo de la clave se va.

75
00:06:58,110 --> 00:07:04,650
Esto es lo del archivo acá si vamos a tomar un poco prestar un poco atención tenemos el label éste es

76
00:07:04,650 --> 00:07:11,120
simplemente para poder poner esto que vemos acá este título.

77
00:07:11,120 --> 00:07:14,430
A ver acá Feil imput vamos a poner

78
00:07:17,280 --> 00:07:19,880
imagen a ver si tiene sentido si lo vemos

79
00:07:23,510 --> 00:07:34,340
a ver qué otra cosa tiene esto para bueno podemos poner un texto abajo a si queda muy reiterativo si

80
00:07:34,380 --> 00:07:40,120
iba a poner una imagen para tu perfil pero la verdad que este es bastante obvio va a quedar muy reiterativo

81
00:07:41,880 --> 00:07:43,550
a mí con esto me alcanza.

82
00:07:43,570 --> 00:07:48,740
Miren el input es muy particular es de tipo Fail Por qué no estoy.

83
00:07:48,850 --> 00:07:54,790
No estoy por ingresar un texto ni una contraseña ni es un textbook es de tipo fail porque me va a permitir

84
00:07:54,850 --> 00:07:56,290
elegir un archivo.

85
00:07:56,320 --> 00:08:01,490
Este check box que ya lo sabemos usar no lo voy a necesitar y me quedo con esto.

86
00:08:03,130 --> 00:08:13,500
Después el formulario tiene un botón Submit que le vamos a poner subir o actualizar actualizar me parece

87
00:08:13,520 --> 00:08:15,870
mejor actualizar foto de perfil.

88
00:08:16,020 --> 00:08:20,510
Bueno veamos si es lo que queremos o si va tomando forma.

89
00:08:20,510 --> 00:08:36,090
Si si me parece bien Moana después Auvers después seguramente vamos a kizas a mostrar la foto que se

90
00:08:36,090 --> 00:08:41,520
sube aunque no estoy del todo seguro porque en cuanto la actualizas ya la puedes ver aquí y aquí no

91
00:08:41,520 --> 00:08:48,450
tendría mucho sentido con esto por ahora me alcanza cualquier cosa mejoramos a futuro ya tenemos este

92
00:08:48,450 --> 00:08:55,320
formulario por un lado y ahora vamos a crear el otro formulario a ver si todavía lo tengo copiado.

93
00:08:55,320 --> 00:08:56,370
Si parece que sí.

94
00:08:56,520 --> 00:08:59,850
Bueno vamos con el otro formulario y puedo utilizar lo mismo.

95
00:08:59,910 --> 00:09:09,050
Entonces miren yo vengo desde aquí yo quiero copiar una columna al lado dentro de la misma fila.

96
00:09:09,190 --> 00:09:15,950
Entonces lo que me conviene hacer es agarrar esta columna que es la que quiero duplicar la voy a minimizar.

97
00:09:15,950 --> 00:09:21,710
Entonces miren aparte de que está muy bien comentado y señalizado empieza la columna termina columna

98
00:09:22,280 --> 00:09:24,900
Por qué no veo todo el código porque está minimizado acá.

99
00:09:24,920 --> 00:09:33,670
Esto es un buen truco lo selecciono esto copio y pego más abajo yo estoy pegando otra vez el formulario

100
00:09:33,730 --> 00:09:36,250
original es largo grande sin editar.

101
00:09:36,250 --> 00:09:42,770
Veamos cómo queda bueno y tenemos ah no perdón he copiado todo el formulario.

102
00:09:42,770 --> 00:09:44,370
Bueno no importa no importa no importa.

103
00:09:44,510 --> 00:09:50,590
Eso fue error mío lo que puedo hacer es venir rápidamente aquí copio esto.

104
00:09:52,720 --> 00:09:55,800
Lo vamos a copiar rápidamente de nuevo eso quería el original.

105
00:09:55,820 --> 00:10:06,310
No me di cuenta de que había copiado este otro y esto sería donde aquí abajo está en la segunda columna.

106
00:10:06,320 --> 00:10:13,970
Es más para asegurar la minimizo selecciono todas y le pego encima el formulario completo.

107
00:10:13,970 --> 00:10:15,540
Otra vez ver

108
00:10:20,360 --> 00:10:21,150
algo salió mal.

109
00:10:21,150 --> 00:10:21,470
A ver

110
00:10:24,360 --> 00:10:31,300
bien no estoy respetando la columna ahí arriba ya me había borrado las columnas enteras

111
00:10:34,300 --> 00:10:35,190
ahora sí.

112
00:10:35,260 --> 00:10:38,090
Bueno miren qué interesante y sale bastante ordenado.

113
00:10:38,230 --> 00:10:42,120
Recuerden yo estoy viendo esto exageradamente grande por el tema del video.

114
00:10:42,120 --> 00:10:45,880
Bueno eso sería como tendríamos que verlo.

115
00:10:46,090 --> 00:10:50,270
Depende también de la resolución que tengas en el monitor como lo vas a ver vos.

116
00:10:50,410 --> 00:10:52,870
Bueno y esto va a ser para cambiar la contraseña

117
00:10:56,570 --> 00:10:58,490
quizás como va a ser más grande.

118
00:10:58,610 --> 00:11:00,790
Me parece que estéticamente lo voy a poner al revés.

119
00:11:00,800 --> 00:11:07,250
Mira ya los di vuelta ahora sí sí me parece que va a quedar mejor así este contraseña.

120
00:11:07,250 --> 00:11:08,460
Foto de perfil de derecha.

121
00:11:09,510 --> 00:11:11,470
Veamos vamos a cambiar esto.

122
00:11:11,490 --> 00:11:21,650
Sube tu foto de perfil y este lo tengo minimizado por acá a esta cambiar contraseña y esto es bastante

123
00:11:21,650 --> 00:11:26,630
simple vamos a tener un imput qué va a decir.

124
00:11:26,630 --> 00:11:38,470
A ver el primer input que le vamos a decir Howard va a ser el tipo password pero de Nein.

125
00:11:38,550 --> 00:11:41,680
Con qué Naimi lo vamos a mandar a PSP.

126
00:11:41,700 --> 00:11:42,570
Vamos a poner

127
00:11:47,390 --> 00:11:50,570
nueva password.

128
00:11:50,800 --> 00:11:52,200
Lo vamos a hacer simple.

129
00:11:52,330 --> 00:11:55,660
Esto lo podemos complejizar hasta el infinito.

130
00:11:55,700 --> 00:12:04,040
Yo simplemente voy a hacer que vos pongas una clave nueva y vamos a hacer que repitas esa clave password

131
00:12:06,240 --> 00:12:07,860
please Holder decía en el email.

132
00:12:07,870 --> 00:12:12,390
No tienen que decir ingresa la nueva clave.

133
00:12:12,450 --> 00:12:17,830
Supongamos y vamos a pedir acá abajo así que ellos directamente copiar esto.

134
00:12:19,570 --> 00:12:25,150
Bueno por supuesto que está mal nueva claro.

135
00:12:25,720 --> 00:12:27,680
Ahora se copio todo esto.

136
00:12:28,500 --> 00:12:30,140
Y lo voy a pegar acá abajo

137
00:12:33,770 --> 00:12:36,950
y vamos a poner repique.

138
00:12:40,910 --> 00:12:42,010
Transcripto bien

139
00:12:44,950 --> 00:12:52,090
y el name va a ser nueva Pajuelo repite bien se la pide dos veces dos veces también por seguridad.

140
00:12:52,150 --> 00:12:57,120
Claro está esto se lo podés agregar vos.

141
00:12:57,330 --> 00:12:58,180
Ya les cuento.

142
00:12:58,280 --> 00:13:00,140
Repite la nueva clave.

143
00:13:00,140 --> 00:13:08,320
Esto se lo podés agregar vos el hecho de que haya primero un primer input a donde le pidamos la clave

144
00:13:08,320 --> 00:13:14,210
actual porque si alguien se sienta en la compu y te lo cambia sin autorización podría ser peligroso

145
00:13:14,530 --> 00:13:15,820
pero yo lo quiero mantener simple.

146
00:13:15,820 --> 00:13:20,710
De momento si a vos te parece que hace falta no te va a costar porque vas a usar el mismo procedimiento

147
00:13:20,980 --> 00:13:26,010
de control que usábamos cuando te lo habías mono un fail imput.

148
00:13:26,020 --> 00:13:36,920
No vamos a usar un chip Boks mucho menos nos queda el botón que le vamos a poner cambiar.

149
00:13:37,260 --> 00:13:39,850
Nos vamos a dar cuenta se dio algo mal cuando algo no funciona.

150
00:13:39,990 --> 00:13:43,650
Es muy simple quiero bien están todos como clave

151
00:13:46,630 --> 00:13:47,450
botón Cambiar.

152
00:13:47,500 --> 00:13:51,260
Listo tenemos el HTML casi casi cocinado.

153
00:13:51,340 --> 00:13:54,000
Seguro que puede faltar algo lo agregamos en otro momento.

154
00:13:54,190 --> 00:13:54,970
No es problema.

155
00:13:56,110 --> 00:14:02,690
Bueno vamos al PHP que es un duplicado de otro PHP ya tenemos una parte hecha.

156
00:14:02,700 --> 00:14:09,360
Eso es bueno y no lo tendríamos que modificar a esto porque en todo archivo que estemos haciendo de

157
00:14:09,360 --> 00:14:15,750
nuestra plataforma necesitamos chequear si la persona que ha ingresado tiene autorización y si no mandarla

158
00:14:15,840 --> 00:14:16,400
al login.

159
00:14:16,440 --> 00:14:19,840
Así que eso ya lo tenemos ahí listo.

160
00:14:19,990 --> 00:14:26,280
Bueno puede ser instintivo y no está mal si todo el código para controlar esto lo empezamos a escribir

161
00:14:26,280 --> 00:14:26,870
acá.

162
00:14:27,000 --> 00:14:33,000
Lo que pasa es que ya nuestra aplicación empieza a cobrar cierta magnitud a hacerlo en el login y en

163
00:14:33,000 --> 00:14:33,780
el Register.

164
00:14:33,780 --> 00:14:41,040
No está mal hacerlo acá tampoco pero tendríamos que tratar de ordenar y aparte es la excelente posibilidad

165
00:14:41,040 --> 00:14:42,630
de aprender algo nuevo.

166
00:14:42,690 --> 00:14:49,530
Entonces lo que vamos a hacer es acá en PHP o en la carpeta click derecho Nightfall y crear un PHP que

167
00:14:49,530 --> 00:14:54,380
se va a llamar funciones punto PHP.

168
00:14:54,450 --> 00:15:01,450
Por último quiero que hagamos algo bien el formulario que usamos para enviar o para subir el archivo

169
00:15:01,450 --> 00:15:02,850
o la imagen de perfil.

170
00:15:02,940 --> 00:15:07,920
Voy a volver al código a dicho formulario y le vamos a agregar esto se había pasado por alto y es muy

171
00:15:07,920 --> 00:15:09,070
importante.

172
00:15:09,070 --> 00:15:16,500
Yo cuando llené el formulario que viene en el panel bueno como ya era un formulario de archivo lo di

173
00:15:16,500 --> 00:15:20,710
por sentado al que esto estaba puesto no lo controle y se me pasó.

174
00:15:20,760 --> 00:15:29,070
Es muy importante que tenga este atributo que es ENC Taipe le vamos a poner multipartes for Data.

175
00:15:29,070 --> 00:15:34,620
No vamos a entrar en detalle pero básicamente es decirle al formulario que se tratan de archivos y cómo

176
00:15:34,710 --> 00:15:35,690
los tiene que tratar.

177
00:15:35,690 --> 00:15:40,750
Cómo tiene que codificar la información de estos archivos que va a enviar.

178
00:15:40,860 --> 00:15:47,820
Como dijimos Vesa anterior no estaría de más que Tommen este formulario y lo guarden en esa nota.

179
00:15:47,820 --> 00:15:54,780
En ese libro de notas útiles como un formulario modelo estándar que van a usar cada vez que necesitan

180
00:15:55,170 --> 00:15:57,690
enviar archivos.

181
00:15:57,710 --> 00:16:05,340
Bueno si yo grabo van a notar que esto no tiene no tiene ningún efecto visual sobre el formulario pero

182
00:16:05,340 --> 00:16:08,500
sí es fundamental para que funcione correctamente.

183
00:16:08,500 --> 00:16:16,710
Bueno ya hemos salteado de manera casi completa diría yo el HTML el frontend la parte visual de nuestra

184
00:16:16,950 --> 00:16:24,320
configuración de la plataforma de la vista configuración de la plataforma y bueno sólo nos resta ahora

185
00:16:24,330 --> 00:16:29,110
trabajar el Bakken el PHP cosa que vamos a hacer si me acompañan en la próxima clase.

186
00:16:29,220 --> 00:16:29,520
Muchas.