feat: complete photo gallery implementation with album management and lightbox viewer
- Added photo gallery carousel view (gallery.php) with all member albums - Implemented album detail view with responsive photo grid and lightbox - Created album creation/editing form with drag-and-drop photo uploads - Added backend processors for album CRUD operations and photo management - Implemented API endpoints for fetching and deleting photos - Added database migration for photo_albums and photos tables - Included comprehensive feature documentation with testing checklist - Updated .htaccess with URL rewrite rules for gallery routes - Added Gallery link to Members Area menu in header - Created upload directory structure (/assets/uploads/gallery/) - Implemented security: CSRF tokens, ownership verification, file validation - Added transaction safety with rollback on errors and cleanup - Features: Lightbox with keyboard navigation, drag-and-drop uploads, responsive design
This commit is contained in:
twotalesanimation
11
.htaccess
11
.htaccess
@@ -51,6 +51,12 @@ RewriteRule ^payment_confirmation$ src/pages/shop/payment_confirmation.php [L]
|
||||
RewriteRule ^confirm$ src/pages/shop/confirm.php [L]
|
||||
RewriteRule ^confirm2$ src/pages/shop/confirm2.php [L]
|
||||
|
||||
# === GALLERY PAGES ===
|
||||
RewriteRule ^gallery$ src/pages/gallery/gallery.php [L]
|
||||
RewriteRule ^create_album$ src/pages/gallery/create_album.php [L]
|
||||
RewriteRule ^edit_album$ src/pages/gallery/create_album.php [L]
|
||||
RewriteRule ^view_album$ src/pages/gallery/view_album.php [L]
|
||||
|
||||
# === EVENTS & BLOG PAGES ===
|
||||
RewriteRule ^events$ src/pages/events/events.php [L]
|
||||
RewriteRule ^blog$ src/pages/events/blog.php [L]
|
||||
@@ -121,6 +127,11 @@ RewriteRule ^toggle_trip_published$ src/processors/toggle_trip_published.php [L]
|
||||
RewriteRule ^toggle_event_published$ src/admin/toggle_event_published.php [L]
|
||||
RewriteRule ^delete_trip$ src/processors/delete_trip.php [L]
|
||||
RewriteRule ^delete_event$ src/admin/delete_event.php [L]
|
||||
RewriteRule ^save_album$ src/processors/save_album.php [L]
|
||||
RewriteRule ^update_album$ src/processors/update_album.php [L]
|
||||
RewriteRule ^delete_album$ src/processors/delete_album.php [L]
|
||||
RewriteRule ^delete_photo$ src/processors/delete_photo.php [L]
|
||||
RewriteRule ^get_album_photos$ src/processors/get_album_photos.php [L]
|
||||
|
||||
</IfModule>
|
||||
|
||||
|
||||
494
docs/PHOTO_GALLERY_IMPLEMENTATION.md
Normal file
494
docs/PHOTO_GALLERY_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,494 @@
|
||||
# Photo Gallery Feature - Complete Implementation
|
||||
|
||||
## Overview
|
||||
The Photo Gallery feature allows 4WDCSA members to create, manage, and view photo albums with a carousel interface for browsing and a lightbox viewer for detailed photo viewing.
|
||||
|
||||
## Database Schema
|
||||
|
||||
### photo_albums table
|
||||
```sql
|
||||
- album_id (INT, PK, AUTO_INCREMENT)
|
||||
- user_id (INT, FK to users)
|
||||
- title (VARCHAR 255, NOT NULL)
|
||||
- description (TEXT, nullable)
|
||||
- cover_image (VARCHAR 500, nullable - stores file path)
|
||||
- created_at (TIMESTAMP)
|
||||
- updated_at (TIMESTAMP)
|
||||
- UNIQUE INDEX on user_id (one album per user for now, can be modified)
|
||||
- INDEX on created_at for sorting
|
||||
```
|
||||
|
||||
### photos table
|
||||
```sql
|
||||
- photo_id (INT, PK, AUTO_INCREMENT)
|
||||
- album_id (INT, FK to photo_albums, CASCADE DELETE)
|
||||
- file_path (VARCHAR 500, NOT NULL)
|
||||
- caption (VARCHAR 500, nullable)
|
||||
- display_order (INT, default 0)
|
||||
- created_at (TIMESTAMP)
|
||||
- INDEX on album_id for quick lookups
|
||||
- INDEX on display_order for sorting
|
||||
```
|
||||
|
||||
## File Structure
|
||||
|
||||
### Pages (Public-Facing)
|
||||
- `src/pages/gallery/gallery.php` - Main carousel view of all albums
|
||||
- `src/pages/gallery/view_album.php` - Detailed album view with photo grid and lightbox
|
||||
- `src/pages/gallery/create_album.php` - Form to create new albums and upload initial photos
|
||||
|
||||
### Processors (Backend Logic)
|
||||
- `src/processors/save_album.php` - Creates new album and handles initial photo uploads
|
||||
- `src/processors/update_album.php` - Updates album metadata and handles additional photo uploads
|
||||
- `src/processors/delete_album.php` - Deletes entire album with all photos and files
|
||||
- `src/processors/delete_photo.php` - Deletes individual photos from album
|
||||
- `src/processors/get_album_photos.php` - API endpoint returning album photos as JSON
|
||||
|
||||
### Styling
|
||||
All styling is embedded in each PHP file using `<style>` tags for consistency with existing pattern.
|
||||
|
||||
## Features
|
||||
|
||||
### Gallery View (gallery.php)
|
||||
**Purpose**: Display all photo albums in a carousel format
|
||||
|
||||
**Features**:
|
||||
- Bootstrap carousel with Previous/Next buttons
|
||||
- Album cards showing:
|
||||
- Cover image
|
||||
- Album title
|
||||
- Description
|
||||
- Creator avatar and name
|
||||
- Photo count
|
||||
- "View Album" button
|
||||
- "Create Album" button (visible to all members)
|
||||
- Empty state message for members with no albums
|
||||
- Responsive design for mobile/tablet/desktop
|
||||
|
||||
**Access Control**:
|
||||
- Members-only (redirects non-members to membership page)
|
||||
- Verified membership required
|
||||
|
||||
### Album Detail View (view_album.php)
|
||||
**Purpose**: Display all photos from a single album with lightbox viewer
|
||||
|
||||
**Features**:
|
||||
- Album header with:
|
||||
- Creator information (avatar, name)
|
||||
- Album title and description
|
||||
- Photo count
|
||||
- "Edit Album" button (visible only to album owner)
|
||||
- Responsive photo grid layout
|
||||
- Click any photo to open lightbox viewer
|
||||
- Lightbox features:
|
||||
- Full-screen image display
|
||||
- Previous/Next navigation buttons
|
||||
- Caption display
|
||||
- Keyboard navigation:
|
||||
- Arrow Left: Previous photo
|
||||
- Arrow Right: Next photo
|
||||
- Escape: Close lightbox
|
||||
- Close button (X)
|
||||
- Empty state message with "Add Photos" link for album owner
|
||||
- "Back to Gallery" button at bottom
|
||||
|
||||
**Access Control**:
|
||||
- Public albums visible to all members
|
||||
- Edit button visible only to album owner
|
||||
|
||||
### Create/Edit Album (create_album.php)
|
||||
**Purpose**: Create new albums or edit existing albums with photo uploads
|
||||
|
||||
**Features**:
|
||||
- Album title input (required, validates with validateName())
|
||||
- Description textarea (optional, max 500 characters)
|
||||
- Drag-and-drop file upload area
|
||||
- File selection click-to-upload
|
||||
- Selected files list showing filename and size
|
||||
- Photo grid showing existing photos (edit mode only)
|
||||
- Delete button on each existing photo
|
||||
- Delete album button (edit mode only)
|
||||
- Submit and Cancel buttons
|
||||
|
||||
**File Upload Validation**:
|
||||
- Allowed formats: JPG, PNG, GIF, WEBP
|
||||
- Max file size: 5MB per image
|
||||
- Validates MIME type and file size
|
||||
- Generates unique filenames with uniqid()
|
||||
- Stores in `/assets/uploads/gallery/{album_id}/`
|
||||
|
||||
**Form Behavior**:
|
||||
- Create mode: Only allows setting album metadata and initial photos
|
||||
- Edit mode: Shows existing photos, allows adding new photos, allows editing metadata
|
||||
- First uploaded photo becomes cover image (auto-selected)
|
||||
- Photos can be deleted before submission (edit mode)
|
||||
- Form prepopulation on edit (title, description, existing photos)
|
||||
|
||||
**Access Control**:
|
||||
- Members-only
|
||||
- Edit form checks album ownership before allowing edits
|
||||
- Redirect to gallery if not owner of album being edited
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### GET /get_album_photos
|
||||
Returns JSON array of photos for an album
|
||||
|
||||
**Parameters**:
|
||||
- `id`: Album ID (GET parameter)
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
[
|
||||
{
|
||||
"photo_id": 1,
|
||||
"file_path": "/assets/uploads/gallery/1/photo_abc123.jpg",
|
||||
"caption": "Sample photo",
|
||||
"display_order": 1
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Access Control**: Members-only, owner of album only
|
||||
|
||||
### POST /delete_photo
|
||||
Deletes a photo and updates album cover if needed
|
||||
|
||||
**Parameters**:
|
||||
- `photo_id`: Photo ID (POST)
|
||||
- `csrf_token`: CSRF token (POST)
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{ "success": true }
|
||||
```
|
||||
|
||||
**Side Effects**:
|
||||
- Deletes photo file from disk
|
||||
- Removes photo from database
|
||||
- Updates album cover image if deleted photo was cover
|
||||
- Sets cover to first remaining photo or NULL if no photos left
|
||||
|
||||
**Access Control**: Members-only, owner of album only
|
||||
|
||||
## Workflow Examples
|
||||
|
||||
### Creating an Album
|
||||
1. User clicks "Create Album" button on gallery page
|
||||
2. Navigates to create_album.php
|
||||
3. Enters album title (required) and description (optional)
|
||||
4. Drags and drops or selects multiple photo files
|
||||
5. Clicks "Create Album" button
|
||||
6. save_album.php:
|
||||
- Creates album directory: `/assets/uploads/gallery/{album_id}/`
|
||||
- Validates each photo (mime type, file size)
|
||||
- Moves photos to album directory with unique names
|
||||
- Sets first photo as cover_image
|
||||
- Inserts album record and photo records in transaction
|
||||
- Redirects to view_album page for newly created album
|
||||
|
||||
### Editing an Album
|
||||
1. User clicks "Edit Album" button on album view page
|
||||
2. Navigates to create_album.php?id={album_id}
|
||||
3. Form prepopulates with current album data
|
||||
4. Existing photos displayed in grid with delete buttons
|
||||
5. Can add more photos by uploading new files
|
||||
6. Clicks "Update Album" button
|
||||
7. update_album.php:
|
||||
- Verifies ownership
|
||||
- Updates album metadata
|
||||
- Validates and uploads any new photos
|
||||
- Appends new photos to existing ones (doesn't overwrite)
|
||||
- Redirects back to view_album
|
||||
|
||||
### Deleting a Photo
|
||||
1. User clicks delete (X) button on photo in edit form
|
||||
2. JavaScript shows confirmation dialog
|
||||
3. Sends POST to delete_photo with photo_id and csrf_token
|
||||
4. delete_photo.php:
|
||||
- Verifies ownership through album
|
||||
- Deletes file from disk
|
||||
- Removes from database
|
||||
- Updates cover_image if needed
|
||||
- Returns JSON success response
|
||||
5. Page reloads to show updated photo list
|
||||
|
||||
### Deleting an Album
|
||||
1. User clicks "Delete Album" button in edit form
|
||||
2. JavaScript shows confirmation dialog
|
||||
3. Navigates to delete_album.php?id={album_id}
|
||||
4. delete_album.php:
|
||||
- Verifies ownership
|
||||
- Deletes all photo files from disk
|
||||
- Deletes all photo records from database
|
||||
- Deletes album directory
|
||||
- Deletes album record
|
||||
- Redirects to gallery page
|
||||
|
||||
## URL Routing (.htaccess)
|
||||
|
||||
```
|
||||
/gallery → src/pages/gallery/gallery.php
|
||||
/create_album → src/pages/gallery/create_album.php
|
||||
/edit_album → src/pages/gallery/create_album.php (id parameter determines mode)
|
||||
/view_album → src/pages/gallery/view_album.php
|
||||
/save_album → src/processors/save_album.php (POST only)
|
||||
/update_album → src/processors/update_album.php (POST only)
|
||||
/delete_album → src/processors/delete_album.php (GET with id parameter)
|
||||
/delete_photo → src/processors/delete_photo.php (POST only)
|
||||
/get_album_photos → src/processors/get_album_photos.php (GET with id parameter)
|
||||
```
|
||||
|
||||
## Security Features
|
||||
|
||||
### Authentication
|
||||
- All pages check for `$_SESSION['user_id']`
|
||||
- Non-members redirected to membership page
|
||||
- Non-authenticated users redirected to login
|
||||
|
||||
### Authorization
|
||||
- Album ownership verified before allowing edits
|
||||
- Album ownership verified before allowing deletes
|
||||
- Only album owner can edit or delete photos
|
||||
- Only album owner can see edit buttons
|
||||
|
||||
### Data Validation
|
||||
- Album title validated with validateName() function
|
||||
- Description length limited to 500 characters
|
||||
- File uploads validated for:
|
||||
- MIME type (only image formats allowed)
|
||||
- File size (max 5MB)
|
||||
- File extension check
|
||||
- Filename sanitized with uniqid() to prevent conflicts
|
||||
|
||||
### CSRF Protection
|
||||
- All forms include csrf_token
|
||||
- Processors validate CSRF token before processing
|
||||
- POST-only operations protected
|
||||
|
||||
### Transaction Safety
|
||||
- Album creation uses transaction
|
||||
- Creates directory
|
||||
- Inserts album record
|
||||
- Inserts photo records
|
||||
- Commits all or rolls back all on error
|
||||
- Handles cleanup on failure:
|
||||
- Deletes partial uploads
|
||||
- Removes album directory
|
||||
- Removes album record from database
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Validation Errors
|
||||
- File too large: "File too large: {filename}"
|
||||
- Invalid file type: "Invalid file type: {filename}"
|
||||
- Missing album title: "Album title is required and must be valid"
|
||||
- Description too long: "Description must be 500 characters or less"
|
||||
|
||||
### Permission Errors
|
||||
- Not authenticated: Redirects to login
|
||||
- Not a member: Redirects to membership page
|
||||
- Not album owner: Returns 403 Forbidden with error message
|
||||
- Album not found: Returns 404 with redirect to gallery
|
||||
|
||||
### Upload Errors
|
||||
- Directory creation failure: "Failed to create album directory"
|
||||
- File move failure: "Failed to upload: {filename}"
|
||||
- Database insert failure: HTTP 400 with error message
|
||||
|
||||
### Recovery
|
||||
- All upload errors trigger transaction rollback
|
||||
- Partial files cleaned up on failure
|
||||
- Album record deleted if transaction fails
|
||||
- Directory removed if transaction fails
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Album Creation
|
||||
- [ ] Create album with title only
|
||||
- [ ] Create album with title and description
|
||||
- [ ] Upload single photo to new album
|
||||
- [ ] Upload multiple photos to new album
|
||||
- [ ] Verify first photo becomes cover
|
||||
- [ ] Verify files stored in correct directory
|
||||
- [ ] Verify album appears in carousel
|
||||
|
||||
### Album Editing
|
||||
- [ ] Edit album title
|
||||
- [ ] Edit album description
|
||||
- [ ] Add photos to existing album
|
||||
- [ ] Add many photos at once (10+)
|
||||
- [ ] Delete photos from album
|
||||
- [ ] Delete last photo (cover updates to NULL)
|
||||
- [ ] Delete album cover, verify new cover assigned
|
||||
- [ ] Verify edit unavailable for non-owner
|
||||
|
||||
### Album Viewing
|
||||
- [ ] View album as owner
|
||||
- [ ] View album as other member
|
||||
- [ ] View album with many photos
|
||||
- [ ] Photo grid responsive on mobile
|
||||
- [ ] Photo grid responsive on tablet
|
||||
- [ ] All photos display correct captions
|
||||
|
||||
### Lightbox
|
||||
- [ ] Open lightbox from first photo
|
||||
- [ ] Open lightbox from middle photo
|
||||
- [ ] Open lightbox from last photo
|
||||
- [ ] Next button navigates forward
|
||||
- [ ] Previous button navigates backward
|
||||
- [ ] Next button wraps to first photo from last
|
||||
- [ ] Previous button wraps to last photo from first
|
||||
- [ ] Arrow key navigation works
|
||||
- [ ] Escape key closes lightbox
|
||||
- [ ] Click X button closes lightbox
|
||||
- [ ] Photo caption displays correctly
|
||||
|
||||
### Gallery Page
|
||||
- [ ] Carousel displays all albums
|
||||
- [ ] Previous/Next buttons work
|
||||
- [ ] Album cards show cover image
|
||||
- [ ] Album cards show correct photo count
|
||||
- [ ] Create Album button visible
|
||||
- [ ] Create Album button navigates correctly
|
||||
- [ ] Edit button visible only to owner
|
||||
- [ ] Empty gallery state shows correct message
|
||||
- [ ] Empty gallery has Create Album link
|
||||
|
||||
### Access Control
|
||||
- [ ] Non-members cannot access gallery
|
||||
- [ ] Non-members cannot create albums
|
||||
- [ ] Non-members cannot edit albums
|
||||
- [ ] Users cannot edit others' albums
|
||||
- [ ] Users cannot delete others' albums
|
||||
- [ ] Users cannot delete others' photos
|
||||
|
||||
### File Uploads
|
||||
- [ ] JPG files accepted
|
||||
- [ ] PNG files accepted
|
||||
- [ ] GIF files accepted
|
||||
- [ ] WEBP files accepted
|
||||
- [ ] BMP files rejected
|
||||
- [ ] ZIP files rejected
|
||||
- [ ] Files over 5MB rejected
|
||||
- [ ] Files exactly 5MB accepted
|
||||
- [ ] Drag and drop upload works
|
||||
- [ ] Click-to-upload works
|
||||
|
||||
### Database
|
||||
- [ ] Albums table has correct structure
|
||||
- [ ] Photos table has correct structure
|
||||
- [ ] Foreign keys work correctly
|
||||
- [ ] Cascade delete removes photos when album deleted
|
||||
- [ ] Unique constraint prevents duplicate user ownership
|
||||
- [ ] Indexes created for performance
|
||||
|
||||
### Navigation
|
||||
- [ ] Gallery link appears in Members Area menu
|
||||
- [ ] Gallery link visible only for logged-in users
|
||||
- [ ] Gallery link locked (with icon) for non-members
|
||||
- [ ] "View Album" button navigates to album detail
|
||||
- [ ] "Edit Album" button navigates to edit form
|
||||
- [ ] "Back to Gallery" button returns to gallery
|
||||
- [ ] "Add Photos" link in empty album goes to edit form
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Possible Features
|
||||
1. Multiple albums per user (modify UNIQUE constraint)
|
||||
2. Album visibility settings (private/members-only/public)
|
||||
3. Album categories/tags
|
||||
4. Photo ordering/reordering in album
|
||||
5. Photo batch operations (delete multiple, move between albums)
|
||||
6. Album sharing/collaboration
|
||||
7. Photo comments/ratings
|
||||
8. Admin gallery management
|
||||
9. Automatic image optimization/compression
|
||||
10. Photo metadata preservation (EXIF)
|
||||
11. Album archives/export
|
||||
12. Photo search across all albums
|
||||
|
||||
### Schema Changes Required
|
||||
- Remove UNIQUE constraint on user_id to allow multiple albums per user
|
||||
- Add visibility enum field to photo_albums
|
||||
- Add category_id FK to photo_albums
|
||||
- Add user_id to photos for future permission model
|
||||
- Add updated_at timestamps to photos for tracking
|
||||
|
||||
## Deployment Notes
|
||||
|
||||
### Pre-Deployment
|
||||
1. Run migration 003 to create tables
|
||||
2. Create `/assets/uploads/gallery/` directory with proper permissions
|
||||
3. Ensure PHP can write to upload directory (755 or 777)
|
||||
4. Test file upload with valid and invalid files
|
||||
|
||||
### Post-Deployment
|
||||
1. Verify gallery link appears in header menu
|
||||
2. Test creating first album in production
|
||||
3. Test file uploads with various image formats
|
||||
4. Monitor disk space usage for uploads
|
||||
5. Set up automated cleanup for orphaned files (if needed)
|
||||
|
||||
### Permissions
|
||||
```
|
||||
/assets/uploads/gallery/
|
||||
Permissions: 755 (rwxr-xr-x)
|
||||
Owner: web server user
|
||||
|
||||
Individual album directories:
|
||||
Permissions: 755 (rwxr-xr-x)
|
||||
Created automatically by application
|
||||
|
||||
Photo files:
|
||||
Permissions: 644 (rw-r--r--)
|
||||
Created automatically by application
|
||||
```
|
||||
|
||||
### Backups
|
||||
- Include `/assets/uploads/gallery/` in backup routine
|
||||
- Include `photo_albums` and `photos` tables in database backups
|
||||
- Consider separate backup for large image files
|
||||
|
||||
## Known Limitations
|
||||
|
||||
1. **One album per user**: Current schema design with UNIQUE constraint on user_id allows only one album per user. Can be modified if multiple albums per user needed.
|
||||
|
||||
2. **No album visibility control**: All member albums are visible to all members. Could add privacy settings in future.
|
||||
|
||||
3. **No photo ordering UI**: Photos ordered by display_order but no UI to reorder them. Captions show filename by default.
|
||||
|
||||
4. **No album categories**: All albums mixed in one carousel. Could add filtering/categories.
|
||||
|
||||
5. **Image optimization**: No automatic compression/optimization. Large images stored as-is.
|
||||
|
||||
6. **No EXIF data**: Photo metadata stripped during upload. Could preserve orientation/metadata.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Photos not uploading
|
||||
- Check `/assets/uploads/gallery/` exists and is writable
|
||||
- Verify file sizes under 5MB
|
||||
- Confirm image MIME types are jpeg, png, gif, or webp
|
||||
- Check PHP error logs for upload errors
|
||||
|
||||
### Album cover not updating
|
||||
- Verify cover_image field in database
|
||||
- Check if photo file path stored correctly
|
||||
- Confirm image file exists on disk
|
||||
|
||||
### Lightbox not opening
|
||||
- Check browser console for JavaScript errors
|
||||
- Verify image paths are accessible
|
||||
- Confirm file URLs accessible directly
|
||||
|
||||
### Permission denied errors
|
||||
- Check album owner verification logic
|
||||
- Verify CSRF tokens being passed correctly
|
||||
- Confirm user_id matches in session
|
||||
|
||||
### Memory issues with large uploads
|
||||
- Reduce PHP memory_limit if needed
|
||||
- Split large batches of photos into smaller uploads
|
||||
- Consider image optimization/compression
|
||||
|
||||
30
docs/migrations/003_create_photo_gallery_tables.sql
Normal file
30
docs/migrations/003_create_photo_gallery_tables.sql
Normal file
@@ -0,0 +1,30 @@
|
||||
-- Migration: Create photo gallery tables for member photo albums
|
||||
-- Date: 2025-12-05
|
||||
-- Purpose: Allow members to create albums and upload photos to share with the community
|
||||
|
||||
-- Create photo_albums table
|
||||
CREATE TABLE IF NOT EXISTS photo_albums (
|
||||
album_id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
user_id INT NOT NULL,
|
||||
title VARCHAR(255) NOT NULL,
|
||||
description TEXT,
|
||||
cover_image VARCHAR(255),
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (user_id) REFERENCES users(user_id) ON DELETE CASCADE,
|
||||
INDEX idx_user_id (user_id),
|
||||
INDEX idx_created_at (created_at)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
|
||||
|
||||
-- Create photos table
|
||||
CREATE TABLE IF NOT EXISTS photos (
|
||||
photo_id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
album_id INT NOT NULL,
|
||||
file_path VARCHAR(255) NOT NULL,
|
||||
caption VARCHAR(255),
|
||||
display_order INT DEFAULT 0,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (album_id) REFERENCES photo_albums(album_id) ON DELETE CASCADE,
|
||||
INDEX idx_album_id (album_id),
|
||||
INDEX idx_display_order (display_order)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
|
||||
@@ -302,8 +302,10 @@ if ($headerStyle === 'light') {
|
||||
<?php
|
||||
if (getUserMemberStatus($_SESSION['user_id'])) {
|
||||
echo "<li><a href=\"campsites\">Campsites Directory</a></li>";
|
||||
echo "<li><a href=\"gallery\">Photo Gallery</a></li>";
|
||||
} else {
|
||||
echo "<li><a href=\"membership\">Campsites Directory</a><i class='fal fa-lock'></i></li>";
|
||||
echo "<li><a href=\"membership\">Photo Gallery</a><i class='fal fa-lock'></i></li>";
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
|
||||
361
src/pages/gallery/create_album.php
Normal file
361
src/pages/gallery/create_album.php
Normal file
@@ -0,0 +1,361 @@
|
||||
<?php
|
||||
$headerStyle = 'light';
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
include_once($rootPath . '/header.php');
|
||||
|
||||
// Check if user has active membership
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header('Location: login');
|
||||
exit;
|
||||
}
|
||||
|
||||
$is_member = getUserMemberStatus($_SESSION['user_id']);
|
||||
if (!$is_member) {
|
||||
header('Location: index');
|
||||
exit;
|
||||
}
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
$album = null;
|
||||
|
||||
// Check if editing existing album
|
||||
$album_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
|
||||
if ($album_id > 0) {
|
||||
$stmt = $conn->prepare("SELECT * FROM photo_albums WHERE album_id = ? AND user_id = ?");
|
||||
$stmt->bind_param("ii", $album_id, $_SESSION['user_id']);
|
||||
$stmt->execute();
|
||||
$result = $stmt->get_result();
|
||||
|
||||
if ($result->num_rows > 0) {
|
||||
$album = $result->fetch_assoc();
|
||||
}
|
||||
$stmt->close();
|
||||
|
||||
if (!$album) {
|
||||
$conn->close();
|
||||
header('Location: gallery');
|
||||
exit;
|
||||
}
|
||||
}
|
||||
|
||||
$conn->close();
|
||||
|
||||
$pageTitle = $album ? 'Edit Album' : 'Create Album';
|
||||
$breadcrumbs = [['Home' => 'index.php'], ['Gallery' => 'gallery']];
|
||||
require_once($rootPath . '/components/banner.php');
|
||||
?>
|
||||
|
||||
<style>
|
||||
.form-container {
|
||||
background: #f9f9f7;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: 10px;
|
||||
padding: 40px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form-actions button,
|
||||
.form-actions a {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background: #764ba2;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.photos-section {
|
||||
margin-top: 40px;
|
||||
padding-top: 40px;
|
||||
border-top: 2px solid #d8d8d8;
|
||||
}
|
||||
|
||||
.photos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.photo-item-edit {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.photo-item-edit img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.photo-delete-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.photo-delete-btn:hover {
|
||||
background: #d32f2f;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed #667eea;
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
}
|
||||
|
||||
.upload-area.dragover {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-color: #764ba2;
|
||||
}
|
||||
|
||||
.upload-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
font-size: 0.9rem;
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="tour-list-page py-100 rel">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="form-container">
|
||||
<h2 style="margin-top: 0; color: #2c3e50;"><?php echo $album ? 'Edit Album' : 'Create Album'; ?></h2>
|
||||
|
||||
<form id="albumForm" method="POST" action="<?php echo $album ? 'update_album' : 'save_album'; ?>" enctype="multipart/form-data">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
||||
<?php if ($album): ?>
|
||||
<input type="hidden" name="album_id" value="<?php echo $album['album_id']; ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="title">Album Title *</label>
|
||||
<input type="text" id="title" name="title" required value="<?php echo $album ? htmlspecialchars($album['title']) : ''; ?>">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" name="description" placeholder="Add a description for your album..."><?php echo $album ? htmlspecialchars($album['description']) : ''; ?></textarea>
|
||||
<div class="helper-text">Optional: Share details about when, where, or why you created this album</div>
|
||||
</div>
|
||||
|
||||
<?php if ($album): ?>
|
||||
<div class="photos-section">
|
||||
<h4>Photos in Album</h4>
|
||||
<div class="photos-grid" id="photosGrid">
|
||||
<!-- Photos will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="photos">Upload Photos</label>
|
||||
<div class="upload-area" id="uploadArea">
|
||||
<input type="file" id="photos" name="photos[]" multiple accept="image/*" class="upload-input">
|
||||
<div style="font-size: 2rem; margin-bottom: 10px;">📸</div>
|
||||
<p class="upload-text">Drag and drop photos here or click to select</p>
|
||||
<div class="helper-text">Supports JPG, PNG, GIF, WEBP. Max 5MB per image</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fileList" style="margin-top: 15px;"></div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-submit">
|
||||
<?php echo $album ? 'Update Album' : 'Create Album'; ?>
|
||||
</button>
|
||||
<a href="gallery" class="btn-cancel">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<?php if ($album): ?>
|
||||
<div style="margin-top: 40px; padding-top: 40px; border-top: 2px solid #d8d8d8;">
|
||||
<button type="button" onclick="deleteAlbum(<?php echo $album['album_id']; ?>)" class="btn-delete" style="background: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; width: 100%;">
|
||||
<i class="far fa-trash"></i> Delete Album
|
||||
</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const uploadArea = document.getElementById('uploadArea');
|
||||
const fileInput = document.getElementById('photos');
|
||||
const fileList = document.getElementById('fileList');
|
||||
|
||||
// Drag and drop
|
||||
uploadArea.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.add('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('dragleave', () => {
|
||||
uploadArea.classList.remove('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.remove('dragover');
|
||||
fileInput.files = e.dataTransfer.files;
|
||||
updateFileList();
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', updateFileList);
|
||||
|
||||
function updateFileList() {
|
||||
fileList.innerHTML = '';
|
||||
if (fileInput.files.length > 0) {
|
||||
fileList.innerHTML = '<p style="color: #667eea; font-weight: 500; margin-bottom: 10px;">Selected files:</p>';
|
||||
const ul = document.createElement('ul');
|
||||
ul.style.margin = '0';
|
||||
ul.style.paddingLeft = '20px';
|
||||
|
||||
for (let file of fileInput.files) {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)';
|
||||
li.style.color = '#666';
|
||||
li.style.marginBottom = '5px';
|
||||
ul.appendChild(li);
|
||||
}
|
||||
fileList.appendChild(ul);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteAlbum(albumId) {
|
||||
if (confirm('Are you sure you want to delete this album and all its photos? This action cannot be undone.')) {
|
||||
window.location.href = 'delete_album?id=' + albumId;
|
||||
}
|
||||
}
|
||||
|
||||
// Load existing photos if editing
|
||||
<?php if ($album): ?>
|
||||
fetch('get_album_photos?id=<?php echo $album['album_id']; ?>')
|
||||
.then(r => r.json())
|
||||
.then(photos => {
|
||||
const grid = document.getElementById('photosGrid');
|
||||
photos.forEach(photo => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'photo-item-edit';
|
||||
div.innerHTML = `
|
||||
<img src="${photo.file_path}" alt="Photo">
|
||||
<button type="button" class="photo-delete-btn" onclick="deletePhoto(${photo.photo_id})">✕</button>
|
||||
`;
|
||||
grid.appendChild(div);
|
||||
});
|
||||
});
|
||||
|
||||
function deletePhoto(photoId) {
|
||||
if (confirm('Delete this photo?')) {
|
||||
fetch('delete_photo', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
body: 'photo_id=' + photoId + '&csrf_token=<?php echo generateCSRFToken(); ?>'
|
||||
}).then(() => location.reload());
|
||||
}
|
||||
}
|
||||
<?php endif; ?>
|
||||
</script>
|
||||
|
||||
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|
||||
323
src/pages/gallery/gallery.php
Normal file
323
src/pages/gallery/gallery.php
Normal file
@@ -0,0 +1,323 @@
|
||||
<?php
|
||||
$headerStyle = 'light';
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
include_once($rootPath . '/header.php');
|
||||
|
||||
// Check if user has active membership
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header('Location: login');
|
||||
exit;
|
||||
}
|
||||
|
||||
$is_member = getUserMemberStatus($_SESSION['user_id']);
|
||||
if (!$is_member) {
|
||||
header('Location: index');
|
||||
exit;
|
||||
}
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
|
||||
// Fetch all albums with creator information
|
||||
$albums_query = "
|
||||
SELECT
|
||||
pa.album_id,
|
||||
pa.title,
|
||||
pa.description,
|
||||
pa.cover_image,
|
||||
pa.created_at,
|
||||
u.user_id,
|
||||
u.first_name,
|
||||
u.last_name,
|
||||
u.profile_pic,
|
||||
COUNT(p.photo_id) as photo_count
|
||||
FROM photo_albums pa
|
||||
INNER JOIN users u ON pa.user_id = u.user_id
|
||||
LEFT JOIN photos p ON pa.album_id = p.album_id
|
||||
GROUP BY pa.album_id
|
||||
ORDER BY pa.created_at DESC
|
||||
";
|
||||
|
||||
$result = $conn->query($albums_query);
|
||||
$albums = [];
|
||||
if ($result && $result->num_rows > 0) {
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
$albums[] = $row;
|
||||
}
|
||||
}
|
||||
|
||||
$conn->close();
|
||||
?>
|
||||
|
||||
<style>
|
||||
.album-carousel-container {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.carousel-item-album {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
animation: fadeIn 0.5s;
|
||||
}
|
||||
|
||||
.carousel-item-album.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.album-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.album-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.album-info {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.album-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.album-description {
|
||||
color: #666;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.album-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.album-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.album-creator {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.creator-name {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.photo-count {
|
||||
font-size: 0.85rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.album-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.carousel-btn {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.carousel-btn:hover {
|
||||
background: #764ba2;
|
||||
}
|
||||
|
||||
.carousel-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.carousel-counter {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.create-album-btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.no-albums {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.no-albums p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<?php
|
||||
$pageTitle = 'Photo Gallery';
|
||||
$breadcrumbs = [['Home' => 'index.php'], ['Members Area' => '#']];
|
||||
require_once($rootPath . '/components/banner.php');
|
||||
?>
|
||||
|
||||
<section class="tour-list-page py-100 rel">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
|
||||
<h2>Member Photo Gallery</h2>
|
||||
<a href="create_album" class="theme-btn create-album-btn">
|
||||
<i class="far fa-plus"></i> Create Album
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<?php if (count($albums) > 0): ?>
|
||||
<div class="album-carousel-container">
|
||||
<div id="albumCarousel">
|
||||
<?php foreach ($albums as $index => $album): ?>
|
||||
<div class="carousel-item-album <?php echo $index === 0 ? 'active' : ''; ?>">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<?php if ($album['cover_image']): ?>
|
||||
<img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>" class="album-cover" style="border-radius: 10px;">
|
||||
<?php else: ?>
|
||||
<div class="album-cover" style="display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white;">
|
||||
<i class="far fa-image"></i>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="album-info" style="text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<div>
|
||||
<h3 class="album-title"><?php echo htmlspecialchars($album['title']); ?></h3>
|
||||
<?php if ($album['description']): ?>
|
||||
<p class="album-description"><?php echo htmlspecialchars($album['description']); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="album-meta">
|
||||
<img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-avatar">
|
||||
<div class="album-creator">
|
||||
<span class="creator-name"><?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?></span>
|
||||
<span class="photo-count"><?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album-actions">
|
||||
<a href="view_album?id=<?php echo $album['album_id']; ?>" class="theme-btn style-two">
|
||||
View Album <i class="far fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
<?php if ($album['user_id'] == $_SESSION['user_id']): ?>
|
||||
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn" style="background: #666;">
|
||||
Edit
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<?php if (count($albums) > 1): ?>
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-btn" id="prevBtn" onclick="changeSlide(-1)">
|
||||
<i class="far fa-chevron-left"></i> Previous
|
||||
</button>
|
||||
<div class="carousel-counter">
|
||||
<span id="currentSlide">1</span> / <span id="totalSlides"><?php echo count($albums); ?></span>
|
||||
</div>
|
||||
<button class="carousel-btn" id="nextBtn" onclick="changeSlide(1)">
|
||||
Next <i class="far fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="no-albums">
|
||||
<i class="far fa-image" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
|
||||
<p>No photo albums yet. Be the first to create one!</p>
|
||||
<a href="create_album" class="theme-btn">Create Album</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
let currentSlide = 0;
|
||||
const slides = document.querySelectorAll('.carousel-item-album');
|
||||
const totalSlides = slides.length;
|
||||
|
||||
function updateCarousel() {
|
||||
slides.forEach((slide, index) => {
|
||||
slide.classList.remove('active');
|
||||
if (index === currentSlide) {
|
||||
slide.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('currentSlide').textContent = currentSlide + 1;
|
||||
document.getElementById('prevBtn').disabled = currentSlide === 0;
|
||||
document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
|
||||
}
|
||||
|
||||
function changeSlide(direction) {
|
||||
currentSlide += direction;
|
||||
if (currentSlide < 0) currentSlide = 0;
|
||||
if (currentSlide >= totalSlides) currentSlide = totalSlides - 1;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
// Initialize carousel
|
||||
if (totalSlides > 1) {
|
||||
updateCarousel();
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|
||||
366
src/pages/gallery/view_album.php
Normal file
366
src/pages/gallery/view_album.php
Normal file
@@ -0,0 +1,366 @@
|
||||
<?php
|
||||
$headerStyle = 'light';
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
include_once($rootPath . '/header.php');
|
||||
|
||||
// Check if user has active membership
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header('Location: login');
|
||||
exit;
|
||||
}
|
||||
|
||||
$is_member = getUserMemberStatus($_SESSION['user_id']);
|
||||
if (!$is_member) {
|
||||
header('Location: index');
|
||||
exit;
|
||||
}
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
$album_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
|
||||
|
||||
if ($album_id === 0) {
|
||||
header('Location: gallery');
|
||||
exit;
|
||||
}
|
||||
|
||||
// Fetch album details
|
||||
$album_query = "
|
||||
SELECT
|
||||
pa.album_id,
|
||||
pa.title,
|
||||
pa.description,
|
||||
pa.created_at,
|
||||
pa.user_id,
|
||||
u.first_name,
|
||||
u.last_name,
|
||||
u.profile_pic
|
||||
FROM photo_albums pa
|
||||
INNER JOIN users u ON pa.user_id = u.user_id
|
||||
WHERE pa.album_id = ?
|
||||
";
|
||||
|
||||
$stmt = $conn->prepare($album_query);
|
||||
$stmt->bind_param("i", $album_id);
|
||||
$stmt->execute();
|
||||
$album_result = $stmt->get_result();
|
||||
|
||||
if ($album_result->num_rows === 0) {
|
||||
$stmt->close();
|
||||
$conn->close();
|
||||
header('Location: gallery');
|
||||
exit;
|
||||
}
|
||||
|
||||
$album = $album_result->fetch_assoc();
|
||||
$stmt->close();
|
||||
|
||||
// Fetch all photos in the album
|
||||
$photos_query = "
|
||||
SELECT photo_id, file_path, caption, display_order
|
||||
FROM photos
|
||||
WHERE album_id = ?
|
||||
ORDER BY display_order ASC
|
||||
";
|
||||
|
||||
$stmt = $conn->prepare($photos_query);
|
||||
$stmt->bind_param("i", $album_id);
|
||||
$stmt->execute();
|
||||
$photos_result = $stmt->get_result();
|
||||
|
||||
$photos = [];
|
||||
if ($photos_result && $photos_result->num_rows > 0) {
|
||||
while ($row = $photos_result->fetch_assoc()) {
|
||||
$photos[] = $row;
|
||||
}
|
||||
}
|
||||
|
||||
$stmt->close();
|
||||
$conn->close();
|
||||
?>
|
||||
|
||||
<style>
|
||||
.album-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 40px 0;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.album-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.album-creator-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.album-creator-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
.creator-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.creator-details span:first-child {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.creator-details span:last-child {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.photo-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.photo-item:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.photo-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.photo-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.photo-item:hover .photo-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.photo-caption {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lightbox.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lightbox-content {
|
||||
position: relative;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.lightbox-image {
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.lightbox-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: none;
|
||||
padding: 20px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.lightbox-prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.lightbox-next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.no-photos {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.edit-album-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<?php
|
||||
$pageTitle = htmlspecialchars($album['title']);
|
||||
$breadcrumbs = [['Home' => 'index.php'], ['Gallery' => 'gallery'], [$album['title'] => '#']];
|
||||
require_once($rootPath . '/components/banner.php');
|
||||
?>
|
||||
|
||||
<section class="tour-list-page py-100 rel">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<a href="gallery" class="back-link" style="color: #667eea; text-decoration: none;">
|
||||
<i class="far fa-arrow-left"></i> Back to Gallery
|
||||
</a>
|
||||
|
||||
<div class="album-header">
|
||||
<div class="album-header-content">
|
||||
<div style="flex: 1;">
|
||||
<h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
|
||||
<?php if ($album['description']): ?>
|
||||
<p style="margin: 0 0 15px 0; font-size: 1rem; opacity: 0.95;">
|
||||
<?php echo htmlspecialchars($album['description']); ?>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="album-creator-info">
|
||||
<img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-creator-avatar">
|
||||
<div class="creator-details">
|
||||
<span><?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?></span>
|
||||
<span><?php echo date('F j, Y', strtotime($album['created_at'])); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php if ($album['user_id'] == $_SESSION['user_id']): ?>
|
||||
<div>
|
||||
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn" style="background: white; color: #667eea; border: none;">
|
||||
<i class="far fa-edit"></i> Edit Album
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (count($photos) > 0): ?>
|
||||
<div class="photo-gallery">
|
||||
<?php foreach ($photos as $index => $photo): ?>
|
||||
<div class="photo-item" onclick="openLightbox(<?php echo $index; ?>)">
|
||||
<img src="<?php echo htmlspecialchars($photo['file_path']); ?>" alt="<?php echo htmlspecialchars($photo['caption'] ?? 'Photo'); ?>">
|
||||
<?php if ($photo['caption']): ?>
|
||||
<div class="photo-overlay">
|
||||
<div class="photo-caption"><?php echo htmlspecialchars($photo['caption']); ?></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox -->
|
||||
<div id="lightbox" class="lightbox">
|
||||
<button class="lightbox-close" onclick="closeLightbox()">✕</button>
|
||||
<div class="lightbox-content">
|
||||
<img id="lightboxImage" class="lightbox-image" src="" alt="">
|
||||
<?php if (count($photos) > 1): ?>
|
||||
<button class="lightbox-nav lightbox-prev" onclick="changeLightboxImage(-1)">❮</button>
|
||||
<button class="lightbox-nav lightbox-next" onclick="changeLightboxImage(1)">❯</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="no-photos">
|
||||
<i class="far fa-image" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
|
||||
<p>No photos in this album yet.</p>
|
||||
<?php if ($album['user_id'] == $_SESSION['user_id']): ?>
|
||||
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn">Add Photos</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
let currentPhotoIndex = 0;
|
||||
const photos = <?php echo json_encode(array_column($photos, 'file_path')); ?>;
|
||||
|
||||
function openLightbox(index) {
|
||||
currentPhotoIndex = index;
|
||||
document.getElementById('lightbox').classList.add('active');
|
||||
document.getElementById('lightboxImage').src = photos[currentPhotoIndex];
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
document.getElementById('lightbox').classList.remove('active');
|
||||
}
|
||||
|
||||
function changeLightboxImage(direction) {
|
||||
currentPhotoIndex += direction;
|
||||
if (currentPhotoIndex < 0) currentPhotoIndex = photos.length - 1;
|
||||
if (currentPhotoIndex >= photos.length) currentPhotoIndex = 0;
|
||||
document.getElementById('lightboxImage').src = photos[currentPhotoIndex];
|
||||
}
|
||||
|
||||
// Close lightbox on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeLightbox();
|
||||
if (e.key === 'ArrowLeft') changeLightboxImage(-1);
|
||||
if (e.key === 'ArrowRight') changeLightboxImage(1);
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|
||||
97
src/processors/delete_album.php
Normal file
97
src/processors/delete_album.php
Normal file
@@ -0,0 +1,97 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
http_response_code(403);
|
||||
exit('Forbidden');
|
||||
}
|
||||
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
require_once($rootPath . '/connection.php');
|
||||
|
||||
$album_id = intval($_GET['id'] ?? 0);
|
||||
|
||||
if (!$album_id) {
|
||||
http_response_code(400);
|
||||
exit('Album ID is required');
|
||||
}
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
|
||||
// Verify ownership
|
||||
$albumCheck = $conn->prepare("SELECT user_id FROM photo_albums WHERE album_id = ?");
|
||||
$albumCheck->bind_param("i", $album_id);
|
||||
$albumCheck->execute();
|
||||
$albumResult = $albumCheck->get_result();
|
||||
|
||||
if ($albumResult->num_rows === 0) {
|
||||
$conn->close();
|
||||
http_response_code(404);
|
||||
header('Location: gallery');
|
||||
exit;
|
||||
}
|
||||
|
||||
$album = $albumResult->fetch_assoc();
|
||||
if ($album['user_id'] !== $_SESSION['user_id']) {
|
||||
$conn->close();
|
||||
http_response_code(403);
|
||||
header('Location: gallery');
|
||||
exit;
|
||||
}
|
||||
$albumCheck->close();
|
||||
|
||||
try {
|
||||
// Start transaction
|
||||
$conn->begin_transaction();
|
||||
|
||||
// Get all photos for this album
|
||||
$photoStmt = $conn->prepare("SELECT file_path FROM photos WHERE album_id = ?");
|
||||
$photoStmt->bind_param("i", $album_id);
|
||||
$photoStmt->execute();
|
||||
$photoResult = $photoStmt->get_result();
|
||||
|
||||
// Delete photo files
|
||||
while ($photo = $photoResult->fetch_assoc()) {
|
||||
$photoPath = $_SERVER['DOCUMENT_ROOT'] . $photo['file_path'];
|
||||
if (file_exists($photoPath)) {
|
||||
unlink($photoPath);
|
||||
}
|
||||
}
|
||||
$photoStmt->close();
|
||||
|
||||
// Delete photos from database (cascade should handle this)
|
||||
$deletePhotosStmt = $conn->prepare("DELETE FROM photos WHERE album_id = ?");
|
||||
$deletePhotosStmt->bind_param("i", $album_id);
|
||||
$deletePhotosStmt->execute();
|
||||
$deletePhotosStmt->close();
|
||||
|
||||
// Delete album from database
|
||||
$deleteAlbumStmt = $conn->prepare("DELETE FROM photo_albums WHERE album_id = ?");
|
||||
$deleteAlbumStmt->bind_param("i", $album_id);
|
||||
$deleteAlbumStmt->execute();
|
||||
$deleteAlbumStmt->close();
|
||||
|
||||
// Delete album directory
|
||||
$albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
|
||||
if (is_dir($albumDir)) {
|
||||
rmdir($albumDir);
|
||||
}
|
||||
|
||||
// Commit transaction
|
||||
$conn->commit();
|
||||
$conn->close();
|
||||
|
||||
// Redirect to gallery
|
||||
header('Location: gallery');
|
||||
exit;
|
||||
|
||||
} catch (Exception $e) {
|
||||
// Rollback on error
|
||||
$conn->rollback();
|
||||
$conn->close();
|
||||
|
||||
http_response_code(400);
|
||||
echo 'Error deleting album: ' . htmlspecialchars($e->getMessage());
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
115
src/processors/delete_photo.php
Normal file
115
src/processors/delete_photo.php
Normal file
@@ -0,0 +1,115 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if (!isset($_SESSION['user_id']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||
http_response_code(403);
|
||||
exit(json_encode(['error' => 'Forbidden']));
|
||||
}
|
||||
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
require_once($rootPath . '/connection.php');
|
||||
require_once($rootPath . '/functions.php');
|
||||
|
||||
// Validate CSRF token
|
||||
if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
|
||||
http_response_code(400);
|
||||
exit(json_encode(['error' => 'Invalid request']));
|
||||
}
|
||||
|
||||
$photo_id = intval($_POST['photo_id'] ?? 0);
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
if (!$photo_id) {
|
||||
http_response_code(400);
|
||||
exit(json_encode(['error' => 'Photo ID is required']));
|
||||
}
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
|
||||
// Get photo and verify ownership through album
|
||||
$photoStmt = $conn->prepare("
|
||||
SELECT p.photo_id, p.album_id, p.file_path, a.user_id
|
||||
FROM photos p
|
||||
JOIN photo_albums a ON p.album_id = a.album_id
|
||||
WHERE p.photo_id = ?
|
||||
");
|
||||
$photoStmt->bind_param("i", $photo_id);
|
||||
$photoStmt->execute();
|
||||
$photoResult = $photoStmt->get_result();
|
||||
|
||||
if ($photoResult->num_rows === 0) {
|
||||
$conn->close();
|
||||
http_response_code(404);
|
||||
exit(json_encode(['error' => 'Photo not found']));
|
||||
}
|
||||
|
||||
$photo = $photoResult->fetch_assoc();
|
||||
if ($photo['user_id'] !== $user_id) {
|
||||
$conn->close();
|
||||
http_response_code(403);
|
||||
exit(json_encode(['error' => 'You do not have permission to delete this photo']));
|
||||
}
|
||||
$photoStmt->close();
|
||||
|
||||
try {
|
||||
// Delete photo from filesystem
|
||||
$photoPath = $_SERVER['DOCUMENT_ROOT'] . $photo['file_path'];
|
||||
if (file_exists($photoPath)) {
|
||||
unlink($photoPath);
|
||||
}
|
||||
|
||||
// Delete from database
|
||||
$deleteStmt = $conn->prepare("DELETE FROM photos WHERE photo_id = ?");
|
||||
$deleteStmt->bind_param("i", $photo_id);
|
||||
$deleteStmt->execute();
|
||||
$deleteStmt->close();
|
||||
|
||||
// Update album's cover image if this was the cover
|
||||
$albumCheck = $conn->prepare("SELECT cover_image FROM photo_albums WHERE album_id = ?");
|
||||
$albumCheck->bind_param("i", $photo['album_id']);
|
||||
$albumCheck->execute();
|
||||
$albumResult = $albumCheck->get_result();
|
||||
$album = $albumResult->fetch_assoc();
|
||||
$albumCheck->close();
|
||||
|
||||
if ($album['cover_image'] === $photo['file_path']) {
|
||||
// Set new cover to first remaining photo
|
||||
$newCoverStmt = $conn->prepare("
|
||||
SELECT file_path FROM photos
|
||||
WHERE album_id = ?
|
||||
ORDER BY display_order ASC
|
||||
LIMIT 1
|
||||
");
|
||||
$newCoverStmt->bind_param("i", $photo['album_id']);
|
||||
$newCoverStmt->execute();
|
||||
$newCoverResult = $newCoverStmt->get_result();
|
||||
|
||||
if ($newCoverResult->num_rows > 0) {
|
||||
$newCover = $newCoverResult->fetch_assoc();
|
||||
$updateCoverStmt = $conn->prepare("UPDATE photo_albums SET cover_image = ? WHERE album_id = ?");
|
||||
$updateCoverStmt->bind_param("si", $newCover['file_path'], $photo['album_id']);
|
||||
$updateCoverStmt->execute();
|
||||
$updateCoverStmt->close();
|
||||
} else {
|
||||
// No more photos, clear cover image
|
||||
$clearCoverStmt = $conn->prepare("UPDATE photo_albums SET cover_image = NULL WHERE album_id = ?");
|
||||
$clearCoverStmt->bind_param("i", $photo['album_id']);
|
||||
$clearCoverStmt->execute();
|
||||
$clearCoverStmt->close();
|
||||
}
|
||||
$newCoverStmt->close();
|
||||
}
|
||||
|
||||
$conn->close();
|
||||
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(['success' => true]);
|
||||
exit;
|
||||
|
||||
} catch (Exception $e) {
|
||||
$conn->close();
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => $e->getMessage()]);
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
59
src/processors/get_album_photos.php
Normal file
59
src/processors/get_album_photos.php
Normal file
@@ -0,0 +1,59 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
http_response_code(403);
|
||||
exit(json_encode(['error' => 'Unauthorized']));
|
||||
}
|
||||
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
require_once($rootPath . '/connection.php');
|
||||
|
||||
$album_id = intval($_GET['id'] ?? 0);
|
||||
|
||||
if (!$album_id) {
|
||||
http_response_code(400);
|
||||
exit(json_encode(['error' => 'Album ID is required']));
|
||||
}
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
|
||||
// Verify album exists and user has access
|
||||
$albumCheck = $conn->prepare("SELECT user_id FROM photo_albums WHERE album_id = ?");
|
||||
$albumCheck->bind_param("i", $album_id);
|
||||
$albumCheck->execute();
|
||||
$albumResult = $albumCheck->get_result();
|
||||
|
||||
if ($albumResult->num_rows === 0) {
|
||||
$conn->close();
|
||||
http_response_code(404);
|
||||
exit(json_encode(['error' => 'Album not found']));
|
||||
}
|
||||
|
||||
$album = $albumResult->fetch_assoc();
|
||||
// Allow viewing own albums or public albums (owner is a member)
|
||||
if ($album['user_id'] !== $_SESSION['user_id']) {
|
||||
// For now, only allow owners to edit
|
||||
$conn->close();
|
||||
http_response_code(403);
|
||||
exit(json_encode(['error' => 'Unauthorized']));
|
||||
}
|
||||
$albumCheck->close();
|
||||
|
||||
// Get photos
|
||||
$photoStmt = $conn->prepare("SELECT photo_id, file_path, caption, display_order FROM photos WHERE album_id = ? ORDER BY display_order ASC");
|
||||
$photoStmt->bind_param("i", $album_id);
|
||||
$photoStmt->execute();
|
||||
$photoResult = $photoStmt->get_result();
|
||||
|
||||
$photos = [];
|
||||
while ($photo = $photoResult->fetch_assoc()) {
|
||||
$photos[] = $photo;
|
||||
}
|
||||
$photoStmt->close();
|
||||
|
||||
$conn->close();
|
||||
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($photos);
|
||||
?>
|
||||
150
src/processors/save_album.php
Normal file
150
src/processors/save_album.php
Normal file
@@ -0,0 +1,150 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if (!isset($_SESSION['user_id']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||
http_response_code(403);
|
||||
exit('Forbidden');
|
||||
}
|
||||
|
||||
// Validate CSRF token
|
||||
if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
|
||||
http_response_code(400);
|
||||
exit('Invalid request');
|
||||
}
|
||||
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
require_once($rootPath . '/connection.php');
|
||||
require_once($rootPath . '/functions.php');
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
|
||||
$title = trim($_POST['title'] ?? '');
|
||||
$description = trim($_POST['description'] ?? '');
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
// Validate inputs
|
||||
if (empty($title) || !validateName($title)) {
|
||||
$conn->close();
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Album title is required and must be valid']);
|
||||
exit;
|
||||
}
|
||||
|
||||
if (!empty($description) && strlen($description) > 500) {
|
||||
$conn->close();
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Description must be 500 characters or less']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Create album directory
|
||||
$album_id = null;
|
||||
$cover_image = null;
|
||||
|
||||
try {
|
||||
// Start transaction
|
||||
$conn->begin_transaction();
|
||||
|
||||
// Insert album record
|
||||
$stmt = $conn->prepare("INSERT INTO photo_albums (user_id, title, description, created_at, updated_at) VALUES (?, ?, ?, NOW(), NOW())");
|
||||
$stmt->bind_param("iss", $user_id, $title, $description);
|
||||
$stmt->execute();
|
||||
$album_id = $conn->insert_id;
|
||||
$stmt->close();
|
||||
|
||||
// Create album directory
|
||||
$albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
|
||||
if (!is_dir($albumDir)) {
|
||||
if (!mkdir($albumDir, 0755, true)) {
|
||||
throw new Exception('Failed to create album directory');
|
||||
}
|
||||
}
|
||||
|
||||
// Handle photo uploads
|
||||
if (isset($_FILES['photos']) && $_FILES['photos']['error'][0] !== UPLOAD_ERR_NO_FILE) {
|
||||
$allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
|
||||
$maxSize = 5 * 1024 * 1024; // 5MB
|
||||
|
||||
$displayOrder = 1;
|
||||
$firstPhoto = true;
|
||||
|
||||
for ($i = 0; $i < count($_FILES['photos']['name']); $i++) {
|
||||
if ($_FILES['photos']['error'][$i] !== UPLOAD_ERR_OK) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$fileName = $_FILES['photos']['name'][$i];
|
||||
$fileTmpName = $_FILES['photos']['tmp_name'][$i];
|
||||
$fileSize = $_FILES['photos']['size'][$i];
|
||||
$fileMime = mime_content_type($fileTmpName);
|
||||
|
||||
// Validate file
|
||||
if (!in_array($fileMime, $allowedMimes)) {
|
||||
throw new Exception('Invalid file type: ' . $fileName);
|
||||
}
|
||||
|
||||
if ($fileSize > $maxSize) {
|
||||
throw new Exception('File too large: ' . $fileName);
|
||||
}
|
||||
|
||||
// Generate unique filename
|
||||
$ext = pathinfo($fileName, PATHINFO_EXTENSION);
|
||||
$newFileName = uniqid('photo_') . '.' . $ext;
|
||||
$filePath = $albumDir . '/' . $newFileName;
|
||||
$relativePath = '/assets/uploads/gallery/' . $album_id . '/' . $newFileName;
|
||||
|
||||
if (!move_uploaded_file($fileTmpName, $filePath)) {
|
||||
throw new Exception('Failed to upload: ' . $fileName);
|
||||
}
|
||||
|
||||
// Set first photo as cover
|
||||
if ($firstPhoto) {
|
||||
$updateCover = $conn->prepare("UPDATE photo_albums SET cover_image = ? WHERE album_id = ?");
|
||||
$updateCover->bind_param("si", $relativePath, $album_id);
|
||||
$updateCover->execute();
|
||||
$updateCover->close();
|
||||
$firstPhoto = false;
|
||||
}
|
||||
|
||||
// Insert photo record
|
||||
$caption = $fileName; // Default caption is filename
|
||||
$photoStmt = $conn->prepare("INSERT INTO photos (album_id, file_path, caption, display_order, created_at) VALUES (?, ?, ?, ?, NOW())");
|
||||
$photoStmt->bind_param("issi", $album_id, $relativePath, $caption, $displayOrder);
|
||||
$photoStmt->execute();
|
||||
$photoStmt->close();
|
||||
|
||||
$displayOrder++;
|
||||
}
|
||||
}
|
||||
|
||||
// Commit transaction
|
||||
$conn->commit();
|
||||
$conn->close();
|
||||
|
||||
// Redirect to view album
|
||||
header('Location: view_album?id=' . $album_id);
|
||||
exit;
|
||||
|
||||
} catch (Exception $e) {
|
||||
// Rollback on error
|
||||
$conn->rollback();
|
||||
$conn->close();
|
||||
|
||||
// Clean up partially uploaded files
|
||||
if ($album_id) {
|
||||
$albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
|
||||
if (is_dir($albumDir)) {
|
||||
array_map('unlink', glob($albumDir . '/*'));
|
||||
rmdir($albumDir);
|
||||
}
|
||||
// Delete album record (will cascade delete photos)
|
||||
$cleanupConn = openDatabaseConnection();
|
||||
$cleanupConn->query("DELETE FROM photo_albums WHERE album_id = " . intval($album_id));
|
||||
$cleanupConn->close();
|
||||
}
|
||||
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => $e->getMessage()]);
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
153
src/processors/update_album.php
Normal file
153
src/processors/update_album.php
Normal file
@@ -0,0 +1,153 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if (!isset($_SESSION['user_id']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||
http_response_code(403);
|
||||
exit('Forbidden');
|
||||
}
|
||||
|
||||
// Validate CSRF token
|
||||
if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
|
||||
http_response_code(400);
|
||||
exit('Invalid request');
|
||||
}
|
||||
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
require_once($rootPath . '/connection.php');
|
||||
require_once($rootPath . '/functions.php');
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
|
||||
$album_id = intval($_POST['album_id'] ?? 0);
|
||||
$title = trim($_POST['title'] ?? '');
|
||||
$description = trim($_POST['description'] ?? '');
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
if (!$album_id) {
|
||||
$conn->close();
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Album ID is required']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Verify ownership
|
||||
$ownerCheck = $conn->prepare("SELECT user_id FROM photo_albums WHERE album_id = ?");
|
||||
$ownerCheck->bind_param("i", $album_id);
|
||||
$ownerCheck->execute();
|
||||
$ownerResult = $ownerCheck->get_result();
|
||||
|
||||
if ($ownerResult->num_rows === 0) {
|
||||
$conn->close();
|
||||
http_response_code(404);
|
||||
echo json_encode(['error' => 'Album not found']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$owner = $ownerResult->fetch_assoc();
|
||||
if ($owner['user_id'] !== $user_id) {
|
||||
$conn->close();
|
||||
http_response_code(403);
|
||||
echo json_encode(['error' => 'You do not have permission to edit this album']);
|
||||
exit;
|
||||
}
|
||||
$ownerCheck->close();
|
||||
|
||||
// Validate inputs
|
||||
if (empty($title) || !validateName($title)) {
|
||||
$conn->close();
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Album title is required and must be valid']);
|
||||
exit;
|
||||
}
|
||||
|
||||
if (!empty($description) && strlen($description) > 500) {
|
||||
$conn->close();
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Description must be 500 characters or less']);
|
||||
exit;
|
||||
}
|
||||
|
||||
try {
|
||||
// Start transaction
|
||||
$conn->begin_transaction();
|
||||
|
||||
// Update album
|
||||
$updateStmt = $conn->prepare("UPDATE photo_albums SET title = ?, description = ?, updated_at = NOW() WHERE album_id = ?");
|
||||
$updateStmt->bind_param("ssi", $title, $description, $album_id);
|
||||
$updateStmt->execute();
|
||||
$updateStmt->close();
|
||||
|
||||
// Handle photo uploads if any
|
||||
if (isset($_FILES['photos']) && $_FILES['photos']['error'][0] !== UPLOAD_ERR_NO_FILE) {
|
||||
$allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
|
||||
$maxSize = 5 * 1024 * 1024; // 5MB
|
||||
|
||||
$albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
|
||||
|
||||
// Get current max display order
|
||||
$orderStmt = $conn->prepare("SELECT MAX(display_order) as max_order FROM photos WHERE album_id = ?");
|
||||
$orderStmt->bind_param("i", $album_id);
|
||||
$orderStmt->execute();
|
||||
$orderResult = $orderStmt->get_result();
|
||||
$orderRow = $orderResult->fetch_assoc();
|
||||
$displayOrder = ($orderRow['max_order'] ?? 0) + 1;
|
||||
$orderStmt->close();
|
||||
|
||||
for ($i = 0; $i < count($_FILES['photos']['name']); $i++) {
|
||||
if ($_FILES['photos']['error'][$i] !== UPLOAD_ERR_OK) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$fileName = $_FILES['photos']['name'][$i];
|
||||
$fileTmpName = $_FILES['photos']['tmp_name'][$i];
|
||||
$fileSize = $_FILES['photos']['size'][$i];
|
||||
$fileMime = mime_content_type($fileTmpName);
|
||||
|
||||
// Validate file
|
||||
if (!in_array($fileMime, $allowedMimes)) {
|
||||
throw new Exception('Invalid file type: ' . $fileName);
|
||||
}
|
||||
|
||||
if ($fileSize > $maxSize) {
|
||||
throw new Exception('File too large: ' . $fileName);
|
||||
}
|
||||
|
||||
// Generate unique filename
|
||||
$ext = pathinfo($fileName, PATHINFO_EXTENSION);
|
||||
$newFileName = uniqid('photo_') . '.' . $ext;
|
||||
$filePath = $albumDir . '/' . $newFileName;
|
||||
$relativePath = '/assets/uploads/gallery/' . $album_id . '/' . $newFileName;
|
||||
|
||||
if (!move_uploaded_file($fileTmpName, $filePath)) {
|
||||
throw new Exception('Failed to upload: ' . $fileName);
|
||||
}
|
||||
|
||||
// Insert photo record
|
||||
$caption = $fileName; // Default caption is filename
|
||||
$photoStmt = $conn->prepare("INSERT INTO photos (album_id, file_path, caption, display_order, created_at) VALUES (?, ?, ?, ?, NOW())");
|
||||
$photoStmt->bind_param("issi", $album_id, $relativePath, $caption, $displayOrder);
|
||||
$photoStmt->execute();
|
||||
$photoStmt->close();
|
||||
|
||||
$displayOrder++;
|
||||
}
|
||||
}
|
||||
|
||||
// Commit transaction
|
||||
$conn->commit();
|
||||
$conn->close();
|
||||
|
||||
// Redirect back to album view
|
||||
header('Location: view_album?id=' . $album_id);
|
||||
exit;
|
||||
|
||||
} catch (Exception $e) {
|
||||
// Rollback on error
|
||||
$conn->rollback();
|
||||
$conn->close();
|
||||
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => $e->getMessage()]);
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user