This is a simple database application for beginners. It uses:
- A MySQL database
- HTML5 forms
- Vanilla JavaScript with
fetch() - PHP scripts to connect to the database and write new data into the database
This application can:
- Create a new record and add it to the database
- View all records in the database
- Update an existing record
- Delete an existing record
As an exercise in a web development course, this is the students' second experience with PHP and MySQL.
Supplemental docs (Google docs):
-
Using the Sock Market files — shows the relationships among all the files in this repo
-
Sock Market: MySQL and PHP — explains the JavaScript and PHP code for viewing the database records and adding a new record, with PHP
mysqli_commands to prevent SQL injection -
Import or Export a Database Table — how to do this in phpMyAdmin (MySQL)
You can try the live application here.
Because of an earlier assignment in the course, the Sock Market uses JavaScript to enter a new record into the database. The form is in the file enter_new_record.php. The JavaScript file called on submit is js/enter.js. That JavaScript file communicates with enter.php on the server, which sends a response back to js/enter.js, which in turn rewrites the HTML in enter_new_record.php.
It's possible to eliminate the JavaScript in that process and just use PHP instead.
The alternative files enter_new_record_NOJS.php and enter_NOJS.php provide all the changes necessary to eliminate the JavaScript, reducing three files to two. You can try it out.
The code in enter_new_record_NOJS.php has very few differences from the code in enter_new_record.php.
However, you can see a larger number of differences in enter_NOJS.php if you compare it with enter.php. You'll see that a lot of HTML was added to enter_NOJS.php to make it work as the response page.
In the original enter_new_record.php, when the server returns a response saying that the new record has been written to the database (or not), the JavaScript there would write that response text directly into the HTML — and also hide the form. The response message would appear on enter_new_record.php.
If you look at the browser address bar after you submit a new record with enter_new_record_NOJS.php instead, you'll see that the response is on enter_NOJS.php and NOT on the original form page.
If you're getting a 500 internal server error on a PHP file at your hosted website, it could be because of a permissions problem. Make sure all folders in your app have 755 and all files have 644.
.