HTML Website help

**Aylee** · 2014-09-30 17:31

Originally Posted by The Stig

Ah sorry Aylee, didn't realise it created html5 code, or was this another tutorial?

I know exactly what you're trying to achieve, let me have a think, I might've come across a similar script.

I am still finding it strange your instructor wants a SQLite DB, I was explicitly avoiding the route Aevis is suggesting as it seems to be a bit beyond the call of duty. Lets see what the instructor says.

Sorry over looked this at first just noticed it when reading back through the replys looking for a tutoral link. He does want the sqlite database and the webpage linking to it to show results. The tutorial you posted for the content slideshow thingy worked perfect, I was able to change around some things and get it working ty!

**Aylee** · 2014-09-30 17:32

Originally Posted by The Stig

xampp's default directory is htdocs

try http://localhost/netlist-css/getdata.php

oops, I mean neslist

tried it

got the following:

Fatal error: Uncaught exception 'PDOException' with message 'could not find driver' in E:\XAMPP\htdocs\NesList-CSS\getdata.php:7 Stack trace: #0 E:\XAMPP\htdocs\NesList-CSS\getdata.php(7): PDO->__construct('E:\\XAMPP\\htdocs...') #1 {main} thrown in E:\XAMPP\htdocs\NesList-CSS\getdata.php on line 7

**The Stig** · 2014-09-30 17:37

good, that means it worked

now we diagnose that error

**Aylee** · 2014-09-30 17:42

Originally Posted by The Stig

good, that means it worked

now we diagnose that error

i'm missing the PDO Driver for MySQL maybe? looks like one of the suggestions google pops up

**Aevis** · 2014-10-01 01:04

Looks like your Xampp installation isn't the default one from the page. I quickly downloaded it and the test run through. Go into your Xampp folder, there into the php folder and open the php.ini file. Look for for the following line:

Code:

;extension=php_pdo_sqlite.dll

and remove the ; at the start of the line. You can doublecheck if the php_pdo_sqlite.dll actually exists in the php\ext folder. Restart the Apache through Xampp's control panel. If you still get the error message, create an info.php file in your htdocs folder with this content:

Code:

<?php 

phpinfo();

?>

Open it in your browser and it will show you your PHP config. Search for PDO drivers, it should list sqlite amongst others:

and shortly after the pdo_sqlite driver itself:

If not, search for "Loaded Configuration File" and make sure you enabled the pdo_sqlite in the php.ini file it points to:

**Aylee** · 2014-10-01 07:34

Originally Posted by Aevis

Looks like your Xampp installation isn't the default one from the page. I quickly downloaded it and the test run through. Go into your Xampp folder, there into the php folder and open the php.ini file. Look for for the following line:

Code:

;extension=php_pdo_sqlite.dll

and remove the ; at the start of the line. You can doublecheck if the php_pdo_sqlite.dll actually exists in the php\ext folder. Restart the Apache through Xampp's control panel. If you still get the error message, create an info.php file in your htdocs folder with this content:

Code:

<?php 

phpinfo();

?>

Open it in your browser and it will show you your PHP config. Search for PDO drivers, it should list sqlite amongst others:

and shortly after the pdo_sqlite driver itself:

If not, search for "Loaded Configuration File" and make sure you enabled the pdo_sqlite in the php.ini file it points to:

did all this and still getting the same error. Ran the info.php file and got the exact same results as you provided screen shots of. The only differences I noticed were that in loaded configuration my XAMPP is in all caps (yours lower, and shouldn't matter right) and the fact that im using sqlite3 as suggested wouldn't change anything right?

Also I didnt see a php.ini file to edit, Although I do have 2 similar files, 1 called php.ini-development and 1 called php.ini-production ( the extension you mentioned was found in both and i deleted the ; and saved the file in both instances)

**Aevis** · 2014-10-01 08:01

Doesn't matter, it's just the installation path. The pdo_sqlite modul is loading properly, or it wouldn't display in the info.php output. Can you upload your database file? I want to replicate it here.

**Aylee** · 2014-10-01 08:02

Originally Posted by Aevis

Doesn't matter, it's just the installation path. The pdo_sqlite modul is loading properly, or it wouldn't display in the info.php output. Can you upload your database file? I want to replicate it here.

is there a way to upload it onto bg? i can upload here if there is or i have it shared here:

https://drive.google.com/file/d/0B1A...it?usp=sharing

**octopus** · 2014-10-01 08:13

You can upload to BG Box:

http://www.bluegartr.com/box/

**Aevis** · 2014-10-01 08:14

If I put your DB file into the same folder as the getdata.php file and use the following code in getdata.php, it works:

Code:

<?php
 
// Specify your sqlite database name and path //
$dir = 'sqlite:NESCollection.db';
 
// Instantiate PDO connection object and failure msg //
$dbh = new PDO($dir) or die("cannot open database");
 
// Define your SQL statement, myTable = table name in your DB //
$sql = "SELECT * FROM tbl1";
 
// Apply statement //
$statement = $dbh->query($sql);

// Fetch the results // 
$rowset = $statement->fetchAll();

// Show the results //
print_r($rowset);

?>

I'll be in BG chat for a bit, if you need help

**Aylee** · 2014-10-01 08:24

Originally Posted by Aevis

If I put your DB file into the same folder as the getdata.php file and use the following code in getdata.php, it works:

Code:

<?php
 
// Specify your sqlite database name and path //
$dir = 'sqlite:NESCollection.db';
 
// Instantiate PDO connection object and failure msg //
$dbh = new PDO($dir) or die("cannot open database");
 
// Define your SQL statement, myTable = table name in your DB //
$sql = "SELECT * FROM tbl1";
 
// Apply statement //
$statement = $dbh->query($sql);

// Fetch the results // 
$rowset = $statement->fetchAll();

// Show the results //
print_r($rowset);

?>

I'll be in BG chat for a bit, if you need help

I jumped in the chat. finally fixed the problem. I didnt have the files in the same folder (the database was in a sub folder instead of 1 level up with the getdata.php. Also I was calling the entire path name and not using sqlite: at the start of it (why i thought that was a good idea idk)

So now all I have to do is link it to my html page?

**Aylee** · 2014-10-01 08:36

My current HTML Code (very bare as I have like 4 different code versions each with random stuff the professor wanted me to do but I didn't want for the actual over all design of the page. Also realized I need to get rid of some shit that was to create the database inside html lol.

Code:

<html>

	<head>
		<link id="pagestyle" href="style.css" rel="stylesheet" type="text/css">
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="js/dw_event.js" type="text/javascript"></script>
		<script src="js/dw_rotator.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			var rotator1 = {
			path:   'images/',
			id:   'r1', // id of image that rotates
			speed:  3000, // default 4500
			images: ["nes.jpg", "snes.jpg", "n64.jpg", "gc.jpg"]
			}
		
			function initRotator() {
				dw_Rotator.setup(rotator1);
			}
		
			dw_Event.add( window, 'load', initRotator);
		</script>
		
	</head>
	
	<body>

		<div id="header">
			<h1>Retro Game Collection</h1>
		</div>

		
		<div id="body">
			
			<img id="r1" src="images/nes.jpg" alt="">

			<h1>NES Titles</h1>
			
			<div id="contentBox" style="margin:0px auto; width:100%">
					
				<div id="column1" style="float:left; margin:3; width:30%;">
					content (scrolls overflow)
				</div>

				<div id="column2" style="float:left; margin:3;width:30%;">
					content (scrolls overflow)
				</div>

				<div id="column3" style="float:left; margin:3;width:30%;">
					content (scrolls overflow)
				</div>
			</div>
			
		</div>

	</body>

	
</html>

getdata.php output:

Code:

Array ( [0] => Array ( [one] => hello! [0] => hello! [two] => 10 [1] => 10 ) [1] => Array ( [one] => goodbye [0] => goodbye [two] => 20 [1] => 20 ) )

**octopus** · 2014-10-01 08:45

I'd encode the result set as json - that way you can directly use it in javascript (replace your last line with):

echo json_encode($rowset);

**Aevis** · 2014-10-01 09:46

What part of your page should be data from the DB? The images themselves or/and the NES titles info?

**octopus** · 2014-10-01 10:01

Actually, after looking at your HTML code, there's no reason not just put everything in the php, and then do a loop and output the table data.

Simple, and it does what you want.

**Aylee** · 2014-10-01 10:30

Originally Posted by Aevis

What part of your page should be data from the DB? The images themselves or/and the NES titles info?

I was planning on putting it inside a table below the content columns (columns will be deleted eventually).

Octopus how would I go about converting over to php? Just add the php tag around it all?

**Aevis** · 2014-10-01 11:01

Yeah but what is "it". I'd start with creating the real database, because once you have that layed out, the output of the data and how to handle it becomes much clearer/easier to approach.

Save your HTML code as .php file. Somewhere inside the <body> tag insert the entire php code from the getdata.php, including the <?php ?> tags.

**Aylee** · 2014-10-01 11:08

Originally Posted by Aevis

Yeah but what is "it". I'd start with creating the real database, because once you have that layed out, the output of the data and how to handle it becomes much clearer/easier to approach.

Save your HTML code as .php file. Somewhere inside the <body> tag insert the entire php code from the getdata.php, including the <?php ?> tags.

OK i'll work on both of these and upload the code/database when finished tyvm for the help

**Aylee** · 2014-10-02 07:56

OK Created a real database, and about to add the html code once i finish it. Note that the database name is the same, but i changed the table from tbl1 to NES (plan to add more databases for things like nes/ps1/GC/ext).

Database link (BG bucket was being a pain): https://drive.google.com/file/d/0B1A...it?usp=sharing

Database Format: varChar(25), varchar(6), smallint

Database output when running getdata.php

Code:

HTML Code:

Code:

<html>

	<head>
		<link id="pagestyle" href="style.css" rel="stylesheet" type="text/css">
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="js/dw_event.js" type="text/javascript"></script>
		<script src="js/dw_rotator.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			var rotator1 = {
			path:   'images/',
			id:   'r1', // id of image that rotates
			speed:  3000, // default 4500
			images: ["nes.jpg", "snes.jpg", "n64.jpg", "gc.jpg"]
			}
		
			function initRotator() {
				dw_Rotator.setup(rotator1);
			}
		
			dw_Event.add( window, 'load', initRotator);
		</script>
		
	</head>
	
	<body>

		<div id="header">
			<h1>Retro Game Collection</h1>
		</div>

		
		<div id="body">
			
			<img id="r1" src="images/nes.jpg" alt="">

			<h1>NES Titles</h1>
			
			<div id="contentBox" style="margin:0px auto; width:100%">
					
				<div id="column1" style="float:left; margin:3; width:30%;">
					content (scrolls overflow)
				</div>

				<div id="column2" style="float:left; margin:3;width:30%;">
					content (scrolls overflow)
				</div>

				<div id="column3" style="float:left; margin:3;width:30%;">
					content (scrolls overflow)
				</div>
			</div>
			
			<?php
				 
				// Specify your sqlite database name and path //
				$dir = 'sqlite:NESCollection.db';
				 
				// Instantiate PDO connection object and failure msg //
				$dbh = new PDO($dir) or die("cannot open database");
				 
				// Define your SQL statement, myTable = table name in your DB //
				$sql = "SELECT * FROM NES";
				 
				// Apply statement //
				$statement = $dbh->query($sql);

				// Fetch the results // 
				$rowset = $statement->fetchAll();

				// Show the results //
				echo json_encode($rowset);

			?>
			
		</div>

	</body>

	
</html>

Running the page works perfectly, excluding the format. My Results:

Spoiler: show

In a unrelated note and im sure its a simple fix just haven't messed with it much I would like the webpage to fill the screen instead of being limited to the specified size by the style sheet, but still maintain the ratios defined by the style sheet. But not actively seeking help with this, last on my priority list and haven't actively been trying to fix it, but if its a simple change this line to this plz let me know lol.
Style sheet:

Code:

#container	{
	width: 900px;
}

#header	{
	width: 900px;
	height:50px;
	font-style: oblique;
	color: Red;
	background-color: #C0C0C0;
	border-bottom: 2px solid #000000;
}

#leftnav	{
	float: left;
	width: 160px;
	height: 500px;
	background-color: #C0C0C0;
	border-right: 2px solid #000000;
}


#body {
	width: 900px;
	height: 1000px;
	color: red;
	background-color: #C0C0C0;
}

#footer {
	wiidth: 900px;
	height: 50px;
	background-color: #C0C0C0;
	color: Red;
	border-top: 2px solid #000000;
}

#CompleteFont {
	color: green;
}

#RareFont {
	color: red;
}

#Column1 {
	overflow: Scroll;
	height:300px;
	width: 100px;
	border: 1px solid black;
}

#Column2 {
	overflow: Scroll;
	height:300px;
	width: 100px;
	border: 1px solid black;
}

#Column3 {
	overflow: Scroll;
	height:300px;
	width: 100px;
	border: 1px solid black;
}

And the last thing that is kind of bothering me. When I went to create the database I tried to define create the nes table as such:

Code:

Create Table NES (Title varchar(25), Rarity varChar(6), Obtained varChar(3));

But everytime i got a syntax error around ); why is that? I changed obtained varChar(3) to smallint and it worked fine (and in hind site this works better) but what was I doing wrong?

**octopus** · 2014-10-02 08:24

Try something like this in a php file and change according to what you want it to look like:

Code:

<?php
	// Specify your sqlite database name and path //
	$dir = 'sqlite:NESCollection.db';
				 
	// Instantiate PDO connection object and failure msg //
	$dbh = new PDO($dir) or die("cannot open database");
				 
	// Define your SQL statement, myTable = table name in your DB //
	$sql = "SELECT * FROM NES";
				 
	// Apply statement //
	$statement = $dbh->query($sql);

	// Fetch the results // 
	$rowset = $statement->fetchAll();
?>

<html>
<body>
	<table>
		<tr>
			<?php foreach ( $rowset as $row ) : ?>
			<td><?=$row['Title']?></td>
			<td><?=$row['Rarity']?></td>
			<td><?=$row['NumCopies']?></td>
			<?php endforeach; ?>
		</tr>
	</table>
</body>
</html>

Thread: HTML Website help

Thread Tools

Similar Threads

Simple HTML issue with my website, need help.

HTML / VBS / Java Script Gurus -- Help Needed!

Latest Threads

Up & Coming Threads

Hottest Threads