HTML Website help

[Aylee]

I'm working on a html page for one of my classes. Able to do what ever the hell I wanted since its basically just to get familiarized with html/css/jquery/ext. I decided that I wanted to do one to one based around my retro game collection and keep track of what I have. I figured the easiest way to do this was to make a sqlite database and link it to my page. I was wondering if anyone had any experience with it that could offer some useful insight. I've also been trying to add a sliding content banner (kinda like this this) at the top of my page but so far have been unsuccessful. Ideally each slide is just a picture and clicking on the picture links to the respective database.

[The Stig]

I've not dipped my face into web development for a while but to my knowledge you can't access SQLite DBs with HTML only, for that you need to move into PHP land, which will only get far more complex.

In theory, you can according to this: http://stackoverflow.com/questions/1...rom-javascript
But, it seems overly convoluted, plus you need HTML5 knowledge. I think these are way outside of your course.

The site you linked seems to be an image gallery type thing, but doesn't support links... maybe. I've not looked at the code but I feel it might again be too complex to implement.

I think you should keep it simple for now, and only complex it up if you enjoy it. So start off with a basic logo at the top of the page, then have a "Side bar" with a banner to each game. the main page should welcome visitors and explain what the page is for. as you click on a banner on the left, it takes you another page which is a replica of the code of the index page (your "template") and insert some game info and pictures in there.

That should fulfill your requirement. If you're in need to add some jquery to score the marks, consider adding a simple "lightbox" solution to your pics (http://fancybox.net/).

Yes it sounds terribly simple, but I'm unsure of your overall knowledge and one of the quickest way to lose it is to get paralyzed by trying to do all the fancy stuff.

[octopus]

You don't want to expose your database on the web. You need an app server to process the data server side.

But since this is just a class project, I would just fake it and have a static json file storing your games collection. That way you can do your ajax call but you don't actually do any processing in the backend.

[Aylee]

I've not dipped my face into web development for a while but to my knowledge you can't access SQLite DBs with HTML only, for that you need to move into PHP land, which will only get far more complex.

In theory, you can according to this: http://stackoverflow.com/questions/1...rom-javascript
But, it seems overly convoluted, plus you need HTML5 knowledge. I think these are way outside of your course.

The site you linked seems to be an image gallery type thing, but doesn't support links... maybe. I've not looked at the code but I feel it might again be too complex to implement.

I think you should keep it simple for now, and only complex it up if you enjoy it. So start off with a basic logo at the top of the page, then have a "Side bar" with a banner to each game. the main page should welcome visitors and explain what the page is for. as you click on a banner on the left, it takes you another page which is a replica of the code of the index page (your "template") and insert some game info and pictures in there.

That should fulfill your requirement. If you're in need to add some jquery to score the marks, consider adding a simple "lightbox" solution to your pics (http://fancybox.net/).

Yes it sounds terribly simple, but I'm unsure of your overall knowledge and one of the quickest way to lose it is to get paralyzed by trying to do all the fancy stuff.

I'll definitely look into a slide bar. Currently I do have a simple bammer. It's an independent study so basically I just do a Google hang out with my teacher, he looks at what I've done, then gives me something new to add or change. So far I haven't had any trouble learning to use style sheets and basic jquery functions like buttons to change style sheets but last week's assignment was the banner thing and all examples I tried were either way to complicated and long, or way to short that I didn't have enough info to figure out wtf was going wrong. Gonna ignore the banner for now and start the database today. Thx for input

[The Stig]

I see.

In that case, I think it's time to look even more back in time.

Try this: http://www.dyn-web.com/code/rotate_images/
There's a code in there for rotating images, with each image having its own link. Extract all the files to a folder, and click on the index to view all the examples.

It's powered by Javascript. I'm unsure if you need to provide code written by yourself though, or is it purely a test of seeing how well you can integrate things together?

The code seems rather simple (well, the file size is less than 10kb for each part of the script, and there's only 3). I've no idea how it actually works, but it does and I believe I can understand it if I tried (I'm just lazy and tired at the moment). It seems well commented.

See if this does the trick.

[Aylee]

I see.

In that case, I think it's time to look even more back in time.

Try this: http://www.dyn-web.com/code/rotate_images/
There's a code in there for rotating images, with each image having its own link. Extract all the files to a folder, and click on the index to view all the examples.

It's powered by Javascript. I'm unsure if you need to provide code written by yourself though, or is it purely a test of seeing how well you can integrate things together?

The code seems rather simple (well, the file size is less than 10kb for each part of the script, and there's only 3). I've no idea how it actually works, but it does and I believe I can understand it if I tried (I'm just lazy and tired at the moment). It seems well commented.

See if this does the trick.

Awesome I'll definitely look into this tyvm! Professor doesn't care where code comes from as long as i can make it work on my page.

[Corrderio]

Out of curiousity, when you say you want a sliding content bar, you mostly just want a bar that stays at the top of the page, right? If so, wouldn't position: fixed work? Here's an example I found on YT:

[Aylee]

I see.

In that case, I think it's time to look even more back in time.

Try this: http://www.dyn-web.com/code/rotate_images/
There's a code in there for rotating images, with each image having its own link. Extract all the files to a folder, and click on the index to view all the examples.

It's powered by Javascript. I'm unsure if you need to provide code written by yourself though, or is it purely a test of seeing how well you can integrate things together?

The code seems rather simple (well, the file size is less than 10kb for each part of the script, and there's only 3). I've no idea how it actually works, but it does and I believe I can understand it if I tried (I'm just lazy and tired at the moment). It seems well commented.

See if this does the trick.

Looked though this and got it working almost perfectly. Ideally I would like to be able to also choose a picture (most versions like this ive seen have small circles representing each picture and when clicked it loads that one picture and stops changing) then also be able to link to databases with it. But this works for now tyvm! Worked on the database a bit but kind of at a stand still atm. I was following a tutorial and making progress, but its creating the database with html5 in the website code, I think the instructor is wanting me to just make a sqlite database and link to it so I'm waiting for confirmation from him. Anyone know of any good tutorials for either or both methods? (one im following is a Indian guy thats simi hard to understand and has birds in the background non stop)

[Aevis]

What kind of dev environment have you set up? It would also help if you could get some more specific requirements from your instructor. As it stands, I'd simply recommend you to install a WAMP package of your choice (easyPHP, wampserver, xampp etc.) and get going with a tutorial like this: http://henryranch.net/software/ease-into-sqlite-3-with-php-and-pdo/. However, that does imply to learn some PHP basics. It also circumvents any knowledge of sqlite itself and server setup, thus it might not meet the requirements.

A totally different approach would be to use a NoSQL DB like MongoDB together with a Node.js server. That way you'd not need to learn anything about PHP or relational databases and could stick purely to Javascript, but it's not exactly easier/faster to dive in if you have no experience.

IMHO the best option would still be to use a simple array to store the few data you need, as mentioned before.

[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.

[Aylee]

What kind of dev environment have you set up? It would also help if you could get some more specific requirements from your instructor. As it stands, I'd simply recommend you to install a WAMP package of your choice (easyPHP, wampserver, xampp etc.) and get going with a tutorial like this: http://henryranch.net/software/ease-into-sqlite-3-with-php-and-pdo/. However, that does imply to learn some PHP basics. It also circumvents any knowledge of sqlite itself and server setup, thus it might not meet the requirements.

IMHO the best option would still be to use a simply array to store the few data you need, as mentioned before.

A totally different approach would be to use a NoSQL DB like MongoDB together with Node.js. That way you'd not need to learn anything about PHP or relational databases and could stick to Javascript, but it's not exactly easier/faster to dive in.

As it stands right now im using Xampp. As far as the PHP goes i'm sure we will get into it soon, but as of right now hes wanting me to use mainly jquery and some javascript. Instructor just emailed me and said that he wants me to actually create a offline database in sqlite then when the webpage opens it run a query on it, and then display the result. So gonna work on that after class today, if anyone knows of a awesome tutorial for that type of stuff feel free to link it, otherwise i'll google and see what i can find this afternoon.

[octopus]

If you're using Xampp that means PHP and MySQL is available for use. It sounds like this exercise is beyond what you have been taught though.

[Corrderio]

What kind of dev environment have you set up? It would also help if you could get some more specific requirements from your instructor. As it stands, I'd simply recommend you to install a WAMP package of your choice (easyPHP, wampserver, xampp etc.) and get going with a tutorial like this: http://henryranch.net/software/ease-into-sqlite-3-with-php-and-pdo/. However, that does imply to learn some PHP basics. It also circumvents any knowledge of sqlite itself and server setup, thus it might not meet the requirements.

A totally different approach would be to use a NoSQL DB like MongoDB together with a Node.js server. That way you'd not need to learn anything about PHP or relational databases and could stick purely to Javascript, but it's not exactly easier/faster to dive in if you have no experience.

IMHO the best option would still be to use a simple array to store the few data you need, as mentioned before.

I can also suggest this. I use WAMP and would highly recommend it for SQL query testing/training/etc.. The only problem I ran into was when I installed it after I graduated the default port WAMP uses was the same as my Skype which caused a conflict til I adjusted WAMPs settings

[Aevis]

As it stands right now im using Xampp. As far as the PHP goes i'm sure we will get into it soon, but as of right now hes wanting me to use mainly jquery and some javascript. Instructor just emailed me and said that he wants me to actually create a offline database in sqlite then when the webpage opens it run a query on it, and then display the result. So gonna work on that after class today, if anyone knows of a awesome tutorial for that type of stuff feel free to link it, otherwise i'll google and see what i can find this afternoon.

Ok, super simple version: Download this sqlite3.exe: https://sqlite.org/2014/sqlite-shell...86-3080600.zip. Run that and have fun with this: https://sqlite.org/cli.html. Basically, you create the DB on the fly in your memory and can save it into a file with the .save command.

Once you get to know PHP you'll learn how to access it through Apache's PDO wrapper with PHP. It's simple tho. Xampp should've the PDO module already actiavted. So all you have to do is create a .php file in your webroot with something like this (not tested):

<?php
 
// Specify your sqlite database name and path //
$dir = 'sqlite:mydir/myDatabase.sqlite';
 
// 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 myTable";
 
// Apply statement //
$statement = $dbh->query($sql)

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

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

?>

[Aylee]

Ok, super simple version: Download this sqlite3.exe: https://sqlite.org/2014/sqlite-shell...86-3080600.zip. Run that and have fun with this: https://sqlite.org/cli.html. Basically, you create the DB on the fly in your memory and can save it into a file with the .save command.

Once you get to know PHP you'll learn how to access it through Apache's PDO wrapper with PHP. It's simple tho. Xampp should've the PDO module already actiavted. So all you have to do is create a .php file in your webroot with something like this (not tested):

<?php
 
// Specify your sqlite database name and path //
$dir = 'sqlite:mydir/myDatabase.sqlite';
 
// 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 myTable";
 
// Apply statement //
$statement = $dbh->query($sql)

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

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

?>

aveis i created the basic database that was in that guide and it was super simple ty! You kind of lost me on the second part of the post though lol. Is that how i link it to my html page?

[octopus]

basically it goes like this:
1. find your web root directory (where your html and php files are)
2. create, for example, "getdata.php" with the code above (you'll probably have to modify it a little to fit your sqlite file name, table names etc)
3. open a browser, and test by going to "http://localhost/getdata.php"
4. fix any problems you have

And then on the html5 code, make an ajax call to get data (that URL) and pass it to whatever graphic components you want.

[Aylee]

basically it goes like this:
1. find your web root directory (where your html and php files are)
2. create, for example, "getdata.php" with the code above (you'll probably have to modify it a little to fit your sqlite file name, table names etc)
3. open a browser, and test by going to "http://localhost/getdata.php"
4. fix any problems you have

And then on the html5 code, make an ajax call to get data (that URL) and pass it to whatever graphic components you want.

Awesome sounds simple enough working on that now. One thing im confused about is my database file. When I created it It saved it as a "file" type of file gonna go back though that page that was linked earlier (think it said something about that)

Edit: nvm part I thought was the anwser was to export it to a txt file. How do i get it in sqlite format? or would this be the proper format to link to? (note database is called NESCollection and that is the path name

E:\XAMPP\htdocs\NesList-CSS\sqlite-shell-win32-x86-3080600\NESCollection

Also when I go into my browser to test I get "Object not found" error page, i assume its because my database is not saved in the correct format?

Last thing for now should the provided code above have a ; at the end of this statement?

$statement = $dbh->query($sql)

[Aevis]

You can save it as whatever you like, there's no specific filetype to be associated with. Everything that connects to it, like the command line if you use the ".open" command or the PDO wrapper in the PHP code will read it just fine, as long as the path is correct. So you can name it NESCollection.db, NESCollection.sqlite3, NESCollection.isverycool etc. Most common seems to be .db for sqlite. It should be a description to help you identify what it is. The connectors don't care.

Yes, there should be a ; at the end, my bad.

//Edit: About your error message. Your connection to the DB works, or you'd see "cannot open database". So the code run already past that. The error appears because I misspelled statement at "$rowset = $statmenet->fetchAll();". Proper code:

<?php
 
// Specify your sqlite database name and path //
$dir = 'sqlite:mydir/myDatabase.sqlite';
 
// 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 myTable";
 
// Apply statement //
$statement = $dbh->query($sql);

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

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

?>

[Aylee]

still getting Object not found, I feel like im doing something stupid wrong (either not entering the right address in the browser or specifying the database path correctly.

Spoiler: show

[The Stig]

xampp's default directory is htdocs

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

oops, I mean neslist