0

I have a page where I am dynamically generating a lot of rows of students (max around 50) from a DB. The page is to allow a teacher to enter grades for each student at once. The rows are generated using AJAX/jQuery and looks something like this:

$("#tbodystudents").append('<tr><td class="studentid" style="display:none">'+value[0]+'</td><td class="subjectid" style="display:none">'+value[1]+'</td><td><input class="inpmark" type="number"></td>/tr>');

I then send it to my PHP file like this:

$("#btnaddmarks").click(function(){
    var marks= $("input.inpmark").map(function(){
    return $(this).val();
    }).get().map();
    
    var studentids= $(".studentid").map(function() {
    return $(this).text();
    }).get().map();

    var subjectids= $(".subjectid").map(function() {
    return $(this).text();
    }).get().join();

$.ajax({
    type: "POST",
    url: "modules/addmarks.php",
    dataType: 'json',
    data: {s:studentids,m:marks,subj:subjectids},
    cache: false,
    }) // etc..
});

and my PHP, addmarks.php:

<?php
$inputvalues = $_POST;
$errors = false;
$returnResult;
$result = false;
include_once '../../../includes/database.php';

$studentids = $inputvalues['s'];
$marks = $inputvalues['m'];
$subjectids= $inputvalues['subj'];

$studentid = explode(",",$studentids);
$mark= explode(",",$marks);
$subjectid= explode(",",$subjectids);

    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }

if( !$errors ) {
    $sql = "INSERT INTO `marks` (`studentid`, `subjectid`,`mark`) VALUES (?,?,?)";
    $stmts = $mysqli->prepare($sql);
    $stmts->bind_param('iii',$studentid,$subjectid,$mark);
    $result = $stmts->execute();
    $returnResult = "Success";
}
    mysqli_close($mysqli);
    echo json_encode(['result' => $returnResult, 'errors' => $errors]);
    exit;
?>

So my questions are,

  1. How can I loop over the values and insert corresponding values into my DB?

  2. Is this the best way to go about this problem? If not, what is?

  3. How can I ensure that the correct values are entered, meaning that the first value in the studentids array and the first value in the marks array are connected and entered into the DB accordingly.

  4. Is it safe to send this data using AJAX to the backend? I plan to use HTTPS later.

1 Answer 1

1

If you are using AJAX anyway, I would go for a nice UX solution which includes feedback whether or not the entered data has been saved. Also, for data integrity reasons, I would use datasets on input fields, e.g.

<input class="inpmark" type="number" data-studentid="123" data-subjectid="45">

This way, the input's value is bound to a student and subject id by default and you are not required to map various arrays later on.

By using the blur event on such an input field, an AJAX request could be send to update that single value (inpmark) along with the student and subject id and if the request returns "ok", the background of the input could turn green for example to inform the user that the information is now saved in the database (an focus event could remove the background color again).

Regarding your questions,

  1. No need to loop if there is an request for each mark.
  2. The best solution really depends on the specific use case and how the teachers are going to use it.
  3. By adding the student and subject ids to the input's dataset, this is already solved.
  4. Depends again, is this going to be public, is the database server in a DMZ or will it be used in an intranet, only?
Sign up to request clarification or add additional context in comments.

2 Comments

The datasets idea on the input fields is brilliant! I am very new to programming so this is a project I am doing just to learn :) I may not have explained correctly but I am sending all the data on a button click so each student and their mark will not be entered into the DB individually. Regarding 4, I am planning on setting up a small server so I can learn server admin while I am at it. This is not for public use but I still want to learn how to do it right regardless :)
The problem with sending all data (which you wouldn't need AJAX for, just submit a form), if there's some failure of network or server, all entered data may be lost. Thus, by sending small snippets of data, the application becomes more safe in terms of data integrity (and lessens user frustration).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.