After much head-scratching I deduced that achieving a successful PHP connection to MySQL would not be rocket-science. After receiving conflicting advice from Internet searches and ChatBots I knew I would have to rely on my own logic and common sense.

A Successful PHP Connection

Why was a successful PHP connection so elusive. I was new to PHP so the whole concept was a learning curve. I am not new to programming, I have dabbled with Basic programming since long before the advent of Windows and even PCs. My first Basic program was written on a Sinclair ZX81 – a real blast from the past.

function test_external_db_connection() {
    $host = '194.36.184.89';
    $username = 'u729189423_bosser';
    $password = 'dingle!Squish?86';
    $database = 'u729189423_Trial';
    $conn = new mysqli($host, $username, $password);
    if ($conn->connect_error) {
        return "❌ Connection failed: " . esc_html($conn->connect_error);
    }
    $conn->close();
    return "✅ Database connection successful!";
}
add_shortcode('testdb', 'test_external_db_connection');

The above code is the working code. I had to make one small change from the original to make it work.

I changed:
$conn = new mysqli($host, $username, $password, $database);
to:
$conn = new mysqli($host, $username, $password);

I simply removed the $database parameter. Due to the way Hostinger configures the MySQL or MariaDB databases, the database name does not need to be specified. The username is linked directly to a specific database so there isn’t a need to define it explicitly.

It is always satisfying to debug a piece of code. Now that I can make a successful PHP connection to MySQL, I can move forward with creating some real PHP code to spice-up my Website creativity.

Simulating a Fixed Text block in Elementor

Firstly I encountered a problem trying to display the text <pre>. The solution, as always, is simple.

Don’t enter the text in the Visual tab of the text editor, Enter it into the Code tab, where you can escape the PHP command to override the default behaviour. Here you can enter &lt;pre&gt; which will display the code as you desire it.

In order to display this, I entered the above text in the Visual Tab so that you can see what I was doing.

The <pre> Block

You can see a fixed text block at the beginning of this section. This was achieved with an Elementor Text Editor widget with the fixed text starting with the <pre> followed by the fixed text, including tab characters entered into the Code section of the widget.

Then with the Text Editor selected, go to the Advanced Tab and set padding to 10px, leave the dimensions linked so that all directions are padded equally. Scroll down to find Background, Set Background type to Classic and set Background Color to #D3D3D3. Expand Border and set Border Width to 2px linked. Set Border Color to Primary.

I have set this Text Editor in its own section so that I can save the section as a Template for future reuse.