Fix admin route access and backend configuration
- 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
This commit is contained in:
Local Server
333
Sky_Art_shop/CMS_COMPLETE_GUIDE.md
Normal file
333
Sky_Art_shop/CMS_COMPLETE_GUIDE.md
Normal file
@@ -0,0 +1,333 @@
|
||||
# 🎨 Sky Art Shop - Complete CMS Integration
|
||||
|
||||
## 🎉 What's Been Completed
|
||||
|
||||
Your Sky Art Shop now has a **full backend CMS** (Admin) connected to your **static frontend** (shop.html, portfolio.html, blog.html, etc.).
|
||||
|
||||
### ✅ Backend (Admin Folder)
|
||||
|
||||
- **ASP.NET Core 8.0** MVC application
|
||||
- **MongoDB** database for all content
|
||||
- **Authentication** (cookie-based, admin login)
|
||||
- **CRUD Operations** for:
|
||||
- Products
|
||||
- Portfolio Projects
|
||||
- Blog Posts
|
||||
- Pages
|
||||
- Categories
|
||||
- Site Settings
|
||||
- **Image Upload** service with validation
|
||||
- **Public Read-Only APIs** with CORS enabled
|
||||
- **Static File Serving** for uploaded images
|
||||
|
||||
### ✅ Frontend Integration Files Created
|
||||
|
||||
Located in `Sky_Art_Shop/` folder:
|
||||
|
||||
```
|
||||
js/
|
||||
├── api-integration.js # Core API functions
|
||||
├── shop-page.js # Products integration
|
||||
├── portfolio-page.js # Projects integration
|
||||
├── blog-page.js # Blog integration
|
||||
├── index-page.js # Home page integration
|
||||
└── about-page.js # About page integration
|
||||
|
||||
css/
|
||||
└── api-styles.css # Styling for cards & grids
|
||||
|
||||
Documentation/
|
||||
├── INTEGRATION_GUIDE.md # How to wire up each page
|
||||
├── IMAGE_FIX_GUIDE.md # Fix for images not showing
|
||||
└── test-api.html # Test page to verify API
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start (3 Steps)
|
||||
|
||||
### 1. Start the Backend
|
||||
|
||||
```powershell
|
||||
cd "e:\Documents\Website Projects\Sky_Art_Shop\Admin"
|
||||
dotnet run --launch-profile https
|
||||
```
|
||||
|
||||
Backend runs on: **<https://localhost:5001>**
|
||||
|
||||
### 2. Fix Missing Images
|
||||
|
||||
Your products exist but don't have images yet:
|
||||
|
||||
1. Open: <https://localhost:5001/admin/products>
|
||||
2. Click **Edit** on each product
|
||||
3. Upload a **Main Image**
|
||||
4. Click **Save**
|
||||
|
||||
Images will be stored in `Admin/wwwroot/uploads/products/`
|
||||
|
||||
### 3. Integrate Static Pages
|
||||
|
||||
Add these scripts to each HTML file (see `INTEGRATION_GUIDE.md` for details):
|
||||
|
||||
**shop.html**:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/shop-page.js"></script>
|
||||
```
|
||||
|
||||
**portfolio.html**:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/portfolio-page.js"></script>
|
||||
```
|
||||
|
||||
**blog.html**:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/api-styles.css">
|
||||
<script src="js/api-integration.js"></script>
|
||||
<script src="js/blog-page.js"></script>
|
||||
```
|
||||
|
||||
Add container divs where content should render:
|
||||
|
||||
```html
|
||||
<div id="productsContainer"></div>
|
||||
<div id="projectsContainer"></div>
|
||||
<div id="blogContainer"></div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing
|
||||
|
||||
### Test API Connection
|
||||
|
||||
Open: `file:///E:/Documents/Website%20Projects/Sky_Art_Shop/test-api.html`
|
||||
|
||||
This page will:
|
||||
|
||||
- ✅ Test backend connection
|
||||
- ✅ Load products/projects/blog from API
|
||||
- ✅ Show image URLs and verify they load
|
||||
- ✅ Display JSON responses for debugging
|
||||
|
||||
### Test Your Static Site
|
||||
|
||||
After integration:
|
||||
|
||||
1. Open `shop.html` in browser
|
||||
2. Products should render with images from API
|
||||
3. Open DevTools Console (F12)
|
||||
4. Should see: `"Loaded products: X"`
|
||||
|
||||
---
|
||||
|
||||
## 📊 How It Works
|
||||
|
||||
```
|
||||
┌─────────────────────┐
|
||||
│ Static HTML Files │
|
||||
│ (shop.html, etc.) │
|
||||
│ │
|
||||
│ Uses JavaScript to │
|
||||
│ fetch data ↓ │
|
||||
└─────────────────────┘
|
||||
↓
|
||||
┌─────────────────────┐
|
||||
│ Public REST API │
|
||||
│ /api/products │
|
||||
│ /api/projects │
|
||||
│ /api/blog │
|
||||
│ │
|
||||
│ Returns JSON ↓ │
|
||||
└─────────────────────┘
|
||||
↓
|
||||
┌─────────────────────┐
|
||||
│ MongoDB Database │
|
||||
│ SkyArtShopCMS │
|
||||
│ │
|
||||
│ Collections: │
|
||||
│ - Products │
|
||||
│ - Projects │
|
||||
│ - BlogPosts │
|
||||
│ - Pages │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
**Admin edits content** → **MongoDB updates** → **Static site fetches new data** → **Users see changes**
|
||||
|
||||
---
|
||||
|
||||
## 📋 API Endpoints
|
||||
|
||||
| Endpoint | Method | Description |
|
||||
|----------|--------|-------------|
|
||||
| `/api/products` | GET | All products |
|
||||
| `/api/products/{id}` | GET | Single product |
|
||||
| `/api/projects` | GET | Portfolio projects |
|
||||
| `/api/projects/{id}` | GET | Single project |
|
||||
| `/api/blog` | GET | Blog posts |
|
||||
| `/api/blog/{id}` | GET | Single post |
|
||||
| `/api/pages/{slug}` | GET | Page by slug (e.g., "about") |
|
||||
| `/api/categories` | GET | All categories |
|
||||
| `/api/settings` | GET | Site settings |
|
||||
| `/uploads/products/*` | GET | Product images |
|
||||
| `/uploads/projects/*` | GET | Project images |
|
||||
| `/uploads/blog/*` | GET | Blog images |
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Customization
|
||||
|
||||
### Change API URL
|
||||
|
||||
Edit `js/api-integration.js`:
|
||||
|
||||
```javascript
|
||||
const API_BASE = 'https://your-domain.com'; // Change from localhost
|
||||
```
|
||||
|
||||
### Customize Card Design
|
||||
|
||||
Edit `css/api-styles.css` to match your site's look:
|
||||
|
||||
- Colors, fonts, spacing
|
||||
- Grid layouts (columns, gaps)
|
||||
- Hover effects
|
||||
|
||||
### Custom Rendering
|
||||
|
||||
Edit `js/api-integration.js` functions like `loadProducts()` to change HTML structure:
|
||||
|
||||
```javascript
|
||||
return `
|
||||
<div class="my-custom-card">
|
||||
<img src="${imgSrc}">
|
||||
<h3>${product.title}</h3>
|
||||
<button>Buy Now</button>
|
||||
</div>`;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Admin Features
|
||||
|
||||
Access at: **<https://localhost:5001/admin>**
|
||||
|
||||
Default credentials (change in Admin → Settings):
|
||||
|
||||
- Username: `admin`
|
||||
- Password: `admin123`
|
||||
|
||||
### Admin Capabilities
|
||||
|
||||
- ✅ Create/Edit/Delete Products
|
||||
- ✅ Upload product images (main + gallery)
|
||||
- ✅ Create/Edit/Delete Portfolio Projects
|
||||
- ✅ Upload project images (cover + multiple)
|
||||
- ✅ Create/Edit/Delete Blog Posts
|
||||
- ✅ Upload featured images for blog
|
||||
- ✅ Rich text editing (TinyMCE)
|
||||
- ✅ Manage Pages & Categories
|
||||
- ✅ Site Settings (title, description, etc.)
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Images Not Showing?
|
||||
|
||||
**Problem**: Products render but no images appear.
|
||||
|
||||
**Solution**: See `IMAGE_FIX_GUIDE.md`
|
||||
|
||||
1. Edit products in admin
|
||||
2. Re-upload images
|
||||
3. Verify files in `Admin/wwwroot/uploads/products/`
|
||||
|
||||
### "Cannot reach backend" Error?
|
||||
|
||||
**Problem**: Static site can't call API.
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Ensure backend is running: `dotnet run --launch-profile https`
|
||||
2. Check `API_BASE` in `api-integration.js` matches (<https://localhost:5001>)
|
||||
3. CORS is already enabled
|
||||
|
||||
### Blank Page?
|
||||
|
||||
**Problem**: HTML page loads but no content.
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Open DevTools Console (F12)
|
||||
2. Check for JavaScript errors
|
||||
3. Ensure container divs exist (`<div id="productsContainer"></div>`)
|
||||
4. Verify scripts load in correct order (api-integration.js first)
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation Files
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `INTEGRATION_GUIDE.md` | Step-by-step integration for each page |
|
||||
| `IMAGE_FIX_GUIDE.md` | How to fix missing images issue |
|
||||
| `test-api.html` | Test page to verify API & images |
|
||||
| `CMS_COMPLETE_GUIDE.md` | This file - complete overview |
|
||||
|
||||
---
|
||||
|
||||
## ✅ Next Steps
|
||||
|
||||
1. **[REQUIRED]** Upload images to products via Admin
|
||||
2. **[REQUIRED]** Add script tags to HTML pages
|
||||
3. **[OPTIONAL]** Customize styles in `api-styles.css`
|
||||
4. **[OPTIONAL]** Add more products/projects/blog posts via Admin
|
||||
5. **[OPTIONAL]** Deploy backend to a real server (Azure, AWS, etc.)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Benefits
|
||||
|
||||
✅ **Client-Friendly**: Non-technical users can update content without touching code
|
||||
✅ **Centralized**: All content managed in one admin panel
|
||||
✅ **Flexible**: Static site can be hosted anywhere (GitHub Pages, Netlify, etc.)
|
||||
✅ **Modern Stack**: ASP.NET Core + MongoDB + REST API
|
||||
✅ **Image Management**: Upload, store, and serve images automatically
|
||||
✅ **Rich Content**: TinyMCE editor for formatted text
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Production Deployment (Future)
|
||||
|
||||
To deploy to production:
|
||||
|
||||
1. **Backend**: Host Admin on Azure, AWS, or VPS
|
||||
2. **Database**: Use MongoDB Atlas (cloud) or self-hosted
|
||||
3. **Update API_BASE**: Change localhost to your domain
|
||||
4. **CORS**: Update policy to allow your domain only
|
||||
5. **HTTPS**: Use Let's Encrypt or cloud provider SSL
|
||||
6. **Frontend**: Host static files on CDN/GitHub Pages
|
||||
|
||||
---
|
||||
|
||||
## 📞 Support
|
||||
|
||||
If you encounter issues:
|
||||
|
||||
1. Check `test-api.html` to diagnose the problem
|
||||
2. Review browser DevTools Console (F12)
|
||||
3. Check backend logs in terminal
|
||||
4. Refer to troubleshooting guides
|
||||
|
||||
---
|
||||
|
||||
**Congratulations!** 🎉 Your Sky Art Shop is now a fully functional CMS-powered website. Your client can edit everything via the Admin panel, and changes will appear instantly on the static site.
|
||||
Reference in New Issue
Block a user