I develop a jQuery mobile site and want to display pie chart, the data fetch form database to show in pie chart. Since the jQuery mobile link to another page using div, I make one div in index.php to display data from database, then when the data is showing up, I can view the data by click on the view link. At this part, I make jQuery load to load page piechart.php when click on the view link. The piechart.php page success called by jQuery load, but pie chart not appear, BUT if I right click on page and click view inspect element, it starts showing up normally the pie chart.
Why do I need to right click to display it??
This is index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSPIC</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<meta name="description" content="This site was created from a template originally designed and developed by Codify Design Studio. Find more free templates at http://www.adobe.com/devnet/author_bios/chris_converse.html" />
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/formcalculations.js"></script>
<link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<script type="text/javascript" src="includes/custom.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<script type="text/javascript">
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
</script>
</head>
<body onload='hideTotal()'>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Homepage</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">About Us</li>
<li class="btn_s">Services</li>
<li class="btn_l">Search</li>
<li class="btn_c">Upload</li>
<li class="btn_c">Chart</li>
</ul>
</div>
<div data-role="">
</div>
</div>
<div data-role="page" id="locations" data-title="Find a Locations">
<div data-role="header">
<h1>Search Data</h1>
back
</div>
<div data-role="content">
<p></p>
<h2>Search Data</h2>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1>Upload</h1>
back
</div>
<div data-role="content" class="content_container">
<p><form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Information</h2>
<table width="63%" border="1" align="center">
<tr>
<td width="40%">Upload File</td>
<td width="60%"><input name="pic" type="file" id="pic" /></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="Submit" />
</div></td>
</tr>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="chart" data-title="chart Us" class="chart">
<div data-role="header">
<h1>Pie Chart</h1>
back
</div>
<div id="output" data-role="content" class="content_container"></div>
<div data-role="content" class="content_container" id="k_chart">
<p>
<form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Display File</h2>
<table width="63%" border="1" align="center" class="table_chart">
<tr>
<td width="40%">Bil</td>
<td width="60%">Pusat rawatan</td>
<td width="60%">Pengasas</td>
<td width="60%">Bil pengamal</td>
<td width="60%">Total</td>
<td width="60%">Phone number</td>
<td width="60%">Peratus</td>
<td width="60%">view chart</td>
</tr>
<?php
include("connection.php");
$sel = mysql_query("select * from info");
$a = 1;
while($get_sel = mysql_fetch_array($sel))
{
?>
<tr>
<td width="40%"><?php echo $a++;?></td>
<td width="60%"><?php echo $get_sel['nama_PusatRawatan'];?></td>
<td width="40%"><?php echo $get_sel['nama_Pengasas'];?></td>
<td width="60%"><?php echo $get_sel['bilangan_Pengamal'];?></td>
<td width="40%"><?php echo $get_sel['totalPrice'];?></td>
<td width="60%"><?php echo $get_sel['phonenumber'];?></td>
<td width="60%"><?php echo $get_sel['peratus'];?></td>
<td width="60%"><div class="id"><?php echo $get_sel['id'];?></div><span class="viewBtn">View</span></td>
</tr>
<?php
}
?>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<script>
$(document).ready(function(e) {
// Pizza.init();
$('.viewBtn').on('click',function()
{
var id = $(this).closest('td').find('.id').text();
$('#k_chart').hide();
$('#output').load("piechart.php?id="+id);//load page to display pie chart
});
$(window).load(function() {
Pizza.init({
donut: false, // enable donut chart
donut_inner_ratio: 0.4, // between 0 and 1
percent_offset: 35, // relative to radius
stroke_color: '#333',
stroke_width: 0,
show_percent: true, // show or hide the percentage on the chart.
animation_speed: 500,
animation_type: 'elastic' // options: backin, backout, bounce, easein, easeinout, easeout, linear
});
});
});
</script>
</body>
</html>
This one is piechart.php
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<div data-role="content" class="content_container">
<p>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px;" align="center">Papar peratus lulus pie chart </h1>
<div class="row">
<div class="large-12 columns">
<h3>Graphs</h3>
</div>
</div>
<?php
include("connection.php");
$id_info = $_GET['id'];
$papar = mysql_query("select *from info where id = '$id_info'");
$get_papar = mysql_fetch_array($papar);
if($get_papar['peratus']>0 and $get_papar['peratus']<=50)
{
$xlulus = $get_papar['peratus'];
$lulus = 100 - $xlulus;
}
else
{
$lulus = $get_papar['peratus'];
$xlulus = 100 - $lulus;
}
?>
<div class="row">
<div class="large-4 small-4 columns">
<ul data-pie-id="svg">
<li data-value="<?php echo $xlulus;?>">Tidak memenuhi syarat</li><li data-value="<?php echo $lulus;?>">Memenuhi syarat</li>
</ul>
</div>
<div class="large-8 small-8 columns">
<div id="svg"></div>
</div>
</div>
</p>
</div>
The jQuery code is at the bottom of page index.php..
You need to correctly time your plugin initialization.
First forget about document ready and window load, they will not work correctly with jQuery Mobile application (usually they trigger before jQuery Mobile content is successfully enhanced).
Instead you should learn how to use jQuery Mobile page events, for example pageinit event exists to replace document ready.
Read more about it here.
Now regarding your main problem, your plugin must be initialized during the pageshow event. A lot of visual plugins (carousels, charts ..) require correct page height. When working with jQuery Mobile page height is correctly calculated only during pageshow event, it will be 0 in any other case.
Page event initialization order can be found here.
Related
This is my entire code to generate reports for a particular student using his/her student id.
My SQL query will show the list of books not yet returned by the student....
While debugging I noticed that if I Manually put any student ID in the code, I can see the results but the button click feature is not working ... somehow the button is not taking any data from my SQL query and not executing..
<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['alogin'])==0)
{
header('location:index.php');
}
else
{
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>
Online Library Management System | Report Generation
</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME STYLE -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- DATATABLE STYLE -->
<link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<!-- CUSTOM STYLE -->
<link href="assets/css/style.css" rel="stylesheet" />
<!-- GOOGLE FONT -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<!------MENU SECTION START-->
<?php include('includes/header.php');?>
<!-- MENU SECTION END-->
<div class="content-wrapper">
<div class="container">
<div class="row pad-botm">
<div class="col-md-12">
<h4 class="header-line">
Employee Reports
</h4>
</div>
<div class="row">
<?php if($_SESSION['error']!="")
{?>
<div class="col-md-6">
<div class="alert alert-danger" >
<strong>
Error :
</strong>
<?php echo htmlentities($_SESSION['error']);?>
<?php echo htmlentities($_SESSION['error']="");?>
</div>
</div>
<?php } ?>
<?php if($_SESSION['msg']!="")
{?>
<div class="col-md-6">
<div class="alert alert-success" >
<strong>
Success :
</strong>
<?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?>
</div>
</div>
<?php } ?>
<?php if($_SESSION['delmsg']!="")
{?>
<div class="col-md-6">
<div class="alert alert-success" >
<strong>
Success :
</strong>
<?php echo htmlentities($_SESSION['delmsg']);?>
<?php echo htmlentities($_SESSION['delmsg']="");?>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="row">
<div class="col-md-10 col-sm-6 col-xs-12 col-md-offset-1"">
<div class="panel panel-info">
<div class="panel-body">
<form role="form" method="post">
<div class="form-group">
<label>
CPF NUMBER<span style="color:red;">*</span>
</label>
<input class="form-control" type="text" name="studentid" id="studentid" autocomplete="off" required />
</div>
<button type="submit" name="report" id="submit" class="btn btn-info">
Generate
</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
Issued Documents
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>#</th>
<th>Employee Name</th>
<th>Document Name</th>
<th>Reference Number</th>
<th>Issued Date</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<?php
if($query->rowCount() > 0)
{
foreach($results as $result)
{
if(isset($_POST['report']))
{
$studentid=strtoupper($_POST['studentid']);
$sql = "SELECT tblstudents.FullName,tblbooks.BookName,tblbooks.ISBNNumber,tblissuedbookdetails.IssuesDate,tblissuedbookdetails.RetrunStatus,tblissuedbookdetails.id as rid from tblissuedbookdetails join tblstudents on tblstudents.StudentId=tblissuedbookdetails.StudentId join tblbooks on tblbooks.id=tblissuedbookdetails.BookId where tblissuedbookdetails.RetrunStatus is NULL and StudentId=:studentid order by tblissuedbookdetails.id desc";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
?>
<tr class="odd gradeX">
<td class="center"><?php echo htmlentities($cnt);?></td>
<td class="center"><?php echo htmlentities($result->FullName);?></td>
<td class="center"><?php echo htmlentities($result->BookName);?></td>
<td class="center"><?php echo htmlentities($result->ISBNNumber);?></td>
<td class="center"><?php echo htmlentities($result->IssuesDate);?></td>
<td class="center">
<?php if($result->RetrunStatus==NULL)
{
echo htmlentities("Not Returned Yet");
} else {
echo htmlentities("Returned");
}
?>
</td>
<td class="center">
</td>
</tr>
<?php $cnt=$cnt+1;}}} ?>
</tbody>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
</div>
</div>
<!-- CONTENT-WRAPPER SECTION END-->
<?php include('includes/footer.php');?>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- DATATABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
Need to put studentid in input field value. So that when form submit, it posted and generate report. Update the following line and check.
<input class="form-control" type="text" name="studentid" id="studentid" autocomplete="off" required value="<?php echo strtoupper($_POST['studentid']); ?>" />
I'm having some issues to make my first PHP filter, I would like to select all the values in my SQL table by selecting the date from the datepicker.
This is my php page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--formden.js communicates with FormDen server to validate fields and
submit via AJAX -->
<script type="text/javascript"
src="https://formden.com/static/cdn/formden.js"></script>
<!-- Special version of Bootstrap that is isolated to content wrapped in
.bootstrap-iso -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-
iso.css" />
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://formden.com/static/cdn/font-
awesome/4.4.0/css/font-awesome.min.css" />
<!-- Inline CSS based on choices in "Settings" tab -->
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p,
.bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color:
black}.bootstrap-iso form button, .bootstrap-iso form button:hover{color:
white !important;} .asteriskField{color: red;}</style>
<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form action="risultati.php" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Date
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date"
placeholder="DD/MM/YYYY" type="text"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="data_sel" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<br><br><br><br>
<div>
<table style="width:100%">
<tr>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
<td style="width:16,6%; text-align:center">1</td>
</tr>
</table>
</div>
<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
</html>
And this is my table:
ID,ARTICOLAZIONE,NOME1,NOME2,PHONE,INDIRIZZO,CITTA
I know I have to create the connection.php file to connect to my database and another file that insert the results in my HTML table (under the datepicker).
I'm creating a regitration page which includes php,html and css in bootstrap.Here is my php file.
<?php include "header.php"; ?>
<html>
<head></head>
<body>
<!--content-->
<div class=" container">
<div class=" register">
<h1>Register</h1>
<?php if(isset($_GET[ 'error'])) { echo '<font color="red">'.$_GET[ 'error']. '</font>'; echo '<br><br>'; } if(isset($_GET[ 'ok'])) { echo '<font color="blue">You are successfully Registered..</font>'; echo '<br><br>'; } ?>
<form action="process_register1.php" method="POST">
</div>
<div class="col-md-6 register-bottom-grid">
<h3>Personal infomation</h3>
<div>
<span>Full Name</span>
<input type="text" size="30" maxlength="30" name='fnm'>
</div>
<div>
<span>Username</span>
<input type="text" size="30" maxlength="30" name='unm'>
</div>
<div>
<span>Password</span>
<input type='password' name='pwd' size="30">
</div>
<div>
<span> Confirm password</span>
<input type='password' name='cpwd' size="30">
</div>
<div>
<span> Gender</span>
<input type="radio" value="Female" name="gender" id='f'>Female
<input type="radio" value="Male" name="gender" id='m'>Male
</div>
<div>
<span>E-mail address</span>
<input type='mail' name='mail' size="30">
</div>
<div>
<span> No contact</span>
<input type="text" name='contact' size="30">
</div>
<div>
<span> City</span>
<select style="width: 195px;" name="city">
<option>Tirana</option>
<option>Korca</option>
<option>Vlora</option>
<option>Kavaja</option>
</select>
</div>
<input type="submit" value="submit">
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
</body>
</html>
Here is my header.php file:
<?php session_start(); require( 'config.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<!--//fonts-->
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>
$(document).ready(function() {
$(".memenu").memenu();
});
</script>
<script src="js/simpleCart.min.js">
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="search">
<form>
<input type="text" value="Search " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
<input type="submit" value="Go">
</form>
</div>
<div class="header-left">
<?php if(isset($_SESSION[ 'status'])) { echo '<ul><li>Logout</li></ul>'; } else { echo '<ul>
<li ><a href="login1.php" >Login</a></li>
<li><a href="register.php" >Register</a></li>
</ul>'; } ?>
<div class="cart box_1">
<a href="checkout.html">
<h3> <div class="total">
<span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div>
<img src="images/cart.png" alt=""/></h3>
</a>
<p>Empty Cart
</p>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="head-top">
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div>
<div>
<h1 class="title">Welcome
<?php
if(isset($_SESSION['status']))
{
echo $_SESSION['unm'];
}
else
{
echo 'Book Store';
}
?>
</div>
<div class=" h_menu4">
<ul class="memenu skyblue">
<li class="active grid"><a class="color8" href="index1.php">Home</a></li>
<li><a class="color1" href="#">Categories</a>
<div class="mepanel">
<div class="row">
<?php
$query="select * from category ";
$res=mysqli_query($conn,$query);
while($row=mysqli_fetch_assoc($res))
{
echo' <div class="col1">
<div class="h_nav">
<ul>';
echo '<li>
<a href="subcat.php?cat='.$row['cat_id'].'&catnm='.$row["cat_nm"].'">'.$row["cat_nm"].'
</a>
</li>';
}
echo' </ul>
</div>
</div>';
mysqli_close($conn);
?>
<li><a class="color6" href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
The problem is when I try to open the files from localhost only the header of the page appears so this is the result:
How is it possible that the form doesnt appear?
I assume, that your header.php begins a proper html page with doctype, <html> etc... but after
<?php include "header.php"; ?>
you start your html file again:
<html>
<head></head>
<body>
Make sure your markup is valid!
So it looks like your header file isn't a header, it's a complete HTML document. It opens the document (<html>) and then closes it (</html>). So it makes sense that any HTML you put after including the header won't get rendered - the browser will render the header and assume the document is complete.
Instead you header file should end where the markup for the header ends. Usually this is the opening tag for the container of your content.
Then when you include the header file, it will contain all the markup up to where your content begins, and in your form's file you can put the code for the form and it'll get rendered next.
In your case, try removing the </body> and </html> tags from the header file. That will likely work, though your markup will likely need to be updated to make the design coherent. Also, since those are being created by your header, remove the <html>, <head></head>, and <body> tags from your form's file.
You can also create a footer file that you can include after your form content, and it will close the container and the body and html tags.
Edit
May have scrolled to the end of the first code block when I saw the </body></html>, so you can probably disregard the advice to remove them from the header file - they appear to be there only in my imagination. Removing the opening <html>, <body>, and <head> tags from the from file should do the trick however.
My favicon will not show up on three different web browsers opera, Firefox, and Chrome and I have cleared cookies and cache so it’s not that. This started happening after I pointed my noip my domain name. What did I do wrong? How can I fix it?
http://404tool.dns.net has the favicon
http://404tool.com favicon is gone
<?php
session_start();
include('inc/config.php');
include('inc/functions.php');
BlockIP();
LoggedInTrue();
?>
<html>
<head>
<title>404Tool - Home</title>
<link rel="icon"type="image/ico"href="img/favicon.ico">
<link rel="stylesheet" href="css/main.css" type="text/css"
media="screen" />
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="menu">
<div id="menu-header">
<div id="title">
<span>404</span>Tools
</div>
</div>
<div id="menu-account">
<div id="account-info">
<table>
<tr>
<td>User</td>
<td><span><?php echo $_SERVER['REMOTE_ADDR']; ?></span></td>
</tr>
<tr>
<td>Level</td>
<td><span>Guest</span></td>
</tr>
</table>
</div>
</div>
<div id="menu-menu">
<div class="menu-news">
<h2 class="current">Home</h2>
</div>
<div id="menu-login">
<ul>
<li id="loginstrip"class="current">Login</li>
<div id="dropdown">
<form method="POST">
<div id="dropdown-strip">
<div id="dropdown-text">
<input type="text" name="username" placeholder="Username" autocomplete="off" />
</div>
</div>
<div id="dropdown-strip">
<div id="dropdown-text">
<input type="password" name="password" placeholder="Password" autocomplete="off" />
</div>
</div>
<div id="dropdown-strip2">
<div id="dropdown-text">
<span id="loginbutton"><input type="submit" value="Login" name="login" /></span>
</div>
</div>
<?php Login(); ?>
</form>
</div>
</ul>
</div>
</div>
</div>
</div>
<div id="main-news">
<div id="main-header">
<div id="main-title">
Home
</div>
</div>
<div id="main-content-news">
This is a Private Service and accounts are created by filling out the form below. Please wait 48 hours for the account to be created before submitting another account request!
</div>
<div id="main-content-news">
<div id="box">
<br />
<br />
<div id="box-header">
</div>
<div id="box-content">
<div id="box-title">
</div>
</div>
<div id="box-content">
It currently looks like you are serving different version of the app. Look at the source code from each of those sites and you'll see that 404tools.com does not have a favicon link in the <head>...</head>
http://404tools.ddns.net/:
<head>
<title>404Tools - Home</title>
<link rel="icon" type="image/ico" href="img/favicon.ico">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
</head>
http://404tools.com/
<head>
<title>404 tools</title>
<meta name="keywords" content="email bomber, skype resolver, skype, 404, tools, sms bomber, geo location, ip logger,">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css"></style>
</head>
The following is the HTML of the page that I want to restrict for regular users.
When someone tries to access this page then he/she must be logged in to view the details of the page. Please guide in this regards. How can I do that?
<head>
<title>Welcome to ULTRATEC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<!-- Cufon -->
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/myradpro.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1')('h2')('h3')('h4')('div.menu li');
</script>
<!-- flash script -->
<script type="text/javascript" src="js/flash_detect.v1.7.js"></script>
</head>
<body>
<div class="main">
<div class="header">
<div class="rss"><img src="images/logomain.png" width="218" border="0" /></div>
<div class="search">
<form id="form1" name="form1" method="post" action="">
<span>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
</span>
<input name="b" type="image" src="images/search.gif" class="button" />
</form>
</div>
<div class="clr"></div>
<div class="menu">
<div class="logo"><img src="images/logo.png" width="205" height="88" border="0" alt="logo" /></div>
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Inquiry form</span></li>
<li><span>Contact Us</span></li>
</ul>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div id="slider">
<!-- start slideshow -->
<div class="flash_slider">
<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
'width', '100%',
'height', '400',
'src', 'piecemakerNoShadow',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer_de',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'transparent',
'devicefont', 'false',
'id', 'piecemakerNoShadow',
'bgcolor', '#ffffff',
'name', 'piecemakerNoShadow',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'piecemakerNoShadow',
'salign', ''
); //end AC code
</script>
</div>
<div class="clr"></div>
<!-- end #slideshow -->
<div class="click_blog">
<div class="clr"></div></div>
</div>
<div class="clr"></div>
<div class="body">
<div class="body_resize">
<div class="right">
<h2>About Us<br /></h2>
<div class="left"><img src="images/online-order.png" border="0" /></div>
<p>The creation ultra tec dates back to 2001. The company has significantly and speedly grown to its current stature. We firmly and sincerely believe in quality. We reliably cater to various industrial sectors. Our major focus revolnes around the following: -</p>
<div>
<ul>
<li><strong>Strapping Solutions</strong></li>
<li><strong>Strapping Tools</strong></li>
<li><strong>Gluing Tachnology</strong></li>
</ul>
<ul>
<li><strong>Labelling & Packaging Glues</strong></li>
<li><strong>Case Palletising</strong></li>
<li><strong>Metal Marking Solutions</strong></li>
</ul>
<ul>
<li><strong>Screen Printing Mesh</strong></li>
<li><strong>Screen Printing Blades</strong></li>
</ul>
</div><div class="clr"></div>
<br /><br /><br /><br />
</div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Use Sessions
If the session is set, he's logged in. When he logs out, destroy the session.
Set the session when you login:
session_start();
$_SESSION['username'] = $_POST['username'];
Then on the restricted page do something like this:
session_start();
if (!isset($_SESSION['username'])) {
//redirect to where people who are not logged in should be.
} else {
//access to the page.
}
You need to have somthing like this:
Login page:
<?php
session_start() ;
(Here you check login data .If this login data is ok set username on session)
$_SESSION['username']= $username;
?>
On user page:
<?php
session_start();
if(isset($_SESSION['username'])){
echo "Hello ".$_SESSION['username'];
}
else
{
die("You don't have acces on this page");'
}
?>