Change picture from database on click? - php

Question

I have homework to do in 2 days. I have already been trying to do this for 4 days but I'm not able to make this work, so I wanted to ask you for advice. Nothing that I try leads me to what I need. I am making a shop and I already have made a login register, a product display, but I'm missing one thing.
When the user enters the product page he/she can choose the color of the product. For example if the user wants a gold iPhone, and clicks on the side of a black iPhone, the side will turn gold. The pictures should be stored in a MySQL database, so that when the user clicks "order now" on it says "Gold iPhone."
Code : https://codeshare.io/UbKVU
I try to at least make echo so I can get it into database .. But nonthing .( I know its stupide idea but ... )

Answer 1

Ok, this is the client-side portion of managing a cart using json data (which you can create via php and a mysql table. I'll lay out the PHP/SQL Schema side of things as well.
Here's the codepen working example: https://codepen.io/xonosnet/pen/xeoYLz
var checkout = {
items: [],
total: 0.00
};
var phones = [
{
title: 'iPhone 7',
model: 'MHCPL6',
price: 625.22,
selectedColor: '',
colors: {
'White' : '255,255,255',
'Black' : '0,0,0',
'Gray' : '127,127,127',
'Pink' : '215,191,191'
},
images: {
'White' : 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/image/AppleInc/aos/published/images/M/QG/MQGX2/MQGX2?wid=2000&hei=2000&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1516399367562',
'Black' : 'https://www.att.com/shopcms/media/att/2017/shop/360s/8510273/6166B-1.jpg',
'Gray' : 'https://cloud.istyles.com/images/Skins/OSI7P/800/OSI7P-SS-GRY.jpg',
'Pink' : 'https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/image/AppleInc/aos/published/images/M/QH/MQH22/MQH22?wid=2000&hei=2000&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1516399708457'
}
},
{
title: 'iPhone 8',
model: 'DDCNT7',
price: 785.22,
selectedColor: '',
colors: {
'White' : '255,255,255',
'Black' : '0,0,0',
'Gray' : '127,127,127',
'Red' : '225,0,0'
},
images: {
'White' : 'https://s3.envato.com/files/253291200/preview/preview1.jpg',
'Black' : 'https://img.tvc-mall.com/uploads/details/101112311A-1.jpg',
'Gray' : 'https://cloud.istyles.com/images/Skins/OSI7P/800/OSI7P-SS-GRY.jpg',
'Red' : 'https://img.tvc-mall.com/uploads/details/101112364C-1.jpg'
}
}
];
//Do a post frequest to pull this data out of the DB
//var phones = get_phones();
$.each(phones, function(index,phone) {
var phoneColors = get_phone_colors(index);
const htmlData = [
'<div class="phone" data-index="'+index+'">',
' <h2>'+phone.title+' <small>('+phone.model+')</small> <span class="price">$'+phone.price+'</span></h2>',
' <h4>Choose a color:</h4>',
' <div class="color-picker-ctn">',
' <div class="color-picker">'+phoneColors.colors+'</div>',
' <div class="phone-image" data-model="'+phone.model+'">'+phoneColors.default+'</div>',
' </div>',
' <button class="add-cart-btn">Add to Cart</button>',
'</div>'
];
$('.container').append(htmlData.join(''));
});
function get_phone_colors(i) {
var p = phones[i],
data = {
colors:'',
default:''
},
pass = 0;
console.log(p);
$.each(p.colors, function(index,c) {
var htmlOutput = '<div class="color '+(pass == 0 ? 'color-selected':'')+'" data-key="'+index+'" data-img="'+p.images[index]+'" data-model="'+p.model+'" data-index="'+i+'" style="background-color:rgb('+c+');"></div>';
console.log('IMG INDEX: '+i);
data.colors = data.colors+htmlOutput;
if(pass == 0) {
phones[i].selectedColor = index;
data.default = '<img src="'+p.images[index]+'"/>'
}
pass = pass+1;
});
return data;
}
function get_phones(phonedata = []) {
$.post('your_file.php', {get_phones:true}, function(data) {
phonedata = data;
},'json');
return phonedata;
}
$(document).on('click', '.color', function() {
var model = $(this).data('model'),
key = $(this).data('key'),
img = $(this).data('img'),
index = $(this).closest('.phone').data('index'),
model = phones[index].model;
console.log(img);
console.log("INDEX: "+index);
phones[index].selectedColor = key;
$('.color-selected').toggleClass('color-selected');
$(this).addClass('color-selected');
$('.phone-image[data-model="'+model+'"]').empty().append('<img src="'+img+'"/>');
});
$(document).on('click', '.add-cart-btn', function() {
var phone = phones[$(this).closest('.phone').data('index')];
checkout.items.push(phone);
checkout.total = checkout.total+phone.price;
update_cart();
});
var checkout = {
items: [],
total: 0.00
};
function update_cart() {
var htmlOutput = [];
checkout.total = 0.00;
if(checkout.items.length > 0) {
$.each(checkout.items, function(k,v) {
const output = [
'<div class="checkout-item">',
' <span>'+v.selectedColor+' '+v.title+' ('+v.model+')</span>',
' <span>$'+v.price+'</span>',
'</div>'
];
htmlOutput.push(output.join(''));
checkout.total = checkout.total+v.price;
});
$('.cart').empty().append(htmlOutput.join(''));
$('.cart').append('<h4>Total: $'+checkout.total.toFixed(2)+'</h4>');
} else {
checkout.total = 0.00;
}
}
.cart {
display:inline-block;
width:300px;
pading:50px;
vertical-align:top;
}
.container {
display:inline-block;
width:auto;
background-color:rgb(255,255,255);
pading:25px;
}
small {
font-size:14pt;
font-weight:normal;
}
.price {
float:right;
}
.phone {
display:inline-block;
width:400px;
height:500px;
background-color:#FFF;
border-radius:10px;
border:2px solid #CCC;
padding:10px;
margin:25px;
}
.color-picker-ctn {
display:block;
width:100%;
verticle-align:top;
valign:top;
background-color:#FFF;
}
.color-picker {
vertical-align:top;
display:inline-block;
width:25%;
}
.phone-image {
vertical-align:top;
display:inline-block;
width:70%;
border-raidus:15px;
overflow:hidden;
background-color:#FFF;
}
.phone-image img {
border-raidus:15px;
}
.color {
display:block;
width:80%;
height:55px;
border-radius:5px;
margin-bottom:5px;
vertical-align:top;
valign:top;
text-align:center;
border:4px solid rgb(0,0,0,.25);
transition:all ease 250ms;
}
.color:hover {
cursor:pointer;
transition:all ease 250ms;
border:4px solid rgb(255,0,0);
}
.color-selected {
border:4px solid rgb(0,255,0)!important;
}
.phone-image img {
display:block;
width:100%;
height:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cart">
<p>No items in cart yet.</P>
</div>
<div class="container">
</div>
Here's a simple table schema of how the database could look.
CREATE TABLE `products` (
`product_id` int(12) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`model` varchar(50) DEFAULT NULL,
`price` decimal(6,2) DEFAULT '0.00',
PRIMARY KEY (`product_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE `product_colors` (
`option_id` int(12) NOT NULL AUTO_INCREMENT,
`product_id` int(12) NOT NULL,
`color_name` varchar(50) NOT NULL,
`color_rgb` varchar(11) DEFAULT '255,255,255',
`color_img` text,
`additional_cost` decimal(6,2) DEFAULT '0.00',
PRIMARY KEY (`option_id`),
KEY `product_id` (`product_id`),
CONSTRAINT `product_colors_ibfk_1` FOREIGN KEY (`product_id`) REFERENCES `products` (`product_id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Aaaand finally, here's a simple quick & dirty way of handling the PHP side of this. I did not include instructions on how to make a DB connection (in this example, I call it through $conn. Look up how to make PDO Mysql connections if you don't know how.
<?php
if(isset($_POST['get_phones']) {
$json = get_phones();
echo json_encode($json, JSON_PRETTY_PRINT);
}
function get_phones($return = array()) {
global $conn; //Your mysql connection object (using PDO)
$query = 'SELECT p.product_id, p.title, p.model, p.price FROM products as p';
$stmt = $conn->prepare($query);
$stmt->execute();
$rc = $stmt->rowCount();
if($rc > 0) {
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$colors = get_product_colors($row['product_id']);
$return[] = $row;
$return['colors'] = $colors['colors'];
$return['img'] = $colors['img'];
}
}
return $return;
}
function get_product_colors($pid, $return = array('colors'=>array(), 'img'=>array())) {
global $conn;
$query = 'SELECT p.option_id, p.color_name, p.color_rgb, p.color_img FROM product_colors as p WHERE p.product_id = '.$pid;
$stmt = $conn->prepare($query);
$stmt->execute();
$rc = $stmt->rowCount();
if($rc > 0) {
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$return['colors'][$row['color_name']] = $row['color_rgb'];
$return['img'][$row['color_name']] = $row['color_img'];
}
}
return $return;
}
?>