~NAXC~

File Content: `addadvertisement.php`

<?php 
ob_start();
?>
<?php 
	session_start(); 

	if (!isset($_SESSION['username'])) {
		$_SESSION['msg'] = "You must log in first";
		header('location: login.php');
	}

	if (isset($_GET['logout'])) {
		session_destroy();
		unset($_SESSION['username']);
		header("location: login.php");
	}

?>

<?php include "assets/includes/functions.php";?>


<?php include "assets/includes/header.php";?>
<style type="text/css">
    h2 {
    text-align: center;
}
.img_preview img{
border: #E0E0E0 1px solid;
}
#selectImage {
    display: inline-block;
    border: #3d843e 1px solid;
    position: relative;
    background-color: #48944b;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: center;
    padding: 10px 50px;
}
#imgChange input[type="file"] {
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}
.progress-bar {
    font-family: Arial;
    font-size: 0.95em;
    padding: 3px 0px 0px 0px;
    width: 200px;
    margin: 10px auto;
    border: #E0E0E0 1px solid;
}
.progress-bar .bar {
    background-color: #FFA500;
    width: 0%;
    height: 4px;
}
.progress-bar .percent {
    display: inline-block;
    text-align: center;
    width: 100%;
}
</style>
<!-- Page content start -->
<div class="page-contentbar">

<!--left navigation start-->
<?php include "assets/includes/sidebar.php";?>
<!--left navigation end-->

<!-- START PAGE CONTENT -->

<div id="page-right-content">
    <div class="container">
        <div class="row">

            <div class="col-md-7"><br>
        <!-- =============================== -->
                <div class="panel panel-color panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Add Advertisements</h3>
                    </div>

                    <div class="panel-body" >
                        <div class="container" id="addmember">
                            <input type="hidden" id="imgw" value="" >
                            <input type="hidden" id="imgh" value="" >

                            <p class="statusMsg"></p>
                            <form  enctype="multipart/form-data"  id="add_name" method="post">
                                <input type="hidden" id="imgsmall" name="imgsmall" value="">
                                <input type="hidden" id="imgmedium" name="imgmedium" value="">
                                <input type="hidden" id="imglarge" name="imglarge" value="">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label for="userName">Position<span class="text-danger"></span></label>
                                            <select name="Postmaincategory" class="form-control" id="Postmaincategory" required="">
                                                <option value="" disabled selected>Select</option>          
                                                <option value="left-main">left-main</option>
                                                <option value="left-sub">left-sub</option>
                                                <option value="right-gallery">right-gallery</option>         
                                            </select>
                                        </div> 
                                    </div>
                                </div>


                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label for="PostTitle<span Class=required>*</span>" class="col-md-3 control-label">Title<span Class=required  style='color:#F00;'> * </span></label>  
                                            <input name="PostTitle" class="form-control" maxlength="256" type="text" id="PostTitle"  required=""/>
                                        </div> 
                                    </div>
                                </div>


                                <div class="form-group">
                                    <div class="row">
                                        <div  class="col-md-12">
                                            <label for="userName">Status<span class="text-danger"></span></label>
                                            <select class="form-control select2" name="istatus" id="istatus" style="font-family:inherit;width:100%; height:50px; float:left; padding:5px; line-height:40px; text-align:left;"  required="" >
                                                <option value="Active">Active</option>
                                                <option value="Inactive">Inactive</option>
                                            </select> 
                                        </div>
                                    </div>
                                </div> 


                                <div class="form-group text-right m-b-0">
                                    <input type="submit" name="submit" class="btn btn-primary submitBtn" value="Submit"/>
                                    <button type="button" name="cancel" id="cancel" class="btn btn-default waves-effect m-l-5">
                                    Cancel
                                    </button>
                                </div>
                                <?php
                                if(isset($_POST['submit']))
                                {

                                    $maincategory=$_POST["Postmaincategory"];
                                    $PostTitle=$_POST["PostTitle"];
                                    $status=$_POST["istatus"];
                                    date_default_timezone_set ("Asia/Calcutta");
                                    $postdate= date("M d,Y h:i:s a");
                                    $PostImagelarge=$_POST["imglarge"];
                                    $PostImagemedium=$_POST["imgmedium"];
                                    $PostImagesmall=$_POST["imgsmall"];
                                    // if ($PostImage == "" || empty($PostImage))
                                    // {
                                    // $image_text = "";
                                    // }else {
                                    // $target = "assets/images/adds/".basename($_FILES['file']['name']);
                                    // move_uploaded_file($_FILES['file']['tmp_name'], $target);   
                                    // }

                                    $sql = "INSERT INTO adds (position,image,heading,newsdate,status,picthumbnail,picthumbnailsmall) values
                                    ('".mysqli_real_escape_string($connection, $maincategory)."','".mysqli_real_escape_string($connection, $PostImagelarge)."','".mysqli_real_escape_string($connection, $PostTitle)."','".mysqli_real_escape_string($connection, $postdate)."','".mysqli_real_escape_string($connection, $status)."','".mysqli_real_escape_string($connection, $PostImagemedium)."','".mysqli_real_escape_string($connection, $PostImagesmall)."')";

                                    if ($connection->query($sql) === TRUE) {
                                        echo "New record created successfully";
                                        header("Location: advertisements.php");
                                    } else {
                                        echo "Error: " . $sql . "<br>" . $connection->error;
                                    }

                                }
                                ?>   
                            </form>
                        </div>
                    </div>
                </div>
            </div> 
            <div class="col-md-5">
               <br>
                <div class="panel panel-color panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Add Advertisement Picture Here   [  Required ]</h3>
                    </div>

                    <div class="panel-body" >
                        <div class="container">
                            <div class="row">
                                    <form enctype="multipart/form-data" action="image_upload_submit_adds.php"
                                    method="post" name="image_upload_form" id="image_upload_form">
                                        <p>Please Select your image for this news</p>
                                        <div id="selectImage">
                                            <div id="imgChange">
                                                <span>Choose Image</span> <input type="file" class="form-control" accept="image/*"
                                                name="image_file_input" id="image_file_input"  required="">
                                            </div>
                                        </div>
                                        <br>
                                        <div class="progress-bar">
                                            <div class="percent">0%</div>
                                            <div class="bar"></div>
                                        </div>
                                    </form>
                                </div><hr><hr>
                                <div class="row">
                                    <p>Create three images of dimension...185 x 180 , 300 x 250 , 368 x 300</p>   
                                    <div class="img_preview" id="image-holder" style="display: none">
                                        <img width="100" height="80" id="small-preview" src="#"
                                        alt="small image" /> <br><br><img width="150" height="130"
                                        id="medium-preview" src="#" alt="medium image" /> <br><br>
                                         <img width="200"
                                        height="180" id="large-preview" src="#" alt="big image" />
                                    </div>
                                </div>
                        </div> 
                    </div>
                </div> 
            </div>
        </div>          
    </div>
      <!-- end container -->              

    
   
                    <div class="footer">
                        <div class="pull-right hidden-xs">
                            Project Completed <strong class="text-custom">99%</strong>.
                        </div>
                        <div>
                            <strong>C Media</strong> - Copyright &copy; 2021
                        </div>
                    </div> <!-- end footer -->

        </div>
        <!-- End #page-right-content -->

    </div>
    <!-- end .page-contentbar -->
</div>
<!-- End #page-wrapper -->



        <!-- js placed at the end of the document so the pages load faster -->
        <script src="assets/js/jquery-2.1.4.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/metisMenu.min.js"></script>
        <script src="assets/js/jquery.slimscroll.min.js"></script>

        <script src="assets/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
        <script src="assets/plugins/select2/js/select2.min.js" type="text/javascript"></script>
        <script src="assets/plugins/bootstrap-filestyle/js/bootstrap-filestyle.min.js" type="text/javascript"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>
        <script type="text/javascript" src="assets/plugins/parsleyjs/parsley.min.js"></script>

        <script src="assets/plugins/moment/moment.js"></script>
     	<script src="assets/plugins/timepicker/bootstrap-timepicker.js"></script>
     	<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
     	<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
     	<script src="assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js"></script>
     	<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
        <script src="assets/plugins/summernote/summernote.min.js"></script>

        <!-- form advanced init js -->
        <script src="assets/pages/jquery.form-advanced.init.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- App Js -->
         <script src="assets/js/jquery.app.js"></script> 
         <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/jquery/jquery.form.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('.form-validation').parsley();
                $('.summernote').summernote({
                    height: 350,                 // set editor height
                    minHeight: null,             // set minimum height of editor
                    maxHeight: null,             // set maximum height of editor
                    focus: false                 // set focus to editable area after initializing summernote
                });
            });
        </script>
        <script type="text/javascript">
        $(document).ready(function(){
         
            
            $("#l1").show();
            $("#l2").hide();
            $("#l3").hide();

            $('#Postmaincategory').change(function(){
                var location_id = $('#Postmaincategory').val();

                if(location_id =="left-main")
                {
                    $("#l1").show();
                    $("#l2").hide();
                   $("#l3").hide();
                   $("#imgw").val("368");
                   $("#imgh").val("300");
                }
                else if(location_id =="left-sub")
                {
                    $("#l1").hide();
                    $("#l2").show();
                    $("#l3").hide();
                    $("#imgw").val("300");
                    $("#imgh").val("250");
                }
                else
                {
                     $("#l1").hide();
                    $("#l2").hide();
                    $("#l3").show();
                     $("#imgw").val("185");
                    $("#imgh").val("180");

                }
            })
        });
    </script>

 <script>
$(document).ready(function(e){
    $('#cancel').delegate('','click change',function(){
    window.location = "advertisements.php";
    return false;
});
});
</script>      
  <!-- ===================     -->
 <script>
    function checkFileDetails() {
  
        var fi = document.getElementById('PostImage');
        if (fi.files.length > 0) {      // FIRST CHECK IF ANY FILE IS SELECTED.
 
            for (var i = 0; i <= fi.files.length - 1; i++) {
                var fileName, fileExtension, fileSize, fileType, dateModified;

                // FILE NAME AND EXTENSION.
                fileName = fi.files.item(i).name;
                fileExtension = fileName.replace(/^.*\./, '');

                // CHECK IF ITS AN IMAGE FILE.
                // TO GET THE IMAGE WIDTH AND HEIGHT, WE'LL USE fileReader().
                if (fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'jpeg') {
 
                   readImageFile(fi.files.item(i));             // GET IMAGE INFO USING fileReader().
                }
                else {
                    // IF THE FILE IS NOT AN IMAGE.
                        
                    fileSize = fi.files.item(i).size;  // FILE SIZE.
                    fileType = fi.files.item(i).type;  // FILE TYPE.
                    dateModified = fi.files.item(i).lastModifiedDate;  // FILE LAST MODIFIED.

                    document.getElementById('fileInfo').innerHTML =
                        document.getElementById('fileInfo').innerHTML + '<br /> ' +
                            'Name: <b>' + fileName + '</b> <br />' +
                            'File Extension: <b>' + fileExtension + '</b> <br />' +
                            'Size: <b>' + Math.round((fileSize / 1024)) + '</b> KB <br />' +
                            'Type: <b>' + fileType + '</b> <br />' +
                            'Last Modified: <b>' + dateModified + '</b> <br />';
                }
            }

            // GET THE IMAGE WIDTH AND HEIGHT USING fileReader() API.
            function readImageFile(file) {
   
                var reader = new FileReader(); // CREATE AN NEW INSTANCE.
                var imgw = $('#imgw').val();
                var imgh = $('#imgh').val();
                reader.onload = function (e) {
                    var img = new Image();      
                    img.src = e.target.result;

                    img.onload = function () {
                        var w = this.width;
                        var h = this.height;
                    if (w == imgw  && h== imgh){
                        document.getElementById('fileInfo').innerHTML =
                            document.getElementById('fileInfo').innerHTML + '<br /> ' +
                                'Name: <b>' + file.name + '</b> <br />' +
                                'File Extension: <b>' + fileExtension + '</b> <br />' +
                                'Size: <b>' + Math.round((file.size / 1024)) + '</b> KB <br />' +
                                'Width: <b>' + w + '</b> <br />' +
                                'Height: <b>' + h + '</b> <br />' +
                                'Type: <b>' + file.type + '</b> <br />' +
                                'Last Modified: <b>' + file.lastModifiedDate + '</b> <br />';
                            }else
                            {
                               
                                alert("Image Dimension Should be " + imgw + " x " + imgh)
                                 $("#PostImage").val('');
            return false;
                            }
                    }
                };
                reader.readAsDataURL(file);
            }
        }
    }
</script>
<script>
$(document).on('change', '#image_file_input', function () {   
    var progressBar = $('.progress-bar');
    var bar = $('.progress-bar .bar'); 
    var percent = $('.progress-bar .percent');
    var percentVal;
    $('#image_upload_form').ajaxForm({
        beforeSend: function() {
                progressBar.fadeIn();
            percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        success: function(html, statusText, xhr, $form) {
            obj = $.parseJSON(html);    
                if(obj.status){     
                    percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    $("#imgsmall").val(obj.small);
                    $("#imgmedium").val(obj.medium);
                    $("#imglarge").val(obj.large);
                    $("#small-preview").prop('src',obj.smallpath);      
                    $("#medium-preview").prop('src',obj.mediumpath);        
                    $("#large-preview").prop('src',obj.largepath);      
                    $(".img_preview").show();   
                }    
        }
    }).submit();        

});
</script>


    </body>
</html> 
    
    
   <?php 
ob_end_flush();
?>
File Content: addadvertisement.php

File Content: `addadvertisement.php`
