Wordpress Plugin HTML Bootstrap + PHP - php

Question

I'm creating my first wordpress plugin to show some dashboard data on the wp-admin-page, however only my php code is recognized when I edited my plugin, any html markup I write is omitted.
I want to make my plugin using HTML+bootstrap for the Front-end but make some calculations using PHP but I don't understand how I can do this.
In my first attempt, I could only echo html markup:
<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );
function test_plugin_setup_menu(){
add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init(){
echo "<h1> Hello World! </h1>";
}
?>/*THIS OUTPUT ON MY WP ADMIN PAGE AS EXPECTED WITH A HELLO WORLD
However I need to write a lot of HTML markup with Bootstrap and only use PHP in some areas but any HTML code I write after my ?> doesn't get show on the page.
Second approach: I referred to my HTML file with PHP
<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );
function test_plugin_setup_menu(){
add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init(){
$file = file_get_contents('index.html', FILE_USE_INCLUDE_PATH);
if($file == false)
{
echo 'file not found';
}
else
{
echo $file;
}
}
?>
This last attempt indeed shown all my HTML login with my bootstrap styled perfectly on the wp-admin-page but i cant use the PHP logic or DB connections I need on this HTML file..
My question is: how can I use my HTML markup in my PHP plugin simultaneously?
Extra info
I'm very new to PHP and Wordpress so I don't know what am I doing wrong in my code so HTML tags cant be show on the page unless I referred them to an external file.
Any help is greatly appreciated.

Answer 1

Another alternative would be to include your php file. Here's the idea:
add_action( 'admin_menu', 'test_plugin_setup_menu' );
function test_plugin_setup_menu() {
add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init() {
ob_start();
include_once 'file-that-i-want-to-include.php';
echo ob_get_clean();
}
Then of course in your file-that-i-want-to-include.php. Just create your page like you normally do:
<?php
include_once 'mydatabaseconnction.php';
// ... and so on php codes of sorts
?>
<div class="container">
<div class="row">
<div class="col">
my contents whatever
</div>
</div>
</div>
In addition, you can just load bootstrap in that specific admin settings page if you'd like:
add_action('admin_enqueue_scripts', function() {
if (get_current_screen()->id === 'toplevel_page_test-plugin') { // the prefix is "toplevel_page_"
$css_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.css'); // just change the path going to your css and js
$js_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.js');
wp_enqueue_style('latest-bootstrap-css', $css_path, [], '4.5.0');
wp_enqueue_script('latest-bootstrap-js', $js_path, [], '4.5.0');
}
});