Related
I have a table called admin tickets. I have this situation were one of these mails, which are on the left of the screen is clicked. Then I want to fetch subject/text, to this mail.
For example I'm clicking qweqweqwe#wp.pl, and it gives me 123123123123123.
The table looks like this:
For now the page looks like this, because I'm iterating over the whole table to the end. This looks good. The only change I want to make is as I said, I want to click the mail on the left, and get subject/text of this mail.
How can I achieve it?
Html+php:
<?php
require_once '../../services/LoggedInUserService.php';
require_once '../../services/LoggedInAdminService.php';
require_once '../../db/connect.php';
$connect = new mysqli($host, $db_user, $db_password, $db_name);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="../../css-images/style-admintickets.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"><img src="../../css-images/dingdog-logo.png"></ul>
<ul class="main-nav">
<li style="padding-left:10px">TICKETS</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
$subject = $row['subject']; ?>
<label> <input readonly id="fi" style="margin-top: 50px;" type="text" placeholder="Example"
name="custom" value="<?php echo $emailLogin; ?>"></label><br>
<div class="container" style='position:absolute;left:0px; top:0px;'>
<h1 id="avatar">Title:</h1>
<div class="title" style='position:absolute;left:0px; top:0px;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'><?php echo $subject; ?></h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style='margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;' rows="5" cols="10"><?php echo $row['text']; ?></textarea>
</div>
<?php }
} ?>
</article>
</section>
</header>
<footer>
<img src="../../social/instagram.png"/>
<img src="../../social/twitter-white-logo.png"/>
<img src="../../social/facebook.png"/>
</footer>
</body>
</html>
Css:
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign
{
margin-top: 200px;
margin-left: 80px;
font: Bold 57px/46px Georgia;
font-weight: bold;
color: black;
}
article input
{
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 120;
border-style: none;
padding: 5px;
width: 240px;
height: 39px;
background-color: black;
}
#fi
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 161px;
}
.container {
margin-top: 300px;
height: 447px;
width: 1028px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 480px;
}
.title {
margin-top: 35px;
width: 686px;
height: 37px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 145px;
}
#avatar
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
#tytul
{
font: Bold 20px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 8px;
margin-left: 25px;
}
#subject
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
.subjectContainer
{
margin-top: 100px;
height: 264px;
width: 683px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 170px;
border-radius: 20px;
margin-top: 300px;
}
#subjectTitle
{
text-align: left;
font: Regular 20px/24px Arial;
letter-spacing: 0;
color: #000000;
padding-left: 5px;
}
#textare{
height: 600px;
width: 683px;
}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 70%);
background-size:100% 3000px;
width: auto;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 31px/15px Arial;
padding: 5px;
}
#logo img
{
margin-left: 350px;
text-align: center;
width: 500px;
}
#profilesign
{
margin-top: 350px;
font-size: 90px;
margin-left: 360px;
width: 900px;
}
#tytul
{
font: Bold 40px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 20px;
margin-left: 25px;
}
#subjectText
{
font-size: 40px;
}
#fi
{
width: 500px;
margin-top: 500px;
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 401px;
}
.container {
margin-top: 1000px;
height: 847px;
width: 1228px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 20px;
}
.subjectContainer
{
margin-top: 150px;
height: 564px;
width: 883px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
border-radius: 20px;
}
#avatar
{
font: Bold 55px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 40px;
}
#subject
{
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 5px;
}
.title {
margin-top: 55px;
width: 686px;
height: 67px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
}
}
Hope This will help you
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
echo '<form>
<label> <input id="fi" style="margin-top: 50px;" type="submit" placeholder="Example"
name="custom" value="'.$emailLogin.'"></label><br>
</form>';
}
}?>
<?php
if(isset($_GET['custom']))
{
$text = $_GET['custom'];
$result2 = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin = '".$text."' ");
if ($result2->num_rows > 0) {
while ($row = $result2->fetch_assoc()) {
echo ' <div class="container" style="position:absolute;left:0px; top:0px;">
<h1 id="avatar">Title:</h1>
<div class="title" style="position:absolute;left:0px; top:0px;">
<h1 id="tytul" style="position:absolute;left:0px; top:0px;">'.$subject.'</h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style="margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;" rows="5" cols="10">'.$row['text'].'</textarea>
</div>';
}
}
}
?>
</article>
</section>
I would probably use Ajax for this, and then get the information that way. So when you click one of the mails on the left, then you make a Ajax call to another .php, like this.
Lets say the mail is this image.
echo'<img class="MAILyouWantToAttach" data-id = "'.$MAILyouWantToAttach.'" src = "../text.png">';
The Ajax success respons has to change the textareas content by its value.
$(document).on("click", ".Unflagging", function(){
var text= $(this).data("id");
$.ajax({
method: "post",
url: "AnotherFile.php",
data: { text: text},
success: function(data) {
$("#myTextarea").val(data);
},
error: function(data) {
alert("Error occurs!")
}
});
});
Then the other php file you want something like this, the echo is to print the text in the success area of the Ajax in the other .php.
$receiver = $_POST["text"];
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin= $receiver ");
while ($row = $result->fetch_assoc()) {
echo $row['text'];
}
This is just a guide, but i hope it helps you on your way to success.
I am trying to make a web application in PHP and I have designed my initial index.php with a login page with other header and footer design.
I want to keep the header and footer design throughout the pages and just want to change the included .phpfile as per the user redirection.
Please see the snippets below.
P.S. it is not complete code and it is work in progress.
session_start();
ob_start();
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: private');
require_once ('lib/php/connection.php');
require_once ('lib/php/global.php');
require_once ('lib/php/session.php');
require_once ('lib/php/function.php');
$aController = array_values( array_diff( explode('/', $_SERVER['REQUEST_URI']), explode('/', $_SERVER['SCRIPT_NAME'])));
if (isset($aController[0])) {
switch (strtolower($aController[0])) {
/*case 'login';
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
break;*/
case 'forgot-password';
$setPage = 'dir_content/forgotPassword.php';
$setTitle = 'Forgot your password';
break;
default:
$setPage = 'dir_content/error.php';
$setTitle = '404 Error';
break;
}
} else {
//for all the default cases
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo '<title>';
if (isset($setTitle)) {
echo $setTitle;
echo ' - ';
}
echo D_COMPANY_NAME;
echo '</title>';
if (defined ('D_PROJECT_TITLE')) {
echo '<meta name="project-title" lang="en" content="'.htmlspecialchars(D_PROJECT_TITLE, ENT_QUOTES).'" />';
}
if (defined ('D_PROJECT_DESCRIPTION')) {
echo '<meta name="project-description" lang="en" content="'.htmlspecialchars(D_PROJECT_DESCRIPTION, ENT_QUOTES).'" />';
}
echo '<meta name="publisher" content="'.htmlspecialchars(D_COMPANY_OWNER, ENT_QUOTES).'" />';;
echo '<meta name="copyright" content="'.htmlspecialchars(D_COMPANY_NAME, ENT_QUOTES).'" />';
?>
<meta name="author" content="Saurabh Gupta, IT System Developer # Somex Automation Ltd." />
<meta name="language" content="english" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/custom.css"/>
<script language="JavaScript" type="text/javascript" src="lib/js/modernizr.custom.18450.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/js/cookie.js" ></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.min.js" ></script>
<script language="JavaScript" type="text/javascript" >
<!-- Google Tag, Hotjar Tag -->
</script>
</head>
<body>
<?php
$aBgImages = array(
'signup_bg.png'
);
?>
<div id="header"<?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front" style="background-image: url(gfx/'.getRandomImage($aBgImages).'"' : ''); ?>>
<div id="top">
<div id="nav">
<?php
echo '<div id="logo-position">';
echo ' <img src="gfx/logo.png" style="margin-left: 10%; margin-top: 2%; padding-bottom: 20px;" />';
echo '» Home';
echo '</div>';
?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="wrapper" <?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front"' : ''); ?>>
<?php
include ($setPage);
?>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
<div id="copyright">
<span>
<div="footer-back">
Phone: +353 (0) 26 65770 Email: automation#somexautomation.ie<br />
Fax: +353 (0) 26 65780 ©<?php echo date('Y').' '. D_COMPANY_NAME; ?> - Reg No. 584538<br />
</div>
</span>
</div>
</div>
</body>
</html>
My dir_login->index.php is populated on the index.php as a start page.
<?php
/**
* Created by PhpStorm.
* User: sgupta
* Date: 28/09/2017
* Time: 15:46
*/
$pageName = 'dir_login/index.php';
$pageLink = '/';
if (isset($_SESSION['sEmployeeID'])) {
header('Location: /');
exit();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$aErrorClass = ' class="text-error"';
$aError = array();
if (!isset($_POST['employeeID']) || trim($_POST['employeeID']) == '') {
$aError['employeeID'] = 'Please type in your Employee ID';
}
if (!isset($_POST['password']) || trim($_POST['employeeID'])) {
$aError['password'] = 'Please type in your password';
} elseif (!isset($_POST['password']) || (strlen($_POST['password']) < 5)) {
$aError['password'] = 'This password is wrong';
}
if (count($aError) == 0) {
$sQueryLogin = "
SELECT employeeID, name, rate, payRate. password, level, email, type
FROM tblemployees
WHERE employeeID = ? AND
password = ?
";
if ($stmtLogin = $mysqli->prepare($sQueryLogin)) {
$sEmployeeID = $_POST['employeeID'];
$sPassword = $_POST['password'];
$stmtLogin->bind_param('ss', $sEmployeeID, $sPassword);
if ($stmtLogin->execute() === false) {
trigger_error('stmtLogin execution failed '.$stmtLogin->error, E_USER_ERROR);
}
$stmtLogin->store_result();
$numLogin = $stmtLogin->num_rows;
$stmtLogin->bind_result($employeeID, $name, $rate, $payRate, $password, $level, $email, $type);
$stmtLogin->fetch();
if ($numLogin == 1) {
}
}
}
}
//echo 'This Page';
?>
<h1>Log in your Somex Timesheets account</h1>
<form action="<?php echo $pageLink; ?>" method="post" enctype="multipart/form-data" name="loginForm" class="shadow">
<?php echo (isset($sLoginError) ? '<h2 class="text-error">'.$sLoginError.'<h2>' : ''); ?>
<ul>
<li>
<label for="employeeID" <?php echo (isset($aError['employeeID'])? $aErrorClass : ''); ?>>Your Employee ID</label>
<input type="text" name="employeeID" id="employeeID" value="<?php (isset($_POST['employeeID']) ? htmlspecialchars($_POST['employeeID'], ENT_QUOTES) : ''); ?>" />
<?php echo (isset($aError['employeeID']) ? '<div class="info-line">'.$aError['employeeID'].'</div>' : ''); ?>
</li>
<li>
<label for="password"<?php echo (isset($aError['password']) ? $aErrorClass : ''); ?>>Your password</label>
<input type="password" name="password" id="password" />
<div class="info-line"><?php echo (isset($aError['password']) ? $aError['password'].'<br />' : ''); ?>I forgot my password</div>
</li>
</ul>
<div class="clearfix"></div>
<input name="send" type="submit" class="button" value="» Log in"/>
<div class="clearfix"></div>
</form>
The initial page works fine but when I switch to other pages like forgetpassword.phpor error.php, the page gets populated with the code but design is not maintained.
Regardless the undefined links are populating with the design.
The default case in the switch statement is working as per I want but not the other pages.
CSS:
body {
font-size: 12pt;
font-family: Verdana, Geneva, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
h1, h2, h3, label, input, textarea, #nav, .button, #footer, .item, .availability, #place .desc {
font-family: Arial, Helvetica, sans-serif;
}
.button {
padding: 0 20px;
background-color: #ff6801;
font-size: 1.1em;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
display: block;
border: 0;
border-radius: 10px;
}
.button:hover {
background-color: #ff1700;
}
.button.fright {
margin-left: 20px;
}
.fright {
float: right !important;
}
.button.fright {
margin-left: 20px;
float: right;
margin-right: 18%;
margin-top:60px;
}
#wrapper.front {
padding: 100px 0;
}
#footer {
margin-top: 60px;
text-align: center;
padding: 40px 0;
font-size: large;
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
}
#header {
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
}
.shadow {
/*
box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-webkit-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
*/
border: 1px solid #D6D6D6;
}
.text-error, .error {
color: #e84b31;
}
.text-success, .success {
color: #2aa00b;
}
input[type="text"]:disabled, select:disabled {
/*border: 1px solid transparent !important;
background: transparent;*/
cursor: not-allowed;
}
input[type="text"]:disabled:hover, select:disabled:hover {
border: 1px solid #e84b31;
}
input[type="text"], input[type="password"], input[type="file"], textarea {
width: 400px;
}
input[type="text"], input[type="password"], input[type="file"], textarea, select {
font-size: 1em;
border: 1px solid #000;
padding: 10px;
}
select {
padding: 8px 8px 9px !important;
float: left;
}
input[type="checkbox"], input[type="radio"] {
margin: 15px 15px 15px 340px;
float: left;
}
input[type="checkbox"] + label, input[type="radio"] + label {
float: left;
width: 450px !important;
text-align: left;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="file"]:hover, textarea:hover, select:hover,
input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, textarea:focus, select:focus,
input[type="text"]:active, input[type="password"]:active, input[type="file"]:active, textarea:active, select:active {
border: 1px solid #00CC66;
}
input[type="text"], input[type="password"], textarea {
cursor: text;
}
input[type="submit"] {
padding: 0 30px;
cursor: pointer;
}
form {
background-color: #f5f6f6;
border: 1px solid #f1f3f3;
}
form {
border: 0;
padding: 30px;
}
.front form {
width: 920px;
}
.intro {
margin: 40px 0;
text-align: center;
font-size: 1.25em;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
.front .column h2 {
background: #6db7da url(/gfx/arc-small.png) no-repeat center top;
text-align: center;
display: block;
padding: 30px 20px 20px;
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
}
#search h2 {
color: #053c71;
}
#search h2, #search h3 {
margin-bottom: 10px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
h1 {
font-size: 1.6em;
margin-bottom: 40px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h1 + h2, h1 + h3 {
margin-top: -20px;
}
p {
line-height: 200%;
font-size: 1em;
font-family: Verdana, Geneva, sans-serif;
margin: 20px 0;
}
p.warning {
background-color: #f9f99b;
padding: 10px 20px;
}
ul.warning {
line-height: 200%;
font-size: 0.9em;
display: block;
background-color: #f9f99b;
padding: 20px 30px;
list-style: square inside;
margin: 20px 0;
}
ul.warning li.header {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
}
#nav ul {
list-style: none;
display: inline-block;
padding: 0;
overflow: hidden;
margin: 16px 0;
}
#nav ul li {
float: left;
}
strong {
font-weight: bold;
}
i {
font-style: italic;
}
.front p {
margin: 0;
}
#wrapper {
width: 980px;
margin: 0 auto;
padding: 20px 0 100px;
}
#wrapper.front {
padding: 100px 0;
}
label {
display: block;
font-size: 1.1em;
float: left;
width: 300px;
text-align: right;
margin-right: 40px;
line-height: 40px;
}
.front label {
float: none;
width: auto;
text-align: left;
margin-right: 0;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
#menu ul {
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
overflow: hidden;
}
#menu ul li {
float: left;
}
.filter ul {
padding: 20px;
border-top: 1px solid #3cb3e7;
}
.filter ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul {
padding: 20px;
border-top: 1px solid #62a903;
}
#booking ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul li.availability {
padding-top: 15px;
line-height: 140%;
font-size: 1.2em;
text-align: center;
}
#booking ul li.dates {
font-size: 0.8em;
text-align: center;
}
#booking ul li.subtotal-price, .subtotal-price {
padding-top: 10px;
line-height: 140%;
font-weight: bold;
}
#booking ul li.total-price, .total-price {
padding-top: 10px;
line-height: 140%;
font-size: 1.3em;
font-weight: bold;
}
#booking ul li span {
display: block;
float: right;
}
#message-reply ul li {
margin: 0 0 30px 0;
display: block;
}
.filter ul li.item {
font-weight: bold;
padding-bottom: 10px;
line-height: 140%;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
Apologies for my English.
Need help
Added Screenshots: index.php, forgotpassword.php
I am currently trying to make my php, on the same page as the form, display the values correctly and calculate the overall passer rating. My calculations follow the formatting this way:
C = ((# completions/#attempts) *100 -30)/20
Y= ((# yards/#attempts) -3)/4
T = ((#touchdowns/#attempts) *20)
I = 2.375 - (#interceptions/#attempts) * 35
Pass Rating = ((C+Y+T+I)/6) *100
The table that holds the values from the form should have a default value of 0 and below it should print the overall rating of Poor, Good and Great depending on the passer rating.
As you see I have a few issues.
My issues are:
The Passing Rating doesn't default to 0.
My Overall Rating doesn't print whether it is Poor, Good, or Great. It only prints Poor
I was hoping someone can explain this. I have been troubleshooting it for hours now. No luck sadly. ps(overall rating printed twice to see which version I want to use)
Also the snippet won't run the php unless you have php on your comp. Need a server to see it even with the snippet I guess
UPDATE: I put 20 instead of 4 to divide in Y value. That fixed my calculations but not the overall rating.
SECOND UPDATE: I added the line:
if(($_POST['First'] != '') && ($_POST['Last'] != ''))
so that I can keep my defaults for the table.
My last issues is now the Overall Rating displaying the correct label of either Poor, Good or Great
<?php
$first = "";
$last = "";
$completions = 0;
$attempts = 0;
$yards = 0;
$touchdowns = 0;
$interceptions = 0;
$TotalScores = 0;
if(isset($_POST['First'])) {
$first = $_POST['First'];
}
if(isset($_POST['Last'])){
$last = $_POST['Last'];
}
if(isset($_POST['completions'])) {
$completions = $_POST['completions'];
}
if(isset($_POST['attempts'])) {
$attempts = $_POST['attempts'];
}
if(isset($_POST['yards'])){
$yards = $_POST['yards'];
}
if(isset($_POST['touchdowns'])) {
$touchdowns = $_POST['touchdowns'];
}
if(isset($_POST['interceptions'])) {
$interceptions = $_POST['interceptions'];
}
function rating ($com, $att, $yards, $touchd, $inter){
//$C = 0;
//$Y = 0;
//$T = 0;
//$I = 0;
$passRating = 0;
$C = ((($com /$att)*100)-30) / 20;
$Y = (($yards/$att)-3)/4;
$T = ($touchd/$att)*20;
$I = 2.375 - (($inter/$att)*35);
$passRating = (($C + $Y + $T + $I)/6)*100;
return $passRating;
}
if(is_numeric($completions) && is_numeric($attempts) && is_numeric($yards)
&& is_numeric($touchdowns) && is_numeric($interceptions)) {
//if(($_POST['completions'] >0) && ($_POST['attempts'] >0) && ($_POST['yards'] >0)
// && ($_POST['touchdowns'] >0) && ($_POST['interceptions'] >0) ){
if(($_POST['First'] != '') && ($_POST['Last'] != '')){
$TotalScore = rating($completions, $attempts, $yards,
$touchdowns, $interceptions);
//echo $TotalScore;
if ($TotalScore < 85 && $TotalScore >0){
$score = "Poor";
}
elseif($TotalScore >=85 && $TotalScore <90){
$score = "Mediocre";
}
elseif ($TotalScore >=90 && $TotalScore <95){
$score = "Good";
}
elseif ($score >= 95){
$score = "Great";
}
}
//}
}
else {
$score = "Invalid Input!";
//echo $TotalScore;
}
?>
.form-container {
padding-right: 20px;
}
fieldset {
width: 200px;
height: 30px;
padding: 5px;
}
input {
padding-bottom: 5px;
}
#text-container {
margin-top: 100px;
width: 1260px;
height: 400px;
background-color: white;
text-align: left;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
#text-container p {
margin-left: 30px;
font-size: 20px;
}
#text-container h1 {
margin-left: 30px;
color: #4EA24E;
padding-top: 10px;
}
#paragraph {
position: absolute;
width: 1350px;
height: 600px;
border: 1px solid black;
margin-left: 500px;
margin-top: 60px;
}
.signup {
float: right;
height: 600px;
width: 500px;
border: 1px solid black;
background-color: blue;
}
#form-box {
margin-top: 10px;
width: 550px;
height:600px;
maring-left: 0;
float: left;
/*background-color: #B2D1F0;*/
/*border-radius: 30px;*/
/*box-shadow: 0 0 10px black;*/
}
#form-box label {
float: left;
width: 200px;
text-align: right;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-size: 20px;
margin-bottom: 30px;
margin-left: 20px;
}
#form-box input[type="text"] {
margin-bottom: 30px;
height: 20px;
width: 200px;
font-size: 15px;
margin-left: 10px;
box-shadow: 0 0 5px black;
}
.numInput input[type="text"] {
margin-bottom: 30px;
height: 20px;
width: 50px;
font-size: 15px;
margin-left: 10px;
box-shadow: 0 0 5px black;
}
#form-box button {
margin-bottom: 30px;
height: 35px;
width: 100px;
font-size: 25px;
margin-right: 100px;
float: right;
background-color: #4EA24E;
color: orange;
border-radius: 5px;
text-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
font-family: Rockwell, 'Courier Bold', serif
}
#form-box button:hover {
color: gold;
}
#form-box h1{
text-align: left;
margin-right: 65px;
color: #4EA24E;
font-size: 35px;
margin-bottom: 0;
text-shadow: 0 0 1px black;
margin-left: 30px;
}
#form-box h2{
text-align: right;
margin-right: 85px;
color: #114611;
}
#calcContainer {
clear: both;
width: 200px;
height: 500px;
float: left;
margin-top: 600px;
border: 1px solid black;
}
.table {
margin-top: 20px;
}
.table td, .table tr {
border: 1px solid black;
width: 150px;
}
.table h3 {
margin-top: 40px;
}
/*table {
margin-top: 200px;
}
td , tr{
border: 1px solid black;
width: 150px;
}
*/
span {
margin-left: 40px;
}
#screen {
}
html {
margin: 0;
padding: 0;
min-width: 960px;
max-width: 1000px;
background: url(bubbles.jpg) no-repeat;
height: 100%;
background-size: 960px 960px;
//margin-bottom: 100px;
}
#footer {
width:100%;
height:100px !important;
border-top:4px solid black;
background-color:orange;
//position: relative;
//bottom: 0;
margin-bottom: 0 auto;
//position: fixed;
z-index: 10;
clear: both;
margin-top: 500px;
margin-left: 30px;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
body {
margin-bottom: 100px;
margin-right: 30px;
padding: 0;
width: 100%;
height: 100%;
}
h1.name{
/*font-family: Lato, 'Courier Bold', sanserif;*/
font-family: 'KOMIKAX_';
src: url(KOMIKAX_.tff);
font-weight: bold;
font-variant: small-caps;
color: "red";
margin-left: 30px;
text-shadow: 0 0 1px black;
}
#header {
margin-left: 30px;
width:100%;
}
#gradient {
height: 65px;
/* IE 10 */
background-image: -ms-linear-gradient(top, black 0%, orange 100%);
/* Firefox */
background-image: -moz-linear-gradient(top, black, orange);
/* Safari & Chrome */
background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, orange),color-stop(1, black));
box-shadow: inset 0 0 15px black;
}
#nav1 {
list-style: none;
}
#nav2 {
list-style: none;
}
.nav a {
text-decoration: none; /*remove underline*/
text-transform: uppercase;
color: white;
font-family: Rockwell, 'Courier Bold', serif;
font-size: 20px;
padding-bottom: 15px;
}
.nav li {
display: inline;
float: left;
padding: 10px;
}
.nav a:visited {
text-decoration: none;
color: #fff;
}
.nav a:hover {
text-decoration: none;
color: black;
background-color:transparent;
}
.nav a:active {
text-decoration: none;
color: #19A3FF;
}
.container {
margin-left: 30px;
height: 560px;
background-color: black;
width: 1000px;
border-radius: 3px;
float: left;
}
.text-left {
float: left;
padding-left: 30px;
}
.text-right {
float: right;
padding-right: 55px;
}
.text-center {
float: center;
margin: auto 0;
}
.MainImage {
background-image: url(http://cdn2.sportngin.com/attachments/photo/2021/8243/football_large.jpg);
height: 300px;
background-repeat: no-repeat;
width:99.8%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
padding-bottom: 30px;
display: block;
border: 1px solid;
margin-left: 30px;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
h1.title {
color: white;
padding-left: 30px;
padding-top: 10px;
font-size: 60px;
font-family: Rockwell, 'Courier Bold', serif;
font-variant: small-caps;
font-weight: bold;
text-shadow: 0 0 3px black;
margin-bottom: 0;
}
#sub {
color: white;
padding-left: 80px;
font-size: 30px;
font-family: Rockwell, 'Courier Bold', serif;
font-variant: small-caps;
text-shadow: 0 0 8px black;
}
/*.highlight {
/*text-shadow: 0 0 10px #E6FFFF;*/
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
filter: glow(color=#E6FFFF, strength=3);
color: red;
}*/
#sidebar {
height: 1200px;
width: 400px;
float: left;
background-color: #99CC99;
margin-top: 50px;
font-size: 25px;
margin-right: 0;
}
#main-container {
width: 1260px;
height: 230px;
margin-top: 30px;
postion: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
#main-container2 {
width: 1260px;
height: 230px;
postion: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
#columns {
float: left;
width: 370px;
height: 230px;
background-color: #ECF2F8;
text-align: center;
display: inline-block;
vertical-align: top;
margin-left: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
padding-left: 10px;
padding-right: 10px;
border: 1px solid black;
}
#columns-image {
foat: left;
width: 390px;
border: 1px solid black;
height: 230px;
display: inline-block;
margin-left: 18px;
border-radius: 5px;
border: 1px solid black;
}
#bar-left {
height: 230px;
width: 30px;
background-color: blue;
float: left;
margin-right: 20px;
margin-top: 30px;
margin-left: 0;
}
#bar-right {
height: 230px;
width: 30px;
background-color: blue;
float: left;
}
#bullet {
list-style-Type: none;
padding: 0 0 4px 23px;
background: ur(http://www.computerhope.com/arrow.gif) no-repeat left top;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<div id = "screen">
<body>
<h1 class = "name"><font color = "orange" font size = "20px"> Passer Ratings | </font><font size = "12" font color = "#4EA24E"> Monitor Your Results to Improve!</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav1" class= "text-left">
<li><strong>Home</li>
<li>About Us</li>
<li>Teach</li>
<li>Score Board</strong></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><strong>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
<div id = "Main">
<div class = "MainImage">
<h1 class = "title"> Knowing your Strengths and Weaknesses..<br></h1>
<p id = "sub"><font color= "#4DFFFF"><strong> Makes</strong>
</font> a great player... </p>
</div><!-- end MainImage-->
<form id ="form-box" action = 'passrating.php' method = 'post'>
<h1>Calculate Passer Rating<br><br>
<h2>Submit to Review the information </h2>
<label>First Name </label>
<input type="text" name = 'First' placeholder='First'/><br/>
<label>Last Name:</label>
<input type="text" name = 'Last' placeholder='Last'/><br/>
<label>Pass Completions</label>
<input type="text" name = 'completions' value = 0 class = 'numInput'><br/>
<label>Pass Attempts:</label>
<input type="text" name = 'attempts' value = 0><br/>
<label>Total Passing Yards:</label>
<input type="text" name = 'yards' value = 0><br/>
<label>Touchdowns:</label>
<input type="text" name = 'touchdowns' value = 0><br/>
<label>Interceptions:</label>
<input type="text" name = 'interceptions' value = 0><br/>
<button type="reset" value="Reset">Reset</button>
<button type="submit" value="Submit">Submit</button>
</form>
<div class='calcContainer'>
<table class='table' action = 'passrating.php' method = 'post'>
<h3>Totals for Calculations</h3>
<tr> Test Case:<?php echo "\t" .$first. "\t" .$last; ?></tr>
<tr>
<td>Pass Completions </td>
<td width = "20px"><span value = 0><?php echo $completions; ?></td>
</tr>
<tr>
<td>Pass Attempts </td>
<td><span value = 0><?php echo $attempts; ?></td>
</tr>
<tr>
<td>Total Passing Yards </td>
<td><span value = 0><?php echo $yards; ?></td>
</tr>
<tr>
<td>Touchdowns </td>
<td><span value =0><?php echo $touchdowns; ?></td>
</tr>
<tr>
<td>Interceptions: </td>
<td><span value = 0 ><?php echo $interceptions; ?></td>
</tr>
<tr>
<td>Passing Rating: </td>
<td><span value = 0 ><?php echo $TotalScore; ?></td>
</table>
<p value = " ">The Overall Rating is: <?php echo $score; ?></p>
<p value = ""><?php echo "The Overall Rating is: " .$score. "</br>"; ?></p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<div id = "screen">
<body>
<h1 class = "name"><font color = "orange" font size = "20px"> Passer Ratings | </font><font size = "12" font color = "#4EA24E"> Monitor Your Results to Improve!</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav1" class= "text-left">
<li><strong>Home</li>
<li>About Us</li>
<li>Teach</li>
<li>Score Board</strong></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><strong>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
<div id = "Main">
<div class = "MainImage">
<h1 class = "title"> Knowing your Strengths and Weaknesses..<br></h1>
<p id = "sub"><font color= "#4DFFFF"><strong> Makes</strong>
</font> a great player... </p>
</div><!-- end MainImage-->
<form id ="form-box" action = 'passrating.php' method = 'post'>
<h1>Calculate Passer Rating<br><br>
<h2>Submit to Review the information </h2>
<label>First Name </label>
<input type="text" name = 'First' placeholder='First'/><br/>
<label>Last Name:</label>
<input type="text" name = 'Last' placeholder='Last'/><br/>
<label>Pass Completions</label>
<input type="text" name = 'completions' value = 0 class = 'numInput'><br/>
<label>Pass Attempts:</label>
<input type="text" name = 'attempts' value = 0><br/>
<label>Total Passing Yards:</label>
<input type="text" name = 'yards' value = 0><br/>
<label>Touchdowns:</label>
<input type="text" name = 'touchdowns' value = 0><br/>
<label>Interceptions:</label>
<input type="text" name = 'interceptions' value = 0><br/>
<button type="reset" value="Reset">Reset</button>
<button type="submit" value="Submit">Submit</button>
</form>
<div class='calcContainer'>
<table class='table' action = 'passrating.php' method = 'post'>
<h3>Totals for Calculations</h3>
<tr> Test Case:<?php echo "\t" .$first. "\t" .$last; ?></tr>
<tr>
<td>Pass Completions </td>
<td width = "20px"><span value = 0><?php echo $completions; ?></td>
</tr>
<tr>
<td>Pass Attempts </td>
<td><span value = 0><?php echo $attempts; ?></td>
</tr>
<tr>
<td>Total Passing Yards </td>
<td><span value = 0><?php echo $yards; ?></td>
</tr>
<tr>
<td>Touchdowns </td>
<td><span value =0><?php echo $touchdowns; ?></td>
</tr>
<tr>
<td>Interceptions: </td>
<td><span value = 0 ><?php echo $interceptions; ?></td>
</tr>
<tr>
<td>Passing Rating: </td>
<td><span value = 0 ><?php echo $TotalScore; ?></td>
</table>
<p value = " ">The Overall Rating is: <?php echo $score; ?></p>
<p value = ""><?php echo "The Overall Rating is: " .$score. "</br>"; ?></p>
</div>
</div>
</body>
</html>
What I did to fix my issues:
if(is_numeric($completions) && is_numeric($attempts) && is_numeric($yards)
&& is_numeric($touchdowns) && is_numeric($interceptions)) {
//if(($_POST['completions'] >0) && ($_POST['attempts'] >0) && ($_POST['yards'] >0)
// && ($_POST['touchdowns'] >0) && ($_POST['interceptions'] >0) ){
if(($_POST['First'] != '') && ($_POST['Last'] != '')){
// $TotalScore = rating($completions, $attempts, $yards,
// $touchdowns, $interceptions);
if(($_POST['completions'] <0) || ($_POST['attempts'] <0) || ($_POST['yards'] <0)
|| ($_POST['touchdowns'] <0) || ($_POST['interceptions'] <0) ){
$score = "</br></br><strong>Invalid Input!</strong></br>Please Provide non-Negative Numbers.";
}
//echo $TotalScore;
else {
$TotalScore = rating($completions, $attempts, $yards,
$touchdowns, $interceptions);
if($TotalScore < 0) {
$score = "</br></br><strong>Invalid Results</strong></br>Please review over your scores. The Passing Rating shouldn't be negative.";
}
if($TotalScore > 0 && $TotalScore <85){
$score = "Poor";
}
elseif($TotalScore >=85 && $TotalScore <90){
$score = "Mediocre";
}
elseif ($TotalScore >=90 && $TotalScore <95){
$score = "Good";
}
elseif ($TotalScore >= 95){
$score = "Great";
}
}
//}
}
}
You could use my tiny library ValueResolver in this case, for example:
$value = ValueResolver::resolve('', 'default value'); // returns 'default value' because first argument is empty
and don't forget to use namespace use LapaLabs\ValueResolver\Resolver\ValueResolver;
There are also ability to typecasting, for example if your variable's value should be integer, so use this:
$id = ValueResolver::toInteger('6 apples', 1); // returns 6
$id = ValueResolver::toInteger('There are no apples', 1); // returns 1 (used default value)
Check the docs for more examples
i can not get my Login script to login... i have an index.php with a register form and a login form, the register form works perfectly, but it seems like the login form does not get the information from the database when you enter the "login" button, when logging in you is redirectet to "home.php" which wil show your username with help of sessions. but i get this error "Notice: Undefined variable: username in home.php on line 12"... I think its because its not logging in and the session gets an undefined variabel. I just cant find where the problem is
i have a database named "thesozializer"
and the sql for the table is:
CREATE TABLE IF NOT EXISTS users (
id int(11) NOT NULL,
username varchar(255) NOT NULL,
first_name varchar(255) NOT NULL,
last_name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(32) NOT NULL,
sign_up_date date NOT NULL,
activated enum('0','1') NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1;
index.php looks like this:
<?php
mysql_connect("localhost","root","") or die("couldn't connect to database.");
mysql_select_db("thesocializer") or die("couldn't select database");
$reg = #$_POST['reg'];
//declaring variables to prevent errors
$fn = ""; //First Name
$ln = ""; //Last Name
$un = ""; //Username
$em = ""; //Email
$em2 = ""; //Email 2
$pswd = ""; //Password
$pswd2 = ""; // Password 2
$d = ""; // Sign up Date
$u_check = ""; // Check if username exists
//registration form
$fn = strip_tags(#$_POST['fname']);
$ln = strip_tags(#$_POST['lname']);
$un = strip_tags(#$_POST['username']);
$em = strip_tags(#$_POST['email']);
$em2 = strip_tags(#$_POST['email2']);
$pswd = strip_tags(#$_POST['password']);
$pswd2 = strip_tags(#$_POST['password2']);
$d = date("Y-m-d"); // Year - month - day
if ($reg) {
if ($em==$em2) {
// Check if user already exists
$u_check = mysql_query("SELECT username FROM users WHERE username='$un'");
// Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
//Check whether Email already exists in the database
$e_check = mysql_query("SELECT email FROM users WHERE email='$em'");
//Count the number of rows returned
$email_check = mysql_num_rows($e_check);
if ($check == 0) {
if ($email_check == 0) {
//check all of the fields have been filed in
if ($fn&&$ln&&$un&&$em&&$em2&&$pswd&&$pswd2) {
// check that passwords match
if ($pswd==$pswd2) {
// check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
echo "maximum length of username/first name/last name is 25 characters!";
}
else
{
// check the maximum length of password does not exceed 25 characters and is not less than 5 characters
if (strlen($pswd)>30||strlen($pswd)<5) {
echo "Password must be between 5 and 25 characters!";
}
else
{
//encrypt password and password 2 using md5 before sending to database
$pswd = md5($pswd);
$pswd2 = md5($pswd2);
$query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$em','$pswd','$d','0')");
die("<h2>welcome to The Socializer!</h2>Login to get started");
}
}
}
else {
echo "your passwords is incorrect";
}
}
else
{
echo "fill in all fields";
}
}
else
{
echo "email already in use";
}
}
else
{
echo "username already in use";
}
}
else {
echo "The emails is not alike!";
}
}
//User Login Code
if (isset($_POST["user_login"]) && isset($_POST["password_login"])) {
$user_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["user_login"]);
$password_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["password_login"]);
$password_login_md5 = md5($password_login);
$sql = mysql_query("SELECT id FROM users WHERE username='$user_login' AND password='$password_login_md5' LIMIT 1");
//Check for their existance
$userCount = mysql_num_rows($sql); //Count the number of rows returned
if ($userCount == 1) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
}
$_SESSION["user_login"] = $user_login;
header("location: home.php");
exit();
}
else {
echo 'username or password is incorrect';
exit();
}
}
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
$username = $_SESSION["user_login"];
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#registrer-deg").click(function(){
$("#registrerdeg").show();
});
$("#registrer-deg").click(function(){
$("#logginn").hide();
});
$("#logg-inn").click(function(){
$("#logginn").show();
});
$("#logg-inn").click(function(){
$("#registrerdeg").hide();
});
});
</script>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>The Socializer</title>
</head>
<body>
<div id="sidebarLeft">
<div id="logo"></div>
<ul>
<li>Login</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="timeline">
<div id="registrering">
<form id="registrerdeg" action="index.php" method="POST" style="display: none;">
<input type="text" name="fname" size="10" placeholder="First name"><br/>
<input type="text" name="lname" size="10" placeholder="Last name"><br/>
<input type="text" name="username" size="10" placeholder="Username"><br/>
<input type="text" name="email" size="10" placeholder="Email"><br/>
<input type="text" name="email2" size="10" placeholder="Confirm email"><br/>
<input type="text" name="password" size="10" placeholder="Password"><br/>
<input type="text" name="password2" size="10" placeholder="Confirm Password"><br/>
<input type="submit" name="reg" value="Registrer!">
</form>
</div>
<div id="logg_inn">
<form id="logginn" action="index.php" method="POST" style="display: none;">
<input type="text" name="user_login" size="10" placeholder="Username"><br/>
<input type="text" name="password_login" size="10" placeholder="Password"><br/>
<input type="submit" name="login" value="Logg inn!">
</form>
</div>
</div>
</body>
</html>
* {
background-color: #2C3E50;
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
color: #AFEEEE;
}
#sidebarLeft {
width: 220px;
height: 550px;
top: 0;
left: 0;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 50px;
position: fixed;
}
#sidebarRight {
width: 220px;
height: 550px;
right: 0;
top: 0;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
position: fixed;
}
ul {
width: 220px;
list-style-type: none;
margin: 0px;
padding: 0;
margin-top: 30px;
}
li {
height: 35px;
width: 220px;
list-style-type: none;
margin: 5px;
}
#logo {
width: 150px;
height: 150px;
background-image: url("../img/logo.png");
-moz-border-radius: 75px;
-webkit-border-radius: 750px;
border-radius: 75px;
margin-left: 35px;
margin-top: 25px;
}
#sidebarLeft ul li a {
display: block;
width: 60px;
width: 220px;
height: 16px;
text-align: center;
margin-top: 9px;
text-decoration: none;
color: #AFEEEE;
}
#timeline {
width: 780px;
height: 550px;
margin-top: 50px;
margin-left: 240px;
top: 0;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
color: #000000;
font-size: 15px;
font-weight: bold;
padding: 5px;
width: 200px;
height: 12px;
margin-bottom: 3px;
margin-top: 3px;
outline: none;
}
::-webkit-input-placeholder {
font-weight: normal;
}
:-moz-input-placeholder {
font-weight: normal;
}
::-moz-input-placeholder {
font-weight: normal;
}
:-ms-input-placeholder {
font-weight: normal;
}
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #61a6d4;
background: -webkit-gradient(linear, left top, left bottom, from(#316c94), to(#61a6d4));
background: -webkit-linear-gradient(top, #316c94, #61a6d4);
background: -moz-linear-gradient(top, #316c94, #61a6d4);
background: -ms-linear-gradient(top, #316c94, #61a6d4);
background: -o-linear-gradient(top, #316c94, #61a6d4);
padding: 5px 10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
input[type="submit"]:hover {
border-top-color: #49718c;
background: #49718c;
color: #ccc;
}
input[type="submit"]:active {
border-top-color: #1b435e;
background: #1b435e;
}
and home.php looks like this:
<?php
mysql_connect("localhost","root","") or die("couldn't connect to database.");
mysql_select_db("thesocializer") or die("couldn't select database");
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
$username = $_SESSION["user_login"];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<title>The Socializer</title>
</head>
<body>
<div id="sidebarLeft">
<div id="logo">
</div>
<ul>
<li>Logg inn</li>
<li>Registrer deg</li>
<li>Om</li>
<li>Kontakt</li>
</ul>
</div>
<div id="timeline">
<?php echo "Hello, ".$username; ?>
</div>
</body>
</html>
* {
background-color: #2C3E50;
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
color: #AFEEEE;
}
#sidebarLeft {
width: 220px;
height: 550px;
top: 0;
left: 0;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 50px;
position: fixed;
}
#sidebarRight {
width: 220px;
height: 550px;
right: 0;
top: 0;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
position: fixed;
}
ul {
width: 220px;
list-style-type: none;
margin: 0px;
padding: 0;
margin-top: 30px;
}
li {
height: 35px;
width: 220px;
list-style-type: none;
margin: 5px;
}
#logo {
width: 150px;
height: 150px;
background-image: url("../img/logo.png");
-moz-border-radius: 75px;
-webkit-border-radius: 750px;
border-radius: 75px;
margin-left: 35px;
margin-top: 25px;
}
#sidebarLeft ul li a {
display: block;
width: 60px;
width: 220px;
height: 16px;
text-align: center;
margin-top: 9px;
text-decoration: none;
color: #AFEEEE;
}
#timeline {
width: 780px;
height: 550px;
margin-top: 50px;
margin-left: 240px;
top: 0;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
color: #000000;
font-size: 15px;
font-weight: bold;
padding: 5px;
width: 200px;
height: 12px;
margin-bottom: 3px;
margin-top: 3px;
outline: none;
}
::-webkit-input-placeholder {
font-weight: normal;
}
:-moz-input-placeholder {
font-weight: normal;
}
::-moz-input-placeholder {
font-weight: normal;
}
:-ms-input-placeholder {
font-weight: normal;
}
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #61a6d4;
background: -webkit-gradient(linear, left top, left bottom, from(#316c94), to(#61a6d4));
background: -webkit-linear-gradient(top, #316c94, #61a6d4);
background: -moz-linear-gradient(top, #316c94, #61a6d4);
background: -ms-linear-gradient(top, #316c94, #61a6d4);
background: -o-linear-gradient(top, #316c94, #61a6d4);
padding: 5px 10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
input[type="submit"]:hover {
border-top-color: #49718c;
background: #49718c;
color: #ccc;
}
input[type="submit"]:active {
border-top-color: #1b435e;
background: #1b435e;
}
you have to move the session_start();
in both pages at the begin of your script.
index.php:
<?php
session_start();
mysql_connect("localhost","root","") or die("couldn't connect to database.");
...
home.php:
<?php
session_start();
mysql_connect("localhost","root","") or die("couldn't connect to database.");
...
I've created a blog main page using PHP and have included a sidebar and main area for the posts. When I add any more content to either the sidebar or the main content/posts area the content expands over the main div and the main div doesn't expand. How can I go about creating a div tag that will expand according to the content in the inner two divs.
Main Page:
<html>
<head>
<meta name="keywords" content="Mac user Ultan Casey TheCompuGeeks UltanKC">
<meta name="description" content="The Home of one of Ireland's budding Technology Reviewers Ultan Casey">
<title>Ultan.me - Home of Ultan Casey</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<style>
<!--
a {text-decoration:none}
//-->
</style>
</head>
<div id="main">
<!-- Menu Start -->
<div id="menu">
<ul>
<li>home</li>
<li>about me</li>
<li>archives</li>
<li>contact</li>
<li>gallery</li>
<div id="search">
<input type="text" name="q" value="search" />
<input type="button" name="Submit" value="Submit" />
</div>
</ul>
</div>
<!-- Menu End -->
<img src="images/banner.png" />
<div id="posts">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$blog_postnumber = 5;
if (!isset($_GET['page']) || !is_numeric($_GET['page'])) {
$page = 1;
}
else {
$page = (int)$_GET['page'];
}
$from = (($page * $blog_postnumber) - $blog_postnumber);
$sql = "SELECT * FROM php_blog ORDER BY timestamp DESC LIMIT $from, $blog_postnumber";
$result = mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$date = date("l F d Y", $row['timestamp']);
$title = stripslashes($row['title']);
$entry = stripslashes($row['entry']);
$id = $row['id'];
$get_categories = mysql_query("SELECT * FROM php_blog_categories WHERE `category_id` = $row[category]");
$category = mysql_fetch_array($get_categories);
?>
<p><?php echo "<p><strong>" . $title . "</strong></p>"; ?><br /><br />
<?php echo $entry; ?><br /><br />
<p>Posted in <?php echo $category['category_name']; ?> on <?php echo $date; ?></p>
<hr /></p>
<?php
}
?>
<div id="pages">
<?php
$total_results = mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM php_blog"));
$total_pages = ceil($total_results['num'] / $blog_postnumber);
if ($page > 1) {
$prev = ($page - 1);
echo "<< Newer ";
}
for($i = 1; $i <= $total_pages; $i++) {
if ($page == $i) {
echo "$i ";
}
else {
echo "$i ";
}
}
if ($page < $total_pages) {
$next = ($page + 1);
echo "Older >>";
}
?>
</div>
</div>
<!-- Sidebar Start -->
<div class="sidebar">
<!-- Item 1 -->
<div id="side-item">
<h2>
<a href="http://www.dailybooth.com/UltanCasey">
<img src="images/db-icon.jpg">Dailybooth
</a></h2>
<div id="side-item-content">
<center>
<img src="http://dailybooth.com/UltanCasey/latest/medium.jpg" />
</center>
</div>
</div>
<!-- Item 2 -->
<div id="side-item">
<h2><img src="images/connect.jpg" />Connect</h2>
</div>
<div id="side-item-content">
<div class="tweet-title"><p>Latest Tweet:</p></div>
<div id="tweet">
<?php
function getTwitterStatus($userid){
$url = "http://twitter.com/statuses/user_timeline/$userid.xml?count=1";
$xml = simplexml_load_file($url) or die("could not connect");
foreach($xml->status as $status){
$text = $status->text;
}
echo $text;
}
getTwitterStatus("UltanKC");
?>
</div>
<br>
<ul>
<li id="social">YouTube</li>
<li id="social">Twitter</li>
<li id="social">LastFM</li>
<li id="social">Email</li>
</ul>
</div>
<!-- Item 2 End-->
<div id="side-item">
<h2>Archives</h2>
</div>
<div id="side-item-content">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result = mysql_query("SELECT FROM_UNIXTIME(timestamp, '%Y') AS get_year, COUNT(*) AS entries FROM php_blog GROUP BY get_year");
while ($row = mysql_fetch_array($result)) {
$get_year = $row['get_year'];
$entries = $row['entries'];
echo "Entries from " . $get_year . " (" . $entries . ")<br />";
}
?>
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result1 = mysql_query("SELECT * FROM php_blog_categories ORDER BY category_name ASC");
while($row = mysql_fetch_array($result1)) {
$result2 = mysql_query("SELECT COUNT(`id`) AS entries FROM php_blog WHERE category = $row[category_id]");
$num_entries = mysql_fetch_array($result2);
echo '' . $row['category_name'] . ' (' . $num_entries['entries'] . ')<br />';
}
?>
</div>
</div>
</div>
<!-- Sidebar End -->
</div>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
height: 100%;
}
#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
}
#main {
width: 860px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
#menu li {
display: inline;
list-style-type: none;
height: 20px;
margin-top: 10px;
margin-left: 5px;
}
#menu a, menu a:visited{
font-family: arial;
color: #ffffff;
text-decoration: none;
padding: 3px;
}
#menu a:hover{
font-family: arial;
color: #282828;
text-decoration: none;
padding: 3px;
background-color: #ffffff;
}
#search{
float: right;
}
.sidebar {
width: 260px;
height: 100%;
float: right;
margin-right: 4px;
}
#posts {
width: 590px;
height: 100%;
float: left;
}
#side-item h2 {
background-color: #282828;
width: 245px;
height: 30px;
font-size: 25px;
font-family: arial;
color: #ffffff;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
}
#side-item-content{
border:1px solid #dadada;
padding: 5px;
width: 243px;
margin-bottom: 12px;
}
#side-item h2 img {
margin-right: 6px;
float: left;
}
#side-item h2 a:link {
text-decoration: none;
color: #ffffff;
}
#side-item h2 a:hover {
text-decoration: underline;
color: #ffffff;
}
#side-item h2 a:visited {
text-decoration: none;
color: #ffffff;
}
#social {
background-color: #282828;
width: 223px;
height: 20px;
font-size: 20px;
font-family: arial;
color: #ffffff;
display: block;
margin-top: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 10px;
}
/*#social img {
float: left;
padding-top: -12px;
}*/
#social a:link {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
#tweet {
width: 221px;
padding: 10px;
color: #242424;
background-color: #f5f5f5;
border:1px solid #282828;
margin-bottom: -8px;
font-family: arial;
}
#social a:hover{
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: underline;
}
#social a:visited {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
.tweet-title {
background-color: #2dbfe9;
color: #ffffff;
width: 231px;
height: 20px;
border-left:1px solid #282828;
border-right:1px solid #282828;
border-top:1px solid #282828;
font-size: 20px;
padding: 5px;
font-family: arial;
}
.tweet-title a:link, .tweet-title a:visited {
color: #ffffff;
text-decoration: none;
}
.tweet-title a:hover {
color: #2dbfe9;
text-decoration: none;
background-color: #ffffff;
}
#pages {
float: left;
}
Image:
First: Where are your <body> tags?
Ok here is how I made it works. It seems that #pages and #sidebar they should be in separate <div> tag. The code (I deleted PHP from it)
HTML:
<html>
<head>(content)</head>
<body> <!-- never forget about body tags!!!!!!!!!-->
<div id="main">
<!-- Menu Start -->
(...)
<!-- Menu End -->
<div id="content"> <!-- this is new -->
<div id="posts">
(content)
</div>
<div class="sidebar">
(content)
<!-- Sidebar End -->
<div class="clr" /> <this is new>
</div>
</div>
</body>
<
and CSS:
\*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
}
\#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
position: relative;
}
\#main {
width: 860px;
margin: 0 auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
.clr{
clear: both;
}
\#content{
position: relative;
width: 860px;
}
.sidebar {
position: relative;
width: 260px;
float: right;
margin-right: 4px;
}
\#posts {
width: 590px;
position: relative;
float: left;
}
I believe this should do the work.
PS. Shadow doesn't work in Opera.
Best Regards,
ventus