~NAXC~

File Content: `addpost.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>
<style>
            input[type="file"] {
			display: block;
			}
			.imageThumb {
			max-height: 75px;
			border: 2px solid;
			padding: 1px;
			cursor: pointer;
			}
			.pip {
			display: inline-block;
			margin: 10px 10px 0 0;
			}
			.remove {
			display: block;
			background: #444;
			border: 1px solid black;
			color: white;
			text-align: center;
			cursor: pointer;
			}
			.remove:hover {
			background: white;
			color: black;
			}
    	</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 Heading News   [ <span class="required" style="text-align: right"> *</span>= Required ]</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-6">
                                    <label for="userName"> Main Category<span class="text-danger"></span></label>
                                    <select name="Postmaincategory" class="form-control" id="Postmaincategory" required="">
                                        <option value="" disabled selected>Select</option>          
                                        <option value="Top Stories">Top Stories</option>
                                        <option value="Sub Stories">Sub Stories</option>       
                                    </select>
                                </div> 
                                <div class="col-md-6">
                                    <label for="userName"> News Category<span class="text-danger"></span></label>
                                    <select name="PostCategoryId" class="form-control" id="PostCategoryId" required="">
                                        <option value="" disabled selected>Select</option>
                                        <?php
                                        $sql = "SELECT * FROM category";
                                        $result = $connection->query($sql);
                                        if ($result->num_rows > 0) {
                                        while($row = $result->fetch_assoc()) {
                                        ?>
                                        <option value="<?php echo $row['category']  ?>"><?php echo $row['category']  ?></option>
                                        <?php
                                        }}
                                        ?>
                                    </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="PostTitle<span Class=required>*</span>" class="col-md-5 control-label">Keywords / URL<span Class=required  style='color:#F00;'> * </span></label>  
                                     <input class="form-control" type="text" name="pslug" placeholder="URL / slug / Keyword" id="pslug"   oninput="myFunction();"  onfocusout="slugcheck();">
                                    <input class="form-control" type="text" name="slugstatus" id="slugstatus" readonly >
                                </div> 
                            </div>
                        </div>
                     <!--    <div class="form-group">
                            <div class="row">
                                <div class="col-md-12">
                                    <label for="PostImage<spanClass=required></span>" id="l1" class="col-md-3 control-label">Image<span Class=required  style='color:#F00;'> * </span>[ size: 586 x 490 ]</label> 
                                    <label for="PostImage<spanClass=required></span>" id="l2" class="col-md-3 control-label" style="display: none;">Image<span Class=required  style='color:#F00;'> * </span>[ size: 293 x 245 ]</label>  
                                    <input type="file" name="file" class="form-control" id="PostImage"  onchange="checkFileDetails()" required=""/>
                                </div> 
                            </div>
                        </div> -->
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-12">
                                    <label for="PostContent<spanClass=required>*</span>" class="col-md-3 control-label">Content<span Class=required> * </span></label>
                                     <br> <span > [ Use the ' www.example.com ' or ' https://www.example.com ' format for giving website links.] </span>
                                    <textarea name="PostContent" class="form-control" rows="12" cols="30" id="PostContent" required="" style="white-space: pre-wrap; text-indent: 50px;"></textarea>
                                </div>
                            </div>
                        </div>
                        <!-- ================================================= -->
                        <div class="form-group">
                            <div class="row">
                                <h6 class="txt-dark capitalize-font">Upload News Images here</h6>
                                <span>click here to upload pictures [ Upload atleast 2 photos of your news ]</span>
                                <div class="col-md-12">
                                    <!-- =============================== -->
                                    <input class="field form-control" type="file" name='files[]' id="files"  accept="image/x-png,image/gif,image/jpeg,image/webp"  multiple >
                                    <div id='preview'></div>
                                    <!-- ============================================= -->
                                </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']))
                        {
                            $category=$_POST["PostCategoryId"];
                            $maincategory=$_POST["Postmaincategory"];
                            $PostTitle=$_POST["PostTitle"];
                            $PostContent=$_POST["PostContent"];
                            $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"];
                              // =========================
                                         $output3 =nl2br($PostContent);
                                         $string = linkify($output3);
                                         $fstring=makeClickableLinks($string);
                                           $output1 = $fstring;
                            
                            //  $output3 =nl2br($PostContent);
                            //         $fstring = preg_replace('@(https?://([-\w\.]+[-\w])+(:\d+)?(/([\w/_\.#-]*(\?\S+)?[^\.\s])?)?)@', '<a href="$1" target="_blank">$1</a>', $output3);
                            //         $sstring =  preg_replace('@([0-9]{10})@', '<a href="tel:+91$1">$1</a>', $fstring);
                            //         $output1 = $sstring;
                                    
                            $Postslug="";
                            if (isset($_POST["pslug"])){
                            $Postslug=$_POST["pslug"];}
                            // if ($PostImage == "" || empty($PostImage))
                            // {
                            // $image_text = "";
                            // } {
                            // $target = "assets/images/posts/".basename($_FILES['file']['name']);
                            // move_uploaded_file($_FILES['file']['tmp_name'], $target);   
                            // }

                            $sql = "INSERT INTO headingnews (category,heading,newspic,newsdate,newscontent,status,maincategory,picthumbnail,picthumbnailsmall,slug) values
                            ('".mysqli_real_escape_string($connection, $category)."','".mysqli_real_escape_string($connection, $PostTitle)."',
                            '".mysqli_real_escape_string($connection, $PostImagelarge)."','".mysqli_real_escape_string($connection, $postdate)."',
                            '".mysqli_real_escape_string($connection, $output1)."','".mysqli_real_escape_string($connection, $status)."',
                            '".mysqli_real_escape_string($connection, $maincategory)."','".mysqli_real_escape_string($connection, $PostImagemedium)."',
                            '".mysqli_real_escape_string($connection, $PostImagesmall)."','".mysqli_real_escape_string($connection, $Postslug)."')";

                            if ($connection->query($sql) === TRUE) {
                                echo "New record created successfully";
                                $last_id = $connection->insert_id;
                                if ($Postslug=="")
                                {
                                        $sqlup="update headingnews set slug='". mysqli_real_escape_string($connection,$last_id)."'
                                    WHERE id = {$last_id}";
                                    if ($connection->query($sqlup) === TRUE) {
                                    
                                        } else {
                                        echo "Error: " . $sqlup . "<br>" . $connection->error;
                                        }

                                }
                                
                                              // =======================================
                                $upload_dir = 'uploads/extranewspics/' ;
                                $allowed_types = array('jpg', 'png', 'jpeg', 'gif');
                                $maxsize = 2 * 1024 * 1024;

                                foreach ($_FILES['files']['name'] as $key => $value) {
 if(!empty($_FILES['files']['tmp_name'][$key])) {
                                    $file_tmpname = $_FILES['files']['tmp_name'][$key];
                                    $file_name1 = $_FILES['files']['name'][$key];
                                    $file_size = $_FILES['files']['size'][$key];
                                    $file_ext = pathinfo($file_name1, PATHINFO_EXTENSION);
                                    // $file = pathinfo($_FILES['files']['tmp_name'][$key]);

                                    $file_name=rand(222, 888) . time() . $file_name1;
                                      $filepath = $upload_dir . $file_name;
                                      echo  $filepath ;
                                      if ($file_size > $maxsize) {
                                            echo "File size should not exceed 2 MB";
                                      }  
                                      if ($file_size < $maxsize) {

                                            $filepath = $upload_dir . $file_name;
                                            if (move_uploaded_file($file_tmpname, $filepath)) {
                                                echo "{$file_name} successfully uploaded <br />";
                                            } else {
                                                echo "{$file_name} not uploaded <br />";
                                            }
                                      }
                    
                                      $sql = "INSERT INTO news_extra_pics (newsid,newstype,imgname,created) values
                                      ('" . mysqli_real_escape_string($connection, $last_id) . "','Heading News',
                                      '" . mysqli_real_escape_string($connection, $file_name) . "','" . mysqli_real_escape_string($connection, $postdate) . "')";
                          
                                          if ($connection->query($sql) === true) {
                                              echo "Images created successfully";}
                                              else {
                                                echo "Error: " . $sql . "<br>" . $connection->error;
                                            }	
 }
                                }

                                // ===================================
                                
                                header("Location: headingnews.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 Heading News Picture Here   [  Required ]</h3>
            </div>

            <div class="panel-body" >
                <div class="container">
                    <div class="row">
                            <form enctype="multipart/form-data" action="image_upload_submit_head.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...293 x 245 , 586 x 490 , 770 x 380</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="container" style="border: 2px;background-color: lightblue;width:586px;height:490px;">
        <img src="../images/image01.jpg" style="width:100%;height:100%">
   
   </div> -->
    
   
                    <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();


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

                if(location_id =="Top Stories")
                {
                    $("#l1").show();
                    $("#l2").hide();
                    $("#imgw").val("586");
                               $("#imgh").val("490");
                }
                else
                {
                    $("#l1").hide();
                    $("#l2").show();
                     $("#imgw").val("293");
                               $("#imgh").val("245");
                }
            })
        });
        
        
          function myFunction()// TO REPLACE SPACE WITH HIPEN
        {
        var str = $('#pslug').val(); 
        var res = str.split(' ').join('-');
        $('#pslug').val(res);
        }


        function slugcheck()
        {
            var x =  $('#pslug').val();
            var y ="headingnews";
            var input = {
                            "pid" : x,
                            "tname" : y
                        };
            console.log(input);

                $.ajax({
                            url : 'ajaxslugcheck.php',
                            type : 'POST',
                            data : input,
                            success : function(response)
                             {
                              
                              if (response=="Slug Exist"){
                                var ut = "";
                                $('#pslug').val(ut);
                                $('#slugstatus').val(response);
                                $('#pslug').focus();
                                }else {
                                    $('#slugstatus').val("Congrats. Added new slug");
                                }
                              
                            }
                        });

        }
    </script>

 <script>
$(document).ready(function(e){
    $('#cancel').delegate('','click change',function(){
    window.location = "headingnews.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>
<script type="text/javascript">
    $(document).ready(function() {
        function readFileAsText(file){
            return new Promise(function(resolve,reject){
                let fr = new FileReader();

                fr.onload = function(){
                    resolve(fr.result);
                };

                fr.onerror = function(){
                    reject(fr);
                };

                fr.readAsText(file);
            });
        }
        if (window.File && window.FileList && window.FileReader) {

            $("#files").on("change", function(e) {
                fileName123 = Array.from(this.files).map(({name}) => name + '<br/>');
                var files = e.target.files,
                filesLength = files.length;
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i]
                    var fgh=fileName123[i];
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        console.log(file);
                        $("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + e.target.result + "\"   data-fileid=\"" + e.target.result + "\"/>").insertAfter("#files");


                        $(".remove").click(function(){
                            $(this).parent(".pip").remove();
                        });
                    });
                    fileReader.readAsDataURL(f);

                }
            console.log(files);
            });


        } else {
            alert("Your browser doesn't support to File API")
        }


    });
</script>
    </body>
</html> 
    
    
   <?php 
ob_end_flush();
?>
File Content: addpost.php

File Content: `addpost.php`
