703ab57984
- Added /admin redirect to login page in nginx config - Fixed backend server.js route ordering for proper admin handling - Updated authentication middleware and routes - Added user management routes - Configured PostgreSQL integration - Updated environment configuration
213 lines
5.4 KiB
Markdown
213 lines
5.4 KiB
Markdown
# 🎯 Sky Art Shop - Quick Reference Card
|
|
|
|
## 🚀 Start Backend
|
|
|
|
```powershell
|
|
cd "e:\Documents\Website Projects\Sky_Art_Shop\Admin"
|
|
dotnet run --launch-profile https
|
|
```
|
|
|
|
**URL**: <https://localhost:5001>
|
|
|
|
---
|
|
|
|
## 🔑 Admin Access
|
|
|
|
**URL**: <https://localhost:5001/admin>
|
|
**User**: `admin`
|
|
**Pass**: `admin123`
|
|
|
|
---
|
|
|
|
## 📁 File Structure
|
|
|
|
```
|
|
Sky_Art_Shop/
|
|
├── Admin/ # Backend CMS
|
|
│ ├── Controllers/
|
|
│ │ ├── AdminController.cs # Admin CRUD
|
|
│ │ ├── PublicProductsController.cs
|
|
│ │ ├── PublicProjectsController.cs
|
|
│ │ ├── PublicBlogController.cs
|
|
│ │ └── ... (more public APIs)
|
|
│ ├── Models/
|
|
│ ├── Views/Admin/ # Admin pages
|
|
│ ├── wwwroot/uploads/ # Uploaded images
|
|
│ └── Program.cs # CORS + routes
|
|
│
|
|
├── js/ # Frontend integration
|
|
│ ├── api-integration.js # Core API functions
|
|
│ ├── shop-page.js
|
|
│ ├── portfolio-page.js
|
|
│ └── blog-page.js
|
|
│
|
|
├── css/
|
|
│ └── api-styles.css # Card & grid styles
|
|
│
|
|
├── shop.html # Static pages
|
|
├── portfolio.html
|
|
├── blog.html
|
|
├── index.html
|
|
├── about.html
|
|
├── contact.html
|
|
│
|
|
├── test-api.html # Test page
|
|
├── INTEGRATION_GUIDE.md # How to integrate
|
|
├── IMAGE_FIX_GUIDE.md # Fix images
|
|
└── CMS_COMPLETE_GUIDE.md # Full overview
|
|
```
|
|
|
|
---
|
|
|
|
## 🔗 API Endpoints
|
|
|
|
| URL | Returns |
|
|
|-----|---------|
|
|
| `/api/products` | All products |
|
|
| `/api/projects` | Portfolio projects |
|
|
| `/api/blog` | Blog posts |
|
|
| `/api/pages/{slug}` | Page content |
|
|
| `/api/categories` | Categories |
|
|
| `/api/settings` | Site settings |
|
|
| `/uploads/products/*` | Product images |
|
|
|
|
---
|
|
|
|
## 📝 Integration Template
|
|
|
|
**For any HTML page:**
|
|
|
|
```html
|
|
<!-- Before </body> -->
|
|
<link rel="stylesheet" href="css/api-styles.css">
|
|
<script src="js/api-integration.js"></script>
|
|
<script src="js/shop-page.js"></script> <!-- or portfolio-page.js, etc. -->
|
|
```
|
|
|
|
**In HTML body:**
|
|
|
|
```html
|
|
<div id="productsContainer"></div> <!-- For products -->
|
|
<div id="projectsContainer"></div> <!-- For projects -->
|
|
<div id="blogContainer"></div> <!-- For blog -->
|
|
```
|
|
|
|
---
|
|
|
|
## 🧪 Testing
|
|
|
|
1. **Test API**: Open `test-api.html`
|
|
2. **Test Page**: Open `shop.html` (after integration)
|
|
3. **Check Console**: F12 → Console → Should see "Loaded X items"
|
|
4. **Check Network**: F12 → Network → See API calls + images
|
|
|
|
---
|
|
|
|
## 🐛 Quick Fixes
|
|
|
|
### Images Not Showing
|
|
|
|
1. Admin → Products → Edit
|
|
2. Upload Main Image
|
|
3. Save
|
|
4. Refresh static page
|
|
|
|
### Backend Not Running
|
|
|
|
```powershell
|
|
cd "e:\Documents\Website Projects\Sky_Art_Shop\Admin"
|
|
dotnet run --launch-profile https
|
|
```
|
|
|
|
### CORS Error
|
|
|
|
Already fixed - CORS enabled in Program.cs
|
|
|
|
### Can't See Products
|
|
|
|
1. Check browser console (F12)
|
|
2. Verify backend running
|
|
3. Test with `test-api.html`
|
|
|
|
---
|
|
|
|
## 📂 Image Upload Locations
|
|
|
|
| Content Type | Upload Folder |
|
|
|-------------|---------------|
|
|
| Products | `Admin/wwwroot/uploads/products/` |
|
|
| Projects | `Admin/wwwroot/uploads/projects/` |
|
|
| Blog | `Admin/wwwroot/uploads/blog/` |
|
|
|
|
**Served at**: `https://localhost:5001/uploads/products/<file>`
|
|
|
|
---
|
|
|
|
## ✅ Integration Checklist
|
|
|
|
- [ ] Backend running (<https://localhost:5001>)
|
|
- [ ] MongoDB service running
|
|
- [ ] Products have images uploaded
|
|
- [ ] Script tags added to HTML pages
|
|
- [ ] Container divs added to HTML
|
|
- [ ] `test-api.html` shows products with images
|
|
- [ ] `shop.html` renders products from API
|
|
- [ ] Browser console shows "Loaded X products"
|
|
|
|
---
|
|
|
|
## 📚 Documentation
|
|
|
|
| File | Purpose |
|
|
|------|---------|
|
|
| `INTEGRATION_GUIDE.md` | Step-by-step for each page |
|
|
| `IMAGE_FIX_GUIDE.md` | Fix missing images |
|
|
| `CMS_COMPLETE_GUIDE.md` | Full overview |
|
|
| `test-api.html` | Test & debug page |
|
|
|
|
---
|
|
|
|
## 🎯 Workflow
|
|
|
|
**For Client (Content Management):**
|
|
|
|
1. Open <https://localhost:5001/admin>
|
|
2. Login
|
|
3. Add/Edit products, projects, blog posts
|
|
4. Upload images
|
|
5. Save
|
|
6. Changes appear on static site immediately
|
|
|
|
**For Developer (Customization):**
|
|
|
|
1. Edit `js/api-integration.js` for custom rendering
|
|
2. Edit `css/api-styles.css` for styling
|
|
3. Edit HTML pages for layout
|
|
4. Backend APIs remain unchanged
|
|
|
|
---
|
|
|
|
## 💡 Pro Tips
|
|
|
|
- **Test First**: Always use `test-api.html` to verify API before integrating
|
|
- **Console is Your Friend**: F12 → Console shows all errors
|
|
- **Images**: Upload via Admin Edit, not Create (safer)
|
|
- **CORS**: Already configured for `file://` and `localhost`
|
|
- **Production**: Change `API_BASE` in `api-integration.js` when deploying
|
|
|
|
---
|
|
|
|
## 🚀 What's Next?
|
|
|
|
1. **Upload images** to products (Admin → Products → Edit)
|
|
2. **Integrate HTML pages** (add script tags + container divs)
|
|
3. **Test everything** with `test-api.html`
|
|
4. **Customize styles** in `api-styles.css`
|
|
5. **Deploy** (optional - see CMS_COMPLETE_GUIDE.md)
|
|
|
|
---
|
|
|
|
**Status**: ✅ Backend Running | ⚠️ Images Need Upload | 📝 Pages Need Integration
|
|
|
|
**Quick Test**: Open `file:///E:/Documents/Website%20Projects/Sky_Art_Shop/test-api.html`
|