1
00:00:09,210 --> 00:00:15,170
Hola bienvenidos a una nueva clase y qué clase vamos a crear nuestra primera aplicación web.

2
00:00:15,190 --> 00:00:22,780
Sí nuestra primera aplicación web y para mí es muy importante porque me recuerda a la primera vez que

3
00:00:22,780 --> 00:00:24,460
hice funcionar algo en PHP.

4
00:00:24,460 --> 00:00:30,490
Sentí algo indescriptible enviaba valores a un archivo PHP y este archivo en realidad es un programa

5
00:00:30,490 --> 00:00:31,570
que me devolvía resultados.

6
00:00:31,570 --> 00:00:37,960
No lo puede creer y espero que les cause el mismo efecto que me causó a mí hace algunos años.

7
00:00:37,970 --> 00:00:47,240
Bueno vamos a aprovechar para hacer varias cosas a la vez y aprender varias cosas a la vez como ven.

8
00:00:47,250 --> 00:00:55,230
He preparado una carpeta llamada calculadora y en él tienes perdón dos archivos uno calculadora punto

9
00:00:55,230 --> 00:00:58,810
HTML y calculadora punto PHP.

10
00:00:58,920 --> 00:00:59,980
Cómo estamos avanzando.

11
00:00:59,980 --> 00:01:02,710
Quizá trabajamos de dos archivos al mismo tiempo.

12
00:01:03,250 --> 00:01:05,940
Bueno en calculadora HTML.

13
00:01:05,950 --> 00:01:12,460
Vamos a preparar la parte visible el front end lo que va a ver nuestro usuario a la hora de operar con

14
00:01:12,550 --> 00:01:14,080
nuestra aplicación.

15
00:01:14,080 --> 00:01:24,840
Entonces como es una web vamos a preparar el esqueleto HTML perfecto vamos a poner como título calculadora

16
00:01:25,690 --> 00:01:26,980
y vamos a ir viendo los resultados.

17
00:01:26,980 --> 00:01:32,620
Yo no vuelvo para atrás acá acá tengo una calculadora entramos aquí.

18
00:01:32,820 --> 00:01:36,990
Ya veo que el título de la pestaña ha cambiado.

19
00:01:36,990 --> 00:01:47,730
Venimos bien y acabamos aponer con un hacheros calculadora web.

20
00:01:47,840 --> 00:01:52,010
Veremos como venimos perfecto.

21
00:01:52,450 --> 00:01:56,160
Vamos a poner acá un par deberes

22
00:01:58,980 --> 00:02:03,030
a lo mejor el título parece demasiado grande porque eso tengo grande la letra para que se vea bien el

23
00:02:03,030 --> 00:02:03,370
vídeo.

24
00:02:03,410 --> 00:02:06,320
Si estoy con un Shum del 175 por ciento

25
00:02:09,380 --> 00:02:11,810
los veré como para que se genere un espacio.

26
00:02:12,010 --> 00:02:19,550
Y acá vamos a presentar un formulario si bien algo vimos un formulario en la manera que tenemos para

27
00:02:19,550 --> 00:02:25,370
darle al cliente la posibilidad de que envíe datos a nuestro programa.

28
00:02:26,330 --> 00:02:35,210
Entonces un formulario lo abrimos con las etiquetas form bien como verán a ya me abrió una etiqueta

29
00:02:35,210 --> 00:02:42,870
form con varias propiedades dentro y cerró la etiqueta for.

30
00:02:43,150 --> 00:02:44,980
De qué se tratan estos parámetros.

31
00:02:44,980 --> 00:02:53,000
En primer lugar vemos que dice Klaus bueno dentro de muy poco ya vamos a empezar a usar clases para

32
00:02:53,000 --> 00:02:54,550
darle estilo.

33
00:02:54,560 --> 00:02:59,510
Se acuerdan que algunas etiquetas yo utilicé esto Trail bueno.

34
00:02:59,930 --> 00:03:05,310
Pero qué pasaba cuando se ponía stain y acá adentro escribía No sé qué salir del color rojo con el texto

35
00:03:05,310 --> 00:03:07,150
alineado a la izquierda.

36
00:03:07,700 --> 00:03:16,520
Además de ser un trabajo adicional y para nada eficiente se presta para que tengamos no sé una cosa

37
00:03:16,520 --> 00:03:18,990
de cada color de cada forma desprolijidad.

38
00:03:19,250 --> 00:03:27,440
Entonces está bueno setter prueba setter previamente lo que llamamos clases de estilo diferentes clases.

39
00:03:27,440 --> 00:03:34,130
Entonces ya sabemos que todos los formularios van a salir de la misma manera con el mismo color márgenes

40
00:03:34,220 --> 00:03:39,970
recuadros lo que querramos hacerlo pero ya formar parte de un capítulo más adelante.

41
00:03:40,160 --> 00:03:48,360
El Auction nos define adónde vamos a enviar los datos que el usuario va a rellenar nuestro formulario.

42
00:03:48,400 --> 00:03:54,280
Bueno yo me adelanto y les cuento yo quiero enviar desde calculadoras punto HTML que es lo que ve el

43
00:03:54,280 --> 00:04:00,670
usuario hacia calculadora punto PHP que es a donde tenemos el programa.

44
00:04:00,730 --> 00:04:06,300
Entonces acá vamos a poner calculadora junto al chip.

45
00:04:06,500 --> 00:04:06,930
Buenísimo

46
00:04:09,640 --> 00:04:10,870
método.

47
00:04:10,870 --> 00:04:18,190
Bueno vamos a empezar diciendo que tenemos dos métodos para enviar la información.

48
00:04:18,400 --> 00:04:23,200
Uno que se llama Post se escribe post o el Moto.

49
00:04:23,200 --> 00:04:31,210
El método Goeth vamos a empezar usando el jet y sobre la marcha aplicándolo vamos a ver las evidentes

50
00:04:31,210 --> 00:04:32,260
diferencias.

51
00:04:32,260 --> 00:04:38,350
Desde luego ambos sirven para lo mismo para enviar datos a nuestro Bakken a nuestro programa que está

52
00:04:38,350 --> 00:04:41,270
corriendo por detrás al servidor.

53
00:04:41,480 --> 00:04:43,190
Bueno pero con esto no hacemos nada.

54
00:04:43,230 --> 00:04:46,900
Vamos a grabar ahora y miren acá no aparece nada.

55
00:04:46,900 --> 00:04:47,320
Por qué.

56
00:04:47,320 --> 00:04:54,520
Porque dentro de las etiquetas form tenemos algunas etiquetas o elementos propios de los formularios.

57
00:04:54,520 --> 00:04:59,010
El más clásico de todo es el input el input.

58
00:04:59,020 --> 00:05:09,370
Miren lo que hace porque en este caso es de tipo texto aparece un casillero vamos a sacar un Meré para

59
00:05:09,370 --> 00:05:10,330
que no se metan abajo

60
00:05:15,380 --> 00:05:18,760
entonces yo antes de poner el input le vamos a poner acá

61
00:05:22,120 --> 00:05:23,340
valor 1.

62
00:05:24,640 --> 00:05:25,330
Miren cómo sale

63
00:05:28,130 --> 00:05:35,610
ven entonces cómo observan este tipo texto porque está preparado para recibir texto.

64
00:05:35,860 --> 00:05:41,290
Miren qué pasa si yo acá en vez de tipo texto voy a poner otro de los tipos predefinidos que es password

65
00:05:43,980 --> 00:05:49,060
está bien oculta el carácter para que nadie nos pueda ver la clave.

66
00:05:49,060 --> 00:05:54,800
Bueno como vemos tenemos otro tributo acá que se llama Nain el nombre.

67
00:05:54,920 --> 00:06:04,010
Bueno acá le vamos a poner y ya explicó que es por supuesto le vamos a poner número uno cuando enviemos

68
00:06:04,010 --> 00:06:05,420
los datos.

69
00:06:05,420 --> 00:06:09,940
Seguramente acá va a haber otro casillero de copiar para borrar.

70
00:06:10,010 --> 00:06:13,440
Este es el arte de programar saber copiar y pegar.

71
00:06:13,490 --> 00:06:14,680
Mentira es.

72
00:06:14,860 --> 00:06:17,240
Es el equilibrio.

73
00:06:17,240 --> 00:06:21,020
Si yo copio y pego sabiendo lo que estoy Coppini pegando por supuesto que es totalmente válido.

74
00:06:23,500 --> 00:06:27,360
Miren como ahora tengo dos casilleros que me salieron uno al lado del otro.

75
00:06:27,730 --> 00:06:32,350
Hay una manera más elegante de arreglarlo pero yo por ahora con un a solucionar el problema.

76
00:06:32,350 --> 00:06:38,010
Ahí está podría poner otro para que sea un poquito más separado.

77
00:06:38,010 --> 00:06:38,840
Ahí está.

78
00:06:39,040 --> 00:06:40,990
Valor 1 y valor 2.

79
00:06:41,260 --> 00:06:47,280
Cuando yo envíe este formulario se van a enviar todos los datos juntos como un solo paquete.

80
00:06:47,320 --> 00:06:49,810
Nosotros que somos programadores sabemos que no es un paquete.

81
00:06:49,810 --> 00:06:51,180
Sabemos que es un.

82
00:06:51,580 --> 00:07:01,060
Bueno va a ser una raíz relacional y cada dato va a ir con un índice o una etiqueta que es el NAMM.

83
00:07:01,150 --> 00:07:05,530
Cuando lo veamos del otro lado cuando lo recibamos acá en el PHP nos vamos a dar cuenta.

84
00:07:05,530 --> 00:07:08,740
Bien claro cómo funciona esto por ahora vamos a poner número uno.

85
00:07:08,740 --> 00:07:14,240
Yo le puedo poner lo que quiera acá siempre y cuando lo busque al dato de este lado con la misma etiqueta.

86
00:07:14,740 --> 00:07:17,620
Bueno acá para hacerlo bien sería número dos.

87
00:07:17,620 --> 00:07:22,840
Acá tengo para ponerle un valor y si yo quiero que ella aparezca con un valor predefinido adentro del

88
00:07:22,840 --> 00:07:27,140
casillero y yo puedo poner a veces se usa esto.

89
00:07:27,220 --> 00:07:33,580
Vamos a ver para cuando se vuelve muy útil pero supongamos que en este caso la gente siempre el valor

90
00:07:33,580 --> 00:07:35,240
que más frecuentemente ponen es el día.

91
00:07:35,250 --> 00:07:37,220
No sé supongamos una aplicación.

92
00:07:37,240 --> 00:07:42,670
Entonces eso se lo puedo ayudar al usuario poniéndole el 10 aparece con el 10 puesto.

93
00:07:42,670 --> 00:07:45,270
Entonces cómo es rara excepción que pongo en un 11.

94
00:07:45,520 --> 00:07:46,690
Podría ser para esto.

95
00:07:46,840 --> 00:07:54,520
Yo no voy a poner ningún valor pero sí les voy a mostrar otro atributo muy importante que es el plazo

96
00:07:54,640 --> 00:08:05,720
Wolder y miren qué función tan importante nos va a traer este plazo volver a poner ingrese número a

97
00:08:05,720 --> 00:08:08,060
ver si no es muy largo no.

98
00:08:08,120 --> 00:08:14,840
Justo es este texto gris que en realidad no es un valor si yo envío no se va a enviar la palabra ingreso

99
00:08:14,840 --> 00:08:19,700
en números es una ayuda para el usuario que se borra no viene empiezo a escribir y si borro vuelve a

100
00:08:19,700 --> 00:08:30,390
aparecer entonces copió esto y le vamos a poner otro Place el del Arca y le vamos a poner también para

101
00:08:30,390 --> 00:08:38,150
que tenga coherencia le vamos a poner ingrese otro Omar ahí está bueno.

102
00:08:38,200 --> 00:08:43,100
Y por último puedo declarar un imput

103
00:08:46,020 --> 00:08:48,400
Taipe le voy a poner Submit.

104
00:08:48,860 --> 00:08:59,960
Miren quien me aparecio aunque no se note por ahora es un boton y de valor le vamos a poner calcular.

105
00:08:59,960 --> 00:09:04,370
No le voy a poner en enviar porque no es un formulario de contacto sino que es una calculadora entonces

106
00:09:04,400 --> 00:09:08,700
no puede calcular si estamos en lo cierto.

107
00:09:08,840 --> 00:09:16,450
Perfecto ya se ve nuestro botoncito ahi y vamos a bajarlo a esta para que quede Malina.

108
00:09:16,680 --> 00:09:23,400
No se si queda mal la imagen me parece que queda mejor la a donde estaba calculá.

109
00:09:24,070 --> 00:09:32,730
Bueno cuando yo presioné aquí se van a enviar estos dos datos con estas etiquetas a este archivo.

110
00:09:32,850 --> 00:09:39,210
Puede que haya errores nos vamos a enterar cuando terminemos esto el HTML estaría apriori por lo menos

111
00:09:39,210 --> 00:09:42,470
este primer paso ahora desde el lado del PHP.

112
00:09:42,480 --> 00:09:46,980
En este otro archivo vamos a abrir y cerrar PHP obviamente.

113
00:09:47,400 --> 00:09:51,990
Miren qué bueno lo que puedo hacer con Atom sobre todo cuando trabajamos así con dos archivos puedo

114
00:09:51,990 --> 00:10:02,020
ponerlos uno al lado del otro pero a veces también es práctico a ver cómo estaban y ponerte ahí abajo.

115
00:10:02,180 --> 00:10:08,070
Entonces puedo tener arriba el HTML y abajo el PHP para qué me puede servir esto.

116
00:10:08,110 --> 00:10:10,150
Bueno algo muy práctico.

117
00:10:10,160 --> 00:10:18,110
Ahora el formulario super simple pero para ir sabiendo cómo voy a enviar con etiquetas cada casillero

118
00:10:18,140 --> 00:10:22,730
pude ir leyendo de acá y comparando de que por cada casillero que envío Tengo acá una instrucción que

119
00:10:22,730 --> 00:10:24,050
lo recibe.

120
00:10:24,140 --> 00:10:27,950
Se acuerdan de las variables super globales.

121
00:10:27,950 --> 00:10:30,350
Bueno una de las super globales era global.

122
00:10:30,830 --> 00:10:36,130
Hay otra que se llama así miren signo de peso guión bajo.

123
00:10:36,650 --> 00:10:42,200
Bueno ese es el array que iba a traer todo lo que se envíe desde un formulario.

124
00:10:42,530 --> 00:10:49,130
Entonces hagamos algo cómo hacíamos para ver una raíz cuando para poderlo imprimir con PHP que es algo

125
00:10:49,130 --> 00:10:53,000
ordenado hacíamos eco etiqueta Pré.

126
00:10:53,000 --> 00:10:55,670
Ahí están las dos etiquetas.

127
00:10:56,210 --> 00:11:01,870
Y esto no va a andar si no imprimimos el array R.

128
00:11:02,390 --> 00:11:05,900
Veamos qué resultados obtenemos.

129
00:11:05,900 --> 00:11:08,390
Qué momento vamos a probar esto.

130
00:11:08,390 --> 00:11:14,120
Vamos a poner acá un valor de 55 y calculamos.

131
00:11:14,180 --> 00:11:19,280
Ahí está miren veamos todas las cosas que fueron pasando grande toca ahí.

132
00:11:19,930 --> 00:11:28,670
Miren arriba lo que tenemos cambio en la dirección o sea al hacer clic en calcular no se envió.

133
00:11:28,690 --> 00:11:38,700
Nos redirigió al archivo PHP y efectivamente ha llegado a una raíz con el índice número 1 o casualidad

134
00:11:39,060 --> 00:11:48,060
es el Nein que yo puse acá en el segundo input habíamos puesto como NAICM número dos y acá llegaron

135
00:11:48,060 --> 00:11:57,800
los valores que puse ahora analicemos la dirección vean que dice calculadora punto PHP porque fuimos

136
00:11:57,800 --> 00:12:07,210
al nuevo archivo donde tenemos esto imprimimos el array signo de pregunta y de esto se trata el jet.

137
00:12:07,220 --> 00:12:17,360
Cuando mandamos los datos por el TiP por el modo de envío Goeth sucede lo siguiente Después después

138
00:12:17,720 --> 00:12:25,100
del archivo PHP automáticamente se pone un signo de pregunta Qué quiere decir que a partir de acá vamos

139
00:12:25,100 --> 00:12:28,280
a empezar a pasar los parámetros que se están enviando.

140
00:12:28,520 --> 00:12:30,370
Cómo organizados de la siguiente manera.

141
00:12:31,010 --> 00:12:39,990
Etiqueta igual al valor si son más de un parámetro voy a poner un an person segunda etiqueta.

142
00:12:39,990 --> 00:12:46,560
Segundo valor si fueran tres bueno tendría Hampson tercera etiqueta tercer valor.

143
00:12:46,710 --> 00:12:53,430
Esto quiere decir que bueno que cuando se envían formularios porque yo también puedo hacer algo de trampa

144
00:12:53,430 --> 00:13:01,320
y directamente devolver la imagen anterior a la web anterior yo puedo hacer trampa y directamente pegar

145
00:13:01,320 --> 00:13:08,870
la dirección ya que al cambiar los valores vamos a poner siete siete 7 y acabamos con 1 1 1.

146
00:13:08,870 --> 00:13:16,930
Y cuando le dé enter ven llegaron los valores por Get al archivo PHP sin ningún problema.

147
00:13:17,060 --> 00:13:24,560
Para redondear esta clase le vamos a terminar en la siguiente clase de nuestra calculadora vamos a capturar

148
00:13:24,560 --> 00:13:25,700
correctamente los valores.

149
00:13:25,710 --> 00:13:28,260
Ya sabemos que llegan sobre todo.

150
00:13:28,730 --> 00:13:31,920
Muchas veces se pierde noción de lo que está llegando es una.

151
00:13:32,090 --> 00:13:36,740
Por eso es que me tomé el tiempo y la tarea de hacer esto ya sabiendo que llega un array ahora lo vamos

152
00:13:36,740 --> 00:13:41,300
a entender de otra manera y no es como yo lo aprendí la primera vez lo hacía automático yo sabía que

153
00:13:41,300 --> 00:13:44,390
tenía que poner esto sin saber por qué lo hacía.

154
00:13:44,390 --> 00:13:46,240
Después con el tiempo me di cuenta de que era una red.

155
00:13:46,700 --> 00:13:53,630
Entonces vamos a ser así vamos a crear una variable que se va a llamar número 1 y va a ser igual a lo

156
00:13:53,630 --> 00:14:03,770
que llegue por ella siguió bajo Get Malki declaró la religión signo de peso y un bajo Beth y entrecomillas

157
00:14:03,960 --> 00:14:10,830
le vamos a pasar cómo es el tal la etiqueta o el índice que le hemos puesto de número uno coincidentemente

158
00:14:11,340 --> 00:14:17,580
el número uno también podría haber sido otra cosa sino para que tenga coherencia y luego así sea más

159
00:14:17,580 --> 00:14:18,660
fácil.

160
00:14:18,660 --> 00:14:31,480
Esto copio lo pego y no tengo más que hacer esto cambiar estoy ahí y después puedo decir cupa ahí el

161
00:14:31,680 --> 00:14:34,220
número uno es.

162
00:14:35,270 --> 00:14:45,190
Y acá también puedo hacer lo mismo copiamos acá abajo ponemos el número dos es y acá podríamos concatenar

163
00:14:46,610 --> 00:14:55,910
con conquien con número y vamos a poner casi difiere uno y dos puntos como para vos y punto y como para

164
00:14:55,910 --> 00:14:56,240
vos.

165
00:14:56,870 --> 00:15:03,540
Esperemos que vuelva por atrás entonces ahora sí pongo agrandar estos números a ver cómo funciona.

166
00:15:03,720 --> 00:15:06,850
Está el número uno es éste el número dos.

167
00:15:07,630 --> 00:15:16,160
Arreglemos esto porque acá estaría bueno que hagamos un eco veré para hacerla completa.

168
00:15:16,160 --> 00:15:19,770
Ahí está así bueno y ahora tendría que salir bien.

169
00:15:19,760 --> 00:15:23,340
Mirá ven perfecto listo.

170
00:15:23,360 --> 00:15:24,660
Obvio que esto lo vamos a terminar.

171
00:15:24,680 --> 00:15:25,680
Es sólo el principio.

172
00:15:25,680 --> 00:15:26,800
Lo seguimos en la próxima clase.