asked on

FInalizing my project

I now have two pages. A Searchpage and a Presentation- and upload page.

Searchpage: http://kroweb.dk/gfdev/gravsten_raw/

Presentation/upload page: http://kroweb.dk/gfdev/dataupload/

Both these pages works fine as it is now. The presentation/upload page uploads the entered data in the dataform to a new record in the database, and it uploads an image to a specified folder on the server.

When entering a searchstring e.g.”Lyng” on the Searchpage, it returns a list of results, where entries in the first column (with the headline “Sogn”) links to the Presentation/upload page.

The task now, is to get these two pages to work together, and to create the right common functionality.

(From here I need help to create the right code)

Clicking the link that opens the Presentation/upload page should do two things:

1.      Grab the id of the selected record from the “id” column in the database
2.      Retrieve and insert in the headline of the updateform (where it says …. ‘Sogn’ right now), the entry in the row “Sogn” in the actual record in the db. And at the same time retrieve data, if any is present, from the rows “navn”, “tlf”, “email” and “besked” in the database and insert them in the appropriate fields in the form. Finally it should display images, if any present, tied to the specific record on the page (see also bullet 2. Below).

Furthermore I need to use the id for:

1.      Use in an SQL update query like: $sql = "UPDATE my_table SET name='name in form', email=’email in form’, ‘tlf in form’, ‘besked in form’ WHERE id=grabbed id"; in order to update the actual record with the update data. This should execute when clicking the Update button on the Presentation/upload page.
2.      Create a subfolder named by the id for uploading imagefiles belonging to this record. When uploading an image the row “image_table” in the DB should be updated with the URL to that folder ( I am not sure if this is the best/right way to do this, and I am certainly open to other suggestions to bind uploaded images to a specific record in the db). This should execute, checking if the subfolder we are trying to create is already present, when clicking the Upload button on the Presentation/upload page

You might say that it is not safe that everybody can make updates in the database and everybody can upload images to the server. This is handled through my user access-control and password system, Sitelok, so I am confident that only the persons with the right credentials will be able to make updates and uploads.

I copy in the code for the Presentation/upload page with the forms, for the php file that creates updates to the database, and for the php file that creates image upload to the server, and hope that someone can help me moving on towards the final goal for this project

Presentation/upload page:

<?php 
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>
<!DOCTYPE html>
<html lang="da">
    <head>
        <meta charset="utf-8" lang="da">
        <title>Presentation/upload</title>
    </head>

    <style> 

    input[type=text] {
    width: 100%;
    height: 30px;
    padding: 2px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-family: arial;
    font-size: 12px;
    resize: none;
}

    textarea {
    width: 100%;
   
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-family: arial;
    font-size: 12px;
    resize: none;
}

    .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 510px;
    border-collapse: collapse;
    background-color: white;
    padding-bottom:10px;
    margin-right: 2px;
}

    .flex-item {

    margin: 0px;
    width: 250px;
    border: 1px  lightgrey;
    border-style: solid;
    border-collapse: collapse;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;

}
    </style>
    <style type="text/css">
        .message { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
        .message2 { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
        .success { margin-top: 7px; font-family: arial; font-size: 12px; color: #666666; text-align: center; background-color: lightgreen; border: 1px solid lightgrey; padding-left: 0px; padding-right: 0px; }
        .error { margin-top: 7px; font-family: arial; font-size: 12px; color: white; text-align: center; background-color: red; border: 1px solid #666666; padding-left: 0px; padding-right: 0px; }
    </style>



    <body>

    <div class="flex-container">
        <div class="flex-item" style="margin-top:10px; float:left; margin-left:10px; overflow:auto; background-color:#f6f6f6;">

        <form id="myForm" form action="insert.php" method="post">

        <p>Kontaktperson 'Sogn':</p>
        <p>
            <label for="firstName"></label>
            <input type="text" placeholder="Navn" name="navn" id="Name">
        </p>
        <p>
        <label for="lastName"></label>
        <input type="text" placeholder="Tlf." name="tlf" id="Phone">
        </p>
        <p>
            <label for="emailAddress"></label>
            <input type="text" placeholder="e-mail" name="email" id="emailAddress">
        </p>
        <p>
            <label for="opl"></label>
            <textarea rows="3" placeholder="Oplysninger" name="besked" id="opl"></textarea>

        </p>

        <input type="submit" value="Update">
        </form>

        <?php if (isset($_SESSION['flash'])): ?>
        <div class="message">
        
        <?php
            echo $_SESSION['flash'];
            unset($_SESSION['flash']);
        ?>
        </div>
        <?php endif; ?>

         <?php if (isset($_SESSION['flash1'])): ?>
        <div class="message2">
        
        <?php
            echo $_SESSION['flash1'];
            unset($_SESSION['flash1']);
        ?>
        </div>
        <?php endif; ?>       

        <?php if (isset($_SESSION['flash2'])): ?>
        <div class="message2">
        
        <?php
            echo $_SESSION['flash2'];
            unset($_SESSION['flash2']);
        ?>
        </div>
        <?php endif; ?>


        </div>   

        <div class="flex-item" style="margin-top:10px; float:left; margin-left:10px; overflow:auto; background-color:#f6f6f6;">


        <form method="post" action="upload.php" enctype="multipart/form-data">
               <p>Vælg fil der skal uploades:</p>
                <input type="file" name="fileToUpload" id="fileToUpload">
                <br>
                <br>
                <input type="submit" value="Upload" name="submit">
        </form>

        <?php if (isset($_SESSION['response'])): ?>
            <?php
            $response = json_decode($_SESSION['response']);
            unset($_SESSION['response']);
            ?>

            <div class="message <?php echo $response->success ? "success" : "error" ?>">
                <?php echo $response->message; ?>
            </div>
        <?php endif ?>
        </div>
    </div>

    </body>
</html>

Open in new window

Image upload page:

<?php
// Prevent direct access to the script
if (!isset($_POST['submit'])) die("Access Denied!");

// Start the session
session_start();

// Assume the file is invalid until proven otherwise
$uploadValid = false;

// Get some info about the potential file upload
$file = $_FILES["fileToUpload"]["name"];
$folder = "./image_uploads/";
$destination = $folder . $file;
$imageInfo = $_FILES["fileToUpload"]["size"] ? getimagesize($_FILES['fileToUpload']['tmp_name']) : false;

// Check if we have a file
if ($_FILES["fileToUpload"]["error"] === 4) {
    $message = "We have no file";
}
// Check if it has a size
elseif ($_FILES["fileToUpload"]["size"] === 0) {
    $message = "The file is empty";
}
// Check if it's an image
elseif ($imageInfo === false || ($imageInfo[2] !== IMAGETYPE_GIF) && ($imageInfo[2] !== IMAGETYPE_JPEG) && ($imageInfo[2] !== IMAGETYPE_PNG)) {
    $message = "The file is not a valid image";
}
// Something else went wrong!
elseif ($_FILES["fileToUpload"]["error"] !== 0) {
    $message = "There was a problem uploading your file";
}
// Check if it already exists
elseif (file_exists($destination)) {
    $message = "The file already exists";
}
// All good - let's try to move the file :)
else {

    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $destination)) {
        // The move was successful
        $message = "The file was uploaded sucessfully";
        $uploadValid = true;

    } else {
        // The move failed
        $message = "There was an error uploading your file";
    }
}

// Let's generate a response
$response = array(
    "success" => $uploadValid,
    "message" => $message
);

// Let's push the response to the SESSION
$_SESSION['response'] = json_encode($response);

// And send the user on his way
header('Location: ' . $_SERVER['HTTP_REFERER']);

?>

Open in new window

Database update page:

<?php
// Start the sesssion
session_start();
header('Location: index.php') ; 

$link = mysqli_connect("db credentials");
$link->set_charset("utf8");
 
// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
 
// Escape user inputs for security
$navn = mysqli_real_escape_string($link, $_REQUEST['navn']);
$tlf = mysqli_real_escape_string($link, $_REQUEST['tlf']);
$email = mysqli_real_escape_string($link, $_REQUEST['email']);
$besked = mysqli_real_escape_string($link, $_REQUEST['besked']);
 
// attempt insert query execution

if ((($_POST['navn'])) || (($_POST['tlf'])) || (($_POST['tlf'])) || (($_POST['besked']))!="") {
$sql = "INSERT INTO gravsten (navn, tlf, email, besked) VALUES ('$navn', '$tlf', '$email', '$besked')";  
}else{
$_SESSION['flash1'] = "There are no data to upload";
// Redirect the user back
header('Location: ' . $_SERVER['HTTP_REFERER']);

}

if(mysqli_query($link, $sql)){
// if successful, set a session variable
$_SESSION['flash'] = "Record added successfully";

// Redirect the user back
header('Location: ' . $_SERVER['HTTP_REFERER']);	
   
} else{
$_SESSION['flash2'] = "Could not execute";
}
 
// close connection
mysqli_close($link);

?>

Open in new window

Chris Stanyon

Hey Peter,

When you build your table after the search has been done, I'm guessing that information comes from the database. If at that point you have the Id of the record, the easiest thing to do would be to add that to the HREF of the link using a query string, so in your table you would end up with something like this:

<a href="http://kroweb.dk/gfdev/dataupload/?id=xxx" target="_blank">Lyng Sogn</a>

Then in the dataupload script, you can access that value like so:

$id = $_GET['id'];

You can then use it to query your database, pull down the record and insert the values into your form, as well as displaying the image.