File "index.php"

Full Path: /home/custbahd/tourismfraternity.com/admin/blogs/video-blogs/index.php
File size: 16.02 KB
MIME-type: text/x-php
Charset: utf-8

<?php
    session_start();
    include_once('../../db/saucerer.php');

  // Define variables and initialize with empty values
$id = $name = $token = $access = "";
$id_err = $name_err = $token_err = $access = "";
 
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] != true){

  $loggedin = "";

  header("location: ../../secure");
    exit;
  
    
} elseif(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] == true){

  $loggedin = $_SESSION['loggedin'];
  $id = $_SESSION['id'];
  $token = $_SESSION['token'];


// of college_data table 

$sql = "SELECT * FROM secure WHERE token='$token'"; 

$result = $conn->query($sql); 

  
// Display data on web page 

while($row = mysqli_fetch_array($result)) { 

  $id = $row['id'];
  $name = $row['name'];
  $token = $row['token'];

}
    
}


// Generating a random number
date_default_timezone_set('Africa/Kampala');
$today = date("His-dmY",time());

$code1 = rand(1,9); 
$code2 = rand(1,9);
$code3 = $code1 * $code2; 
$tokens = "$code3-$today";
?>

<!doctype html>
<html lang="en">
    <head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Admin | Tourism Fraternity Network &copy;</title>

    <meta name="description" content="A premier online listing for businesses and travelers">

    <link rel="shortcut icon" type="image/x-icon" href="../../../assets/images/favicon.png" />


 <!-- Social Share Data -->

    <meta content="text/html; charset=utf-8" name="Content-Type">

     <meta property="og:type" content="article">

    <meta property="og:image" content="https://tourismfraternity.com/assets/images/card/1.png">

    <!--  Less than 65 characters -->
    <meta property="og:title" content="Admin | Tourism Fraternity Network &copy;">

    <meta property="og:url" content="https://camonitor.online/Tourism/admin">

 <!--  Less than 300 characters -->
    <meta property="og:description" content="A premier online listing for businesses and travelers">

    <meta property="og:site_name" content="Admin | Tourism Fraternity Network &copy;">
    
    <!-- Twitter Cards -->

    <meta name="twitter:card" content="summary_large_image">

    <meta name="twitter:url" content="https://camonitor.online/Tourism/admin">

    <meta name="twitter:title" content="Admin | Tourism Fraternity Network &copy;">

    <meta name="twitter:description" content="A premier online listing for businesses and travelers">

    <meta name="twitter:image" content="https://tourismfraternity.com/assets/images/card/1.png">

    <meta name="twitter:site" content="@tourism_fraternity_network">

    <meta name="twitter:creator" content="@iann_thecreator">


        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="../../css/bootstrap.css">
        <link rel="stylesheet" href="../../vendors/linericon/style.css">
        <link rel="stylesheet" href="../../css/font-awesome.min.css">
        <link rel="stylesheet" href="../../vendors/owl-carousel/owl.carousel.min.css">
        <link rel="stylesheet" href="../../vendors/bootstrap-datepicker/bootstrap-datetimepicker.min.css">
        <link rel="stylesheet" href="../../vendors/nice-select/css/nice-select.css">
        <link rel="stylesheet" href="../../vendors/owl-carousel/owl.carousel.min.css">
        <!-- main css -->
        <link rel="stylesheet" href="../../css/style.css">
        <link rel="stylesheet" href="../../css/responsive.css">

    <!--Animations-->
    <link rel="stylesheet" type="text/css" href="../../css/animations/style.css"> 

    <!--Fontawesome 6-->
    <link href="../../css/fontawesome/css/all.css" rel="stylesheet">  

    <link href="../../css/datatable/dataTable.bootstrap.min.css" rel="stylesheet">  

<style type="text/css">
    

/*Upload Wrapper*/
    
.upload-wrapper {
    width: 100%;
    border-radius: 10px;
}

.upload-btn-wrapper input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
  font-size: 100px;
  width: 100%;
  height: 90%;
  opacity: 0;
  z-index: 9;
}

.upload-btn-wrapper .btn {
    color: #fff;
    font-size: 12px;
    width: 100%;
    height: 65px;
    background: #77df40;
    border-radius: 6px;
}

.upload-btn-wrapper .btn i.fa-image {
    display: block;
    color: #fff;
    font-size: 12px;
}

.output_image1 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    border: none;
}

img.output_image1{
  width: 100%;
    height: 90%;
  object-fit: cover;
}




/*Custom File Input*/
.file {
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  position: absolute;
}

.file-input label {
  display: block;
  position: relative;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(40deg,#174899,#164798,#92A9CF);
   background-size: 400% 400%;
    -webkit-animation: gradient 8s ease infinite;
            animation: gradient 8s ease infinite;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  transition: transform .2s ease-out;
}

.file-input p {
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 12px;
  color: #555;
  font-weight: normal;
}

.file-input input:hover + label,
.file-input input:focus + label {
  transform: scale(1.02);
}

</style>


    </head>
    <body>
        <!--================Header Area =================-->
        <header class="header_area">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <a class="navbar-brand logo_h" href="../../../"><img src="../../../assets/images/logo/2.png" alt="Tourism Fraternity Network Logo"></a>

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
                        <ul class="nav navbar-nav menu_nav ml-auto">
                            <li class="nav-item"><a class="nav-link" href="../../">Admin</a></li> 
                            <li class="nav-item"><a class="nav-link" href="../../listings" >Listings</a></li> 
                            <li class="nav-item active"><a class="nav-link" href="../../blogs">Blogs</a></li>
                            <li class="nav-item"><a class="nav-link" href="../../events">Events</a></li>
                            <li class="nav-item"><a class="nav-link" href="../../inquiries">Inquiries</a></li>
                        </ul>
                    </div> 
                </nav>
            </div>
        </header>
        <!--================Header Area =================--> 
 
        
        <!--================ Blog Area Start =================-->
        <section class="latest_blog_area one section_gap">


<!--================ Session Handler Start =================-->
<div class="session_handler">
<?php
        if(isset($_SESSION['error'])){
          echo "<div class='alert alert-danger text-center'>
            <button class='close'>&times;</button>
            ".$_SESSION['error']."
          </div>";
          unset($_SESSION['error']);
        }
        if(isset($_SESSION['success'])){
          echo "<div class='alert alert-success text-center'>
            <button class='close'>&times;</button>
            ".$_SESSION['success']."
          </div>";
          unset($_SESSION['success']);
        }
      ?>
</div>
<!--================ Session Handler End =================-->

            <div class="container">

        <!--================ Add New =================--> 
        <div><a href="#addnew" data-toggle="modal" class="button_hover theme_btn_two text-white"><i class="fa fa-video"></i>&nbsp; Add Video Blog</a></div>

                <div class="section_title text-center">
                    <h2 class="title_color">VIDEO BLOGS</h2>
                    <p class="text-uppercase" style="font-size: 18px;">

<?php

    $sql = "SELECT COUNT(*) FROM blogs WHERE blog_type='Video' AND deleted=''";

    //use for MySQLi-OOP
    $query = $conn->query($sql);
    while($row = $query->fetch_assoc()){
        if ($row['COUNT(*)']==0) {
            echo "No video blogs found";
        } elseif ($row['COUNT(*)']==1) {
            echo "".number_format($row['COUNT(*)'])." Video Blog";
        } else {
            echo "".number_format($row['COUNT(*)'])." Video Blogs";
        }
    }

?>
                    </p>
                    <hr>
                </div>
                <div class="row mb_30">

                    
<?php

    $sql = "SELECT * FROM blogs WHERE blog_type='Video' AND deleted='' ORDER BY id DESC";

    //use for MySQLi-OOP
    $query = $conn->query($sql);
    while($row = $query->fetch_assoc()){

        echo '<div class="col-lg-4 col-md-6">';

        echo '<span id="nav_'.$row["id"].'"></span>';

                        echo '<div class="single-recent-blog-post">';
                            echo '<div class="thumb">';
                              echo '<video class="img-fluid one" controls><source src="videos/'.$row["vid1"].'"></video>';
                            echo '</div>';
                            echo '<div class="details" align="center">';
                                echo '<a href="#!"><h4 class="sec_h4">'.$row["title"].'</h4></a>';
                                echo '<p>'.$row["paragraph1"].'</p>';
                                echo '<a href="#edit_'.$row["id"].'" data-toggle="modal" class="button_hover theme_btn_two text-white mr-1"><i class="fa fa-edit"></i>&nbsp; Edit</a>';
                                echo '<a href="#delete_'.$row["id"].'" data-toggle="modal" class="button_hover theme_btn_two text-white ml-1"><i class="fa fa-trash"></i>&nbsp; Delete</a>';
                                echo '<hr>';
                            echo '</div>';  
                        echo '</div>';
                    echo '</div>';


//Edit Image Upload

echo "<script>

function preview_image_one_".$row['id']."(event) 
{
var reader = new FileReader();
reader.onload = function()
{
  var output = document.getElementById('output_image_one_".$row['id']."');
  output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}

function myFunction() { 
  document.getElementById('myFile".$row['id']."').required = false; 
}


function preview_image_two_".$row['id']."(event) 
{
var reader = new FileReader();
reader.onload = function()
{
  var output = document.getElementById('output_image_two_".$row['id']."');
  output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}

function myFunction() { 
  document.getElementById('myFile".$row['id']."').required = false; 
}


function preview_image_three_".$row['id']."(event) 
{
var reader = new FileReader();
reader.onload = function()
{
  var output = document.getElementById('output_image_three_".$row['id']."');
  output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}

function myFunction() { 
  document.getElementById('myFile".$row['id']."').required = false; 
}

</script>";

     include('modals/edit.php');

                }
?>

                </div>
            </div>
        </section>
        <!--================ Blog Area  End =================-->

        
        <!--================ start footer Area  =================-->    
        <footer class="footer-area section_gap">
            <div class="container">
                <div class="row footer-bottom d-flex justify-content-between align-items-center">
                    <div class="col-lg-3 col-sm-12 footer-social">
                        <a href="https://facebook.com/"><i class="fab fa-facebook"></i></a>
                        <a href="https://x.com/"><i class="fab fa-x-twitter"></i></a>
                        <a href="https://instagram.com/"><i class="fab fa-instagram"></i></a>
                        <a href="https://wa.me/256785196012"><i class="fab fa-whatsapp"></i></a>
                    </div>

                    <p class="col-lg-6 col-sm-12 footer-text m-0 text-center">
                      <a href="#">Tourism Fraternity Network</a> &copy; <script>document.write(new Date().getFullYear());</script>, All Rights Reserved<span class="flash">.</span></p>

                    <p class="col-lg-3 col-sm-12 footer-text m-0 text-center" style="font-size: 12px;">Powered by <a href="https://camonitor.online" target="_blank" style="color: #82848f;">Custom Assist Inc<span class="flash">.</span></a></p>

                </div>


            </div>

            
        </footer>
        <!--================ End footer Area  =================-->

<?php include('modals/add.php') ?>
        
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="../../js/jquery-3.2.1.min.js"></script>
        <script src="../../js/popper.js"></script>
        <script src="../../js/bootstrap.min.js"></script>
        <script src="../../vendors/owl-carousel/owl.carousel.min.js"></script>
        <script src="../../js/jquery.ajaxchimp.min.js"></script>
        <script src="../../js/mail-script.js"></script>
        <script src="../../vendors/bootstrap-datepicker/bootstrap-datetimepicker.min.js"></script>
        <script src="../../vendors/nice-select/js/jquery.nice-select.js"></script>
        <script src="../../js/mail-script.js"></script>
        <script src="../../js/stellar.js"></script>
        <script src="../../vendors/lightbox/simpleLightbox.min.js"></script>
        <script src="../../js/custom.js"></script>
        <script src="../../js/video-on-scroll.js"></script>

        <script src="../../js/datatable/jquery.dataTables.min.js"></script>
        <script src="../../js/datatable/dataTable.bootstrap.min.js"></script>

        <!-- Upload Image JS -->
        <script src="../../js/upload_img_script.js"></script>

<script>
$(document).ready(function(){
  //inialize datatable
    $('#myTable').DataTable();

    //hide alert
    $(document).on('click', '.close', function(){
      $('.alert').hide();
    })
});
</script>


<script>
    function displayVID1(input,_this) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#vid-field1').html("<video width='320' height='240' controls class='img-fluid'><source src='"+e.target.result+"'></video>");
                console.log(e.target.result)
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    function displayVID2(input,_this) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#vid-field2').html("<source src='"+e.target.result+"'>");
                console.log(e.target.result)
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    function displayImg(input,_this) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#vid-field1').attr('poster', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>



<script type="text/javascript">
//Image 1
const vid1 = document.querySelector('#vid1');
vid1.addEventListener('change', (e) => {
  // Get the selected file
  const [vid1] = e.target.files;
  // Get the file name and size
  const { name: fileName, size } = vid1;
  // Convert size in bytes to kilo bytes
  const fileSize = (size / 1000000).toFixed(2);
  // Set the text content
  const fileNameAndSize = `${fileName} - ${fileSize}MB`;
  document.querySelector('.file-name1').textContent = fileNameAndSize;
});
</script>

    </body>
</html>