I am tasked with building a searchable list for a friend of mine, I am mostly a front-end designer, so I only know extreme basics and whatever I can find through books and tutorials.
As for the question, is there a way to create items in MySQL database that could hold a few tags such as height, width, thickness, color, company, type, category and a profile image of it? In theory, I would like to set up a registration page, which I already have, that my friend could use to add products himself. Would creating the items as "items" in a "product
s" be an effective way of going about this?
CREATE TABLE `admin`.`productss` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`type` VARCHAR(30) NOT NULL,
`category` VARCHAR(50) NOT NULL,
`thickness` CHAR(128) NOT NULL,
`height` CHAR(128) NOT NULL,
`color` CHAR(128) NOT NULL,
`material` CHAR(128) NOT NULL,
) ENGINE = InnoDB;
Or does the syntax not allow me to do that?
I currently have a solution using a 'fake' database, or like a long list that is hidden until searched, but this is done only using HTML, CSS, JS and I am looking for a more elegant solution to go about this.
===========================
Fiddle of the working filtering w/ HTML/CSS/JS: http://fiddle.jshell.net/j1by6xn1/10/
Fiddle of the 'fake' database list: http://jsfiddle.net/5ky8gx4L/
===========================
+----+-----+----+
|NAME|GREEN|15in|
+----+-----+----+
|NAME| RED |10in|
+----+-----+----+
And upon filtering by size '15in' it will only show the products with 15in as a size tag.
+----+-----+----+
|NAME|GREEN|15in|
+----+-----+----+
You can insert rows into the table productss
you showed, then you can filter them with the WHERE
clause. This would go something among the lines of:
//This shows all the products with type 'My Type' :
SELECT * FROM `productss` WHERE `type` = 'My Type'
//This shows all the products where the category has the text 'abc' in it (so also 12abc34 or 12abc :
SELECT * FROM `productss` WHERE `category` LIKE '%abc%'
//This shows all the products where the color is 255:
SELECT * FROM `productss` WHERE `color` = 255
This is for back-end filtering, the neat way to do it front-end is to use AJAX to call a PHP script from JavaScript with the variables it needs to filter.
Another way to do this is to use jQuery, print all the rows in a list and add data-something attributes; then your li
tag will look something like:
<li data-color='255' data-category='Something' data-type='My Type'>Hello</li>
the values data-color, category etc. will come directly from your database. Then you can filter them like so:
$(function(){
$(".sortButton").click(function(){
var filterByColor = $(this).attr('colorfilter'); //say this value is the color you want to filter by
$("li").hide(); //hide all options
$("li[data-color="+filterByColor+"]").show(); //show the options that match the filter
});
});