Verification of videos per user

Asked

Viewed 161 times

-3

I’m developing a website to show videos inserted by users.

For that I did with you:

 $(document).ready(function () {

    var videoContainer_monitor = $("#video_monitor");
    var codigoVideo_monitor = $videos;
    $('#video_monitor').hide();

  $("#video_pendente").click(function(){
    $('#video_monitor').show();
    videoContainer_monitor.html(`
    <iframe class="embed-responsive-item" width="700" height="450" src="https://www.youtube.com/embed/${codigoVideo_monitor}" frameborder="0" allowfullscreen></iframe>`);
      })
  });

By clicking the html button on the page:

<button type="button" id="video_pendente" class="btn btn-secondary btn-sm">Videos pendentes</button>

But there in '$videos' I want you to select based on the videos entered by the user who is logged in to the site.

Below is the image of the comic book.

BD

The videos that could appear, would have to be respective to the field "monitor" which serves to identify the monitor. And then select all fields "link_video". How do I check the logged in user and show their respective registered videos? (It can be with php too, not necessarily with js).

I didn’t understand the negative evaluations, which is to say no if you don’t comment. how we’re going to change the questions.. That’s why so many people are leaving the flow to another platform.

1 answer

-2


Hello, Matheus!

Well, I don’t know if I understand the problem well, but I prepared a script to demonstrate how you can fetch the pending videos from a logged-in user. You can see it with the codes below:

Database:

-- MySQL dump 10.13  Distrib 5.7.29, for Linux (x86_64)
--
-- Host: localhost    Database: videos_stackoverflow
-- ------------------------------------------------------
-- Server version   5.7.29-0ubuntu0.18.04.1

/*!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 utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `videos`
--

DROP TABLE IF EXISTS `videos`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `videos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nomecomp` varchar(100) NOT NULL,
  `urlvideo` varchar(255) NOT NULL,
  `descricao` text,
  `pendente` tinyint(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `videos`
--

LOCK TABLES `videos` WRITE;
/*!40000 ALTER TABLE `videos` DISABLE KEYS */;
INSERT INTO `videos` VALUES (1,'matheus','https://www.youtube.com/watch?v=8iNczzhZmbc','video 1',0),(2,'matheus','https://www.youtube.com/watch?v=8iNczzhZmbc','video 2',0),(3,'matheus','https://www.youtube.com/watch?v=8iNczzhZmbc','video 3 - PENDENTE',1),(4,'matheus','https://www.youtube.com/watch?v=8iNczzhZmbc','video 4 - PENDENTE',1),(5,'macario','https://www.youtube.com/watch?v=8iNczzhZmbc','video 5',0),(6,'macario','https://www.youtube.com/watch?v=8iNczzhZmbc','video 6 - PENDENTE',1),(7,'macario','https://www.youtube.com/watch?v=8iNczzhZmbc','video 7 - PENDENTE',1),(8,'macario','https://www.youtube.com/watch?v=8iNczzhZmbc','video 8 - PENDENTE',1),(9,'macario','https://www.youtube.com/watch?v=8iNczzhZmbc','video 9 - PENDENTE',1);
/*!40000 ALTER TABLE `videos` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!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 */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2020-04-13  9:22:05

Index.php

<?php

    $servidor = 'localhost';
    $usuario  = 'root';
    $senha    = '';
    $banco    = 'videos_stackoverflow';
    $conexao  = mysqli_connect($servidor, $usuario, $senha, $banco);

    $consulta = "SELECT
                    *
                FROM
                    videos
                WHERE
                    videos.nomecomp     = 'macario'
                    AND videos.pendente = 1";

    $resultados       = mysqli_query($conexao, $consulta);
    $videos_pendentes = array();

    while ($video = mysqli_fetch_assoc($resultados))
        $videos_pendentes[] = $video;

    mysqli_free_result($resultados);
    mysqli_close($conexao);

    $videos_pendentes = json_encode($videos_pendentes);

?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vídeos Pendentes</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h1 style="margin-top: 60px;">Listar vídeos pendentes</h1>
                <p>Por favor, clique no botão abaixo para listar os vídeos pendentes de um monitor.</p>
                <button id="btn-lista-videos-tabela"   class="btn btn-primary">Mostrar em tabela</button>
                <button id="btn-lista-videos-carousel" class="btn btn-primary">Mostrar em Carousel</button>
            </div>
        </div>

        <div class="row" style="margin-top: 60px;">
            <div class="col-md-8 col-md-offset-2">
                <table id="tabela-videos" class="table" style="display: none;">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Monitor</th>
                            <th>URL</th>
                            <th>Descrição</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-videos-corpo">
                        <!-- Nada aqui, por enquanto -->
                    </tbody>
                </table>


                <div id="carouselExampleIndicators" class="carousel slide" style="display: none;" data-ride="carousel">
                    <ol id="carousel-indicadores" class="carousel-indicators"></ol>
                    <div id="carousel-itens" class="carousel-inner"></div>

                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Anterior</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Próximo</span>
                    </a>
                </div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script>

        $(document).ready(function() {            
            const videos_pendentes = JSON.parse(<?php echo json_encode($videos_pendentes) ?>);

            $('#btn-lista-videos-tabela').click(function() {
                let html = '';

                if (videos_pendentes.length > 0) {
                    videos_pendentes.forEach(function(video) {
                        html += '<tr>';
                        html += '   <td>' + video.id        + '</td>';
                        html += '   <td>' + video.nomecomp  + '</td>';
                        html += '   <td>' + video.urlvideo  + '</td>';
                        html += '   <td>' + video.descricao + '</td>';
                        html += '</tr>';
                    });


                    $('#tabela-videos-corpo').html( html );
                    $('#tabela-videos').show();

                } else {

                    alert('Nenhum vídeo pendente');

                }
            });



            $('#btn-lista-videos-carousel').click(function() {
                let itens       = '';
                let indicadores = '';

                if (videos_pendentes.length > 0) {

                    videos_pendentes.forEach(function(video, indice) {
                        indicadores += '<li data-target="#carouselExampleIndicators" data-slide-to="' + indice + '" class="' + (indice == 0? 'active' : '') + '"></li>'

                        itens += '<div class="carousel-item ' + (indice == 0? 'active' : '') + '">';
                        itens += '    <iframe  width="700" height="450" src="'+ video.urlvideo +'" frameborder="0" allowfullscreen></iframe>'; 
                        itens += '</div>';

                    });

                    console.log(indicadores);

                    $('#carouselExampleIndicators').show();
                    $('#carousel-indicadores').html( indicadores );
                    $('#carousel-itens').html( itens );

                } else {

                    alert('Nenhum vídeo pendente');

                }
            });


            $('.carousel').carousel();

        });

    </script>
</body>
</html>

In summary I created a very simplified database and inserted some records. I put two "nomecomps" as monitors of these videos. The names of these monitors are matheus and macario.

Suppose the way to identify the logged in user is by "nomecomp", then when loading the screen that shows the pending videos, you should already have consulted which are these videos, applying the restrictions you want. Finally, you can launch the videos viewed in the database by PHP, in a JS variable, as shown in line 90 of the index.php file.

If you have any questions, comment here.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.