Skip to main content

​
Overview

Pro Stock Tool follows a classic three-tier architecture pattern separating frontend presentation, business logic, and data access layers. The project is organized into distinct directories, each serving a specific purpose in the application.

​
Root Directory Structure

Pro-Stock-Tool/
├── controllers/       # JavaScript frontend controllers
├── database/          # PHP backend API endpoints
├── view/              # HTML page templates
├── styles/            # CSS stylesheets
├── img/               # Image assets
├── login.html         # Login page
└── Inicio-Sesion.html # Alternative login page

​
Directory Details

Contains JavaScript files that handle client-side interactions and API communication.Key Files:
  • bodega.js - Warehouse management controller
  • categorias.js - Category/subcategory management
  • proveedores.js - Supplier management
  • parametros.js - System parameters configuration
  • header-footer.js - Shared navigation and layout
  • registro.js - User registration logic
Responsibilities:
  • DOM manipulation and event handling
  • API requests using Fetch API
  • Client-side validation
  • UI state management
  • Modal and form interactions
PHP endpoints that handle HTTP methods (GET, POST, PUT, DELETE) and database operations.Key Files:
  • conexion.php - Database connection configuration
  • bodega.php - Warehouse CRUD operations
  • categorias.php - Category CRUD operations
  • subcategorias.php - Subcategory CRUD operations
  • proveedores.php - Supplier CRUD operations
  • parametros.php - System parameters CRUD
  • registro.php - User registration endpoint
Responsibilities:
  • RESTful API endpoints
  • Database queries and transactions
  • Input validation and sanitization
  • JSON response formatting
  • CORS header management
HTML templates for different sections of the application.Key Files:
  • index.html - Dashboard/home page
  • bodega.html - Warehouse management interface
  • categoria.html - Category management interface
  • proveedores.html - Supplier management interface
  • parametros.html - System parameters interface
Structure:
  • Each page includes its corresponding CSS and JS files
  • Uses header-footer.js for consistent navigation
  • Follows semantic HTML5 structure
CSS files providing styling for each module.Key Files:
  • header-footer.css - Navigation and layout styles
  • bodega.css - Warehouse page styles
  • categorias.css - Category page styles
  • proveedores.css - Supplier page styles
  • parametros.css - Parameters page styles
  • Style-Registro.css - Registration form styles
  • StyleInicio.css - Login page styles
Styling Approach:
  • Component-based CSS organization
  • Consistent color scheme (primary: #2e6df6, #4a90e2)
  • Responsive design patterns
  • Modal and card-based layouts
Static images including logos, icons, and graphics.Contents:
  • Pro-Stock-Sinfondo.png - Main logo (transparent background)
  • Product images
  • UI icons and graphics

​
Architecture Pattern

Pro Stock Tool implements a Model-View-Controller (MVC) pattern:
  • Model: PHP endpoints in database/ handle data operations
  • View: HTML templates in view/ and root directory
  • Controller: JavaScript files in controllers/ manage user interactions

​
Request Flow

​
Module Organization

Each major feature follows a consistent file naming convention:

Frontend

view/{module}.html

Controller

controllers/{module}.js

Backend

database/{module}.php

Styles

styles/{module}.css
Example - Warehouse Module:
  • view/bodega.html - User interface
  • controllers/bodega.js - Client logic
  • database/bodega.php - API endpoint
  • styles/bodega.css - Styling

​
Database Connection

The database/conexion.php file serves as the central database configuration:
database/conexion.php
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "prostocktool";

$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_errno) {
    http_response_code(500);
    echo json_encode(["error" => "Error de conexión a la base de datos"]);
    exit;
}
?>
All PHP endpoints include conexion.php using require 'conexion.php'; to establish database connectivity.

​
Path Resolution

The project uses relative paths based on file location: 
<link rel="stylesheet" href="../styles/header-footer.css">
<script src="../controllers/header-footer.js"></script>

​
Best Practices

Separation of Concerns

Keep HTML, CSS, and JavaScript in separate files for maintainability

Consistent Naming

Use matching file names across layers (e.g., bodega.html, bodega.js, bodega.php)

Modular Design

Each module is self-contained with its own view, controller, and endpoint

Shared Components

Common functionality like header-footer.js is reused across pages

​
Next Steps

Coding Standards

Learn about code conventions and patterns

Troubleshooting

Common issues and solutions

Build docs developers (and LLMs) love

Get started for freeTalk to us