tutorial Archives - Página 2 de 5

Eventos en Javascript

por ConfiguroWeb8 abril, 20239 abril, 2023DesarrolloDeja un comentario

Los eventos en Javascript son reacciones del código sobre interacciones que el usuario final realiza sobre tu aplicación.

Por ejemplo si haces clic en una instancia específica de tu aplicación que está programada con el evento onClick, entonces pasará algo que hayas decidido, por ejemplo que alguna parte de la página cambie de color, que suene un sonido, o literalmente, cualquier cosa que se te ocurra.

Video Explicativo

Eventos en Javascript

Código Relacionado en el video

https://github.com/configuroweb/tutorial-eventos-javascript
0 forks.
0 stars.
0 open issues.

Recent commits:

tutorial eventos javascript, Mauricio

Código Tutorial de Eventos en Javascript

Demo Página Web Subida a GitHub Pages

En el siguiente enlace puedes ver la página creada en el vídeo tutorial

https://configuroweb.github.io/tutorial-eventos-javascript/

Los más comunes eventos en Javascript

Los eventos son el super poder de Javascript que permite que una página estática adquiera lógica de negocio para realizar diferentes procesos avanzados, dandole baterías a tu aplicación.

A continuación se muestran los eventos más comunes de Javascript, con una explicación general de su código:

Evento onClick

El evento onClick se activa en cuanto el usuario final le da click a la zona que se defina y se puede programar para que se realicen los cambios que se consideren sobre tu aplicación.

Ejemplo del Evento onClick

En la etiqueta html de botón, la etiqueta button, se le pone una palabra clave onclick, esta palabra llama una función, llamada funcion() como se puede ver en el código a continuación:

<button onclick="funcion()">clic acá</button>

La función funcion() al activarse puede hacer lo que se defina que haga, desde recorrer un array con un forEach, gestionar un Objeto en Javascript o como en el ejemplo, modificar el texto de lo que dice en una etiqueta p.

function funcion() {
    document.getElementById("aca").innerHTML = "Haz dado click en el botón";
  }

A continuación se muestra el código donde se especifica la etiqueta p a modificar:

<p id="aca"></p>

El código en Javascript reconoce el id donde dice aca, con la instrucción document.getElementById(“aca”).innerHTML donde dice innerHTML, es lo que va a modificar y donde dice document.getElementById es como se busca en el documento donde haya el id con el aca.

Eventos mouseDown y mouseUp

Estos eventos suceden cuando el usuario final hace clic y cuando lo suelta, mientras haga clic sostenido se activará onmouseup, y cuando suelte donde previamente se hizo clic se activará onmousedown

Ejemplo de eventos onmouseup y onmousedown

En la etiqueta html de botón, la etiqueta button, se ponen las palabras clave onmousedown y onmouseup, esta palabras llaman las funciónes, mouseDown y mouseUp como se puede ver en el código a continuación:

<button id="color" onmousedown="mouseDown()" onmouseup="mouseUp()">
click acá</button>

Las funciones mouseDown() y mouseUp() al activarse puede hacer lo que se defina que haga, en este caso se cambian los colores a rojo si se hace clic sostenido y a azul si se deja suelto.

 function mouseDown() {
    document.getElementById("color").style.background = "red";
  }
  
  function mouseUp() {
    document.getElementById("color").style.background = "blue";
  }

A continuación se muestra el código donde se especifica la etiqueta button a modificar:

<button id="color" onmousedown="mouseDown()" onmouseup="mouseUp()">
click acá</button>

El código en Javascript reconoce el id donde dice aca, con la instrucción document.getElementById(“color”).innerHTML donde dice innerHTML, es lo que va a modificar y donde dice document.getElementById es como se busca en el documento donde haya el id con el color.

Eventos onblur y onfocus

El evento onfocus se dispara cuando ingresas en un campo y el onblur se activa cuando sales del campo.

La lógica de lo que se puede hacer con onblur y con onfocus depende de lo que quieras hacer, en el código de ejemplo a continuación, cuando se hace clic afuera los caracteres se ponen en mayúscula y cuando ingresas al campo nuevamente los caracteres se pondrán en minúscula.

<h2>Eventos onblur y onfocus</h2> <input type="text" id="campo" onblur="onBlur()" onfocus="onFocus()">

En el código a continuación se muestra la lógica Javascript para dejar los caracteres y mayúscula y minúscula:

function onBlur() {
    let x = document.getElementById("campo");
    x.value = x.value.toUpperCase();
  }

  function onFocus() {
    let x = document.getElementById("campo");
    x.value = x.value.toLowerCase();
  }

Evento onmouseover

En el siguiente código se muestra una imagen que se pone más grande cuando le pones el puntero del mouse encima y vuelve a su tamaño normal cuando le retiras el mouse.

<img onmouseover="imgGrande(this)" onmouseout="imgNormal(this)" border="0" src="logo.png" width="32" height="32">

A continuación se muestra el tramo de código de javascript donde se ingresa la lógica para aumentar el tamaño de la imagen al pasarle el mouse por encima y luego vuelve a su tamaño normal al retirarle el mouse:

function imgGrande(x) {
    x.style.height = "64px";
    x.style.width = "64px";
  }
  
  function imgNormal(x) {
    x.style.height = "32px";
    x.style.width = "32px";
  }

Evento onchange

Este evento onchange, se da cuando se modifica el campo, en el ejemplo a continuación se muestra como según se elige una opción en una lista desplegable se muestra un texto específico con la selección del desplegable:

<select id="seleccion" onchange="cambio()">
        <option value="Javascript">Javascript</option>
        <option value="PHP">PHP</option>
        <option value="Node">Node</option>
        <option value="Python">Python</option>
      </select>

A continuación se muestra la lógica de javascript, para ingresar las palabras Has seleccionado junto al texto de la lista correspondiente:

function cambio() {
    var x = document.getElementById("seleccion").value;
    document.getElementById("seleccionado").innerHTML = "Has seleccionado: " + x;
  }

Evento onselect

Este evento se dispara al seleccionar un texto específico, en el ejemplo a continuación, se dispara un alert indicando que se ha seleccionado el texto

<input type="text" value="seleccioname" onselect="seleccion()">

A continuación se muestra la lógica de la función seleccion que dispara el evento onselect

function seleccion() {
    alert("Has seleccionado texto");
  }

Eso ha sido todo, cualquier duda quedo al pendiente, te invito a que leas mi contenido, constantemente genero contenido sobre aplicaciones gratuitas de libre distribución, aplicaciones premium me sigas en mi canal de youtube donde constatemente subo videos y tutoriales de las aplicaciones que subo al blog.

Objetos en Javascript

por ConfiguroWeb6 abril, 20237 abril, 2023DesarrolloDeja un comentario

Los objetos en Javascript son una colección de datos y/o funcionalidades relacionados. Estos suelen tener variables y funciones. A las variables se le llaman propiedades y a sus funciones se le llaman métodos.

Video Explicativo

Tutorial Objetos en Javascript

Código al que hago referencia en el vídeo

https://github.com/configuroweb/tutorial-objetos-javascript
0 forks.
0 stars.
0 open issues.

Recent commits:

tutorial objetos javascript, Mauricio

Tutorial Objetos en Javascript

En una publicación anterior hice referencia a los métodos más comunes para recorrer un array y se les llama métodos por que el array funge como un objeto de javascript, cuando le ponemos a los arreglos por ejemplo un forEach este está definido como una función del objeto Array, para realizar un proceso específico.

Si deseas más información sobre el método forEach puedes ingresar en el siguiente enlace donde lo explico a nivel general:

Como recorrer un Array con el método ForEach en Javascript

Ahora bien, hablamos de objetos, desde el paradigma de Programación Orientada a Objetos, si deseas más información sobre este paradigma puedes acceder al siguiente enlace de mdn Mozilla:

JavaScript orientado a objetos para principiantes

Ejemplo de Objetos en Javascript

El siguiente tramo de código es un Objeto en Javascript:

const vaso = {
    Material: 'Vidrio',
    Estado: 'Vacío'
};

Explicación del código

En este caso el objeto vaso tiene dos propieadades, Material y Estado, con sus valores correspondientes, la cadena ‘Vidrio’ y la cadena ‘Vacío’

Como acceder a las propiedades de un Objeto

En el tramo de código del ejemplo, para acceder por ejemplo al Material del Objeto vaso, se debe hacer de la siguiente forma:

vaso.Material

Si quisieramos imprimir el Material del Objeto vaso en consola escribiamos lo siguiente:

console.log(vaso.Material);

En este caso se imprimiría en consola, la cadena de texto ‘Vidrio’. Si quisieramos imprimir en consola el Estado del objeto vaso el proceso sería el mismo con la diferencia de que en vez de escribir vaso.Material, escribiriamos vaso.Estado.

Diferencias entre un Array y un Objeto en Javascript

Ya había dicho que un Array era también un objeto, especialmente porque podía implementar métodos para realizar funciones especificas para ingresar registros en un arreglo, eliminar registros, recorrer un array entre un sin fin de opciones.

Sin embargo un array en la práctica es un tipo de variable, que permite almacenar de manera ordenada registros, en la que se puede acceder a los datos mediante un índice numérico, los objetos en cambio almacenan un índice tipo llave, esta llave tiene un nombre, luego esta llave debe tener asociado un valor.

En el ejemplo del objeto vaso que enunciaba al comienzo, había dos llaves, la llave Material y la llave Estado, estas llaves a su vez tienen los valores asignados de Vidrio y Vacío.

Como recorrer un objeto en Javascript

Existen tres métodos del objeto Object que permiten trabajar sencilla y efectivamente con los objetos, estos métodos se explican a continuación.

Como acceder a las llaves de un objeto

Ya se ha explicado que un objeto es una versión avanzada de un arreglo, donde el índice en vez de un número como en los arrays es una llave que es un nombre es específico, ahora bien en Javascript existe una forma específica de acceder a las llaves de un objeto, a continuación se muestra el código para mostrar las llaves del objeto vaso del ejemplo inicial.

console.log(Object.keys(vaso));

La salida del presente código sería la siguiente:

[ 'Material', 'Estado' ]

Como acceder a los valores de un objeto

Los valores son los registros asociados a las llaves de un objeto y la forma de extraer estos valores de un objeto es por medio del método values el código para mostrar en consola los valores del objeto sería el siguiente:

console.log(Object.values(vaso));

La salida para esta línea de código sería la siguiente:

[ 'Vidrio', 'Vacío' ]

Como mostrar todas las llaves y valores respectivos de un Objeto

En este punto es fácil deducir que si usamos el método keys y el método values del objeto Object podríamos extraer en conjunto las llaves y valores juntos de un objeto, sin embargo existe otro método llamado entries, que junta las llaves y valores en una sola salida, el código respectivo sería el siguiente:

console.log(Object.entries(vaso));

La salida para esta línea de código sobre el objeto vaso, sería la siguiente:

[ [ 'Material', 'Vidrio' ], [ 'Estado', 'Vacío' ] ]

Como pueden ver, se imprime un array que dentro tiene dos array, el primero tiene todas las llaves y el segundo tiene todos los valores.

Como asignarle un objeto a otro

Es posible fusionar objetos en Javascript, para esto existe un método del objeto Object llamado assign, en el ejemplo a continuación crearé un objeto llamado medidasVaso, este objeto tendrá como llaves un tamaño un color y un precio:

const medidasVaso = {
    tamano : 'Grande',
    Color: 'Azul',
    Precio: 100
}

Ahora con la siguiente línea de código le asignaré las llaves y valores del objeto medidasVaso al objeto vaso:

Object.assign(vaso, medidasVaso);

El objeto vaso, ahora está fusionado con medidasVaso, si lo imprimo por consola con el código console.log(vaso); el sistema mostraría el siguiente resultado:

{
  Material: 'Vidrio',
  Estado: 'Vacío',
  tamano: 'Grande',
  Color: 'Azul',
  Precio: 100
}

Como recorrer un array de Objetos en Javascript

Los array pueden trabajar en conjunto con los objetos en Javascript, un objeto puede contener la cantidad de arrays que se deseen crear y cualquier array puede contener la cantidad de objetos que se requieran.

Un array puede contener cualquier tipo de dato en sus registros, lo más común es que el array tenga registros con el mismo tipo de dato y que los objetos si tengan variedad en los tipos de registros que almacenan, pero para javascript todo está abierto a lo que se requiera desarrollar.

En el ejemplo a continuación se creará el array estudiantes y dentro de este array se crearan objetos con nombreCompleto, correoElectrónido y edad:

const estudiantes = [
{  
    nombreCompleto: 'Mauricio Sevilla',
    correoElectronico: 'hola@configuroweb.com',
    edad: 40,
},
{  
    nombreCompleto: 'Juan Usuario',
    correoElectronico: 'jusuario@cweb.com',
    edad: 25,
},
{  
    nombreCompleto: 'Pedro Perez',
    correoElectronico: 'pperez@cweb.com',
    edad: 17,
},
{  
    nombreCompleto: 'Daniel Gomez',
    correoElectronico: 'dgomez@cweb.com',
    edad: 22,
},
];

Utilización del Método forEach

A continuación vamos a recorrer el arreglo con un método forEach, para mostrar el nombre y el correo de los objetos del array estudiantes:

estudiantes.forEach(estudiante => {
    console.log(`El estudiante ${estudiante.nombreCompleto} tiene el correo electrónico ${estudiante.correoElectronico}`);
});

La salida de este código sería la siguiente:

El estudiante Mauricio Sevilla tiene el correo electrónico hola@configuroweb.com
El estudiante Juan Usuario tiene el correo electrónico jusuario@cweb.com
El estudiante Pedro Perez tiene el correo electrónico pperez@cweb.com
El estudiante Daniel Gomez tiene el correo electrónico dgomez@cweb.com

Utilización del Método map

En el siguiente ejemplo voy a actualizar el nombre del objeto del Array estudiantes por mayúscula sostenida:

estudiantes.map((estudiante) => {
    const nombreCompleto = estudiante.nombreCompleto.toUpperCase();    
    console.log(nombreCompleto);
});

La salida de este código sería la siguiente:

MAURICIO SEVILLA
JUAN USUARIO
PEDRO PEREZ
DANIEL GOMEZ

Cualquier duda estará al pendiente, te invito a recorrer este blog que está lleno de aplicaciones gratuitas de libre distribución, tutoriales y aplicaciones premium, te invito me sigas en mi canal de youtube allí constatemente subo video tutoriales relacionados con el desarrollo web.

Etiquetado: Aplicaciones Gratuitas ConfiguroWeb / javascript / tutorial

Como recorrer un Array con el método ForEach en Javascript

por ConfiguroWeb26 marzo, 20238 abril, 2023DesarrolloDeja un comentario

En una publicación previa ya me había referido a unos métodos que consideraba los más comunes para recorrer un array. Por mantener la sencillez tanto de la publicación, como del vídeo relacionado y la infografía, opté por no referirme al método forEach en Javascript.

El método forEach podría decirse que es de los más populares he importantes de Javascript. La utilidad del método forEach es amplia y reemplaza efectivamente los típicos métodos for y while de siempre.

forEach es una gran herramienta que permite utilizar menos líneas de código, facilita un código más legible, más sencillo de entender y replicar.

Video Explicativo método forEach

Como recorrer un Array con el método ForEach en Javascript

Código al que hago referencia en el vídeo

https://github.com/configuroweb/tutorial-foreach-javascript
0 forks.
0 stars.
0 open issues.

Recent commits:

tutorial foreach javascript, Mauricio

Como recorrer un Array con el método ForEach en Javascript

Ejemplo básico de como recorrer un Array con el método ForEach

El primer argumento que requiere un forEach() es una función llamada callback, que es la que por medio del forEach va a recorrer cada registro del forEach. El segundo elemento es opcional, es el valor de su conjunto en la devolución de llamada.

array.forEach(callback [, el argumento])

A continuación se muestra el código de como trabaja un array, con un arreglo de tres cadenas de texto:

const arreglo = ['rojo','azul','verde'];

function recorrer(registro) {
console.log(registro);
}

arreglo.forEach(recorrer)

recorrer es la llamada función callback, arreglo.forEach(recorrer) ejecuta la función recorrer por cada registro del array arreglo. Esa es la forma en que trabaja el forEach.

Parámetro index en el Array

Sabemos que los array tienen un índice que arranca desde cero, la primera posición del índice desde la izquierda hacia la derecha va aumentando.

Hay ocasiones en las que se requiere mostrar el índice, aunque este escenario será más común en los objetos que utilizan llave y valor.

A continuación se muestra un ejemplo de como imprimir los registros de un arreglo y sus índices respectivos.

const arreglo = ['rojo','azul','verde'];

function recorrer(registro,indice) {
console.log(`El registro ${registro} tiene como índice al ${indice});
}

arreglo.forEach(recorrer)

En este caso la función callback recorrer, itera tanto con sus registros, como con sus índices respectivos.

Ejemplo de como acceder a un array dentro de la función callback

Existe un tercer parámetro que podemos utilizar con la función callback y es el array mismo que fue llamado, con esta posibilidad podremos realizar operaciones lógicas más complejas.

En el siguiente tramo de código, se va a imprimir un mensaje de que ya se imprimió el último registro cuando esto suceda.

const arreglo = ['rojo','azul','verde'];

function recorrer(registro,indice,arreglo) {
console.log(registro);
if (indice === arreglo.length - 1){
console.log('Ese fue el último registro');
}

}

arreglo.forEach(recorrer);

El tercer párametro de la función callback fue el mismo arreglo y con esto, se pudo calcular su tamaño y con eso implementar la lógica para imprimir posterior al último registro.

El uso de this dentro de la función callback

this es un objeto de javascript, que toma el contexto de donde se encuentre para ser utilizado en la lógica de programación, pronto hablaré con mayor profundidad de este objeto, por el momento si deseas saber más sobre this puedes ingresar en el siguiente enlace:

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/this

El this en el siguiente ejemplo se encuentra al alcance del objeto global, por esto da como resultado true al compararlo con este.

De este modo se logra realizar el recorrido del array efectivamente:

const arreglo = ['rojo','azul','verde'];

function recorrer(registro) {
console.log(this === window);
}

arreglo.forEach(recorrer)

Conclusión forEach

Debes tener en cuenta que el forEach puede borrar el campo de entrada en la función de devolución. En adición no puedes interrumpir la iteración de forEach. Si requieres terminar el ciclo según algún criterio específico se recomienda utilizar el for o el while.

Cualquier duda quedo al pendiente.

Etiquetado: javascript / tutorial

Métodos más comunes para recorrer un array

por ConfiguroWeb25 marzo, 20238 abril, 2023DesarrolloDeja un comentario

A continuación se muestran en la siguiente imagen los métodos más comunes para recorrer un array:

Video Explicativo

Estos métodos se explican de manera enfática y sencilla en el siguiente vídeo a continuación:

Métodos Array Javascript

Código Relacionado en el Video Explicativo

Como es habitual genere un repositorio en GitHub con el código relacionado en el siguiente enlace:

Guía de los métodos array de javascript más populares
https://github.com/configuroweb/metodos-array-javascript
0 forks.
0 stars.
0 open issues.

Recent commits:

listado de métodos de array en javascript, Mauricio

Métodos Array Javascript

El código al que hago referencia en el vídeo donde refiero los métodos más comunes para recorrer un array es el siguiente:

const arreglo = ['rojo','azul','verde'];
console.log(arreglo[0]);  // rojo
arreglo.push('amarillo');
console.log(arreglo); // [ 'rojo', 'azul', 'verde', 'amarillo' ]
arreglo.unshift('violeta');
console.log(arreglo); // [ 'violeta', 'rojo', 'azul', 'verde', 'amarillo' ]
arreglo.pop();
console.log(arreglo); // [ 'violeta', 'rojo', 'azul', 'verde' ]
arreglo.shift();
console.log(arreglo);
const otroArreglo = arreglo.map((arreglo)=>{return 'color ' + arreglo});
console.log(otroArreglo); // [ 'color rojo', 'color azul', 'color verde' ]
const arregloFiltrado = arreglo.filter((arreglo)=>{if(arreglo === 'verde'){return true}});
console.log(arregloFiltrado); // [ 'verde' ]
const arregloReversado = arreglo.reverse();
console.log(arregloReversado); // [ 'verde', 'azul', 'rojo' ]
console.log(arreglo); // [ 'verde', 'azul', 'rojo' ]
console.log(arreglo.at(1));
const arregloCortado = arreglo.slice(1);
console.log(arregloCortado);

Métodos de Array más conocidos

Los más comunes para recorrer un array referidos en el video explicativo son los siguientes:

Método Push

Este método añade un nuevo elemento al final de un array, especificamente a la derecha del array.

Método Unshift

Es igual al Push pero añade elementos a la derecha, inserta registros desde la primera posición.

Método Pop

Este método elimina registros desde el útlimo, desde la derecha.

Método Shift

El método shift elimina registros desde el primero, desde la izquierda.

Método Map

Este método crea un nuevo arreglo con los resultados de una función que retorna un valor que modifica el comportamiento del arreglo anterior.

Método Filter

Crea un nuevo array según el resultado de una condicional, se filtra utilizando una función que retorna el valor deseado.

Método Reverse

Modifica el orden del arreglo del último al primer registro.

Método at

Recibe un entero y retorna un elemento en la posición indicada.

Método Slice

Corta el array, según el número de partes desde el comienzo que se requiera, si eliges uno y el array tiene tres registros, el arreglo terminará con los dos segundos.

Suscríbete a mi contenido en mis Redes Sociales

Si quieres aprender a programar o ya tienes experiencia en el mundo del desarrollo, te invito me sigas en mis redes sociales, a continuación te muestro mi enlace de Youtube y de Facebook para que te suscribas

https://www.youtube.com/channel/UCVnrMbml3wUIuwz-oSaIUnA

https://www.facebook.com/mauriciosevilabritto/

Cualquier duda, me puedes escribir a mi Whatsapp directamente en el siguiente enlace:

https://configuroweb.com/WhatsappMessenger

Etiquetado: javascript / tutorial

Cómo hacer un login con PHP y MySQL

por ConfiguroWeb21 marzo, 20238 abril, 2023DesarrolloDeja un comentario

En el presente tutorial paso a explicar el desarrollo de un login en PHP y MySQL desde cero, un login en sí, es un sistema de control de acceso a una aplicación, para poder restringir, quien hace modificaciones sobre una aplicación o quien solo puede hacer consultas y del mismo modo evitar que usuarios no autorizados ingresen a la información de la aplicación.

Todas las aplicaciones que comunmente utilizamos tienes sistemas de login habilitados, por ejemplo Youtube, Facebook, Twitter, Linkedin, entre otros.

Cabe agregar que no es la primera vez que se abarca esta temática en este blog, tengo varios sistemas de login y registro, tanto en PHP y MySQL como en Javascritp, la diferencia es que en este caso se abarca el tema desde cero y no la aplicación ya terminada y lista para su distribución, a continuación listo los sistemas de login que tengo en este blog

Video Explicativo Tutorial – Cómo hacer un login con PHP y MySQL

Como hacer un login con PHP y MySQL

Enlace de descarga directo del proyecto de GitHub

El siguiente enlace es del Repositorio de la aplicación en GitHub donde puedes acceder directamente al código utilizado en el tutorial

https://github.com/configuroweb/tutorial-login
3 forks.
3 stars.
0 open issues.

Recent commits:

primera version funcional sistema de login configuroweb, Mauricio

Base de Datos del Sistema de Acceso

En el siguiente enlace podrás acceder al código SQL que podrás insertar en PHP My Admin para crear la base de datos sin inconvenientes:

Enlace de la base de datos sobre el como hacer un login con PHP y MySQL

Scripts del Software de Login

A continuación se listas los scripts requeridos para el funcionamiento del proyecto referenciado en el tutorial de como hacer un login en PHP

style.css

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #fc7d1c;
}
.login {
    width: 400px;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 100px auto;
}
.login h1 {
    text-align: center;
    color: #5b6574;
    font-size: 24px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dee0e4;
}
.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}
.login form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: darkblue;
    color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
    width: 310px;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}
.login form input[type="submit"] {
    width: 100%;
    padding: 15px;
   margin-top: 20px;
    background-color: darkblue;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
  background-color: darkblue;
    transition: background-color 0.2s;
}

.navtop {
	background-color: darkblue;
	height: 60px;
	width: 100%;
	border: 0;
}
.navtop div {
	display: flex;
	margin: 0 auto;
	width: 1000px;
	height: 100%;
}
.navtop div h1, .navtop div a {
	display: inline-flex;
	align-items: center;
}
.navtop div h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: #eaebed;
	font-weight: normal;
}
.navtop div a {
	padding: 0 20px;
	text-decoration: none;
	color: #c1c4c8;
	font-weight: bold;
}
.navtop div a i {
	padding: 2px 8px 0 0;
}
.navtop div a:hover {
	color: #eaebed;
}
body.loggedin {
	background-color: #f3f4f7;
}
.content {
	width: 1000px;
	margin: 0 auto;
}
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #4a536e;
}
.content > p, .content > div {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="login">
        <h1>Sistema de Login Básico ConfiguroWeb</h1>

        <form action="autenticacion.php" method="post">
            <label for="username">
                <i class="fas fa-user"></i>
            </label>
            <input type="text" name="username"
            placeholder="Usuario" id="username" required>
            <label for="password">
                <i class="fas fa-lock"></i>
            </label>
            <input type="password" name="password"
            placeholder="Contraseña" id="password" required>
            <input type="submit" value="Acceder">
        </form>
    </div>
    
</body>
</html>

cerrar-sesion.php

<?php
session_start();
session_destroy();


header('Location: index.html');

autenticacion.php

<?php
session_start();


//credenciales de acceso a la base datos

$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'login-php';

// conexion a la base de datos

$conexion = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);

if (mysqli_connect_error()) {

    // si se encuentra error en la conexión

    exit('Fallo en la conexión de MySQL:' . mysqli_connect_error());
}

// Se valida si se ha enviado información, con la función isset()

if (!isset($_POST['username'], $_POST['password'])) {

    // si no hay datos muestra error y re direccionar

    header('Location: index.html');
}

// evitar inyección sql

if ($stmt = $conexion->prepare('SELECT id,password FROM accounts WHERE username = ?')) {

    // parámetros de enlace de la cadena s

    $stmt->bind_param('s', $_POST['username']);
    $stmt->execute();
}


// acá se valida si lo ingresado coincide con la base de datos

$stmt->store_result();
if ($stmt->num_rows > 0) {
    $stmt->bind_result($id, $password);
    $stmt->fetch();

    // se confirma que la cuenta existe ahora validamos la contraseña

    if ($_POST['password'] === $password) {


        // la conexion sería exitosa, se crea la sesión



        session_regenerate_id();
        $_SESSION['loggedin'] = TRUE;
        $_SESSION['name'] = $_POST['username'];
        $_SESSION['id'] = $id;
        header('Location: inicio.php');
    }
} else {

    // usuario incorrecto
    header('Location: index.html');
}

$stmt->close();

inicio.php

<?php


// confirmar sesion

session_start();


if (!isset($_SESSION['loggedin'])) {

    header('Location: index.html');
    exit;
}

?>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inicio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body class="loggedin">
    <nav class="navtop">
        <h1 style="color:white;">Sistema de Login Básico ConfiguroWeb</h1>
        <a href="perfil.php" style="color:white;"><i class="fas fa-user-circle"></i>Informción de Usuario</a>
        <a href="cerrar-sesion.php" style="color:white;"><i class="fas fa-sign-out-alt"></i>Cerrar Sesión</a>
    </nav>

    <div class="content">
        <h2>Página de Inicio</h2>
        <p>Hola de nuevo, <?= $_SESSION['name'] ?> !!!</p>
    </div>
</body>

</html>

perfil.php

<?php

session_start();


if (!isset($_SESSION['loggedin'])) {

    header('Location: index.html');
    exit;
}


$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'login-php';

// conexion a la base de datos

$conexion = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);

if (mysqli_connect_error()) {

    // si se encuentra error en la conexión

    exit('Fallo en la conexión de MySQL:' . mysqli_connect_error());
}

$stmt = $conexion->prepare('SELECT password, email FROM accounts WHERE id = ?');





$stmt->bind_param('i', $_SESSION['id']);
$stmt->execute();
$stmt->bind_result($password, $email);
$stmt->fetch();
$stmt->close();


?>





<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perfil Usuario</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body class="loggedin">
    <nav class="navtop">
        <h1 style="color:white;">Sistema de Login Básico ConfiguroWeb</h1>
        <a href="inicio.php" style="color:white;">Inicio</a>
        <a href="perfil.php" style="color:white;"><i class="fas fa-user-circle"></i>Información de Usuario</a>
        <a href="cerrar-sesion.php" style="color:white;"><i class="fas fa-sign-out-alt"></i>Cerrar Sesion</a>
    </nav>
    <div class="content">

        <h2>Información del Usuario</h2>
        <div>
            <p>
                La siguiente es la información registrada de tu cuenta
            </p>
            <table>
                <tr>
                    <td>Usuario:</td>
                    <td><?= $_SESSION['name'] ?></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><?= $email ?></td>
                </tr>
            </table>



        </div>


    </div>



    </nav>

</body>

</html>

Si llegaste hasta acá es porque te interesa mucho el desarrollo web, te puedo decir que si es así has llegado a buen puerto, ya que cuento con más de 60 aplicaciones gratuitas, en constante crecimiento que puedes descargar y utilizar libremente en el siguiente enlace:

46 aplicaciones gratuitas en PHP, Python y Javascript

Si deseas contratar mis servicios me puedes contactar directamente en el siguiente enlace:

https://configuroweb.com/WhatsappMessenger

En adición puedes echarle un vistazo a mis más de 40 aplicaciones de mi segmento premium que te podrían interesar

https://configuroweb.com/tag/premium/

Quedo al pendiente de cualquier cosa.

Etiquetado: mysql / php / tutorial

CRUD Básico en PHP y MySQL

por ConfiguroWeb27 febrero, 20238 abril, 2023DesarrolloDeja un comentario

En el presente tutorial se explica el paso a paso para implementar un CRUD Básico en PHP y MySQL partiendo de que ya tienes tu ordenador configurado para que el código PHP y MySQL te funcione correctamente.

Si tienes dudas sobre la implementación de aplicaciones PHP en un servidor local puedes acceder al siguiente enlace donde se explica el proceso desde cero:

Como instalar aplicaciones PHP en un servidor local

En el tutorial se trabaja con la clase MySQLi, para más información puedes acceder al siguiente enlace:

https://www.php.net/manual/es/class.mysqli.php

Video explicativo sobre el sistema de CRUD Básico en PHP y MySQL

En el siguiente video se abarca la explicación sobre el desarrollo del sistema CRUD, donde se crean registros, se actualizan, se listan y se eliminan, en adición se incluye la explicación de la creación de la base de datos y la tabla relacionada:

CRUD Básico en PHP y MySQL

Repositorio del Sistema de CRUD en PHP y MySQL

A continuación comparto el código al que hago referencia en el vídeo relacionado, para que puedas hacer las validaciones que necesites si deseas replicar en tu ordenador las funciones del sistema:

https://github.com/configuroweb/crud-basico
2 forks.
0 stars.
0 open issues.

Recent commits:

Sistema de Crud Básico en PHP y MySQL, Mauricio

CRUD Básico en PHP y MySQL

Base de datos del Tutorial sobre el CRUD en PHP y MySQL

A continuación te comparto el archivo SQL de la base de datos para que puedas importarlo he instalar el sistema en tu ordenador a nivel local:

CRUD Básico en PHP y MySQL

Archivos del CRUD hecho en PHP y MySQL

listar.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <?php
    include_once('conexion.php');

    $sql = "SELECT id,nombre,apellido
    FROM usuarios";

    $resultado = $conexion->query($sql);


    // validación para mostrar los datos

    if ($resultado->num_rows > 0) {

        // hay información que mostrar

        while ($row = $resultado->fetch_assoc()) {

            echo "<hr> id asociado: " . $row["id"] . "-Nombre Usuario: " . $row["nombre"] . " " . $row["apellido"] . "<hr>";
        }
    } else {

        echo "Sin información ingresada aún";
    }

    $conexion->close();

    ?>

</body>

</html>

insertar.php

<?php

include_once('conexion.php');


$sql = "INSERT INTO usuarios (nombre,apellido)

VALUES('Pedro','Garcia');";



if ($conexion->query($sql) === TRUE) {

    echo "Registro ingresado correctamente.";
} else {

    echo $conexion->error;
}


$conexion->close();

eliminar.php

<?php


include_once('conexion.php');


// eliminar registros

$sql = "DELETE FROM usuarios WHERE id = 2";


// validación proceso

if ($conexion->query($sql) === TRUE) {

    echo "Eliminación de registro exitosa";
} else {

    $conexion->error;
}


$conexion->close();

conexion.php

<?php
$servidor   = 'localhost';
$usuario    = 'root';
$contrasena = '';
$bd = 'crud-basico';

// se crea la conexión
$conexion = new mysqli($servidor, $usuario, $contrasena, $bd);

// se valida la conexión

if ($conexion->connect_error) {

    die('Hubo un fallo en la conexión ' . $conexion->connect_error);
};

actualizar.php

<?php

include_once('conexion.php');
//actualizar registros

$sql = "UPDATE usuarios SET apellido = 'Britto' WHERE id = 1";

if (
    $conexion->query($sql) === TRUE
) {
    echo "Registro actualizado correctamente";
} else {

    $conexion->error;
};

$conexion->close();

Esta es la primera vez que abarco el sistema de CRUD desde un tutorial, pero ya tengo una publicación previa con una sistema de CRUD en PHP y MySQL, más completo que te podría servir.

CRUD PHP en MySQL

Quedo al pendiente de cualquier cosa, actualmente cuento con más de 60 aplicaciones de libre descarga que puedes verificar en el siguiente enlace:

46 aplicaciones gratuitas en PHP, Python y Javascript

Etiquetado: mysql / php / tutorial

Cómo encriptar contraseñas en PHP

por ConfiguroWeb19 febrero, 20238 abril, 2023DesarrolloDeja un comentario

Aprende Cómo encriptar contraseñas en PHP, con el siguiente tutorial que se abarca desde cero, se crea la base de datos, y los archivos PHP necesarios para llevar a cabo el proceso.

Este tutorial se registra en vídeo y se diseñó para que sea muy fácil seguirlo paso a paso, también en este post incluye el código subido previamente a GitHub para que lo puedas descargar.

Video Explicativo

Cómo encriptar contraseñas en PHP

Codigo Referenciado en el Video Tutorial

Este es el código del tutorial donde explico como encriptar contraseñas en PHP
https://github.com/configuroweb/encriptarPHP
0 forks.
1 stars.
0 open issues.

Recent commits:

código relacionado con el tutorial de encripcion de contraseñas, Mauricio

Cómo encriptar contraseñas en PHP

Código de la Base de Datos

El nombre de la base de datos es contrasena, para replicar lo referenciado en el video tutorial puedes importar el código a continuación de la base de datos:

-- phpMyAdmin SQL Dump
-- version 5.2.0
-- https://www.phpmyadmin.net/
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 20-02-2023 a las 03:56:06
-- Versión del servidor: 10.4.24-MariaDB
-- Versión de PHP: 8.1.6

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `contrasena`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `usuario`
--

CREATE TABLE `usuario` (
  `id` int(30) NOT NULL,
  `nombre` text COLLATE utf8_spanish2_ci NOT NULL,
  `correo` text COLLATE utf8_spanish2_ci NOT NULL,
  `password` text COLLATE utf8_spanish2_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci;

--
-- Volcado de datos para la tabla `usuario`
--

INSERT INTO `usuario` (`id`, `nombre`, `correo`, `password`) VALUES
(1, 'Mauricio', 'mail@correo.com', '1234abcd..'),
(2, 'Manuel', 'mmail@correo.com', '4b67deeb9aba04a5b54632ad19934f26'),
(3, 'Pedro', 'pmail@correo.com', '0e2c02b1'),
(4, 'Juan', 'jmail@correo.com', '$2y$10$n7yfj06e7/UW1Y02lZVyv.rkEca/Yd5qFaFFCkeGH7Pwo4OLkZT5y'),
(5, 'Ariel', 'amail@correo.com', '4b67deeb9aba04a5b54632ad19934f26');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `usuario`
--
ALTER TABLE `usuario`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `usuario`
--
ALTER TABLE `usuario`
  MODIFY `id` int(30) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Conocimientos Previos

El tutorial empieza asumiendo que sabes que es PHP y MySQL, igualmente que sabes como ejecutar código PHP en tu ordenador, en caso de que aun no sepas como correr código PHP en tu ordenador, te puedes guiar por este tutorial donde explico el proceso:

Como instalar aplicaciones PHP en un servidor local

Como instalar aplicaciones PHP en un servidor local

Tutorial PHP ConfiguroWeb

Si tienes dudas sobre que es PHP y MySQL y te gustaría tener un concomiento a profundidad de este lenguaje, te recomiendo la siguiente lista de reproducción con un Tutorial PHP, hecho en mi canal de Youtube:

Qué significa encriptar una contraseña?

Encriptar es ocultar datos mediante una clave para que no puedan ser interpretados por los que no la tienen. No solo las contraseñas se pueden encriptar, cualquier tipo de dato, por ejemplo Whatsapp, se encripta punto a punto, esto significa que si los datos son interceptados por un servidor intermedio, la información no será legible, está solo sería legible por el primer emisor y el receptor de la información.

En el tutorial se hace referencia a encriptar una contraseña, porque para que una aplicación sea más segura, es recomendable que las contraseñas de los usuarios sean protegidas y de ese modo quienes tienen acceso a las bases de datos de las aplicaciones no sepan exactamente las contraseñas ingresadas.

Tipos de Funciones de Encripción en PHP

Para encriptar contraseñas en PHP puedes utilizar las siguientes funciones:

Encripción en md5

Esta función convierte la cadena que se le ingrese en un código hexadecimal de 32 caracteres, es bastante sencilla de usar, no requiere mayores configuraciones, pero no es recomendable para sistemas que requieran gran seguridad ya que estos códigos se pueden desencriptar.

Más información en el siguiente enlace:

https://www.w3schools.com/php/func_string_md5.asp

Encripción en sha1

Este código genera un código encriptado de 160 bits, de 40 caracteres, es un tipo de encripción más seguro que md5, pero sigue siendo, medianamente inseguro, desencriptable y menos recomendable.

Más información en el siguiente enlace:

https://www.w3schools.com/Php/func_string_sha1.asp

Función hash

La función hash encripta de una lista de algoritmos de encripción que se puede puede ver en el siguiente array:

Array ( [0] => md2 [1] => md4 [2] => md5 [3] => sha1 [4] => sha224 [5] => sha256 [6] => sha384 [7] => sha512/224 [8] => sha512/256 [9] => sha512 [10] => sha3-224 [11] => sha3-256 [12] => sha3-384 [13] => sha3-512 [14] => ripemd128 [15] => ripemd160 [16] => ripemd256 [17] => ripemd320 [18] => whirlpool [19] => tiger128,3 [20] => tiger160,3 [21] => tiger192,3 [22] => tiger128,4 [23] => tiger160,4 [24] => tiger192,4 [25] => snefru [26] => snefru256 [27] => gost [28] => gost-crypto [29] => adler32 [30] => crc32 [31] => crc32b [32] => crc32c [33] => fnv132 [34] => fnv1a32 [35] => fnv164 [36] => fnv1a64 [37] => joaat [38] => murmur3a [39] => murmur3c [40] => murmur3f [41] => xxh32 [42] => xxh64 [43] => xxh3 [44] => xxh128 [45] => haval128,3 [46] => haval160,3 [47] => haval192,3 [48] => haval224,3 [49] => haval256,3 [50] => haval128,4 [51] => haval160,4 [52] => haval192,4 [53] => haval224,4 [54] => haval256,4 [55] => haval128,5 [56] => haval160,5 [57] => haval192,5 [58] => haval224,5 [59] => haval256,5 )

Literalmente puedes utilizar cualquiera de estos algoritmos solo poniendo el nombre como uno de los parámetros de los que necesita la función.

La forma en que trabaja esta función es la siguiente, debes poner dos cadenas de texto, la primera cadena es el nombre del algoritmo de encripción que deseas aplicar, por ejemplo el md4 que se encuentra en la posición 1 del array.

La segunda cadena de texto debe tener los caracteres que vas a encriptar en el vídeo relacionado yo uso la contraseña 1234abcd.. que es la contraseña habitual, tanto de mis programas gratuitos como de mis programas de premium

Un ejemplo podría ser el siguiente:

hash('md4', '1234abcd..')

Más información sobre la función hash en el siguiente enlace:

https://www.php.net/manual/es/function.hash.php

Función password_hash

Esta función utiliza dos parámetros el primero es el texto de la contraseña y el segundo el algoritmo que utilizará, que tienen las siguientes constantes

PASSWORD_DEFAULT que utiliza el algoritmo de bcrypt
PASSWORD_BCRYPT utiliza el algoritmo de CRYPT_BLOWFISH
PASSWORD_ARGON2I utiliza el algoritmo de encripción Argon2i
PASSWORD_ARGON2ID utiliza el algoritmo Argon2id

password_hash es la más robusta y recomendada función de encripción de PHP por que es unidireccional, esto significa que no se puede desencriptar, la cadena de 60 caracteres que genera no se puede desencriptar, en adición esta función soporta que le ingreses tu propio algoritmo de encripción, para hacerla aun más difícil de romper.

Más información sobre password_hash en el siguiente enlace:

https://www.php.net/manual/en/function.password-hash.php

Etiquetado: mysql / php / tutorial

Introducción a herramientas Frontend en Desarrollo Web

por ConfiguroWeb16 diciembre, 202219 diciembre, 2022DesarrolloDeja un comentario

A continuación, en esta Introducción a herramientas Frontend en Desarrollo Web pretenderé explicar breve y suficientemente algunas herramientas y conceptos que considero muy importantes a nivel de desarrollo web, como lo son los editores de texto, los navegadores web y la organización de tus proyectos. Considero muy importante considerar estos tres pilares en nuestro camino como programadores.

Puedes saltar directamente al subtema que más te interese en el índice a continuación:

Editores de Texto

Los editores de texto especializados en programación serán tus principales amigos en tu camino de programador, harán mucho más sencillo organizar tu código con sangrías o tabulaciones.

Los editores de texto como Visual Studio Code que es el que voy a recomendar para seguir este tutorial de Introducción a herramientas Frontend en Desarrollo Web, estos editores pueden ayudar a sugerir tramos de código según funciones que lleguemos a requerir.

Como ya se había indicado el Editor de Texto que voy a recomendar es Visual Studio Code ya que es totalmente gratuito, tiene una gran comunidad que le provee una buena cantidad de extensiones que permiten optimizar el código para necesidades que lleguemos a tener según el lenguaje con el que necesitemos trabajar.

Descarga e Intalación de Visual Studio Code

Lo primero es ingresar al siguiente enlace:

https://code.visualstudio.com/

Pulsamos la opción de descargar, normalmente recomiendo instalarlo con todos los parámetros por defecto, pero en lo personal yo prefiero habilitar todas las opciones disponibles que no vienen seleccionadas por defecto, como por ejemplo la opción de crear un enlace directo para el escritorio, agregar la opción abrir con Code, que permite solo seleccionar una carpeta y con clic derecho, abrir esta como un proyecto directamente en visual studio code, esta última opción es muy práctica para trabajar con proyectos y librerías que hayamos descargado.

Añadir a la PATH es una opción que ya viene seleccionada por defecto es que es muy útil para llamar a Visual Studio Code como servicio desde consola y poder abrir tramos de código específicos con VS Code Fácilmente.

Configuración de Visual Studio Code

Recomiendo elegir un tema obscuro, ya que vas a estar horas trabajando frente al ordenador y de este modo podrás cuidar tu vista y con el alto contraste con las letras podrás ver mejor las diferentes características de cada lenguaje y ser mucho más efectivo en tu proceso de programación.

Instalación de Plugins

Los plugins son herramientas que permiten optimizar tu proceso de desarrollo a nivel general, no solo sirven para esta Introducción a herramientas Frontend en Desarrollo Web sino que extiendes las opciones que ofrece Visual Studio Code, para que el proceso de desarrollo sea lo más efectivo posible.

La instalación de Plugins es súper sencilla basta con pulsar el icono de los cuadrados ubicado en la parte izquierda de la pantalla de inicio en Visual Studio Code y luego escribir en el buscador que se habilita lo que necesitemos.

A continuación muestro un breve listado de plugins que puedes utilizar en este caso para el desarrollo en Frontend:

Spanish Language Pack for Visual Studio Code

Este plugin te pone Visual Studio Code totalmente en español, honestamente no lo utilizo, no veo necesidad de cambiar el lenguaje, pero si te parece una buena opción esta es mejor forma de hacerlo.

Auto Rename Tag

Especialmente en html, requieres de etiquetas de apertura y cierre, esta extensión te permite con solo cambiar la etiqueta de apertura, se cambia automáticamente la de cierre.

Más adelante verás con más detalle la utilidad de esta extensión.

Color Highligh

Este plugin te muestra el color que estás ingresando visualmente, en HTML es posible poner el color White, Black, Yellow, cualquier color con su nombre en inglés, pero también es posible escribir colores en hexadecimal por ejemplo estos colores están con un # y un número, no es intuitivo para un humano que color en específico estoy utilizando, por esto, esta extensión se vuelve muy útil para nuestro trabajo en el Frontend.

indent-rainbow

Esta herramienta le pone colores a la indentación, haciendo más sencillo ver el espaciado y la organización del código.

Intellicode

Este código funciona muy bien con el auto completado, haciendo más fácil el proceso de ir escribiendo los códigos que vas necesitando por ejemplo para poner un favicon, un icono en la pestaña de la página, solo escribes la palabra link, y el sistema te muestra una opción que dice favicon, la eliges y ya tienes el código escrito para realizar el proceso sencillamente.

Live Server

Esta extensión te habilita un servidor desde Visual Studio Code en tu navegador por defecto, con el que muestra los cambios que vayas haciendo en tiempo real, es muy muy útil esta opción y por eso es muy popular Live Server entre los usuarios de VS Code.

Existe una infinidad de Plugins muy útiles que por el momento no se abordarán en el presente tutorial, pero que sin duda a medida que avancemos se irán integran en el curso.

Navegadores Web

Los Navegadores Web son el universo donde la magia de lo que hacemos como desarrolladores sucede, constantemente estaremos interactuando con estas herramientas, que incluso tienen opciones específicas para programadores como los son por ejemplo la consola, la vista de móviles desde el ordenador entre otras más.

Cada navegador tiene sus propias herramientas de desarrollo, por esto, para las especificaciones de este curso utilizaremos Google Chrome, que podrás descargar del siguiente enlace si por algún motivo aun no lo tienes en tu ordenador:

https://www.google.com/chrome/

El motor de Render

Es un sistema interno que define los límites de lo que un navegador puede hacer, lo que podemos y no podemos implementar según el navegador depende de este motor de render.

Existen tres principales motores de render que utilizan los navegadores más conocidos y estos son WebKit de Safari, Gecko de Firefox, Blink de Chrome, entre otros más.

Más información en el siguiente enlace:

https://es.wikipedia.org/wiki/Motor_de_renderizado

Navegadores Evergreen

Estos navegadores se actualizan constantemente de manera automática, cada cierto tiempo que haya nuevas actualizaciones, te envían notificaciones de instalación y es necesario reiniciarlos, por esto debemos buscar que nuestro código sea mayormente compatible al menos en nuestros navegadores Evergreen para maximizar la compatibilidad de nuestras funcionalidades.

Para más información sobre los Navegadores Evergreen puedes acceder al siguiente enlace, donde se encuentra el libro High Performance Browser Networking, donde se habla con mucho más profundidad del tema desde la página 272.

https://www.oreilly.com/library/view/high-performance-browser/9781449344757/

Organización de las carpetas de tus proyectos

Un solo archivo no es un proyecto, en el desarrollo de tus aplicaciones Frontend o Backend, necesitarás trabajar con diferentes archivos, la gran recomendación sobre esto, es que todos tus archivos se encuentren dentro de una misma carpeta, para que subir estos archivos a un servidor o enviarlos a otro desarrollador, será una tarea sencilla y sin errores asociados.

Se recomienda que los nombres tanto de los proyectos, como de los archivos sean sencillos, declarativos, en lo posible estos nombres consten de una sola palabra, sin mayúsculas, sin acentos, sin espacios cuando haya la necesidad de más palabras, si no te gusta la opción de omitir espacios puedes utilizar guiones, se recomienda en mejor medida que no sea guion al piso, si en algún momento tu proyecto se va a convertir en una página web publicada, el SEO, la optimización del proyecto en los buscadores, será mejor si no se utiliza el guion al piso, sino guiones normales.

Gestión de Repositorios

La gestión de repositorios es la versión avanzada de la organización de las carpetas, puedes llevar la organización de tus archivos al siguiente nivel, fijando puntos en el tiempo a los que volver cuando sea necesario, trabajar a nivel de ambientes productivo y de desarrollo, trabajar en colaboración con otros desarrolladores de manera eficaz y escalable.

Para todo esto existe GIT que es una avanzada herramienta que permite realizar todo lo que he dicho y aún más cosas, Git es un sistema de control de versiones de código abierto Git se ha diseñado teniendo en cuenta el rendimiento, la seguridad y la flexibilidad.

Con Git puedes administrar tu información a nivel avanzado, Git se integra perfectamente con GitHub o GitLab, para llevar la configuración de repositorios a un nuevo nivel, GitHub es un portal especializado en alojar código que permite trabajar en equipo a través de Internet.

Para más información sobre Git puedes acceder al siguiente enlace:

https://git-scm.com/doc

Comandos GIT más comunes

A continuación les comparto los comandos de Git más comunes que sin duda necesitarás en la gestión de tus proyectos según lo que requieras realizar:

Comenzar un nuevo proyecto

git init
git clone
git config

Confirmar cambios:

git add
git commit

Trabajar con ramas

git branch
git checkout
git merge

Cambios de sincronización

git pull
git push

Comandos de ayuda:

git log
git status
git diff

Etiquetado: desarrollo web / git / tutorial

Subir aplicación Node.js a Hosting Compartido

por ConfiguroWeb29 septiembre, 20228 abril, 2023DesarrolloDeja un comentario

En el tutorial a continuación aprenderemos a subir una aplicación Node.js a un hosting compartido. El proceso lo abordaremos desde Visual Studio Code para que sea lo más claro posible.

Actualmente la mayoría de proveedores de hosting compartido no tienen incluido Node.js, pero es perfectamente posible instalar desde ssh, node para luego utilizar el poder de npm y de ese modo desplegar tu aplicación efectivamente.

Video Explicativo

Subir aplicación Node.js a Hosting Compartido

Índice Exploratorio

Desde estos enlaces puedes saltar directamente a la parte del tutorial que más te interese:

Glosario de Términos Utilizado en el Tutorial donde se explica como Subir aplicación Node.js a Hosting Compartido

¿Qué es ssh?

ssh es un protocolo de acceso remoto que facilita el proceso de acceso y control remoto a servidores desde una consola de comandos.

¿Qué es Node.js?

Node.js entorno de ejecución de JavaScript orientado a eventos asíncronos, Node. js funge como un servidor en código Javascript, que permite crear aplicaciones escalables con eventos asíncronos.

¿Qué es NPM?

NPM corresponde a las siglas de Node Package Manager, es el manejador de paquetes por defecto de JavaScript, para instalar las librerías con comandos desde la terminal de manera sencilla, efectiva y escalable.

¿Qué es un Hosting Compartido?

Es un conjunto de maquinas virtuales, con páginas web alojadas a un solo servidor físico, estás páginas comparten los recursos entre sí, como la RAM y su capacidad de procesamiento.

El hosting compartido normalmente es la opción más popular y económica de tener tu propia página web.

¿Qué es FTP?

Es un sistema de transferencia de archivos, que permite subir aplicaciones a un servidor de manera remota. Los archivos se pueden subir de carpeta a carpeta, desde un entorno visual. A diferencia de ssh, donde el proceso se realiza desde consola, aunque cabe agregar que el protocolo ssh es más seguro.

¿Qué es Git?

Es el sistema de Control de Versiones más popular del mundo, está herramienta está diseñada para ayudar a los equipos de desarrollo a gestionar los cambios que se van realizando en el código fuente de las aplicaciones que se desarrollan.

¿Qué es Git Bash?

Git Bash es una aplicación diseñada para Microsoft Windows que permite ejecutar Git desde la línea de comandos. Este terminal permite ejecutar Bash, SSH, SCP entre otras utilidades muy populares de Unix compiladas efectivamente para Windows.

Si deseas sabes más sobre los comandos más importantes de Git Bash, puedes ver el siguiente tutorial:

Cómo utilizar la Terminal

Configuración de las herramientas necesarias para el despliegue de una aplicación Javascript en un Hosting Compartido

A continuación, se van a mostrar y configurar las herramientas necesarias, para el funcionamiento correcto de la aplicación a desplegar.

Aplicación a Desplegar en el Servidor

En esta publicación vamos a instalar una aplicación de Wep Scraping, que se publicó previamente en este blog y que puedes encontrar en al siguiente enlace:

Herramienta Web Scraping en Javascript

Instalación y Descarga de Visual Studio Code

Para que el tutorial sea lo más sencillo y accesible posible se va a trabajar con Visual Studio Code, el editor de código más popular del mundo, puedes descargarlo e instalarlo en el siguiente enlace, no se va a hacer mayor énfasis en este proceso por su sencillez:

https://code.visualstudio.com/

Instalación y Descarga de Git

Se recomienda realizar la descarga e instalación de Git, para utilizar el terminal embebido en Visual Studio Code, Git Bash. En el siguiente enlace puedes descargar la aplicación e instalarla con todos los parámetros por defecto:

https://git-scm.com/

Configuración de Visual Studio Code para el acceso remoto al servidor

Desde visual Studio Code, se debe habilitar el acceso FTP y el acceso SSH desde el terminal de Git Bash, a continuación se muestra el proceso para conectarse a un servidor FTP desde Visual Studio Code:

Conéctarse al servidor FTP/SFTP usando Visual Studio Code y la extensión SFTP

Conectarse a un servidor por SSH desde Visual Studio Code

Además de la conexión FTP, es necesaria la conexión SSH, para instalar Node.js y las librerías necesarias para subir una aplicación Node.js a un Hosting Compartido, a continuación se muestra el proceso de conexión por SSH a un hosting compartido, en este caso, Hostinger.

Conectarse a un servidor por SSH desde Visual Studio Code

Instalación de Node.js en un hosting compartido

Para realizar la instalación de Node.js es necesario llevar el paso a paso previo hasta aquí. Si se realiza la configuración necesaria tal como se lleva el tutorial podrás realizar el proceso desde Visual Studio Code, con unas cuantas líneas de código.

Desde el terminal, cuando hayas accedido a tu servidor con ssh, desde la carpeta public_html donde vas a tener los diferentes proyectos, copia y pega el siguiente código:

wget -qO- https://cdn.rawgit.com/creationix/nvm/master/install.sh | bash

Con el siguiente mandas configurar node a nivel global

export NVM_DIR="$HOME/.nvm"

Ya cuando se haya realizado este proceso efectivamente debes poner el siguiente comando:

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Posteriormente pones el siguiente comando y presionas enter:

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Por último con el siguiente comando instalas ya node correctamente

nvm install node 
nvm install 16

Posterior a la instalación de node, ya serviran los comando npm de instalación de las librerías necesarias sin problema.

Subir aplicación Web Scraping en Javascript a un Hosting Compartido

En este punto se deben casi los mismos procedimientos de la aplicación Web Scraping, relacionada en el vídeo a continuación:

Cómo construir una herramienta Web Scrapring con Javascript

A continuación se muestran los códigos necesarios para realizar el despliegue de aplicación Node.js a un Hosting, lo primero es inicializar npm, con el siguiente comando:

npm init

Instalación de cheerio

npm i cheerio

Instalación de Express js

npm i express

Instalación de Axios

npm i axios

Instalación de Nodemon

npm i nodemon

Creación del archivo index.js desde ssh

lo primero es llegar al proyecto con el comando cd para solo instalar node js en la ubicación donde corresponda, después debemos crear un archivo, llamado index.js con el comando touch, como se ve en el código a continuación:

touch index.js

Edición del archivo index.js

Luego de creado el archivo, desde el explorador PDF de Visual Studio Code, se busca este archivo, que si no aparece al comienzo se refresca la conexión para que muestre el documento.

Al visualizar el documento, presionamos clic derecho y elegimos la opción Edit in Local para luego pegar el código a continuación:

Código aplicación de Web Scraping

La aplicación será algo diferente de la Web Scraping relacionada anteriormente, con el código a continuación se recorre totalmente este blog, buscando la palabra clave, PHP, la aplicación imprime en formato json, las publicaciones relacionadas con esta palabra clave, en el apartado gratis y en el aparato premium del blog.

const PORT = 8000
const express = require('express')
const axios = require('axios')
const cheerio = require('cheerio')
const app = express()

const blogs = [
    {
        nombre: 'premium',
        direccion: 'https://configuroweb.com/tag/premium/',
        base: ''
    },
    {
        nombre: 'premium-2',
        direccion: 'https://configuroweb.com/tag/premium/page/2/',
        base: ''
    },
    {
        nombre: 'premium-3',
        direccion: 'https://configuroweb.com/tag/premium/page/3/',
        base: ''
    },
    {
        nombre: 'premium-4',
        direccion: 'https://configuroweb.com/tag/premium/page/4/',
        base: ''
    },
    {
        nombre: 'premium-5',
        direccion: 'https://configuroweb.com/tag/premium/page/5/',
        base: ''
    },
    {
        nombre: 'gratis',
        direccion: 'https://configuroweb.com/tag/gratis/',
        base: ''
    },
    {
        nombre: 'gratis',
        direccion: 'https://configuroweb.com/tag/gratis/',
        base: ''
    },
    {
        nombre: 'gratis-2',
        direccion: 'https://configuroweb.com/tag/gratis/page/2/',
        base: ''
    },
    {
        nombre: 'gratis-3',
        direccion: 'https://configuroweb.com/tag/gratis/page/3/',
        base: ''
    },
    {
        nombre: 'gratis-4',
        direccion: 'https://configuroweb.com/tag/gratis/page/4/',
        base: ''
    },
    {
        nombre: 'gratis-5',
        direccion: 'https://configuroweb.com/tag/gratis/page/5/',
        base: ''
    },
    {
        nombre: 'gratis-6',
        direccion: 'https://configuroweb.com/tag/gratis/page/6/',
        base: ''
    },
    {
        nombre: 'gratis-7',
        direccion: 'https://configuroweb.com/tag/gratis/page/7/',
        base: ''
    },
    {
        nombre: 'gratis-8',
        direccion: 'https://configuroweb.com/tag/gratis/page/8/',
        base: ''
    },
    
]

const articles = []

blogs.forEach(blog => {
    axios.get(blog.direccion)
        .then(response => {
            const html = response.data
            const $ = cheerio.load(html)

            $('a:contains("PHP")', html).each(function () {
                const titulo = $(this).text()
                const url = $(this).attr('href')

                articles.push({
                    titulo,
                    url: blog.base + url,
                    ruta: blog.nombre
                })
            })

        })
})

app.get('/proyecto-api', (req, res) => {
    res.json('Publicaciones ConfiguroWeb')
})

app.get('/proyecto-api/post', (req, res) => {
    res.json(articles)
})

app.get('/proyecto-api/post/:blogId', (req, res) => {
    const blogId = req.params.blogId

    const blogDireccion = blogs.filter(blog => blog.nombre == blogId)[0].direccion
    const blogBase = blogs.filter(blog => blog.nombre == blogId)[0].base


    axios.get(blogDireccion)
        .then(response => {
            const html = response.data
            const $ = cheerio.load(html)
            const specificArticles = []

            $('a:contains("PHP")', html).each(function () {
                const titulo = $(this).text()
                const url = $(this).attr('href')
                specificArticles.push({
                    titulo,
                    url: blogBase + url,
                    ruta: blogId
                })
            })
            res.json(specificArticles)
        }).catch(err => console.log(err))
})

app.listen(PORT, () => console.log(`Corriendo desde el puertoo ${PORT}`))

Ya en este punto tu aplicación debe estar plenamente funcional, quedo al pendiente de cualquier duda.

Etiquetado: javascript / nodejs / tutorial

Cómo construir una herramienta Web Scrapring con Javascript

por ConfiguroWeb24 septiembre, 20228 abril, 2023Desarrollo1 comentario

Aprenderemos en esta ocasión Cómo construir una herramienta Web Scrapring con Javascript con la fuerza de menos de 30 líneas de código, utilizando todo el poder de los siguientes frameworks de la más alta popularidad y eficiencia, del mundo del desarrollo web como los son:

cheerio
Express JS
Axios

A continuación explicaré brevemente, primero que es web scraping y después cada una de las herramientas que se utilizará en la implementación del código.

Video Explicativo

Cómo construir una herramienta Web Scrapring con Javascript

¿Qué es Web Scraping?

El Web Scraping es una tècnica automatizada de extracción de información de páginas web, en ocasiones el proceso se realiza utilizando el protocolo HTTP el cual ya se abordó en un tutorial anterior con la tecnología PHP en el siguiente enlace lo puedes ver:

Cómo hacer Web Scraping con PHP

La otra forma de hacer Web Scraping es incrustando el navegador en una aplicación, como lo haremos en el presente tutorial. A continuación, paso a explicar los diferentes frameworks que se utilizaran para llevar a cabo el proceso de la extracción.

¿Qué es cheerio?

Cheerio es una implementación rápida, flexible y ligera que se podría ver como una actualización de JQuery, utiliza su mismo core. Cheerio analiza el DOM y proporciona una manera operable de modificar la información resultante, más información en su web oficial:

https://cheerio.js.org/

¿Qué es Express JS?

Este framework que proporciona herramientas robustas y simplificadas para Node js. Permite estructurar una aplicación de una manera ágil, añadiendo funcionalidades como enrutamiento, gestión de sesiones y cookies entre otros. Más información en su sitio web oficial:

https://expressjs.com/es/

¿Qué es Axios?

Axios tiene la facultad de ejecutarse en el navegador, configurar y realizar solicitudes a un servidor para recibir sus respuestas. Este framework de Javascript cuenta con una única API para gestionar las solicitudes Ajax, gestiona el consumo de servicio web API REST efectivamente, a pesar de su potencia es muy ligero, pesa poco más de 10KB y es compatible con todos los navegadores actuales. Más información en el siguiente enlace:

https://axios-http.com/docs/intro

Configuración del Entorno de Trabajo

En este proceso en el que aprenderemos cómo construir una herramienta Web Scrapring con Javascript, es necesario utilizar además de los frameworks indicados a Nodejs que es un entorno de ejecución orientado a eventos asíncronos, que funge como la plataforma que hace todo posible.

En adición se utilizará nodemon para recargar automácitamente los cambios que se vayan realizando en el código en tiempo y npm para realizar la descarga he intalación de estas librerías necesarias para el funcionamiento del código correctamente.

Paso a paso del proceso de construir una herramienta Web Scrapring con Javascript

Para llevar a cabo el proceso se recomienda instalar Visual Studio Code que puedes descargar e Instalar en el siguiente enlace:

https://code.visualstudio.com/

Instalación de las librerías necesarias para la ejecución de la aplicación de Web Scraping

Para realizar el proceso correspondiente se debe crear una nueva carpeta con el nombre que desees que tenga el proyecto y abrir la consola, para ejecutar los comandos de instalación de cada librería.

Instalación de Nodejs

Para realizar el proceso de instalación de nodejs, ingresa en slguiente enlace y realiza la descarga e instalación correspondiente

https://nodejs.org/es/download/

Ejecución de Nodejs para que empieze a funcionar el Servidor

npm init

A continuación el sistema crea un documento llamado package.json que organiza el proyecto y lo alista para la instalación de las libreria de manera estándar.

En el proceso de la configuración siguiente, el sistema le pide una información desde consola, para el ejemplo no se va a diligenciar nada y se le va a poner al final, solo yes cuando se pregunte, todas las consultas anteriores se sobre pasan con Enter.

Instalación de cheerio

Desde Visual Studio Code pulsas en View y luego en Terminal, y escribes el siguiente código:

npm i cheerio

Instalación de Express js

npm i express

Instalación de Axios

npm i axios

Instalación de Nodemon

npm i nodemon

Código del tutorial con el cómo construir una herramienta Web Scrapring con Javascript

El código ha continuación tiene el proceso necesario para extaer el título y enlace relacionado de está página web, configuroweb.com:

const PORT = 3000;

const express = require('express');
const cheerio = require('cheerio');
const axios = require('axios');
const { response } = require('express');


const app = express();

URL = 'https://configuroweb.com/';

axios(URL)
    .then(response =>{

        const html = response.data;
        const $ = cheerio.load(html)
        const articles = []
        $('.entry-title', html).each(function(){
            const titulo = $(this).text()
            const url = $(this).find('a').attr('href')
            articles.push({
                titulo,
                url
            })
        })

        console.log(articles)

    }).catch(err => console.log(err))



app.listen(PORT, ()=>console.log('Ejecutando el script desde el puerto 3000'));

Ejecución del Código desde Consola para que se ejecute el Web Scraping

Se debe ejecutar el siguiente comando, para que en adelante, todos los cambios se ejecuten automácitamente, gracias a Nodemon:

npm run start

Repositorio del Proyecto Web Scraping en Javascript

El siguiente es el enlace con el repositorio del Proyecto de Scraping ya implementado, funcionando correctamente:

https://github.com/configuroweb/scrap
0 forks.
0 stars.
0 open issues.

Recent commits:

script de scraping web en javascript, Mauricio

Cómo construir una herramienta Web Scrapring con Javascript

Cualquier duda quedo al pendiente !!

Etiquetado: javascript / nodejs / tutorial

Cookie	Duración	Descripción
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Video Explicativo

Código Relacionado en el video

Demo Página Web Subida a GitHub Pages

Los más comunes eventos en Javascript

Evento onClick

Ejemplo del Evento onClick

Eventos mouseDown y mouseUp

Ejemplo de eventos onmouseup y onmousedown

Eventos onblur y onfocus

Evento onmouseover

Evento onchange

Evento onselect

Comparte esto:

Video Explicativo

Código al que hago referencia en el vídeo

Ejemplo de Objetos en Javascript

Explicación del código

Como acceder a las propiedades de un Objeto

Diferencias entre un Array y un Objeto en Javascript

Como recorrer un objeto en Javascript

Como acceder a las llaves de un objeto

Como acceder a los valores de un objeto

Como mostrar todas las llaves y valores respectivos de un Objeto

Como asignarle un objeto a otro

Como recorrer un array de Objetos en Javascript

Utilización del Método forEach

Utilización del Método map

Comparte esto:

Código al que hago referencia en el vídeo

Ejemplo básico de como recorrer un Array con el método ForEach

Parámetro index en el Array

Ejemplo de como acceder a un array dentro de la función callback

El uso de this dentro de la función callback

Comparte esto:

Video Explicativo

Código Relacionado en el Video Explicativo

Métodos de Array más conocidos

Método Push

Método Unshift

Método Pop

Método Shift

Método Map

Método Filter

Método Reverse

Método at

Método Slice

Suscríbete a mi contenido en mis Redes Sociales

Comparte esto:

Video Explicativo Tutorial – Cómo hacer un login con PHP y MySQL

Enlace de descarga directo del proyecto de GitHub

Base de Datos del Sistema de Acceso

Scripts del Software de Login

style.css

index.html

cerrar-sesion.php

autenticacion.php

inicio.php

perfil.php

Comparte esto:

Video explicativo sobre el sistema de CRUD Básico en PHP y MySQL

Repositorio del Sistema de CRUD en PHP y MySQL

Base de datos del Tutorial sobre el CRUD en PHP y MySQL

Archivos del CRUD hecho en PHP y MySQL

Comparte esto:

Video Explicativo

Codigo Referenciado en el Video Tutorial

Código de la Base de Datos

Conocimientos Previos

Tutorial PHP ConfiguroWeb

Qué significa encriptar una contraseña?

Tipos de Funciones de Encripción en PHP

Encripción en md5

Encripción en sha1

Función hash

Función password_hash

Comparte esto:

Editores de Texto

Descarga e Intalación de Visual Studio Code

Configuración de Visual Studio Code

Instalación de Plugins