Ajout de la gestion des photos du bien/service. Style bannière bootswatch

This commit is contained in:
nox 2019-10-14 00:56:07 +02:00
parent 98392cff66
commit 5ed4e59c61
10 changed files with 160 additions and 57 deletions

View File

@ -15,33 +15,27 @@ ini_set('display_errors', 0);
// Récupération des informations du formulaire
$params = array();
$params['name'] = $params['slug'] = $_POST['produit'];
$params['image'] = $_POST['image'];
$params['user_id'] = $_POST['id_user'];
//$params['cle_pub'] = $_POST['cle_pub'];
$params['quantite'] = $_POST['quantite'];
$params['prix'] = $_POST['prix'];
//$params['created_at'] = date('d-m-Y h:i:s');
//$params['created_at'] = date('d-m-Y');
$params['antenne_id'] = $antenne_id;
$params['content'] = '';
$params['image'] = '';
// Insertion dans la base
/*$requete = "INSERT INTO products(name, user_id, quantite, prix, created_at, antenne_id)
VALUES(':nom_produit', ':vendeur', ':quantite', :prix, ':created_at', ':antenne_id')";*/
//$stmt = $bdd->prepare($requete);
//$stmt->execute($params);
$fields = array_keys($params);
//var_dump($fields);
//die();
$values = join(', ', array_map(function ($field) {
return ':' . $field;
}, $fields));
$fields = join(', ', $fields);
//var_dump($fields);
//die();
$query = $bdd->prepare("INSERT INTO products ($fields) VALUES ($values)");
//$query = $bdd->prepare("INSERT INTO products (name,slug,user_id,quantite,prix,antenne_id,content,image)
// VALUES ('test77','test77','1','1','55','1','','')");
$query->execute($params);
//echo json_encode("1 enregistrement ajouté !");
}
?>

View File

@ -7,11 +7,14 @@ if($_POST['id'] !== null)
$bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
$params['product_id'] = $_POST['id'];
$filename = $_POST['nom_image'];
// Suppression du bien/service
$requete = "DELETE FROM products WHERE id = :product_id";
$stmt = $bdd->prepare($requete);
$stmt->execute($params);
// Suppression de la photo du produit si elle existe
if (file_exists('../uploads/products/'.$filename)) {
unlink('../uploads/products/'.$filename);
}
}

View File

@ -10,6 +10,7 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
<tr style="color: black;">
<th>No.</th>
<th>Bien / service</th>
<th>Photo</th>
<th>Vendeur</th>
<th>Clé publique</th>
<th>Quantité</th>
@ -38,6 +39,7 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
<td>$number</td>";
$data .= '<td>'.$row['name'].'</td>';
$data .= '<td><img src="/uploads/products/'.$row['image'].'" width="100" height="100" /></td>';
$data .= '<td>'.$row['username'].'</td>';
$data .= '<td>'.$row['cle_pub'].'</td>';
$data .= '<td>'.$row['quantite'].'</td>';
@ -53,7 +55,7 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
} else {
$data .= ')" class=\'btn btn-info\' disabled=true';
}
$data .= '>Mettre à jour';
$data .= '>Modifier';
$data .= '</button>';
$data .= '</td><td>';
$data .= '<button onclick="DeleteProduits(\'';
@ -61,6 +63,9 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
$data .= "'";
$data .= ',';
$data .= "'$antenne_slug'";
$data .= ",'";
$data .= $row['image'];
$data .= "'";
if ($row['username'] == $_GET['nom_connecte'] ) {
$data .= ')" class=\'btn btn-danger\'';
} else {

View File

@ -10,9 +10,10 @@ if(isset($_POST))
$name = $_POST['produit'];
$quantite = $_POST['quantite'];
$prix = $_POST['prix'];
$image = $_POST['image'];
// Update Products details
$requete = "UPDATE products SET name = '$name', quantite = '$quantite', prix = $prix WHERE id = :id";
$requete = "UPDATE products SET name = '$name', quantite = '$quantite', prix = $prix, image = '$image' WHERE id = :id";
$query = $bdd->prepare($requete);
$query->execute($params);
}

26
public/ajax/upload.php Normal file
View File

@ -0,0 +1,26 @@
<?php
// Nom du fichier image
$filename = $_FILES['image']['name'] ?? $_FILES['add_image']['name'];
// Location
$path = str_replace('\\', '/', dirname(realpath(__DIR__)));
$location = $path.'/uploads/products/'.$filename;
$location2 = '/uploads/products/'.$filename;
// file extension
$file_extension = pathinfo($location, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);
// Valid image extensions
$image_ext = array("jpg","png","jpeg");
$response = 0;
if(in_array($file_extension,$image_ext)){
// Upload du fichier
if(move_uploaded_file($_FILES['image']['tmp_name'] ?? $_FILES['add_image']['tmp_name'],$location)){
$response = $location2;
}
}
echo $response;

View File

@ -94,7 +94,7 @@ header.header img {
.container {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.records_content th, .records_content2 th{
.records_content th {
background-color: lightgray;
color: rgba(0,0,0,0.85);
}
@ -110,11 +110,11 @@ header.header img {
.fond {
background-color: black;
background-image: url("../toureiffel.jpeg");
background-image: url("../images/bildreich_1275.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: scroll;
background-position: left;
background-size: cover;
background-size: contain;
}
.post-header {
width: auto;

View File

@ -2,6 +2,8 @@
function addRecord(antenne_slug, nom_connecte, id_user) {
var produit = $("#produit").val();
var image = $("#add_image").val();
var nom_image = image.substring(image.lastIndexOf("\\")+1);
var vendeur = $("#vendeur").val();
var cle_pub = $("#cle_pub").val();
var quantite = $("#quantite").val();
@ -9,6 +11,7 @@ function addRecord(antenne_slug, nom_connecte, id_user) {
// Add record
$.post("/ajax/addRecord.php", {
produit: produit,
image: nom_image,
vendeur: vendeur,
cle_pub: cle_pub,
quantite: quantite,
@ -24,6 +27,7 @@ function addRecord(antenne_slug, nom_connecte, id_user) {
// On efface les champs du popup
$("#produit").val("");
$("#add_image").val("");
$("#vendeur").val("");
$("#cle_pub").val("");
$("#quantite").val("");
@ -35,12 +39,14 @@ function addRecord(antenne_slug, nom_connecte, id_user) {
function addRecord2() {
// get values
var produit_r = $("#produit_r").val();
var image_r = $("#image_r").val();
var vendeur_r = $("#vendeur_r").val();
var cle_pub_r = $("#cle_pub_r").val();
var prix_r = $("#prix_r").val();
// Add record
$.post("ajax/addRecord2.php", {
produit_r: produit_r,
image_r: image_r,
vendeur_r: vendeur_r,
cle_pub_r: cle_pub_r,
prix_r: prix_r
@ -53,6 +59,7 @@ function addRecord2() {
// clear fields from the popup
$("#produit_r").val("");
$("#image_r").val("");
$("#vendeur_r").val("");
$("#cle_pub_r").val("");
$("#prix_r").val("");
@ -75,12 +82,13 @@ function readRecords2() {
});
}
function DeleteProduits(id, antenne_slug) {
function DeleteProduits(id, antenne_slug, nom_image) {
$("#hidden_antenne_slug").val(antenne_slug);
var conf = confirm("Etes-vous sûr(e) de vouloir supprimer ce bien ou service ?");
if (conf == true) {
$.post("/ajax/deleteProduits.php", {
id: id
id: id,
nom_image: nom_image
},
function (data, status) {
// Rechargement de la liste Biens/services
@ -89,6 +97,7 @@ function DeleteProduits(id, antenne_slug) {
readRecords(antenne_slug, nom_connecte);
}
);
}
}
function DeleteRecherches(id) {
@ -112,57 +121,58 @@ function GetProduitsDetails(id, antenne_slug) {
id: id
},
function (data, status) {
var produit = JSON.parse(data);
// Assign existing values to the modal popup fields
$("#update_produit").val(produit.name);
$("#preview").html('<img src="/uploads/products/'+produit.image+'" />');
$("#update_vendeur").val(produit.username);
$("#update_quantite").val(produit.quantite);
$("#update_prix").val(produit.prix);
}
);
// Open modal popup
// Ouverture de la fenêtre modale
$("#update_user_modal").modal("show");
}
function GetRecherchesDetails(id) {
// Add Recherches ID to the hidden field for future usage
// Champ caché de l'id
$("#hidden_user_id_r").val(id);
$.post("ajax/readRecherchesDetails.php", {
id_r: id
},
function (data, status) {
// PARSE json data
var produit = JSON.parse(data);
// Assign existing values to the modal popup fields
// Assignation des variables aux champs du formulaire
$("#update_produit_r").val(produit.produit);
$("#update_vendeur_r").val(produit.vendeur);
$("#update_cle_pub_r").val(produit.cle_pub);
$("#update_prix_r").val(produit.prix);
}
);
// Open modal popup
// Ouverture de la fenêtre modale
$("#update_user_modal2").modal("show");
}
function UpdateProduitsDetails(nom_connecte) {
// get values
var produit = $("#update_produit").val();
//var vendeur = $("#update_vendeur").val();
var image = $("#image").val();
var nom_image = image.substring(image.lastIndexOf("\\")+1);
var quantite = $("#update_quantite").val();
var prix = $("#update_prix").val();
// get hidden field value
// Champs cachés
var id = $("#hidden_user_id").val();
var antenne_slug = $("#hidden_antenne_slug").val();
// Update the details by requesting to the server using ajax
$.post("/ajax/updateProduitsDetails.php", {
id: id,
produit: produit,
image: nom_image,
quantite: quantite,
prix: prix
},
function (data, status) {
// hide modal popup
function (data, status) {
// Fermeture de la fenêtre modale
$("#update_user_modal").modal("hide");
// reload Produits by using readRecords();
// Réaffichage des biens/services
readRecords(antenne_slug, nom_connecte);
}
);
@ -170,6 +180,7 @@ function UpdateProduitsDetails(nom_connecte) {
function UpdateRecherchesDetails() {
// get values
var produit = $("#update_produit_r").val();
var image = $("#update_image_r").val();
var vendeur = $("#update_vendeur_r").val();
var cle_pub = $("#update_cle_pub_r").val();
var prix = $("#update_prix_r").val();
@ -180,6 +191,7 @@ function UpdateRecherchesDetails() {
$.post("ajax/updateRecherchesDetails.php", {
id_r: id,
produit_r: produit,
image_r: image,
vendeur_r: vendeur,
cle_pub_r: cle_pub,
prix_r: prix
@ -202,4 +214,52 @@ $(document).ready(function () {
// READ records on page load
readRecords(antenne_slug, nom_connecte);
//readRecords2();
$('#add_image').change(function(){
var fd_add = new FormData();
var files = $('#add_image')[0].files[0];
fd_add.append('add_image',files);
// requête AJAX pour copier la photo et l'afficher
$.ajax({
url: '/ajax/upload.php',
type: 'post',
data: fd_add,
contentType: false,
processData: false,
success: function(response){
if(response != 0){
// Show image preview
$('#add_preview').html('');
$('#add_preview').append("<img src='"+response+"' width='160' height='160' style='display: inline-block;'>");
} else {
alert('L\'image n\'a pu être uploadée');
}
}
});
});
$('#image').change(function(){
var fd = new FormData();
var files = $('#image')[0].files[0];
fd.append('image',files);
// requête AJAX pour copier la photo et l'afficher
$.ajax({
url: '/ajax/upload.php',
type: 'post',
data: fd,
contentType: false,
processData: false,
success: function(response){
if(response != 0){
// Show image preview
$('#preview').html('');
$('#preview').append("<img src='"+response+"' width='160' height='160' style='display: inline-block;'>");
} else {
alert('L\'image n\'a pu être uploadée');
}
}
});
});
});

View File

@ -14,18 +14,19 @@
</div>
</div>
<div class="row">
<div class="col-md-8">
{{ field('image', item.slug, "Image", {type: 'file'}) }}
</div>
<div class="col-md-4">
{% if item.image %}
<img src="{{ item.thumb }}" alt="" style="width:100%;">
{% endif %}
</div>
<div class="col-md-4">
{{ field('image', item.slug, "Image", {type: 'file'}) }}
</div>
<div class="col-md-4">
{{ field('slug', item.slug, "Lien") }}
</div>
<!-- <div class="col-md-4">
field('slug', item.slug, "Lien")
</div>-->
</div>
{{ field('content', item.content, "Description", {type: 'textarea'}) }}

View File

@ -4,14 +4,6 @@
{% block body %}
<style>
.fond_paris {
background-image: url("../images/background_contacts.jpg");
background-repeat: no-repeat;
background-attachment:fixed;
background-position: center;
background-size: 100% auto;
font-family: Bree serif,"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tableau {
width:100%;
background-color: white;
@ -89,7 +81,16 @@
<label for="produit">Bien ou service</label>
<input type="text" id="produit" placeholder="Bien ou service" class="form-control"/>
</div>
<div class="form-group row">
<div class="col-md-7">
<form method='post' action='' enctype="multipart/form-data">
Choisir l'image : <input type='file' name='file' id='add_image' class='form-control' ><br>
</form>
</div>
<div class="col-md-5">
<div id="add_preview" style="border:1px solid black;width:160px;height:160px;">&nbsp;</div>
</div>
</div>
<div class="form-group">
<label for="cle_pub">Clé publique</label>
<input type="text" id="cle_pub" placeholder="Clé publique" class="form-control"/>
@ -120,17 +121,28 @@
<div class="modal-dialog" role="document" style="color: black;">
<div class="modal-content" style="text-align: left;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Mettre à jour</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="update_vendeur">Vendeur</label>
<input type="input" disabled="disabled" id="update_vendeur" placeholder="Vendeur" class="form-control"/>
</div>
<div class="form-group">
<label for="update_produit">Bien ou service</label>
<input type="text" id="update_produit" placeholder="Bien ou service proposé" class="form-control"/>
</div>
<div class="form-group">
<label for="update_vendeur">Vendeur</label>
<input type="input" disabled="disabled" id="update_vendeur" placeholder="Vendeur" class="form-control"/>
<div class="form-group row">
<div class="col-md-7">
<form method='post' action='' enctype="multipart/form-data">
Choisir l'image : <input type='file' name='file' id='image' class='form-control' ><br>
<!--<input type='button' class='btn btn-info' value='Upload image' id='upload'>-->
</form>
</div>
<div class="col-md-5">
<div id="preview" style="border:1px solid black;width:160px;height:160px;">&nbsp;</div>
</div>
</div>
<div class="form-group has-error has-feedback">
<label for="update_quantite">Quantité</label>

View File

@ -20,11 +20,13 @@
<a class="navbar-brand" href="#">Ğ1-Marché</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link {% if regions %} active{% endif %}" href="{{ path('gmarche.index') }}">Accueil</a>
<a class="nav-link {% if regions %} active{% endif %}" style="font-size:14px;"
href="{{ path('gmarche.index') }}">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link {% if explodeUrl()[1]=='contact' %} active{% endif %}" href="{{ path('contact') }}">Qui sommes-nous ?</a>
<a class="nav-link {% if explodeUrl()[1]=='contact' %} active{% endif %}" style="font-size:14px;"
href="{{ path('contact') }}">Qui sommes-nous ?</a>
</li>
{% if antenne_name %}
<button class="btn-custom">Produits</button>
@ -40,7 +42,7 @@
&nbsp; &nbsp;
<form method="post" action="{{ path('auth.logout') }}">
<!-- csrf_input() }}-->
<button class="btn btn-danger">Se déconnecter</button>
<button class="btn btn-danger" style="font-size:14px;">Se déconnecter</button>
</form>
{% else %}
<div class="nav-item active">
@ -60,8 +62,7 @@
</div>
{% endif %}
<!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
{% block body %}{% endblock %}
</div><!-- /.container -->