Trying to accomplish a simple login form that redirects the user to index.php where only members are allowed. It worked fine when I were using mysql but when I switched my codes to mysqli it seems that I just can't get the function to work.
What happens when I click login: The input fields resets.
What have I done to solve this:
I have sent my codes to a friend and when he tried the login function it worked fine for him.
He can't find any errors in the code as well.
I have set "report all errors", I have recreated my database, created new users with full privileges, went through my codes a couple of time without having the success to tell what's wrong. Hopefully someone more trained than me can give me a good reason why my code does not work.
Database structure:
phpMyAdmin
Server version: 5.6.20
DB Name: websecurity
Tables: 2
login: username, password, email, fname, lname
guestbook: username, comment
Code for the login function, login.php:
<?php
session_start();
error_reporting(E_ALL); ini_set('display_errors', '1');
?>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<p>Register | Login</p>
<h4>Login</h4>
<?php
if(isset($_POST["submit"])){
//Connect
$mysqli = new mysqli("localhost", "member", "samsung", "websecurity");
if($mysqli->connect_errno) {
die("Connect failed: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error);
}
//Submitt pushed
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$username= strip_tags($_POST['user']);
$password= strip_tags($_POST['pass']);
$username = $mysqli->real_escape_string($username);
$password = $mysqli->real_escape_string($password);
// Prepare
$sql = "SELECT username,password FROM login WHERE username = ? AND password = ?";
$stmt = $mysqli->prepare($sql);
if(!$stmt) {
die("Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error);
}
//BIND
$bind_result = $stmt->bind_param("ss", $username, $password);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows === 1){
header("location: index.php");
}
else {
echo "Wrong name or password. I won't tell you!!";
}
$stmt->free_result();
$stmt->close();
}
}
?>
<form action="" method="POST" class="form-container">
<div class="form-title"><h2>Log In</h2></div>
<div class="form-title">Username</div>
<input class="form-field" type="text" name="user" /><br />
<div class="form-title">Password</div>
<input class="form-field" type="password" name="pass" /><br />
<div class="submit-container">
<input class="submit-button" type="submit" value="Login" name="submit" />
</div>
</form>
<p>Welcome to this top secret, splendid, intelligent and very fabulous website.
If you would like to use our services we kindly ask you to register as a member first.</p>
</div>
</body>
</html>
I don't know if it will be to any help but here's the code for the redirection destination, index.php:
<?php
session_start();
if(!isset($_SESSION["sess_user"])){
header("location:login.php");
} else {
?>
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Secret Society</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,500,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/templatemo_main.css">
</head>
<body>
<div id="main-wrapper">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center templatemo-logo margin-top-20">
<h2>Welcome, <?=$_SESSION['sess_user'];?>!</h2> <h4>Glad that you made it in to our secret society. Feel free to check out our
products and stay around for as long as you wish.</h4>
</div>
<div class="image-section">
<div class="image-container">
<img src="images/zoom-bg-1.jpg" id="menu-img" class="main-img inactive" alt="">
<img src="images/zoom-bg-2.jpg" id="products-img" class="inactive" alt="Product">
<img src="images/zoom-bg-3.jpg" id="services-img" class="inactive" alt="Services">
<img src="images/zoom-bg-4.jpg" id="about-img" class="inactive" alt="About">
<img src="images/zoom-bg-5.jpg" id="contact-img" class="inactive" alt="Contact">
</div>
</div>
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2 templatemo-content-wrapper">
<div class="templatemo-content">
<section id="menu-section" class="active">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a href="#products" class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-cubes"></i>
<h2>Products</h2>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a href="#services" class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-laptop"></i>
<h2>Messages</h2>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a href="#about" class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-users"></i>
<h2>About</h2>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-envelope"></i>
<h2>Logout, don't leave us!</h2>
</div>
</a>
</div>
</div>
</section><!-- /.menu-section -->
<section id="products-section" class="inactive">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 margin-bottom-20">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2>Something</h2>
<p>Some texts here, and some texts over there!</p>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2>Over there!</h2>
<p> What was that?! I don't know.......</p>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.product-section -->
<section id="services-section" class="inactive">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-12 col-md-12 col-lg-12 black-bg">
<h2>Leave a message darling!</h2>
<!--Leave a message-->
<form action='guest_process.php' method='post'>
Name: <input style="color:black;" type="text" name='username' value="<?=$_SESSION['sess_user'];?>" readonly>
<p>Message: </p>
<p><textarea style="color:black;" name='comment'></textarea></p>
<hr>
<p><input style="color:black;" type='submit' name='submit' value='Post'></p>
</form>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.services-section -->
<section id="about-section" class="inactive">
<div class="row">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2 class="text-center">About Us</h2>
<div class="col-sm-6 col-md-6">
<p>Don't speak about us. Don't think about us. Don't write about us. It's a secret!</p>
</div>
<div class="col-sm-6 col-md-6">
<p></p>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.about-section -->
<section id="contact-section" class="inactive">
<div class="row">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2 class="text-center">Contact Us</h2>
<div class="col-sm-12 col-md-12">
<p>Donec at felis nec orci dapibus consectetur. Integer hendrerit aliquet velit, bibendum accumsan mi. Integer volutpat in velit at tincidunt. Proin varius magna nec risus accumsan blandit. Morbi eget vestibulum nisi, vitae luctus elit. In in nulla a elit rutrum pellentesque.</p>
</div>
<div class="col-sm-6 col-md-6">
<div id="map-canvas"></div>
<p>456 Thamine Street, Digital Estate, Yangon 10630, Myanmar</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div><!-- /#main-wrapper -->
<div id="preloader">
<div id="status"> </div>
</div><!-- /#preloader -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/templatemo_script.js"></script>
</body>
</html>
<?php
}
?>
With the binding try
$stmt->bindParam(1, $username);
$stmt->bindParam(2, $password);
$stmt -> execute();
$stmt->store_result();
instead of
$bind_result = $stmt->bind_param("ss", $username, $password);
$stmt->execute();
$stmt->store_result();
Related
I'm trying to align a div like a gallery through a loop,
is there a way to do this efficiently with bootstrap? they just stay one above another. I tried to make more divs, but they repeat the results of first too. I'm using Laravel 9.0 and Bootstrap 5.0
#extends('master')
<body class="bg-light"></body>
<div class="container-fluid">
<div class="px-lg-5">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="row">
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right">Show me more</div>
</div>
</div>
</body>
seeing the code shows you are creating more rows with the foreach. try this code that i provided whether it will solve your issues
<div class="container-fluid"><div class="px-lg-5">
<div class="row">
<?php if (!empty($sql)) {
foreach ($sql as $value) { ?>
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity; ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price; ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr(
$value->category,
0,
7
); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php
} ?>
</div>
<div class="py-5 text-right">Show me more</div>
<div class="row"> shouldn't be in the foreach loop. Each item has a single row if you use it in the foreach loop.
Find:
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="row">
...
</div>
<?php
}
}
?>
Replace with:
<div class="row">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
...
<?php
}
}
?>
</div>
In bootstap, row is a master container. col means grids inside the container.
egg:
<div class="row">
<div class="col-md-3">
item 1
</div>
<div class="col-md-3">
item 2
</div>
<div class="col-md-3">
item 3
</div>
<div class="col-md-3">
item 4
</div>
</div>
Please check here
link
Your mistake is to loop the main container.
#extends('master')
<body class="bg-light"></body>
<div class="container-fluid">
<div class="px-lg-5">
<div class="row">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right">Show me more</div>
</div>
</div>
</body>
You had closed your body tag at 2nd line.
Try this:
#extends('master')
<body class="bg-light">
<div class="container-fluid">
<div class="px-lg-5">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="d-flex">
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right">Show me more</div>
</div>
</div>
</body>
Home.php(file in controller)
<?php
class Home extends CI_Controller {
public function index() {
$this->load->helper('url');
//display home page
$this->load->view('home.html');
}
}
?>
home.html(file in view page)
<!DOCTYPE html>
<html lang="en">
<head>
<title>PortFolio Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
body, html {
height: 100%;
margin: 0;
}
/* First Container */
.bg {
/* The image used */
background-image: url("1.jpg");
/* Full height */
height: 60%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media (max-width: 800px) {
.bg {
height:80%;
}
}
/* Second container */
.bg1 {
background-color: #f77a55;
height:45%;
}
#media (max-width: 800px) {
.bg1 {
height:70%;
}
}
/* Third container */
.bg2 {
height:40%;
}
#media (max-width: 800px) {
.bg2 {
height:100%;
}
}
/* Fourth container */
.bg3 {
background-color: #404040;
height:60%;
}
#media (max-width: 800px) {
.bg3 {
height:190%;
}
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #404040;
padding: 25px;
}
</style>
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Full-stack Developer</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!--li class="active">Home</li-->
<li>About Me</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!--First Container-->
<div class="bg">
<div class="container text-center">
<br><br><br><br><br><br>
<h1 style="color:White"><strong>Ready For? Engaging Website||</strong></h1>
<h2 style="color:White">Inventive Web design, Development & Android Application!</h2>
</div>
</div>
<!--Second Container-->
<div id="AboutMe" class="bg1">
<div class="container text-center">
<br><br><br>
<h1 style="color:White"><strong>About Me</strong></h1>
<br>
<p style="color:White; font-size: 15px"><b>I'm a Full stack developer providing complete Web solutions to the clients. I have a deep technical knowledge combined with the broad digital media work, website designing and development experience means I can provide you with honest suggestions on what can be delivered with your available resource. My aim is to out perform expectations at every possible chance.</b></p>
</div>
</div>
<!--Third Container-->
<div id="Services" class="bg2">
<div class="container text-center">
<br><br><br>
<h1 style="color:#f77a55"><strong>Services</strong></h1>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-desktop text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Responsive Web App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-tablet text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Mobile App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-television text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">UI/UX Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-cloud text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Hosting & Support service</h4>
</div>
</div>
</div>
</div><br><br><br>
<!--Fourth Container-->
<div id="Portfolio" class="bg3">
<div class="container text-center">
<br><br>
<h1 style="color:#f77a55"><strong>Portfolio</strong></h1>
</div><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Blue Star Power</h4>
<p style="color:white">Blue Star Power Solutions Private Limited are specialists in Diesel Generator Sales and Service, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="6.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Cavotec Inspired Engineering</h4>
<p style="color:white">Global-Airport Solutions is the global industry’s number one meeting place for Airport Operators/Owners,Managers.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="10.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Gemalto Security Free</h4>
<p style="color:white">You will find our identity authentication and data protection technologies at the heart of modern life, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="11.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Singularity University</h4>
<p style="color:white">Our programs and events equip you with the mindset, tools, and resources to successfully journey to the future. </p>
</div>
</div>
</div>
</div><br><br><br>
<!--fiveth container-->
<div id="Contact" class="container">
<h2 class="container text-center" style="color:orange"><b>Let's Get In Touch!</b></h2>
<p class="container text-center" style="color:orange"><span style="font-size: 18px;">Submit the form and we will get back to you as soon as possible!</span></p><br><br>
<form class="form-horizontal" action="">
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Contact Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact_number" placeholder="Enter Contact Number" name="contact_number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Subject:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" id="subject" placeholder="Enter Reason For Contacting..." name="subject"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><br>
<!--Footer-->
<footer class="container-fluid text-center">
<h4 style="color:white">2018 # Full-Stack Developer</h4>
<p style="color:white">All Rights Reserved</p>
</footer>
</body>
</html>
I have done a simple design with bootstrap, which is working fine in local host but when i try to enter it in my codeignitor folder its not working, i mean to say the images
which are their in the page are not getting displayed when i tried it to open via codeignitor, i have saved all my images in view folder itself, i know this is really
a stupid question.
i tried with this but its not working
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
you can't use .html file, because in html file you can't write php code.
helper 'url' must be loaded in autoload.php, either in view page you have to load again helper url.
You should not store images in view folder.
You should check some following step-
1) first fix your project base_url which is set in application/config/config.php
2) create a folder(e.g: image) on application location for save all images. then you can
save any img(e.g:5.jpg) in this folder which you are want.
3) on final step where you want to display image use code like this-
<img src="<?php echo base_url();?>/image/5.jpg">
If your images are in public/images directory and your
Base URL is
(you can check/set your base URL in /application/config/config.php
$config['base_url'] = 'enter your base path here';
)
if your basepath is
www.yoururl.com/
then use path
<img src="<?php echo base_url();?>public/image/5.jpg">
I using php to display result to my page and I did a bit of styling using bootstrap
<div class="alert alert-success" role="alert">
<?php
if(isset($_POST['submit'])){ //check if form was submitted
include "assets/backend/newsletter.php";
}
?>
</div>
Even the php code is not executed I can see the blank panel.
How can I get rid of that?
[Image for reference.][1]I think on ur case this makes way much more sens then what are u doing up there:
<?php
if(isset($_POST['submit'])){ ?>
<div class="alert alert-success" role="alert">
<?php include "assets/backend/newsletter.php"; ?>
</div>
<?php}?>
This way if the form was submitted the panel will appear if not submitted the panel will not be visible.
footer.php
<div class="container">
<div class="row">
<?php
if(isset($_POST['submit'])){
echo '<div class="alert alert-success" role="alert"> ';
include 'assets/backend/newsletter.php';
echo '</div>';
}
?>
</div>
<div class="container-fluid" style="background-color:#222222">
<div class="row">
<div class="container" style="margin-top:15px;
margin-bottom:15px">
<div class="col-lg-4" style="color:#f3f6f9">
<img src="images/pc%20logo.png" width="80px" height="80px">
<h4 >
PLACEMENT
<cell style="font-weight:bold">CELL</cell>
</h4>
<p>Nehru Nagar, Ring Road <br>New Delhi <br>
Ph :(+91) 964 328 0581<br>
Email : placements.pgdav#gmail.com
</p>
<a href="https://www.facebook.com/pgdavplacements"> <img src="images/f.png" height="30px" width="30px" >
</a>
<img src="images/i.png" height="30px" width="30px">
<img src="images/linkedin.png" height="30px" width="30px">
</div>
<div class="col-lg-4" style="color:#f3f6f9;
padding-top:30px">
<h4>Subscribe to Our Newsletter</h4>
<form action=" " method="post">
<div class="form-group">
<input class="form-control" type="text"
id="inputemail" name="email_newsletter" placeholder="Your Email ID">
</div>
<input type="submit" name="submit" class="btn btn-default" value="subscribe">
</form>
</div>
<div class="col-lg-4" style="color:#f3f6f9;
padding-top:29px">
<h4>Links</h4>
<ol class="breadcrumb">
<li>Home</li>
<li>About Cell</li>
<li>Registration</li>
<li>Contact Us</li>
</ol>
</div>
</div>
<div class="container-fluid" style="background-color:#f3f6f9">
<div class="row">
<div class="container" style="padding-top:7px">
<div class="col-lg-6 col-sm-12 col-xs-12">© All the Rights Reserved with Placement Cell</div>
<div class="col-lg-6 col-sm-12 col-xs-12" style="text-align:right">Developed By Bhanu Singh</div>
</div>
</div>
</div>
</div>
</div></div>
or this:
<div class="container">
<div class="row">
<?php
if(isset($_POST['submit'])){ ?>
<div class="alert alert-success" role="alert">
<?php
include 'assets/backend/newsletter.php';
?>
</div>
<?php
}
?>
</div>
<div class="container-fluid" style="background-color:#222222">
<div class="row">
<div class="container" style="margin-top:15px;
margin-bottom:15px">
<div class="col-lg-4" style="color:#f3f6f9">
<img src="images/pc%20logo.png" width="80px" height="80px">
<h4 >
PLACEMENT
<cell style="font-weight:bold">CELL</cell>
</h4>
<p>Nehru Nagar, Ring Road <br>New Delhi <br>
Ph :(+91) 964 328 0581<br>
Email : placements.pgdav#gmail.com
</p>
<a href="https://www.facebook.com/pgdavplacements"> <img src="images/f.png" height="30px" width="30px" >
</a>
<img src="images/i.png" height="30px" width="30px">
<img src="images/linkedin.png" height="30px" width="30px">
</div>
<div class="col-lg-4" style="color:#f3f6f9;
padding-top:30px">
<h4>Subscribe to Our Newsletter</h4>
<form action=" " method="post">
<div class="form-group">
<input class="form-control" type="text"
id="inputemail" name="email_newsletter" placeholder="Your Email ID">
</div>
<input type="submit" name="submit" class="btn btn-default" value="subscribe">
</form>
</div>
<div class="col-lg-4" style="color:#f3f6f9;
padding-top:29px">
<h4>Links</h4>
<ol class="breadcrumb">
<li>Home</li>
<li>About Cell</li>
<li>Registration</li>
<li>Contact Us</li>
</ol>
</div>
</div>
<div class="container-fluid" style="background-color:#f3f6f9">
<div class="row">
<div class="container" style="padding-top:7px">
<div class="col-lg-6 col-sm-12 col-xs-12">© All the Rights Reserved with Placement Cell</div>
<div class="col-lg-6 col-sm-12 col-xs-12" style="text-align:right">Developed By Bhanu Singh</div>
</div>
</div>
</div>
</div>
</div></div>
tested both options are workin;
I am fairly new to HTML with some PHP thrown in for MSSQL queries, but I would like to add some additional functionality to a page I am building that may need some jquery.
My question: How can I have the Primary Panel, shown in screen shot below, show/appear when I hover over 'View Details' of the 'Jobs Today' panel and hide when the cursor moves from 'View Details'? At the moment its always visible. I have included some code snippets to show how each section is built.
Build Jobs panel:
<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-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $jobCount ?></div>
<div>Jobs Today</div>
</div>
</div>
</div>
<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>
</div>
</div>
Build Primary Panel (yet to be populated with job info)
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
Primary Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
As always, thanks in advance. Hopefully I haven't missed anything :)
EDIT: I now have the hide working. The details panel is shown when the page first loads, I hover over the 'View Details' and when I leave the panel disappears. What am I missing. Here is the code as is now:
<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-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<?php echo $jobCount ?>
</div>
<div>Jobs Today</div>
</div>
</div>
</div>
<div id="jobs-wrapper">
<a href="#">
<div class="panel-footer" data-panel="job-details">
<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>
<!-- /.row -->
<div class="col-lg-4">
<div class="panel-primary-jobs" id="job-details">
<div class="panel-heading">
Jobs Today
</div>
<div class="panel-body">
<p>This is where Job info will go</p>
</div>
<div class="panel-footer">
Close
</div>
</div>
</div>
</div>
and the jquery
$('#jobs-wrapper a').mouseenter(function(e) {
if ($(this).data('panel'))
{
$('.panel-primary-jobs').hide();
$('#' + $(this).data('panel')).show();
}
});
$('#jobs-wrapper').mouseleave(function()
{
$('.panel-primary-jobs').hide();
}
);
First, add some classes to tell apart the .header from the .details:
<div class="panel panel-primary header">...</div>
<div class="panel panel-primary details hidden">...</div>
And then:
$('.primary-panel .panel-footer')
.hover( () => $('.details').show(), () => $('.details').hide())
The first function is the hover in handler and the second one, the hover out
I have been developing a website to display different coupons and the data is taken from database.It has 4 columns containing id,name,no of coupons,caption as shown here.
Now main idea is to create a featured store section in php page which contains image which takes storename.jpeg as source to get the image. Also it has a div displays no of coupons and a caption. How to write a query to individually access these 3 columns? Also the grid system is not working correctly in smaller devices some are not in right position. Code snippet is added below
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
body {
padding-top: 50px;
}
.thumbnail {
position:relative;
overflow:hidden;
}
.caption {
position:absolute;
top:0;
right:0;
background:rgba(66, 139, 202, 0.75);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
//Step1
$db = mysql_connect("localhost","root","sai123");
if (!$db) {
die("Database connection failed miserably: " . mysql_error());
}
//Step2
$db_select = mysql_select_db("AskCoupon.com",$db);
if (!$db_select) {
die("Database selection also failed miserably: " . mysql_error());
}
// echo "Database connection Established";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Promotional codes,Coupons,Deals and many more</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php $query = "select * from featured_stores"; $result = mysql_query($query);?>
<?php if (!$result) die ("Database access failed: " . mysql_error());?>
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/flipkart.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/paytm.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/savaari.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/uber.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/foodpanda.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/mobikwik.jpeg" alt="...">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/zoomcar.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/jabong.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/tinyowl.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/americanswan.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/snapdeal.jpeg" alt="...">
</div>
</div>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Placeholder Coupon no</h4>
<p>Get exiting deals here</p>
</div>
<img src="img/askmebazaar.jpeg" alt="...">
</div>
</div>
</div>
</div><!-- /.container -->
</body>
</html>
From the code the coupon no should be retrived from database and stored in placeholder-coupon-no and image src name from store_name and p tag in caption div to be replaced with caption from database.
You just need to iterate through the results of your query.
You can use the following for reference.
<?php
$query = "select * from featured_stores";
$result = mysql_query($query)
if (!$result) die ("Database access failed: " . mysql_error());
?>
<div class="container">
<div class="row">
<?php while($row=mysql_fetch_array($result)): ?>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4><?= $row['no_of_coupons']; ?></h4>
<p><?= $row['caption']; ?></p>
</div>
<img src="img/" .<?= $row['store_name']; ?> . ".jpeg" alt="...">
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php require_once("includes/database.php");?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ask Coupon | Promotional codes,Coupons,Deals and many more</title>
<link rel="stylesheet" href="css/hover.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery/jquery-2.1.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
</script>
</head>
<body>
<?php $query = "select store_name,no_of_coupons,caption from featured_stores";
$result = mysql_query($query);?>
<?php if (!$result) die ("Database access failed: " . mysql_error());?>
<div class="container">
<div class="row">
<?php
while($row = mysql_fetch_assoc($result)) {?>
<div class="col-lg-2 col-sm-6 col-xs-6 col-md-3">
<div class="thumbnail">
<div class="caption">
<h4><?php echo $row["no_of_coupons"]?></h4>
<p><?php echo $row["caption"]?></p>
</div>
<img src="img/<?php echo $row["store_name"]?>.jpeg" alt="...">
</div>
</div>
<?php
}?>
</div>
</div><!-- /.container -->
<?php
require_once("includes/database_closing.php"); ?>
</body>
</html>