The problem is following
I create a PHP (CodeIgniter) project and want to construct Home Page
view/pages/home.php and over here I have this code:
Home.php
<!DOCTYPE html>
<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="">
<title>Car Sharing</title>
<!-- Bootstrap Core CSS -->
<link href="assets/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional fonts for this theme -->
<link href="assets/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="assets/lib/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="assets/css/creative.min.css" rel="stylesheet">
</head>
<body id="page-top">
<header>
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Putujmo Zajedno</h1>
<hr>
<p>Tražiš prevoz?</p>
<p>ili samo putuješ negdje?</p>
Postavi Oglas
</div>
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center">
<h2 class="section-heading text-white">We've got what you need!</h2>
<hr class="light">
<p class="text-faded">Putujmo zajedno - web stranica je naredni korak razvijanja ideje o djeljenju prevoza (carpooling) u Bosni i Hercegovini ali i šire, započeta putem društvene mreže Facebook od strane nekoliko aktivista i volontera.
Za nešto više od godinu dana, grupa na Facebook mreži je prešla 12 000 članova, sa nekoliko stotina oglasa mjesečno. Ovaj broj u razvoju saobraćajnih sistema predstavlja broj korisnika koji svojim prisustvom imaju potrebu za novim načinom prevoza, te organizovanja i komuniciranja unutar istog. To je bio još jedan razlog za pokretanje ove web stranice koja ima za cilj da olakša postavljanje oglasa za nuđenje i traženje prevoza, kao i pregled već postavljenih oglasa.
Uzevši u obzir da su ovo pionirski koraci na našim prostorima, otvoreni smo za sve prijedloge, kritike i svakako pohvale. Cijeli projekat dijeljenja prevoza je zasnovan na volonterskom radu i resursima pojedinaca, tako da je svaka vrsta podrške više nego dobrodošla.
Pored ove web stranice, grupa "Tražim- nudim prevoz" na Facebooku ostaje i dalje aktivna i operativna.</p>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">ZAŠTO PODIJELITI VOŽNJU?</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
<h3>Jeftinije je</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
<h3>Brinemo o životnoj sredini</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
<h3>Brze je</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart text-primary sr-icons"></i>
<h3>Društvenije je</h3>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-sm-6">
<a href="assets/images/HomePage/portfolio/fullsize/Beograd.jpg" class="portfolio-box">
<img src="assets/images/HomePage/portfolio/fullsize/Beograd.jpg" class="img-fluid" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Beograd
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="assets/images/HomePage/portfolio/fullsize/Novi Sad.jpg" class="portfolio-box">
<img src="assets/images/HomePage/portfolio/fullsize/Novi Sad.jpg" class="img-fluid" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Novi Sad
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="assets/images/HomePage/portfolio/fullsize/Sarajevoo.jpg" class="portfolio-box">
<img src="assets/images/HomePage/portfolio/fullsize/Sarajevoo.jpg" class="img-fluid" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Sarajevo
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="assets/images/HomePage/portfolio/fullsize/Zagreb.jpg" class="portfolio-box">
<img src="assets/images/HomePage/portfolio/fullsize/Zagreb.jpg" class="img-fluid" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Zagreb
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="assets/images/HomePage/portfolio/fullsize/Ljubljana.jpg" class="portfolio-box">
<img src="assets/images/HomePage/portfolio/fullsize/Ljubljana.jpg" class="img-fluid" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Ljubljana
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="assets/images/HomePage/portfolio/fullsize/Wien.jpg" class="portfolio-box">
<img src="assets/images/HomePage/portfolio/fullsize/Wien.jpg" class="img-fluid" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Wien
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<aside class="bg-dark">
<div class="container text-center">
<div class="call-to-action">
</div>
</div>
</aside>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p>Ready to start your next trip with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 offset-lg-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p>062/266-198</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p>demirmahmutovic#gmail.com</p>
</div>
</div>
</div>
</section>
<script src="assets/lib/jquery/jquery.js"></script>
<script src="assets/lib/tether/tether.min.js"></script>
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="assets/lib/scrollreveal/scrollreveal.min.js"></script>
<script src="assets/lib/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/js/creative.min.js"></script>
</body>
</html>
And also I have header/footer which is contructed, the code is belowe for header
Header.php
<html>
<head>
<title>Car Sharing</title>
<link rel="stylesheet" href="https://bootswatch.com/darkly/bootstrap.min.css"/>
<link rel="stylesheet" href="<?php echo base_url()?>assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo base_url()?>pages/home">Car Sharing</a>
</div>
<ul class="nav navbar-nav">
<?php if($this->session->userdata('logged_in')):?>
<li>Postavi Oglas</li>
<li>Postavi Kategoriju</li>
<li>Kategorije</li>
<li>Sve voznje</li>
<li>O nama</li>
<li>Contact</li>
<li>Log out</li>
<?php endif;?>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php if(!$this->session->userdata('logged_in')):?>
<li><span class="glyphicon glyphicon-user"></span> Registruj Se</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<?php endif ;?>
</ul>
</div>
</nav>
<div class="container">
<?php if($this->session->flashdata('user_registred')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_registred').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('post_created')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('post_created').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('post_updated')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('post_updated').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('category_creted')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('category_created').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('post_deleted')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('post_deleted').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('login_failed')):?>
<?php echo '<p class="alert alert-danger">'.$this->session->flashdata('login_failed').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('user_loggedin')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_loggedin').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('user_loggedout')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_loggedout').'</p>'?>
<?php endif;?>
<?php if($this->session->flashdata('category_deleted')):?>
<?php echo '<p class="alert alert-success">'.$this->session->flashdata('category_deleted').'</p>'?>
<?php endif;?>
And output of these two look like this:
When I delete my header/footer.php file my other web-site tabs are without css.
What I need to do to make Home Page normal
try to wrap your ul with navbar-collapse collapse
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo base_url()?>pages/home">Car Sharing</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- -->
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- -->
</ul>
</div>
</div>
</nav>
also make sure your li have following properties applied
.navbar-nav > li {
float: left;
}
Related
I have used $row variable that contains database information and I want to repeat the div element with class
"col-md-3 col-sm-6" to repeat it self until the end of array.
I just want that every products details like product's image, name and price
should be display in one line and after 4 products it should display on the next line
<?php
$con = mysqli_connect("localhost","root","","grocerystore");
$sql = "SELECT * FROM main_products";
$result = mysqli_query($con,$sql);
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Instamart Grocery Store</title>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
Instamart Grocery
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar"></button>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- <li><span class="glyphicon glyphicon-log-in"></span> setting</li>
<li><span class="glyphicon glyphicon-log-in"></span> logout</li> -->
<li>
<div class="dropdown">
<button class="dropbtn"><span class="glyphicon glyphicon-user"></button>
<div class="dropdown-content">
<center>
<h4>
<?php echo $_SESSION['user_name'];?>
</h4>
</center>
Your Orders
Log-out
Change password
Your cart
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Let's be Healty together</h1>
<p>We have best choises of all products</p>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<a href="dairy.php">
<h3><button class="btn btn-primary btn-block">Dairy Products</button></h3>
</a>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3 class="temp"><button class="btn btn-primary btn-block">Fresh Vegetable</button></h3>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3><button class="btn btn-primary btn-block">Fresh Fruits</button></h3>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3><button class="btn btn-primary btn-block">Daily Needs</button></h3>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="container">
<div class="row row1">
<?php while($row = mysqli_fetch_array($result))
{
$image = $row['img_dir'];
?>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<?php echo"<img src='{$image}'>";?>
<div>
<h3>
<?php echo $row['product_name'];?>
</h3>
<p>Price:
<?php echo $row['price'];?>
</p>
<a href="cart.php">
<button" class="btn btn-primary btn-block">Add to cart</button>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
the images are displaying like this
I'm trying to get the carousel that's within a modal to open up on the image that has been selected by the user. I've tried data-slide-to="##" but no look with that. I'll post the code below. I'll remove repeated code.
<!DOCTYPE html>
<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="">
<title>Name LTD - Gallery</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Gallery
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="bg-primary py-5 mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<h1 class="display-4 text-white mt-5 mb-2">Gallery</h1>
<p class="lead mb-5 text-white-50">Below Is A Portfolio Of Just A Few Of The Jobs We Have Done So Far </p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Click An Image To Enter Slideshow</h1>
<hr class="mt-2 mb-5">
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="0">
<img class="img-fluid img-thumbnail" src="img/img14.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="1">
<img class="img-fluid img-thumbnail" src="img/img15.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="2">
<img class="img-fluid img-thumbnail" src="img/img9.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="3">
<img class="img-fluid img-thumbnail" src="img/img10.png" alt="">
</a>
</div>
</div>
</div>
<div class="container text-center">
<div class="modal fade imgGal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/img14.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img15.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img9.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img10.png" alt="..." style="width: 100%">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Name 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
So currently when the user selects image 1, image 1 is shown on the carousel but then if image 2 is selected image 1 still shows first etc. So what I want is for the user to be able to select say image 3, and image 3 be selected on the carousel so they don't have to scroll through the carousel to get to it.
You should point your images to the slider also by doing data-target="#carousel-example-generic" where as you are pointing the tag to only modal so that is the reason it is not updating the slider,
So may be the following code helps you
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img14.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="0">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img15.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="1">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img9.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="2">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img10.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="3">
</a>
</div>
</div>
Hello guys I'm working on a wordpress theme/template and I'm having problems when clicking on blog post title in index.html. It will redirect me to correct link on address bar however, single.php is not displaying anything. I'm not sure if the page is getting called or what's actually going on. If you can weight your 2cents thanks here's the link to wordpress blog: http://pctechtips.org/testblog
index.php
<?php get_header(); ?>
<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"><?php bloginfo('name'); ?></h1>
<p class="lead"><?php bloginfo('description'); ?></p>
</div>
</div>
<!-- /jumbotron -->
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Blog Post -->
<div class="mb-4">
<div class="card-body">
<a href="<?php the_permalink(); ?>">
<h2 class="card-title"><?php the_title(); ?></h2>
</a>
<p class="blog-post-meta">
<?php echo Date('M d, Y'); ?> by <?php the_author(); ?>
</p>
<!-- feature image -->
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found!'); ?></p>
<?php endif; ?>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>
single.php
<?php get_header(); ?>
<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"><?php bloginfo('name'); ?></h1>
<p class="lead"><?php bloginfo('description'); ?></p>
</div>
</div>
<!-- /jumbotron -->
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="blog-post col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Blog Post -->
<div class="blog-post-title mb-4">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="blog-post-meta">
<?php echo Date('M d, Y'); ?> by <?php the_author(); ?>
</p>
<!-- feature image -->
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<p class="card-text"><?php the_content(); ?></p>
<hr>
<!-- comments -->
<?php comments_templates(); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found!'); ?></p>
<?php endif; ?>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>
i have managed to create a form whereby the user logs in using sessions and once the user is logged in ,he/she is able to post data into a different table named members.My problem is that I'm unable to retrieve the data added by the logged in user from the members table.I'm a newbie and i hope someone here will help me figure out this.below is my code
<!DOCTYPE html>
<?php
session_start();
if(!isset($_SESSION['phone'])){
header("location: login2.php");
}
else {
include ("../includes/db.php");
$sql = "select * FROM post";
$run = mysql_query($sql);
$total_post=mysql_num_rows($run);
$sql = "select * FROM gallary";
$run = mysql_query($sql);
$total_image=mysql_num_rows($run);
$sql = "select * FROM user";
$run = mysql_query($sql);
$total_user=mysql_num_rows($run);
$sql = "select * FROM course";
$run = mysql_query($sql);
$total_course=mysql_num_rows($run);
$sql = "select * FROM mails";
$run = mysql_query($sql);
$total_mails=mysql_num_rows($run);
?>
<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">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="../dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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="index.php">Dashboard</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<!--
<li>
<i class="fa fa-edit fa-fw"></i> Create New Post
</li>
<li>
<i class="fa fa-table fa-fw"></i> View All Post
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Create New Story
</li>
<li>
<i class="fa fa-table fa-fw"></i> View All Story
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Upload Image
</li>
<li>
<i class="fa fa-photo fa-fw"></i> View All Image</span>
</li>
<li>
<i class="fa fa-photo fa-fw"></i> View All emails</span>
</li>
<li>
<i class="fa fa-edit fa-fw"></i> View All Joining members</span>
</li>
-->
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-list-ul fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $total_post; ?></div>
<div>All Posts!</div>
</div>
</div>
</div>
<a href="index.php?view_post=view_post">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-photo fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $total_image; ?></div>
<div>All Images!</div>
</div>
</div>
</div>
<a href="images.php">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-users fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $total_user; ?></div>
<div>All Users!</div>
</div>
</div>
</div>
<a href="users.php">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-database fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $total_course; ?></div>
<div>All Story!</div>
</div>
</div>
</div>
<a href="course.php">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-database fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $total_mails; ?></div>
<div>All mails!</div>
</div>
</div>
</div>
<a href="mails.php">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!--Post Section Open-->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-heading">
<h2>All users</h2>
</div>
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>S.No.</th>
<th>Id</th>
<th>First_name</th>
<th>Last NAme</th>
<th>Email</th>
<th>phone</th>
<th>created</th>
<th>modified</th>
<th>status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<?php
include("../includes/db.php");
$i=1;
$query="SELECT members.user_id,members.name,members.phone,members.location, user.username,user.phone
FROM members
LEFT JOIN user
ON members.user_id=user.phone
ORDER BY members.user_id;"
?>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Post Section Close-->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
You must join table with valid condition. I don't know your table structure for user table, as a guess i think this will help you.
$query="SELECT members.user_id,members.name,members.phone,members.location,
user.username,user.phone, user.id
FROM members
LEFT JOIN user
ON members.user_id=user.id
ORDER BY members.user_id;"
My code works just fine if it is in html file, the header and footer codes are in the products page. The problem is if I make it in php file, the side navbar won't work, I already tried moving the body tag in the products page but it still doesn't work. Appreciate any help :)
header-ee.php
<html>
<head>
<?php
include('parameters.php');
?>
<title> <?php echo $page_title; ?> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?= $server_addr ?>/common/css/bootstrap.css">
<script src="<?= $server_addr ?>/common/js/jquery-3.2.1.js"></script>
<script src="<?= $server_addr ?>/common/js/bootstrap.js"></script>
<script src="js/ee-home.js"></script>
<link rel="stylesheet" href="css/ee-home.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<!--Start header-->
<nav class="navbar navbar-default navigation-bar">
<div class="container-fluid">
<div class="row">
<div class="navbar-header col-xs-12 col-sm-12 col-md-12 col-lg-6 centered-a">
<div class="row">
<div class="col-sm-3 centered-a">
<img src="img/ee-logo.png">
</div>
<div class="col-sm-9">
<h1 id="nav-brand">
EQUIPMENT ENGINEERS, INC.</br>
</h1>
<h1 id="nav-brand-subtitle">
<small>
Your Reliable Solutions Partner
</small>
</h1>
</div>
</div>
<a href="#">
<span class="link-spanner"></span>
</a>
</div>
<div class="navbar-header col-lg-6 visible-lg centered-a">
<div class="row centered-a" id="nav-box">
<div class="col-lg-2 centered-a">
<a href="#">
<p>Home</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Our Company</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>SCM</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Products</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a">
<a href="#">
<p>Inquiries</p>
<span class="link-spanner"></span>
<a>
</div>
<div class="col-lg-2 centered-a" id="last-item">
<a href="#">
<p">Supplier Accreditation</p>
<span class="link-spanner"></span>
<a>
</div>
</div>
</div>
</div>
<div class="panel-group col-md-12 centered-a hidden-lg">
<div class="panel panel-default">
<div class="panel-heading" >
<h2 class="panel-title centered-a">
<span class="glyphicon glyphicon-triangle-bottom"></span>
<a data-toggle="collapse" href="#collapse1">
<span class="link-spanner"></span>
<a>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
Home
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Our Company
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
SCM
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Products
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Inquiries
<span class="link-spanner"></span>
</li>
<li class="list-group-item">
Supplier Accreditation
<span class="link-spanner"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!--End header-->
products.php
<?php include("includes/header-ee.php"); ?>
<link rel="stylesheet" href="products.css"></link>
<div class="container-fluid">
<div class="row">
<!--Sidebar-->
<nav class="col-md-3" id="myScrollspy">
<span>Product Lineup</span>
<ul class="nav nav-pills nav-stacked">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<!--Content-->
<div class="col-md-9">
<div id="section1">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
<div id="section2">
<div class="bg-franklin bg-img centered-a">
<div class="caption" style="border:10px; border-color:white;">
<img src="img/products/franklin.png" style="width:50%; background-color:white;"></img>
</div>
</div>
<p style="margin-left:10px; margin-right:10px; font-size: 1.2em; text-align:left;padding: 0% 3%;">
</br>
</br></br>
</br></br>
</p>
</div>
</div>
</div>
</div>
<?php include("includes/footer-ee.php"); ?>
footer-ee.php
</body>
<footer>
<div class="footer-blk row">
<div style="float: none;text-align: center;">
Home | Terms and Conditions | Privacy Policy
</div>
<div style="float: none;text-align: center;">
</div>
</div>
</footer>