Twitter Bootstrap Question posted in

I can't display dynamic data on the boostrap modal-Twitter bootstrap

I am trying to display dynamic data for each product from the database to the bootstrap modal but am getting the following error on the modal whenever I click on the details button. Somebody tell me what am doing wrong please.

Notice: Undefined variable: row in E:xampphtdocsstoredphonesDisplayModal.php on line 23

Notice: Undefined variable: row in E:xampphtdocsstoredphonesDisplayModal.php on line 26

Below is my code:

//  below <a> named as Details is located at the phones page which.
<a href="phones.php?aidy=<?= $product['id']; ?>"  class="btn btn-success" data-toggle="modal" data-target="#myMode">Details</a> 


<?php 

    if(isset($_GET['aidy']))
    {
     <?php include('database_connect.php'); ?>
    
      $id = $_GET['aidy'];
      $sql = "SELECT * FROM products WHERE id=$id ";
      $stmt = $db_connect->prepare($sql);
      $stmt->execute();
      $result = $stmt->get_result();
      $row = $result->fetch_assoc();
    }

?>
   

     <div class="container">
            <div class="row">
                    <div class="col-md-12">
                        <div class="modal fade " id="myMode">
                        <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
    
                        <h3><?=$row['product_name']; ?></h3>
                        </div>
                        <div class="modal-body">
                        <h2><?=$row['our_price']; ?></h2>
                        </div>
    
                        <div class="modal-footer">
                        <a href="" class="btn btn-secondary">Close</a>
                        </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    //For Debugging purpose 
    <html lang="en" class="fontawesome-i2svg-active fontawesome-i2svg-complete" style=""><head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mobile Phones</title>
        <!-- Bootstrap CSS -->
      
      <style type="text/css">svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}</style><link href="images/logo.jpg" rel="icon" type="image/png">
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/magnific-popup.css">
      <link rel="stylesheet" href="styles.css">
      </head>
      <body class="">
    
          
          
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="index.php"><img src="images/logo.jpg" alt="" width="30" height="24" class="d-inline-block align-text-top"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
          </li>
        
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Sales
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="computers.php">Computers</a>
              <a class="dropdown-item" href="phones.php">Phones</a>
              <a class="dropdown-item" href="accesories.php">Accessories</a>
             
            </div>
          </li>
             <li class="nav-item">
            <a class="nav-link" href="services.php">Services</a>
          </li>
              <li class="nav-item">
            <a class="nav-link" href="signUp.php">Sign Up</a>
          </li>
            
             <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              About
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="aboutUs.php">Rahtech</a>
              <a class="dropdown-item" href="#">Team</a>
             
            </div>
          </li>
       
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
           
    
    
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class=""></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item">
                <img src="images/logo.jpg" class="d-block w-100" height="500px" alt="...">
              </div>
              <div class="carousel-item active carousel-item-left">
                <img src="images/download.jpeg" class="d-block w-100" height="500px" alt="...">
              </div>
              <div class="carousel-item carousel-item-next carousel-item-left">
                <img src="images/repair.jpeg" class="d-block w-100" height="500px" alt="...">
                <div class="carousel-caption">
                  <h1 class="display-2" style="color: tomato;">Dealers in</h1>
                  <h3>Computer repair and maintanace</h3>
                  <button type="button" class="btn btn-primary btn-lg">Contact</button>
                  <button type="button" class="btn btn-primary btn-lg">Proceed</button>
          
          
                </div>
              </div>
            </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>
        
    
    
    <br>
    <div class="featured">
      <h3>Featured Mobile Phones</h3>
    </div>
    
    <hr>
    
    <!-- Products starts here -->
    
    
    <div class="container">
    <div class="row text-center">
    
    <div class="col-lg-3 col-md-4 col-sm-6 col-11 mx-auto my-3">
      <h4>Camon 16 Pro</h4>
         <a class="test-popup-link" href="products_images/60c45f8ce71b62.79711862camon 16 pro.jpeg">
                           <img src="products_images/60c45f8ce71b62.79711862camon 16 pro.jpeg" class="img-fluid rounded mx-auto d-block" alt="Hp 840" id="images">
                        </a>
     
      <p class="list-price text-danger">List Price <s>Ksh. 24000</s></p>
      <p class="price">Our Price: Ksh. 19000</p>
      <a href="phones.php?aidy=25" class="btn btn-success" data-toggle="modal" data-target="#myMode">Details</a> 
    
    </div>
    
    
    <div class="col-lg-3 col-md-4 col-sm-6 col-11 mx-auto my-3">
      <h4>Infinix smart 2</h4>
         <a class="test-popup-link" href="products_images/60cb0262195b53.20343058infinix-smart-2-1.jpg">
                           <img src="products_images/60cb0262195b53.20343058infinix-smart-2-1.jpg" class="img-fluid rounded mx-auto d-block" alt="Hp 840" id="images">
                        </a>
     
      <p class="list-price text-danger">List Price <s>Ksh. 18000</s></p>
      <p class="price">Our Price: Ksh. 15000</p>
      <a href="phones.php?aidy=32" class="btn btn-success" data-toggle="modal" data-target="#myMode">Details</a> 
    
    </div>
    
    <!-- end col -->
    
    </div>
    </div>
    
    
    <!-- FOOTER -->  
          
    
    
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    
    
        
        <footer class="mt-5">
            <div class="container-fluid padding">
            <div class="row text-center ">
                <div class="col-md-4 my-3">
                <img src="images/logo.jpg" alt="Logo pic" class="img-fluid footer-logo">
              <hr class="light">
              <p>Tel no:+254707286086</p>
              <p>Email us: [email protected]</p>
                      <div class="social-handles">
                      
                           <div class="d-flex justify-content-center align-items-center">   
                      <a href="#"><svg class="svg-inline--fa fa-facebook fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg><!-- <i class="fab fa-facebook"></i> --></a>
                      <a href="#"><svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg><!-- <i class="fab fa-twitter"></i> --></a>
                      <a href="#"><svg class="svg-inline--fa fa-instagram fa-w-14" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg><!-- <i class="fab fa-instagram"></i> --></a>
                      
                      </div>
                     
                      
                      </div> 
                    
                </div>
                
                <div class="col-md-4 my-3">
                    <h5>Give us feedback</h5>
                 <form class="form-group my-2 subscribe">
                     <div class="form-group">
                         <input class="form-control " type="email" placeholder="write your email...">
                     </div>
                     <div class="form-group">
                         <textarea class="form-control" rows="4" placeholder="Message..."></textarea> 
                     </div>
            
                    
            <button class="btn btn-success my-2 my-sm-0" type="submit">Send</button>
            </form>
                  
                </div>
                
                <div class="col-md-4 my-3">
                    <h5>Quick Links</h5>
                    <a href="#"><p class="lead">Home</p></a>
                    <a href="#"><p>Services</p></a>
                    <a href="#"><p>About</p></a>
                    <a href="#"><p>Sales</p></a>
                
              
                </div>
                 <div class="col-12">
              <h5 style="font-family:serif">© Copyright 2021 RAHTECH , RESERVED</h5>
              </div>
                </div> 
               
            </div>
            
            </footer>
    
    
              
      
      <!--end of elements-->
      <script src="js/jquery-3.4.1.min.js"></script>
      <script src="js/bootstrap.bundle.min.js"></script>
      <script src="js/all.js"></script>
      <script src="js/jquery.magnific-popup.min.js"></script>
            <script type="text/javascript">
          $('.test-popup-link').magnificPopup({
              type: 'image',
              gallery: {
                  enabled: true
              }
          });
      
      </script>
       
      </body></html>
Tags:

2

Answers


  1. 0 
    {
    ...
    $row = $result->fetch_assoc();
}

echo $row['product_name'];

    if remove html tags, and show flow of php codes, then get above code.
    $row was in local brace and seems to be not valid outside block.

    you can move closing brace to the bottom of dialog.

      $result = $stmt->get_result();
  $row = $result->fetch_assoc();
?>
  <div class="container">
      ...
  </div>
<?php
}
?>
    Login or Signup to reply.
  2. 0

    You can use a table and add for each.

    <html lang="en" class="fontawesome-i2svg-active fontawesome-i2svg-complete" style=""><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/all.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
<title>Mobile Phones</title>
  <style type="text/css">svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}</style><link href="images/logo.jpg" rel="icon" type="image/png">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/magnific-popup.css">
  <link rel="stylesheet" href="styles.css">
  </head>
  <body class="">
<div class="container">
        <div class="row">
                <div class="col-md-12">
                    <div class="modal fade " id="myMode">
                    <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
  <table >
                                <th>
                                    Product Name
                                </th>
                                <th>
                                    Our Price
                                    <th>Image</th>
                                </thead>
                                <tbody>
                                <?php if($rows): ?>
                                    <?php foreach($rows as $row): ?>
                                        <tr >
                                            <td><?php echo $row['product_name']; ?></td>
                                            <td><?php echo $row['our_price']; ?></td>
                                            <td>
                                                <img src="https://www.w3schools.com/w3css/img_lights.jpg" width=40mm height=40mm >
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                                </tbody>
                            </table>

                    <div class="modal-footer">
                    <a href="" class="btn btn-secondary">Close</a>
                    </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="index.php"><img src="images/logo.jpg" alt="" width="30" height="24" class="d-inline-block align-text-top"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
      </li>   
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Sales
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="computers.php">Computers</a>
          <a class="dropdown-item" href="phones.php">Phones</a>
          <a class="dropdown-item" href="accesories.php">Accessories</a>     
        </div>
      </li>
         <li class="nav-item">
        <a class="nav-link" href="services.php">Services</a>
      </li>
          <li class="nav-item">
        <a class="nav-link" href="signUp.php">Sign Up</a>
      </li>
        
         <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          About
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="aboutUs.php">Rahtech</a>
          <a class="dropdown-item" href="#">Team</a>
         
        </div>
      </li>
   
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class=""></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item">
            <img src="images/logo.jpg" class="d-block w-100" height="500px" alt="...">
          </div>
          <div class="carousel-item active carousel-item-left">
            <img src="images/download.jpeg" class="d-block w-100" height="500px" alt="...">
          </div>
          <div class="carousel-item carousel-item-next carousel-item-left">
            <img src="images/repair.jpeg" class="d-block w-100" height="500px" alt="...">
            <div class="carousel-caption">
              <h1 class="display-2" style="color: tomato;">Dealers in</h1>
              <h3>Computer repair and maintanace</h3>
              <button type="button" class="btn btn-primary btn-lg">Contact</button>
              <button type="button" class="btn btn-primary btn-lg">Proceed</button>
            </div>
          </div>
        </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>
<br>
<div class="featured">
  <h3>Featured Mobile Phones</h3>
</div>

<hr>
<!-- Products starts here -->
<div class="container">
<div class="row text-center">

<div class="col-lg-3 col-md-4 col-sm-6 col-11 mx-auto my-3">
  <h4>Camon 16 Pro</h4>
     <a class="test-popup-link" href="products_images/60c45f8ce71b62.79711862camon 16 pro.jpeg">
                       <img src="products_images/60c45f8ce71b62.79711862camon 16 pro.jpeg" class="img-fluid rounded mx-auto d-block" alt="Hp 840" id="images">
                    </a>
 
  <p class="list-price text-danger">List Price <s>Ksh. 24000</s></p>
  <p class="price">Our Price: Ksh. 19000</p>
  <a href="phones.php?aidy=25" class="btn btn-success" data-toggle="modal" data-target="#myMode">Details</a> 

</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-11 mx-auto my-3">
  <h4>Infinix smart 2</h4>
     <a class="test-popup-link" href="products_images/60cb0262195b53.20343058infinix-smart-2-1.jpg">
                       <img src="products_images/60cb0262195b53.20343058infinix-smart-2-1.jpg" class="img-fluid rounded mx-auto d-block" alt="Hp 840" id="images">
                    </a>
 
  <p class="list-price text-danger">List Price <s>Ksh. 18000</s></p>
  <p class="price">Our Price: Ksh. 15000</p>
  <a href="phones.php?aidy=32" class="btn btn-success" data-toggle="modal" data-target="#myMode">Details</a> 

</div>

<!-- end col -->

</div>
</div>


<!-- FOOTER -->  
      
    <footer class="mt-5">
        <div class="container-fluid padding">
        <div class="row text-center ">
            <div class="col-md-4 my-3">
            <img src="images/logo.jpg" alt="Logo pic" class="img-fluid footer-logo">
          <hr class="light">
          <p>Tel no:+254707286086</p>
          <p>Email us: [email protected]</p>
                  <div class="social-handles">
                  
                       <div class="d-flex justify-content-center align-items-center">   
                  <a href="#"><svg class="svg-inline--fa fa-facebook fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg><!-- <i class="fab fa-facebook"></i> --></a>
                  <a href="#"><svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg><!-- <i class="fab fa-twitter"></i> --></a>
                  <a href="#"><svg class="svg-inline--fa fa-instagram fa-w-14" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg><!-- <i class="fab fa-instagram"></i> --></a>
                  
                  </div>
                 
                  
                  </div> 
                
            </div>
            
            <div class="col-md-4 my-3">
                <h5>Give us feedback</h5>
             <form class="form-group my-2 subscribe">
                 <div class="form-group">
                     <input class="form-control " type="email" placeholder="write your email...">
                 </div>
                 <div class="form-group">
                     <textarea class="form-control" rows="4" placeholder="Message..."></textarea> 
                 </div>
        
                
        <button class="btn btn-success my-2 my-sm-0" type="submit">Send</button>
        </form>
              
            </div>
            
            <div class="col-md-4 my-3">
                <h5>Quick Links</h5>
                <a href="#"><p class="lead">Home</p></a>
                <a href="#"><p>Services</p></a>
                <a href="#"><p>About</p></a>
                <a href="#"><p>Sales</p></a>
            </div>
             <div class="col-12">
          <h5 style="font-family:serif">© Copyright 2021 RAHTECH , RESERVED</h5>
          </div>
            </div> 
           
        </div>
        </footer>
  </body>
     <!--end of elements-->
  
     
  </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search