How to create a simulator using SESSION

Question

Hello, I am trying to create a simulator using SESSION, but as I am a beginner and very lay still, I am asking for the help of friends. Next I created the page where the user can change the logo, simple it selects the image and changes next to the BD, which in turn sends the new image to the address of the Site in the position of the user’s Logo-Brand.

But I would like to give the opportunity for the user to simulate some changes, but when leaving the browser the changes made by him were undone, returning to the original.

I ask friends how? And if there is how I should proceed?

Below I list the file you create to change the logo, and the logo file coming from the BD.

Aquivo that changes the logo:

<?php

include 'cabecalho.php';

$codigo = $_POST['codigo'];
$logo = $_POST['logo'];
$query = mysql_query("SELECT * FROM pagcabecalho") or die(mysql_error());
$res = mysql_fetch_array($query);
?>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<div align="center"  style="margin: 0 0 0 180px; max-width:1000px;">
<div align="left" style="margin:0 0 0 10px;"><h3>Configure o Logo de Seu Site</h3></div>

<div align="left" style=" border-right:solid 2px; padding:10px; float:left; width:300px; height:auto; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:bold;">

<label>Logo: </label><br />
<label>Nome do arquivo: <span><?php echo $res['logo'];?></span><br />
<label>Imagem do arquivo: </label><br />
<img width="100" height="auto" src="../upload/<?php echo $res['logo'];?>" title="Logo Marca"/>
<br />
</div>

<div style="padding:10px; float:left; width:655px; height:auto; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:bold;">
<br /><br />

<div align="center" style=" padding:2px; float:left; width:190px; height:auto; float:left;">
<label>Configure o Logo:</label><br />
<a href="edit_logo-upd.php?codigo=<?php echo $res['codigo'];?>">
<img style="padding:15px;" width="30" height="auto" src="img/edit.png" title="Atualizar Imagem do Logo" /></a>
</div>
</div>

File that receives the BD logo:

    <li><a href="index.php">
    <img width="150" height="auto" src="upload/
    <?php
    include "../conexao.php";
    $logo = $_POST['logo'];
    $query = mysql_query("SELECT * FROM pagcabecalho");
    $res = mysql_fetch_array($query);
    echo $res['logo'];
    ?>
    " title="Home"/></a>
    </li>

If friends can shed some light on how I can create this simulator, I would be most grateful.

Hugs to all.

Answer 1

Your goal is to simulate the logo change, correct? So I will use Javascript for

This will be the modified item:

<img width="150" height="auto" src="upload/<? echo $nomeLogo ?>" title="Home"/>

My intention is to allow the user to change this logo, so I will add a pencil icon to the corner of the image and allow the change, via Javascript.

After all, why process on the server side?

Simulator on the client side:

Test this by clicking on the link below:

document.getElementById("alterarLogo").addEventListener("change", function() {
       document.getElementById('logo').src = window.URL.createObjectURL(this.files[0]);
       document.getElementById("salvar").style.display = "block";
});

html {
  background-color: #555;
}
/* Isso é apenas para demonstração, mas pode servir como base em seu projeto!  */

.logo {
  float: left;
  border: 1px solid;
  border-top-color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  border-right-color: rgba(255, 255, 255, 0.3);
  border-left-color: rgba(255, 255, 255, 0.3);
}
.alterar {
  float: left;
  margin-left: -21px;
  margin-top: 1px;
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
}
.salvar {
  float: left;
  line-height: 21px;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(255, 255, 255, 0.3);
  display: none;
  cursor: pointer;
}
/* Isso é necessário para ocultar o input, altere para ver o que irá mudar :P  */

#alterarLogo,
#salvarLogo {
  display: none;
}

<img src="https://goo.gl/XGflc6" width="150" id="logo" class="logo" alt="logo">

<form action="edit_logo-upd.php" method="post">

  <label for="alterarLogo">
    <img src="https://goo.gl/Kmg0EB" width="20" height="20" class="alterar" alt="Alterar">
  </label>
  
  <label for="salvarLogo">
    <span class="salvar" id="salvar"> Salvar </span> 
  </label>

  <input name="logo" id="alterarLogo" type="file">
  <input name="salvar" id="salvarLogo" type="submit">

</form>

If you prefer, click here.

Building:

HTML/PHP:

<?php
include "../conexao.php";
//$logo = $_POST['logo']; não vi utilização desta variável.
$query = mysql_query("SELECT * FROM pagcabecalho");
$res = mysql_fetch_array($query);
$logoResultado = $res['logo'];
?>
<img src="upload/<?= $logoResultado ?>" width="150" id="logo" class="logo" alt="logo">

This will display the image normally, as in your code.

So we need to create an alternative to change it when the user sends an image, this can be done with Javascript+HTML:

<?php
// if(isset($_SESSION['id']) && $_SESSION['id'] == $adminPagina){
// Isso é apenas um exemplo:
// Se estiver logado e o usuário conectado for administrador da respectiva página, exiba as funções:
?>
<form action="edit_logo-upd.php" method="post">

  <!-- A função desses "label" é para quando clicar acionar o "input" com o mesmo valor de "id" setado no "for" -->

  <label for="alterarLogo">
    <img src="https://goo.gl/Kmg0EB" width="20" height="20" class="alterar" alt="Alterar">
  </label>

  <label for="salvarLogo">
    <span class="salvar" id="salvar" style="display: none;"> Salvar </span> 
  </label>

  <!-- Estes inputs estão aqui, com display:none, para que não sejam mostrados -->
  <input name="logo" id="alterarLogo" style="display:none;" type="file">
  <input name="salvar" id="salvarLogo" style="display:none;" type="submit">

</form>
<?
// }
?>

Javascript:

So that we can take the image sent by the user and display in the place of the old logo, we need to add a Javascript:

<script>
document.getElementById("alterarLogo").addEventListener("change", function() {
// Isso irá "monitorar" se houver mudança no input/campo do logo

       document.getElementById('logo').src = window.URL.createObjectURL(this.files[0]);
       // Isso irá inserir a imagem enviada pelo usuário no lugar do logo antigo

       document.getElementById("salvar").style.display = "block";
       // Isso irá exibir o botão/texto de salvar.
});
</script>

I believe this will be enough for a real preview/simulation, as it happens with Facebook and Twitter, without the user having to wait to view the photo/cover and can save if you like. :]

I am editing an alternative to the server side, using SESSION, although not considered ideal, I’m just needing information on how the image is being saved (to use the same variables).