How to Add Form Using Javascrip And PHP Mysql Part 1

Database:

Your database schema for the table_student seems fine, but you may want to add some improvements:

Auto Increment for ID: It's a good practice to make the ID column auto-increment so that it generates a unique ID for every new record.

CREATE TABLE `table_student` (
  `ID` int(6) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `Name` varchar(40) NOT NULL,
  `Department` varchar(40) NOT NULL,
  `Phone` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

This change ensures that you don't need to manually insert IDs into your database when adding new records.

Data Insertion: To avoid inserting data with a hardcoded ID, you can remove the ID from the INSERT statement since it will be auto-generated.

INSERT INTO `table_student` (`Name`, `Department`, `Phone`) VALUES
('Soeng Souy', 'IT', '096767676'),
('Chan Ta', 'Account', '0657657567');

PHP (index.php):

Your code for displaying the student data is working, but I suggest improving the security and making sure your application is prepared for any future needs.

Sanitizing Input: Always sanitize the data when interacting with the database to avoid SQL injection. Use prepared statements with MySQLi or PDO.
Error Handling: It's good to add some error handling in case the database query fails.

Here’s an improved querydata.php:

<?php
// query data to database
$query = "SELECT `ID`, `Name`, `Department`, `Phone` FROM `table_student`";
$sql = mysqli_query($connect, $query);

if (!$sql) {
    die("Query failed: " . mysqli_error($connect));
}
?>

JavaScript (script.js):

Your JavaScript is handling the add/edit functionality well, but let's consider some improvements:

Validation: Before adding new records, ensure that all fields are filled out. You already have an error class for empty fields, but we can enhance validation.

$(document).on("click", ".add", function () {
    var empty = false;
    var input = $(this).parents("tr").find('input[type="text"]');
    
    input.each(function () {
        if (!$(this).val()) {
            $(this).addClass("error");
            empty = true;
        } else {
            $(this).removeClass("error");
        }
    });
    
    if (!empty) {
        // After validation, submit the data to the database via AJAX or any other method
    }
});

AJAX for Data Submission: Instead of simply updating the UI, you could use AJAX to send the data to the server and update the table without reloading the page.

// Example of sending data to server using AJAX
$.ajax({
    url: 'add_student.php',
    type: 'POST',
    data: {
        id: $('#id').val(),
        name: $('#name').val(),
        department: $('#department').val(),
        phone: $('#phone').val()
    },
    success: function(response) {
        // Update table with new data
    }
});

CSS (Styles.css):

Your CSS is simple and clean, but you can further optimize for responsiveness and modern design.

Responsive Design: You can add some media queries to make sure the table is responsive and works on mobile devices.

@media screen and (max-width: 768px) {
    .table-wrapper {
        width: 100%;
    }
    table.table {
        width: 100%;
        font-size: 14px;
    }
}

Styling Improvements: Add hover effects on table rows for better UX.

table.table tr:hover {
    background-color: #f5f5f5;
}

These are just some recommendations for improving the existing code. Would you like to dive deeper into any specific area or make further improvements? Let me know how you would like to proceed!

Souy Soeng