Papasmedia

Multi-page PHP site version for Papasmedia.

Demo

Home page

About page

Admin | About-edit page

Admin | Users page

About Project

Multi-page PHP website for Papasmedia with a front-end asset pipeline powered by Gulp. The site is served via Apache (PHP 8.1) and uses MySQL for data storage. Development uses BrowserSync proxying the internal container URL for live reload of SCSS and assets.

Key traits:

• Pages: home, about, services, gallery, contact, plus an admin area (src).
• Asset pipeline: SCSS → CSS, image optimization, and copying app files to dist for production.
• Live reload dev workflow via BrowserSync (gulp watch) proxying the internal Apache container URL.

Note: The single-page version of the site can be found here.

System Dependencies

• Docker + Docker Compose (recommended)
• PHP 8.1 with Apache (containerized)
• MySQL 8.0 (containerized)
• Node.js 14.x for Gulp tasks

Optional local-only development requires PHP and MySQL installed locally; Docker is recommended.

Getting Started

This section contains the steps necessary to get the application up and running.

Prerequisites

1. Clone the repository:

   git clone <repository-url>
   cd papas2

2. Copy environment file:

   cp .env.example .env

3. Edit .env as needed:

   • APP_URL=http://localhost:8080 (external access)
   • APP_INTERNAL_URL=http://php-apache-2:80 (used by BrowserSync)
   • ENV_DIR=src for development or ENV_DIR=dist for production
   • MySQL credentials (match defaults in example if unsure)

Containerized Setup

1. Build images:

   docker compose build

2. Start services (Apache/PHP, MySQL):

   docker compose up -d mysql php-apache

3. Install Node dependencies and build assets (runs in a Node container):

   docker compose run --rm node

   This compiles SCSS, optimizes images, and copies files to dist.

4. Create the database:

   docker compose exec mysql \
     sh -c 'MYSQL_PWD="${MYSQL_ROOT_PASSWORD}" \
       mysql -u root -e "CREATE DATABASE IF NOT EXISTS ${MYSQL_DATABASE}"'

5. Import the sample dataset:

   docker compose exec -T mysql \
     sh -c 'MYSQL_PWD="${MYSQL_ROOT_PASSWORD}" mysql -u root ${MYSQL_DATABASE}' \
     < src/assets/data/webapp02.sql

6. Access the site:

   • App: http://localhost:8080

7. Live development (optional):

   • Ensure ENV_DIR=src in .env so Apache serves src.

   • Set APP_INTERNAL_URL=http://php-apache-2:80.

   • Run BrowserSync with watch:

     docker compose run -p 3000:3000 --rm node \
       sh -c "npm install && npx gulp watch"

   This watches SCSS and reloads the browser on changes while proxying the internal Apache URL.

8. Production build and serve dist:

   docker compose run --rm node sh -c "npm install && npx gulp build"
   # switch Apache to serve dist
   sed -i 's/^ENV_DIR=.*/ENV_DIR=dist/' .env
   docker compose restart php-apache

Useful Docker Compose commands

docker compose up            # (re)create the services
docker compose stop          # stop the services
docker compose start         # start the services
docker compose restart       # restart the services
docker compose down          # teardown the services
docker compose run           # run a one-time command against a service

Project Structure

• src: PHP pages, assets, includes, and admin.
• dist: Built production files (output of Gulp build).
• tasks: Build helper scripts.
• gulpfile.js: Gulp tasks (build, watch, styles, images).
• compose.yml: Docker Compose services (php-apache, mysql, node).
• Dockerfile: Apache + PHP 8.1 container.

Future Work

Planned improvements and extensions for upcoming versions of the project:

Codebase Refactoring

• Use Laravel to make the codebase more maintainable.

Architecture

• Implement backend as a REST API
• Use a frontend framework (Vue.js or React) for the UI

This would allow having different UIs powered by the same backend.

License

The project is licensed under the MIT License. Refer to LICENSE for more information.