Question

This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in...

This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in code, but they don't work. In HTML, we need to add < link > to display bootstrap, but I don't know what to do in PHP.

<?php
$servername = "fdb29.awardspace.net";
$username = "3515976_assignment9";
$password = "Becky516.";
$database = "3515976_assignment9";
$port = "3306";

// Create connection
$dbconn = mysqli_connect($servername, $username, $password,
$database, $port);

if($dbconn){

}else{
die("Connection Failed: ".mysqli_connect_error());
}

$myQuery = "SELECT p_name, p_desc, p_img, p_price, p_background, p_weight FROM products;";

$result = $dbconn->query($myQuery);


if ($result->num_rows > 0) {
    echo "<div class='container-fluid'>";
    echo "<ul class='nav'>";
    echo "<li class='nav-item'>";
    echo " <a class='nav-link active' href='index.html'>Emotional Intelligence</a>";
    echo " </li>";
    echo " <li class='nav-item'>";
    echo " <a class='nav-link' href='typesofemotions.html'>Types of Emotions</a>";
    echo "</li>";
    echo "<li class='nav-item'>";
    echo " <a class='nav-link' href='buying2.html'>Buying</a>";
    echo " </li>";
    echo " <li class='nav-item'>";
    echo " <a class='nav-link disabled' href='whatcanyoubuy.php' tabindex='-1' aria-disabled='true'>What You Can Buy</a>";
    echo " </li>";
    echo "</ul>";
   
    while($row = $result->fetch_assoc()) {
        echo "<table class='table'>";
        echo "<tr>";
        echo "<div class=‘row'>";
        echo "<td>";
        echo "<div class=‘alert alert-primary' role='alert'>";
        echo "<h1>" .$row["p_name"]. " (" . $row["p_weight"]. ")</h1></div>";
        echo "</td>";
        echo "</div>";
        echo "</tr>";
        echo "<tr>";
        echo "<div class='row'>";
        echo "<td>";
        echo "<div class='col-lg-4 col-sm-12'><img class='img-thumbnail' src='" . $row["p_img"] . "'width=450 height=300/></div>";
        echo "</td>";
        echo "<td valign=top>";
        echo "<div class='col-lg-8 col-sm-12'>";
        echo "<p>".$row["p_background"]. "</p>";
        echo "<p>".$row["p_desc"]. "</p></div>";
        echo "</td>";
        echo "</div>";
        echo "</tr>";
        echo"</table>";
    }
   
    echo "</div>";
} else {
    echo "0 results";
}

?>

0 0
Add a comment Improve this question Transcribed image text
Answer #1

If you have any doubts comment below

Here you should include all the required bootstrap files like css,jquery in some file like index.php for example

Index.php

<html>

<head>

bootstrap css code

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">   

JS functionalities of tabs,dropdowns and other bootstrap components are included in these

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>

</html>

Now include this php file in your php code to make the "class" code work

<?php

include("index.php");
$servername = "fdb29.awardspace.net";
$username = "3515976_assignment9";
$password = "Becky516.";
$database = "3515976_assignment9";
$port = "3306";

// Create connection
$dbconn = mysqli_connect($servername, $username, $password,
$database, $port);

if($dbconn){

}else{
die("Connection Failed: ".mysqli_connect_error());
}

$myQuery = "SELECT p_name, p_desc, p_img, p_price, p_background, p_weight FROM products;";

$result = $dbconn->query($myQuery);


if ($result->num_rows > 0) {
    echo "<div class='container-fluid'>";
    echo "<ul class='nav'>";
    echo "<li class='nav-item'>";
    echo " <a class='nav-link active' href='index.html'>Emotional Intelligence</a>";
    echo " </li>";
    echo " <li class='nav-item'>";
    echo " <a class='nav-link' href='typesofemotions.html'>Types of Emotions</a>";
    echo "</li>";
    echo "<li class='nav-item'>";
    echo " <a class='nav-link' href='buying2.html'>Buying</a>";
    echo " </li>";
    echo " <li class='nav-item'>";
    echo " <a class='nav-link disabled' href='whatcanyoubuy.php' tabindex='-1' aria-disabled='true'>What You Can Buy</a>";
    echo " </li>";
    echo "</ul>";
   
    while($row = $result->fetch_assoc()) {
        echo "<table class='table'>";
        echo "<tr>";
        echo "<div class=‘row'>";
        echo "<td>";
        echo "<div class=‘alert alert-primary' role='alert'>";
        echo "<h1>" .$row["p_name"]. " (" . $row["p_weight"]. ")</h1></div>";
        echo "</td>";
        echo "</div>";
        echo "</tr>";
        echo "<tr>";
        echo "<div class='row'>";
        echo "<td>";
        echo "<div class='col-lg-4 col-sm-12'><img class='img-thumbnail' src='" . $row["p_img"] . "'width=450 height=300/></div>";
        echo "</td>";
        echo "<td valign=top>";
        echo "<div class='col-lg-8 col-sm-12'>";
        echo "<p>".$row["p_background"]. "</p>";
        echo "<p>".$row["p_desc"]. "</p></div>";
        echo "</td>";
        echo "</div>";
        echo "</tr>";
        echo"</table>";
    }
   
    echo "</div>";
} else {
    echo "0 results";
}

?>

Add a comment
Know the answer?
Add Answer to:
This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • JavaScript Question: Select only the second element with the class '.container'. Assign it to a variable...

    JavaScript Question: Select only the second element with the class '.container'. Assign it to a variable named `container`. Code snippets of the sections with "container:" <nav class="navbar navbar-expand-lg"> <div class="container"> <a title="someUniversity" class="navbar-brand order-1 mr-0" href="#" target="_blank">Presented by someUniversity JavaScript Course</a> <div class="" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#about">About</a> <a class="nav-item nav-link" href="#speakers">Speakers</a> <a class="nav-item nav-link" href="#schedule">Schedule</a> </div> </div> </div> <div class="jumbotron jumbotron-fluid text-white"> <div class="container text-sm-center pt-5"> <h1 class="display-2">JavaScript Conference</h1> <p class="lead">A...

  • Kindly assist in fixing the error i got when I pasted my codes to validate it....

    Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English-->    <head>    <meta charset="utf-8"/>    <title>DA Website</title>    <link rel="stylesheet" type="text/css" href="styles.css" />    </head>    <body>    <div id="wrapper">    <!-- start html...

  • HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...

    HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this: To look more like this.... It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring. HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags...

  • I need help incorporating javascript into my page. The Lessons page has a message box (not...

    I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

  • I cant complete this assignment, I have tried several ways shown in the tutorial but cant...

    I cant complete this assignment, I have tried several ways shown in the tutorial but cant seem to get it to validate, can anyone help? This is a basic JavaScript tutorial and will not validate with Jquery. Monroe Public Library Denise Kruschev manages the website for the Monroe Public Library in Monroe, Ohio. One of her responsibilities is to add content and links to the site that will be of interest to the library’s patrons. Denise has asked you to...

  • Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

    Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. Thank you. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar...

  • Q1. rewrite the exercise on April 4 by adding the following operations: 1) In the php...

    Q1. rewrite the exercise on April 4 by adding the following operations: 1) In the php script, create an associative array named $order that stores the following values: - the number of cheese toppings; - the number of pepperoni toppings; - the number of ham toppings; - the size of the ordered pizza; - the number of the ordered pizza; - the total cost of the order; - the discount rate; - the total cost after the discount. 2) the...

  • Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different...

    Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different Tools ) http://gridcalculator.dk/ Implement grid on the sample html file using pixels Convert to a percentage-based grid HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Out with the old...</title> <link rel="stylesheet" href="path-to-style.css"> <meta name="description" content="We are going to refine this document down to a good starting point for all html5 projects moving forward."> <meta name="author" content="ABC"> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div...

  • Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...

    Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head>     <link rel="stylesheet" href="bootstrap/css/bootstrap.css">     <link rel="stylesheet" href="style.css">     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="./bootstrap/js/bootstrap.js"></script>     <meta charset="UTF-8">     <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">     <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5>     <nav class="my-2 my-md-0 mr-md-3">         <a class="p-2 text-dark" href="index.html">Home</a>         <a class="p-2 text-dark" href="about.html">About Us</a>         <a class="p-2 text-dark" href="products.html">Products</a>         <a class="p-2 text-dark"...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT