Programando PHP

Ancla HTML sin que cambie la URL con #


  <a href="javascript:document.getElementById('ancla1').scrollIntoView({ behavior: 'smooth' })">lo que sea</a>


  <h2 id="ancla1">xxx</h2>

XAMPP: Tener dos versiones de xampp instaladas en el mismo ordenador

Por ejemplo te descargas desde la web de xampp el ejecutable la última versión de XAMPP que viene ya con PHP 8.2

Al instalarlo lo creas en una nueva carpeta (por ejemplo xampp8_2)

Ahora para ejecutar una versión de XAMPP u otra (las dos no se puede al mismo tiempo pues comparten los mismos puertos) crea unos accesos directos ya sea a:
C:\xampp\xampp-control.exe
ó a:
C:\xampp8_2\xampp-control.exe

Para comprobar en cuál estás en cada momento (aparte del panel de XAMPP que tengas abierto):
http://localhost
y para el phpmyadmin: http://localhost/phpmyadmin/

Una cosa importante es también especificar en el path de ordenador donde está la versión de PHP que quieras ejecutar en cada momento (por ejemplo la 8.2), para ello:


  Busca en la barra de Windows "Editar las variables de entorno del sistema".

  En la ventana de Propiedades del sistema, pulsa en Variables de entorno.

  En “Variables del sistema”, busca la variable Path y edítala.

  Modifica la ruta que haya a por ejemplo: c:\xampp8_2\php

  Aceptar todo y cierra

  Reiniciar el ordenador

Ya si desde el terminal pones php-v te saldrá 8.2


git@bitbucket.org:lo-que-sea.git

Y en Directory:


  C:\xampp\htdocs\lo-que-sea

Creará automáticamente la carpeta lo-que-sea y clonará dicho repositorio en tu ordenador local

GIT: Saber a qué repositorio está apuntando un proyecto


  
git remote -v

Jquery: Acceder al valor de un campo del form a partir del id del form


  $("#formLSG").find('[name="cp"]').val();

Para sacar el valor de todos los campos del form:


  $("#formLSG").find('input, select, textarea').each(function() {

       var nombreCampo = $(this).attr('name');

       var valorCampo = $(this).val();

       console.log(nombreCampo + ': ' + valorCampo);

  });

Composer: Error porque el paquete a instalar no tiene SSL

Primero poner:


  composer config -g secure-http false

Y después ya instalar el paquete que se quiera sin problema:


  composer require cboden/ratchet

CSS: Mostrar un texto sobre una imagen al hacer hover sobre ella


 <html>

<head>

<style>

  .hover-img {

    background-color: #000;

    color: #fff;

    display: inline-block;

    margin: 8px;

    max-width: 320px;

    min-width: 240px;

    overflow: hidden;

    position: relative;

    text-align: center;
    width: 100%;

  }


  
  .hover-img figcaption {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    align-items: center;

    z-index: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1.1em;

    opacity: 0;

    z-index: 2;

    transition-delay: 0.1s;

    font-size: 20px;

    font-family: sans-serif;

    font-weight: 400;

    letter-spacing: 1px;

    text-transform: uppercase;

  }


  
  .hover-img:hover img { /* oscurecer la imagen */

   opacity:0.6;

  }
  


  .hover-img:hover figcaption { /* Mostrar el texto de invisible a visible */

    opacity: 1;

  }
  


  .hover-img h2 {

    font-size: 1.3em;

    opacity: 0;

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

    transition: opacity 0.35s, transform 0.35s;

    -webkit-transform: scale(1.5);

    transform: scale(1.5);

    .hover-img:hover h2 {

    opacity: 1;

    -webkit-transform: scale3d(1,1,1);

    transform: scale3d(1,1,1);

  }

  </style>

  </head>

  <body>

  <figure class="hover-img">

  <img src="https://picsum.photos/id/200/440/320.jpg">

    <figcaption>

      <h2>En un lugar de la mancha</h2>

    </figcaption>
</figure>

  </body>

  </html>

Más información en: https://www.30secondsofcode.org/css/s/image-overlay-hover/

PHPStorm: Hacer GIT desde develop a master

En PHPStorm:


  Hacer Pull: Ctrl+T

  Hacer Push: Ctrl+K

Pasar de Develop a Master:


1. Primero hacerte un pull normal con Ctrl+T

2. En PHPStorm en GIT Version Control te saldrán los cambios q hay en repositorio

3. En PHPStorm: a la derecha del todo en master de colores darle a la flecha: Bajar a Remote -> Develop -> "Merge origjn/develop to master"

4. Una vez esté todo en tu ordenador pues hacerte un push con Ctrl+K para volver a subir al repositorio todo (ya directamente a master)

Node.js: Subir a producción

Lo primero en package.json añadir en scripts el comando de start, quedaría:


    "scripts": {

       "dev": "nodemon src/index.js",

       "start": "node src/index.js"

  },

Tener creado un .gitignore con:


  node_modules/

.env

Y subir todo al respositorio de github o bitbucket

Node.js: Variables de entorno


npm i dotenv

Creamos el fichero .env en la raiz


  PORT=3000

DB_HOST=localhost

DB_PORT=3306 # es el port para mysql

DB_USER=root

DB_PASSWORD=

DB_DATABASE=ejemplo

Creamos el fichero src/config.js


  import {config} from "dotenv"

config()

export const PORT = process.env.PORT || 3000

export const DB_HOST = process.env.DB_HOST || localhost

export const DB_PORT = process.env.DB_PORT || 3306

export const DB_USER = process.env.DB_USER || root

export const DB_PASSWORD = process.env.DB_PASSWORD || ""

export const DB_DATABASE = process.env.DB_DATABASE || ejemplo

Y ahora ya en el fichero src/db.js:


  import {createPool} from "mysql2/promise"

  import {PORT,DB_HOST,DB_PORT,DB_USER,DB_PASSWORD,DB_DATABASE} from "./config.js"



export const pool = createPool({

      host: DB_HOST,

      user: DB_USER,

      password: DB_PASSWORD,

      port: DB_PORT,

      database: DB_DATABASE

})

Una forma más limpia y ordenada es no poner todo el código en index.js sino crear un fichero src/app.js donde meter todas las inicializaciones del index, y en el index dejar solo:


  import app from "./app.js"

import {PORT} from "./config.js"

app.listen(PORT)

console.log("server funcionando en: "+PORT)