I have made a database using phpLiteAdmin, It has many entries however they are all text or number.
I was wondering if I could add an image section in this database or how else would I do it. The only other way I think I could do it would be by using the href tag and moving it into position. There must be a better way of doing this.
Here is my code of my php and html.
<head>
<link type="text/css" rel="stylesheet" href="Car_Style.css"/>
</head>
<body>
<header id="header" class="loading" style="opacity: 1";]>
<!-- Logo -->
<div id="logo"></div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro">header</a></li>
<li><a href="#one">Header</a></li>
<li><a href="#two">header</a></li>
<li><a href="#work">My Header</a></li>
<li><a href="#contact">Header</a></li>
</ul>
</nav>
</header>
<!-- This is where all the images go from each of the entries -->
</body>
<?php
try {
# Connect to SQLite database
$dbh = new PDO("sqlite:Car_Sales_Network");
# Prepare SQL statement
$sth = $dbh->prepare('SELECT * FROM Cars_On_Network' );
# Set the Fetch Mode to Associative Array
$sth->setFetchMode(PDO::FETCH_ASSOC);
# Run the query on the database
$sth->execute();
//table printout
echo "<table>";
# Loop through returned records
while($row = $sth->fetch()) {
//print_r($row);spot
//print_r($row);
echo "<table>";
echo "<th>Car Make:</th>";
echo "<th>Car Model:</th>";
echo "<th>Car Badge:</th>";
echo "<th>Car Price:</th>";
echo "<th>Car Transmission:</th>";
echo "<th>Car P Plate Legality:</th>";
echo "<div id='1'>";
echo "<tr>";
echo "<td>". $row["car_make"] . "</td>";
echo "<td>". $row["car_model"] . "</td>";
echo "<td>". $row["car_badge"] . "</td>";
echo "<td>". $row["price"] . "</td>";
echo "<td>". $row["trans"] . "</td>";
echo "<td>". $row["P_Plate_Legal"] . "</td>";
echo "</tr>";
echo "</div>";
//echo $row["Game_ID"];
echo "<br>";
}
echo "</table>";
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>
This is my css.
* {
font-family: Arial;
color: black;
}
table {
padding: 20px;
}
th td {
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header ul li {
color:white;
text-decoration: underline;
}
#header {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
background: #000000;
background: rgba(0, 0, 0, 0.95);
height: 3em;
line-height: 3em;
box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1);
}
body {
padding-top: 3em;
}
#logo {
position: absolute;
left: 1em;
top: 0;
height: 3em;
line-height: 3em;
letter-spacing: -1px;
}
#logo a {
font-size: 1.25em;
}
#nav {
position: absolute;
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
Obviously it's not finished but how can I have each car with a picture.
Cheers.
First, you must find a way to store your image.
We don't usually store the binary data of images in database. Instead we store the image files somewhere on your server (or 3rd party CDN).
Then we create a new varchar(255) in the database and store the URL of those images (e.g. http://foobar.com/some/image.jpg). For explanation, let's say we will add a column car_image_url in the said table.
Let's change the PHP code a bit to add the display column:
<link type="text/css" rel="stylesheet" href="Car_Style.css"/>
</head>
<body>
<header id="header" class="loading" style="opacity: 1";]>
<!-- Logo -->
<div id="logo">
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro">header</a></li>
<li><a href="#one">Header</a></li>
<li><a href="#two">header</a></li>
<li><a href="#work">My Header</a></li>
<li><a href="#contact">Header</a></li>
</ul>
</nav>
</header>
<!-- This is where all the images go from each of the entries -->
</body>
<?php
try {
# Connect to SQLite database
$dbh = new PDO("sqlite:Car_Sales_Network");
# Prepare SQL statement
$sth = $dbh->prepare('SELECT * FROM Cars_On_Network' );
# Set the Fetch Mode to Associative Array
$sth->setFetchMode(PDO::FETCH_ASSOC);
# Run the query on the database
$sth->execute();
//table printout
echo "<table>";
# Loop through returned records
while($row = $sth->fetch()) {
//print_r($row);spot
//print_r($row);
/* added these line */
# If the image field is empty, change to dummy image
if (empty($row['car_image_url'])) {
$row['car_image_url'] = 'http://yourdomain.com/some/dummy.jpg';
}
/* // added these line */
echo "<table>";
echo "<th>Car Make:</th>";
/* added this line */
echo "<th>Car Image:</th>";
/* // added this line */
echo "<th>Car Model:</th>";
echo "<th>Car Badge:</th>";
echo "<th>Car Price:</th>";
echo "<th>Car Transmission:</th>";
echo "<th>Car P Plate Legality:</th>";
echo "<div id='1'>";
echo "<tr>";
echo "<td>". $row["car_make"] . "</td>";
/* added this line */
echo "<td><img src=\"". $row["car_image_url"] . "\" /></td>";
/* // added this line */
echo "<td>". $row["car_model"] . "</td>";
echo "<td>". $row["car_badge"] . "</td>";
echo "<td>". $row["price"] . "</td>";
echo "<td>". $row["trans"] . "</td>";
echo "<td>". $row["P_Plate_Legal"] . "</td>";
echo "</tr>";
echo "</div>";
//echo $row["Game_ID"];
echo "<br>";
}
echo "</table>";
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>
Style the CSS whatever you like.