Welcome to the music rating full-stack CRUD web app with a MySQL and PHP backend. This is the readme file for our full-stack CRUD web app project. In this document, we will provide an overview of the app's functionality, the setup of the development environment, and the organization of the code. Screenshots of table structures and other relevant information will be included as per the requirements.
The link to the website is: Full Stack CRUD App
- Setting up the Development Environment
- App Functionality
- User Guideline
- Code Organization
- Screenshots
- Production Environment
- Contributions
To set up the local development environment for this project, we followed the instructions provided on the class website. We used XAMPP to create a local development environment for PHP and MySQL. Below is a screenshot of our local phpMyAdmin interface, which is part of the setup:
Our web app allows users to perform basic CRUD operations on a database of songs. The app functionality includes:
-
Create: Users can add a new song to the database, providing information such as the title, artist, and rating (on a scale of 1 to 5).
-
Read: Users can view a list of songs from the database, displaying the title, artist, and rating.
-
Update: Users can edit the title, artist, and rating of an existing song in the database.
-
Delete: Users can remove a song (title, artist, and rating) from the database.
To run the app locally, you need to have XAMPP downloaded and start the servers. You also have to have the rating and user tables under music_db database in your phpmyadmin locally. Then you can run the app locally using http://localhost/register.php
Getting Started
-
Ensure you have access to the Full Stack CRUD Web App.
-
Make sure you have registered for an account or obtained login credentials from the app administrator.
User Registration
To use the app, you need to register an account:
-
Click on the "Register" link or button on the login page.
-
Fill in the registration form with the following information:
- Username: Choose a unique username.
- Password: Enter a secure password (at least 10 characters long).
- Confirm Password: Re-enter the password to confirm.
-
Click the "Register" button to create your account.
-
If the chosen username is already taken, you will be alerted to select a different one.
-
Once registered, you can proceed to log in.
User Login
To access the app's features, you need to log in:
-
Go to the login page.
-
Enter your username and password.
-
Click the "Login" button.
-
You will be redirected to the app's main page, where you can view and interact with songs.
Viewing Songs
After logging in, you will see a list of songs displayed on the main page. The list includes the title, artist, and rating of each song. You can scroll through the list to view all the songs.
Adding a New Song
To add a new song to the database:
-
Click on the "Add New Song Rating".
-
Fill in the form with the following information:
- Title: Enter the title of the song.
- Artist: Provide the name of the artist.
- Rating: Select a rating from 1 to 5.
-
Click the "Submit" button to save the new song to the database.
-
You will receive a notification if you attempt to rate the same song more than once.
Updating a Song
To update the details of an existing song:
-
Find the song you wish to edit in the list of songs.
-
Click on the song title to open the editing form.
-
The form will be pre-populated with the current values of the song.
-
Make the necessary changes to the title, artist, or rating.
-
Click the "Update" button to save your changes.
-
Click the "Cancel" button to cancel your updates.
-
You will be redirected to the list of songs after updating.
Deleting a Song
To remove a song from the database:
-
Locate the song you want to delete in the list of songs.
-
Click on the song title to open the deletion form.
-
Confirm the deletion by clicking the "Yes" button.
-
Cancel deletion by clicking the "No" button.
-
The song will be permanently removed from the database.
Logging Out
To log out of your account:
-
Click the "Log Out" button.
-
You will be logged out and redirected to the login page.
-
Users must register and log in with a username and password. If a username is already taken, users are alerted and asked to choose a different username. Passwords do not need to be unique.
-
Passwords are hashed and salted for security.
-
Users can only rate a song once, and they will be notified if they attempt to rate the same song again.
-
The app enforces frontend validation to ensure that users do not leave any form fields blank, passwords are at least 10 characters long, and ratings are one-digit integers.
-
SQL queries are parameterized to prevent SQL injection attacks.
-
The database includes two tables:
users
andratings
, with the necessary foreign key relationships. -
Users can only update and delete songs they added.
The organization of our code is as follows:
-
We have separate PHP files for each CRUD function (create, read, update, delete), along with additional files for user registration, login, and user authentication.
-
We use GitHub for version control and organization of our work, including branches and pull requests.
Below are screenshots of our ratings
and users
table structures as requested in the assignment:
Ratings Table Structure:
Users Table Structure:
The link to the website is: Full Stack CRUD App
This project is a creation of Anan Afrida (@ananafrida) and Nishant Aggarwal (@n-aggarwal). Nishant contributed 50% to the project, and Anan contributed 50% to the project.
For more details on the project and its functionality, please refer to the code and documentation in our GitHub repository.