Technologies Used:- HTML, CSS, PHP, MySQL
Aim: To build a dynamic photo gallery web application that allows users to upload, view, and manage images using a user-friendly interface.
Problem Statement: Traditional photo storage methods are static and don’t offer much flexibility for online viewing or organizing. There's a need for a simple yet elegant web-based gallery that supports image uploads, storage, and categorized viewing.
Technology Description:
PHP (Hypertext Preprocessor): • PHP is a powerful server-side scripting language designed for web development. • It is used in this project to: o Handle form submissions (upload, delete, update). o Manage file uploads securely (e.g., checking file type and size). o Connect and interact with the MySQL database using SQL queries. o Generate dynamic content – like displaying images from the database. • PHP enables backend logic that runs on the server before the web page is sent to the user's browser.
MySQL: • MySQL is a popular relational database management system (RDBMS). • It is used to: o Store metadata about the uploaded images (e.g., title, filename, upload date). o Provide a structured and reliable way to retrieve, update, and delete records. o Maintain data consistency and integrity. • It integrates seamlessly with PHP through SQL queries.
XAMPP: • XAMPP is an open-source, cross-platform web server solution stack package developed by Apache Friends. • It includes: o Apache – the web server that runs the PHP scripts. o MySQL/MariaDB – the database engine. o PHP – the language interpreter. • XAMPP is used to: o Run the application locally on a developer’s machine. o Simulate a real server environment for development and testing. • It provides a simple control panel to manage services like Apache and MySQL.
HTML (HyperText Markup Language): • HTML is used to structure the frontend of the application. • It creates the layout of forms, buttons, and image display sections. • All form inputs for uploading, editing, and deleting images are built using HTML.
CSS (Cascading Style Sheets): • CSS is used to style the application, making the gallery visually appealing. • It is used for: o Designing the image grid layout. o Enhancing the look and feel of buttons, forms, and text. o Making the UI responsive and attractive.
SOLUTION FOR THE PROBLEM:
To overcome the difficulties of organizing and displaying photos efficiently, this project provides a simple yet powerful Photo Gallery Web Application built using PHP, MySQL, and XAMPP. 1. Image Upload and Storage: Users can easily upload images which are securely stored in a dedicated folder, while the image metadata like title and upload date is saved in a MySQL database. 2. Dynamic Gallery Display: The images are dynamically fetched and displayed in a user-friendly gallery layout, making it visually appealing and easily accessible without manual updates. 3. Localhost-based Solution: By using XAMPP, the system runs entirely on a local server, making it cost-effective, fast, and independent of any third-party platform, while also being easily scalable for future features like user login or album categorization.
SAMPLE CODE:
Login.php:
<script> start_loader() </script> <!-- <p class="mb-1">
<a href="forgot-password.html">I forgot my password</a>
</p> -->
</div>
<!-- /.card-body -->
Index.php:
query("SELECT * FROM users where id ='".$_settings->userdata('id')."'"); foreach($user->fetch_array() as $k =>$v){ $meta[$k] = $v; } ?> chk_flashdata('success')): ?> <script> alert_toast("flashdata('success') ?>",'success') </script> reader.readAsDataURL(input.files[0]);
}
}
$('#manage-user').submit(function(e){
e.preventDefault();
start_loader()
$.ajax({
url:_base_url_+'classes/Users.php?f=save',
data: new FormData($(this)[0]),
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST',
success:function(resp){
if(resp ==1){
location.reload()
}else{
$('#msg').html('<div class="alert alert-danger">Username already exist</div>')
end_loader()
}
}
})
})
})
})
})