Curso Programación Blog PHP

vamos a empezar a crear un blog antes de crear el blog lo que voy a hacer es analizar qué es lo que quiero obtener de esta aplicación voy a analizar un poco cómo funciona un blog en primer lugar siendo una aplicación web 2.0 tengo que tener muy claro que en el fondo va a haber una base de datos esta base de datos almacenará información ahora veremos que almacena exactamente esta base de datos un blog como muchas aplicaciones web hoy en día es una aplicación que tiene dos caras por una parte tiene una interfaz de usuario tiene lo que se llama un front-end tiene una parte vista por el usuario final y por otra parte tiene un back end tiene lo que se llama coloquialmente un panel de control las dos partes van a tirar de la base de edad pero curiosamente cada parte será un poco independiente por tanto tenemos una primera parte que va a tirar de la base de datos tenemos también una segunda parte panel de control que va a tirar también de la base de datos dentro de esta primera parte podremos sobre todo lo más importante leer entradas del blog evidentemente lo primero que hace un usuario es poder leer entradas del blog a partir de ahí tendremos más funciones tales como por ejemplo buscar entre las entradas o también podremos filtrar por categoría hay muchas más cosas que se pueden hacer dentro de un blog pero digamos que estas son las tres piezas esenciales cualquier cosa que hagamos finalmente lo que va a hacer es tirar de la base de datos va a extraer información de la base de datos curiosamente además esta flecha digamos que estaría incorrecta porque en la parte frontal del blog generalmente no vamos desde la parte frontal hasta la base de datos sino que la base de datos es la que introduce información dentro de la parte frontal también es cierto que puede haber una parte donde el usuario un usuario un lector pueda generar un comentario generar comentarios solo esta parte sólo la parte de generar comentarios tendría una cierta componente de escribir en la base de datos filtrar buscar leer en definitiva todo es leer pero generar comentarios es escribir un comentario dentro de la base de datos con todos los peligros en cuanto a seguridad web que esto conlleva ahora luego hablamos de ellos esto es lo que ocurriría digamos en el front end déjame que ponga un texto por aquí escapado front m que es lo que se conoce como la parte frontal de una aplicación web siendo la parte frontal la parte que al final ve un usuario plano de esta aplicación web a partir de ahí tenemos una segunda parte que es el back end o lo que se conoce como el panel de control dentro del panel de control hay muchas cosas que podemos hacer como por ejemplo podremos gestionar entradas cuando digo gestionar me refiero al pack crudo de crear entradas eliminar entradas actualizar entradas y buscar entre las entradas puedo crear puedo leer puede actualizar puedo eliminar también podré realizar acciones como gestionar comentarios en la parte de gestión de entradas evidentemente hablando de un blog suele servir para crear entradas sin embargo la parte de comentarios suele servir para gestionar los comentarios dentro del blog por supuesto ya que hablamos de gestión poder realizar otras operaciones tales como por ejemplo gestionar usuarios en definitiva todo va a tratar de lo mismo todo va a tratar de dadas entradas comentarios usuarios registros plugins plantillas lo que sea de poder realizar una operación de gestión siendo la gestión insisto un pack que comprende leer escribir modificar y eliminar y diré por tanto también que esta parte no sólo va a leer sino que también va a escribir mientras que en la parte frontal la lectura es lo más importante la escritura de vez en cuando puede ocurrir en la parte trasera lo que suele ocurrir sobre todo es escritura lo que hago es escribir el contenido bueno esto es un blog técnicamente esta estructura se cumple tanto en el blog como en la tienda online como en la red social como en muchos otros sitios hay una parte frontal con la que interactúa el usuario hay una parte posterior con la que interactúa el administrador y las dos inevitablemente van a trabajar con una base de datos centralizada que está en el medio de las dos una vez que tenemos claro qué es lo que queremos conseguir vamos a empezar a implementarlo por tanto en lugar voy a ir a el disco duro local ce me voy a ir a la carpeta de sham me voy a ir a http y voy a crear un nuevo proyecto llamado blog dentro de este proyecto vacío es la carpeta vacía llamada blog voy a crear por una parte un archivo llamado index php y por otra parte voy a crear una carpeta llamada admin así que este archivo corresponderá a la página principal del blog y admin corresponderá a una carpeta donde estará situado el panel de control es decir esto será el principio al menos al principio del front end y esto será el principio del back-end del panel de control además quieras que no sabemos que hay ciertas cosas que vamos a usar a lo largo de nuestro proyecto por tanto voy a crear otra carpeta que se llamará css seguro que voy a necesitar almacenar css en mi proyecto también voy a crear una carpeta llamada js también creará una carpeta llamada img y en muchos proyectos se crea una nueva carpeta llamada photo foto puede parecer lo mismo que img pero no lo es img son aquellas imágenes que forman parte de la propia aplicación del blog por ejemplo el fondo por ejemplo la cabecera el logotipo y foto forman parte del contenido que ponemos dentro del blog por ejemplo las entradas que introducimos dentro del blog o por ejemplo en una tienda online ing guardaría las imágenes de la plantilla de la tienda online mientras que foto guardaría las fotos de los productos que están dentro de la tienda online otra cosa que voy a poner es una carpeta llamada incluye por tanto la voy a llamar como ink para empezar a trabajar y una vez que tengo esta mínima estructura jerarquía de mi carpeta tal vez más adelante lo que haré es trabajar directamente con más carpetas pero ahora en principio lo que voy a hacer va a ser sencillamente empezar por aquí a trabajar así que como estoy trabajando la carpeta de ht docs voy a arrancar el control panel para asegurarme de que tanto apache como mysql están en verde están correctamente ejecutados en este caso lo están porque previamente los he instalado como servicios por tanto una vez que me ha asegurado arrancó un editor de texto por ejemplo head y por ejemplo sublime por ejemplo cualquier editor de adobe en definitiva cualquier editor de código voy a poner el código por aquí y ahora me voy a por supuesto lo voy a cargar dentro del editor como no lo tenemos y por otra parte voy a abrir un navegador web donde me iré a localhost blog ya que dentro de esa carpeta si aquí pongo hola voy a encontrar que hay olas es decir estoy trabajando con la misma carpeta bien a continuación voy a hacer una etiqueta docta y voy a crear la estructura mínima la estructura básica que debe tener cualquier página web por tanto voy a crear un gel voy a crear un móvil por otra parte dentro del head voy a poner el siguiente contenido por una parte voy a poner title y voy a poner blog este proyecto se llama blog obligatorio también una etiqueta meta charset es igual a usted 8 y con esto tendría ya suficiente como para poder empezar a trabajar dentro del body voy a poner un con y de igual a contenedor cierro el libro y dentro de este blog voy a poner un género una gente que también que tendrá la parte principal y un footer aquí voy a poner una etiqueta hace 1 donde pondremos el blog de cada uno quisiera el blog de josé vicente bardo recargo aquí tenemos etiqueta h1 puesta a continuación un h 2 es algo así como bueno voy a poner directamente jose vicente catalá y aquí en h2 blog oficial guardo recargo y me sobra un ace aquí tenemos tanto el uno como el h2 ahora en maine pondríamos por ejemplo una plantilla de un artículo del blog por tanto un artículo lo pondríamos con usando la etiqueta arctic el centro de arte y que vamos a poner algo como h 3 título del artículo una etiqueta a time fecha del artículo pues por ejemplo 0 01/01/2010 y 6 no lo sé a partir de aquí una etiqueta de parágrafo esto el contenido del artículo que vamos a leer y por encima de todo esto quizás algún ing ese mismo mes que cargaremos una imagen con alto contenido es decir tenemos por una parte un título tenemos un subtítulo y para cada uno de los artículos tenemos por una parte una imagen en este caso una imagen vacía no he cargado ninguna por otra parte un título del artículo por otra parte la fecha de publicación y por otra parte el contenido del artículo que vamos a leer más adelante también él [Música] título se convertirá en un hipervínculo se convertirá en un hipervínculo donde podremos leer el artículo completo php pero de momento no momento no hay artículo completo simplemente igual en la página oficial tendremos un resumen de todos los artículos y cuando pinchamos en el cabezal pues accederemos a leer el artículo completo al igual que funcionan la gran mayoría de blogs hoy en día esto es una plantilla de un artículo sabemos que finalmente tendremos x artículos dentro de un blog por ejemplo precisamente está para eso está para tener múltiples artículos y por último dentro del footer pues tendremos algo así como copyright 2015-2016 o el año que sea josé vicente carratalá además lo que quiere es que cuando abramos el blog ese año cambia automáticamente es decir que en lugar de ser estático coja la fecha actual del año en el que estemos ahora mismo lo que hemos creado por tanto es con html una estructura muy característica de un blog únicamente en html es decir lo que he hecho es crear únicamente el contenido una vez que ya tengo una mínima estructura me voy a crear una hoja de estilo vamos a crearla directamente externa por tanto link wray es igual a esta el sit y h red es igual a entrar dentro de la carpeta css y cargar estilo punto css por tanto en este caso lo que voy a hacer evidentemente es entrar dentro de esa carpeta voy a entrar dentro del css y voy a ir realmente a crear el archivo estilo punto css por tanto cargo este archivo evidentemente aquí dentro y voy a maquetar algo como lo siguiente dado que estoy en el estilo voy a especificar que quiero trabajar con zonas esto lo voy a hacer de la siguiente manera voy a crear una especie de separadores de libro voy a hacer lo siguiente estilos generales me creo un separador inicial me creo un separador final era por tanto digo body son estilos que se aplican a todo digo body para bing 0 píxeles margin 0px sales voy a decirle que background es igual algo limpio a rgb 220 220 220 y en principio hasta lo que tengo es que se me pone el fondo de color gris clarito a continuación vamos a ver muy bien a continuación voy a hacer algo como cambiar la fuente sencillo por tanto font family es igual a assange y así me cambia todo el texto a color y tipo de letra sin decoración ahora voy a decir que el contenedor tendrá una anchura del 80 por ciento quizás tendrá un fondo blanco tendrá un margin auto para centrarse en la pantalla con tener no contenedor muchos errores son por haber escrito incorrectamente las cosas y va a tener también un padding de 20 píxeles y también para que quede lo más limpio posible un box shadow de 0 píxeles 10 píxeles 20 píxeles rgb 000 0.4 es decir va a tener una sombra un poco arrojada un poco para que parezca este efecto de página en blanco sobre fondo un pelín más oscuro incluso podríamos poner el fondo un poco más claro porque tampoco me acaba de gustar que el fondo sea tan oscuro una cosa así que quede el fondo un pelín más gris que se note como el blog es una página en blanco que está por encima una vez que tengo estos estilos generales voy a trabajar medio de otro separador mirad y lo voy a llamar estilos cabecera este es un separador este es otro y ahora voy a hacer algo como que h1 por ejemplo tendrá un par de cero píxeles un margin de cero píxeles es más este estilo lo voy a aplicar tanto h1 como h2 y ahora lo que haré es algo tan sencillo como decir lo siguiente severo será text align center voy a hacer una maquetación pensando directamente en dispositivo móvil en tableta o teléfono y por otra parte por último prácticamente simplemente voy a decir que el h2 quiero que tenga un fondo size más pequeño quizás de 14 píxeles así que guardamos recargamos y vemos como tenemos el texto por ahí por último dentro del header quiero crear una marca quiero crear una línea que me separe el header del contenido así que lo que voy a hacer en este caso es colocar que en el header tendré un border botón de un píxel solid grave es decir un borde en la parte de abajo de un píxel sólido de color gris también lo que puedo hacer por tanto es poner en el header un párking botón de 20 píxeles es decir para que haya un poquito de espacio y también un margin bottom de 20 píxeles para que ese parador también empuje con respecto a la parte de abajo cuidado que margin-bottom lo escrito incorrectamente y por eso no funcionaba vemos como el parking lo que está haciendo es poner un margen un poco hacia arriba y el margen lo que está haciendo es poner un margen un poco hacia abajo a partir de ahí también podemos en lugar de gris pues poner un color tal como por ejemplo 220 como 220 como 220 para que esa separación este pero se note lo menos posible para que los elementos estén pero queden lo más estilizados posibles continuamos acabando un poco de estilo para los artículos incluso ahora luego quiero poner un contenido así de un contenido tangencial pero ahora voy a maquetar los artículos por tanto a lo siguiente estilos artículos y curiosamente en este proyecto estilos artículos quiero maquetar atención mirad en el principal quiero maquetar por una parte atención sexual y veo artículos una sección es una parte del contenido que contiene algo en este caso esta sección contiene artículos fijaos como los artículos están dentro de la sección y ahora voy a crear otra sección con el id tangencial es tangencial pues tangencial por ejemplo tendrá un artículo que se llamará buscador tendrá otro artículo que se llamará categorías tendrá otro artículo que se llamará últimos artículos en definitiva una serie de utilidades adicionales a nuestro blog pero cuidado no quiero que aparezcan aquí quiero que aparezcan aquí a la derecha por eso voy a hacer lo siguiente estilos artículos ahora digo él vive el sexual perdón que se llama artículos voy a decirle que tenga un wifi del 70 por ciento no se ve pero ahí está y si lo queréis ver mejor le puedo decir por the border right y le digo que es de un pixel solid rgb 220 220 220 es decir esta pequeña línea vamos a verlo border right un píxel solid vamos a poner un rey se lo estoy poniendo en h2 que hago yo poniéndose la noche 2 nosotros vamos a poner ahí viene aquí en artículos ahí está ese separador que se para por una parte de los artículos y por otra parte el contenido tangencial ahora estilo es tangencial es otra sección veis cómo este separador viene bastante bien para separar temáticamente los estilos css y ver claramente que hace cada bloque voy a poner tangencial por mirar sería mucho mejor que lo pusiera dentro de una etiqueta llamada a side ya que la etiqueta assaidi html5 sirve específicamente para eso sirve específicamente para poner el contenido tangencial ahora digo artículos cloud leaf y ahora en estilo tangencial digo aquello que es así tiene un wish del 25% tiene un flow drive y ya está fíjate como por tanto tengo aquí el buscador categorías y últimos artículos tengo aquí un copyright y tengo el copyright porque ya sabéis que siempre que me pongo a flotar tengo problemas de que los objetos me empiezan a salir así que sabemos que como siempre la solución consiste en poner un deber style clear dos puntos voz para conseguir para propiciar que la flotación sea correcta y que los elementos no se salgan del contenedor por tanto maquetado a grandes rasgos este blog por una parte tengo el artículo por otra parte tengo la fecha y el contenido vamos a maquetar un poquito más los artículos y con lo siguiente h3 quiero un padre de 0 píxeles quiero un martín de cero píxeles no me importa me importa cuidado esta h 3 esto no es un y de esto va sin almohadilla ahora si no me importa que el título se quede azul subrayado así que es mejor para la usabilidad de parte quiero hacer lo mismo con el time y con el parágrafo ahora voy a decir lo siguiente time p quiero que el front 6 o sea de 10 píxeles que sea más pequeño es igual de hecho demasiado pequeño pero bueno lo voy a dejar en 11 píxeles y con eso empezamos a trabajar y más adelante veremos si es muy grande o si es muy pequeño en cada uno de los artículos artículos arctic él quiero poner lo siguiente primero un padding de 10 pixeles segundo un border botón de un píxel sol y rgb 220 220 220 que sea pesado con los márgenes pero así vemos exactamente dónde acaba cada bloque y dónde empieza el siguiente de hecho este color gris clarito es el que quería haber puesto en el margen del asa aquí en el grave aquí estamos y punto y coma para que se quede estructurado y que se quede claro no es la bomba de encuentro diseño gráfico pero por lo menos es claro y ahora por último estilo scooter estilos pie de página copiamos y pegamos este bloque y vamos a hacer lo siguiente en estilos pie de página voy a decir algo como por ejemplo footer es text align centre y en principio no vamos a dejar así porque para el futuro tampoco quiero mucho más como mucho voy a decir un padding top de 20 píxeles y un pub link botón de 20 píxeles y nada más simplemente para que se quede un poco espacio que respire el footer y ya está tenemos por tanto por aquí la estructura tanto la estructura html como una serie de estilos mínimos en css para poder empezar a trabajar lo bueno de empezar con html css es que ahora en cuanto lleguemos a la base de datos al haber creado una maquetación por defecto sabemos un poco que necesitamos sabemos que para cada artículo necesitamos una imagen necesitamos un título necesitamos una fecha necesitamos un texto vale por tanto incluso puede ser que necesitáramos un autor ahora lo veremos en definitiva tenemos ya una idea de que le vamos a pedir de que le tenemos que pedir a la base de datos y una vez que ya tenemos mínimamente la parte gráfica marcada vamos ya a empezar con la base de datos yo me abro una nueva pestaña voy al panel de control de sadam me voy a la base de datos y voy a crear en este caso una nueva base de datos llamada blog a la que le pondré el cotejamiento en ute f8 español dentro del blog voy a crear las siguientes tablas es evidente que tiene que haber una tabla llamada de entradas es el núcleo del blog voy a poner de momento 10 campos no sé cuántos va a tener el blog esta es la gracia de ph media yo puedo crear 10 si me hacen falta pondremos si no me hacen falta tantos los que se queden en blanco se eliminan para una entrada sé que tengo un campo primario auto incremental siempre esto lo voy a hacer para prácticamente cada cada tabla y a partir de aquí voy a poner un tc para la fecha el título para el título del post el título de la entrada del blog el autor que será una clave foránea ahora hablamos de esto el texto del artículo la imagen del artículo la categoría a la que pertenece y en principio en principio creo que no necesito nada más tal vez más adelante me di cuenta de que necesito algo más pero no pasa nada porque más adelante puedo volver y puedo añadir más elementos y de vamos a ir pensando un poco en la deficiencia de 255 caracteres pero es probable que yo llegue a tener un 1 255 ceros en cuanto al número de entradas no lo creo no voy a poner dos porque eso querría decir que máximo tendría 100 entradas es que igual sí pongo no digo ya 4 pero por ejemplo 6 tendría millones de entradas tendría 9 millones de entradas incluso le pongo 10 y tendría un billón de entradas por tanto es simplemente lo que voy a hacer es dejarlo con un parámetro razonable a lo que quiero poner etc es un parámetro que se basa en el número de segundos que han pasado desde el jueves 1 de enero de 1970 por tanto dios que tiene ocho caracteres el utc pasarán muchos años hasta que tenga más por si acaso le voy a poner 20 caracteres título le voy a poner por ejemplo 255 caracteres autor de 255 texto ni siquiera le voy a poner todo en este 5 del texto y contexto lo que ocurre es que ese campo es mucho mayor de todas formas 2.550 caracteres quizás más adelante vuelva y lo modifique la ruta de la imagen no debería exceder 255 caracteres y la categoría con mucho 255 caracteres con lo cual he hecho esto tengo mi primera tabla dentro del blog creada llamada entradas voy a crear alguna entrada más por ejemplo autores donde además los autores también son los usuarios del blog quien puede publicar en este blog 10 cosas para empezar el campo primero es el id y ahora este es índice primario auto incremental el nombre en este caso es usuario password ya que cada usuario tendrá que lograr en el panel de control sobre los usuarios de esta aplicación podrán entrar el resto no el nombre real voy a poner apellidos que tenga uno que ponga uno que tenga dos que ponga dos y ya está en principio y podría poner cosas como por ejemplo el email el teléfono por si en un momento dado necesito enviarle un mail a ese usuario elides entero 20 caracteres 10 por ejemplo el usuario será un variar de 255 caracteres la contraseña de 255 el nombre de 255 no creo que nadie tenga un nombre que ocupe tantos caracteres pero por si acaso basta que yo diga que nadie lo tiene para que venga alguien y lo tenga así que por si acaso lo voy a tener y e-mail lo mismo 255 caracteres pulsamos finalizar guardar y ya tenemos nuestra tabla de autores usuarios en este caso es la misma vamos también a crear una tabla de categorías esto es muy sencillo simplemente lo que voy a hacer es poner una tabla y de una columna y ve primario auto incremental y lo que haré en este caso es simplemente poner nombre categoría y ya está y de 10 nombre categoría será un marcha que tendrá 255 caracteres voy a hacer una cosa por si acaso que es padre que es la categoría padre por si en algún momento hago categorías y subcategorías categorías que dependen de otras categorías simplemente ya lo tengo por tanto le doy a guardar vamos a ver lo tengo autores tengo categorías tengo entradas creo que más o menos tengo todo lo que me hace falta y yo una vez que tenemos esto suelo crear un campo adicional que es registros es un campo con registros para en cualquier momento tener un registro de quién ha entrado esa aplicación que ha hecho que ha visto que el navegador ha usado que ip tenía y un poco me sirve para en un momento dado la aplicación falla o alguien la ataca poder tener alguna pista de qué es lo que ha pasado así que voy a poner una idea técnicamente no haría falta porque el campo utc podría actuar de idea pero digamos que lo pongo así que yo quiero guardar cuando ha entrado cualquier persona quiero guardar su ip quiero guardar su navegador y quiero ver qué página estaba viendo en ese momento son los otros mínimos que puedo guardar así que esto es un campo de 10 esto es un campo también me ponerlo de 20 la ip es un campo de tipo marchar el carácter es el navegador 255 y la página que estaba viendo por si acaso le voy a poner también 255 caracteres así le voy a guardar y como veis ya tengo preparado una base de datos con los elementos mínimos para poder trabajar para poder compartir información dentro de esta aplicación web ahora lo que voy a hacer es lo que se llama una carga estática es decir voy a crear es un autor voy a crear un usuario voy a crear un par de entradas de muestra no he creado todavía el panel de control por tanto de momento lo voy a hacer manualmente así que me ido autores me voy a insertar y digo el usuario es jo casa con la contraseña dejó casa el nombre es josé vicente en los apellidos es carratalá sanchis y el email es info josé vicente carratalá puntocom tengo ya por tanto una autoría atención porque el líder para ese autor es el número uno a continuación voy a crear una nueva categoría iba a ser la categoría general y no va a tener ningún padre ya que es la categoría mayor por último voy a crear una entrada así que voy a decir lo siguiente en el tc cuál es el utc de ahora mismo no sé epoc convert es una página que tiene utilidades para convertir de un tc a fecha normal y vuelta y me dice que el utc de ahora mismo es este de aquí entonces ahora luego me lo pondrá automáticamente la aplicación por de momento lo pongo yo manualmente el título esta es la primera entrada del blog va a venga algo más sencillito primera entrada autor 1 en autor no pongo el nombre del autor pongo el código del autor ahora luego veremos por qué en texto lo que hago es poner esta es la primera entrada del blog que estoy creando en esta clase en imagen de momento no voy a poner nada y en categoría voy a poner 1 bien cuidado porque vamos a ver que la imagen requiere no sé es una apuesta incluso vamos a verlo no le he puesto nada me ha puesto nada en imagen básicamente en imagen se ve que me he dejado con un valor numérico no sé cuándo dudo esto creo yo creo que cuando dudó veo que si veo que imagen me lo ha dejado como entero e imagen no puede ser un entero imagen debe ser un marchar no pasa nada cuando detectó algún error de ese tipo me voy a estructurar la segunda pestaña me voy a imagen me voy a cambiar y dentro de aquí puedo cambiar el tipo de datos así que lo pongo como marchar y fijaos como ahora he modificado correctamente la estructura de esa tabla bueno voy a crear una segunda entrada etc a ver ahora ha cambiado un poco voy a crear un segundo artículo título segundo artículo autor número 1 texto este es el texto para el segundo artículo pues no sé y esperemos que se vea correctamente en la web simplemente para poner un poco de texto e imagen nada categoría 1 continuó ya no da error porque he modificado el campo entero con lo cual lo que he hecho es una carga estática de datos he metido un autor he metido una categoría he metido un par de entradas en registros no tiene sentido que ponga nada porque sólo tiene sentido que ponga cosas cuando realmente empiece a entrar dentro de la aplicación y una vez que hemos realizado una carga estática lo que tenemos que hacer ahora es llamar a los elementos de esa base de datos e introducirlos aquí dentro del contenido por eso me voy a ir a este index php y lo llamado precisamente php con la extensión php porque voy a poner contenido aquí dentro así que eliminó los artículos y me quedo solo con un artículo que va a ser un poco va a actuar un poco de plantilla este va a actuar de plantilla para ahora utilizar este artículo estático para devolver cosas de la base de datos ahí dentro así que cuidado me hace falta una cosa muy importante en la base de datos me hace falta crear privilegios crear un usuario con privilegios así que me voy a privilegios agregó un usuario y digo el usuario blog con la contraseña blog muy poco original lo estoy haciendo así evidentemente porque lo esté desarrollando en local esto no es nada seguro para subirlo a un servidor en producción le pondría una contraseña más segura bien en este caso lo que voy a hacer es que me voy a la plantilla de cualquier elemento desarrollado en bhp para conectar la base de datos así que por ejemplo en sql crm voy a cargar esto y voy a buscar una estructura de control que tenga un bucle while como por ejemplo ésta así que me vengo aquí y vamos a desgranar un poco lo que voy a hacer quito los comentarios para ahorrar líneas de código y digo me conecto en localhost con el usuario blog con la contraseña blog a la base de datos llamada blog pongo los datos en ute f8 y digo select all from entradas quiero que me selecciones todo lo que hay en entradas este eco es donde realmente voy a poner la plantilla por tanto aquí voy a poner esta plantilla pongo las sangrías lo más claro posible y ahora me voy a ir escapando para hacer cosas como por ejemplo lo siguiente en título del artículo voy a poner fila el título fila porque aquí he dicho fila aquí donde pone el contenido voy a poner fila no me acuerdo qué nombre dado creo que era texto pero lo voy a mirar en la base de datos y ya está y entradas y veo que es título autor texto muy bien y en fecha aquí donde pone fecha time voy a poner fila efe así que guardo recargo y fijaos cómo y pone según primera entrada segunda artículo bueno sería el segundo artículo voy a corregirlo desde aquí segundo artículo lo voy a cambiar directamente desde la base de datos vamos a ver lo que no lo veo segundo artículo pero simplemente esto también nos sirve para comprobar como lo que estamos haciendo aquí el segundo artículo está siendo extraído en tiempo real desde la base de datos técnicamente esto es lo más importante del ejercicio el con esta estructura de control simplemente una maquetación estática realizada en html y hacer que el contenido provenga directamente desde la base de datos me quedaría un poco la fecha no queda muy amigable probablemente el hecho de que ahí ponga la fecha en un tc internamente para la base de datos es muy bueno por una razón muy sencilla yo por ejemplo este bloque está mal ordenado el segundo artículo debería estar por encima del primero porque normalmente en un blog los artículos más recientes están más arriba entonces esto lo voy a hacer muy sencillamente si aquí pongo select el from entradas order by etc descendiente y me lo ordenas por el campo utc de mayor a menor y simplemente haciendo eso ahora aparece el segundo artículo arriba primera entrada abajo quiero decir con esto que para gestión de bases de datos la fecha en formato utc es mucho mejor para hacer cualquier tipo de operación que por ejemplo en este caso la fecha con año mes día hora minuto segundo pero de cara al ser humano esta fecha es horrible de cara al ser humano queremos verlo en una fecha un poco más humana por eso voy a hacer lo siguiente vamos a ver si me sale correctamente voy a decir qué fecha es grave y voy a decir año mes día d fila vamos a ver lo guardo y recargo y fijaos cómo el programa automáticamente traduce según la fórmula que yo le diga es decir y es año eme minúsculas es mes día es la letra d recordamos que hay una página fantástica que se llama pspv que es la documentación oficial de php y sale una tabla magnífica que te dice cada letra a que corresponde y en qué número de parámetros se mueve qué parámetros devuelve por tanto yo hay algunos que me sé de memoria y otros que no que consulto cada vez que los quiero usar entonces por ejemplo incluso voy a decir qué de m&m y voy a poner h y la tina minúscula s h mayúscula es ahora y latina del minuto s es segundo por tanto ahora fijados como guarde recargo y fijaos qué bien me dice a partir de esa fecha utc el año mes día hora minuto segundo ahora simplemente marchetto un poquito el contenido para que quede lo más bien posible lo último que me quedaría para complicar un poco la cosa sería poner el autor pero lo que voy a hacer es hacerlo en la siguiente parte porque puede ser más complejo de lo que en principio parece anteriormente en el diseño de la base de datos lo que he hecho es derivar a los autores y a las categorías a una página externa a una tabla externa por tanto yo ahora podría decir que creo por aquí vamos a verlo pues por aquí voy a crear un deber de clase autor y devuelvo la fila autor cuidado que se me ha ido un punto también podría crear un día de esta clase llamado categoría y la fila sería categoría cuando recargo y aquí lo tengo el problema está en que tanto en fila como en categoría aparece un número uno y un número uno esto quiere decir que por ejemplo en autor de esta entrada he puesto el número uno y yo sé qué autor con el líder el número uno es jose vicente catalá sanchis hay un problema y es que como le digo yo a mi página que ese uno se debe transformar en un nombre de autor por ejemplo o en un nombre de categoría bueno para eso existen unas cosas llamadas los lecciones los layout los join realmente las uniones de tabla me sirven para unir datos de dos tablas diferentes así que fijaos lo que voy a hacer voy a hacerme un poco de hueco se va a permitir y voy a decir selector from entradas lección autores aunque no sé vamos a verlo donde el autor para que te encuentre en el autor aquí está con autor es igual autores punto y d eso quiere decir ahora me puede dar error quizás bien eso puede eso quiere decir que ahora en lugar de llamar al autor puedo llamar al nombre porque lo que he hecho realmente si queréis lo vemos voy a hacerlo en una pestaña específica de sql lo que hago es una tabla crear una tabla como combinación del artículo y del autor eso es lo que hace leer yo en dos tablas y las une en una tabla gigantesca eso quiere decir por tanto que era por venir aquí y le digo que la fila es nombre y fijaos que pone jose vicente voy a hacer lo siguiente si la nombre cuidado con los dos puntos y fila apellidos simplemente para que cuando recargue ponga cuidado me falta o me sobra un punto vamos a verlo ahí me sobra un punto efectivamente hay otra hemos así que guardo recargo y pone nombre y apellido ahora que está un poquito con css para utilizarlo además más adelante podemos utilizar este autor para pinchando en el autor filtrar y sólo verlo los artículos de ese autor bien lo que voy a hacer ahora es lo mismo pero para la categoría cuidado he hecho un lección con los autores pero no con las categorías así que ahora digo lo siguiente lección esto está complicando categorías no me acuerdo y es que tengo memoria de texto entonces entradas categoría calorías y de dónde no me acuerdo categoría es igual a entradas punto y de fijaos que las peticiones que se cuelen se pueden llegar a hacer bastante largas por tanto para poder leerlas mejor lo que suele hacer la gente y no pasa nada porque tanto php como ese como lo permiten es dividirlas en varias líneas lección en autores este lección en categorías este order by útil desc de esa manera una línea muy larga la dividimos en cuatro líneas y podemos saber un poco mejor qué es lo que ocurre en cada una de ellas selecciona me de entradas y me lo juntas con la tabla autores y me lo juntas con la tabla categorías y me lo ordenadas por usted fe así que déjame ver en categorías nombre categoría y lo tenemos y la categoría no nombre categoría y si ahora guardo y recargo podremos ver vamos a verlo como en este caso lo he guardado dentro de la categoría general parece que el segundo artículo no tiene categoría no sé no me acuerdo deja de verlo parece que en entradas el segundo artículo categoría número uno vamos a verlo bien el primero tiene categoría general el segundo no tiene categoría ahora mismo no caigo porque pero ahora luego revisó el código en principio lo normal es que ocurriera esto es que aparezca la categoría bien una vez que tengo esto lo que voy a hacer es un poco estilizar porque tengo la clase autor y la clase categoría me voy por tanto a estilos artículos y digo autor coma categoría te voy a decir font-size de 11 píxeles vamos a verlo ahora para qué tanto el título como la categoría aparezcan más pequeños y ahora por último voy a cerrar esto y ahora por último voy a decirle que el autor es a ser red de momento a ninguna parte y ferrer en alguna parte también es el nombre de la categoría es decir de esa manera mirad pinchando en el nombre del artículo vamos al artículo extendido pinchando en el nombre del autor filtramos entradas sólo por ese autor y pinchando en la categoría solo visualizamos las cartel en las entradas que participen de esa categoría aunque no hayamos acabado con la parte frontal desde luego sí que tenemos lo más importante que es el haber extraído artículos desde la base de datos fijaos que si voy al segundo artículo no vaya a ninguna parte si voy a por autor no voy a ninguna parte si voy a por categoría no voy a ninguna parte pero me da igual de momento lo que quiero es poblar artículos desde la base de datos más adelante completaremos cada uno de estos enlaces lo que quiero ahora es trabajar un poquito con la con el panel de control por eso me voy a ir al panel de control recordamos que estoy en blog recordamos que tengo una carpeta llamada admin y recordamos que voy a empezar evidentemente como os podéis imaginar con un artículo llamado index punto php lo cargo y si ahora pongo admin pues empezaría a editar el panel de control panel de control y aquí podría gestionar usuarios gestionar entradas gestionar comentarios y todo pero cuidado esto no debe ser así esto no debe ocurrir no es posible que cualquier persona que esté viendo el blog de repente entré aquí a admin y pueda ya entrar en el panel de control así que lo primero que se suele hacer en cualquier panel de control de cualquier aplicación es crear un acceso autentificado con usuario y contraseña así que vamos a hacer eso voy a crear por tanto un dock type html html por aquí html por allá un boli por aquí ahora ya le voy a poner algo tan sencillo como un formulario que va a tener un input type text neymar usuario un input tait password me llamara no password y por supuesto un input de type submit cuando recargo y tengo esto tengo el clásico formulario el axón va a ser login punto php login punto php es un script que se encargará de ver si me deja entrar o no me deja entrar y voy a poner un método que va a ser igual a post para asegurarme que esta información la voy a enviar por post dejadme poner un pequeño estilo esta página realmente no tiene un estilo propio solo para ella con lo cual lo voy a poner interno y va a ser lo siguiente body va a ser background rgb 220 220 220 ahora voy a hacer lo siguiente bueno esto es esto y ahora voy a decir que el forma va a tener un wish de 200 píxeles un hype de 200 píxeles un padding de 20 píxeles un background blanco en margin auto y un top de 100 píxeles si hago esto veréis cómo aparece una caja una cajita como para el login si creéis lo pongo en líneas diferentes para que lo podáis leer mejor vamos a ponerlo aquí ya he cortado por donde no debía esto por aquí y esto por aquí bien ahora voy a decir lo siguiente input tendrá un wish del 100% un padding de 10 pixeles un margin top de 10 píxeles y un margin-bottom de 10 píxeles mira el top me lo voy a ahorrar ahora veréis por qué guardo recargo tengo ahí esto cuidado el wish lo voy a hacer del 95% para qué al 90% para que no se me salga de la pantalla otra cosa que voy a hacer es que al forn le voy a decir text align center y así los elementos me quedarán centrados por último lo que haré es usuario no voy a poner place holder en este caso lo voy a hacer con texto y contraseña el año va a salir mal simplemente porque no tengo la etiqueta meta charset es igual a efe 8 y aquí lo tenemos bien y por último quizás en el body podría poner algo así como font-family sanz sheriff y tengo por tanto maquetado un login o por lo menos el formulario del login ahora yo pondría un usuario pondría una contraseña le daría a enviar login php no existe todavía no voy a crear ahora pero lo que se tiene que validar es que el usuario y la contraseña que ponga realmente coinciden con ese usuario y con esa contraseña que tenemos ahí aquí la sangría se me ha ido por tanto aquí la llave tendría que estar a esta altura y aquí el input tendría que estar a esta altura ahora sí en cuanto a maquetación se ven mejor verdad para el programa da igual pero para nosotros para luego ver el código es mucho mejor es mucho más fácil bien a partir de ahora por tanto tengo que dibujar el login y por tanto mirad me voy a ir a admin me voy a crear un documento llamado login php por supuesto lo voy a cargar dentro del editor así que el login va a ser realmente un script ciego que va a hacer lo siguiente me voy a volver al index principal a cargar el index voy a cargar otra vez esta estructura de control que le pide algo a la base de datos y vamos a hacer lo siguiente cuidado porque la de carga doble no sé qué cerrado creo que cerrado el forma y ahora digo lo siguiente select el front autores e incluso puedo hacer lo siguiente select el forma autores fuera un usuario es igual algo más word es igual a algo el usuario es igual al usuario que he enviado y el password es igual al password que enviado dejadme resolver esto con contadores veréis contador es igual a cero contador es igual a 1 sí es cierto a ver si aquí nada de esto es cierto si no hay ningún autor que tenga este usuario y tenga esta contraseña nunca entraré aquí y si nunca entro aquí contador seguirá siendo cero por tanto ahora sí por supuesto algún autor que tenga este usuario de esta contraseña autor en ese caso contado en este caso será igual a uno por tanto ahora aquí abajo puedo hacer de momento algo sencillo que es un infeliz si contador es igual a 1 en ese caso echo el usuario que has puesto existe si no echo el usuario que has puesto no existe probemos lo yo vengo aquí y pongo esto y pongo esto envío y me dice el usuario que has puesto no existe pero recordemos que tengo en la base de datos un autor con usuario hijo carsa password o casa por tanto si todo va bien ahora pongo k’asa y pongo k’asa le doy a enviar y me dice el usuario que has puesto existe así que vemos como simplemente reutilizando la estructura de control que ya sabemos porque ha hecho un copia pega y voy a hacer muchos más copias y pega simplemente lo que hago es seleccionar método de autores donde el usuario sea igual a lo que me envía este por post desde el formulario con el name usuario y que el password sea igual a lo que me envía este por post desde el formulario con el name password simplemente lo que hago ahora es decir contador es igual a 1 y digo lo siguiente demás session start voy a arrancar una sesión voy a trabajar con variables de sesión voy a decir lo siguiente sesión y de usuario es igual fila y de ya esta hora diré algo como el usuario que has puesto existe y su vida y punto sesión de cuidado que he puesto dos dólares y no es conveniente vamos a verlo usuario o cars a tocarse y me dice que vamos a ver y su vida es este sesión y de usuario y de usuario si hay pongo y de usuario a que debo poner y de usuario por tanto volvemos carsa y me dice y sweet es la número uno lo que estoy haciendo por tanto es asumir que el usuario es correcto y darle una propiedad darle una galleta para que se la quede para toda la sesión para identificarlo evidentemente así que por último voy a hacer lo siguiente voy a buscar html directo es una etiqueta meta muy divertida que me sirve para cuando entré en la etiqueta irme a otra página así que me copió este ejemplo y hago lo siguiente mira seco esto eco esto que hago aquí lo que hago es lo siguiente si me he logrado correctamente me voy a escritorio punto php escritorio ahora así ya es el panel de control sí no me voy a index.php es decir vuelvo al principio vamos a probarlo y comprobamos como déjame volver atrás comprobamos como si pongo cualquier cosa le doy a enviar y se me devuelve veis como se me ha devuelto se me devuelve porque no es correcto en cambio si pongo un usuario y una contraseña correctos se me lleva hasta escritorio punto php que sí que claro que que no existe todavía pero ahora existirá lo que he conseguido por tanto simplemente reutilizando esa petición a la base de datos es crear un login crear un sistema al cual tú le pasas un usuario y contraseña se conecta a la base de datos mira así lo que has enviado es correcto y en el caso de que sea correcto te deja realmente entrar a la parte del panel de control de la aplicación ahora sí ya que nos hemos ganado acceso a el escritorio del panel de control lo que voy a hacer es crear este archivo realmente dentro de admin que se llama escritorio un tope hp lo cargo ahora escritorio veréis ya no está vacío y ahora voy a hacer una cosa mirad qué pasa si hay alguien bueno primero session start por descontado qué pasa si hay alguien que directamente mira es muy listo y se salta este login porque sabe que hay un escritorio y se me cuela directamente en el escritorio php y me empieza en maldades pues lo voy a hacer una pequeña protección y voy a decir lo siguiente no y set si no está puesto si no existe la variable de sesión y de usuarios así no existe es que nadie te la ha dado y si nadie te la da dos que te has colado aquí en ese caso usamos una instrucción que me encanta en php que se llama die que es muere vale muere es para la ejecución de este script muere tú no deberías estar aquí y por último voy a poner otro html direct vamos a verlo en login con lo cual le voy a decir que en 5 segundos me vuelva a index punto php por tanto index.php en este caso no me va a decir nada ojo para decir nada porque a mí no me dice nada porque sí que me había registrado había puesto usuario y contraseña correctos si queréis creo que tengo por aquí el firefox como me he registrado en chrome pero no me registrado en firefox desde firefox que voy a intentar colar pero voy a decir tú no deberías estar aquí y contamos cinco y en cinco segundos veréis como se me redirige a la parte principal momento vamos a verlo venga ya debería estar a perdón a persona no muy mal si le digo die todo lo que ocurra después del die ya no se ejecuta porque se ha muerto por tanto le tengo que poner el re direct antes del die así que lo fresco no debería estar aquí contamos 5 y ahora si volvemos un paso para atrás y me devuelve al panel de control simplemente los 5 segundos es para dar tiempo a la gente para que lea el cartel de tu nombre estar aquí adicionalmente si ocurre eso también se debería hacer algo así como guardar un registro en la base de datos como este usuario o está y ha intentado entrar sin pasar por el login como un poco avisando de que igual te pueden ser intentando atacar pero bueno de momento con esta mini protección ya tenemos suficiente y más adelante nos preocuparemos por proteger mejor el sistema una vez que tengo esto ahora voy a crear el html para el panel de control de octay para html html por aquí 0 por allá lo vi por aquí y dentro del body voy a hacer en primer lugar una etiqueta nada en otro lugar una etiqueta sexual en este caso no tiene nada que ver el diseño gráfico de la parte frontal de un blog con el diseño gráfico de panel de control para el panel de control me gusta un poco basarme en el diseño de wordpress que es un diseño bastante incluso prestashop ahora las versiones se basan en el diseño de wordpress que se basan en un menú de navegación a la izquierda y el contenido a la derecha en lugar del clásico menú arriba y contenido abajo por tanto dentro del nab voy a hacer lo siguiente voy a hacer un pull voy a hacer un link y voy a hacer una rev y digo entradas que es lo primero y lo más importante de momento vuelve a dejar sin tocar entradas sigo poniendo elementos entradas es para gestionar entradas categorías y comentarios usuarios y registros creo que con esto ya tenemos suficiente con esto ya tenemos como para empezar permitirme utilizar un poco lo voy a utilizar dentro no lo voy a utilizar fuera es igual sí h ref es igual a estilo css por tanto ahora me voy al blog me voy a la carpeta de admin me creó un archivo llamado estilo css no es el mismo estilo que el de la web normal es el estilo del panel de control y ahora voy a hacer algo como lo siguiente ya sabéis me hago estos separadores que vienen bastante bien estilo de la navegación que por ejemplo empieza aquí y acaba aquí y ahora digo nada es lista style type no padding pero píxeles martín 0 píxeles louis 20% height 100% background black black color huaycán no saber ahora todavía tengo eso por ahí voy a poner estilos generales estilos generales voy a poner algo así como por ejemplo que el body y el html tienen un wish del 100% un hype del 100% un padding de 0 píxeles un margen de 0 píxeles bien eso ya me gusta un poquito más pero el height yo quería que fuera más grande bueno la cosa en un error de control a como por error de consola porque falla al cargar escritorio no pasa nada es un error anterior kabul y él es esto en este caso le voy a decir también que nada tiene un height del 100% ahora sí ya tengo una barra izquierda que lo coge todo claro cuidado porque ahora tengo que poner nada es decir el agua que está dentro del dique está dentro del que está dentro del nap y le digo color in here it es decir hereda el color del que viene por detrás y le digo text decoration no no no quiero nada de decoración bien ahora además digo que font family sanz serie y ahora hago algo como lo siguiente nada un link va a tener un pareja de 10 píxeles no le quería decir ahora sí y le voy a poner por ejemplo también un mar no un border a ver cómo queda de un border botón un píxel sol white como separador entre los diferentes elementos y bueno más o menos ya la verdad es que me ha gustado cómo ha salido con lo cual para qué más ahora lo que quiero es que cuando pinchen entradas gestione entradas cuando pincha en categorías gestione categorías cuando pincha en comentarios gestiones comentarios es decir quiero que al pinchar en cada uno de estos pues simplemente pueda gestionar correctamente cada uno de los recursos del blog ahora viene una parte delicada tengo que explicar realmente dos conceptos a la vez uno cómo filtrar por elementos de menú y dos cómo crear una tabla donde se pueda crear eliminar dónde leer y actualizar así que por eso voy a dejarme la primera parte y simplemente me voy a centrar en dentro del main ser capaz de leer por eso vamos a verlo aquí me cojo una estructura de control php me la pego aquí y hago lo siguiente voy a empezar con selector from entradas y ahora me hago una tabla hago lo siguiente primero creó una tabla también no nos olvidemos de cerrar la tabla y dentro de cada una de las filas de la tabla voy a abrir pr y voy a poner una serie de tres tv tv fila fila título no me acuerdo de la estructura entradas así efe el título autor texto imagen y categoría guardamos recargamos y aquí la tenemos bien en este caso tengo que maquetar un poco más y le voy a decir estilo del bloque principal y digo el bloque principal bueno para empezar el mar le voy a decir flow left vamos a verlo ahí cuidado porque en este caso ya no me reconocen este elemento el sexo no me había llamado mail también es flow the left y ahora por tanto lo que voy a hacer si acaso es decirle aquí 100 píxeles cloud left y que flote todo lo que tenga que afrontar al menos me falta decirle que tendrá un wifi de pues no sé el 70 por ciento y ahí empieza a aparecer y ahora voy a poner algo como lo siguiente el table la tabla tendrá un wish del 100% vamos a verlo ayer es el problema vamos a poner 80% y bien y bueno voy a hacer un par de cosas voy a hacer algún truco no os digo que no de css a quien te voy a poner un tr p h voy a poner un table getting para que se sepa qué es lo que estoy pidiendo en cada celda entonces id 7 fecha autor no título autor texto imagen y categoría guardo recargo ahí tenemos la original y ahora voy a hacer un truco efe ss que es el siguiente béisbol tere tere realmente es main main table trv 2 puntos y en este caso quiere decir parte en inglés steven de spar y ven impar entonces voy a decir background rgb 220 420 420 y es un truco vamos a ver y ven y es un truco para que los elementos de la tabla en par impar de marketing con el fondo de un color por ejemplo para poder ver mejor qué es cada una de las celdas e incluso ‘lamentable’ ahora toco eso del odiel y ven el fonsal es de 10 píxeles para que puesto de un poquito más de espacio bien no era directamente even sino que era en sal o ibn entonces se ahora aguas y fijaos cómo bueno en este caso las dos me las ha marcado es realmente este ere es la fila la que tiene que marcarse y ahora sí la primera gris la segunda blanca la tercera gris y ahora veréis conforme vayamos escribiendo más como realmente veréis que hay más filas más celdas bien sigo ya puedo leer pero es muy importante es importantísimo que pueda escribir así que dentro del escritorio php voy a hacer lo siguiente me creo un th vacío me creo un té de vacío y ahora voy a hacer lo siguiente tr me creo un formulario es añadir entrada axel es igual a añadir punto php mesón es igual a post y ahora digo tv nada vais a poner por otro se lee desde los artículos no los pone la base de datos automáticamente así que nada voy a copiar esto es 1 2 3 4 5 6 7 y 8 así que digo input type neymar el título y flores esto vendría aquí bien esto lo voy a dejar así por qué autor de momento nada bueno lo voy a poner autor texto imagen y categoría así que esto es título autor texto imagen y categoría cuando recargo y si os fijáis veréis que aparece un elemento más de la tabla donde podéis poner más cosas claro empujan un poco te digo que no y por último un input type submit es decir para enviar esto a la base de datos vamos a verlo a pantalla completa y veréis como tenemos un formulario para empezar para listar elementos pero también un formulario para escribir el contenido de un nuevo post así que ahora lo que voy a hacer es cumplir la promesa de crear el script para vivir php por tanto me voy a admin me voy a crear un script llamado al abrir un tope hp lo cargo y básicamente a nadie va a hacer esto con objeto de esta información la tiró para atrás y digo selector de hecho el wild y además sirve para nada esto es insert into entradas values y ahora digo se puede poner enter mucho más cómodo para vosotros y digo no comer a la fecha gates es la fecha en formato etc el título el título es post el título el autor el post autor el texto es el post texto la imagen es el post imagen y la categoría es el post categoría después de haber hecho esto es muy recomendable que hagamos un eco meta refresh al escritorio php es decir así insertado el registro vuelve al escritorio así que voy a probarlo a ver si funciona bien la primera yo digo título tercera entrada autor un momento texto este es el de la tercera entrada está mal escrito me da igual imagen nada y categoría 10 envío me voy a escribir vale parece que algún problema ha habido vamos a verlo porque no ha escrito la entrada insert into entradas values estos de aquí vamos a examinar un poquito la estructura de la tarde vamos a ver qué requiere 1 2 3 4 5 6 y 7 campos y yo he puesto [Música] 1 2 3 4 5 6 7 campus en este caso seguimos investigando vemos qué etc el rey o bien título es título autor es autor vamos a verlo imagen y categoría a claro ya sé lo que falla y es que todos aquellos campos que son de tipo texto requieren la doble la comillas sencilla para sql y la comilla doble para php bien ahora sí vamos a probarlo y digo otra vez tercera de entrada autor 1 texto del texto imagen nada categoría 1 pero vamos a enviar y si nos fijamos ahora hay tres entradas así que por ejemplo cuarta entrada autor 1 texto este es otro texto imagen de momento nada ahora hablaremos de ello y categoría 1 le voy a enviar ya tengo cuatro artículos dentro de este panel de control esto en cuanto al panel de control pero si ahora entro dentro del blog comprobaremos podremos comprobar como no sólo se van poniendo en el panel de control sino que también se van poniendo dentro del propio blog es decir se presentando en el back end como en el front end en este caso para empezar con el autor no es ya que yo no sepa a qué autor pertenece ese número es que de cara a escribir el autor yo me vemos a ver los códigos de autor y esto es muy incómodo por eso lo que voy a hacer es algo mucho más sencillo entonces escritor yo me voy a ir al autor en el autor en lugar de poner un campo de tipo input voy a poner un campo de tipo select el select select y le voy a decir option value 1 josé vicente cara talado robson de esa manera ahora cuando recargo en un desplegable donde yo puedo seleccionar n autores bien yo ahora me vengo aquí y podría poner con el valor 2 pongo a juan garcía y fíjate como ahora al recargar yo puedo elegir entre con suficiente carratalá y juan garcía y de hecho cuando mande el autor por cierto que en el select tendría que poner name autor se mandaría realmente el y de uno si cojo suficiente carretera y se mandaría el elite 2 si cojo juan garcía esto es medio cómodo pero no del todo cómodo para empezar con garcía todavía no existe en la base de datos por tanto ahora eso quiere decir que tendría que venir autores e insertar un nuevo autor y decir que el usuario es juan con contraseña garcía y decir nombre juan contraseña garcía email juan ahorrarlo garcía puntocom yo continuó y ahora efectivamente existe un usuario con él y de número 2 que se llama juan garcía pero esto es poco eficiente porque yo he tenido que duplicar mi esfuerzo he tenido que hacer manualmente en sql dos elementos manualmente en el selectos elementos y cruzar los dedos para que coincidan que me puedo equivocar lo más práctico no es esto lo más práctico es que el valor del selecto provenga directamente de la base de datos cómo se hace esto es muy sencillo lo que hago yo ahora por tanto es hacerme otro código php no hace falta que vuelva a conectar a la base de datos porque ya he conectado arriba se puede hacer pero sería un malgasto de recursos digo selecto from autores y ahora aquí me cojo esta plantilla y digo select option value es igual a fila y d esto es fila el nombre y esto es fila apellidos con lo cual si ahora recargo quiero que veas como vaya parece jose vicente catalá sánchez y juan garcía pero no porque lo haya puesto yo manualmente sino porque lo está obteniendo de la base de datos esto qué quiere decir pues que señora me voy a la base de datos y en autores me creo un nuevo autor usuario jaime y contraseña usuario jaime lópez nombre de jaime apellidos lópez e mail jaime lópez puntocom y yo ahora recargo y quiero que veáis cómo solo por hacer eso automáticamente aparece jaime lópez aquí preparado para ser usado además como le he puesto por una parte el value y por otra parte el nombre y apellidos se inspecciona este elemento podréis comprobar como jose vicente es el número uno juana es el número 2 y jaime es el número 3 es decir le está poniendo automáticamente ley de que le toca porque en value le he puesto el ide de esa fila correspondiente dentro de la base de datos lo mismo como os podéis imaginar podría hacer con categoría así qué categoría lo que voy a hacer de nuevo es mirar copiar todo este select lo pego select categoría select all from categorías y digo fila y de nombre categoría y si ahora guardo y recargo vamos a ver que funcionado la primera fíjate como y pone general evidentemente como te puedes imaginar si voy a hablar por ejemplo de cosas de programación pues inserto un nuevo elemento le digo nombre categoría es igual a programación guardo recargo el panel de control y ahora podrás comprobar cómo está general y programación no le he puesto en el escritorio el meta charset arrastro pongo para que el acento se procesa de represente correctamente pero vamos a simplemente cuestión de poner esa etiqueta de compatibilidad html esto ha sido para escribir es decir lo que hemos hecho es poner el que al crear un nuevo elemento dentro del formulario es el nuevo elemento aparezca traducido con el nombre correcto en digamos en humano y que envíe el valor correcto pero ahora a continuación haremos la segunda mitad la segunda mitad es que aunque en la base de datos el autor ponga uno porque tiene que ponerlo cuando se nos presente en la pantalla pondrá autor y el nombre correcto del autor el autor lo que voy a hacer ahora es que el autor no aparezca con el número uno sino que una vez más voy a hacer de hecho yo creo que voy a hacer la misma petición cruzada que he hecho antes tanto para autor como para categoría así que igual incluso me la voy a copiar esta de aquí select el from entradas tal cual select el from entradas así que en autor no voy a poner autor directamente sino nombre apellidos y en categoría voy a poner nombre categoría porque para eso he hecho una petición cruzada donde a la tabla de entradas la he cruzado con autores y con categorías si ahora guardo y recargo podréis comprobar como aunque internamente en la tabla sigue poniendo que el autor es 1 y que la categoría es 1 aquí no había categoría todavía de cara de mostrar en una pantalla lo muestra un poco más en formato humano para redondear esta entrada para redondear este listado de entradas la fecha también la podríamos cambiar a un formato más humano por tanto igual que hemos hecho un poco al principio en los posts pues voy a poner el formato de beit y m de h es decir año mes día hora minuto segundo por tanto me voy a escritorio me voy a sustituir por toda esa cadena con la instrucción de muy polivalente y lo que hago por tanto al recargar es darnos cuenta como tengo ya la fecha escrita en formato humano podría maquetar un poquito más evidentemente pero otra cosa que quería hacer para acabar de maquetar un poquito este este este blog es que en el texto en lugar de poner un input voy a poner un text área por tanto en texto voy a poner text área y voy a poner por supuesto name es igual a texto y otra cosa que quería hacer otra cosa que quería hacer es que en este caso es aquí tenemos un texto más para escribir multilínea en este caso la fecha la estamos poniendo obligatoria para que sea la fecha del momento en el que escribimos el artículo pero si nos interesa esto y si quiero escribir un artículo y hacer como te lo escrito mañana o como que lo escribía ayer para eso os voy a decir que hay un campo muy divertido nos va a dar algún pequeño problema por days pero es el siguiente vamos a verlo dónde estás fecha no estás no estás te pongo yo entonces input type y esto es lo divertido de en lugar de texto pongo fecha neymar es igual la fecha en anadir les voy a decir que no me añadas el dato y si no añade m pero todo esto lo que me envíes por fecha por cierto que igual tengo que cambiar el tipo de datos en mysql moment y no la veréis estructura les voy a decir que el utc este tipo marchar ahora veréis por qué y vamos a probarlo así que guardo y recargo y quiero que veáis como bueno esto es un campo select este es un campo text área esto es un campo ahora trabajamos esto por cierto esto es un campo de categoría pero esto es un campo de fecha que me saca una selector de fechas muy interesante yo pongo por ejemplo fecha de mañana y digo quinta entrada este autor este es el texto de la quinta entrada imagen ahora trabajamos con eso general vale fijaos que en fecha en este caso en la quinta entrada me tiré por 1970 haya habido un problema vamos a ver cuál es el problema el problema es que si yo vengo aquí vamos a verlo me dice que yo hasta ahora estaba escribiendo los campos de utc pero ese campo de ahí este campo lo que hace el campo de html es devolverme la fecha en términos de año guión mes guión día así que yo lo que tengo que hacer es convertir esa fecha de año y un mes y un día era una fecha en formato utc pero una vez más la instrucción de el objeto de it be’ lo va a permitir porque yo entonces hago lo siguiente dejadme que me concentré y ahora digo vamos a ver de fecha y lo voy a poner vamos a ver si me deja lo pongo voy a poner algo envío bien no me ha puesto nada y lo que voy a hacer ahí lo tengo no me ha puesto fecha lo que voy a hacer es convertir el campo de fecha etc bien en lugar de usar el dt voy a hacer lo siguiente voy a hacer un gmt donde le digo que quiero formatear en y en lo que quiero formatear es el post-it efe vamos a verlo ahora un valor no he encontrado no pasa nada dónde está está aquí en voy a eliminar ese registro ok en la línea 49 no pasa nada [Música] bien creo por tanto una fecha a los 22 esta es otra entrada interesante dejadme que no ponga texto porque en este caso no me interesa le voy a enviar vamos a verlo me sigue poniendo 1970 por cierto que me pone en un en la fecha vamos a verlo examinó me pone 0 en el líder me pone 0 otra entrada interesante y lo que tengo que hacer bueno eso lo que estoy enviando creo que no creo que hay puede ser el problema el input type weithman fecha mein fecha dejadme borrar esta entrada y ahora guardamos esta es otra entrada y a 15 guardamos la entrada esta es otra entrada vamos a ver ahora cómo se ha cargado bien en este caso 2015 y lo que tendría que hacer es ya tengo 2015 cargado pero quiero convertir a gm de it en un es decir quiero convertir esa fecha en una época iunics vamos a hacerlo a continuación lo único que tenía que hacer era poner str to time dentro del fecha es decir creo en gm de le digo que me devuelva la información en formato 1 y a partir de ahí le digo que convierta en string time es decir que convierta una cadena en tiempo que es el post fecha de esa manera voy a borrar aquellas entradas que no valgan vamos a ello y por tanto ahora puedo venir aquí y me parece bueno y ahora digo que por ejemplo el día 16 esta es una entrada del día 16 autor josé vicente este es el texto de la entrada del día 16 imagen hablamos de ello y ya lo tenemos por aquí tenemos por tanto esta es la entrada del día 16 si lo vemos en el panel de control o si lo vemos mejor dicho en la parte frontal esta es una entrada del día 16 únicamente tengo que eliminar una entrada que es de aquí 2015 ya lo tenemos llegará por tanto el panel de control se me queda bastante más limpio que antes únicamente me quedaría como urgente por poner dentro de esa tabla la gestión de las imágenes en la gestión de las imágenes yo lo que puedo hacer es en lugar de poner un campo de texto subir una imagen cuidado porque al subir una imagen tengo que tener varios aspectos en cuenta a continuación por tanto especificamos que la imagen dentro del escritorio es un campo de tipo file por tanto en imagen en categoría name imagen aquí lo tenemos pues voy a hacer algo tan sencillo como input type text pregunta file y name imagen si simplemente por hacer esto recargo y veis como ese campo cambia al típico selector de cosas por ejemplo pues cara cargo una imagen que tenía por ahí en el escritorio pero sin embargo sólo eso no va a hacer que la imagen se suba solo eso no va a hacer que la imagen se cargue me hacen falta dos cosas más en primer lugar me hace falta que el propio formulario tenga una cosa que es en type es multi parte forma data creo que no lo escrito bien con lo cual voy a pedir cómo viene la llamada así que en html forma file en esta página que la conozco aquí está el hentai de multipark for data ahí está me estaba confundiendo un guión en lugar de ser guión en la barra multiparte formato esto es lo primero que necesitamos para realmente añadir elementos al formulario lo que hacemos ahora desde el punto de vista de php una vez que en el formulario tenemos electa multiparte form data es hacer lo siguiente me voy a ir a anadir php y aquí donde pone imagen lo que voy a hacer es decir lo siguiente por una parte dejo esto tal cual está que es post imagen por otra parte voy a decir que me aplaude dan file donde esta función tiene por una parte como parámetro uno el nombre de la imagen temporal al subirla y como parámetro 2 el nombre del directorio donde vas a guardar esa imagen así que usó una variable de servidor un poco especial que es files y dentro de files pongo imagen y una segunda dimensión para la matriz que estén name cmp recordar que todo aquello que está en inglés es que no podemos cambiarlo ahora esto lo voy a mover a la carpeta foto punto files imagen quito el tema y pongo el name correcto vamos a ver si funciona correctamente me voy a admin pongo usuario y contraseña y lo que voy a hacer ahora va a ser simplemente decir que en el día 22 creó una entrada texto selecciono archivo seleccionó una imagen y los hubo si todo ha ido bien y no se se ha ido bien pero vamos a comprobarlo si todo ha ido bien me voy a localhost entro dentro de php my admin me voy a la base de datos blog me voy a entradas por una parte compruebo si es cierto que ha aparecido texto a la imagen en principio no ha puesto nada no pasa nada primera parte no conseguida pero ahora veréis que lo solucionamos fácilmente segunda parte me voy a sam mmg ht docs me voy a blog me voy a foto bueno tampoco hemos subido correctamente esta parte así que vamos a voltear esta parte de aquí bien en esta imagen voy a decirle que quiero poner files imagen files imagen me voy a volver a hacerlo así que este es un contenido este es un título esta es una imagen y le doy a enviar blogger dice que no hay ningún archivo o ningún directorio lo que me dice en este caso es que no puede mover ahí está el té mp name vamos a moverlo vamos a verlo selecciona archivo ejercicio 1 ahora lo apuesto a que ya estaba correcto fijaos como ejercicio 1 lo ha puesto lo que ha fallado es esto ya ha fallado eso aclaró ya sé por qué sí que había funcionado así que había funcionado lo que pasa está en que en lugar de llevármelo a la foto me lo ha llevado a admin y dentro de admin probablemente me ha intentado crear una carpeta llamada foto lo que tengo que hacer es decirle estás en admin baja una carpeta sube a la carpeta foto y ahí ponlo bien vamos a probarlo por tanto ahora vuelvo a hacerlo una nueva fecha una nueva entrada un nuevo texto selecciona archivo info 1 le doy a enviar en principio no hay ningún error si no hay ningún error compruebo dos cosas lo primero es que al examinar aparece el nombre de la imagen que he cargado y lo segundo a ver si todo sale bien es que dentro de la carpeta foto aparece la imagen que subido ya tengo por tanto el blog a nivel de imágenes y fecha ha conseguido voy a implementar un botón de borrar y al implementar un botón de borrar lo que haremos es crear nuevas entradas para el blog pero ahora ya así subiendo para cada entrada una imagen nueva bien para esto lo que voy a hacer es crear un botón de borrar personalizado para cada una de las entradas continuamos creando un botón personalizado para borrar voy a ver atar esta redirección para que pueda volver a la página principal y ahora voy a aprovechar esta columna que está vacía el escritorio php para crear vamos a verlo aquí está un segundo que no lo veo aquí está para crear un botón de borrar borrar php creo un botón borrar cuidado porque lo que debo hacer es borrar php y de es igual a algo ese tiene que ser el líder del artículo con el que estoy trabajando quiero decir con esto que será guarde y recargo si queréis inspección el código voy a poner control y para que veáis que es borrar y de es igual a 1 y de es igual a 2 y de es igual a algo no lo está cogiendo fijaos que no lo está cogiendo si no lo está cogiendo ahora que algo que puede ser por él por los lecciones porque cada uno de estos tiene un y de cada una de las tablas tiene una idea cuando yo pido una idea como sabe el programa que me estoy refiriendo voy a hacer una prueba las páginas no responden esperar voy a hacer una prueba esto no me suele funcionar entradas punto y de local héctor tabla y columna recargo bien y en este caso me dice que entradas punto y de nos reconoce como ya os he dicho no me suele funcionar llegado a este punto tengo que poner una cosa que se llama alias mirad entradas punto y d y d total como todo lo que hago es decir aquello que está que se llama aire y que está dentro de entradas lo voy a llamar y de total y por tanto ahora aquí pongo y de total y así no confundo unos y dzeko no atrás porque lo que estaba pasando con toda probabilidad es que el programa no sabe a cuál de los tres y ves me estoy refiriendo por tanto guarda y recargo bien vamos a ver esperaba qué fuera uno pero dice que no ha devuelto ningún resultado vale entradas punto y de eso quiere decir que no ha cogido ninguna ahora sí que no ha cogido ningún resultado muy bien los ideas por lo menos está cogiendo ahora bien y ahora le digo y de total pues etc título nombre apellidos coma texto imagen como nombre categoría y así lo que hago es seleccionar sólo los campos que voy a querer usar si todo va bien ahora ya no fallara ahora veré los ideas correctamente y si miro el código fuente de la página veré como ahora cada botón y de uno cuidado hay dos que tienen el y de uno y eso no es bueno en la primera entrada está duplicado bueno porque 12 13 1 y así nos cuenta como ahora cada botón tiene el aire correcto si cada botón tiene el aire correcto ahora puedo crear en la administración un nuevo archivo un nuevo documento llamado borrar php y en borrar voy a copiar un poco el código de añadir y les voy a decir del it from entradas no de las entradas no delito fromme entradas bueno y de es igual agett y den vamos a verlo esto ya me hace falta espero no tener ningún error por si acaso tuviera algún error voy a bloquear ese eco y vamos a verlo cojo el que tiene el número 13 y lo borro no hay ningún error por tanto cuando vuelvo al escritorio el 13 ya no está bien ya puedo desbloquear esto viendo que no he cometido ningún error y por tanto ahora borro este y borró este y fijaos cómo estoy borrando los registros que hasta ahora había hecho ya llega el momento por tanto de hacernos un blog como realmente toca es decir quiero por ejemplo mañana poner el curso del programa número uno autor yo esta es una entrada para decirte qué voy a hacer un curso de java selecciono arribo no tengo internet si tengo internet de categoría general y ya tengo una entrada me voy ahora a editar por último el código d el index para decirle que el ing ahora si la imagen fila y margen si ahora me abro otra pestaña con el blog veremos como ahora bien cuidado img no foto ahí lo tenemos buen cuidado creo que está claro que voy a tener que retocar un poco el css verdad entonces le digo lo siguiente pss estilo css y le digo oh vamos a ver artículos aquí le digo artículos arctic el ing with 100 es decir ocupan el 100 por ciento de esa columna ya que tengo imagen tengo autor tengo categoría debería tener y esta es una entrada para decirte que voy a hacer un curso de java bien voy a ver si tengo html 5 luego me descargar una imagen de por ahí de internet html5 luego veo la imagen me la guardo en imágenes y creo otra entrada para el blog vaya he salido bien y digo noticia del día 14 curso de html5 autor yo el próximo mes estaré impartiendo un curso de html5 selecciono archivo el logotipo de html5 categoría programación le doy a enviar y si ahora ve al blog podremos comprobar como tengo una noticia que es curso de html5 y es la noticia que es curso del programa número uno si queréis ahora lo que puedo hacer es para creo que tan verdad tan grande que pueden hacer es algo como por ejemplo index y le digo lo siguiente wef 50 píxeles cloud left lo que hago es que las imágenes se queden a la izquierda de los contenidos y le digo también un martín raid de 20 píxeles un margin top de 20 pixeles un martín botón de 20 pixeles para que el texto se ha quedado ahí cuidado que flota y flota simplemente porque cuando acabo cada artículo debería poner ya sabéis que flotación es igual al problema de la flotación pero le pongo un clear boat siempre creo que las cosas se empiezan a montar es un síntoma inequívoco verdad de que hay algo que está pasando bien lo que voy a hacer ahora es por descargar por ejemplo wordpress logo y márgenes solo el logotipo más grande este de aquí me da imagen me lo guardo y ahora en el panel de control pongo algo como por ejemplo noticia del día 15 el curso de wordpress así que dentro de dos meses estaré impartiendo un curso de wordpress subo archivo su logotipo noticias programación le doy a enviar y si ahora miro el blog podréis comprobar cómo a medida que voy metiendo noticias pues tengo para cada noticia tanto el logotipo como el título como el autor como el texto como todo lo que haga falta únicamente nos queda por programar no digo que sean detalles porque al final son cosas importantes pero el núcleo del blog por lo menos ya lo tenemos que nos queda pues noticias por autor noticias por categoría lista de los últimos artículos y programar un buscador entre otras cosas que podemos hacer aparte de que el panel de control debemos hacer esto mismo que acabamos de hacer también para poder evitar la entrada podemos leer podemos añadir podemos borrar todavía no podemos editar y por supuesto hacer que esta misma tabla también está disponible para categorías comentarios usuarios y registros una parte importante para ir recogiendo información es la parte del registro dentro del portal por tanto aquí bajo de html de momento lo estoy escribiendo todo directamente dentro de esta página más adelante lo que haré es ir externalizando en archivos externos de momento se escribe todo la misma página lo voy a hacer lo siguiente voy a borrar o añadir realmente y voy a editar a copiar esta línea y la voy a pegar aquí no me hace falta volver a conectarme a la base de datos porque ya me conectado anteriormente así que le digo insert into registros los siguientes valores en primer lugar vamos a ver la estructura en primer lugar y de null bien en segundo lugar 1 2 3 4 5 en segundo lugar quiero ver el utc el utc es blade en tercer lugar quiero ver la ip la ip es una variable de servidor en el acuerdo de memoria php get ip que es reboteadores remote address es esta de aquí a continuación quiero ver el navegador php get browser y el browser hay ss no realmente ahí estamos quiero el you sergent y por último quiero la página que se está visitando así que php get current url no no no no está si estás si hago esto cuidado me faltan unas comillas si hago esto este trozo de código tan silencioso y tan inofensivo hace lo siguiente mirad yo me voy a 192 16 811 blog vamos a verlo 1 681 227 espera no quién soy yo bueno no es que quiero acceder a través de aquí pues quiero ver mi ip ipconfig soy 118 117 y sólo por hacer esto no ha ocurrido nada aquí en la parte de abajo pero sí movió la base de datos veréis que en registros ya pone que en este etc está ip con este navegador de aquí y con este sistema operativo que no lo veis pero yo os lo enseño con este navegador con este sistema operativo con este kit con este sub kit y con esta su versión de chrome he visto la página de blog esto por tanto permite que sea ahora os conecta jce a mí conectados a mi blog es conectar a esta misma dirección a medida que os vayáis conectando veré el rastro que vais dejando las páginas que veis que de momento sólo hay una página para ver e incluso el navegador el momento en el que os habéis conectado esto es una prueba de grabación

Deja una respuesta

Tu dirección de correo electrónico no será publicada.