This is how I created https://micahlt.github.io/renart/.
About a week ago, I found myself in a difficult situation at school. I had an AP European History assignment that required me to find lots of information about Renaissance artwork. I thought to myself, “there should just be a basic database that contains this info.”
After finishing the assignment at 12am, I was determined to find a solution for posterity that might encounter the same problem. I love HTML and CSS and don’t know SQL (or any of its derivatives) so I needed to build a “database” with pure HTML and CSS (and possibly a little JavaScript). Here’s what I came up with with my own knowledge and some stuff I scrounged from Stack Overflow.
Starting off, I created a new GitHub repository. I created an index.html file, starting off with the basic syntax:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>My Database</title>
<style>
</style>
</head>
<body>
</body>
</html>
Next, I made a simple input box.
<input type="text" onkeyup="searchFunction()" placeholder="search here" title="search">
If you’re not familiar with what’s happenning here, we’re creating a default input text box and adding the placeholder text “search here”. The onkeyup specifies that we’re going to call a JavaScript function when the enter key is pressed and the input has a value.
After this, I created a table:
<table align = "center">
<tr class = "header">
<th style="width:25%;">Title</th>
<th style="width:25%;">Artist</th>
<th style="width:25%;">Commisioner</th>
<th style="width:25%;">Completed</th>
</tr>
</table>
Basically what I’m doing here is building the header for the table. This won’t be searchable because of how the JavaScript will be written. I’m also centering the table. After this, I just added some rows using another <tr> element after the heading.
<tr>
<td>The Annunciation</td>
<td>Fra Angelico</td>
<td>Cosimo de' Medici</td>
<td>1446</td>
</tr>
</table>
You can add your own data in each column (<td>). Now, the next part was hard for me. I like to focus on HTML and CSS, but I like to pretend that JavaScript doesn’t exist. It just seems complicated compared to Python and Ruby. I scrolled Stack Overflow for a while until I found the perfect script:
<script>function artFunction() {
// Declare starting variables
var input = document.getElementById("artInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("artTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through rows
for (var i = 0; i < trs.length; i++) {
// Define the cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
</script>
Just add this at the bottom of your <body>. I can’t even hope to explain how this works. Now you’re done! This honestly isn’t the best way to keep a database, because your HTML page will just grow with every item you add. However, it works if you don’t want to learn SQL.
TL;DR- If you want to build a “database” without SQL, visit https://github.com/micahlt/renart and check out the art.html file.
Top comments (30)
Cool wee project! I would recommend using json to store and load data, that way its maybe a bit easier to handle. You could use a tool like Firebase with used a Realtime JSON Database. Very easy to setup and use if you dont like SQL
Cool! Yeah, this is just a small project that I didn’t want to spend much time on. I probably could use Firebase if this were to become a larger project. The longer the HTML document, the longer the load time is and that’s not UX-friendly. So Firebase is a good option. :)
This is really cool project and interesting to see how you went about making a dB without SQL.
However I do suggest you learn SQL and convert this project to an SQL version so it can handle growth, like you said there should be a dB with this kind of info! Also SQL is pretty easy to learn the basics :)
It is easy to learn (and I actually know a little tiny bit) but I wanted to see if I could do it with just HTML, CSS, and JS. :)
Well you did it! Nice job!
Bonus points: get it working as fast as an SQL version xD
Lol! ｡◕‿◕｡
please consider creating a gist on GitHub and link it here so reading the code is pleasure.
Okay! I’ve never posted on Dev before, so I wasn’t sure how this worked. 😀
welcome to the community, I hope my comment wasn't harsh, I thought you would love gist feature of GitHub and how it looks when posted at other places. I am new as well so 🙄🙄, I don't know.
Oh, you're fine! I know about Gist; I just didn't get around to creating one for this project. 😊
You don't need to create one for the article. Use three back ticks (`) instead of one at the beginning and end of your code, then it will be formatted as a block instead of inline, and it will look much nicer :)
Really? Nice; I’m not very familiar with Markdown.
GREAT! Now I can use this for my AP Euro exam too! 😁👍
Lol! Feel free to check it out, and if you want to add some art yourself, make a pull request on GitHub and I’ll merge it! Good luck on your exam! :)
I'll add some more things when I need to....
Great job BTW👍
Also, art.html isn't really a template for making a different database....
It wasn’t really meant to be a template- it’s mean to be the website! 😄 I just meant that it can be used as a template if you change some things (such as the width and number of columns).
Ah....
Hey, I see you’re on Scratch! Me too! scratch.mit.edu/users/-Archon-
Check out tiddlywiki.com (open source) that is also HTML/js/css and a single, stand-alone file but lets you create a lightweight wiki directly in your browser with incredibly flexible macros and filtering functions!
hi, im abit confused on the last part on which you link the stack overflow. I have made a few html websites each with its own separate page on microsoft visual studio. Would it be best to add the same stack overflow on each of the codes i have made? Shall i do a separate github for each code? xx
That's really a very very great work! btw how i can make the table header visible when i search?
Hmmm... That's an interesting question. There's a lot of stuff I would change if I was to rebuild this project since my knowledge of the web has increased many times since I wrote this. A fixed header would be one of the things I'd add. Probably the easiest way would be to separate the header into a different table in the HTML, though it would be cleaner to add some JS logic that simply unshifts the first row of the table to the actual results.
hello,
I recently visited your project and I think you have done a good effort
I also opened a pull request in order to make it more good
I hope you like it
Really cool!!!
Use JSON or
w3schools.com/html/html5_webstorag...
JSON is... complicated to work with. And HTML5 web storage is only for the local user. The goal of this project was to have a standing, unchangeable database.