# Development Environment Setup Guide

## How to Malaysia - Solo Developer Setup

This guide will help you set up your development environment for the How to Malaysia website project.

## Prerequisites

### 1. XAMPP Installation
- Download XAMPP 8.2+ from [https://www.apachefriends.org/](https://www.apachefriends.org/)
- Install with PHP 8.1+, Apache 2.4+, MySQL 8.0+
- Start Apache and MySQL services

### 2. Text Editor/IDE
- **Recommended**: Visual Studio Code with extensions:
  - PHP Intelephense
  - Live Server
  - Prettier - Code formatter
  - GitLens
  - Bootstrap 5 Quick Snippets

## Project Setup

### 1. Create Project Directory
```powershell
# Navigate to XAMPP htdocs
cd C:\xampp\htdocs

# Your project is already in: C:\xampp\htdocs\HowToMalaysia
```

### 2. Project Structure
```
HowToMalaysia/
├── index.html                  # Homepage (already created)
├── src/
│   ├── assets/
│   │   ├── css/
│   │   │   └── main.css       # Main styles (already created)
│   │   ├── js/
│   │   │   └── main.js        # Main JavaScript (just created)
│   │   └── images/
│   │       ├── hero/          # Hero section images
│   │       ├── articles/      # Article thumbnails
│   │       └── icons/         # Category icons
│   ├── includes/
│   │   ├── config.php         # Database configuration
│   │   ├── header.php         # Common header
│   │   ├── footer.php         # Common footer
│   │   └── functions.php      # Helper functions
│   ├── pages/
│   │   ├── category.php       # Category listing page
│   │   ├── article.php        # Individual article page
│   │   ├── search.php         # Search results page
│   │   └── about.php          # About page
│   └── admin/
│       ├── index.php          # Admin dashboard
│       ├── login.php          # Admin login
│       ├── articles.php       # Manage articles
│       └── categories.php     # Manage categories
├── database/
│   ├── schema.sql             # Database structure
│   └── sample-data.sql        # Sample content
└── documentation/             # Project documentation
    ├── WBS-HowToMalaysia-Website.md
    ├── Technical-Specifications.md
    └── ...other docs...
```

## Development Workflow

### Week 3: Foundation Setup (Current Week)

#### Day 1: Environment & Database Setup
1. **Set up XAMPP**
   - Ensure Apache and MySQL are running
   - Access phpMyAdmin: http://localhost/phpmyadmin

2. **Create Database**
   ```sql
   CREATE DATABASE howtomalaysia;
   USE howtomalaysia;
   ```

3. **Test Current Files**
   - Navigate to: http://localhost/HowToMalaysia
   - Verify the homepage loads correctly
   - Check responsive design on different screen sizes

#### Day 2: Competitive Analysis
Research 3-5 similar websites:
- **WikiHow Malaysia section**: Structure and content approach
- **Culture Trip Malaysia**: Visual design and user experience
- **Lonely Planet Malaysia**: Information organization
- **Time Out KL**: Local insights approach
- **Malaysia Tourism Board**: Official tone and content

**Analysis Points:**
- Navigation patterns
- Content categorization
- Search functionality
- Mobile experience
- Visual design trends

#### Day 3: Database Implementation
1. **Create database structure** (based on Technical-Specifications.md)
2. **Set up basic PHP configuration**
3. **Test database connection**

#### Day 4: Basic CMS Setup
1. **Create admin login system**
2. **Set up article management**
3. **Test content creation workflow**

#### Day 5: Core Pages Development
1. **Convert index.html to index.php**
2. **Create category.php page**
3. **Create article.php page**
4. **Implement basic search functionality**

### Week 4: Core Development
- Complete article management system
- Implement user-facing pages
- Add search and filtering
- Mobile optimization
- Basic SEO implementation

### Week 5: Content & Features
- Create 10 essential articles (content from Content-Creation-Templates.md)
- Implement advanced search
- Add social sharing
- Newsletter signup functionality
- Performance optimization

### Week 6: Polish & Launch
- Final testing across all devices
- SEO optimization
- Performance tuning
- Launch preparation
- Analytics setup

## Development Tools & Resources

### Local Development URLs
- **Main Site**: http://localhost/HowToMalaysia
- **Admin Panel**: http://localhost/HowToMalaysia/src/admin
- **phpMyAdmin**: http://localhost/phpmyadmin

### Design Resources
- **Color Palette** (from main.css):
  - Malaysian Blue: #003366
  - Malaysian Red: #cc0000
  - Malaysian Green: #2d5016
  - Malaysian Gold: #d69e2e
  - Primary: #1e40af
  - Success: #059669

### Fonts
- **Primary**: Inter (Google Fonts)
- **Fallback**: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

### Bootstrap Components to Use
- Navigation bar with dropdowns
- Card components for articles
- Button styles and states
- Form controls and validation
- Modal dialogs for quick actions
- Carousel for featured content

## Content Strategy (First 10 Articles)

Based on user research, create these essential articles first:

### Transportation (3 articles)
1. "How to Use Grab in Malaysia: Complete Guide for Tourists"
2. "Getting Around Kuala Lumpur: MRT, LRT, and Monorail Guide"
3. "Renting a Car in Malaysia: Requirements and Tips for Foreigners"

### Food & Dining (3 articles)
4. "Where to Find the Best Street Food in Kuala Lumpur"
5. "Malaysian Food Etiquette: Do's and Don'ts for Tourists"
6. "How to Order Food in Malaysia: Bahasa Malaysia Phrases"

### Culture & Customs (2 articles)
7. "Malaysian Cultural Customs: What Tourists Should Know"
8. "How to Dress Appropriately in Malaysia: A Cultural Guide"

### Practical Living (2 articles)
9. "Opening a Bank Account in Malaysia as a Foreigner"
10. "How to Get a Malaysian SIM Card: Complete Guide for Tourists"

## Testing Checklist

### Before Each Development Session
- [ ] XAMPP services running
- [ ] Database accessible
- [ ] Files backing up to cloud/version control

### Weekly Testing
- [ ] Cross-browser compatibility (Chrome, Firefox, Safari, Edge)
- [ ] Mobile responsiveness (iPhone, Android, iPad)
- [ ] Page load speed (aim for <3 seconds)
- [ ] Form functionality
- [ ] Search functionality
- [ ] Admin panel access

### Pre-Launch Testing
- [ ] All links working
- [ ] Images optimized and loading
- [ ] SEO meta tags in place
- [ ] Analytics tracking working
- [ ] Contact forms functional
- [ ] Database performance optimized

## Backup & Version Control

### Daily Backups
1. **Database backup**: Export from phpMyAdmin daily
2. **File backup**: Copy entire project folder to cloud storage
3. **Version control**: Commit changes to Git repository

### Recommended Git Workflow
```powershell
# Initialize repository (if not done)
git init
git add .
git commit -m "Initial project setup with Malaysian design system"

# Daily commits
git add .
git commit -m "Descriptive message about changes"

# Weekly backups to remote repository
git remote add origin [your-github-repo]
git push origin main
```

## Performance Optimization Tips

### Images
- Optimize all images before upload (use TinyPNG or similar)
- Use WebP format where supported
- Implement lazy loading for article images

### CSS & JavaScript
- Minimize custom CSS/JS files
- Use Bootstrap CDN for faster loading
- Implement critical CSS for above-the-fold content

### Database
- Index frequently queried columns
- Optimize database queries
- Implement caching where possible

### Server
- Enable GZIP compression
- Set proper cache headers
- Use .htaccess for performance rules

## Troubleshooting Common Issues

### XAMPP Issues
- **Apache won't start**: Check for port conflicts (usually port 80)
- **MySQL won't start**: Check for existing MySQL services
- **Permission errors**: Run XAMPP as administrator

### Development Issues
- **CSS not loading**: Check file paths and clear browser cache
- **JavaScript errors**: Use browser console for debugging
- **PHP errors**: Enable error reporting in development

### Design Issues
- **Responsive problems**: Test with Chrome DevTools device emulation
- **Cross-browser issues**: Use CSS prefixes for newer properties
- **Performance issues**: Use PageSpeed Insights for analysis

## Next Steps

1. **Complete Day 1 setup** (XAMPP, database, testing current files)
2. **Start competitive analysis** (research 3-5 similar websites)
3. **Review all project documentation** in the `documentation/` folder
4. **Plan your daily development schedule** based on the 4-week timeline

## Support Resources

- **Bootstrap 5 Documentation**: https://getbootstrap.com/docs/5.3/
- **PHP Manual**: https://www.php.net/manual/
- **MySQL Documentation**: https://dev.mysql.com/doc/
- **MDN Web Docs**: https://developer.mozilla.org/
- **XAMPP Documentation**: https://www.apachefriends.org/faq.html

Remember: This is a solo project, so focus on **rapid prototyping** and **iterative improvement** rather than perfection from the start. Get the MVP working first, then enhance based on user feedback and analytics data.