# Team Page Database Integration Guide

## Quick Reference

**Page:** team.php  
**Database Table:** `team_members`  
**Records:** 6 team members (auto-populated if empty)  
**Display Type:** Responsive grid (3 cols desktop, 2 cols tablet, 1 col mobile)

---

## Database Table Schema

```sql
CREATE TABLE team_members (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    position VARCHAR(100) NOT NULL,
    email VARCHAR(255),
    phone VARCHAR(20),
    bio TEXT,
    image VARCHAR(255),
    social_links JSON,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
```

---

## Adding a New Team Member

### Method 1: Direct SQL Insert

```sql
INSERT INTO team_members (
    name, 
    position, 
    email, 
    phone, 
    bio, 
    image, 
    social_links
) VALUES (
    'John Smith',
    'Gym Trainer',
    'john@example.com',
    '+91-9876543210',
    'Expert fitness coach with 8 years experience',
    'assets/images/team/john.png',
    '{"facebook":"https://www.facebook.com/johnsmith","instagram":"https://www.instagram.com/johnsmith","twitter":"https://twitter.com/johnsmith"}'
);
```

### Method 2: Using phpMyAdmin
1. Open phpMyAdmin
2. Navigate to `powerzone_db` → `team_members`
3. Click "Insert"
4. Fill in all fields (use JSON format for social_links)
5. Click "Save"

---

## Field Descriptions

| Field | Type | Example | Required |
|-------|------|---------|----------|
| name | VARCHAR(255) | "John Smith" | Yes |
| position | VARCHAR(100) | "Personal Trainer" | Yes |
| email | VARCHAR(255) | "john@example.com" | No |
| phone | VARCHAR(20) | "+91-9876543210" | No |
| bio | TEXT | "Expert trainer with..." | No |
| image | VARCHAR(255) | "assets/images/team/team-1.png" | Yes |
| social_links | JSON | `{"facebook":"...","instagram":"...","twitter":"..."}` | No |

---

## Social Links JSON Format

```json
{
    "facebook": "https://www.facebook.com/username",
    "instagram": "https://www.instagram.com/username",
    "twitter": "https://twitter.com/username"
}
```

**Important:** All three URLs are optional, but if included must be valid URLs starting with `https://`

---

## Default Sample Data

If the `team_members` table is empty, these 6 trainers are auto-populated:

1. **DESERT** - Fitness Trainer
   - Email: desert@example.com
   - Phone: +91-9876543210
   - Image: assets/images/team/team-1.png

2. **CHARLES** - Beauty Trainer
   - Email: charles@example.com
   - Phone: +91-9876543211
   - Image: assets/images/team/team-2.png

3. **OLIVER** - Crossfit Coach
   - Email: oliver@example.com
   - Phone: +91-9876543212
   - Image: assets/images/team/team-3.png

4. **ELIJAH** - Yoga Trainer
   - Email: elijah@example.com
   - Phone: +91-9876543213
   - Image: assets/images/team/team-4.png

5. **JAMES** - Dumbbell Trainer
   - Email: james@example.com
   - Phone: +91-9876543214
   - Image: assets/images/team/team-5.png

6. **AMELIA** - Boxing Trainer
   - Email: amelia@example.com
   - Phone: +91-9876543215
   - Image: assets/images/team/team-6.png

---

## How It Works

### 1. Database Query
```php
$query = "SELECT * FROM team_members ORDER BY id ASC";
```
Fetches all team members, ordered by ID.

### 2. Loop Display
```php
<?php foreach ($teamMembers as $index => $member): ?>
    <h4><?php echo htmlspecialchars($member['name']); ?></h4>
    <span><?php echo htmlspecialchars($member['position']); ?></span>
<?php endforeach; ?>
```

### 3. Auto-Population
If no team members exist, 6 sample records are automatically inserted using prepared statements.

---

## Updating Team Member Info

### SQL Update Example

```sql
UPDATE team_members SET 
    position = 'Senior Fitness Trainer',
    bio = 'Updated bio text...'
WHERE id = 1;
```

### Via phpMyAdmin
1. Click on the team member's row
2. Edit the fields
3. Click "Save"
4. Refresh the website - changes appear instantly

---

## Deleting a Team Member

### SQL Delete

```sql
DELETE FROM team_members WHERE id = 1;
```

### Via phpMyAdmin
1. Select the row checkbox
2. Click "Delete" button
3. Confirm deletion
4. Refresh website - team member no longer appears

---

## Display Format

### Team Card Layout
```html
<div class="dz-team style-1">
    <div class="dz-media">
        <img src="{image}" alt="{name}">
        <ul class="team-social">
            <li><a href="{facebook}">[icon]</a></li>
            <li><a href="{instagram}">[icon]</a></li>
            <li><a href="{twitter}">[icon]</a></li>
        </ul>
    </div>
    <div class="dz-content">
        <h4 class="dz-name">{name}</h4>
        <span class="dz-position">{position}</span>
    </div>
</div>
```

---

## Responsive Behavior

| Screen Size | Columns | Layout |
|-------------|---------|--------|
| Desktop (≥1200px) | 3 | col-lg-4 |
| Tablet (768-1199px) | 2 | col-md-6 |
| Mobile (<768px) | 1 | col-sm-6 |

---

## Animation Effects

Team cards include:
- **WOW Animation:** Fade-in effect on page load
- **Delay:** Each card has a staggered delay (0.6s + 0.2s per index)
- **Hover Effect:** Cards lift up with shadow on hover
- **Social Links:** Appear on hover

---

## Security Notes

- ✅ All names/positions escaped with `htmlspecialchars()`
- ✅ JSON safely decoded with `json_decode()`
- ✅ Database inserts use prepared statements
- ✅ No SQL injection vulnerabilities
- ✅ XSS prevention active

---

## Common Tasks

### Reorder Team Members
Change the SQL ORDER BY clause in team.php line 7:

```php
// Current (by ID)
$query = "SELECT * FROM team_members ORDER BY id ASC";

// By Name
$query = "SELECT * FROM team_members ORDER BY name ASC";

// By Position
$query = "SELECT * FROM team_members ORDER BY position ASC";
```

### Limit Number of Team Members Displayed
```php
// Change the query to LIMIT 3
$query = "SELECT * FROM team_members ORDER BY id ASC LIMIT 3";
```

### Show Only Specific Position
```php
// Show only Personal Trainers
$query = "SELECT * FROM team_members WHERE position = 'Personal Trainer' ORDER BY id ASC";
```

---

## Troubleshooting

| Problem | Solution |
|---------|----------|
| Team members not showing | Check database connection in includes/db.php |
| Images not loading | Verify image paths in database match folder structure |
| Social links not working | Ensure JSON format is valid |
| Formatting looks broken | Clear browser cache and hard refresh (Ctrl+F5) |
| Auto-populate not working | Check user has INSERT permission on database |

---

## Related Files

- **Main Page:** `/team.php`
- **Database Connection:** `/includes/db.php`
- **Database Schema:** `/setup-database.php`
- **Navigation:** `/header.html`
- **Footer:** `/footer.html`
- **Styles:** `/assets/css/style.css`

---

## Version Info

- **Created:** 2024
- **Database Version:** PowerZone DB v1.0
- **PHP Version:** 7.x+
- **Status:** Production Ready ✅
