webForumDet fria alternativet

Kanske nån som vill hjälpa lite med design

PHP

11 svar · 2 449 visningar · startad av Kamush

Medlem sedan nov. 201311 inlägg
Frågan#1

Jag har hjälpt en kund att bygga upp en databas och nu ska vi ändra utseendet efter ca 2 år.

Vill bara få det fixat så att jag kan släppa det.
Kanske nån av er som kan hjälpa mig så kan jag bjuda på nån öl en fin dag :birp :birp

Koden just nu är (Det är bara på "resultatet" jag vill ändra designen till.):
echo('<tr style="background-color: lightgray;">');
echo('<td nowrap="nowrap"><b>'.substr($row['DefaultShortText'], 0, 200).'</td>');
echo('<td><b>'.(int)$row['NetPriceVAT'].' kr</b></td>');
echo('<td></td>');
echo('</tr>');
echo('<tr><td valign="top" width="20%"><b>Dimension:</b>'.(int)$row['SectionWidth'].'/'.(int)$row['AspectRatio'].'/'.(int)$row['Diameter'].'<br><b>Hastighetsindex:</b>'.$row['SpeedRating'].'<br><b>Typ: </b>'.$type.'<br><b>I lager:</b><font color='.$color.'>'.$lagersaldo.'</div></td>');
echo('<td valign="top" width="20%"><b>Övrigt</b><br>Givetvis ingår montering samt moms i priset.</td>');

Jag bifogar 2 bilder som visar hur det ser ut idag och hur jag vill ha det.

Säg till om jag behöver ge mera information eller behöver klistra in mera av koden.

All data kommer automatiskt från databasen det är bara det att det ska se finare ut. Färgerna spelar egentligen inte nån roll.

Finns det nån själ där ute som har lite tid över??

Nu.pngonskas.pngonskas i förstoring.png
Medlem sedan okt. 2007446 inlägg
#2

Slängde ihop en snabb version som säkert behöver filas lite på

html

<!DOCTYPE html>

<html>
<head>
	<style type="text/css">
	 body{font-size:10px; font-family: arial}
	 #wrapper{width:820px;}
		.product{
			width:190px;
			border:solid 2px #000;
			border-radius:10px;
			background: linear-gradient(to bottom, rgba(255,255,255,0) 89%,rgba(233,244,232,0) 90%,rgba(13,135,0,1) 100%);
		     
			 padding:5px 0 5px 0 ;
			 text-align:center;
			 
			 float:left;
			 margin:5px;
		}
	
		.product h3{
			text-align:left;
			background:#666; 
			color: #fff;
			padding:5px;
			margin:0;
			font-weight:normal;
			text-transform:uppercase;
		 
		}
		.product img{margin:auto; width:125px;}
		
		dl{margin-left:5px; text-align:left; font-size:11px}
		dt{
		float: left; 
		clear: left; 
		width: 100px; 
		/*text-align: right; */
		font-weight: bold;
		text-transform:uppercase;
		}
		dd{
			margin: 0 0 0 105px; 
			padding: 0 0 0.1em 0;
			text-transform:uppercase;}
			
		.priceTag{
			font-size:18px;
			text-transform:uppercase;
			font-weight: bold;
			margin:0 0 5px 0;
		}
		.priceTag span{font-size:20px;}
                
               .stock{color:green;}
               .notinstock {color:red;} 
	</style>

</head>

<body>
 <div id="wrapper">

	<div class="product">
		<img src="dack.png" />
		<h3>185/65/15 Pirelli Carving Edge dubb beg 90% kvar</h3>
		<dl>
			<dt>Dimension:</dt>
				<dd>185/65/15</dd>
			<dt>Hastighetsindex:</dt>
				<dd> - </dd>	
			<dt>Typ:</dt>
				<dd>Vinterdäck</dd>
			<dt>I Lager</dt>
				<dd class="stock">20+</dd>
		</dl>
		
		<p class="priceTag">Pris: <span>850 Kr</span></p>
	</div>
</div>
</body>
</html>

bilden klippte jag från din exempelbild och är 125x 125px. så css är anpassad efter det = något som måste modifieras.

Färgen på lagersaldot är smartare att ändra beroende på lagervärdet direkt i koden
Är det över tex 1 så skriver du ut <dd class="stock">20+</dd>
under 1 <dd class="notinstock">0</dd>

Medlem sedan nov. 201311 inlägg
#3

hmm??

Hej,

Jag får nog skicka in hela koden om du fortfarande kan hjälpa mig med det.
Färgen på lagersaldot ändrar sig redan automatiskt.
Jag får tyvärr ta bort datan som sedan gör att man ser hur det ser ut. Hoppas du förstår ändå!

Målet är att layouten är fin samt att allt kommer in automatiskt in i den från databasen.

Förresten hur lägger man in en kod???

<?php
global $dsn;
$dsn = 'xxx';
global $user;
$user = "xxx";
global $pass;
$pass = "xxx";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Däck</title>

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -400px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -150;
left: -400px; /*position where enlarged image should offset horizontally */

}

.greenfont {
color: #FF0000;
}

.orangefont {
color: #00FF00;
}

</style>

</head>

<body>

<div style="width: 100%; -webkit-box-shadow: 0px 0px #6B6B6B; box-shadow: 0px 0px #6B6B6B; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; color: #131313; font-size: 15px; font-stretch: normal;">

<form action="xxx.php" method="get">
<table width="100%">
<tr>

<?php
function GetOption($column, $doCastToInt, $getName)
{
global $dsn, $user, $pass;
try
{
$dbh = new PDO($dsn, $user, $pass);
// echo "Connect<p>";
}
catch (Exception $e)
{
echo "Unable to connect: " . $e->getMessage() ."<p>";
}
$query = "SELECT Distinct ".$column." FROM Article where Maingroup in (10,20,40) and BranchBalance > 0 order by ".$column;
$stmt = $dbh->prepare($query);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
//echo(var_dump($result));

foreach( $result as $row)
{
	echo('\<option value="'.$row\[$column\].'"');
		
	if(isset($\_GET\[$getName\]) && $\_GET\[$getName\] == $row\[$column\]) 
	{
		echo(' selected ');
	}
	echo('\>');
	if($doCastToInt)
		echo((int)$row\[$column\]);
	else
		echo($row\[$column\]);
	echo('\</option\>');
}
return;

}
?>

<?php
function GetSubgroupOption()
{
/*$dsn = 'xxx';
$user = "xxx";
$pass = "xxx";
*/
try
{
global $dsn, $user, $pass;
$dbh = new PDO($dsn, $user, $pass);
// echo "Connect<p>";
}
catch (Exception $e)
{
echo "Unable to connect: " . $e->getMessage() ."<p>";
}
$query = "SELECT id, Name FROM SubGroup where id in (select subgroup from Article where Maingroup in (10,20,40 ) and BranchBalance > 0) order by Name";
$stmt = $dbh->prepare($query);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
//echo(var_dump($result));

foreach( $result as $row)
{
	echo('\<option value="'.$row\['id'\].'"');
	if(isset($\_GET\['subgroup'\]) && $\_GET\['subgroup'\] == $row\['id'\]) 
		echo(' selected ');
	echo('\>'.$row\['Name'\].'\</option\>');
}

return;

}
?>

<td width="25%">
<strong>Typ</strong><br>
<select name="maingroup" style="width: 100%;"><option value="">alla</option>
<option value="10"
<?php if(isset($_GET['maingroup']) && $_GET['maingroup'] == 10) echo(' selected')?> >Sommardäck
</option>

               \<option value="20"
                         \<?php if(isset($\_GET\['maingroup'\]) && $\_GET\['maingroup'\] == 20) echo(' selected')?\>\>Vinterdäck
               \</option\>

<option value="40"
<?php if(isset($_GET['maingroup']) && $_GET['maingroup'] == 40) echo(' selected')?>>C-Däck
</option>

      \</select\>

</td>
<td width="25%">
<strong>Bredd</strong><br>
<select name="sectionWidth" style="width: 100%;"><option value="">alla</option>
<?php GetOption('SectionWidth',1,'sectionWidth');?>
</select>
</td>
<td width="18%">
<strong>Höjd</strong><br>
<select name="aspectRatio" style="width: 100%;"><option value="">alla</option>
<?php GetOption('AspectRatio',1,'aspectRatio'); ?>
</select>
</td>
<tr>
<td width="18%">
<strong>Tum</strong><br>
<select name="diameter" style="width: 100%;"><option value="">alla</option>
<?php GetOption('Diameter',1,'diameter'); ?>
</select>
</td>
<td width="25%">
<strong>Märke</strong><br>
<select name="subgroup" style="width: 100%;"><option value="">alla</option>
<?php GetSubgroupOption(); ?>
</select>
<!--<option value="B.F. GOODRICH ">B.F. GOODRICH </option><option value="BRIDGESTONE ">BRIDGESTONE </option><option value="CONTINENTAL ">CONTINENTAL </option><option value="COOPER ">COOPER </option><option value="DUNLOP ">DUNLOP </option><option value="FALKEN ">FALKEN </option><option value="FIRESTONE ">FIRESTONE </option><option value="FULDA ">FULDA </option><option value="GAJAH TUNGGAL ">GAJAH TUNGGAL </option><option value="GENERAL ">GENERAL </option><option value="GOODYEAR ">GOODYEAR </option><option value="HANKOOK ">HANKOOK </option><option value="JINYU TIRES ">JINYU TIRES </option><option value="KINGSTAR">KINGSTAR</option><option value="KLEBER ">KLEBER </option><option value="KUMHO ">KUMHO </option><option value="MAXXIS ">MAXXIS </option><option value="MICHELIN ">MICHELIN </option><option value="NANKANG ">NANKANG </option><option value="NEXEN ">NEXEN </option><option value="NOKIAN ">NOKIAN </option><option value="PIRELLI ">PIRELLI </option><option value="ROTALLA">ROTALLA</option><option value="TOYO ">TOYO </option><option value="TYFOON ">TYFOON </option><option value="UNIROYAL ">UNIROYAL </option><option value="VREDESTEIN ">VREDESTEIN </option><option value="YOKOHAMA ">YOKOHAMA </option> </select>-->
</td>
<td width="22%">
<strong>Hastighet</strong><br>
<select name="speedRating" style="width: 100%;"><option value="">alla</option>
<?php GetOption('SpeedRating',0,'speedRating'); ?>
</select>
</td>
<tr>
<td align="left" valign="bottom">
<br>
<input type="submit" value="Visa däck">
</td>
<td align="left" valign="bottom"> </td>
</table>
</form>
<table border="0" cellspacing="0" cellpadding="6" with="100%">

<?
//phpinfo();
function XSSPrevention($str)
{
$str = mb_convert_encoding($str, 'UTF-8', 'UTF-8');
$str = htmlentities($str, ENT_QUOTES, 'UTF-8');
return $str;
}
//var_dump($_GET);
//magic_quotes_gpc = Off;
error_reporting(E_ALL);
ini_set('display_errors', '1');
if (!empty($_GET))
{

if(isset($\_GET\['maingroup'\]))  $maingroup = XSSPrevention($\_GET\["maingroup"\]);
if(isset($\_GET\['sectionWidth'\]))  $sectionWidth = XSSPrevention($\_GET\["sectionWidth"\]);
if(isset($\_GET\['aspectRatio'\]))  $aspectRatio = XSSPrevention($\_GET\["aspectRatio"\]);
if(isset($\_GET\['diameter'\]))  $diameter = XSSPrevention($\_GET\["diameter"\]);
if(isset($\_GET\['subgroup'\]))  $subgroup = XSSPrevention($\_GET\["subgroup"\]);
if(isset($\_GET\['speedRating'\]))  $speedRating = XSSPrevention($\_GET\["speedRating"\]);


//echo($subgroup);

//$dbh-\>beginTransaction();

$query = "SELECT DefaultShortText, SectionWidth, AspectRatio, Diameter, Circumference, SpeedRating, NetPriceVAT, BranchBalance, Maingroup FROM Article where Maingroup in (10,20,40) and BranchBalance\>0 ";

$params = array();
if (!empty($maingroup) && $maingroup !='alla') 
{
	$params\['Maingroup'\] = $maingroup;
}

if (! empty($sectionWidth) && $sectionWidth !='alla') 
{
	$params\['SectionWidth'\] = $sectionWidth;
}

if (! empty($aspectRatio) && $aspectRatio !='alla') 
{
	$params\['AspectRatio'\] = $aspectRatio;
}
if (! empty($diameter) && $diameter !='alla') 
{
	$params\['Diameter'\] = $diameter;
	//echo($params\['inch'\]);
}

if (! empty($subgroup) && $subgroup !='alla') 
{
	$params\['subgroup'\] = $subgroup;
}	

if (! empty($speedRating) && $speedRating !='alla') 
{
	$params\['SpeedRating'\] = $speedRating;
}

foreach ($params as $key =\> $value) 
{
	$query .= sprintf(' AND %s = :%s', $key, $key);
}
$query .= ' Order by NetPriceVAT';
//echo($query);

/\*$dsn = 'xxx';
$user = "xxx";
$pass = "xxx";

*/
try
{
global $dsn, $user, $pass;
$dbh = new PDO($dsn, $user, $pass);
// echo "Connect<p>";
}
catch (Exception $e)
{
echo "Unable to connect: " . $e->getMessage() ."<p>";
}

$stmt = $dbh-\>prepare($query);

/\* Then bind the values to the prepared statement 
 \*/

foreach ($params as $key =\> $value) 
{
	//echo($value.'HEpp');
	// Using bindValue because bindParam binds a reference, which is
	// only evaluated at the point of execute
	$stmt-\>bindValue(':'.$key, $value,PDO::PARAM_STR);
} 
//echo(var_dump($stmt));
$stmt-\>execute($params);
/\* Now we're ready to execute \*/
$result = $stmt-\>fetchAll(PDO::FETCH_ASSOC);
//echo(var_dump($stmt-\>errorInfo()));

foreach( $result as $row)
{
	$type;
	if($row\['Maingroup'\] == 10)
	{
      $type='Sommardäck';
	}
	else if ($row\['Maingroup'\] == 20)
	{
      $type='Vinterdäck';
	}
	else if ($row\['Maingroup'\] == 40)
	{
      $type='C-däck';
	}
	else
	{
      $type=$row\['Maingroup'\];
	}
	
	$lagersaldo;
	$color;
	if ($row\['BranchBalance'\] \> 20)
	{
		$lagersaldo='20+';
		$color='#007F0E';
	}
	else
	{
		$lagersaldo='Få kvar';
		$color='#FF6A00';
	}
	
	
	echo('\<tr style="background-color: lightgray;"\>');
	echo('\<td nowrap="nowrap"\>\<b\>'.substr($row\['DefaultShortText'\], 0, 22).'\</td\>');
	echo('\<td\>\<b\>'.(int)$row\['NetPriceVAT'\].' kr\</b\>\</td\>');
	echo('\<td\>\</td\>');
	echo('\</tr\>');
	echo('\<tr\>\<td valign="top" width="20%"\>\<b\>Dimension:\</b\>'.(int)$row\['SectionWidth'\].'/'.(int)$row\['AspectRatio'\].'/'.(int)$row\['Diameter'\].'\<br\>\<b\>Hastighetsindex:\</b\>'.$row\['SpeedRating'\].'\<br\>\<b\>Typ: \</b\>'.$type.'\<br\>\<b\>I lager:\</b\>\<font color='.$color.'\>'.$lagersaldo.'\</div\>\</td\>');
	echo('\<td valign="top" width="20%"\>\<b\>Övrigt\</b\>\<br\>Givetvis ingår montering samt moms i priset.\</td\>');
	//echo('\<td valign="top" align="right"\>\<a class="thumbnail" href="#thumb"\>\<img src="/img/'.'QQQ'.'.jpg" width="88px" height="120px" border="0" /\>\<span\>\<img src="/img/'.'QQQ'.'.jpg" /\>\</span\>\</a\>\</td\>');
	echo('\</tr\>');
}

}
?>
</table>
</div>
</body>
</html>

Medlem sedan nov. 201311 inlägg
#4

Tack tack tack tack
Kollade genom och använde ditt med mitt.
Blev riktigt bra!!!

Medlem sedan nov. 201311 inlägg
#5

2 små ändringar till om det du/ni kan hjälpa mig

Ibland hoppar sorteringen mera. Se bilden så förstår ni.

Färgen i lagersaldot ändrar sig men drar med HELA texten.
Felet ser man också direkt på bilden.
--------------------------------------------------

Koden är nu följande:

body{font-size:10px; font-family: arial}
	 #wrapper{width:820px;}
		.product{
	width: 190px;
	border: solid 2px #000;
	border-radius: 10px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 89%,rgba(233,244,232,0) 90%,rgba(13,135,0,1) 100%);
	padding: 5px 0 5px 0;
	text-align: center;
	float: left;
	margin: 5px;
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
		}
echo('<div class="product">');
		echo('<img src="bildsaknasu.png" />');
		echo('<h3> '.substr($row['DefaultShortText'], 0, 100).'<br></br></h3>');
		echo('		<dl>
			<dt>Dimension:</dt>
				<dd>'.(int)$row['SectionWidth'].'/'.(int)$row['AspectRatio'].'/'.(int)$row['Diameter'].'</dd>
			<dt>Hastighetsindex:</dt>
				<dd>. '.$row['SpeedRating'].'</dd>	
			<dt>Typ:</dt>
				<dd>'.$type.'</dd>
			<dt>I Lager</dt>
				<dd><font color='.$color.'>'.$lagersaldo.'</dd>
		</dl>
		
		<p class="priceTag">Pris: <span>'.(int)$row['NetPriceVAT'].' kr</span></p>');
Skärmavbild 2013-11-10 kl. 19.04.38.pngSkärmavbild 2013-11-10 kl. 19.09.08.png
Medlem sedan nov. 201311 inlägg
#6

Höjden löste jag. Bara nu färgen kvar.

Medlem sedan okt. 2007446 inlägg
#7

Att färgen följer med beror på att du faktiskt säger åt den att göra det.
Du stänger nämligen aldrig din font-tagg.

Jag skulle rekommendera att du ändrar metod där. exempelvis att du istället för att sätta variabeln "color" sätter en css-klass (som du INTE döper till en färg)

if ($row['BranchBalance'] > 20)
{
$lagersaldo='20+';
$color='#007F0E';
}

ändras till

if ($row['BranchBalance'] > 20)
{
$lagersaldo='20+';
$saldoCss='instock'; // alternativt "notinstock"
}

och sen

<dt>I Lager</dt>
                <dd class="'.$saldoCss.'">'.$lagersaldo.'</dd>

ja sen måste du såklart fixa dessa css-klasser, men det är ju gjort i en handvändning
.instock{color:#007F0E}
.notinstock{color:#FF6A00}

Att "rubriken" ändrar höjd beror på att den inte har någon höjd satt, ett litet förbiseende av mig. ta dock bort de där <br> du har där.. de kommer stöka till saker

lägg till height:32px; i css:en för h3 så skall det funka

Medlem sedan nov. 201311 inlägg
#8

Det hjälpte ej.
Färgen bytas ej.

Medlem sedan nov. 201311 inlägg
#9

Ändrade exakt som du skrev.

Medlem sedan nov. 201311 inlägg
#10

Det gick visst. Du hade rätt.

Kan du hjälpa mig med en SISTA sak??
Om det finns inte värde i ex. hastighetsindex så hoppar hela raden fram. Hur skriver om det om det inte finns nåt ska det stå tomt.

Medlem sedan okt. 2007446 inlägg
#11

Gör en koll på det innan du skriver ut det
$speedrating=$row['SpeedRating'];
if ($row['SpeedRating'] == null) // Eller ' ' eller under en viss längd
{
$speedrating=' - ';
}

och sen skriva ut $speedrating istället för $row['SpeedRating']

Medlem sedan nov. 201311 inlägg
#12

PERFEKT.

276 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
130 ms — deklarationer (db)
0 ms — hämta statistik (cache)
142 ms — hämta tråd, inlägg och bilagor (db)
128 ms — ändringar (db)