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
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 have a problem. I created this code that shows products from my database like products:
<?php
include("connect.php");
session_start();
$status="";
if (isset($_POST['id']) && $_POST['id']!="")
{
$Id = $_POST['id'];
$result = mysqli_query($conn,"SELECT * FROM Producten WHERE `Id`='$Id'");
$row = mysqli_fetch_assoc($result);
$naam = $row['Naam'];
$id = $row['Id'];
$prijs = $row['Prijs'];
$foto = $row['Foto'];
$winkelwagen_array = array(
$id=>array(
'id'=>$id,
'naam'=>$naam,
'prijs'=>$prijs,
'hoeveelheid'=>1,
'foto'=>$foto)
);
if(empty($_SESSION["winkelwagen"]))
{
$_SESSION["winkelwagen"] = $winkelwagen_array;
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
else
{
$_SESSION["winkelwagen"] = array_merge($_SESSION["winkelwagen"],$winkelwagen_array);
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
}
?>
<html>
<head>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>
<div style="width:700px; margin:50 auto;">
<?php
if(!empty($_SESSION["winkelwagen"]))
{
$winkelwagen_hoeveelheid = count(array_keys($_SESSION["winkelwagen"]));
?>
<div class="winkelwagen_div">
<img src="media/winkelwagen_logo.png" /> Winkelwagen<span><?php echo $winkelwagen_hoeveelheid; ?></span>
</div>
<?php
}
$result = mysqli_query($conn,"SELECT * FROM Producten");
while($row = mysqli_fetch_assoc($result))
{
echo "<div class='product_vak'>
<form method='post' actie=''>
<input type='hidden' name='id' value=".$row['Id']." />
<div class='foto'><img src='".$row['Foto']."' /></div>
<div class='naam'>".$row['Naam']."</div>
<div class='prijs'>€".$row['Prijs']."</div>
<button type='submit' class='koop'>Koop nu</button>
</form>
</div>";
}
mysqli_close($conn);
?>
<div style="clear:both;"></div>
<div class="melding_box" style="margin:10px 0px;">
<?php echo $status; ?>
</div>
</div>
</body>
</html>
with this css:
.product_vak {
float:left;
padding: 10px;
text-align: center;
}
.product_vak:hover {
box-shadow: 0 0 0 2px #e5e5e5;
cursor:pointer;
}
.product_vak .naam {
font-weight:bold;
}
.product_vak .koop {
text-transform: uppercase;
background: #F68B1E;
border: 1px solid #F68B1E;
cursor: pointer;
color: #fff;
padding: 8px 40px;
margin-top: 10px;
}
.product_vak .koop:hover {
background: #f17e0a;
border-color: #f17e0a;
}
.melding_box .box{
margin: 10px 0px;
border: 1px solid #2b772e;
text-align: center;
font-weight: bold;
color: #2b772e;
}
.table td {
border-bottom: #F0F0F0 1px solid;
padding: 10px;
}
.winkelwagen_div {
float:right;
font-weight:bold;
position:relative;
}
.winkelwagen_div a {
color:#000;
}
.winkelwagen_div span {
font-size: 12px;
line-height: 14px;
background: #F68B1E;
padding: 2px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: -1px;
left: 13px;
color: #fff;
width: 14px;
height: 13px;
text-align: center;
}
.winkelwagen .verwijderen {
background: none;
border: none;
color: #0067ab;
cursor: pointer;
padding: 0px;
}
.winkelwagen .verwijderen:hover {
text-decoration:underline;
}
But when I load the page I see 2 products above each other in a very very large size. Now how can I get them to load next to each other and in a smaller size, because now they are filling the whole screen per product!
I already tried giving product_vak a width, but the image doesn't size with that!
How can I fix this?
try like this
.product_vak {
float:left;
padding: 10px;
text-align: center;
width:40%;
This question already has answers here:
PHP's white screen of death [duplicate]
Can I mix MySQL APIs in PHP?
(4 answers)
Closed 5 years ago.
I have a problem. When I open my page I get a white page, it does not appear that the page is loading,
I tried php and html without css,
but that did not work either. Hopefully you can help me!
Thanks in advance!
INDEX.PHP
<?php
ini_set('display_errors',1); error_reporting(E_ALL);
file_get_contents("http://d*********/includes/class.database.php");
session_start();
if( !isset($_SESSION['username']) ){
header("location:inloggen.php?login=again");
}
?>
<?php
$conn = mysqli_connect("localhost", "dutchair_bvh", "password") or die("Kon niet verbinden met de server, meld dit aan Job!");
$output = '';
// lucht
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchg = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM dutchair_bvh.burgers WHERE voornaam LIKE '%$searchq%' OR achternaam LIKE '%$searchq%'") or die("Zoeken mislukt");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'Niks gevonden in de politie database!';
} else {
while($row = mysql_fetch_array($query)) {
$voornaam = $row['voornaam'];
$achternaam = $row['achternaam'];
$dob = $row['geboortedatum'];
$id = $row['id'];
}
}
$output .= '<div>'.$voornaam.' '.$achternaam.' '.$dob.'</div>';
?>
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<title>Basisvoorziening Handhaving</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bvh.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://**************6/styles/global.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scaleable=0">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div id="background"></div>
<div id="header">
<div class="logo">Politie <span>Nederland</span></div> <img src="https://i.gyazo.com/92a8831641f752f13707a4e967f2d8c0.png" height="45" width="55">
<div class="logor">Unit Administration <span>System</span></div>
</div>
<form action="" method="post">
<input type="text" name="search" placeholder="Zoek burger">
<input type="submit" class="btn btn2" value="zoek" />
</form>
<?php print("$output");?>
<?php
}
?>
STYLE.CSS
body {
background: #EDEBED
}
input[type=text] {
width: 190px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.6s ease-in-out;
}
input[type=text]:focus {
width: 30%;
}
.btn{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.btn2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.btn2:hover {
background-color: #008CBA;
color: white;
}
GLOBAL.CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic);
#import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
.login-block {
width: 400px;
padding: 20px;
background: #fff;
border-radius: 5px;
border-top: 5px solid #264d73;
margin: 0 auto;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: 'Open Sans';
padding: 0 20px 0 50px;
outline: none;
}
.login-block select {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: 'Open Sans';
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #264d73;
}
.login-block button {
width: 100%;
height: 40px;
background: #264d73;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #264d73;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
font-family: 'Open Sans';
outline: none;
cursor: pointer;
}
.login-block button:hover {
background: #afcee9;
}
/*
.credits {
/*margin-left: 1100px;
margin-top: 470px;
margin-left: -650px;
font-size:20px;
}
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
/*Start of making table*/
/*End of making table*/
div#header{
width: 100%;
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 4px;
margin-left: 10px;
text-decoration: none;
}
.logor {
float: right;
margin-top: 4px;
margin-right: 10px;
text-decoration: none;
}
.logor a span {
font-weight: 300;
text-decoration: none;
}
.logor a {
font-size: 1.6em;
color: #fff;
text-decoration: none;
}
.logoE {
float: left;
margin-top: 4px;
margin-left: calc(100% - 320px);
}
.logoE a {
font-size: 1.5em;
color: #fff;
text-decoration: none;
}
.logoE a span {
font-weight: 300;
text-decoration: none;
}
.logo a {
font-size: 1.6em;
color: #fff;
}
.logo a span {
font-weight: 300;
}
input[type=submit]{
padding:5px 20px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
margin-right:auto;
margin-left:auto;
}
div#login{
width:600px;
margin: 0% auto auto auto;
font-weight: 300;
}
div#txt{
margin-top:10%;
font-family: 'Open Sans';
font-size: 100px;
color: white;
}
div#login1{
width:600px;
margin: 100px auto auto auto;
font-weight: 300;
}
.content {
width: auto;
height: calc(100% - 86px);
/*height: 100%;*/
margin-left: 250px;
background-color: #F0F0F0;
padding: 15px;
}
a.mobile {
display: block;
color: #fff;
background-color: #000;
text-align: centre;
padding: 7px;
}
a.mobile:active {
background-color: #4A4A4A;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
.sidebar {
width: calc(100% + 280px);
display: none;
height: calc(100% + 115px);
}
div#txt{
font-family: 'Open Sans';
font-size: 100px;
color: white;
margin-left: 30%;
}
.content {
margin-left: 0px;
width: calc(100% + 280px);
height: calc(100% + 320px);
/*height: 100%;*/
background-color: #F0F0F0;
padding: 15px;
}
div#header{
width: calc(100% + 280px);
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
a.mobile {
/*display: none;*/
width: calc(100% + 280px);
}
div#login{
margin-bottom: 390px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
.sidebar {
width: calc(100% + 900px);
display: none;
height: calc(100% + 255px);
}
.content {
margin-left: 0px;
height: calc(100% + 500px);
width: calc(100% + 900px);
}
div#txt{
margin-top:1%;
font-family: 'Open Sans';
font-size: 100px;
color: white;
margin-left: 92%;
}
div#header{
width: 100%;
height: 50px;
margin: 0 auto;
}
.content {
width: calc(100% + 900px);
height: calc(100% + 500px);
background-color: #F0F0F0;
padding: 15px;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: auto;
margin: auto;
padding:5px;
width: auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
.search {
margin-left: 0;
margin-top: -30px;
}
.searchBar {
margin-left: 70;
margin-top: 20px;
}
.logoE {
float: left;
margin-top: 4px;
margin-left: calc(100% - 300px);
}
div#header{
width: calc(100% + 900px);
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
.kick {
margin-left: 100px;
margin-top: -30px;
}
.note {
margin-left: 200px;
margin-top: -30px;
}
a.mobile {
width: calc(100% + 900px);
/*display: none;*/
}
div#login{
margin-left: 75%;
margin-top: 20%;
margin-bottom: 40px;
}
}
Hope you guys know what is wrong!
(There are no errors)
Greetings, Job
I am new to this and still learning. So its more of question than answer. I got rid of the last french brace after the print output statment and moved it up to the main php after the you define your $ouput variable. I left he print $output where it was.
I got a search box on the screen. I am not sure why that brace was there at all.
good luck
Here is code:
(i had to comment out lines that were giving me errors for obvious reasons)
<?php ini_set('display_errors',1); error_reporting(E_ALL);
//file_get_contents("http://d*********/includes/class.database.php");
session_start();
if( !isset($_SESSION['username']) ){
// header("location:inloggen.php?login=again");
}
?>
<?php
//$conn = mysqli_connect("localhost", "dutchair_bvh", "password") or die("Kon niet verbinden met de server, meld dit aan Job!");
$output = '';
// lucht
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchg = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM dutchair_bvh.burgers WHERE voornaam LIKE '%$searchq%' OR achternaam LIKE '%$searchq%'") or die("Zoeken mislukt");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'Niks gevonden in de politie database!';
} else {
while($row = mysql_fetch_array($query)) {
$voornaam = $row['voornaam'];
$achternaam = $row['achternaam'];
$dob = $row['geboortedatum'];
$id = $row['id'];
}
}
$output .= '<div>'.$voornaam.' '.$achternaam.' '.$dob.'</div>';
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<title>Basisvoorziening Handhaving</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bvh.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://**************6/styles/global.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scaleable=0">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div id="background"></div>
<div id="header">
<div class="logo">Politie <span>Nederland</span></div> <img src="https://i.gyazo.com/92a8831641f752f13707a4e967f2d8c0.png" height="45" width="55">
<div class="logor">Unit Administration <span>System</span></div>
</div>
<form action="" method="post">
<input type="text" name="search" placeholder="Zoek burger">
<input type="submit" class="btn btn2" value="zoek" />
</form>
<?php print("$output");?>
</body>
</html>
I was hoping to find out how zazzle.com does their hover effect. I want to make an effect like that using pure CSS. I don't need the dropdown just the whole background of my element to change color.
CSS
/* the styles for the HTML elements */
html {
background: repeating-linear-gradient(#f3f3f3 0%,transparent 15%, transparent 90%,#000000 100% ),
url("../Images/bg.jpg") center center no-repeat;
background-size: cover;
height:135%;
}
body {
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
footer{
clear: both;
margin-top: 1em;
padding-right: 1em;
border-top: 2px solid rgb(119, 75, 77);
}
footer p {
text-align: right;
font-size: 80%;
margin: 1em 0;
}
header{
width: 100%;
overflow: hidden;
height: 60px;
line-height: 60px;
position: relative;
background-color: #3a3a3a;
margin: 0;
}
#headerLeft{
width:50%;
float:left;
padding:0;
margin: 0;
}
#headerRight{
width: 50%;
float:left;
text-align: right;
padding:0;
margin: 0
}
li{
display: inline;
}
nav li:hover{
background-color: #ffffff;
}
.floatRight{
}
nav li{
margin: 0;
padding-bottom: .25em;
display: inline;
}
textarea {
width: 25em;
margin-bottom: .5em;
}
table {
border-collapse: collapse;
}
td, th {
margin: 0;
padding: .15em 0;
}
br {
clear: both;
}
/* the styles for the div tags that divide the page into sections */
#content {
float: left;
width: 580px;
padding-bottom: 1.5em;
}
#left_column {
float: left;
width: 150px;
padding-left: .5em;
}
#right_column {
float: left;
width: 300px;
padding-left: 1em;
}
#wrapper{
background-color: #ffffff;
opacity: .6;
margin: 0 auto;
padding: .5em 2em;
}
/********************************************************************
* styles for the classes
********************************************************************/
.right {
text-align: right;
}
.left {
text-align: left;
}
.cart_qty {
text-align: right;
width: 3em;
}
.button_form {
margin: 0;
padding: 0;
float: left;
}
.inline {
display: inline;
margin-left: .5em;
}
/********************************************************************
* Styles for the Product Manager application
********************************************************************/
#category_table form {
margin: 0;
}
#category_table td {
margin: 0;
padding: .15em .5em 0 0;
}
#add_category_form {
margin: 0;
}
#add_category_form input {
margin-right: .5em;
}
#add_admin_user_form label {
width: 8.5em;
}
#edit_and_delete_buttons {
margin-bottom: .5em;
}
#edit_and_delete_buttons form {
display: inline;
}
#image_manager input {
margin: .25em;
}
/********************************************************************
* Styles for the Product Catalog application
********************************************************************/
#product_image_column {
width: 8em;
text-align: center;
}
/*******************************************************************/
#add_to_cart_form {
margin: .25em;
}
#add_to_cart_form input {
float: none;
}
/*******************************************************************/
#cart {
margin: 0;
padding: 1em .25em;
border-collapse: collapse;
width: 100%;
}
#cart_header th {
border-bottom: 2px solid black;
}
#cart_footer td {
border-top: 2px solid black;
font-style: bold;
}
#cart td {
padding: .25em 0;
}
/*******************************************************************/
#login_form label {
width: 5em;
padding-right: 1em;
}
#login_form input[text] {
}
#payment_form label {
width: 8em;
padding-right: 1em;
}
#payment_form input[text] {
width: 5em;
margin: 0;
padding-right: 1em;
}
#add_category label {
text-align: left;
width: 3em;
}
#add_category input {
margin-right: .25em;
}
PHP PAGE
<?php
require_once('model/database.php');
require_once('model/category_db.php');
?>
<!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">
<!-- the head section -->
<head>
<title>Willie's Fishing Supply</title>
<link rel="stylesheet" type="text/css"
href="<?php echo $app_path ?>main.css" />
</head>
<!-- the body section -->
<body>
<header>
<ul>
<section id="headerLeft">
<li>
<a href="<?php echo $app_path; ?>">
<h1>Willie's Fishing Supply</h1>
</a>
</li>
</section>
<section id="headerRight">
<?php
// Check if user is logged in and
// display appropriate account links
$account_url = $app_path . 'account';
$logout_url = $account_url . '?action=logout';
if (isset($_SESSION['user'])) :
?>
<li>
My Account
</li>
<li>
Logout
</li>
<?php else: ?>
<li>
Login/Register
</li>
<?php endif; ?>
<li>
Cart
</li>
</section>
</ul>
</header>
<nav>
<ul><?php
$categories = get_categories();
foreach($categories as $category) :
$name = $category['categoryName'];
$id = $category['categoryID'];
$url = $app_path . 'catalog?category_id=' . $id;
?>
<li>
<a href="<?php echo $url; ?>">
<?php echo $name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<section id = "wrapper">
Try this css
.aj_R-departmentLinks > li:hover {
background: none repeat scroll 0 0 #FFFF00;
}
If you want to change background color on an element use the :hover selector
.element {
background-color: blue;
}
.element:hover {
background-color: red;
}
I have slightly simplified the default index.php file supplied with WAMP, so that it works from any directory/location.
The problem I have is that the order is grouping capitals together.
Eg a, b, c, A, B, C
When I want: A, a, B, b, C, c
<?php
date_default_timezone_set('Europe/London');
$title = 'Project Directory';
$server = 'http://' . $_SERVER['SERVER_NAME'];
$date = date('Y');
//Directory / Files
$dir = '.';
$files = scandir($dir);
$projectsListIgnore = array ('RemoteSystemsTempFiles','icons');
$projectsFileListIgnore = array ('.project');
$projectContents = '';
$projectFileContents = '';
foreach ($files as $file) {
if (is_dir($file) && !in_array($file,$projectsListIgnore) && substr($file,0,1) != '_' && substr($file,0,1) != '.') {
$projectContents .= '<li><a class="arrow external" href="'.$file.'">'.$file.'</a></li>';
}
if (is_file($file) && !in_array($file,$projectsFileListIgnore) && substr($file,0,1) != '_' && substr($file,0,1) != '.') {
$projectFileContents .= '<li><a class="arrow icon iicon external" href="'.$file.'"><em class="ii-download '. pathinfo($file, PATHINFO_EXTENSION) .'"></em>'.$file.'</a></li>';
}
}
$pageContents = <<< EOPAGE
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xml:lang="en">
<head>
<title>{$title}</title>
<meta http-equiv="Content-Type" content="txt/html; charset=utf-8" />
<link href="icons/favicon.ico" rel="icon" type="image/x-icon" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
background: #ddd;
}
body {
margin: 1em 10%;
padding: 1em 3em;
font: 70%/1.4 arial, helvetica, lucida sans, sans-serif;
border: 1px solid #999;
background: #eee;
position: relative;
}
#head {
margin-bottom: 1.8em;
margin-top: 1.8em;
padding-bottom: 0em;
border-bottom: 1px solid #999;
letter-spacing: -500em;
text-indent: -500em;
height: 125px;
}
h2 {
margin: 0.8em 0 0 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.projects, ul.tools, ul.files {
list-style: none;
line-height: 24px;
}
ul.aliases a, ul.projects a, ul.tools a {
display: block;
padding: 1px 0 2px 25px;
background: url(/icons/folder.png) 0 0 no-repeat;
}
ul.files a {
display: block;
padding: 1px 0 2px 25px;
background: url(/icons/generic.png) 0 0 no-repeat;
}
ul.aliases a {
background: url(/icons/forward.png) 0 0 no-repeat;
}
dl {
margin: 0;
padding: 0;
}
dt {
font-weight: bold;
text-align: right;
width: 11em;
clear: both;
}
dd {
margin: -1.35em 0 0 12em;
padding-bottom: 0.4em;
overflow: auto;
}
dd ul li {
float: left;
display: block;
width: 16.5%;
margin: 0;
padding: 0 0 0 20px;
background: url(/icons/pngPlugin.png) 2px 50% no-repeat;
line-height: 1.6;
}
a {
color: #024378;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #04569A;
text-decoration: underline;
}
#foot {
text-align: center;
margin-top: 1.8em;
border-top: 1px solid #999;
padding-top: 1em;
font-size: 0.85em;
}
</style>
</head>
<body>
<div style="margin: 15px 0 0 0; border-bottom:1px solid #999999;">
<h2>Directory Idex</h2>
</div>
<div style="width:50%; float: left; padding: 0 0 15px 10px;">
<h2>Projects</h2>
<ul class="projects">
$projectContents
</ul>
</div>
<div style="width:40%; float: left; padding: 0 10px 15px 10px;">
<h2>Links</h2>
<ul class="tools">
<li class="php">phpinfo()</li>
<li class="phpmyadmin">phpMyAdmin</li>
</ul>
<h2>Files</h2>
<ul class="files">
$projectFileContents
</ul>
</div>
<ul style="clear: both;" id="foot">
<li>© Copyright $date</li>
</ul>
</body>
</html>
EOPAGE;
echo $pageContents;
?>
Try natcasesort (manual) on the $files array before the foreach loop.
Example:
$files = scandir($dir);
natcasesort($files);
foreach ($files as $file) {
// do stuff
}