HTML - CSS not being applied to id - php

I'm newbie and trying to make a E-commerce website using Xampp. I'm unable to get the items in content area in a ordered way (see images). What I want but I am getting .
The code for content area in index.php is:
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<?php getPro(); ?>
</div>
</div>
getPro() function in functions.php is:
$con = mysqli_connect("localhost","root","","ecommerce");
//get the products
function getPro () {
global $con;
$get_pro = "select * from products order by RAND() LIMIT 0,6";
$run_pro = mysqli_query($con, $get_pro);
while($row_pro=mysqli_fetch_array($run_pro)){
$pro_id = $row_pro['product_id'];
$pro_cat = $row_pro['product_cat'];
$pro_brand = $row_pro['product_brand'];
$pro_title = $row_pro['product_title'];
$pro_price = $row_pro['product_price'];
$pro_image = $row_pro['product_image'];
echo "
<div id='single_product'>
<h3>$pro_title</h3>
<img src='admin_area/product_images/$pro_image' width='180' height='180' />
<p><b>₹ $pro_price</b></p>
</div>
";
}
}
CSS code in style.css is:
#products_box {
width:780px;
text-align:center;
margin-left:30px;
margin-bottom:10px;
}
#single_product{
float:left;
margin-left:20px;
padding:10px;
}
generated HTML is:
<!DOCTYPE>
<html>
<head>
<title>My online shop</title>
<link rel="stylesheet" href="styles/style.css" media="all" />
</head>
<body>
<!--Main Container starts here-->
<div class="main_wrapper">
<!--header starts here-->
<div class="header_wrapper">
<img id="logo" src="images/logo.gif" />
<img id="banner" src="images/ad_banner.gif" />
</div>
<!--header ends here-->
<!--Navigation bar starts here-->
<div class="menubar">
<ul id="menu">
<li>Home</li>
<li>All Products</li>
<li>My Account</li>
<li>Sign Up</li>
<li>Shopping Cart</li>
<li>Contact Us</li>
</ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="search a product" />
<input type="submit" name="search" value="search" />
</form>
</div>
</div>
<!--Navigation bar ends here-->
<!--Content wrapper starts here-->
<div class="content_wrapper">
<div id="sidebar">
<!--categories-->
<div id="sidebar_title">Categories</div>
<ul id="cats">
<li><a href='#'>Laptops</a></li><li><a href='#'>Cameras</a></li><li><a href='#'>Mobiles</a></li><li><a href='#'>Tablets</a></li><li><a href='#'>media players</a></li><li><a href='#'>Ebook readers</a></li><li><a href='#'>Graphic tablets</a></li>
</ul>
<!--Brands-->
<div id="sidebar_title">Brands</div>
<ul id="cats">
<li><a href='#'>HP</a></li><li><a href='#'>DELL</a></li><li><a href='#'>LG</a></li><li><a href='#'>Samsung</a></li><li><a href='#'>Apple</a></li><li><a href='#'>Motorola</a></li><li><a href='#'>Xiamoi</a></li><li><a href='#'>Huawei</a></li><li><a href='#'>Blackberry</a></li><li><a href='#'>HTC</a></li> </ul>
</div>
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<div class='single_product'>
<h3>Moto G5 Plus (Lunar Grey, 32 GB)</h3>
<img src='admin_area/product_images/motorola-moto-g5-plus-1.jpg' width='180' height='180' />
<p><b>₹ 15999</b></p>
</div>
<div class='single_product'>
<h3>xiamoi redmi note 3</h3>
<img src='admin_area/product_images/Redmi-Note3-32GB-SDL881680011-2-1b99d.jpg' width='180' height='180' />
<p><b>₹ 9999</b></p>
</div>
<div class='single_product'>
<h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
<img src='admin_area/product_images/Dell Vostro 15 3558 15.6-inch Laptop.jpg' width='180' height='180' />
<p><b>₹ 28000</b></p>
</div>
<div class='single_product'>
<h3>Iphone 6 (32 GB)</h3>
<img src='admin_area/product_images/SP705-iphone_6-mul.png' width='180' height='180' />
<p><b>₹ 30000</b></p>
</div>
</div>
</div>
</div>
<!--Content wrapper ends here-->
<div id="footer">
<h2 style="text-align:center; padding-top:30px;">© 2017 by Technohub
</div>
</div>
<!--Main Container ends here-->
</body>
</html>
Please explain in detail as I'm a newbie


you are using the same ID multiple times,
IDs must be unique,
So use a class instead
instead of <div id='single_product'> use something like <div class='single_product'>
then in CSS
.single_product{
float:left;
margin-left:20px;
padding:10px;
}
Answer after question edited
Here is your code improved using flexbox
#products_box {
display: flex;
flex-wrap: wrap;
max-width: 780px;
justify-content: center;
text-align:center;
/*demo*/
background: pink
}
.single_product {
padding: 10px;
}
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<div class='single_product'>
<h3>Moto G5 Pluspl (Lunar Grey, 32 GB)</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 15999</strong></p>
</div>
<div class='single_product'>
<h3>xiamoi redmi note 3</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 9999</strong></p>
</div>
<div class='single_product'>
<h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 28000</strong></p>
</div>
<div class='single_product'>
<h3>Iphone 6 (32 GB)</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 30000</strong></p>
</div>
</div>
</div>


For future reference:
As #dippas stated, IDs must be unique.
Now you just need to clear cache and cookies and it will work.

Related

My pictures don't show up in my index.php file

I am creating a shopping cart in mySQLi and PHP. I inserted the products with images into PhpMyAdmin (I typed - zdjecia/photo.png in the zdjecie_produktu)
This is my code for this part in PHP. I am only starting PHP and I've been following this tutorial https://www.youtube.com/watch?v=ka2ea2LL36g. Everything seems to work fine, just these pictures don't show up :(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favico.png" />
</head>
<body>
<section class="home">
<div class="slider">
<div class="slide active" id="slide" style="background-image: url(tlo1.jpg)" ><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav class="indeksik">
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="nowysklep">NOWY SKLEP</h1>
<p>Świece Caroline Homemade Candles to nowa marka domowych świec zapachowych. Nasze świece produkowane są ręcznie w zaciszu domowym z naturalnego wosku sojowego.</p>
Kup teraz
</div>
</div>
</div>
</div>
<div class="slide" id="slide" style="background-image: url(tlo2.jpg)"><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav>
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="darmowa">DARMOWA DOSTAWA OD 100ZŁ</h1>
<p>Darmowa dostawa już od 100zł.<br> Dostępny Kurier/Paczkomaty Inpost.</p>
</div>
</div>
</div>
</div>
<div class="slide" id="slide" style="background-image: url(tlo3.jpg)" ><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav>
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="przyjemnosc">ŚWIAT PRZYJEMNOŚĆI</h1>
<p>Świece Caroline Homemade Candles są naturalne jak i również ekologiczne. Swój produkt tworzymy z pasją i zamiłowaniem. Zapraszamy Cię do naszego świata przyjemności</p>
Kup teraz
</div>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="prev"><</div>
<div class="next">></div>
</div>
<div class="indicator">
</div>
</section>
<!-----featured categories ------->
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="categories-1.png">
</div>
<div class="col-3">
<img src="categories-2.png">
</div>
<div class="col-3">
<img src="categories-3.png">
</div>
</div>
</div>
</div>
<!----- featured products----->
<div class="container">
<div class="row">
<?php
include 'config.php';
$stmt = $conn->prepare("SELECT * FROM product");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc());
?>
<div class="col-lg-3">
<div class="card-deck">
<div class="card p-2 border-secondary mb-2">
<img src="<?= $row['zdjecie_produktu'] ?>" class="card-img-top" height="250">
</div>
</div>
</div>
<?php T_ENDWHILE ?>
</div>
</div>
<!----- footer ----->
<footer>
<div class="column">
<ul class="footer-links-main">
<li>O nas</li>
<li>Produkty</li>
<li>Regulamin</li>
<li>Kontakt</li>
<li>FAQ</li>
</ul>
</div>
<div class="footer-sm">
<div class="column2">
<h3 class="kontakth3">Kontakt</h3>
<p class="kontaktp">Adres e-mail:xxx</p>
<p class="kontaktp">Numer telefonu:xxx</p>
</div>
</div>
</footer>
<!---- js for toggle menu--->
<script>
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
function menutoggle(){
if (MenuItems.style.maxHeight == "0px")
{
MenuItems.style.maxHeight = "200px";
}
else
{
MenuItems.style.maxHeight = "0px";
}
}
</script>
<script src="main.js"></script>
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
The code has no errors and a default broken image icon shows up instead of pictures.
and this is my config.php
<?php
$conn = new mysqli("localhost","root","","cart_system");
if($conn->connect_error){
die("Connection Failed".$conn->connect_error);
}
?>

Hide and show button based on user SESSION in php foreach loop

Im trying to not show the remove button to the users that did not uploaded image to website, and I want the remove button be shown only for the user that uploaded a specific image.
The problem is, it is in foreach loop, I tried with
if($user_id == $_GET['id']
but it show every button, but when I put
if($user_id != $_GET['id'])
all button disappear.
This is the button I would like to show/hide
<?php
require('dbconfig.php');
if(!$user->is_loggedIn()) {
$user->Redirect('index.php');
}
$user_id = $_SESSION['user_session'];
$stmt = $db_conn->prepare("SELECT * FROM users WHERE user_id=:user_id");
$stmt->execute(array(":user_id"=>$user_id));
$userRow=$stmt->fetch(PDO::FETCH_ASSOC);
// print_r($userRow);
if(isset($_POST['ok'])) {
$folder = "/Library/WebServer/Documents/Website/uploads/";
$image = $_FILES['image']['name'];
$path = $folder . $image ;
$target_file=$folder.basename($_FILES["image"]["name"]);
$imageFileType=pathinfo($target_file,PATHINFO_EXTENSION);
$allowed=array('jpeg','png' ,'jpg'); $filename=$_FILES['image']['name'];
$ext=pathinfo($filename, PATHINFO_EXTENSION);
if(!in_array($ext,$allowed)) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
} else {
$success = "Image uploaded successfully";
move_uploaded_file( $_FILES['image'] ['tmp_name'], $path);
$stmt = $db_conn->prepare("INSERT INTO images (img, user_id) VALUES (:image, :user_id)");
$stmt->bindparam(":image",$image);
$stmt->bindparam(":user_id",$user_id);
$stmt->execute();
}
}
$subjects = $db_conn->prepare("SELECT img FROM images");
$subjects->setFetchMode(PDO::FETCH_ASSOC);
$subjects->execute();
$stmt = $db_conn->prepare("SELECT user_id FROM images");
$stmt->execute();
$nesto=$stmt->fetchAll(PDO::FETCH_ASSOC);
echo '<pre>';
print_r($nesto);
echo '</pre>';
// echo $nesto['user_id'];
$ids = $_GET['id'];
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.0.1">
<title>Management</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="album.css" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<strong>Pictures</strong>
</a>
Home
Profile
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1>Shared Gallery</h1>
<p class="lead text-muted"><?php print($userRow['user_name']); ?></p>
<p>
<p><?php echo $success; ?></p>
<!-- Upload Image Form -->
<div>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="image" />
<input type="submit" name="ok"/>
</form>
</div>
<!-- End Upload Image Form -->
Logout
</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<!-- START -->
<?php foreach($subjects as $subject) { ?>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="uploads/<?php echo $subject['img']; ?>" class="bd-placeholder-img card-img-top" width="100%" height="225" focusable="false"/>
<div class="card-body">
<p class="card-text">
<ul>
<li>Username</li>
<li>Email</li>
<li>Address</li>
</ul>
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
THIS IS THE BUTTON I WANT TO SHOW AND HIDE
<button type="button" class="btn btn-sm btn-outline-secondary">Remove</button>
THIS IS THE BUTTON I WANT TO SHOW AND HIDE
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<?php } ?>
<!-- END -->
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
Back to index
</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
</body></html>

If you change these 2 queries into one query, you would have a resultset with the img and the users id, you can then use that to compare with the user that is logged in
//$subjects = $db_conn->prepare("SELECT img FROM images");
//$subjects->setFetchMode(PDO::FETCH_ASSOC);
//$subjects->execute();
//$stmt = $db_conn->prepare("SELECT user_id FROM images");
//$stmt->execute();
//$nesto=$stmt->fetchAll(PDO::FETCH_ASSOC);
Replace as
$result = $db_conn->query("SELECT img, user_id FROM images");
$subjects = $result->fetchAll(PDO::FETCH_ASSOC);
Then around your button you can do
<?php
// If this user uploaded this image they are allowed to remove it
if ($subject->user_id == $_SESSION['user_session']) :
<button type="button" class="btn btn-sm btn-outline-secondary">Remove</button>
endif;
?>
Big Note
I dont see a session_start() in this code, as you are using $_SESSION you would need one of those right at the top of this script.

I decided to do it this way
This worked for me perfectly.
<!-- START -->
<?php foreach($subjects as $subject) : ?>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="uploads/<?php echo $subject['img']; ?>" class="bd-placeholder-img card-img-top" width="100%" height="225" focusable="false"/>
<div class="card-body">
<p class="card-text">
<ul>
<li><?php echo $subject['img_id']; ?></li>
<li><?php echo $subject['user_name']; ?></li>
<li><?php echo $subject['user_email']; ?></li>
<li>Address</li>
</ul>
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<?php foreach($subject as $val) : ?>
<?php if ($user_id == $_SESSION['user_session'] && $val == $user_id) : ?>
<?php $id = $subject['img_id']; ?>
<form method="POST" action="<?php echo "delete.php?id=" . $subject['img_id']?>">
<!-- <button name="remove" type="button" class="btn btn-sm btn-outline-secondary">Remove</button> -->
<input type="hidden" name="del" value="1" />
<input type="submit" name="del" class="btn btn-sm btn-outline-secondary" value="Remove" />
</form>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- END -->

The footer of my website's homepage isn't coming

I have been trying to make a website. It is an online shopping website.
This is my code-
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Books And Beyond</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap styles open source -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" crossorigin="anonymus">
<!-- Customize styles -->
<link href="style.css" rel="stylesheet"/>
<!-- font awesome styles open source -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymus">
<!-- Favicons -->
<link rel="shortcut icon" href="/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style
type="text/css">
<!--
body {
background-image: url(assets/img/background.jpg);
}
-->
</style></head>
<body>
<!--
Upper Header Section
-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="topNav">
<div class="container">
<div class="alignR">
<?php if (isset($_SESSION['email'])) { echo $_SESSION['email']; } else { ?>
<ul class="nav pull-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="icon-lock"></span> Login <b class="caret"></b></a>
<div class="dropdown-menu">
<form class="form-horizontal loginFrm" action="checkuser.php" method="post">
<div class="control-group">
<input name="email" type="text" class="span2" id="email" placeholder="Email">
</div>
<div class="control-group">
<input name="password" type="password" class="span2" id="password" placeholder="Password">
</div>
<div class="control-group">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button name="login" type="submit" class="shopBtn btn-block">Sign in</button>
</div>
</form>
</div>
</li>
</ul>
<?php } ?>
<?php if (isset($_SESSION['email'])) { ?>
Logout
<?php } else { ?>
<span class="icon-edit"></span> Register
<?php }?>
</div>
</div>
</div>
</div>
<!--
Lower Header Section
-->
<div class="container">
<div id="gototop"> </div>
<header id="header">
<div class="row">
<div class="span4">
<h1>
<a class="logo" href="index.php"><span>Books And Beyond</span>
<img src="assets/img/logo1.jpg" alt="" width="218" height="94"> </a> </h1>
</div>
</div>
</header>
<!--
Navigation Bar Section
-->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="">About</li>
<li class="">Bargain Books</li>
<li class="">New Releases</li>
<li class="">Bestsellers</li>
<li class="">Contact Us</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<img src="assets/img/banner.jpg"/>
<hr class="soften"/>
</div>
</div>
<!--Body Section
-->
<div class="row">
<div id="sidebar" class="span3">
<div class="well well-small">
<h3> Category </h3>
<ul class="nav nav-list">
<li><span class="icon-chevron-right"></span>Fiction</li>
<li><span class="icon-chevron-right"></span>Non-Fiction</li>
<li><span class="icon-chevron-right"></span>Young Adult</li>
<li><span class="icon-chevron-right"></span>Children's</li>
<li><span class="icon-chevron-right"></span>Travel</li>
<li><span class="icon-chevron-right"></span>Education</li>
<li style="border:0"> </li>
</ul>
</div>
<!--<div class="well well-small alert alert-warning cntr">
<h2>50% Discount</h2>
<p>
only valid for online order. <br><br><a class="defaultBtn" href="#">Click here </a>
</p>
</div>-->
<!-- <div class="well well-small" ><img src="assets/img/paypal.jpg" alt="payment method paypal"></div>-->
<!--<a class="shopBtn btn-block" href="#">Upcoming products <br><small>Click to view</small></a>-->
<ul class="nav nav-list promowrapper">
<?php
/* require_once('dbconnect.php'); */
$result = mysql_query("SELECT * from product WHERE brand='accessories'");
while ($row = mysql_fetch_array($result))
{
$intproductid=$row["id"];
$price=$row["productprice"];
$productimage=$row["productimage"];
?>
<li>
<div class="thumbnail">
<img width="200" height="80" src="getImage.php?intproductid=<?php print $intproductid;?>" />
<div class="caption">
<table width="250" border="0">
<tr>
<td align="left" valign="middle"><form action="product_detail.php" method="post" name="form2" id="form2">
<label>
<input type="hidden" name="intproductid2" value="<?php echo $intproductid; ?>" />
<input name="Submit2" type="submit" class="shopBtn" value="View" />
</label>
</form></td>
<td align="right" valign="middle"><h4> <span class="pull-right"><?php echo $price; ?>.00</span></h4></td>
</tr>
</table>
</div>
</div>
</li>
<li style="border:0"> </li>
<?php } ?>
</ul>
</div>
<div class="span9">
<!--
New Products
-->
<div class="well well-small">
<h3>New Products </h3>
<hr class="soften"/>
<div class="row-fluid">
<div id="newProductcar" class="carousel slide">
<div class="">
<div class="item active">
<ul class="thumbnails">
<?php
require_once('dbconnect.php');
$result = mysql_query("SELECT * from product WHERE brand='bousni' LIMIT 1");
while ($row = mysql_fetch_array($result))
{
$intproductid=$row["id"];
//$productimage=$row["productimage"];
?>
<li class="span3">
<div class="thumbnail">
<img width="200" height="120" src="getImage.php?intproductid=<?php print $intproductid;?>" />
</div>
</li>
<?php } ?>
<?php
require_once('dbconnect.php');
$result = mysql_query("SELECT * from product WHERE brand='hela couture' LIMIT 1");
while ($row = mysql_fetch_array($result))
{
$intproductid=$row["id"];
//$productimage=$row["productimage"];
?>
<li class="span3">
<div class="thumbnail">
<img width="200" height="120" src="getImage.php?intproductid=<?php print $intproductid;?>" />
</div>
</li>
<?php } ?>
<?php
require_once('dbconnect.php');
$result = mysql_query("SELECT * from product WHERE brand='zey' LIMIT 1");
while ($row = mysql_fetch_array($result))
{
$intproductid=$row["id"];
//$productimage=$row["productimage"];
?>
<li class="span3">
<div class="thumbnail">
<img width="200" height="120" src="getImage.php?intproductid=<?php print $intproductid;?>" />
</div>
</li>
<?php } ?>
<?php
require_once('dbconnect.php');
$result = mysql_query("SELECT * from product WHERE brand='AL-JUMAIRA' LIMIT 1");
while ($row = mysql_fetch_array($result))
{
$intproductid=$row["id"];
//$productimage=$row["productimage"];
?>
<li class="span3">
<div class="thumbnail">
<img width="200" height="120" src="getImage.php?intproductid=<?php print $intproductid;?>" />
</div>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="well well-small">
<div class="span8">
<div class="row-fluid">
<h3>Features Products </h3>
<hr class="soften"/>
<ul class="thumbnails">
<?php
require_once('dbconnect.php');
$result = mysql_query("SELECT * from product WHERE brand='roza' LIMIT 3");
while ($row = mysql_fetch_array($result))
{
$intproductid=$row["id"];
$productname=$row["productname"];
$brand=$row["brand"];
$price=$row["productprice"];
$productimage=$row["productimage"];
?>
<li class="span4">
<div class="thumbnail">
<img width="250" height="120" src="getImage.php?intproductid=<?php print $intproductid;?>" />
<div class="caption cntr">
<p style="color:#990033"><?php echo $productname; ?></p>
<p><?php echo $brand; ?></p>
<p><strong>SAR <?php echo $price; ?>.00</strong></p>
<div class="btn-group">
<form id="form2" name="form2" method="post" action="product_detail.php">
<label>
<input type="hidden" name="intproductid2" value="<?php echo $intproductid; ?>" />
<input name="Submit2" type="submit" class="shopBtn" value="View" />
<input name="Submit2" type="submit" class="defaultBtn" value="Add to cart" />
</label>
</form>
</div>
<br class="clr">
</div>
</div>
</li>
<?php } ?>
</ul>
<hr class="soften"/>
<ul class="thumbnails">
<?php
require_once('dbconnect.php');
$result = mysql_query("SELECT * from product WHERE brand='haya' LIMIT 3");
while ($row = mysql_fetch_array($result))
{
$intproductid=$row["id"];
$productname=$row["productname"];
$brand=$row["brand"];
$price=$row["productprice"];
$productimage=$row["productimage"];
?>
<li class="span4">
<div class="thumbnail">
<img width="250" height="120" src="getImage.php?intproductid=<?php print $intproductid;?>" />
<div class="caption cntr">
<p style="color:#990033"><?php echo $productname; ?></p>
<p><?php echo $brand; ?></p>
<p><strong>SAR <?php echo $price; ?>.00</strong></p>
<div class="btn-group">
<form id="form2" name="form2" method="post" action="product_detail.php">
<label>
<input type="hidden" name="intproductid2" value="<?php echo $intproductid; ?>" />
<input name="Submit2" type="submit" class="shopBtn" value="View" />
<input name="Submit2" type="submit" class="defaultBtn" value="Add to cart" />
</label>
</form>
</div>
<br class="clr">
</div>
</div>
</li>
<?php } ?>
</ul>
</div>
</div>
<div class="row">
</div>
</div>
</div></div></div>
<!--
Footer
-->
<footer class="footer" style="float: bottom;">
<div class="row-fluid">
<div class="span3">
<h5>ORDER SUPPORT</h5>
Store pickup<br>
Return and Refund<br>
</div>
<div class="span3">
<h5>PRODUCT SUPPORT</h5>
FAQs<br>
Inquiry<br>
</div>
<div class="span3">
<h5>COOPORATIVE INFO</h5>
Terms and Condition <br>
Contact us<br>
</div>
<div class="span3">
<h5>GET CONNECTED</h5>
About us <br>
Create Account<br>
</div>
</div>
</footer>
</div><!-- /container -->
<div class="copyright">
<div class="container">
<p class="pull-right"> </p>
<span>Copyright 2019, Fatimatuz Johura - s201403034- Jeddah (Ladies Branch);<br> Books And Beyond</span>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.easing-1.3.min.js"></script>
<script src="assets/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="assets/js/shop.js"></script>
</body>
</html>
The 'New Products' and the footer section is not coming and I cant figure out why. I dont have a webhost yet so I am using localhost for now. I have tried editing the code but whatever I do, it does not seem to work. If anyone can help, I would really appreciate it. Thank you.

On line 152 (new products is on line ~ 185[ish])
/* require_once('dbconnect.php'); */
$result = mysql_query("SELECT * from product WHERE brand='accessories'");
As I said in the comments you use this require_once('dbconnect.php'); multiple times when it should be only once at the top of your file.
The above code is the first occurrence I could find, and as it's commented out, that query is going to bomb out on you. Execution happens top to bottom and the first uncommitted occurrence of that is line 196[ish], which is way to late for that first query.
Also as I said in the comments
Try turning on Error reporting - error_reporting(-1); and ini_set('display_errors', '1'); put those right after the <?php tag
You can save yourself, and us a lot of time that way.
So in Summery,
Remove all of these require_once('dbconnect.php'); and then add just one after the opening <?php tag.
PS you can easily test this, by just commenting that first query out, or by uncommenting that first require_once.

HTML, CSS, I dont know whats wrong with my code

I don't know what wrong with my code but it wont display the position i want.
Here's the output:
Output of my code
And here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Escapade Travel & Tours</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Duru+Sans|Actor' rel='stylesheet' type='text/css'>
<link href="css/bootshape.css" rel="stylesheet">
</head>
<body>
<!-- Navigation bar -->
<div class="navbar navbar-default 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="Home.html"><span class="green">Escapade</span> Travel & Tours</a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-right">
<ul class="navbar-nav nav">
<li class="active">Home
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">Destination <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Boracay
</li>
<li class="active">Palawan
</li>
<li>Cebu
</li>
<li class="divider"></li>
<li>All Destinations
</li>
</ul>
</li>
<li>Special Offers
</li>
<li>Book Now!
</li>
<li>Contact Us
</li>
</ul>
</nav>
</div>
</div>
<!-- End Navigation bar -->
<!-- Content -->
<div class="container">
<div style="clear: both; height:40px;"></div>
<div style="clear: both; height:15px;"></div>
<div style="clear: both; height:15px;"></div>
<div id="cont_razd">
<div id="right">
<h1>Meet Us</h1>
<div style="height:15px;"></div>
<div class="box_us">
<div class="box_us_r">
<img src="img/fish_us1.gif"> Quezon City, Philippines</div>
<div style="clear: both; height:15px;"></div>
<p>
<img src="img/fish_us2.gif"> Telephone: 02-1234567</p>
<div style="clear: both; height:15px;">
<p> Cellphone: 0912-345-6789</p>
<div style="clear: both; height:15px;"></div>
</div>
</div>
<div class="box_us">
<div class="box_us_l"></div>
<div class="box_us_r">
<div class="box_us_r">
<div style="clear: both; height:15px;"></div>
<img src="img/fish_us3.gif" alt="" /> Email Add: escapadetravelandtours#yahoo.com</div>
</div>
</div>
<div class="box_us">
</div>
<div style="height:25px;"></div>
<b> <i> Book us now and get very good rates! :) </b>
</i>
<br/>
</div>
<div id="left">
<h1>Contact Us</h1>
<div style="clear: both; height:15px;"></div>
<?php echo "<form action=" " method="post ">
<b> Name: </b> <br>
<input type=text size=40 name="ContactName ">
<br> <br> <b> E-mail Address: </b> <br>
<input type=text size=40 name="ContactEmail ">
<br> <br> <b> Subject: </b> <br>
<input type=text size=40 name="ContactSubject ">
<br> <br> <b> Message: </b> <br>
<textarea cols=40 rows=5 input type=text size=150 name="ContactMessage "> </textarea>
<br> <br>
<input type="Submit " name="Send " value="Send ">
<input type="Reset " name="Reset " value="Reset ">" ?>
<div style="clear: both"></div>
</div>
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<div class="footer text-center">
<p>© 2016. All Rights Reserved. Created by</p>
</div>
<!-- End Footer -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootshape.js"></script>
</body>
</html>
I want the meet us to be place in the right while the contact us is in the left but it wont place to where i indicate them.
I have put <div id="right"> in meets us and <div id="left"> in contact us.
I'm using notepad ++ here.
This is my expected output
Please help. Thanks!

Just add this css will make as per your expected result:
#left {
float: left;
}
#right {
float: right;
}
Working Fiddle

You can try below code:
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-sm-6">
left
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
right
</div>
</div>

use bootstrap girds see example of bootstrap girds see here also

you could use
<div class="row">
<div class="col-lg-9">
Your Left content
</div>
<div class="col-lg-3">
Your right content
</div>
</div>
the easiest way, while you use Bootstrap..

You have included bootstrap anyway in your code.. So you can use the bootstrap class.
<div class="row>
<div class="col-lg-6 col-xs-12">
<!-- Put your contact Us div here -->
</div>
<div class="col-lg-6 col-xs-12">
<!-- Put your meet Us div here -->
</div>
</div>

div id = "right"
does not place your div to the right, it just gives it an id.
Enclose both the divs in a
div class = "row"
and then the child divs using column span.
Learn about the bootstrap grid system here:-
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Put the "Contact Us" div before the "Meet Us" div. Then Apply float:left; to both the element. Try to avoid float:right; as much as possible.
Otherwise you can use use display:inline-block to both the divs. Will work just like float and on top of that you can even align them vertically.

Codeigniter PDF is not working

In The below codeigniter code i want to create a pdf file but it displays the webpage.And i down load the tutorial From this site http://blog.luutaa.com/php/generating-a-pdf-using-codeigniter/ and i create helper and i create mpdf folder and put all the extracted files in to it and place the contoller code for pdf.But the issue is not solved .
Controller:
<?php
class Help extends ci_controller
{
function index()
{
$this->load->view('help_view');
}
//to create the data and insetin to the coursesubject table
public function pdf_report(){
$this->load->helper(array('My_Pdf')); // Load helper
$data = file_get_contents(site_url('http://localhost/seatingreport4/index.php/help')); // Pass the url of html report
create_pdf($data); //Create pdf
}
}
?>
View:
<!DOCTYPE html>
<html>
<head>
<?php include_once('header2.php'); ?>
<div id="showhide">
<?php include_once('menu.php'); ?>
</div>
<a id="toggle" onClick="showorhide('showhide')"><img src="<?php echo base_url('img/m.jpg'); ?>" HEIGHT="40" WIDTH="40" BORDER="0" alt="logo"style="margin-bottom:7px; margin-top:7px;" /></a></a>
<br>
<div class="gray_bg">
<div class="container">
<div class="row welcome_inner">
<div class="span13">
<h1 class="p"><span class="k">///</span> Help</h1>
</div>
</div>
</div>
</div>
<style>
.k{
color:#339900;
font-size: xx-large;
}
.p{
font-size: xx-large;
font-weight:900;
}
</style>
<script src="//cdn2.editmysite.com/js/vendor/modernizr.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700" />
<link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public.css?buildTime=1383786711" />
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public-ie8.css?buildTime=1383786711" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public-ie7.css?buildTime=1383786711" /><![endif]-->
<script> var loginData = {"use_ssl":true,"redirect":false}; var errorMsgs = {"wrongUserPass":"Wrong username or password","loginToAccess":"Please log-in to access that page","loginAgain":"Please log-in again to continue.","accountDeleted":"Your account was previously deleted","accountExists":"You already have an account. Please log-in.","loginInstead":"You already have an account. Please log-in."}; var DISABLE_SIGNUP_CAPTCHA = true; var facebook = {"app_id":"190291501407","domain":"www.weebly.com","user":false}; </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn1.editmysite.com/libraries/prototype/1.7-custom/prototype.min.js?2"></script>
<script type="text/javascript" src="http://cdn2.editmysite.com/js/public/main.js?buildTime=1383786711"></script>
</head>
<body class="w-ui homepage">
<form id="weebly-signup">
<div class="caret"></div>
<div id="signup-inputs">
<div
id="weebly-email"
class="large block"
placeholder="Email"
/>
<div
id="weebly-new-password"
class="large block"
placeholder="Password"
/>
</div>
<div class="submit-btns">
</div>
<input type="hidden" name="response" id="weebly-login-signup-response" />
<input type="hidden" name="weebly-campaign" id="weebly-campaign" value="" />
</form>
</div> <!-- #sidebar-inner -->
</div> <!-- #sidebar -->
<div id="login-box" class="form-popover-box titled-box">
<form id="weebly-login" method="post" action="https://www.weebly.com/weebly/login.php">
<div class="caret"></div>
<input
type="text"
id="weebly-username"
class="large block"
name="user"
placeholder="Email or Username"
value=""
/><br>
<input
type="password"
id="weebly-password"
class="large block"
name="pass"
placeholder="Password"
/><br>
<p class="remember-me">
<label>
<input
type="checkbox"
id="weebly-remember"
name="rememberme"
checked
/>
</label>
</p>
</form>
</div>
<div id="how-it-works" class="section">
<div class="hgroup">
<h2> Tips to work on Seating Application</h2>
</div>
<div class="article">
<ol id="how-it-works-list">
<li class="tips top">
<div class="content"><span class="icon"></span></div>
</li>
<li>
<h4> Master</h4>
<div class="content">
<span class="talkbubble"><span class="icon grow"></span></span>
<span class="circle mask"><span class="icon grow" ></span></span>
<ul class="bubble">
<li> Exam name,month and year is created in exam master </li>
<li> Course code and name is created in course master</li>
<li> Subject code and name is created in subject master</li>
<li> Room details such room name,no of benches,maximum bench capacity,available status and invigilator is created in room master</li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br><br><br>
</li>
<li>
<h4> Details</h4>
<div class="content">
<span class="talkbubble"><span class="icon create"></span></span>
<span class="circle mask"><span class="icon create"></span></span>
<ul class="bubble">
<li> Course code and Subject code is created in course subject</li>
<li> Exam name and course code is created in exam course</li>
<li> Register no,name, course code and Subject code for a particular exam is created </li>
<li> Update the course code ,subject code,date and session for particular exam </li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br>
</li>
<li>
<h4> Seating Plan </h4>
<div class="content">
<span class="talkbubble"><span class="icon publish"></span></span>
<span class="circle mask"><span class="icon publish"></span></span>
<ul class="bubble">
<li> Exam name is selected </li>
<li> Date and session is selected </li>
<li> Course code,Subject code and number of student id displayed </li>
<li> Clicking on System generated it displays seat no ,register no and subject code</li>
</ul>
</div>
<br><br><br><br> <br><br><br>
</li>
<li>
<h4> Seating Report </h4>
<div class="content">
<span class="talkbubble"><span class="icon grow"></span></span>
<span class="circle mask"><span class="icon grow"></span></span>
<ul class="bubble">
<li> Exam name is selected </li>
<li> Date and session is selected </li>
<li> Course code,Subject code and number of student id displayed </li>
<li> Selecting on the Subject code it display Room no,seat no,register no and invigilator as report </li>
<li> Clicking on seating summary it displays exam name ,date,session,room no,subject code,register no ,no of students and invigilator</li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br>
</li>
<li>
<h4> Upload</h4>
<div class="content">
<span class="talkbubble"><span class="icon grow"></span></span>
<span class="circle mask"><span class="icon grow"></span></span>
<ul class="bubble">
<li> Exam name is selected </li>
<li> Course code for relevant exam is selected </li>
<li> Subject code for corresponding course code is selected </li>
<li> Choose the csv file which has register no and students name and upload it </li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br>
</li>
<li class="tips bottom">
<div class="content"><span class="icon"></span></div>
</li>
</ol>
</div>
</div>
<script>
function showorhide(id){
if(document.getElementById(id)){ //check the element exists and can be accessed
var ele = document.getElementById(id); //get hold of the element
if(ele.style.display=="none"){ //see if display property is set to none
ele.style.display="block";
}else{
ele.style.display="none";
}
}
}
</script>
<script>
$('#showhide').hide();
</script>
<style>
.talkbubble {
width: 120px;
height: 80px;
background:#339900;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.talkbubble:before {
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
span.picture1 {
width:100px; /*width of your image*/
height:100px; /*height of your image*/
background-image:url('C:\wamp\www\seatingreport1\img\refresh.jpg');
margin:0; /* If you want no margin */
padding:0; /*if your want to padding */
}
</style>

I do believe that site_url doesn't work this way. The function will guess your domain and prepend it to the argument you give. You should try :
site_url("seatingreport4/index.php/help");
It will generate the following
http://localhost/seatingreport4/index.php/help
Or just write without the site_url function
file_get_contents("http://localhost/seatingreport4/index.php/help");

You can use mPDF for generating PDF in Codeigniter.
You can create a controller class and then create function in it. And then do something as bellow code -
public function mypdf() {
$this->load->library('pdf');
$pdf = $this->pdf->load();
$html=$this->load->view('welcome_message',null,true);
$pdf->WriteHTML($html);
// write the HTML into the PDF
$output = 'itemreport' . date('Y_m_d_H_i_s') . '_.pdf';
$pdf->Output("$output", 'I');
}
For more detail you can see the tutorial on mPDF codeigniter here.

Categories