name : edit_setting_images.php
<?php session_start(); 
if(isset($_SESSION['status']) != 1  || isset($_SESSION['stauts_login']) != 1 ){
  header("Location:index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Dashboard</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="dist/css/AdminLTE.css">
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<style>
 .padding_top{
        padding-top:10px;
      }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<?php include('layout/header.php'); ?>
<?php include('layout/sidebar.php'); ?>
<div class="content-wrapper">
    <section class="content">
    <h2>Set Images</h2>
              <hr/>
      <div class="row">
      <?php 
        include('../config/config.php');
        $sql = "SELECT * FROM projects WHERE p_id = ".$_GET['q']." ";
        $res = $conn->query($sql);
        while($row = $res->fetch_assoc()){
          $l_id = $row['p_l_id'];
          $q = $row['p_id'];
      ?>
        <div class="col-md-6">
        <h3>Project Name : <?php echo $row['p_name']; ?></h3>
        <h5>Location : <?php echo $row['p_location']; ?></h5>
        <form id="setting_images" method="post" enctype="multipart/form-data" >
        <div id="error_setting_images"></div>
        <hr/>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>Images No.1</label><span class="text-danger">|  **image size : 1200px * 790px</span>
                <input type="file" name="image1" id="image1"  class="form-control" >
                
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>Images No.2</label><span class="text-danger">|  **image size : 850px * 1150px</span>
                <input type="file" name="image2" id="image2"  class="form-control" >
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>Images No.3</label><span class="text-danger">|  **image size : 1200px * 790px</span>
                <input type="file" name="image3" id="image3"  class="form-control" >
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>Images No.4</label><span class="text-danger">|  **image size : 1200px * 790px</span>
                <input type="file" name="image4" id="image4"  class="form-control" >
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>Images No.5</label><span class="text-danger">|  **image size : 1200px * 790px</span>
                <input type="file" name="image5" id="image5"  class="form-control" >
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <input type="hidden" name="q" id="q"  class="form-control" value="<?php echo $row['p_id']; ?>">
                <input type="hidden" name="pro_name" id="pro_name"  class="form-control" value="<?php echo $row['p_name']; ?>">
                <button class="btn btn-primary" type="submit">Update</button>
                <a href="edit_project.php?q=<?php echo $row['p_id']; ?>" class="btn btn-danger" >Cancel</a>
              </div>
            </div>
          </div>
        </form>
        </div>
        <?php } ?>
        <div class="col-md-6">
        <h3>Layout No. 1</h3>
        <?php 

              include('../config/config.php'); 
              $sql3 = "SELECT * FROM project_details WHERE p_pd_id = ".$_GET['q']." limit 1"; 
              $res3 = $conn->query($sql3);
            ?>
              <div class="row">
                <?php while($row3 = $res3->fetch_assoc()){ ?>
                  <div class="col-md-<?php echo $row3['pd_position']; ?> padding_top" ><img   src="<?php echo "../".$row3['im_pd_id']; ?>" class="img-responsive hideme"/></div>
                <?php }  ?>
            <?php
              include('../config/config.php'); 
              $sql3 = "SELECT * FROM project_details WHERE p_pd_id = ".$_GET['q']." limit 1,4"; 
              $res3 = $conn->query($sql3);
            ?>
              <?php while($row3 = $res3->fetch_assoc()){ ?>
                  <div class="col-md-<?php echo $row3['pd_position']; ?> padding_top" ><img  width ='100%'  src="<?php echo "../".$row3['im_pd_id']; ?>"  class="img-responsive hideme"/></div>
                <?php }  ?>
              </div>
        </div>
      </div>
    </section>
  </div>
  <!-- /.content-wrapper -->
  <?php include('layout/aside.php') ?>
  <div class="control-sidebar-bg"></div>
</div>

</body>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="dist/js/adminlte.min.js"></script>
<script src="dist/js/pages/dashboard.js"></script>
<script src="dist/js/demo.js"></script>
<script src="dist/js/jquery.validate.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script>
  $('#setting_images').validate({
      submitHandler: function(form) {
        var file_data1 = $('#image1').prop('files')[0];   
        var file_data2 = $('#image2').prop('files')[0];   
        var file_data3 = $('#image3').prop('files')[0];   
        var file_data4 = $('#image4').prop('files')[0];   
        var file_data5 = $('#image5').prop('files')[0];   
        var q = $('#q').val();  
        var pro_name = $('#pro_name').val();  
        var form_data = new FormData();          
        form_data.append('file1', file_data1);
        form_data.append('file2', file_data2);
        form_data.append('file3', file_data3);
        form_data.append('file4', file_data4);
        form_data.append('file5', file_data5);
        form_data.append('q', q );
        form_data.append('pro_name', pro_name );
        $.ajax({
            url: "update_setting_images.php",
            dataType: 'text', 
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
        }).done(function(data){
          console.log(data);
          if(data == 1){
            $("#error_setting_images").html('<div class="alert alert-success"><strong>Success! </strong>Add Images Detail Project.</div>').fadeIn(1000).delay(3000).fadeOut(function(){ window.location.href="project_list.php" }); 
              $("#setting_images")[0].reset();
          }else if(data == 0){
            $("#error_setting_images").html("<div class='alert alert-danger'>Not Complete</div>").fadeIn(1000).delay(1000).fadeOut(1000);
              return false;
          }else{
            $("#error_setting_images").html("<div class='alert alert-danger'>Amount exceeds the limit</div>").fadeIn(1000).delay(1000).fadeOut(1000);
              $("#setting_images")[0].reset();
              return false;
          }
        });
      }
    });

    var _URL = window.URL || window.webkitURL;
    $("#image1").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
          var width = this.width;
          var height = this.height;
          if((width != 1200) || (height != 790)){
            $("#error_setting_images").html("<p class='alert alert-danger'>Plases Select Images size 1200px * 790px </p> ").fadeIn(1000).delay(3000).fadeOut(1000);
              $("#image1").val("");
              return false;
            }
        };
        img.src = _URL.createObjectURL(file);
    }
    });

    $("#image2").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
          var width = this.width;
          var height = this.height;
          if((width != 850) || (height != 1150)){
            $("#error_setting_images").html("<p class='alert alert-danger'>Plases Select Images size 850px * 1150px </p> ").fadeIn(1000).delay(3000).fadeOut(1000);
              $("#image2").val("");
              return false;
            }
        };
        img.src = _URL.createObjectURL(file);
    }
    });

    $("#image3").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
          var width = this.width;
          var height = this.height;
          if((width != 1200) || (height != 790)){
            $("#error_setting_images").html("<p class='alert alert-danger'>Plases Select Images size 1200px * 790px </p> ").fadeIn(1000).delay(3000).fadeOut(1000);
              $("#image3").val("");
              return false;
            }
        };
        img.src = _URL.createObjectURL(file);
    }
    });

    $("#image4").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
          var width = this.width;
          var height = this.height;
          if((width != 1200) || (height != 790)){
            $("#error_setting_images").html("<p class='alert alert-danger'>Plases Select Images size 1200px * 790px </p> ").fadeIn(1000).delay(3000).fadeOut(1000);
              $("#image4").val("");
              return false;
            }
        };
        img.src = _URL.createObjectURL(file);
    }
    });

    $("#image5").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
          var width = this.width;
          var height = this.height;
          if((width != 1200) || (height != 790)){
            $("#error_setting_images").html("<p class='alert alert-danger'>Plases Select Images size 1200px * 790px </p> ").fadeIn(1000).delay(3000).fadeOut(1000);
              $("#image5").val("");
              return false;
            }
        };
        img.src = _URL.createObjectURL(file);
    }
  });
</script>
</html>

© 2024 UnknownSec