0

I'm fairly new to using MySQL, HTML, and Python synchronously. I have a website that I create using HTML, CSS, and Javascript. Then I use Python to enter data into a MySQL database. My question is how can I create a table on my HTML side and input MySQL data into the table using Python. I would like the table to grow row-wise dynamically (i.e. I don't want to refresh/reload and the new data should enter the HTML table in a new row so that the table display's all of the data in the MySQL database).

So far I am entering data correctly into the MySQL database and it is being populated. However, I'm stuck on how to:

  1. Create an HTML table that grows dynamically based on amount of data
  2. Use Python to input the data from the MySQL database into the table
  3. I would like a solution WITHOUT using PHP

I'm very new to MySQL, HTML, and Python and therefore, any and all help is greatly appreciated. Thank you in advance!

Markus Zeller
  • 8,516
  • 2
  • 29
  • 35
Kader_27
  • 11
  • 1

1 Answers1

0

It seems like you need to use a server to manage the operations of your website smoothly. You should probably check out flask, its extremely user friendly. If you have any amount of experience with Python it shouldn't be difficult to figure it out.

Backend: Flask has the added functionality of handling MySQL databases and handle the operations whenever the server receives requests. Your server can handle this request by responding with a JSON. Check out flask.ext.mysqldb. With Python's json library you can easily convert the query into JSON. Check this answer out for more details

Frontend: You can use a variety of methods with JavaScript to handle HttpRequests, like fetch and XMLHttpRequest. You can call your server and ask your server for the data that is stored in your backend and populate tables with the JSON you receive.

Dynamically growing HTML: this is a dummy function assuming that you receive a JSON response from your server and you have only 2 columns in your MySQL table. The code below is JavaScript. Taking a dummy HTML like this:

<table id="table">
</table>

With a JavaScript function handling the response of your server.

    const response = //JSON response from server
    var table = document.getElementById("table");
    table.innerHTML = ""; //making sure we don't present corrupt data
    response.forEach((result, index) => {
        const content = `    <tr>
<td>${result['col1']}</td>
<td>${result['col2']}</td> </tr>}`;
        table.innerHTML += content;
    })

Side note: You can make use of CSS classes to style these tables!

I know this is a very high level explanation of what is to be done. If you have any more clarifications let me know!

vinni3000
  • 46
  • 3