pageglobale.php

<?php
include "./config/database.php";
include "header.php";
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  

<?php
$Username = $_GET["user"];
$result= $bdd->query("SELECT nom_artiste,tag_youtube,tag_instagram FROM `influenceurs` WHERE `nom_artiste` LIKE '$Username%' OR `tag_youtube` LIKE '$Username%' OR `tag_instagram` LIKE '$Username%' ORDER BY `nom_artiste`");
$name=$result->fetch();
$user1 =$name['tag_youtube'];
$user2=$name['tag_instagram'];

?>
<div class="text-center fadeInUp animated pt-4">
            <h1> Page globale de : <?php echo $name['nom_artiste'];?> </h1>
        </div>
    </header>
    <section class="one profil-info">
      <div >
            <h1> PROFIL INSTAGRAM </h1>
        </div>
    
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <img src="" class="profile-pic" style="border-radius:50%;position: relative;top:20px; left:25px; ">
                </div>
                <div class="col-md-9">
                    <h2 class="username" style="font-size: 30px;position: relative;top:15px; left:-10px;"></h2>
                    <br/>
                    <div class="row"style="margin-top:-10px; position: relative;top:15px; left:-10px;">
                        <div class="col-md-4" >
                            <span class="number-of-posts"></span> posts
                        </div>
                        <div class="col-md-4">
                            <span class="followers"></span> followers
                        </div>
                        <div class="col-md-4">
                            <span class="following"></span> following
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;">
                        <h4 class="name" style="margin-top:10px;position: relative;top:15px; left:5px;"></h4>
                    </div>
                    <div class="row">
                        <h4 class="biography"style="font-size:11px;position: relative;top:15px; left:8px;margin-top:10px;"></h4>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="one profil-photos">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h4>POSTS</h4>
                    <div class="divider"></div>
                    <div class="row posts">
                    </div>    
                </div>
            </div>
        </div>
    </section>

    <section class="one graphics" style="background-color:#efefef;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h4>Analyses statistiques de <?php echo $_GET['user'];?></h4>
                    <div class="divider"></div>  
                    <div id="chartContainer" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </section>

<script src="ressources/canvasjs/canvasjs.min.js"></script>

<script type="text/javascript">
function nFormatter(num){
    
    if(num >= 1000000){
        return (num/1000000).toFixed(1).replace(/\.0$/,'') + 'M';
    }
    if(num >= 1000){
        return (num/1000).toFixed(1).replace(/\.0$/,'') + 'K';
    }
    return num;
}
var tab=new Array();
var commentaire=new Array();
$.ajax({
    url:"https://www.instagram.com/<?php echo $user2;?>?__a=1",
    type:'get',
    dataType: 'json',
    Async : false,
    success:function(response){
    $(".profile-pic").attr('src',response.graphql.user.profile_pic_url);
    $(".name").html(response.graphql.user.full_name);
    $(".biography").html(response.graphql.user.biography);
    $(".username").html(response.graphql.user.username);
    $(".number-of-posts").html(response.graphql.user.edge_owner_to_timeline_media.count);
    $(".followers").html(nFormatter(response.graphql.user.edge_followed_by.count));
    $(".following").html(nFormatter(response.graphql.user.edge_follow.count));
    posts = response.graphql.user.edge_owner_to_timeline_media.edges;
    posts_html = '';
    for(var i=0;i<6;i++){
        url = posts[i].node.display_url;
        likes = posts[i].node.edge_liked_by.count;
        tab[i]=posts[i].node.edge_liked_by.count;
        commentaire[i]=posts[i].node.edge_media_to_comment.count;
        comments = posts[i].node.edge_media_to_comment.count;
        posts_html += '<div class="col-md-2 equal-height"><a href="'+url+'" target=_blank><img class="insta-photo" src="'+url+'"></a><div class="row like-comment"><div class="col-md-6"><i class="fas fa-heart"></i> '+nFormatter(likes)+' LIKES</div><div class="col-md-6 text-right"><i class="fas fa-comment-dots"></i> '+nFormatter(comments)+' COMMENTS</div></div></div>';
    }
    $(".posts").html(posts_html);
    var points = [];

    var chart = new CanvasJS.Chart("chartContainer", {
    backgroundColor: "transparent", //Couleur à changer (voir thème de la page)
    animationEnabled: true,
    theme: "theme2",
    title: {
        text: "Nombre de likes sur les 6 derniers posts",
        fontSize: 24,
        fontWeight: "normal",
        horizontalAlign: "center",
    },
    axisY: {
        title : "Likes",
        includeZero:true,
        lineThickness: 2
        
    },
    axisX: {
        title : "Posts (du plus récent au plus ancien)",
        labelAngle: -60,
    },
    data: [{
        type: "spline",
        markerType: "circle",
        color: "#df4e8e",
        dataPoints: points
    }
    ]});

    function addPoints(){
        points.push({y: tab[0],
        label: 'Post 1'});
        points.push({y: tab[1],
        label: 'Post 2'});
        points.push({y: tab[2],
        label: 'Post 3'});
        points.push({y: tab[3],
        label: 'Post 4'});
        points.push({y: tab[4],
        label: 'Post 5'});
        points.push({y: tab[5],
        label: 'Post 6'});
        chart.options.data[0].dataPoints = points;
        chart.render();
    }
    addPoints();
    }
});
</script>

<?php
$Username = $user1;
$api_key = "AIzaSyARTHdxCjdGqr74cGU1cd0DGwgLnQJ3Xls";
//$api_key = "AIzaSyDHVEM0wpvM5x1q06r12GcXYYjplhBBo4A";
?>
<section class="one profil-info-yt">
  <div >
            <h1> PROFIL YOUTUBE </h1>
        </div>
    
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <img src="images/profile-image.png" class="profile-pic" style="border-radius:50%;top:20px; left:25px; ">
      </div>
      <div class="col-md-9">
        <h2 class="username" style="font-size: 30px;position: relative;top:15px; left:-10px;">
        <?php
          //AccountName
          $api_AccountName = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername='.$Username.'&fields=items/snippet/title&key='.$api_key);
          $api_AccountName_decoded = json_decode($api_AccountName, true);
          echo $api_AccountName_decoded['items'][0]['snippet']['title'];
          ?>
        </h2>
        <br/>
        <div class="row"style="margin-top:-10px; position: relative;top:15px; left:-10px;">
          <div class="col-md-4" >
            <span class="number-of-posts">
            <?php
            $api_info_account = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=statistics&forUsername='.$Username.'&key='.$api_key);
            $api_info_account_decoded = json_decode($api_info_account, true);
            //VideoCount
            echo $api_info_account_decoded['items'][0]['statistics']['videoCount'];
            ?>
            </span> video posts
          </div>
          <div class="col-md-4">
            <span class="followers">
              <?php
            //SubscriberCount
                  // $api_subscribercount = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=statistics&forUsername='.$Username.'&fields=items/statistics/subscriberCount&key='.$api_key);
                  // $api_subscribercount_decoded = json_decode($api_subscribercount, true);
                  echo $api_info_account_decoded['items'][0]['statistics']['subscriberCount'];?>
              </span> subscribers
          </div>
          <div class="col-md-4">
            <span class="views">
            <?php
            //ViewCount
            // $api_ViewCount = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=statistics&forUsername='.$Username.'&fields=items/statistics/viewCount&key='.$api_key);
            // $api_ViewCount_decoded = json_decode($api_ViewCount, true);
            echo $api_info_account_decoded['items'][0]['statistics']['viewCount'];
            ?>
            </span> views
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="one yb-videos">
  <div class="container">
    <h4>VIDEOS</h4>
    <div class="divider"></div>
        <?php

      //ProfilePic
      //$api_ProfilePic = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername='.$Username.'&fields=items/snippet/thumbnails/default&key='.$api_key);
      //$api_ProfilePic_decoded = json_decode($api_ProfilePic, true);
      //$img= $api_ProfilePic_decoded['items'][0]['snippet']['thumbnails']; 
      //echo "<img src='$img'>"; 

      //ChannelID 
      $api_ChannelID = file_get_contents('https://www.googleapis.com/youtube/v3/channels?key='.$api_key.'&forUsername='.$Username.'&part=id');
      $api_ChannelID_decoded = json_decode($api_ChannelID, true);
      //Get Last 6 Video Posts
      $channelID  = $api_ChannelID_decoded['items'][0]['id']; 
      $maxResults = 6;
      $videoList = json_decode(file_get_contents('https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId='.$channelID.'&maxResults='.$maxResults.'&key='.$api_key.''));
      $c = 1;
      $tableau_likes = array();
      $tableau_dislikes = array();
      $tableau_views = array();
      foreach($videoList->items as $item){

          //Video Post
          if(isset($item->id->videoId)){ ?>
              <?php if ($c%3 == 1)  {
                echo "<div class='row'>";
              } ?>
              <div class="col-md-4">
                <div class="Youtube Video">
                  <div class="row">
                    <div class="col-sm-12">
                      <h5 class="yt-videos-title"><?=$item->snippet->title?></h5>
                    </div>
                  </div>
                  <iframe width="100%" height="300" src="https://www.youtube.com/embed/<?=$item->id->videoId?>" frameborder="0" allowfullscreen></iframe>
                </div>
                <?php        
                //recuperer les infos de la video
                $api_video_infos = file_get_contents('https://www.googleapis.com/youtube/v3/videos?part=snippet%2Cstatistics&id='.$item->id->videoId.'&key='.$api_key.'');
                $api_video_infos_decoded = json_decode($api_video_infos, true);
                ?>
                <div class="row like-comment">
                  <div class="col-md-4">
                    <!-- likes -->
                    <i class="fas fa-thumbs-up"></i>
                    <?=$api_video_infos_decoded['items'][0]['statistics']['likeCount'];?>
                    likes
                    <?php 
                        array_push($tableau_likes,$api_video_infos_decoded['items'][0]['statistics']['likeCount']);?> 
                  </div>
                  <div class="col-md-4 text-center">
                    <!-- DislikeCount -->
                    <i class="fas fa-thumbs-down"></i>
                    <?=$api_video_infos_decoded['items'][0]['statistics']['dislikeCount'];?>
                    dislikes
                    <?php 
                        array_push($tableau_dislikes,$api_video_infos_decoded['items'][0]['statistics']['dislikeCount']);?> 
                  </div>
                  <div class="col-md-4 text-right">
                    <!-- VideoViewCount -->
                    <i class="fas fa-eye"></i>
                    <?=$api_video_infos_decoded['items'][0]['statistics']['viewCount'];?>
                    views 
                    <?php 
                        array_push($tableau_views,$api_video_infos_decoded['items'][0]['statistics']['viewCount']);?> 
                  </div>
                </div>
              </div>
              <?php if ($c%3 == 0)  {
                echo "</div>";
              } 
              $c=$c+1;?>
              
              
              


          <?php
          }
      }
     
// print_r(  $tableau_dislikes );
// print_r($tableau_likes); 
      ?>
       
      </div>
    </div>
  </div>
</section>
</div>
<section class="one graphics" style="background-color:white;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h4>Analyses statistiques 
                    </h4>
                    <div class="divider"></div>  
                    <div id="chart1Container" style="height: 400px; width: 100%;"></div>
                    <div class="divider"></div>
                    <div id="chartContainerLike" style="height: 400px; width: 100%;"></div>
                    <div class="divider"></div>
                    <div id="chartContainerViews" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </section>
<script src="ressources/canvasjs/canvasjs.min.js"></script>
<script type="text/javascript"> 
tableau_likes_js = <?php echo json_encode($tableau_likes) ?>;
tableau_dislikes_js = <?php echo json_encode($tableau_dislikes) ?>;
tableau_views_js = <?php echo json_encode($tableau_views) ?>;
/*----------------Graph ratio like/dislike-------------------*/
var points1 = [];
    var chart1 = new CanvasJS.Chart("chart1Container", {
    backgroundColor: "transparent ", //Couleur à changer (voir thème de la page)
    animationEnabled: true,
    theme: "theme2",
    title: {
        text: "Ratio de likes/dislikes sur les 6 dernières vidéos",
        fontSize: 24,
        fontWeight: "normal",
        horizontalAlign: "center",
    },
    axisY: {
        title : "Ratio",
        includeZero:true,
        lineThickness: 2
        
    },
    axisX: {
        title : "Videos (de la plus récente à la plus ancienne)",
        labelAngle: -60,
    },
    data: [{
        type: "spline",
        markerType: "circle",
        color: "#df4e8e",
        dataPoints: points1,
    }
    ]});

    function addPoints1(){
       points1.push({y: tableau_likes_js[0]/tableau_dislikes_js[0],
        label: 'Video 1'});
        points1.push({y: tableau_likes_js[1]/tableau_dislikes_js[1],
        label: 'Video 2'});
        points1.push({y: tableau_likes_js[2]/tableau_dislikes_js[2],
        label: 'Video 3'});
        points1.push({y: tableau_likes_js[3]/tableau_dislikes_js[3],
        label: 'Video 4'});
        points1.push({y: tableau_likes_js[4]/tableau_dislikes_js[4],
        label: 'Video5'});
        points1.push({y: tableau_likes_js[5]/tableau_dislikes_js[5],
        label: 'Video 6'});
      chart1.options.data[0].dataPoints = points1;
      chart1.render();
    }
    addPoints1();

    /*---------------Graph like dislike--------------------*/
    var chartLike = new CanvasJS.Chart("chartContainerLike", {
    backgroundColor: "transparent ", //Couleur à changer (voir thème de la page)
    animationEnabled: true,
    theme: "theme2",
    title: {
        text: "Nombre de likes et dislikes sur les 6 dernières vidéos",
        fontSize: 24,
        fontWeight: "normal",
        horizontalAlign: "center",
    },
    axisY: {
        title : "Likes",
        titleFontColor: "#4F81BC",
        lineColor: "#4F81BC",
        labelFontColor: "#4F81BC",
        tickColor: "#4F81BC"
    },
    axisY2: {
      title: "Dislikes",
      titleFontColor: "#C0504E",
      lineColor: "#C0504E",
      labelFontColor: "#C0504E",
      tickColor: "#C0504E"
    },
    axisX: {
        title : "Videos (de la plus récente à la plus ancienne)",
        labelAngle: -60,
    },
    legend: {
        cursor: "pointer",
        // itemclick: toggleDataSeries
      },
    data: [{
        type: "column",
        color: "#4F81BC",
        showInLegend: true,
        name: "Likes",
        dataPoints: [
          { label: "Video 1", y: parseInt(tableau_likes_js[0]) },
          { label: "Video 2", y: parseInt(tableau_likes_js[1]) },
          { label: "Video 3", y: parseInt(tableau_likes_js[2]) },
          { label: "Video 4", y: parseInt(tableau_likes_js[3]) },
          { label: "Video 5", y: parseInt(tableau_likes_js[4]) },
          { label: "Video 6", y: parseInt(tableau_likes_js[5]) }
          ],
    },
    {
        type: "column",
        name: "Dislikes",
        color: "#C0504E" ,
        showInLegend: true,
        axisYType: "secondary",
        dataPoints: [
          { label: "Video 1", y: parseInt(tableau_dislikes_js[0]) },
          { label: "Video 2", y: parseInt(tableau_dislikes_js[1]) },
          { label: "Video 3", y: parseInt(tableau_dislikes_js[2]) },
          { label: "Video 4", y: parseInt(tableau_dislikes_js[3]) },
          { label: "Video 5", y: parseInt(tableau_dislikes_js[4]) },
          { label: "Video 6", y: parseInt(tableau_dislikes_js[5]) }
          ]
      }
    ]
  });
    chartLike.render();

  /*----------------Graph views-------------------*/
    var chartViews = new CanvasJS.Chart("chartContainerViews", {
    backgroundColor: "transparent ", //Couleur à changer (voir thème de la page)
    animationEnabled: true,
    theme: "theme2",
    title: {
        text: "Nombre de vues sur les 6 dernières vidéos",
        fontSize: 24,
        fontWeight: "normal",
        horizontalAlign: "center",
    },
    axisY: {
        title : "Vues",
        includeZero:true,
        lineThickness: 2
        
    },
    axisX: {
        title : "Videos (de la plus récente à la plus ancienne)",
        labelAngle: -60,
    },
    data: [{
        type: "spline",
        markerType: "circle",
        color: "#df4e8e",
        dataPoints: [
          { label: "Video 1", y: parseInt(tableau_views_js[0]) },
          { label: "Video 2", y: parseInt(tableau_views_js[1]) },
          { label: "Video 3", y: parseInt(tableau_views_js[2]) },
          { label: "Video 4", y: parseInt(tableau_views_js[3]) },
          { label: "Video 5", y: parseInt(tableau_views_js[4]) },
          { label: "Video 6", y: parseInt(tableau_views_js[5]) }
          ],
    }
    ]});
    chartViews.render();


    </script>
 


<?php   
include "footer.php"
?>