So I'm building a website that contains information about a bunch of different animal species. I will have a list of 500 items, that should be able to be filtered and sorted by different criteria. For example, I will have a 'country selection' option. If Brazil is selected, the Capuchin monkey among other animals (living in Brazil) should be added to the list.
I could see myself making a list with 50 species with no problem, as the HTML would be manageable. But would having 500 items in a list with filterabilty even be possible without using some sort of database?
I was thinking of just pairing animal items from the list with certain filter criteria. For example, Capuchin monkey with "Brazil", "Mammal", "Omnivore", etc.
And when e.g. "Mammal" is selected in the filter, all animals paired with that property (all mammals of the list) is added to the list, or if not paired with the property, then removed from the list.
As you probably can tell, I'm really uneducated on how to go about creating this filterable list. Down the road I might even look into adding a search function.
After pluggin in all content, I would never need to change anything. I've read that databases should only be used if you have dynamic content.
I wouldn't list all 500 items on the same page, as that would make it very slow. I would have 10 items per page.
I don't need a solution per se. I just wish to be pushed in the right direction.
Should I look into MySQL? Can a filterable list of 500 items be possible with just HTML/CSS/Javascript? I am somewhat familiar with javascript, and have read that JSON might be able to provide the things I need.
Sorry if my question is vague or if I'm in the wrong anywhere (this is my first post). Please ask for any clarification and any advice or suggestion is greatly appreciated.
Thanks,
Manne
No you don't need a database. Have a look at this very robust jQuery plugin that will easily allow you to sort/filter/search 500 items in JavaScript alone:
https://datatables.net/
There are examples that are powered from JSON alone so I would suggest you simply store your data in a JSON file until you grow large enough that you need to change that (if you ever do).
Here is an example where the data is pulled from a .txt file:
https://datatables.net/examples/data_sources/ajax.html
Related
Let's say you parsed a data file to generate thousands of items and put them in a hierarchical/tree format. Think like html, json, or QStandardItemModel (for any Qt users). Each item could have it's own text, icon, data, etc. Now let's say you want to stylize those items depending on their own data AND their relation to the surrounding items.
For example, make a parent item red if there is a child item with the name 'pie', but only if the parent item has a sibling named 'cheese', and only if the parent item is 2 steps down from the root item. And so on...
Well I was able to create a recursive function for my use case that does exactly that (with lots more check types). I basically created a JSON document that contains parameters for all the possible valid scenarios. Then in my recursive function, I check if an item fits in of those parameters, and then check for other related items as defined in the JSON document. I do this for every item.
The issue arises when the user edits one of the items. If someone changes the name of an item, then how would I let EVERY other item know that a change was made and they MIGHT now fit as a valid scenario? I can't just check the JSON document again for that edited item because that edited item might not be required to fit a scenario IF the styling action doesn't edit one of the checked items. Also, if the edit breaks a scenario, how would it know to undo it's effect on other items?
I can't just recheck parent items, because for all I know it might now fit with a parent>parent>sibling>child>child>child item. (And potentially more)
My answer was to rescan the entire thing, every, single, time. The downsides to this are that many times the changes are inconsequential, and performance can be a problem when there are thousands of items and dozens of possible scenarios.
Which got me thinking, how does software like Visual Studio know when to highlight something after you made a change when the highlighting could be dependent on a variable that could be far away in another document? Is there a proper way to handle situations like this? Or is rescanning the whole thing the way to go?
This is a question of how to perform the best practice of storing data from a webpage. Like texts/image-urls/links etc.
I have an CMS were you can create web pages. Here you can edit texts/upload images. In the future it would also be nice to "add new elements", add links to a-tags etc.
I need to have a robust and flexible solution that also have good performance. In both getting/recieving this data.
Lets consider I have 1000 pages with each around 25 elements on each page that can be updated and stored in the database.
Alternative 1)
Create a table and 1 column for each element on these pages for example columns like:
title_1, title_2,image_1,image_2.
Here we have a set of columns that we can update, these we can use on the web page.
Alternative 2)
Create 1 table with the columns (id, namespace, page_id, data)
And for each element on the page I add the namespace in association with the page_id to make the data output unique. In the data I can add any kind of information; text, links etc.
What do you suggest as a good solution for this issue? I'm ofcourse also open for other alternatives.
Thanks!
I would recommend option two, with the addition of a column identifying the element id/or type, if indeed the element id is somehow comparable. That is to say, if anchor text (say) is always stored as element id = 4, then you might want an element id = 4 so that you could compare anchor texts across multiple documents.
If, on the other hand (and this is the scenario I imagine is more likely), you may have 1-25 elements on a page and each of them could be different (eg document one has three anchor texts and four images, document two has one anchor text and no images, etc) it would make sense to add an element_type_id table that stores a bit of information about the element types. This is assuming that you ever have any interest in comparing (say) images across multiple documents, or anchor texts across multiple documents, etc.
Another thing to consider: if you are likely to see the same element over and over again, it actually makes more sense to effectively parameterize those elements by way of a lookup table. So basically store each (say) unique anchor text in one table and reference its id in your actual data table.
If I may add one additional thing: SO may not be the best place for the particular question you are asking. I'm not totally sure of that and maybe I'm wrong... but I would poke around the Stack Exchange network and see if other forums more closely deal with the type of question you asking. In the very least, I'd observe that your question is fairly vague and the goal of achieving a "robust and flexible solution that also {has} good performance. In both getting/recieving this data." is not likely to be accomplished simply by asking for advice on SO. There is a LOT that goes into data architecture, and certainly many of the details I would consider important in designing this myself are not present in your questions. And if you're not sure what those details are, I am not sure if SO is really the best place to set about learning them. I think https://softwareengineering.stackexchange.com/ may be a better fit for this question.
Just my opinion, and I could be wrong. Either way, I would consider learning a bit about database normal forms (http://www.bkent.net/Doc/simple5.htm or Google it) as well as do a little research on the types of design considerations that go into building a database (an old but still good SO article on that is here: What are the most important considerations when designing a database?)
Basically I'd like to extend this demo and turn text nodes into rows with multiple columns and equal (fixed) width. Sort of a classic table with indented rows.
The tree (unordered list) looks like this at the moment:
and I'd like to add some additional columns:
You will probably get more responses and of a better quality if you explain your requirements better. Expecting people to follow a link to find out what you are trying it to achieve is a little elf conceited to be honest. After all, people are offering their time and knowledge to you for free ad out of kindness. The least you can do is make it as easy as possible to help gou. By all means refer to the link, but only as an additional point of reference.
Just saying.....
I have a ban list that I'm building as part of an application that displays articles. This ban list will contain keywords, which if found in an article, would lead to the article being disabled(the article will not be displayed on the front-end)
I'm having a tough time visualizing the UI. I could always display a textarea and ask the user to enter keywords comma separated and when they want to delete again the textarea will be presented and they can edit the entered keywords. But I find my idea very unfriendly to the user.
My question is how do I program the UI so that its easy to add new keywords. I also would like to be adviced on a nifty way showing the existing keywords and also deleting them.
This ban list will be part of the admin panel/backend and will be accessible only to the site administrator.
How many banned words will there be? If a handfull then your suggestion of a comma separated list makes sense - perhaps sorted alphabetically when re-presented for editing.
I speculate that the list could become quite extensive, and hence perhaps you would need to present several pages of excluded words. In which case, some form of paginated, alphabetic display, with a little (x) beside each entry to permit deletion.
And a separate entry field which would accept single words and add them into the list, displaying the relevent page might work.
One other thought: will your list contain profane or otherwise potentially offensive words? if is possible that representing the list could itself be offensive in some way? You may need to find a way to O??????e the O??????e. Which might present a few challenges.
I would display them as a list, with a textfield at the top or bottom to add new ones.
Add an icon to each to let the user delete it, and implement both adding and deletion by Ajax: then you can sort the list before redisplaying it.
(Actually, you could do that all in the browser with Javascript and not use Ajax: in that case you'll have to pass the whole list to the server when it's needed).
My application has a requirement such that I have to display a huge number of HTML input textfields (maybe 2,000 text fields). The fields can be logically grouped into sections and the sections are repetitive. What is the best way to display it to the user so that they can enter data with minimum clicks?
I'm not sure what kind of users you have that would willingly sit through 2,000 text fields, but if it's a requirement, then you do what you have to. :)
You say it can be grouped into sections and the sections are repetitive. I'm not sure what parts are repetitive, but managing the sections carefully seems of utmost importance. Some sort of Javascript hiding/showing seems likely to be a big help... I think I would choose JQuery's Accordion effect or something similar.
You could add Tab key events to each section in order to assist with navigation and open a new section once an old one was complete. Adding change events to the fields might assist with that as well.
If you need to break the form up across multiple pages, then you'll probably want to utilize AJAX to load new sections/pages and store the submitted data into a session until the user is done.
Depending on the format of the required answer, there are two ways:
If the answer is of a known length or the answer is one of a few choices, you may auto-advance the cursor w/some javascript/jquery. For instance, if you're expecting phone numbers, when the person enters the 10th digit in the box, move the cursor to the next box.
If you don't know and you can't apply (1), the quickest way is to encourage users to tab their way through the boxes.
Speaking of tabs, if the boxes can be logically grouped, you could create tabs and have the users page their way through the questions. This will create more clicks, but will improve user experience.
But holy crap, 2k text boxes on one page is crazy!
I work on a similar product, and perhaps the number one thing would be to make sure that tabbing between fields works logically and quickly. The people who do data entry on this type of thing are lightning fast and fairly mindless (I don't mean that in a pejorative sense), typing in numbers from a log or printout without looking at a screen.
Apart from that, we implement tabs (like tabbed browsing) on the page, group boxes, and other things like "dynamic lists" which is like a data grid of text boxes that the user can add and delete rows from client-side.
Paged format, like a survey? You could then use SESSION to store the input for each page and retrieve the prior answers when the user switch between them. Another method is to use ajax to navigate between different . I think the issue is not the number of clips, but 2000 textfields is going to look scary on just one single page.