PHP - Php Bootstrap 4 Email From Form

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

I have php file which return data in json format

<?php

include_once('con.php');
$mydata = array();
$data = $con -> prepare('SELECT * FROM user');
$data -> execute();
while($result = $data->fetch()) {
    $mydata[] = $result['id'];
    $mydata[] = $result['first_name'];
    $mydata[] = $result['last_name'];
}
echo json_encode($mydata);
?>

the problem is the footable require both columns and rows how to get colums?

$(document).ready( function() {
	var ft = FooTable.init('#user', {
		columns: $.get("how to get the table column"),
		rows: $.get("row.php")
	});
});

There is no documentation about how to do that with php

look here https://fooplugins.github.io/FooTable/docs/examples/advanced/ajax.html

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div class="container">
   <nav>
      <ul>
           <li><a href="#"> Home </a></li>
      </ul>
   </nav>
</div>

I have a blog on my website and the blogs content is stored in a database. On my home page I have the two recent articles displayed on my home page but I have to change them manually so I add the recent article on the home page in the first column and the second most recent one in the next column so they are side by side. What I want to do is automatically display the blogs image and blog title from the database and display on the home page so I don't have to keep changing it manually

My current code looks like the following

<div class="block">
			<div class="container">
            <h3 class="text-center"><span class="color">Recent Blog Articles</span></h3>
				<div class="row">
                
                    <div class="col-md-6">
						<div class="text-img animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
							<a href="https://www.it-doneright.co.uk/blog/one-year-to-go-until-end-of-support-for-windows-7">
                            <div class="image">
                            <img class="img-responsive" src="https://www.it-doneright.co.uk/images/blog/windows7-eos-new.jpg" alt="One year to go until end of support for Windows 7">
                            </div>
							<p>One year to go until end of support for Windows 7</p>
                            </a>
						</div>
					</div>
                
                    <div class="col-md-6">
						<div class="text-img animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
							<a href="https://www.it-doneright.co.uk/blog/windows-10-is-going-to-require-7gb-of-storage-for-future-updates">
                            <div class="image">
                            <img class="img-responsive" src="https://www.it-doneright.co.uk/images/windows-ten-updates-needing-7gb-space-on-hard-drive.jpg" alt="Windows 10 is going to require 7gb of storage for future updates">
                            </div>
							<p>Windows 10 is going to require 7gb of storage for future updates</p>
                            </a>
						</div>
					</div>
					
				</div>
			</div>
		</div>

I did look on Google before posting but could not get my head around how to do it, could anyone point me in the right direction or start me off and will have a go

  * {
            box-sizing: content-box;
            }

<form id="contactForm" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'],ENT_QUOTES); ?>" method='post'>

<!-- HTML HERE -->

</form>

I've been working on developing a CMS blog and now I'm trying to create a slideshow wit Bootstrap Carousel on the homepage to present the dynamic content (images + text) using the data from table 'posts'.

I tested this code, and it only presents one post. I mean, It's not possible to go to the next slide. I want to show all the posts on the slides.

*The DB connection is already on the includes. The connection was written on a small file called DB.php

Home.php

<header>
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner" role="listbox">
              <?php
              // The default SQL query
                  $sql = "SELECT * FROM posts ORDER BY id desc";
                  $stmt = $ConnectingDB->query($sql);
                    while ($DataRows = $stmt->fetch()) {
                      $Id = $DataRows["id"];
                      $PostTitle = $DataRows["title"];
                      $Image = $DataRows["image"];
                      $PostText = $DataRows["post"];
              ?>
                    <!-- Slide -->
                    <div class="carousel-item active" style="background-image: url('uploads/<?php echo $Image; ?>')">
                      <div class="carousel-caption">
                        <div class="card-body black">
                          <h3 class="large-mistral-white"><?php echo $PostTitle; ?></h3>
                          <p class="small-times-white"><?php echo $PostText; ?></p>
                        </div>
                      </div>
                    </div>
                    <?php } ?>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
        </header>

DB.php

<?php

$DSN='mysql:host = localhost; dbname=everybody_blog';
$ConnectingDB = new PDO($DSN,'root','');
?>

i have 8 division (div), i want to display 4 rows in 4 division and the remain 4 rows in the next 4 division here is my code structure for carousel

<div class="nyie-outer">    
<div class="container">
    <div  id="nyieFull" class="carousel slide carousel-multi-item" data-interval="false" data-ride="carousel">
        <div class="outer-controls-top">
        <div class="nyie-title"><h5>THIS IS NYIE</h5></div>
        <div class="controls-top">    
            <a class="btn-floating" href="#nyieFull" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#nyieFull" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        </div>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                 first row

                 second row

                 third row

                 fourth row
            </div><!--/.First four rows here-->
            <div class="carousel-item">

                  fifth row

                 sixth row

                 seven throw

                 eighth row

            </div><!--/.second four rows here-->
        </div
    </div>    
</div> 
</div>

sql code   

CREATE TABLE  product(
prodId INT(11) NOT NULL UNIQUE AUTO_INCREMENT, 
image VARCHAR(255) NOT NULL,
prodName VARCHAR(255) NOT NULL,
prodPrice VARCHAR(255) NOT NULL,
description TEXT NOT NULL
PRIMARY KEY (prodId) 
);

php code

<?php 
include_once('db.php');
$sql = "SELECT image,prodName, prodPrice, description FROM product ORDER BY prodId ASC LIMIT 4";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    // output data of each row
        while($row = mysqli_fetch_array($result)) {
            $activeprod =  '
            <div class="col-lg-3">
            <a href="more.php" class="newAdded">    
            <figure class="figure">   
               <img src="images/'. $row['image'] .'" alt="" class="img-responsive" >
                <figcaption class="figure-caption">
                    <span class="prodName"><b>Name: </b>'. $row['prodName'] .'</span>
                    <span class="prodPrice"><b>price: </b>'. $row['prodPrice'] .'</span>
                    <span class="desc"><b>description: </b>'. $row['description'] .'</span>    
                </figcaption>    
            </figure> 
            </a>
            </div>
            ';
    }
} 
?>

how can i echo that result in those rows