Hola bienvenidos a una clase más de este fantástico curso en PHP y como vieron en el capítulo anterior
he recortado y he sacado un montón de cosas de el panel.
Miren cómo quedó esta historia vamos a acceder a ver y abrir esto para que se vea bien.
Curso a veãan.
Hice una copia a está la carpeta PHP tuve vacío y le puse para que me quede eso ya y pueda trabajar
sobre este sin volverlo a llenar para que les quede listo por si necesitan hacer un trabajo por si necesitan
no.
Seguro que van a tener que hacer un trabajo y puede que les sea de utilidad.
PHP tuve que entrar y miren que vacío quedó esto dejé los ejemplos que me gustaba pero no quería tampoco.
Yo no tengo por qué ocultarse los esta fantástica plantilla trae ya un link se los voy a mostrar primero
acá dice starter.
Bueno es una propuesta que nos hace la gente de este panel para darnos cuenta.
Les dije que ya vienen versiones vacías.
No voy a entrar a Araca venga local Jost voy a entrar al panel.
Rápido para no escribir tanta dirección.
Y voy a escribir starter punto HTML.
Bueno no hay mucha diferencia con lo que yo hice pero sí considero que el starter todavía le quedan
demasiadas cosas acá adentro y la verdad que queda bastante complicado pero sobre todo elejercicio yo
les aseguro y los invito aunque les quede mal la primera vez les quede mal la segunda porque vas a ver
cuando empezás a eliminar distintas.
Bueno por ejemplo quiero sacar este título que está dentro de una H3 ya veo que este es un título que
está grande y acá dice mal las etiquetas Smell son para hacer un texto un poquito más pequeño.
Supongamos que yo quiero eliminar esto.
Bueno tengo que tener la precaución si empiezo borrando acá termino en el H3 bueno las primeras veces
que te dediques a vaciar un panel es probable que si te pasas ahí y borraste un Dib le estás sacando
la apertura a este Dib que cierra.
Bueno se va a desarmar algo vas a ver que os sale un tipo de letra mal algo sale acomodado es normal
que te pase está bien que te pase pero remarcó la importancia del ejercicio de intentarlo de intentar
tocar y de intentar comprender cómo funciona te va a ayudar muchísimo.
Y si en ese sentido puede que acá el trabajo esté bastante cocinado.
Pero el ejercicio de uno tras usarlo a mano a este panel hace que cuando termines y te salga bien lo
domines de una manera bastante importante.
Bueno vamos a hacerlo si ya me vengo a esta pestaña porque quiero mostrarles también que la plantilla
y ustedes lo tienen instalado.
Miren si yo vengo el árbol me equivoqué acá si yo vengo acá al árbol veo que hay una carpeta que dice
documentación que es una web y si entro esta web desde mi servidor local tengo una documentación bastante
resumida pero es una buena guía para leerla y seguro que vas a sacar algún dato útil de acá.
Si una repasaban y te va a hablar sobre la estructura del panel como está el cómo están hechos los diferentes
folders o las diferentes carpetas para organizar los archivos.
Después cómo funcionan los plugins que tiene está bastante bueno yo lo que te recomiendo a lo mejor
si te cuesta un poco el inglés con el mismo Google Crom click derecho traducirlo al español y te va
a ayudar bastante.
Bueno ahora volvamos al panel.
Bueno este es más o menos la versión que yo dejé yo quise dejar estos cuadraditos porque es interesante
cómo están formados.
Ya vamos a llegar a eso.
Yo empiezo a imaginarme estoy seguro que en dos o tres capítulos capaz que modificamos mucho de lo que
digo ahora pero empiezo a imaginarme algo así estructuraba donde salga la foto del usuario que está
logueado en ese momento la voy a repetir acá con su nombre.
Vamos a cambiar esta bandera por la campana.
Es cierto yo tenía una campana pero quiero que exploremos un poco como manejar los íconos.
Y bueno acá en el centro y estos cuadrados van a salir y seguro vamos a poner los videos y en algún
punto pondremos estadísticas a donde vos puedas ver algunas estadísticas del sitio para aprovechar todos
los gráficos y estas cosas que tenemos vamos a practicar entonces Maye SQL como hacer consultas y contravalores
sacar promedios y expresarlos de manera gráfica.
También tendríamos que hacer algo con esto que nos quede acá servido por eso no lo borre que es este
casillero este input de búsqueda que no puede faltar en cualquier red social quiere buscar un video
de tal o cual cosa bien esto va a ser el nudo del corazón de nuestro PHP Tube.
Pero para que un usuario llegue acá primero tiene que loguearse.
Bueno acá va a ser un poco distinto a lo que originalmente es YouTube a donde yo puedo ver videos sin
siquiera la odiarme.
Bueno puede ser que a futuro que quieras hacer así vamos para adelante.
Pero por ahora sobre todo porque en la mayoría de las aplicaciones que nosotros podemos trabajar para
terceros para desarrollar desarrollarlas comercialmente y por lo general no es así.
Son lugares privados aplicaciones privadas a donde yo sólo puedo acceder si pongo mi usuario y contraseña
de manera correcta.
Lo bueno es que como vimos si yo me vengo acá al país después tengo que venir acá a ejemplos y tenemos
el login y él registra.
Entonces yo lo que quiero hacer es estos dos estos dos archivos quiero seleccionarlos selecciono uno
a ver el otro es el Register y el Lovin.
Yo mantengo apretado control para seleccionarlos así y los voy a arrastrar y los voy a llevar a la carpeta
raíz que es PHP tuve acá listo.
Ahí los traspasé los Movi los copio acá o los corté y los pegué sería lo mismo porque desaparecieron
de ejemplos.
Ben esta ahora cierro esto y ya veo los dos archivos acá.
Bueno veamos cómo funciona esto.
Me voy a venir acá.
Ph.D y voy a tener que cambiar la dirección voy a poner Lovin punto HTML.
Qué paso.
No estamos viendo lo que veíamos cómo era esta página del ojeo la página era así y sin embargo cuando
quiero entrar después de haberla movido está todo roto.
Qué está pasando.
Bueno primera medida.
Click derecho.
Inspeccionar consola esto es típico tengo que por consola ver qué errores está tirando esto porque algo
pasa bueno y veo que no está encontrando vostra.
O sea el código.
Vamos a analizar el código del Lovin que ahora lo tengo aquí en PHP Tube.
Vengo bien acá estoy bueno es no es tan complejo como el panel.
Lo primero que veo es que es corta la página así que yo no me voy a molestar en vaciarle en tocarla
demasiado porque es bastante simple veo que tengo un montón de referencias de y no voy a decir un montón
son muchas menos que las que hay en el panel propiamente dicho.
Pero si veo algo miren de entrada lo primero que quiere cargar la página antes de mostrarse es obviamente
vostra está llamando a gustã que se encuentra en Bower vostra distó esta es la ruta yo me vengo a través
de la web y mira lo que me dice que esa ruta no le está encontrando.
Cómo que no está si está a ver si esta es Bower component acá está Bootstrap si si está por qué no lo
encuentra.
Bueno no lo encuentra porque originalmente lo Guin estaba metido adentro de la carpeta era dijimos Peus
y después examples.
Aquí estaba Lovin entonces por eso la dirección que tiene puesta
es relativa.
Mira que acá dice.
Punto punto Barrapunto punto barra lo que le está diciendo al navegadores hoy para encontrar vostra
desde la posición relativa en la que te encuentras lo bien estaba adentro de dos carpetas está diciendo
Bueno salió un nivel para atrás salió otro nivel para atrás y recién ahí vas a encontrar la carpeta
por donde te tenés que meter que es todo entonces acá se me cerró sin querer el archivo lo voy a hacer
Revé esto y vamos a otra vez con Obie.
Ahora sí voy a tener que borrar esto y es tan fácil como lo voy a cerrar para hacerlo de nuevo.
Controlé F ya automáticamente tenía seleccionado este punto punto Barrapunto punto barra me lo pone
como término de búsqueda encuentra 10 ocasiones.
A donde hay que reemplazarlo hay que reemplazar esto por nada para borrarlo.
Esto que les digo ahora es para que no lo tengan que borrar a mano uno a uno y hay varios lugares que
se repite lo mismo acá abajo en donde se cargan los script.
Quiero decir también pasa lo mismo.
Entonces vamos acá le di controlé F me apareció el menú de búsqueda.
Escribo lo que quiero cortar y lo voy a reemplazar por nada.
Entonces ahora si le doy a reemplazar todos no saquen la mirada de acá.
Cuando le doy a reemplazar todos.
Listo desaparecio.
Ahora vamos a ver si esto tiene un efecto positivo sobre la página a ver si ahora si carga de manera
completa y desaparecen todos o por lo menos la mayoría de los errores.
Voy a refrescar.
Bueno miren qué suerte no.
Qué suerte no hemos hecho las cosas bien.
Por eso tenemos acá errores cero nada.
Ahora sí estoy tranquilo de que todo funciona bien y vamos a operar un poco el código por sobre nosotros
no vamos a hacer lobby con Facebook o con Google de hecho que si no estoy yo acá no existe más Google
Plus.
Entonces vamos a buscar cómo podemos hacer para buscar fácilmente las diferentes partes para ir tocando
y mejorando.
Bueno lo primero que voy a cambiar es esto que sale acá admin LT Bueno lo vamos a cambiar de la siguiente
maneras busca admin se me pasó ahí está esto que está acá
esto de acá que encima es un link ven si le hago click me lleva a un lugar que no funciona.
Pero no importa me di cuenta de que son link porque es una etiqueta de tipo a las etiquetas de tipo
son Link.
A su vez bueno miren acá dentro de lo que hace el panel es poner la palabra admin en negrita y la palabra
con la sigla LT normal y así lograron este efecto que está muy bueno.
Entonces para no complicarnos vamos a De momento creo que no le vamos a poner ningún link acá podrías
poner el link principal de tu web no sé lo que quieras.
En todo caso ya veremos a ver como queda esto de HP vamos a poner acá TV y se me ocurre que no le tocamos
más nada para no complejizar.
Veamos como queda listo.
Me encanto.
Después vemos si ponemos el logo de
traducir esto vamos a poner inicia sesión y cómo ven qué tengo acá.
Agrandar qué tengo aquí un formulario y ya sé de antemano que es el formulario de logro pero yo ya me
estoy entusiasmando demasiado con algo que no voy a trabajar que es un archivo HTML.
Vamos a cambiar esto vamos a cambiarlo antes de seguir avanzando.
Click derecho.
Renombrar y le voy a cambiar esto por punto de HP ahora me gusta mas.
Si vamos
vamos vamos
bien adónde va apuntar este formulario.
Ya van a ver cómo lo vamos a hacer pero de antemano les digo que va a apuntar a mismo.
Entonces lo vamos a poner Lovin punto PHP porque vamos a tratar de resolver todo este problema lo veo
en nosotros mismos.
Meto post ya sabemos que es más seguro para eso.
Para esto si viene bien el post porque porque yo no voy a pasar la contraseña del usuario por el método
G.T porque si lo paso porque recuerden que la contraseña va a ser visible acá arriba eso es la inseguridad
hecha realidad.
Bueno vamos viendo por parte este imput de Tip y mail ya sé que es este IMPO a ver de acá de hecho que
dice Ismail
si se fijan Hay acá un pequeño sobre.
Vamos a ver si podemos identificar eso en el logo acá está esto de acá es el sobre.
Ya me doy cuenta por esto en blog y gráfico son un tipo de íconos que trae una librería con íconos que
trae el panel.
Entonces si no quiero el sobre borro todo esto.
Miren ahí está vuelvo me dio error por qué.
Porque lo renombre vamos a poner la capa de HP.
Ahora si no está más bien estamos en lo correcto y así se va aprendiendo a identificar qué es cada cosa
dentro de una plantilla podés conocerla y si no borra ves que desaparece.
Ah era eso con Control Z fácilmente lo vuelvo a hacer aparecen buenos Pleiss folder es lo que va a salir
acá.
Y mail a ver si te aparece el sobre de nuevo listo.
Ya está el sobrecito.
Esto lo vamos a dejar como está.
Vamos a chequear si por cada input los nein que no están el Nein que era la etiqueta o el índice con
el que yo voy a enviar este dato entonces cómo voy a mandar el mail de usuario.
Recordemos que vamos a usar los mails como nombre de usuario como manera de identificarse en nuestra
red.
Entonces lo vamos a mandar simplemente con la etiqueta y mail para que tenga coherencia.
Bueno vamos al otro imput que es de tipo password porque no quiero que se vea lo que escribe el usuario
el Pleiss Holder obviamente va a ser password nada mágico por acá nadie se lo voy a agregar porque no
están puestos los naipes.
Y cómo voy a mandar este dato a PHP.
Bueno le voy a poner una etiqueta un sticker para poderlo identificar del otro lado simple con coherencia
Pajuelo.
Bueno yo sé que a veces nos gusta poner cosas en español en inglés pero bueno si le estamos poniendo
password y bueno mantengamos todo paso por mail y no vamos a tener problema acá tenemos un check box
de recordarme por ahora lo vamos a sacar vamos a cerca.
Cómo se acuesta.
Bueno vean que está metido dentro de una fila.
Esto es un robo.
Yo voy a separar.
Vamos a analizar esta parte de acá.
Por qué lo ponen a todos en una fila.
Esta gente ha metido en una fila el remember mi el recordarme y el botón las dos cosas en una fila y
cómo se ve esto.
Claro ven el remember mí y el botón para el odiarse.
Están a la misma altura en una misma fila.
Ahora entiendo bien.
Entonces yo voy a borrar solamente esta columna.
Hay dos columnas.
O incluso la voy a dejar por las dudas que después quiera ponerlo.
Entonces nada más voy a borrar esto para que me sea fácil agregarlo.
Luego de actualizar hoy desapareció toda esta parte de Facebook o Google.
Yo no las quiero usar así que con este Hor y estos dos botones se van.
Así que bueno vamos vamos a borrar esto que lo vamos a encontrar aquí.
Yo ya veo el horror que me dice por acá estoy.
Claro acá está en un Dib y bueno miren la clase cómo se llama Social Links.
Listo es esto.
Voy a borrar todo este día.
Adiós adiós.
Voy a esto se lo cambio esto si lo quiero dejar y es el olvidé clave
y esto es el link para registrar registrar una cuenta.
Este link Ben es una etiqueta.
Por eso es un link que apunta a otro lugar cuando haga click va a redireccionar.
Le voy a tener que cambiar.
A dónde apunta porque si va a apuntar a registrar que lo tengo en la raíz.
Pero ahora Register se llama punto de HP.
No es más HTML.
Bueno va a ser todavía no lo hemos renombrado pero ya lo dejó preparado.
Olvidé mi clave y no lo tenemos hecho así que no le ponemos todavía una dirección en particular.
Me faltaba traducir el botón Me di cuenta que este botón de ingresar.
Entonces le pongo ingresarã.
Veamos si esto tomó color.
Vamos a ver cómo se ve cómo luce.
Bueno es lo que necesitábamos.
La verdad es que se desluce un poco al desaparecer los botones de las redes sociales.
Pero bueno a futuro podríamos agregar celo a la hora que lo vamos a decidir en un par de clases más.
Lo importante es que tenemos nuestro panel de acceso y la verdad.
La verdad es que tendríamos que reemplazar esto porque hemos dejado tan deslucido el centro del panel.
Al irse el color rojo me interesa que aparezca acá el logo.
Entonces yo ya tengo preparado el logo.
Vamos a ir al código acampé HPV y me voy a crear a ver si no tengo para no molestar con cosas internas
del panel.
Yo me voy a preparar una carpetita acá ni un folder le vamos a poner imágenes le pongo un español para
saber que son mis imágenes aparte de las que trae el panel.
Esta imágenes y ahí voy a arrastrar este logo que yo preparé se lo voy a dejar también para que les
quede de la misma manera Wayans el logo que ustedes quieran.
Bueno acaso ya pegué el logo a ver si se pegó.
Si ya se pegó entonces a donde decía el título este título que no me gustó tanto cuando lo puse no me
terminó de convencer.
Copiar todo esto y voy a poner una etiqueta y M.G. las etiquetas imágenes enter ya me lo propone Atom
y va a ser tan fácil como poner imágenes barra y mi logo se llama PHP.
Tuve punto BNG ese es el archivo.
Veamos si funciona si queda muy grande muy chico.
La verdad no lo sé.
Bueno la verdad es que ha quedado estoy buscando palabras que no sean inapropiadas para decir lo grande
que quedó esto.
Bueno tendría que editar y achicar la imagen.
No me di cuenta que era tan grande pero lo vamos a arreglar de manera provisoria poniendo un Staël Wiz
de ancho.
Ahí está dos puntos y le vamos a poner un ancho de 300 píxeles.
A ver si mejora
sigue quedando grande sigue quedando grande.
No vamos a perder más tiempo en esto.
259 2:50 y no negociamos más.
A ver no dije nada así que no gana 200 último.
Bueno también yo he agrandado el tamaño de esto.
Ese sería mi vista normal.
Sé que ustedes lo van a ver súper pequeño ahora sí es verdad que quedó buenísimo quedó buenísimo que
no nos vea YouTube porque nos va a venir a hacer un juicio calculado.
Bueno ha quedado listo ya nuestra pantalla de login.
Hemos trabajado trabajado puro HTML y bueno nos vemos en la próxima clase donde ya empezamos a trabajar
con PHP y vamos a trabajar con la base de datos para poder validar las credenciales que nos proponga
el usuario.
Muchas gracias.