Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndresLopezCorrales/Countries-WebPage/llms.txt

Use this file to discover all available pages before exploring further.

This page covers everything you need to know before running Country-Click, whether you are setting it up on a local development machine or deploying it to a shared PHP web host. The application has no database, no environment variables, and a single production dependency: a compiled Tailwind CSS file that is already committed to the repository. Most developers will be up and running after verifying their PHP configuration and starting the built-in server.

​
System Requirements

RequirementDetails
PHP7.4 or higher
php.ini directiveallow_url_fopen = On (required for file_get_contents() API calls)
Node.js16 or higher — only needed when rebuilding the Tailwind CSS output
Internet connectionRequired at runtime; all country data is fetched live from the REST Countries API

​
Project Structure

The repository has a straightforward layout. The entire PHP application lives inside src/, and the compiled CSS is committed so no build step is required for a standard installation: 
Countries-WebPage/
├── src/
│   ├── index.php                 # Main entry point
│   ├── input.css                 # Tailwind source CSS
│   ├── output.css                # Compiled CSS (committed)
│   ├── controller/
│   │   ├── ApiConsumer.php       # API orchestration + rendering
│   │   ├── GetAttributesController.php  # Data extraction from API JSON
│   │   └── GetNameController.php # Handles map click POST data
│   └── resources/
│       ├── js/getname.js         # Map click → form POST
│       └── img/                  # Region illustrations
├── tailwind.config.js
└── package.json
Key files explained:
  • index.php — instantiates ApiConsumer, renders the navbar (including the search form), includes the full SVG world map, and calls $consumer->menu() to output the country information panel.
  • ApiConsumer.php — orchestrates the full request lifecycle: reads the search bar POST value via searchBar(), falls back to the map-click POST value via GetNameController, builds the API URL (https://restcountries.com/v3.1/name/{name}), calls file_get_contents(), decodes the JSON, delegates field extraction to GetAttributesController, and echoes the rendered HTML panel.
  • GetAttributesController.php — provides individual getter methods for each data field: getCommonName(), getOfficialName(), getRegion(), getPopulation(), getCapital(), getLanguage(), getTimezone(), and getFlag().
  • GetNameController.php — reads the titulo POST field submitted by the JavaScript map-click handler.
  • getname.js — attaches a click event listener to every .country SVG element, reads the xlink:title attribute (the English country name), creates a hidden POST form, and submits it programmatically.

​
PHP Configuration

Country-Click uses file_get_contents() to make HTTP requests to the REST Countries API: 
$url = "https://restcountries.com/v3.1/name/$nameCountry";
$response = file_get_contents($url, false, $context);
This requires the allow_url_fopen directive to be enabled in your php.ini. Locate your active php.ini file (run php --ini to find it) and confirm or add the following line: 
allow_url_fopen = On
To verify the setting is active from the command line without editing any files, run: 
php -r "echo ini_get('allow_url_fopen');"
A result of 1 means the directive is enabled. A result of 0 means it is disabled — edit your php.ini, set allow_url_fopen = On, and restart your web server or PHP-FPM service.
If allow_url_fopen is disabled, every country lookup — whether triggered by a map click or a search bar submission — will fail silently. The information panel will not render and no error will be displayed to the user.

​
Tailwind CSS Rebuild

The compiled stylesheet src/output.css is committed to the repository, so you do not need to rebuild CSS to run the app. A rebuild is only necessary when you modify PHP templates, HTML, or JavaScript files and introduce new Tailwind utility classes that are not yet present in the compiled output. To perform a one-time rebuild, run the following from the project root: 
npx tailwindcss -i ./src/input.css -o ./src/output.css
For active development with automatic rebuilds on file save, use the --watch flag: 
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Tailwind scans for class names according to the content glob defined in tailwind.config.js:
tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,php}"],
  theme: {
    extend: {
      colors: {
        'brown-super-hard': '#A45C40',
        'brown-hard':       '#C38370',
        'brown-medium':     '#E4B7A0',
        'brown-low':        '#F6EEE0',
      },
    },
  },
  plugins: [],
}
The four custom brown-* color tokens are used throughout index.php for the navbar, background, text, and button styles. Any new class names you add to .php, .js, or .html files inside src/ will be picked up automatically on the next build.

​
Deploying to a Web Host

Country-Click has no build artifacts beyond the compiled CSS, no database schema to import, and no environment variables to configure, which makes deployment straightforward:
  1. Upload the entire src/ directory to your web host’s public document root (typically public_html/ or www/).
  2. Confirm that your host runs PHP 7.4 or higher.
  3. Confirm that allow_url_fopen is enabled — check your host’s PHP configuration panel or contact support if you are on a managed shared host.
  4. Visit your domain in a browser. The app will be fully functional as long as the server can reach https://restcountries.com.
There is no .env file, no database connection string, and no server-side session storage. The only external dependency at runtime is network access to https://restcountries.com/v3.1/.

Build docs developers (and LLMs) love

Get started for freeTalk to us