Updating a HTML page With PHP From Admin Panel

Question

I am using Custom PHP. I have a HTML Page https://wefeed.com.au/office-catering.html I have an admin panel from where i want to edit this page like we do in Wordpress. But i want only to edit the Text/Headings and Pictures. I am basically confused how to achieve that. Like these

Make a single form in admin panel, where i put every detail that i need to edit on front end page. But the problem here is, i know how to upload one image with one submit request, but as there are 7 to 10 images in the page, i don't know how to handle that.
Should i update the page section wise. I mean Call the top section as Section 1, Cal the mid section of page as Section 2 and so on.

A better guide is needed please.

Just to better explain. As i need to give user an option to create the locations first and then can edit if needed.

<form class="form-sample" method="post" action="procc_create_loc.php" enctype="multipart/form-data">
                                
    <p class="card-description">
       Main Top Section
    </p>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">City Name</label>
    <input type="text" name="loc_name" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Main Heading</label>
    <input type="text" name="main_h" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Main Paragraph</label>
    <input type="text" name="main_p" class="form-control">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputPassword1">Image</label>
    <input type="file" class="form-control" name="pic" id="exampleInputPassword1">
    </div>
                                    
    <!-- Section Two -->
    <h5 class="card-title">Section Two</h5>
    <div class="form-group">
    <label for="exampleInputEmail1">Sub Heading</label>
    <input type="text" name="s2_subH" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Heading</label>
    <input type="text" name="s_H" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
    <!-- Section Two -->
                                    
    <!-- Section Three -->
    <h5 class="card-title">Section Three</h5>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Sub Heading</label>
    <input type="text" name="s3_subH" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Heading</label>
    <input type="text" name="s3_H" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Paragraph</label>
    <input type="text" name="s3_p" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Image</label>
    <input type="file" name="s3_img" class="form-control" id="exampleInputEmail1" >
    </div>
    <!-- Section Three -->
                                    
    <!-- Section Four -->
    <h5 class="card-title">Section Four</h5>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Sub Heading</label>
    <input type="text" name="s4_subH" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Heading</label>
    <input type="text" name="s4_H" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Paragraph</label>
    <input type="text" name="s4_p" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Image</label>
    <input type="file" name="s4_img" class="form-control" id="exampleInputEmail1" >
    </div>
    <!-- Section Four -->
                                    
    <!-- Section Five -->
    <h5 class="card-title">Section Five</h5>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Sub Heading</label>
    <input type="text" name="s5_subH" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Heading</label>
    <input type="text" name="s5_H" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Paragraph</label>
    <input type="text" name="s5_p" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Image</label>
    <input type="file" name="s5_img" class="form-control" id="exampleInputEmail1" >
    </div>
    <!-- Section Five -->
                                    
    <!-- Section Six -->
    <h5 class="card-title">Section Six</h5>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Sub Heading</label>
    <input type="text" name="s6_subH" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Heading</label>
    <input type="text" name="s6_H" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Paragraph</label>
    <input type="text" name="s6_p" class="form-control" id="exampleInputEmail1" placeholder="Sydney">
    </div>
                                    
    <div class="form-group">
    <label for="exampleInputEmail1">Image</label>
    <input type="file" name="s6_img" class="form-control" id="exampleInputEmail1" >
    </div>
    <!-- Section Six -->
                                    
    <input type="submit" name="create_locations" class="btn btn-primary" value="Create Locations">
                                    
    </form>

Thank you

https://stackoverflow.com/questions/2704314/multiple-file-upload-in-php shows you how to upload multiple files. There are also many other tutorials already available online showing the same thing. — ADyson, Dec 27 '21 at 23:51
Thanks ADyson. This is not what i am looking for. I know how to upload multiple pictures from one input field. But i have around 7 to 10 input fields to upload images, each image goes into separate section of HTML Block — Syed Hassan Mujtaba Zaidi, Dec 27 '21 at 23:55
Ok. So what exactly is the problem with that? As long as they all have distinct `name` attributes then php will be able to receive each one — ADyson, Dec 27 '21 at 23:57
Edited the question that i think one of solution might work. As user needs to create the location first and then can edit if needed — Syed Hassan Mujtaba Zaidi, Dec 28 '21 at 00:14
Ok. It's still not stating what your specific _problem_ is though. To be clear, stack overflow isn't going to help you design a whole feature... we'll assist you with a particular issue or question you may have about some element of your code — ADyson, Dec 28 '21 at 09:07

score 1 · Answer 1 · answered Jan 01 '22 at 23:37

I have done with this way.

<?php
include "include/config.php";
if(isset($_POST['create_locations'])){

    $loc_name           = $_POST['loc_name'];
    $main_h             = $con -> real_escape_string($_POST['main_h']);
    $main_p             = $con -> real_escape_string($_POST['main_p']);
    
    $s2_subH            = $con -> real_escape_string($_POST['s2_subH']);
    $s_H                = $con -> real_escape_string($_POST['s_H']);
    
    $s3_subH            = $con -> real_escape_string($_POST['s3_subH']);
    $s3_H               = $con -> real_escape_string($_POST['s3_H']);
    $s3_p               = $con -> real_escape_string($_POST['s3_p']);
    
    $s4_subH            = $con -> real_escape_string($_POST['s4_subH']);
    $s4_H               = $con -> real_escape_string($_POST['s4_H']);
    $s4_p               = $con -> real_escape_string($_POST['s4_p']);
    
    $s5_subH            = $con -> real_escape_string($_POST['s5_subH']);
    $s5_H               = $con -> real_escape_string($_POST['s5_H']);
    $s5_p               = $con -> real_escape_string($_POST['s5_p']);
    
    $s6_subH            = $con -> real_escape_string($_POST['s6_subH']);
    $s6_H               = $con -> real_escape_string($_POST['s6_H']);
    $s6_p               = $con -> real_escape_string($_POST['s6_p']);
        
     $file="../assets/images/locations/";
        
        $main_img       = $name=$_FILES['main_img']['name'];
        $temp_path      = $_FILES['main_img']['tmp_name'];
        move_uploaded_file($temp_path,$file.$main_img);
        
        $s3_img         = $name=$_FILES['s3_img']['name'];
        $temp_path      = $_FILES['s3_img']['tmp_name'];
        move_uploaded_file($temp_path,$file.$s3_img);
        
        $s4_img         = $name=$_FILES['s4_img']['name'];
        $temp_path      = $_FILES['s4_img']['tmp_name'];
        move_uploaded_file($temp_path,$file.$s4_img);
        
        $s5_img         = $name=$_FILES['s5_img']['name'];
        $temp_path      = $_FILES['s5_img']['tmp_name'];
        move_uploaded_file($temp_path,$file.$s5_img);
        
        $s6_img         = $name=$_FILES['s6_img']['name'];
        $temp_path      = $_FILES['s6_img']['tmp_name'];
        move_uploaded_file($temp_path,$file.$s6_img);
        
        include "inc/image.inc.php";
    
        create_thumbnail('images/'.$img, '../assets/images/locations/'.$img, 450, 249);
        //$comp = unlink('images/'.$img);

    $insertQuery = mysqli_query($con,"INSERT INTO locations VALUE(
    '',
    '$loc_name',
    '$main_h',
    '$main_p',
    '$main_img',
    '$s2_subH',
    '$s_H',
    '$s3_subH',
    '$s3_H',
    '$s3_p',
    '$s3_img',
    '$s4_subH',
    '$s4_H',
    '$s4_p',
    '$s4_img',
    '$s5_subH',
    '$s5_H',
    '$s5_p',
    '$s5_img',
    '$s6_subH',
    '$s6_H',
    '$s6_p',
    '$s6_img',
    '',
    '',
    '',
    '',
    ''
     )"); 
    
    if($insertQuery){
    $_SESSION['success']= "<h4 style='color:#ed2324; align:center'>Location created successfully!</h4>";
    echo '<script>window.location.href = "create_locations.php";</script>';
    }else{
    echo 'Something Went Wrong. Please Try Again!';
    }
}
?>

Monsquid · Answer 2 · 2021-12-28T00:08:40.723

For your multiple images upload, personally I'd just use multiple file inputs, with some javascript you can create multiple file inputs when clicking on a button like this:

<form method="POST" enctype='multipart/form-data'>
    <div id="fileInputsContainer"></div>
    <input type="hidden" id="fileInputsIndex" name="fileInputsIndex" value="0" />
    <a href="#" onclick="createFileInput()">Create input</a>
</form>

A JS function that creates inputs inside the container (with jQuery) :

<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
function createFileInput() {
    let index = parseInt($("#fileInputsIndex").val());
    let inputHTML = "<input type='file' name='uploadedImage-" + index + "'><br />";
    $("#fileInputsContainer").append(inputHTML);
    index += 1;
    $("#fileInputsIndex").val(index);
}
</script>

Now that you have a generator for unique file inputs, you can handle them with PHP by doing a for loop with fileInputsIndex :

<?php 
$fileInputsIndex = $_POST["fileInputsIndex"];
for ($i = 0; $i < $fileInputsIndex; $i++) {
    $anUploadedFile = $_FILES["uploadedImage-$i"]; // Do whatever you want with the file.
}
?>

Hi. Thanks Monsquid. Can you look at my form and suggest – Syed Hassan Mujtaba Zaidi Dec 28 '21 at 00:53 — Syed Hassan Mujtaba Zaidi, Dec 28 '21 at 00:53

Updating a HTML page With PHP From Admin Panel

2 Answers2