This is the problem I have created a page which get the variable and process on it and get the data from the database.
The data fetched is paginated by pagination function file.
I want to use a image loader when i click on page 2 the loading image should appear till the data is displayed and once the data is displayed the loading image should disappear.
Here are my files...
<?php
session_start();
if (isset($_GET["topic_name"]))
{
$_SESSION['topic_name']=$_GET["topic_name"];
$topicget = $_SESSION['topic_name'];
}
else
{
$topicget = 'Age';
}
//get the function
include_once('dbconnect.php');
include_once ('function.php');
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$limit = 15;
$startpoint = ($page * $limit) - $limit;
//to make pagination
$statement = "`topic`,`author`,`quote` WHERE ( quote.topics REGEXP '[[:<:]]{$topicget}[[:>:]]' and topic.topic_en= '{$topicget}')and quote.author_id=author.id";
$query = mysqli_query($con,"SELECT * FROM {$statement} LIMIT {$startpoint} , {$limit}");
if($query === FALSE) {
die(mysqli_error($con)); // TODO: better error handling
}
?>
<html>
<head>
<title>Pixster Quotes</title>
<link href="files/core_msnry.css" media="screen, print" type="text/css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="files/pagination.css" rel="stylesheet" type="text/css" />
<link href="files/grey.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="files/footer-distributed-with-address-and-phones.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#imgloader").hide(); //will hide the gif
$("#masonry").ajaxStart(function(){
$("#imgloader").show(); //when pagination is clicked, loader will show
})
$("#masonry").ajaxStop(function () {
$('#imgloader').hide();
});
});
</script>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.item {
position: absolute;
margin:10px;
margin-top:40px;
margin-left:0px;
margin-right:10px!important;
width: 300px;
height: auto;
float: left;
background: #ffff;
font-size:20px !important;
text-align:center;
display: block;
line-height: 1.42857143;
-webkit-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
-moz-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
-webkit-filter: grayscale(00%);
-moz-filter: grayscale(00%);
-o-filter: grayscale(00%);
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.item:hover {
-webkit-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
-moz-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
-webkit-transform: scale(1.005);
-moz-transform: scale(1.005);
-ms-transform: scale(1.005);
-o-transform: scale(1.005);
transform: scale(1.005);
}
.char a{
color:white;
}
#masonry{
height:auto; !important;
}
#imgloader{
margin:100px;
}
</style>
</head>
<body>
<!--header-->
<div style="height: 40px;" class="sticky-wrapper" id="bq-tn-id-sticky-wrapper">
<nav style="" id="bq-tn-id" class="bq-tnav navbar navbar-default bq-cookie-notice ng-scope" data-ng-controller="NavBarCtrl">
<div class="cl">
<div class="navbar-header">
<a class="brand" style="padding:0px 5px 0px 5px; color:white" href="#/"><span class="bqDesktopLogo"></span></a>
</div>
<div class="collapse data-ng-cloak navbar-collapse" data-ng-class="navBarClass()" data-ng-click="navCollapsed=true">
<ul class="nav navbar-nav">
<li class="bq-ni hidden-xs bq-nav-large" id="sl-bq-nav-home-t">Home</li>
<li class="bq-ni">Authors</li>
<li class="bq-ni">Topics</li>
</ul>
<ul class="nav data-ng-cloak navbar-nav navbar-right">
<li>
<form action="search.php" method="GET" class="navbar-form navbar-left bq-nav-large no-border bq-no-print navbar-left form-search ng-pristine ng-valid" style="padding-left:8px;margin-top:5px">
<div class="form-group bq-search">
<input class="s-btn fa-input fa fa-search" value=" " type="submit">
<input id="bq-search-input" placeholder="search" maxlength="80" name="q" class="s-fld-t input-medium search-query s-small" type="text">
</div>
</form>
</li>
</ul>
</div>
</div>
</nav></div>
<!--header ends-->
<div class="letter-navbar qs-blk" style="text-align: center; letter-spacing: 2px">
<span class="body bq-tn-letters"> <span id="bq-auth-lbl" class="bq-tn-wrap">Authors:</span>
<span class="char">
<?php
$chars = range('a', 'z');
foreach($chars as $eachChar){
echo ''.strtoupper($eachChar).' ';
}
?>
</span>
</span>
</div>
<center><img id="imgloader" src='../quotes/img/loading.gif'/></center>
<div id='masonry'>
<center> <h1><strong><?php echo $topicget; echo " related Quotes";?></strong></h1></center>
<?php
$Authorname='';
$quote='';
$tag='';
$NothingFound=true;
$count=1;
while ($row = mysqli_fetch_assoc($query)) {
$NothingFound=false;
$quote =$row['quote'];
$Authorname =$row['name'];
$tag =$row['topic_en'];
?>
<div class="item">
<?php echo $quote; ?><br>
<?php echo "Author:- {$Authorname}";?>
</div>
<?php $count++;
}?>
<?php if($NothingFound){?>
<div class="item">
<?php echo "NOTHING FOUND";?>
</div>
<?php } ?>
</div>
<script src='masonry.pkgd.min.js'></script>
<script>
var container = document.querySelector('#masonry');
var masonry = new Masonry(container, {
columnWidth: 50,
itemSelector: '.item'
});
</script>
<?php echo pagination($statement,$limit,$page);?>
<div style="margin-top:20px>"<?php include('footer.php');?></div>
</body>
</html>
Add a gif give it an id='imgloader'.
<script>
$(document).ready({
$("#imgloader").hide(); //will hide the gif
$("#masonry").click(function(){
$("#imgloader").show(); //when pagination is clicked, loader will show
$("#masonry").hide();// to hide your mess data
});
});
</script>
Edit 1
<script>
$(document).ready(function (){
$("#imgloader").hide(); //will hide the gif
$("#masonry").ajaxStart(function(){
$("#imgloader").show(); //loader will show
$("#masonry").hide();// to hide your mess data
});
$("#masonry").ajaxStop(function () {
$('#imgloader').hide();// loader will hide
$("#masonry").show();// to show your mess data
});
});
</script>
Related
Please someone help me. Im new to coding, I'm trying to highlight the active menu item. I have been searching for almost two weeks, but it is still not resolved. I have tried with Jquery CDN; it works, but when I upload all this to the web, it doesn't work. When I click the menu, it highlights, then disappears suddenly. So it didn't work with Jquery CDN.
here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</div>
</div>
</nav>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</ul>
</div>
</div>
<!-- Main variables *content* -->
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript">
$("#toi").click(function(e) {
e.preventDefault();
$("#main-wrap").toggleClass("launched");
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$(".mobileSearch a").click(function(e){
e.preventDefault();
$(".search-bar").toggleClass("toggleSearch");
});
} else {
$('#main-wrap').addClass('launched');
}
/*$(window).scroll(function() {
var nav = $('#scrollNav');
if ($(window).scrollTop() >= 10) {
nav.addClass('fixedNav');
} else {
nav.removeClass('fixedNav');
}
});*/
</script>
</body>
</html>
here is the css
}
.dahshat-board .navbar-default {
background-color: transparent;
border-color: transparent;
padding: 10px 0;
margin: 0;
background-image: none;
}
.nav-bottom {
position: relative;
z-index: 3;
}
.nav.page-navigation {
background: #fad534;
border-radius: 500px;
display: flex;
width: 100%;
position: relative;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
justify-content: center;
}
.nav.page-navigation li {
display: inline-flex;
width: auto;
align-items: center;
flex: 0 0 10.85%;
flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
display: block;
width: auto;
text-align: left;
}
.nav-bottom .nav li .ico {
margin-right: 4px;
width: 28px;
height: 28px;
background: #2b1f60;
border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
background: #fad534;
border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
font-size: 13px;
line-height: 44px;
color: #2a1e5e;
display: flex;
justify-content: center;
position: relative;
align-items: center;
padding: 2px 9px;
border-radius: 500px;
white-space: pre;
width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
/* background: transparent;
border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
background: transparent;
outline: none;
}
.nav-bottom .nav .dropdown li a {
line-height: 18px;
display: block;
padding: 4px 10px;
position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}
.nav-bottom .nav li.active a {
color: #fad534;
background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
display: none;
}
please help
Not an answer as such but I corrected your HTML markup as best I could - it now validates correctly so that in itself might be a help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<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='keywords' content='' />
<meta name='description' content='' />
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<!--///////////////////////////////////////////////////////////////////////
The element "button" must not appear as a descendant of the "a" element.
The hyperlink has been removed from the DOM which might affect your
layout
/////////////////////////////////////////////////////////////////////////-->
<!--
<a class="navbar-brand" href="/"></a>
-->
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Main variables *content* -->
<script src='//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js'></script>
<script>
$('#toi').click(function(e) {
e.preventDefault();
$('#main-wrap').toggleClass('launched');
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$('.mobileSearch a').click(function(e){
e.preventDefault();
$('.search-bar').toggleClass('toggleSearch');
});
} else {
$('#main-wrap').addClass('launched');
}
</script>
</body>
</html>
The original code, run through the W3c validator produced the following results... as you will see it gave up hope and bailed!
If the markup alters the layout significantly look again at the css and judge whether the above markup was your intended layout. With valid markup you should have fewer problems going forward I hope.
I want to add a slider in the form tag. Right now all the pictures are together. i want to make it more user friendly. As you can see in my code i'm fetching all images from database. And i've override the input radio button on each image so that the user can select its image.
I've already tried to use the Slick library but its not good.
<style type="text/css">
/*
html, body {
margin: 0;
padding: 0;
}
*/
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.img{
width: 10%;
}
</style>
<style media="screen">
.input-hidden {
position: absolute;
left: -9999px;
}
input[type=radio]:checked + label>img {
border: 1px solid #fff;
box-shadow: 0 0 3px 3px #090;
}
input[type=radio]:checked + label>img {
transform:
rotateZ(-10deg)
rotateX(10deg);
}
/* Stuff after this is only to make things more pretty */
input[type=radio] + label>img {
width: 115px;
height: 115px;
transition: 500ms all;
}
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form action="preview.php" method="post" >
<?php
$result_model = mysqli_query($conn, "SELECT * FROM model ORDER BY id DESC ");
$result_metal = mysqli_query($conn, "SELECT * FROM metal ORDER BY id DESC ");
$result_stone = mysqli_query($conn, "SELECT * FROM stone ORDER BY id DESC "); ?>
<div >
<div class="input-group">
<p>Choose your Model:</p>
</div>
<div class="regular slider">
<?php
while($model = mysqli_fetch_assoc($result_model)){
?>
<!-- <input type="radio" name="model" id="model<?= $model['id'] ?>" class="input-hidden" value="<?= $model['id'] ?>" />-->
<!--
<label for="model<?= $model['id'] ?>">
-->
<img
src="images/<?= $model['image'] ?>"
alt="<?= $model['name'] ?>" style="width:50%;" />
<!-- </label>-->
<?php
}
?>
<!-- </div>-->
<!-- <br>-->
<div>
<!--
<div class="input-group">
<p>Choose your Metal:</p>
</div>
-->
<!--
-->
</div>
<br>
</div>
<div class="input-group">
<p>Choose your Metal:</p>
</div>
<div class="regular slider">
<?php
while($metal = mysqli_fetch_assoc($result_metal)){
?>
<!--
<input type="radio" name="metal" id="metal<?= $metal['id'] ?>" class="input-hidden" value="<?= $metal['id'] ?>" />
-->
<!-- <label for="metal<?= $metal['id'] ?>">-->
<img
src="images/<?= $metal['image'] ?>"
alt="<?= $metal['name'] ?>" />
<!-- </label>-->
<?php
}
?>
?>
<!-- </div>-->
<!-- <br>-->
<div>
<!--
<div class="input-group">
<p>Choose your Metal:</p>
</div>
-->
<!--
-->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
</script>
</div>
</form>
Following are my code kindly check and tell how to get 10 random records form json and want to display in marquee tag . Thanks in > advance kindly check the code me getting the 10 records but want to > display randomly . thanks
<html>
<head>
<meta charset="UTF-8">
<title>Sabkideal.com Todays findmystay.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <!-- Boostarp -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="all" />
<!-- Boostrap -->
<link rel="stylesheet" href="bootstrap/css/custom.css" media="all" />
<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<style>
.button {
background-color: #FF5733;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
}
#-webkit-keyframes glowing {
0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}
#-moz-keyframes glowing {
0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}
#-o-keyframes glowing {
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
#keyframes glowing {
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
.button {
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite;
}
</style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!--header section -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">Sabkideal.com </a>
</div>
<!-- menu section -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Register and win </li>
<li>Conatct Us </li>
</ul>
</div>
</div>
</nav>
<div style="margin-left: 150px;
width: 100px; ">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sabkidealLeaderborad -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-9170404078755708"
data-ad-slot="9181804474"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class ="container">
<div class ="row">
<div class="col-lg-2">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sabkidealskycraper -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-9170404078755708"
data-ad-slot="3308237676"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="col-lg-8">
<?php
$c = 0;
$ch = curl_init("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8"); // add your url which contains json file
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$json = json_decode($content, true);
//print_R($json);
$count=count($json);
for($i=0;$i<$count;$i++)
{
echo '<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">';
echo'
<a target="_blank" style="width:100%" rel="nofollow, noindex" href='.$json[$i]['link'].'>
<p>'.$json[$i]['coupon_title'].'</p></a>';
echo '</marquee>';
}
?>
</div>
<script type="text/javascript">
var alltables=document.getElementsByTagName("table")
for (var i=0; i<alltables.length; i++)
disableSelection(alltables[i]) //disable text selection within all tables on the page
</script>
<div class="col-lg-2">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sabkidealskycraper -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-9170404078755708"
data-ad-slot="3308237676"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
</body>
</html>
You are looking for the array_rand php function
PHP
$json = json_decode($content, true);
$randoms = array_rand($json, 10);
$count = count($randoms);
for($i=0;$i<$count;$i++)
{
echo '<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">';
echo'
<a target="_blank" style="width:100%" rel="nofollow, noindex" href='.$json[$randoms[$i]]['link'].'>
<p>'.$json[array_rand($json)]['coupon_title'].'</p></a>';
echo '</marquee>';
}
This is a concept question. Right now I have a registration/login and a profile page system built using php and mysql, but I have one question.
I want a user to be able to make their own specific todos. So when they login they can see their todo and create their todo for them selves. Only their login can access their todo. But I don't understand how to do that in php/mysql.
Here is my login page:
<?php
session_start();
require_once('PhpConsole.phar');
require_once('connection.php');
ob_start();
require('index.php');
$data = ob_get_clean();
ob_end_clean();
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/marcoceppi/bootstrap-glyphicons/master/css/bootstrap.icon-large.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="lib/sweetalert.css">
<script src="lib/sweetalert-dev.js"></script>
</head>
<body>
<div id="page">
<form method = "post" role = "form" id = "form">
<h1 style = "position:relative; left:60px; font-family: Impact;">Login </h1>
<div class="col-xs-2">
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-envelope"></i>
<input type="text" class="form-control" id = "email" name = "loginemail" placeholder="Email" />
</div>
</div>
<br>
<div class="col-xs-2">
<div class="inner-addon left-addon">
<img src = "http://i.imgur.com/GqkLI3z.png" id = "imgLock"/>
<input type="text" class="form-control" name = "loginpassword" placeholder="Password" id = "password" />
</div>
</div>
<br>
<br>
<div id = "buttons">
<div class="col-xs-2">
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-ok-sign" ></i>
<input type = "submit" class="btn btn-info" name = "loginsubmit" id = "submit"/>
</div>
<div>
</div>
</form>
</div>
<?php
if(isset($_POST["loginsubmit"])){
$loginEmail = $_POST["loginemail"];
$loginPassword = $_POST["loginpassword"];
if ($query = mysqli_query($connection, "SELECT * FROM `authe` WHERE Email = '".$loginEmail."' AND Password = '".$loginPassword."' ")) {
$rows = mysqli_num_rows($query);
if($rows>0){
echo "<script> swal('Good job!', 'Sucessfully Authenticated', 'success')</script>";
$_SESSION['email'] = $loginEmail;
$_SESSION['password'] = $loginPassword;
if(true){
// header("Location: http://localhost:8012/phpForm/Profile.php");
if ($queryTwo = mysqli_query($connection, "SELECT Username FROM `authe` WHERE Email = '".$loginEmail."'")) {
$rowsTwo = mysqli_num_rows($queryTwo);
if($rowsTwo>0){
printf($rowsTwo);
while($roww = mysqli_fetch_array($queryTwo))
{
$_SESSION["username"] = $roww['Username'];
}
}
}
echo "<script> window.location.href = 'http://localhost:8012/phpForm/Profile.php' </script>";
}
}
else {
echo "<script>sweetAlert('Oops...', 'Authentication Failed', 'error');</script>";
}
}
}
?>
</body>
</html>
<!-- <br>
<input type = "text" class="form-control" name = "loginemail" style = "width = 20px;" id = "input" placeholder = "Enter Email" required/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
<br> -->
And my profile page:
<?php
session_start();
require_once('PhpConsole.phar');
require_once('connection.php');
ob_start();
require('index.php');
$data = ob_get_clean();
ob_end_clean();
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/marcoceppi/bootstrap-glyphicons/master/css/bootstrap.icon-large.css">
<link rel="stylesheet" href="main.css">
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
<script src = "page.js"></script>
<link rel="stylesheet" href="lib/sweetalert.css">
<script src="lib/sweetalert-dev.js"></script>
<style>
#toDoButton {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
right:550px;
bottom:70px;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#toDoButton:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
}
</style>
</head>
<body>
<div id="page" ng-app = "pageApp" ng-controller="pageController">
<h1>Welcome <?php echo $_SESSION['username']; ?></h1>
<h5>Here is one cool feauture. Type in the box :)</h5>
<div class = "coolFeauture" id = "CoolFeauture1">
<input type = "text" ng-model = "CoolFeauture"/>
<div ng-bind = "CoolFeauture"></div>
</div>
<div class = "todoMain">
<h4>Click on the button for a TODO App! Check it out!</h4>
Todo
</div>
</div>
<?php
?>
</body>
</html>
<!-- <br>
<input type = "text" class="form-control" name = "loginemail" style = "width = 20px;" id = "input" placeholder = "Enter Email" required/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
<br> -->
Since it is a concept question, and you mentioned that the login / register system is already done, what you need to do is:
Log them in saving a unique $_SESSION['id'], or an expirable unique key.
Additionally you may save cookies to identify their account
In the todo.php page:
Make sure that they are logged in by checking $_SESSION['id'] (if it has been set, else redirect somewhere or pop up a message).
Query their current stored TODOs by something like SELECT * FROM todo WHERE user='id'
Display a <textarea> or similar to store new TODO (which you can do by a POST to the same page).
If the page gets a POST request:
Store new TODOs by INSERT INTO todo('id', 'sanitized $_POST["text"]')
Also, always make sure to sanitize variables before doing any of these queries.
I'm trying to view the contents of a database into a webpage. I'm using this code:
<?php
error_reporting(0);
$host="localhost";
$username="root";
$password="";
$database="pncollege";
mysql_connect($host,$username,$password);
#mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM data";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
echo "";
$i=0;
while ($i < $num) {
$email=mysql_result($result,$i,"email");
$name=mysql_result($result,$i,"name");
echo "";
$i++;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Free Guidance Website Template | Programs :: w3layouts</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>
<!------ Light Box ------>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/swipebox.css">
<script src="js/ios-orientationchange-fix.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<style>
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.4 Georgia, Serif;
}
#page-wrap {
margin: 50px;
}
p {
margin: 20px 0;
}
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>
<!------ Eng Light Box ------>
</head>
<body>
<div class="header-bg">
<div class="wrap">
<div class="total-box">
<div class="total">
<div class="header_top">
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Faculties</li>
<li>Picture Gallery</li>
<li class="active">Principal's Desk</li>
<li>Contact</li>
<div class="clear"></div>
</ul>
</div>
<ul class="follow_icon">
<li><img src="images/fb.png" alt=""></li>
<li><img src="images/tw.png" alt=""></li>
<li><img src="images/rss.png" alt=""></li>
</ul>
<div class="clear"></div>
</div>
<div class="header-bottom">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="logo">
<h1>P.N. College, Parsa</h1>
<h2> ( A constituent unit of Jaiprakash University )</h2>
</div>
<div class="search">
<form>
<input type="text" value="">
<input type="submit" value="">
</form>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="banner-box">
<div class="wrap">
<div class="main-top">
<div class="main">
<div class="heading3">
<h3 style="text-align:center">Admin Panel</h3>
<hr><br>
</div>
<div class="section group">
<center>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo "$userName"; ?></td>
<td><?php echo "$userEmail"; ?></td>
<td><?php echo "$userMsg"; ?></td>
</tr>
</tbody>
</table>
</center>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="copy-right">
<p style="letter-spacing:4px;border-radius:15px 0 15px 0;background-color:#000;padding-top:15px;padding-bottom:15px;width:100%">© P.N. COLLEGE | DESIGNED BY INCREDIBLE SAURAV</p>
</div>
</body>
</html>
Can anyone help me and guide me where I've made a mistake? I know the code is a little messy and I'm sorry for that. I just can't figure out where I've made a mistake.
Change your loop to fetch an array for each row -
while ($row = mysql_fetch_array($result)) {
$email = $row['email']; // assign this array part to a variable
$name = $row['name'];
echo $name ." " .$email . "<br />"; // echo the variables
}
// now you can close the connection, after you have used the results
mysql_close();
Please, stop using mysql_* functions. They are no longer maintained and are officially deprecated. Learn about prepared statements instead, and consider using PDO, it's not as hard as you think.