How hard is it to create a simple database search using HTML/Java?

[88keys]

I'm not a programmer, I'm just a guy whose managed to learn, forget and relearn vba for excel a few times.

What I want to do is create a basic web page with a search function, and I've created an illustration below (using excel) to visually show how I want the search function to behave.
Mobile browser compatibility is a must so I'd prefer to stay away from doing anything that would detract from that.

The sheet you see on the left represents the file where that the search function will reference. This file will be about 20,000 rows or so. I suppose it could be formatted as a csv file, but I'm not sure if it's the best way to go about it.

The sheet on the right represents the web page and and the behaiviour of the search function. Typing in the word "Black" brings up all all artists and songs containing that word. Typing in "Black Sabbath" would narrow the list down accordingly.

Now, it's been going on 20 years since I've worked with HTML on a regular basis, and it was back when I was creating cheesy geocities pages. I can work with vba(excel), and ahk, but I've never worked with javascript, php, or anything like that.

That said, is this too daunting of a project for someone of my skill. Don't mind a healthy challenge, but I can't spend 6 weeks on this either.

If this is within my capability, perhaps someone could set me in the right direction and point me to some tutorials that will get me up to speed on this.

Thanks in advance.

 

[purbeast0]

Is the "database" (which just sounds like a text file from your description) going to be static or is it something that is going to be constantly updated?

Does it have to be a CSV file or do you want to use a real database?

Do you have access to a backend server or is this just something you want to encompass in a single "package" that you can email people and they can just run it and it works? (in this case I'm referring to if you want to basically package the CSV file with it)?

There's multiple ways you can solve this. Ideally you would want to have a server running that you can send the search parameters to, and the server will query a real database with the criteria passed in, and it will return the results to the front end. But it's possible you can package this up to not even need a backend if you're using a static CSV file that you want to search, and even then, it isn't ideal by any means.

 

[sdifox]

Learn python and use flask micro framework?

 

[beginner99]

but I can't spend 6 weeks on this either.

Then forget it.

What you want is theoretically simple. If you already know how to do it. But in your case you would need to learn SQL, a server-side language, javascript, html and css. Maybe if you are very smart and can spend 6 weeks FULL TIME on it then, maybe yes. Else it will take a lot longer. What is the rush?

 

[sdifox]

Then forget it.

What you want is theoretically simple. If you already know how to do it. But in your case you would need to learn SQL, a server-side language, javascript, html and css. Maybe if you are very smart and can spend 6 weeks FULL TIME on it then, maybe yes. Else it will take a lot longer. What is the rush?

No it doesn't take six weeks to learn to do what he wants to do. You can spend six weeks tweaking the look though.

 

[sao123]

i'm going to agree with beginner99...

a person with the knowledge could do this in a few hours to a day, in probably 100 lines of code or less. A dedicated person could learn to do this in a week or 2 from scratch and it be functional.

But... if you want it done correctly, and securely enough (no XSS, no SQL injection risks, etc) to put anywhere exposed to the internet (a real web page), is going to take much much longer. (If its just a non-exposed internal project which will never be used in a production environment, yes, 2 weeks minimum of learning)

I of course would do it with

C# / ASP.net (web forms) / ADO.net / SQL Server Express / Html / and Bootswatch CSS.

 

[Broheim]

I could make this in two hours flat, but it'll take a bit longer than that for you

I'd personally use:
ASP.net core with an nginx reverse proxy in front.
Elasticsearch
a vue.js frontend (or if i needed to do it really quick: angularjs, but that's only because I've worked with it so much, by angularjs I'm refering to angular version < 2, since angular 2 and forward is a bit more complex than you're ready for).

asp.net core is actually pretty easy to get started with, and you only need a single api controller and maybe a service class to do what you want, so you don't have worry about IOC containers or any other "slightly advanced" subjects. And kestrel (the web server) is effing fast.
With C# you also get the excellent Nest client for Elasticsearch, which is really simple and easy to use as long as you're trying to accomplish simple things.

What is elasticsearch? it's a document database meant for searching. It's not general purpose like mongodb or rethinkdb, but rather a frontend database where you take your data from some other datastore and index it in elastic to make it searchable. Another common usecase for elastic is logs, because of it's powerful aggregation capabilities, which you might want to use to create a faceted search, down the line.
something like SQL server is crap at full text search, it wasn't designed with that job in mind, and since you don't already have some flavour of a SQL database set up, there's no reason to use one.
You just take your excel file or csv file, read it with something like linq-to-excel into an IEnumerable<Song/WhatEverYouCallYourClass> and use Nest's indexmany() to index it in elastic search, or use logstash (an elasticsearch tool that can index data from certain sources, like a csv file).

the vue.js /angularjs frontend is how you build a webapp these days, you have a javascript "app" which runs on the client (browser) that calls the api on your server with some data, in this case a search term, the server then returns the data to the client which "updates the html" with the new data. writing it this way honestly takes just as long to make as just rendering the whole page serverside (when you know what you're doing) but gives you a lot more options when it comes to user experience. Angularjs is probably your best bet, since it is relatively simple, widely used, and well documented. You'll be able to find examples for everything you need.

 

[urvile]

Could you create a simple view with a textbox an input and when the user clicks the button it does an ajax call to the controller which just does a for e.g. LIKE '%black% query against the database? Then when the html comes back just insert it into the DOM using jQuery. How efficient does it have to be? What DB are you planning on using and how are you going to import the data into it? How secure does it have to be? I am a .NET guy so I know visual studio and SQL server. You can get free versions but the functionality will be curtailed. You might be better of with node for that full stack javascript and NoSql MVC experience. Javascript is not difficult to work with (but it does seem to have some issues being a scripting language and all) and node seems to be all the rage these days. Free tools and stuff too.

Actually I was just thinking (dangerous I know) I did something similar a while ago using a thing called jstree, some DOM events and an Mvc controller. Basically when the user types something in to an input an event fires (I can't remember what it is called) which fires an Ajax call which sends The input text back to a controller method.

Which then returns the dataset which has been filtered based on the parameter. (some processing occurs prior to return) Back as a JSON string which is in a format that can be passed to the jstree API which then inserts it into the DOM. Anyway I am just laying on the couch here and......bring on thread ripper.

 

[razel]

With 20k rows, just use XML or JSON. We do this for online/offline capability for directory searches at work off mobile devices that lose cellular data connectivity.

As yes, if it's in excel you can easily export it to XML.