Documentació del Projecte - Portfolio AdminKit

Descripció General

Aquest és un projecte web dual que combina un portfolio fotogràfic públic amb un panell d'administració complet per gestionar tot el contingut de manera dinàmica. El sistema està dissenyat per fotògrafs, artistes o creadors que necessiten mostrar el seu treball amb una presentació professional i gestionar-lo de manera eficient.

Concepte clau: Separació total entre la part pública (portfolio) i la part privada (administració), cadascuna amb el seu propi disseny i funcionalitats.

Arquitectura del Sistema

1. Frontend Portfolio (Àrea Pública)

Template: ProMan - Disseny modern i responsiu
Fitxer principal: index.php - Galeria amb filtres dinàmics
Detall: detall_post.php - Vista completa de cada projecte
Colors corporatius: Porpra (#6244C5) i Daurat (#FFC448)
Funcionalitat: Galeria filtrable per categories i etiquetes

2. Backend Admin (Àrea Privada)

Template: AdminKit v3.4.0 - Dashboard Bootstrap 5
Ubicació: /admin/
Funcionalitat: CRUD complet per tots els continguts
Seguretat: Sistema de login amb rols (administrador/lector)
Pàgines: Gestió de posts, categories, etiquetes, llibres, usuaris i tasques

3. Base de Dades

                    Nom: posts_adk

                    Motor: MySQL 8.4.4

                    Charset: utf8mb4_general_ci

                    Connexió: PDO (PHP Data Objects)

Stack Tecnològic

Backend

PHP 7.4+ MySQL 8.4.4 Apache 2.4 PDO Sessions PHP

Frontend Portfolio

Bootstrap 5 jQuery 3.4.1 Isotope (filtres) Fancybox 5.0 WOW.js (animacions) Typed.js Owl Carousel

Frontend Admin

Bootstrap 5 DataTables 1.13.7 SweetAlert2 Trix Editor 2.0.8 Feather Icons Highcharts

Estructura de Directoris

/posts_adk/ ├── index.php ← Portfolio públic (pàgina principal) ├── detall_post.php ← Detall de cada post/projecte ├── config.php ← Configuració BD i sessions ├── documentacio.php ← Aquesta pàgina │ ├── /admin/ ← Panell d'administració │ ├── index.php ← Dashboard principal │ ├── login.php ← Pàgina d'inici de sessió │ ├── posts.php ← Gestió de posts (CORRUPTE - NO USAR) │ ├── categories.php ← CRUD de categories │ ├── etiquetas.php ← CRUD d'etiquetes │ ├── books.php ← CRUD de llibres/PDFs │ ├── users.php ← Gestió d'usuaris │ ├── tasks.php ← Gestió de tasques │ ├── perfil_usuari.php ← Perfil personal │ ├── header.php ← Include HTML head + verificació sessió │ ├── sidebar.php ← Menú lateral + navbar superior │ ├── footer.php ← Scripts JS + tancament HTML │ ├── /css/app.css ← Estils AdminKit │ ├── /js/app.js ← Scripts AdminKit (Bootstrap 5) │ └── /img/ ← Imatges del dashboard │ ├── /img/ ← Imatges del portfolio │ └── /people/ ← Galeries per fotògraf │ ├── /css/ ← Estils del portfolio │ ├── bootstrap.min.css │ └── style.css │ ├── /js/ ← Scripts del portfolio │ └── main.js │ ├── /lib/ ← Llibreries frontend (self-hosted) │ ├── /isotope/ │ ├── /wow/ │ ├── /typed/ │ └── ... │ └── /scss/ ← Fonts SCSS de Bootstrap └── bootstrap.scss

Esquema de Base de Dades

Taula	Descripció	Camps Principals
posts	Articles/projectes del portfolio	title, excerpt, content, img, category_id, url, ins, face, youtube
categories	Categories de posts	name, svg
etiquetas	Etiquetes/tags per filtrar	name, svg
post_etiquetas	Relació many-to-many posts-etiquetes	post_id, etiqueta_id
books	Llibres/PDFs descarregables	title, img, pdf_url
post_books	Relació many-to-many posts-llibres	post_id, book_id
usuaris	Comptes d'usuari del sistema	nom_usuari, email, password_hash, rol, estat, imatge_perfil, biografia
tasques_projecte	Gestió de tasques	titol, descripcio, estat, prioritat, categoria, data_venciment

Important: Les relacions many-to-many permeten que un post tingui múltiples etiquetes i múltiples llibres associats.

Funcionalitats Principals

Portfolio Públic

Galeria filtrable amb Isotope (per categories i etiquetes)
Lightbox amb Fancybox per visualitzar imatges en gran
Animacions d'scroll amb WOW.js
Vista detallada de cada projecte amb xarxes socials
Disseny responsive (móvil, tablet, desktop)
Filtres generats dinàmicament des de la base de dades

Sistema d'Autenticació

Login segur amb sessions PHP
Contrasenyes hashejades amb password_hash()
Dos rols: administrador (accés total) i lector (només lectura)
Protecció de pàgines amb verificació de sessió
Logout segur amb destrucció de sessions

CRUD Complet (Admin)

Posts: Crear, editar, eliminar projectes amb editor WYSIWYG (Trix)
Categories: Gestió amb icones SVG personalitzables
Etiquetes: Tags amb icones SVG per filtrar el portfolio
Llibres/PDFs: Pujada i gestió de documents descarregables
Usuaris: Gestió completa amb upload d'avatars
Tasques: Sistema de gestió de projectes amb estats i prioritats

Perfil d'Usuari

Edició de dades personals (nom, email, biografia)
Canvi d'avatar amb previsualització en temps real
Canvi de contrasenya amb validació de l'actual
Vista d'informació del compte (rol, estat, data de registre)

Mesures de Seguretat

Prepared Statements: Totes les queries usen PDO amb placeholders (protecció SQL injection)
htmlspecialchars(): Escapament de tot l'output HTML (protecció XSS)
Password Hashing: Contrasenyes hashejades amb PASSWORD_DEFAULT
Sessions segures: Verificació de sessió en cada pàgina protegida
Validació d'uploads: Control de tipus de fitxer, mida i extensions permeses
Rols d'usuari: Control d'accés basat en permisos

Desplegament i Migració

Entorn Actual (Desenvolupament)

                    Sistema: Windows 10/11

                    Servidor: Apache 2.4 (C:\Apache24\htdocs\posts_adk)

                    Base de dades: MySQL 8.4.4

                    URL local: http://localhost/posts_adk/

Migració a VPS Ubuntu (https://estudijoanpuig.com/)

Codi preparat: S'han utilitzat rutes relatives (dirname(__DIR__)) en lloc de rutes absolutes de Windows, per tant el codi funcionarà directament a Ubuntu sense modificacions.

Passos per desplegar:

Pujar tots els fitxers al servidor VPS via FTP/SFTP
Exportar la base de dades: ESTRUCTURA_posts_adk.sql
Importar la BD al MySQL del servidor
Actualitzar credencials a config.php (host, user, password, database)
Configurar permisos de carpetes: chmod 755 per directoris, chmod 644 per fitxers
Permetre escriptura a /img/: chmod 775 img/
Configurar virtual host d'Apache o Nginx
Activar HTTPS amb Let's Encrypt (Certbot)

Problemes Coneguts i Limitacions

admin/posts.php CORRUPTE: El fitxer té contingut duplicat al final. Utilitzar categories.php com a plantilla per crear CRUD nous.
Modals Bootstrap: Actualment no funcionen correctament (problema amb la inicialització de Bootstrap 5).
CSS Admin pre-compilat: No hi ha fitxers SCSS font per personalitzar els estils d'AdminKit.
Formulari de contacte: Inactiu (es suggereix usar solució de htmlcodex.com).

Millores Futures Suggerides

Implementar paginació als llistats del portfolio
Afegir cerca de posts per text
Sistema de comentaris amb moderació
Estadístiques de visites amb Google Analytics
Galeria d'imatges múltiples per post (no només una imatge destacada)
Exportació de dades en CSV/Excel
Notificacions per email en esdeveniments importants
API REST per integració amb apps mòbils
Sistema de backup automàtic de la BD
Caché de galeria per millorar rendiment

Crèdits i Recursos

Template Portfolio:	ProMan (HTMLCodex)
Template Admin:	AdminKit v3.4.0
Framework CSS:	Bootstrap 5.0
Icones:	Font Awesome 5.15.4, Feather Icons
Llibreries JS:	jQuery, Isotope, Fancybox, WOW.js, Typed.js, DataTables, SweetAlert2