Single page CRUD form with dynamically changing buttons

Updating a SQL databases via a web interface has proven to be one of the most pragmatic inclusions to a website and this script can be customized and implemented under a wide variety of circumstances.

Due to the fact that it works by updating real databases, it seemed like the best way to show how it works is by providing a video rather than access to a deployed site. Why risk an unscrupulous character overwhelming the system by inputting large amounts of data? It is the world wide web after all!

Video of how it works

The screencast shows a new entry and highlights it automatically updating in the table view along with editing and finally the deletion process.

All project code and notes

Fork or clone from the GitHub repository.

Database entry

Selecting the save button below the input form updates the table above without the need to refresh the page.

Create, read, update and delete interface

Edit the form data

Upon pressing edit in the table, a combination of JavaScript and PHP programming languages are activated and the blue “Save” button converts to a teal color and changes to “Update” with a teal background. Upon completing desired edits, the script sets off communication with the web server, updates the data with a series of SQL query statements and instantly displays the newly edited information in the table.

Edit existing data

Delete data

Once again the database is updated using a combination of PHP and SQL after the user confirms deletion of the unecessary information. Note that the button has converted back to blue.

Update finished, button changes back to blue

Making database management friendly

I built this project with with PHP, JavaScript and SQL. In order to streamline website management, limited it to one page. It has provided the backbone of blog posts, streamlining medical care of eldery parents and in another use case, tracking sales. It is customizable and is designed to integrate into personal and commercial web hosting.