Skip to main content

​
Overview

RALQ is built as a traditional server-rendered web application using PHP and MySQL, with modern frontend enhancements for 3D visualization and augmented reality capabilities.

​
Technology Stack

​
Backend

​
PHP
8.2
Server-side scripting language handling business logic, authentication, and database operations
​
MySQL
database
Relational database storing user accounts, authentication data, and application state
​
Apache
web server
HTTP server with mod_rewrite enabled for URL handling

​
Frontend

​
HTML/PHP
templating
Server-side rendered pages with embedded PHP for dynamic content
​
Tailwind CSS
4.1.11
Utility-first CSS framework for responsive styling
​
JavaScript
vanilla
Client-side interactivity and form validation
​
Google Model Viewer
3D library
WebGL-based 3D model rendering with AR support

​
Application Architecture

​
Frontend Architecture

The application follows a traditional multi-page architecture (MPA) where each user action results in a full page reload from the server.

​
Page Rendering Flow

  1. Index Page (index.php) - Landing page with hero section and 3D models
  2. Authentication - User redirected to registro.php or iniciosesion.php
  3. Session Creation - PHP session started upon successful login
  4. Main Menu (menu.php) - Protected page requiring active session
  5. Feature Pages - Molecular structures, lab instruments, periodic table

​
3D Rendering

RALQ uses the Google Model Viewer library for rendering 3D models with AR capabilities: 
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
Example Implementation (from index.php:182-190): 
<model-viewer
    id="modeloCafeina"
    src="modelos/cafeina.glb"
    alt="Modelo de Cafeína"
    auto-rotate
    camera-controls
    ar
    class="w-full h-96 lg:h-[500px] bg-transparent">
</model-viewer>
All 3D models are in GLB format (binary glTF), optimized for web delivery and AR viewing

​
File Structure

​
Root Directory Structure

/
├── index.php                    # Landing page
├── menu.php                     # Main dashboard (protected)
├── registro.php                 # User registration
├── iniciosesion.php            # Login page
├── estructuras-mol.php         # Molecular structures
├── laboratorios.php            # Laboratory instruments
├── tabla-periodica.php         # Periodic table
├── Dockerfile                  # Container configuration
├── package.json                # npm dependencies
├── tailwind.config.js          # Tailwind configuration
├── php/                        # PHP backend scripts
├── modelos/                    # 3D molecular models (.glb)
├── instrumentos3D/             # 3D lab instrument models
├── img/                        # Static images
├── css/                        # Custom stylesheets
├── js/                         # JavaScript files
├── video/                      # Video assets
└── build/                      # Compiled CSS output

​
Key Directories

Backend PHP scripts handling business logic:
  • validar.php - Database connection configuration
  • log.php - Authentication logic
  • alerta-registro.php - User registration handler
  • alerta-inicioSecion.php - Login error display
  • logout.php - Session termination

​
Request Flow

​
User Registration Flow

​
Authentication Flow

​
Protected Page Access

All pages in the application start with: 
<?php
session_start();
?>
The menu.php page (lines 1-3) initializes the session and displays the user email: 
<p><strong><?php echo $_SESSION['user_email']; ?></strong></p>
The application does not currently implement explicit session validation on protected pages. Consider adding session checks at the top of protected pages:
if (!isset($_SESSION['user_id'])) {
    header('Location: iniciosesion.php');
    exit;
}

​
Tailwind CSS Configuration

Custom color palette and fonts defined in tailwind.config.js: 
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
    "./*.php",
    "./php/**/*.php",
    "./video/**/*.php",
  ],
  theme: {
    extend: {
      colors: {
        verdeclaro: '#86b499',
        verdeobscuro: '#5f775f',
        gris: '#9D9D9D',
        grisclaro: '#FFFFFF',
        blanco: '#FFFFFF',
        verdeclaroClaro: 'rgb(209, 239, 200)',
        negro: '#000000',
      },
      fontFamily: {
        krub: ['Krub', 'sans-serif'],
        firasanscondensed: ['Fira Sans Condensed', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

​
Build Process

# Install dependencies
npm install

# Build Tailwind CSS
npx tailwindcss -i ./src/input.css -o ./build/output.css --watch
The application uses both the compiled Tailwind CSS (build/output.css) and the CDN version (https://cdn.tailwindcss.com) for development convenience

​
Performance Considerations

​
3D Model Loading

  • GLB files are loaded on-demand when pages render
  • Models support progressive loading for faster initial page display
  • AR mode requires device camera permissions

​
Session Management

  • PHP sessions stored server-side (default: /tmp directory)
  • Session cookies sent to browser for authentication
  • No session timeout configured (uses PHP defaults)

​
Static Assets

  • Images, CSS, and JS served directly by Apache
  • No CDN or caching headers configured
  • Consider implementing browser caching for production

​
Security Architecture

​
Password Security

Passwords are hashed using PHP’s password_hash() function (from alerta-registro.php:40): 
$password_hashed = password_hash($password, PASSWORD_DEFAULT);
Verification uses password_verify() (from log.php:46): 
if (password_verify($password, $hashed_password)) {
    // Login successful
}

​
SQL Injection Prevention

Prepared statements used throughout (from log.php:36): 
$stmt = $conn->prepare("SELECT id, email, password FROM usuarios WHERE email = ?");
$stmt->bind_param("s", $email);
Consider implementing additional security measures:
  • HTTPS enforcement
  • CSRF token protection for forms
  • Rate limiting on login attempts
  • Session timeout and regeneration
  • Input sanitization beyond prepared statements

Build docs developers (and LLMs) love

Get started for freeTalk to us