Skip to content

Commit 6c5740c

Browse files
marinnedeamarinnedea
authored
Update README.md
updated Instructions and description.
1 parent c232046 commit 6c5740c

File tree

1 file changed

+123
-33
lines changed

1 file changed

+123
-33
lines changed

‎README.md‎

Lines changed: 123 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,136 @@
1-
# Dynamic PHP+MySQL+jQuery multi-upload form
21

3-
The script is a sample dynamic form; basically, you get a form containing 4 fields and you have the option to add or remove rows from the form.
2+
# Dynamic PHP-MySQL-jQuery Upload Form
43

5-
The general structure will look like:
4+
This project is a dynamic file upload form built using PHP, MySQL, and jQuery. It allows users to upload files and view them dynamically. Additionally, it includes an admin login system for secure access to the upload area. The project uses modern practices, such as PDO for database interactions, session-based authentication, and role-based access control.
65

7-
## User Information
6+
## Features
87

9-
| # | First Name | Last Name | Email | File Upload | Remove |
10-
|---|------------|-----------|---------------|-------------|--------|
11-
| 1 | John | Doe | john@example.com | [Choose File] | [Remove] |
12-
| 2 | Jane | Smith | jane@example.com | [Choose File] | [Remove] |
13-
| 3 | Bob | Johnson | bob@example.com | [Choose File] | [Remove] |
8+
1. **Secure Admin Area**:
9+
- Only authorized users can access the upload functionality.
10+
- Admin users must log in with valid credentials.
1411

15-
<button id="add-row-btn" class="btn btn-primary">Add Row</button>
12+
2. **File Upload System**:
13+
- Supports uploading files to a dedicated `uploads/` directory.
14+
- Stores file information in a MySQL database.
1615

16+
3. **File Management**:
17+
- Dynamically displays a list of uploaded files.
1718

18-
## How it works
19-
The script will save the First | Last | Email fields data in the database (see attached sample - `accounts.sql`) and will also save the path for the uploaded file ( e.g. `uploads/filename.jpg` ) and in the same will upload your file to the server in the upload directory ( e.g. `/uploads` )
19+
4. **User Management**:
20+
- Includes a login system for admins.
21+
- Role-based access ensures non-admins cannot access restricted pages.
2022

21-
# Requirements
22-
- Apache2 or better
23-
- MySQL - 5.5.x or better
24-
- PHP 7.x or better
25-
- an upload directory with "chmod 755" for the files to upload.
23+
5. **Secure Code**:
24+
- Uses prepared statements to prevent SQL injection.
25+
- Passwords are hashed with `password_hash` for secure storage.
2626

27-
It shouldn't be a problem running on older versions of Apache/PHP/MySQL but I didn't tested it.
27+
6. **Optional Admin Registration**:
28+
- A separate registration page allows adding new admin users.
2829

29-
# Usage
30-
- save the script on a webserver in a directory for your project (e.g. `/var/www/my_project/`)
31-
- create in the project directory a new directory and name it "uploads" (e.g. `/var/www/my_project/uploads`). If you chose a different name, make sure to change the name in the script too.
32-
- change the permissions on the "uploads" folder to 755 (`sudo chmod -R 755 /var/www/my_project/uploads` or `sudo chmod u+rwX,go+r -R /var/www/my_project/uploads`)
33-
- create a database and inside the database import the attached accounts.sql file:
34-
1. Open a terminal or command prompt on your computer.
35-
2. Log in to MySQL using the mysql command-line tool, using the username and password for your MySQL server: `mysql -u username -p` (Replace the username with your MySQL username, and you will be prompted to enter your MySQL password)
36-
3. Create a new database (if it doesn't already exist) by running the following command: `CREATE DATABASE database_name;` (Replace database_name with the name of the database you want to create)
37-
4. Switch to the new database by running the following command: `USE database_name;`
38-
5. Import the SQL file into the database by running the following command: `SOURCE /path/to/accounts.sql;` (Replace `/path/to/accounts.sql` with the actuall path to the `accounts.sql` file on your machine )
39-
- modify the script to use the credentials for your DB
40-
- open the script via a web browser ( e.g. http://localhost/my_project/script_name.php ) and test it.
4130

4231

43-
# To do
44-
- I'll have to split everything and create a templating structure, maybe also an admin area.
32+
## Installation
4533

46-
Enjoy!
34+
### Prerequisites
35+
- A web server with PHP 7.4 or higher (e.g., Apache or Nginx).
36+
- MySQL database.
37+
- Basic knowledge of setting up PHP projects.
38+
39+
### Steps to Set Up the Project
40+
41+
1. **Clone the Repository**:
42+
```bash
43+
git clone https://github.com/marinnedea/dynamic-PHP-MySQL-jQuery-upload-form-.git
44+
cd dynamic-PHP-MySQL-jQuery-upload-form-
45+
```
46+
47+
2. **Set Up the Database**:
48+
- Import the provided `accounts.sql` file into your MySQL database:
49+
```bash
50+
mysql -u your_username -p your_database_name < accounts.sql
51+
```
52+
- Update the database credentials in the following files:
53+
- `index.php`
54+
- `login.php`
55+
- `register.php` (if used)
56+
57+
3. **Set Directory Permissions**:
58+
- Ensure the `uploads/` directory is writable by the web server:
59+
```bash
60+
mkdir uploads
61+
chmod 755 uploads
62+
```
63+
64+
4. **Access the Project**:
65+
- Open your browser and navigate to the project:
66+
- `login.php`: Admin login page.
67+
- `register.php` (Optional): Register a new admin user.
68+
- `index.php`: Admin area for uploading and viewing files (accessible only after login).
69+
70+
71+
72+
## Usage
73+
74+
### Admin Login
75+
1. Navigate to the `login.php` page.
76+
2. Log in using the default admin credentials (if provided) or create a new admin user via `register.php`.
77+
78+
### File Upload
79+
1. After logging in, upload files using the form on `index.php`.
80+
2. Uploaded files are saved in the `uploads/` directory and listed dynamically.
81+
82+
### Logout
83+
- Click the **Logout** link to end your session.
84+
85+
86+
87+
## File Structure
88+
89+
```
90+
dynamic-PHP-MySQL-jQuery-upload-form-/
91+
│
92+
├── index.php # Main file upload area (admin only)
93+
├── login.php # Admin login page
94+
├── register.php # Optional admin registration page
95+
├── logout.php # Ends the admin session
96+
├── uploads/ # Directory where uploaded files are stored
97+
├── accounts.sql # SQL file to set up the users table
98+
├── README.md # Project documentation
99+
```
100+
101+
102+
## Security
103+
104+
- **Authentication**: Only authenticated users can access the upload form.
105+
- **Password Hashing**: Passwords are hashed before storing them in the database.
106+
- **SQL Injection Prevention**: All database interactions use prepared statements.
107+
- **Role-Based Access Control**: Only users with the `admin` role can access the admin area.
108+
109+
110+
## Future Enhancements
111+
112+
1. Add a progress bar for file uploads using jQuery.
113+
2. Implement file type and size validation on both client and server sides.
114+
3. Add a feature for admin users to delete uploaded files.
115+
4. Enhance the UI with modern CSS frameworks (e.g., Bootstrap or TailwindCSS).
116+
117+
118+
## Contributing
119+
120+
Feel free to submit issues or contribute to the project. Pull requests are welcome!
121+
122+
1. Fork the repository.
123+
2. Create a feature branch (`git checkout -b feature-branch`).
124+
3. Commit your changes (`git commit -m "Description of changes"`).
125+
4. Push to your branch (`git push origin feature-branch`).
126+
5. Open a pull request.
127+
128+
129+
## License
130+
131+
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
132+
133+
134+
## Contact
135+
136+
For any inquiries or support, feel free to contact [Marin Nedea](https://github.com/marinnedea).

0 commit comments

Comments
 (0)