# Testing Procedures - Database Integration

## Overview

This guide walks through testing the three database-integrated pages to ensure they load correctly, display dynamic content, and maintain responsive design.

**Pages to Test:**
1. ✅ services.php (from previous session)
2. ⏳ team.php (newly completed)
3. ⏳ blog-grid-4-masonary.php (newly completed)

---

## Pre-Testing Checklist

- [ ] XAMPP running (Apache + MySQL started)
- [ ] Database `powerzone_db` exists
- [ ] includes/db.php connection file exists
- [ ] All three PHP files created/updated
- [ ] Browser ready (Chrome/Firefox/Safari)
- [ ] Developer tools available (F12)

---

## Test 1: team.php - Basic Load Test

### Objective
Verify team.php loads without errors and displays team members from database.

### Steps

1. **Navigate to page**
   ```
   URL: http://localhost/fitness/team.php
   ```

2. **Check for PHP errors**
   - Look for red/yellow error messages
   - Check browser console (F12 → Console tab)
   - No PHP errors should appear

3. **Verify content displays**
   - [ ] Page header loads
   - [ ] Team members section visible
   - [ ] At least 6 team member cards appear

4. **Verify team member data**
   - [ ] Names display (DESERT, CHARLES, OLIVER, ELIJAH, JAMES, AMELIA)
   - [ ] Positions display (Fitness Trainer, Beauty Trainer, etc.)
   - [ ] Team member images load
   - [ ] Social media icons visible (Facebook, Instagram, Twitter)

5. **Verify functionality**
   - [ ] Click social media icons - links open in new tab
   - [ ] Hover over cards - animation effects work
   - [ ] Page footer loads

### Expected Result
✅ Page displays 6 team members with all fields populated, no errors

### If Issues Occur

**Issue: Blank page or white screen**
- Check browser console (F12)
- Look for PHP parse errors
- Verify includes/db.php exists and has valid connection

**Issue: "Cannot connect to database" error**
- Verify MySQL running
- Check connection details in includes/db.php (localhost, root, no password)
- Verify powerzone_db exists in database

**Issue: Team members don't display**
- Check database: has team_members table been created?
- Verify auto-populate logic ran (should insert 6 sample records if empty)
- Check phpMyAdmin: navigate to powerzone_db → team_members table

---

## Test 2: team.php - Responsive Design Test

### Objective
Verify team.php displays correctly on different screen sizes.

### Desktop Test (1920x1080 or larger)
1. Open team.php in full window
2. [ ] Verify 3 team members per row
3. [ ] Cards properly spaced
4. [ ] Text readable and properly formatted
5. [ ] Social icons aligned correctly

### Tablet Test (768x1024 iPad size)
1. Resize browser to 768px width (or use device)
2. [ ] Verify 2 team members per row
3. [ ] Layout adapts properly
4. [ ] No horizontal scrolling
5. [ ] Touch-friendly spacing maintained

### Mobile Test (375x812 iPhone size)
1. Resize browser to 375px width (or use device)
2. [ ] Verify 1 team member per row (full width)
3. [ ] Content readable on small screen
4. [ ] No text cutoff
5. [ ] Images scale properly

### Responsive Test Using Browser Tools
1. Press F12 (Developer Tools)
2. Click device toggle (mobile icon)
3. Test in various preset sizes:
   - [ ] iPhone SE (375x667)
   - [ ] iPhone 12 (390x844)
   - [ ] iPad (768x1024)
   - [ ] Desktop (1920x1080)

### Expected Result
✅ Layout properly adapts to all screen sizes without breaking

---

## Test 3: blog-grid-4-masonary.php - Basic Load Test

### Objective
Verify blog page loads and displays blog posts from database.

### Steps

1. **Navigate to page**
   ```
   URL: http://localhost/fitness/blog-grid-4-masonary.php
   ```

2. **Check for PHP errors**
   - Look for error messages
   - Check browser console (F12 → Console)
   - No PHP errors should appear

3. **Verify content displays**
   - [ ] Page header loads
   - [ ] Blog posts section visible
   - [ ] At least 6 blog post cards appear

4. **Verify blog post data**
   - [ ] Post titles display (e.g., "Personal Journeys to a Healthier Lifestyle")
   - [ ] Featured images load
   - [ ] Post dates display (formatted as "DD Mon YYYY")
   - [ ] Author names visible
   - [ ] Content preview text shows (first 100 chars)

5. **Verify functionality**
   - [ ] Post cards have proper styling
   - [ ] "Read More" links visible
   - [ ] Hover effects work on cards
   - [ ] Page footer loads

### Expected Result
✅ Page displays 6 blog posts with all fields populated, no errors

### If Issues Occur

**Issue: Posts don't display**
- Check database: has blog_posts table been created?
- In phpMyAdmin, verify posts have status = "published"
- Only published posts appear on page

**Issue: Images missing**
- Verify featured_image paths in database
- Check image files exist at specified paths
- Paths should start with "assets/images/blog/"

**Issue: Dates not formatted correctly**
- Check created_date field in database (should be TIMESTAMP)
- Verify date format is YYYY-MM-DD HH:MM:SS

---

## Test 4: blog-grid-4-masonary.php - Responsive Design Test

### Objective
Verify masonry grid layout adapts to different screen sizes.

### Extra Large Desktop (≥1400px)
1. Open blog page in full window (1920x1080+)
2. [ ] Verify 4 blog cards per row
3. [ ] Masonry layout appears balanced
4. [ ] No cards wrap unexpectedly

### Desktop (≥992px, <1400px)
1. Resize browser to ~1200px width
2. [ ] Verify 3 blog cards per row
3. [ ] Layout flows naturally
4. [ ] Cards properly sized

### Tablet (≥768px, <992px)
1. Resize browser to 768px width
2. [ ] Verify 2 blog cards per row
3. [ ] Text readable on tablet screen
4. [ ] Images scale appropriately

### Mobile (<768px)
1. Resize browser to 375px width
2. [ ] Verify 1 blog card per row
3. [ ] Content takes full width
4. [ ] Text not cut off
5. [ ] Dates and authors visible

### Responsive Test Using Browser Tools
1. Press F12 (Developer Tools)
2. Click device toggle (mobile icon)
3. Test in various sizes:
   - [ ] iPhone SE (375x667)
   - [ ] iPhone 12 Pro Max (428x926)
   - [ ] iPad Pro (1024x1366)
   - [ ] Desktop (1920x1080)

### Expected Result
✅ Masonry grid properly adapts from 4 columns → 3 → 2 → 1 column

---

## Test 5: Auto-Population Verification

### Objective
Confirm that sample data was created in database on first load.

### Check team_members Table
1. Open phpMyAdmin: http://localhost/phpmyadmin
2. Navigate to: powerzone_db → team_members
3. Click "Browse"
4. [ ] Verify 6 team members exist (DESERT, CHARLES, OLIVER, ELIJAH, JAMES, AMELIA)
5. [ ] Each has: name, position, email, phone, bio, image, social_links
6. [ ] created_at and updated_at timestamps set

### Check blog_posts Table
1. In phpMyAdmin: powerzone_db → blog_posts
2. Click "Browse"
3. [ ] Verify 6 blog posts exist
4. [ ] Each has status = "published"
5. [ ] Each has: title, content, author, category, featured_image
6. [ ] created_date and updated_date timestamps set

### Expected Result
✅ Both tables contain 6 auto-populated sample records

---

## Test 6: Database Update Verification

### Objective
Confirm that changes in database are reflected on pages.

### Add a New Team Member
1. Open phpMyAdmin
2. powerzone_db → team_members → Insert
3. Fill in:
   - Name: "Test Trainer"
   - Position: "Test Position"
   - Email: "test@example.com"
   - Phone: "9999999999"
   - Bio: "Test bio"
   - Image: "assets/images/team/team-1.png"
   - Social Links: `{"facebook":"https://www.facebook.com/test","instagram":"https://www.instagram.com/test","twitter":"https://twitter.com/test"}`
4. Click Save
5. Navigate to team.php
6. [ ] Refresh page (F5)
7. [ ] Verify "Test Trainer" appears on page

### Add a New Blog Post
1. Open phpMyAdmin
2. powerzone_db → blog_posts → Insert
3. Fill in:
   - Title: "Test Blog Post"
   - Content: "This is a test blog post content"
   - Author: "Test Author"
   - Category: "Test"
   - Featured Image: "assets/images/blog/blog-grid/pic1.jpg"
   - Status: "published"
4. Click Save
5. Navigate to blog-grid-4-masonary.php
6. [ ] Refresh page (F5)
7. [ ] Verify "Test Blog Post" appears on page

### Expected Result
✅ Database changes appear on website after refresh

---

## Test 7: Status Filtering (Blog Only)

### Objective
Verify that only "published" blog posts appear on website.

### Create Draft Post
1. In phpMyAdmin: blog_posts → Insert
2. Fill in blog post details
3. Set status = "draft" (NOT "published")
4. Save
5. Navigate to blog-grid-4-masonary.php
6. [ ] Refresh page
7. [ ] Verify draft post does NOT appear

### Publish the Draft
1. In phpMyAdmin: blog_posts → Select draft post row → Edit
2. Change status from "draft" to "published"
3. Save
4. Navigate to blog-grid-4-masonary.php
5. [ ] Refresh page
6. [ ] Verify post NOW appears

### Expected Result
✅ Draft posts hidden, published posts visible - status filter working

---

## Test 8: Security Verification

### Objective
Verify that security measures are in place.

### XSS Prevention Test
1. In phpMyAdmin: team_members → Insert
2. Enter for name: `<script>alert('XSS')</script>`
3. Save
4. Navigate to team.php
5. [ ] Page loads normally
6. [ ] No JavaScript alert appears
7. [ ] Script text displays as plain text (escaped)

### Expected Result
✅ Malicious scripts are escaped and rendered as text, not executed

---

## Test 9: Performance Check

### Objective
Verify pages load quickly and smoothly.

### Load Time Check
1. Open team.php
2. Check page load time (F12 → Network tab)
3. [ ] Verify loads in < 2 seconds

### Repeat for blog page
4. Open blog-grid-4-masonary.php
5. [ ] Verify loads in < 2 seconds

### Expected Result
✅ Both pages load quickly (< 2 seconds typically)

---

## Test 10: Cross-Browser Compatibility

### Test in Multiple Browsers

**Chrome:**
1. [ ] team.php displays correctly
2. [ ] blog-grid-4-masonary.php displays correctly
3. [ ] No console errors

**Firefox:**
1. [ ] team.php displays correctly
2. [ ] blog-grid-4-masonary.php displays correctly
3. [ ] No console errors

**Safari (if available):**
1. [ ] team.php displays correctly
2. [ ] blog-grid-4-masonary.php displays correctly

**Edge (if available):**
1. [ ] team.php displays correctly
2. [ ] blog-grid-4-masonary.php displays correctly

### Expected Result
✅ Both pages work correctly in all major browsers

---

## Test 11: Animation Effects

### Objective
Verify CSS animations work properly.

### team.php Animations
1. Load team.php fresh
2. [ ] Team cards fade in on load
3. [ ] Cards have staggered animation (appearing in sequence)
4. [ ] Hover over card - shadow effect appears
5. [ ] Social links appear/fade on hover

### blog-grid-4-masonary.php Animations
1. Load blog-grid-4-masonary.php fresh
2. [ ] Blog cards fade in on load
3. [ ] Staggered animation present
4. [ ] Hover effects work on cards
5. [ ] Masonry layout looks balanced

### Expected Result
✅ All animations smooth and working

---

## Test 12: Link Verification

### Objective
Verify all links work correctly.

### team.php Links
1. [ ] Social media links open (Facebook, Instagram, Twitter)
2. [ ] Links open in new tab
3. [ ] No 404 errors

### blog-grid-4-masonary.php Links
1. [ ] "Read More" links clickable
2. [ ] Links point to blog-detail.php?id=X format
3. [ ] Note: blog-detail.php may not exist yet (for future implementation)

### Expected Result
✅ All navigation links configured correctly

---

## Final Verification Checklist

### team.php (COMPLETION CHECKLIST)
- [ ] Page loads without errors
- [ ] 6 team members display
- [ ] Responsive design works (desktop/tablet/mobile)
- [ ] Database updates reflected immediately
- [ ] Security measures active
- [ ] Animations smooth
- [ ] Cross-browser compatible

### blog-grid-4-masonary.php (COMPLETION CHECKLIST)
- [ ] Page loads without errors
- [ ] 6 blog posts display
- [ ] Only published posts visible
- [ ] Masonry grid responsive (4→3→2→1 columns)
- [ ] Database updates reflected immediately
- [ ] Security measures active
- [ ] Animations smooth
- [ ] Cross-browser compatible

---

## Issues & Resolutions

### Common Issues Table

| Issue | Symptoms | Resolution |
|-------|----------|-----------|
| Database not connecting | "Cannot connect to database" error | Check MySQL running, verify db.php connection details |
| Tables empty | 0 records showing | Check auto-populate ran, verify INSERT permissions |
| Images missing | Broken image icons | Verify image paths in database, check files exist |
| Responsive broken | Layout breaks at certain widths | Clear cache (Ctrl+F5), check Bootstrap CSS loaded |
| Animations not smooth | Cards appear instantly | Check browser supports CSS animations, update browser |
| Links not working | 404 errors | Verify target pages exist (blog-detail.php for future) |

---

## Test Results Summary

After completing all tests above, document results:

```
PAGE: team.php
[ ] Basic Load - PASS/FAIL
[ ] Desktop Responsive - PASS/FAIL  
[ ] Tablet Responsive - PASS/FAIL
[ ] Mobile Responsive - PASS/FAIL
[ ] Auto-Population - PASS/FAIL
[ ] Database Updates - PASS/FAIL
[ ] Security - PASS/FAIL
[ ] Performance - PASS/FAIL
[ ] Cross-Browser - PASS/FAIL
[ ] Animations - PASS/FAIL
OVERALL: PASS / NEEDS WORK

PAGE: blog-grid-4-masonary.php
[ ] Basic Load - PASS/FAIL
[ ] Desktop Responsive - PASS/FAIL
[ ] Tablet Responsive - PASS/FAIL
[ ] Mobile Responsive - PASS/FAIL
[ ] Status Filtering - PASS/FAIL
[ ] Auto-Population - PASS/FAIL
[ ] Database Updates - PASS/FAIL
[ ] Security - PASS/FAIL
[ ] Performance - PASS/FAIL
[ ] Cross-Browser - PASS/FAIL
[ ] Animations - PASS/FAIL
OVERALL: PASS / NEEDS WORK
```

---

## Next Steps After Testing

✅ If PASS: Ready for production deployment  
⚠️ If Issues: Document and fix before deployment  
📋 Future: Create blog-detail.php for individual post pages

---

## Support Resources

- Database Guide: DATABASE_INTEGRATION_COMPLETION.md
- Team Guide: TEAM_PHP_DATABASE_GUIDE.md
- Blog Guide: BLOG_PHP_DATABASE_GUIDE.md
- Database Connection: includes/db.php
- Database Setup: setup-database.php

---

## Version Info

- **Created:** 2024
- **For Pages:** team.php, blog-grid-4-masonary.php, services.php
- **Database:** PowerZone DB v1.0
- **PHP Version:** 7.x+
