Diablo's questions

I would like to create this content slider using only JavaScript so that it can be used as many times as you want on the same page without having to copy all the JS again renaming the id names etc., but I'm lost. If id is used I should create all the JS again if I want to add more sliders and what I don't want, we imagine 4 sliders would be a lot of code.

Example:

// Caja padre
const wrapper_slider = document.querySelector('#slider-1');
// items
const item = document.querySelectorAll('#slider-items-1');

// Botones netx/prev
const prev = document.getElementById('row-left');
const next = document.getElementById('row-right');


// Constante con numero total de items a mostrar
const total_items = item.length
// Iniciamos indice
let current_row = 4

// Funcion mostrar/ocultar botones
SliderVisibilityNext()
SliderVisibilityPrev()

// Reset cuando se recarga el navegador (F5)
wrapper_slider.scrollLeft -= wrapper_slider.offsetWidth;

// Evento boton next
next.addEventListener('click', () => {
  wrapper_slider.scrollLeft += wrapper_slider.offsetWidth;
  // Actualizamos indice + 4
  current_row += 4

  // Funciones next/prev
  SliderVisibilityNext()
  SliderVisibilityPrev()

});

// Evento boton previous
prev.addEventListener('click', () => {
  wrapper_slider.scrollLeft -= wrapper_slider.offsetWidth;
  // Actualizamos indice - 4
  current_row -= 4

  // Funciones next/prev
  SliderVisibilityNext()
  SliderVisibilityPrev()
});

// Mostrar / ocultar botones (prev/next)
function SliderVisibilityPrev() {
  prev.style.display = current_row <= 4 ? 'none' : 'block'
}

function SliderVisibilityNext() {
  next.style.display = current_row >= total_items ? 'none' : 'block'
}




// Caja padre 2
const wrapper_slider2 = document.querySelector('#slider-2');
// Contenido items 2
const item2 = document.querySelectorAll('#slider-items-2');

// Botones netx/prev
const prev2 = document.getElementById('row-left2');
const next2 = document.getElementById('row-right2');


// Constante con numero total de items a mostrar
const total_items2 = item2.length
// Iniciamos indice
let current_row2 = 4

// Funcion mostrar/ocultar botones
SliderVisibilityNext2()
SliderVisibilityPrev2()

// Reset cuando se recarga el navegador (F5)
wrapper_slider2.scrollLeft -= wrapper_slider2.offsetWidth;

// Evento boton next
next2.addEventListener('click', () => {
  wrapper_slider2.scrollLeft += wrapper_slider2.offsetWidth;
  // Actualizamos indice + 4
  current_row2 += 4

  // Funciones next/prev
  SliderVisibilityNext2()
  SliderVisibilityPrev2()

});

// Evento boton previous
prev2.addEventListener('click', () => {
  wrapper_slider2.scrollLeft -= wrapper_slider2.offsetWidth;
  // Actualizamos indice - 4
  current_row2 -= 4

  // Funciones next/prev
  SliderVisibilityNext2()
  SliderVisibilityPrev2()
});

// Mostrar / ocultar botones (prev/next)
function SliderVisibilityPrev2() {
  // se comprueba que 
  prev2.style.display = current_row2 <= 4 ? 'none' : 'block'
}

function SliderVisibilityNext2() {
  next2.style.display = current_row2 >= total_items2 ? 'none' : 'block'
}

.slider {
  width: 100%;
  max-width: 1240px;
  padding: 20px 0;
  overflow: hidden;
  scroll-behavior: smooth;
}

.slider-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.slider-items {
  height: 300px;
  min-width: 300px;
  max-width: 300px;
  height: 500px;
  border: 1px solid tomato;
  padding: 10px;
}

<article class="items-famous inner">
  <h2>Ultimo en Ropa</h2>
  <div id="slider-1" class="slider">
    <div class="slider-inner">

      <div id='slider-items-1' class="slider-items">
        1
      </div>

      <div id='slider-items-1' class="slider-items">
        2
      </div>

      <div id='slider-items-1' class="slider-items">
        3
      </div>

      <div id='slider-items-1' class="slider-items">
        4
      </div>

      <div id='slider-items-1' class="slider-items">
        5
      </div>

      <div id='slider-items-1' class="slider-items">
        6
      </div>

      <div id='slider-items-1' class="slider-items">
        7
      </div>


      <div id='slider-items-1' class="slider-items">
        8
      </div>

    </div>
  </div>
  <button role="button" id="row-right" class="row-right">next</button>
  <button role="button" id="row-left" class="row-left">prev</button>

</article>



<article class="items-famous inner">
  <h2>Ultimo en Calzado</h2>

  <div id="slider-2" class="slider">
    <div class="slider-inner">

      <div id='slider-items-2' class="slider-items">
        1
      </div>

      <div id='slider-items-2' class="slider-items">
        2
      </div>

      <div id='slider-items-2' class="slider-items">
        3
      </div>

      <div id='slider-items-2' class="slider-items">
        4
      </div>

      <div id='slider-items-2' class="slider-items">
        5
      </div>

      <div id='slider-items-2' class="slider-items">
        6
      </div>

      <div id='slider-items-2' class="slider-items">
        7
      </div>


      <div id='slider-items-2' class="slider-items">
        8
      </div>

    </div>
  </div>
  <button role="button" id="row-right2" class="row-right">next</button>
  <button role="button" id="row-left2" class="row-left">prev</button>


</article>

I'm trying with class='x-slider' class="slider-items"envede id and give the buttons a data-wrapper='x-slider'ydata-items='x-items'

 <button role="button" data-wrapper='slider' data-item='slider-items' class="next"><i class="fas fa-angle-right"></i></button>
 <button role="button" data-wrapper='slider' data-item='slider-items' class="prev"><i class="fas fa-angle-left"></i></button>

And in the JS something like:

// Botones netx/prev
const prev = document.querySelectorAll('.prev');
const next = document.querySelectorAll('.next');

// Recorremos boton para obtener sus datos en el evento.
next.forEach(function (item) { 
    // Evento onclick 
    item.addEventListener('click', function (e) { 


        const wrapper_slider = document.querySelector('.'+item.dataset.wrapper);
        // Contenido cursos
        const item = document.querySelectorAll('.'+item.dataset.item);

        const total_items = item.length
        wrapper_slider.scrollLeft += wrapper_slider.offsetWidth;
        // Actualizamos indice + 4
        current_row +=4
        
        // Funciones next/prev
        SliderVisibilityNext()
        SliderVisibilityPrev()  

        // Mostrar / ocultar botones (prev/next)
        function SliderVisibilityPrev() {
            // se comprueba que 
            prev.style.display = current_row <= 4 ? 'none' : 'block'
        }

        function SliderVisibilityNext() {
            next.style.display = current_row >= total_items ? 'none' : 'block'
        }

    })
})

function Next() {
    prev.style.display = 'none'
}

function Next() {
    next.style.display = 'block'
}

But it doesn't do anything and I'm lost, I can't think of any logic to do it, does anyone know a way?

I'm trying to create a zoom effect when we mouse over some image, like when you buy some product on Amazon. The code actually works, but it has two errors:

1. it doesn't always do the image change when it's on the second image and you want to go back to the first one it keeps zooming to the second one and not to the first one where the mouse is.

2. The square where we indicate which part is being enlarged, is repeated and does not move well, it only stays in the first image and does not pass if I move the mouse to the second image, even so, the image is displayed well in the box.

Does anyone know why? If you know some simpler code, that's also welcome since I'm doing tests. I don't want libraries, just JavaScript, and this could have x images, sometimes 2, sometimes 3.

I took this code and adopted it: https://www.w3schools.com/howto/howto_js_image_zoom.asp

Example in: JSFiddle

My code:

function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /*create lens:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/
  img.parentElement.insertBefore(lens, img);
  /*calculate the ratio between result DIV and lens:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*set background properties for the result DIV:*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*execute a function when someone moves the cursor over the image, or the lens:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*and also for touch screens:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);

  function moveLens(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image:*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    /*calculate the position of the lens:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*prevent the lens from being positioned outside the image:*/
    if (x > img.width - lens.offsetWidth) {
      x = img.width - lens.offsetWidth;
    }
    if (x < 0) {
      x = 0;
    }
    if (y > img.height - lens.offsetHeight) {
      y = img.height - lens.offsetHeight;
    }
    if (y < 0) {
      y = 0;
    }
    /*set the position of the lens:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*display what the lens "sees":*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }

  function getCursorPos(e) {
    var a, x = 0,
      y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {
      x: x,
      y: y
    };
  }
}

let img = document.querySelectorAll('.item-img')
img.forEach(function(item, idx) {
  item.addEventListener('mousemove', function(e) {   
    
    let x = e.target.dataset.id
    console.log(x)
    // Initiate zoom effect:
    imageZoom(x, "myresult");
  })
})

* {
  box-sizing: border-box;
}

.img-zoom-container {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

.img-zoom-lens {
  border: 1px solid #cccccc;
  position: absolute;
  /*set the size of the lens:*/
  width: 100px;
  height: 100px;
}

.item-img {
  border: 1px solid red;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 350px;
  height: 350px;
  position: absolute;
  left: 400px;
  top: 0;
}

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container">
  <img id="myimage" data-id="myimage" class="item-img" src="https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_1280.jpg" width="350" height="290">
  <br>
  <img id="myimage1" data-id="myimage1" class="item-img" src="https://cdn.pixabay.com/photo/2013/11/15/13/57/road-210913_1280.jpg" width="350" height="290">
  <div id="myresult" class="img-zoom-result"></div>
</div>

How could you add a previous and next button to this listener? It would be your thing if it is in video 1 that it does not show the previous button and if it is in the last video the same for the next button.

I am using the YouTube Player API , the code is from this SOes Answer , I have customized it a bit.

I know that you can create one playlistin the YouTube Iframe API , but in my case I want to create it through individual buttons and then the buttons prev/next, since the information, topics, videos to study, etc. I get them via PHP from my Database.

My code : JSFiddle

Try to add a value,ito get the index of the buttons, I saw in the console that I get a NodeList that shows me all the buttons and a length: 4

  console.log(value);

  editButtons.forEach(function(item, idx, value, i) {

Find out how you could iterate through that list to get the current index to create the previous or next buttons. Try this:

      value.forEach( 
        function(currentValue, currentIndex, listObj) {
            
            console.log(currentValue, currentIndex); 
          },
        );

I get all the buttons back in the console and with more information (accesskey: "",...,className: "btn-Play".., etc.)

But I still don't understand how I could do these two functions, something like a typical PHP pagination that has those buttons, I have to say that I have very basic knowledge of JavaScript.

EDIT

I add new tests after Sal's comment, but it still doesn't work as it should. I managed to get the prev/next buttons to work as soon as the page loads, but now the error comes, if I click on the normal button, that is, for example, it loads video 2, it loads said video through the other listener, now the problem, if now I use the prev/next it no longer has the indices of (var vdo = ['LSdmIKtTkpQ', '4Ur0VvNcgPk', '4WLUQ6BTNwk'];), since when I use the button it is no longer 0, how could I solve it so that the buttons get the correct index prev/next?

// Youtube player
document.addEventListener("DOMContentLoaded", function(event) {

// Array con lista de videos disponibles. Este proces lo tendria que hacer con PHP para obtener estos datos
var vdo = ['n7l1oAYRThQ', 'G3P1IJaY6AA', '353B-kOxWz4'];
// current index (indice actual)
var i = 0;
  
// Creamos variable - boton .btn-play
var editButtons = document.querySelectorAll('.btn-Play');

// Buscamos todos los botones existentes para obtener el boton onclick
editButtons.forEach(function(item, idx) {
   // Añadimos evento onclick a nuestro botones
   item.addEventListener('click', function() {
      
     // Obtengo el numero indice actual       
     let index = vdo.findIndex(el=> el ==item.dataset.id);
     //console.log(index);  
     var i = index; // Modifico el indice actual
      
      // Mostramos data-id del boton on click
      //console.log(item.dataset.id);         
      
      //Obtenemos titulo 
      var dataTitle = item.dataset.title;
      //console.log(dataTitle);
      
      //Cambiar HTML layout de un DIV #titulo
      document.getElementById('title_vdo').innerHTML = dataTitle;

      // Pasamos el id del video a reproducir.
      player.loadVideoById(item.dataset.id);
      
      // Dirigimos con scroll hacia nuestro reproductor (#player)          
      $("html, body").animate({
        scrollTop: $('#player').offset().top 
      }, 2000);

   });
});
  
// Selecionamos botones prev/next
var prevBtn = document.querySelector('.btn-Prev');
var nextBtn = document.querySelector('.btn-Next');


// Evento onclick PREV
prevBtn.addEventListener('click', function() {

   // Mostramos data-id del boton on click
   console.log(i);      

   if (i <= 0) i = vdo.length;
     i--;
     return loadVdo();      
   });

  // Evento onclick NEXT
  nextBtn.addEventListener('click', function() {

      // Mostramos data-id del boton on click
      console.log(vdo[i]);      

      if (i >= vdo.length-1) i = -1;
      i++;
      console.log(vdo[i]); 
      return loadVdo();      
   });

   // Pasamos video a la API Youtube Player
   function loadVdo() {
        // Pasamos el id del video a reproducir.
      return player.loadVideoById(vdo[i]);
   }

});

I add these buttons:

<button class="btn-Prev font20"><i class='far fa-caret-square-left'>&nbsp;</i></button> 
<button class="btn-Next font20"><i class='far fa-caret-square-right'>&nbsp;</i></button> 

With these buttons the videos are played in the first onclick event.

<button class="btn-Play" data-id="n7l1oAYRThQ" data-title="Video 1">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA" data-title="Video 2">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4" data-title="Video 3">Video 3</button>

EDIT code : JSFiddle

After fighting, I managed to make the prev/next buttons work, even change the title, I would only need the previous button to disappear if it is in video 1 and if it is in the last video, the same for the next one, I could do it with PHP, although I would like with JS.

Updated code : JSFiddle

I would appreciate the help!

I have modified my question following A.Cedano's comments.

I'm trying to implement the YouTube Player API , the implementation works correctly, if I click on any button the first time, it works and starts the video, now the problem comes if I do a second onclick to open another video, it doesn't change and the previous video continues to play and does not change, instead the alert does show me the new data-id obtained to play the new video.

How could I stop the video being played and reload the new video on every onclick?

To obtain the data-id I have used this example: Soes

<head>    
<script>      
    /*
      Con querySelectorAll haremos un alcance más específico
      el selector usado aquí signfica simplemente:
      "selecciona todos los elementos de tipo button
       que tengan la clase btn-Editar"
       Significa que otros botones quedarán aislados de esta escucha
       así como otros elementos que tengan esa clase, pero no sean button
    */
    var editButtons = document.querySelectorAll('button.btn-Play');

    /*
      A los elementos alcanzados por el criterio antes indicado
      le asignamos un listener...
      Significa que el click en cualquiera de esos elementos
      ejecutará el código contenido en la función
      en este caso recuperar el data-id
    */
    editButtons.forEach(function(item, idx) {
      item.addEventListener('click', function() {
        /*
           Usaremos la forma que existe para leer los atributos data
           que es dataset
        */
        //console.log(item.dataset.id);
        Player(item.dataset.id);
      });
    });      
</script>
</head>
<body>    

<!-- Reproductor Youtube -->
<div id='player'></div>

<button class="btn-Play" data-id="n7l1oAYRThQ">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4">Video 3</button>
//Etc..

<script>
function Player(id) {
    // alert(id);

    // Api Youtube Player
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;                   
                   

    window.onYouTubeIframeAPIReady = function() {
        //      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: id,
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }  
                  
    function onPlayerReady(event) {
        event.target.playVideo();
    }
                      
    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            //setTimeout(stopVideo, 6000);
            done = true;
        }
    }

    function stopVideo() {
        player.stopVideo();
    }
}
</script>
</body>

/*
          Con querySelectorAll haremos un alcance más específico
          el selector usado aquí signfica simplemente:
          "selecciona todos los elementos de tipo button
           que tengan la clase btn-Editar"
           Significa que otros botones quedarán aislados de esta escucha
           así como otros elementos que tengan esa clase, pero no sean button
        */
var editButtons = document.querySelectorAll('button.btn-Play');

/*
  A los elementos alcanzados por el criterio antes indicado
  le asignamos un listener...
  Significa que el click en cualquiera de esos elementos
  ejecutará el código contenido en la función
  en este caso recuperar el data-id
*/
editButtons.forEach(function(item, idx) {
  item.addEventListener('click', function() {
    /*
       Usaremos la forma que existe para leer los atributos data
       que es dataset
    */
    //console.log(item.dataset.id);
    Player(item.dataset.id);
  });
});

<!-- Reproductor Youtube -->
<div id='player'></div>

<button class="btn-Play" data-id="n7l1oAYRThQ">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4">Video 3</button>


<script>
  function Player(id) {
    alert(id);

    // Api Youtube Player
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;


    window.onYouTubeIframeAPIReady = function() {
      //      function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: id,
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerReady(event) {
      event.target.playVideo();
    }

    var done = false;

    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING && !done) {
        //setTimeout(stopVideo, 6000);
        done = true;
      }
    }

    function stopVideo() {
      player.stopVideo();
    }
  }
</script>

I would also like to redirect when each button is onclicked to go to the player since it is loaded above ( <div id='player'></div>).

Then, when using onlick to play the videos, is there an option to start video number 1 on page load?

How to create two subqueries in MySQL? efficiently and optimized.

The current code throws me the error #1241 - Operando debe tener 1 columna(s)from the phpMyAdmin .

• The first subquery calculates the total number of available classes.
• The second subquery I want to calculate the average and total votes cast.

My code:

$sql = "SELECT video.title,video.icon,video.duration,video.url,video.author,level.level,
             (
                SELECT COUNT(*) 
                  FROM `lessons`
                 WHERE video.ident_video = lessons.ident_video
             ),
             (   
                SELECT AVG(vote) AS avg_vote, COUNT(*) votos
                  FROM `coments`
                 WHERE video.ident_video = coments.ident_video
             )                  
          FROM `video` 
     LEFT JOIN `level` on video.ident_level = level.ident_level
         WHERE video.ident_state=? ORDER BY video.ident_video DESC LIMIT 5";

Error: error #1241 - Operand must have 1 column(s)

Tables SQL:

CREATE TABLE `level` (
  `ident_level` smallint(3) unsigned not null auto_increment primary key,
  `level` varchar(15) not null
)engine=InnoDB default charset=utf8 collate=utf8_spanish_ci;

CREATE TABLE `state` (
  `ident_state` smallint(3) unsigned not null auto_increment primary key,
  `state` varchar(15) not null
)engine=InnoDB default charset=utf8 collate=utf8_spanish_ci;

CREATE TABLE `video` (
  `ident_video` int(11) unsigned not null auto_increment primary key,  
  `title` varchar(255) not null,  
  `icon` varchar(100) not null,    
  `duration` varchar(10) not null,
  `url` varchar(100) not null unique,      
  `author` text not null,
  `ident_level` smallint(3) unsigned not null,
  `ident_state` smallint(3) unsigned not null,   
  foreign key(`ident_level`) references `level`(`ident_level`)
  on delete cascade on update cascade,
  foreign key(`ident_state`) references `state`(`ident_state`)
  on delete cascade on update cascade  
)engine=InnoDB default charset=utf8 collate=utf8_spanish_ci;

CREATE TABLE `lessons` (
  `ident_lesson` smallint(11) unsigned not null auto_increment primary key,
  `page` int(11) unsigned not null,
  `title` varchar(100) not null,
  `url` varchar(100) not null unique,    
  `status` smallint(1) not null,  
  `ident_video` int(11) unsigned not null,   
   foreign key (`ident_video`) references `video`(`ident_video`)
   on delete cascade on update cascade
)engine=InnoDB default charset=utf8 collate=utf8_spanish_ci;

CREATE TABLE coments(
  `ident_coment` smallint(11) unsigned not null auto_increment primary key,
  `title` varchar(255) not null,
  `coment` text not null,
  `vote` float(3) not null,         
  `ident_video` int(11) unsigned not null,
  `ident_user` int(11) unsigned not null,      
  `status` smallint(1) unsigned not null,
   foreign key (`ident_video`) references `video`(`ident_video`)
   on delete cascade on update cascade,
   foreign key(`ident_user`) references `user`(`ident_user`)
   on delete cascade on update cascade
)engine=InnoDB default charset=utf8 collate=utf8_spanish_ci;

Images
Years ago images were used in all aspects of a web page, their drawback is their size, with large HTTP requests. With which the CSS Sprites technique was born to reduce, speed, performance and make it easier to display by referring through CSS to images that are reusable.

.icono-facebook, .icono-twitter {
    background-image: url('./ruta-sprite.png') no-repeat;
    height: 64px;
}
.icono-facebook {
    width: 60px;
    background-position: 0 0;
}
.icono-twitter {
    width: 112px;
    background-position: -72px 0;
}

Icon Fonts
Making use of icon fonts today is very easy, there are great popular libraries such as Font Awesome Icon, IcoMoon, Elegant Icon Font and some that I left.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<i class="fa fa-facebook-official" aria-hidden="true"></i>

SVG
Currently very popular in the design world. SVG stands for Scalable Vector Graphics.

<svg>
  <path id="#mi-icono" d="m50,100..."></path>
</svg>

Now my question:

1. What advantages and disadvantages do each have?
2. What would be the best technique to insert icons to a web page?

Taking into account quality, performance and speed.

I put an analysis to my question, we imagine that we have a loginwhere the user logs in, and is redirected to a page protected by a session. The protected page could look something like:

if (isset($_SESSION['usuario'])) {  
    if (!filter_var($_SESSION['usuario'] ?: '', FILTER_VALIDATE_INT) === false) {
          $id_usuario = $_SESSION['usuario'] ?: '';
    } else {        
          //Destruimos sesion.
         session_destroy();
         //Redirigimos a login.
         header('location: tulogin.php');
         exit();
    }   
} else { //Caso Falso, Redirigimos a login.
    header('location: tulogin.php');
    exit();
}

Now comes my question, is there any way to protect files from downloads on the protected page by users who are not logged in or are not registered.

<a href="http://descargar.php/archivo_winrar.rar">Descargar</a>

Since if one obtains the address of our website, they URLcould download said content without having access. A practical example with explanation would be interesting, thanks in advance.

We consider that the variable $foocontains a string with value hello world . My question is: how could one check if it $foocontains the word world and throw a echo?

$foo = 'Hola mundo';

if($foo contiene 'mundo') {
  echo 'True';
}

I am creating a shopping cart system, which works very well, now the problem comes where it shows the results of the cart ( cesta.php), I want to show results regardless of what the user has inserted in the cart, to make it easier if they want to buy more products.

Let's say if we add 3 products to buy, with id1, id2, id3.

And in the Database ( productos) there are 6 records.

Well, it should show id4, id5, id6, since as I mentioned before, the user has already entered to buy the id1, id2, id3.

I save the shopping cart in a session as follows:

I create the shopping cart on the pagecard.php

 //Carro de la compra

//Si esta definida la ID obtenido por URL
if (isset($_GET['articulo'])) {

    $id_tutorial = $_GET['articulo'];//Obtenemos el ID del tutorial añadido, para poder acer comprobaciones a mostrar otros resultados.

    //Si esta definido la sesion carro -> es decir si ay algun articulo comprado
    if (isset($_SESSION['carrito'])) {

        $arreglo = $_SESSION['carrito'];
        $encontro = false;      

        for ($i=0; $i<count($arreglo); $i++) { 

            if ($arreglo[$i]['Id'] == $_GET['articulo']) {
                $encontro = true;               
            }
        }

        if ($encontro == false) {


            $titulo = "";
            $precio = 0;
            $precioUSD = 0;
            $icon = "";

            $stmt = $c->prepare("SELECT titulo,precio,icon,id_autor FROM tutoriales WHERE page=? and status=1");
            $stmt->bind_param("i",$_GET['articulo']);
            $stmt->execute();
            $stmt->store_result();
            if ($stmt->num_rows > 0) {
                $stmt->bind_result($titulo,$precio,$icon,$id_autor);
                while ($stmt->fetch()) {

                    //Sentencia prepare -> autor proyecto
                    $stmtN = $c->prepare("SELECT autor FROM autor WHERE id_autor=?");           
                    $stmtN->bind_param("i", $id_autor);         
                    $stmtN->execute();          
                    $stmtN->bind_result($autor);            
                    $stmtN->fetch();            
                    $stmtN->close();

                    $datosnuevos = array('Id' => $_GET['articulo'], 'Titulo' => $titulo, 'Precio' => $precio, 'Icon' => $icon, 'Cantidad' => 1 );

                    /*
                        #Si se utiliza array_push() para añadir un solo elemento al array, es mejor utilizar $array[] = ya que de esta forma no existe la sobrecarga de llamar a una función. 
                    */

                    //array_push($arreglo, $datosnuevos); 
                    $arreglo[] = $datosnuevos;
                    $_SESSION['carrito'] = $arreglo;

                    $data = $_SESSION['carrito'];
                    $value_carrito = count($data);
                    $_SESSION['compras'] = $value_carrito;

                } $stmt->close();


            } else {
                $stmt->close();
            }
        }   

    } else { //Caso falso añadimos primer articulo al carro

        $titulo = "";
        $precio = 0;
        $precioUSD = 0;
        $icon = "";

        $stmt = $c->prepare("SELECT titulo,precio,icon,id_autor FROM tutoriales WHERE page=? and status=1");
        $stmt->bind_param("i",$_GET['articulo']);
        $stmt->execute();
        $stmt->store_result();
        if ($stmt->num_rows > 0) {
            $stmt->bind_result($titulo,$precio,$icon,$id_autor);
            while ($stmt->fetch()) {

                //Sentencia prepare -> autor proyecto
                $stmtN = $c->prepare("SELECT autor FROM autor WHERE id_autor=?");           
                $stmtN->bind_param("i", $id_autor);         
                $stmtN->execute();          
                $stmtN->bind_result($autor);            
                $stmtN->fetch();            
                $stmtN->close();

            } $stmt->close();

        } else {
            $stmt->close();
        }       

            $arreglo[] = array('Id' => $_GET['articulo'], 'Titulo' => $titulo, 'Precio' => $precio, 'Icon' => $icon, 'Cantidad' => 1 );

            $_SESSION['carrito'] = $arreglo;

            $data = $_SESSION['carrito'];
            $value_carrito = count($data);
            $_SESSION['compras'] = $value_carrito;

            //echo "<script>window.location.reload();</script>";


    }

}