Best way to populate table from multiple MySQL database tables

Question

I'm building a student score viewing table using MySQL in the backend. So far, I have two tables for this feature. activities contains the class code it belongs into, it's own unique activity code, a name, the max score of the activity, and when it was added as a UNIX timestamp. outputs refers to students' outputs per activity, containing the activity code, the student code, and the score.

TABLE activities

+----+------------+---------------+---------------+-----------+------------+
| id | class_code | activity_code | activity_name | max_score | time_added |
+----+------------+---------------+---------------+-----------+------------+
|  1 |    Pq5H    |      xJDM     |   Seatwork 1  |     10    | 1578632389 | 
+----+------------+---------------+---------------+-----------+------------+
|  2 |    Pq5H    |      JXrA     |   Seatowrk 2  |     15    | 1578952035 |
+----+------------+---------------+---------------+-----------+------------+
|  3 |    JXrA    |      b5Ud     |   Seatwork 1  |     10    | 1578975406 |
+----+------------+---------------+---------------+-----------+------------+

TABLE outputs
outputs.activity_code references activities.activity_code

+----+---------------+--------------+-------+
| id | activity_code | student_code | score |
+----+---------------+--------------+-------+
|  1 |      xJDM     |     FAb1     |   10  |
+----+---------------+--------------+-------+
|  2 |      JXrA     |     FAb1     |   14  |
+----+---------------+--------------+-------+
|  3 |      xJDM     |     jIPA     |   8   |
+----+---------------+--------------+-------+
|  4 |      JXrA     |     jIPA     |   12  |
+----+---------------+--------------+-------+
|  5 |      Pq5H     |     FAb1     |   9   |
+----+---------------+--------------+-------+
|  6 |      Pq5H     |     jIPA     |   7   |
+----+---------------+--------------+-------+

On the frontend, I also have an editable table where users edit the score like so:

FOR CLASS Pq5H
+---------+------------+------------+
| Student | Seatwork 1 | Seatwork 2 |
+---------+------------+------------+
|   FAb1  |     10     |     14     |
+---------+------------+------------+
|   jIPA  |      8     |     12     |
+---------+------------+------------+

In short, the column headers contain the activities for a specific class, the first row contains the students in that class, and the cells are the scores of the students in the corresponding columns.

The users would also be able to dynamically add columns which creates new activities, and when they save, the new scores would be added to the outputs table.

What would be the best way to go around (1) populating the HTML table and (2) saving output data from new HTML columns into the database? So far, all I found regarding this are populating HTML table rows with rows directly lifted from the database, which is not what I need in this case.

I'm using HTML, JS (with jQuery), PHP, and MySQL.

Answer 1

Get the data using

SELECT student_code,
       activity_name,
       score
FROM activities
[LEFT] JOIN outputs USING (activity_code)
WHERE class_code = ?
[ORDER BY 1,2]

and PIVOT it on the client side.

Alternatively get

SELECT student_code,
       CONCAT('{', GROUP_CONCAT(CONCAT('"', activity_name, '":"', score, '"') SEPARATOR ',') , '}') scores_in_json
FROM activities
JOIN outputs USING (activity_code)
GROUP BY student_code
WHERE class_code = ?
[ORDER BY 1,2]

and convert JSON to PIVOT on the client side.