I'm new to this, trying to create a website and learning step by step
Here's what I'm trying to do:
User clicks on options which the website creates a result from it and stores it in a variable(e.g. result = laptop with 2GB ram, 2GB graphic card, i5 processor)
I've got a database with 900+ rows where each row contains the laptop name, url, img url, specs, etc. (a lot of data)
After processing of the website it will return the following in the javaScript/ Jquery script:
let ram = '2GB'; let graphCard = '2GB'; let processor = 'i5'Go to the database, lookup all of the rows that equal the criteria and store the values of the rows into profiles e.g. (I guess i would need to store them in JSON?):
laptop1 { ram = "2GB", processor = "i5", graphCard = "2GB", url = "www.blabla1.com" } laptop2 { ram = "2GB", processor = "i5", graphCard = "2GB", url = "www.blabla2.com" }From there, get those values will get shown in the result page which Jquery/ JavaScript will insert e.g.:
<p id=result1></p> <p id=result2></p> <p id=result2></p>
Since I'm a newb, I'm having a hard time setting up step 4 (connecting to the database, get all the data while not loading ALL of the data into the webpage, select some data based on the criteria and inserting the results (laptops and the specs) into the site)
So far I got this:
index.php:
<?php
include 'dbh.php';
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script >GET JQUERY AJAX SRC etc etc</script>
<script>
$(document).ready(function() {
$('#btn').click(function() {
$('#finalResult').load(data);
});
})
</script>
</head>
<body>
<div id="finalResult">
<?php
$sql = 'SELECT * FROM laptops'
$result = mysqli_query($conn, $sql);
}
?>
</div>
<button id="btn">Load Result</button>
</body>
</html>
dbh.php:
<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'laptopInfo';
$conn = mysqli_connect($servername, $username, $password, $dbname);
?>
SQL columns would be:
Laptop_id, laptopUrl, laptopImgUrl, laptopRam, LaptopProccesor, etc...
So far I'm stuck here.. I'm also not sure if I should return the data (from the database) into a JSON file or process it directly.
Hope you guys can help to get to the next step!
EDIT: so here's the HTML part for the buttons:
<div id="base">
<button class='button' data-next="games" data-parent="base">Games</button>
<button class='button' data-next="work" data-parent="base">Work</button>
</div>
<!----------------------------------------- GAMES ----------------------------------------------->
<div id="games" class="hidden">
<button class='button' data-next="games-heavy" data-parent="games">Heavy Games</button>
<button class='button' data-next="games-light" data-parent="games">Light Games</button>
</div>
<div id="games-heavy" class="hidden">
<button class='button' data-next="games-heavy1" data-parent="games-heavy" final-answer="games-heavy1">First Heavy Game</button>
<button class='button' data-next="games-heavy2" data-parent="games-heavy" final-answer="games-light1">Second Heavy Game</button>
<button class='button' data-next="games-heavy3" data-parent="games-heavy" final-answer="games-heavy1">Last Heavy Game</button>
</div>
<div id="games-light" class="hidden">
<button class='button' data-next="games-light1" data-parent="games-light" final-answer="games-light1">First light Game</button>
<button class='button' data-next="games-light2" data-parent="games-light" final-answer="games-light2">Second light Game</button>
<button class='button' data-next="games-light3" data-parent="games-light" final-answer="games-light3">Last light Game</button>
</div>
<!--------------- end result is a <p> with a button that redirects to the next page (result page). Bellow are two examples -->
<div id="games-heavy1" class="hidden">
<p>You have chosen First Heavy GAME.</p>
<button onclick="nextPage(this);" class="firstHeavyGame button">Klik hier voor de laptops</button>
</div>
<div id="games-heavy2" class="hidden">
<p>You have chosen Second Heavy GAME.</p>
<button onclick="nextPage(this);" class="secondHeavyGame button">Klik hier voor de laptops</button>
</div>
<!----------------- these <p> will also have buttons that redirect to the next page (result page) -->
<p id="games-heavy3" class="hidden">You have chosen Last Heavy GAME.</p>
<p id="games-light1" class="hidden">You have chosen First light GAME.</p>
<p id="games-light2" class="hidden">You have chosen Second light GAME.</p>
<p id="games-light3" class="hidden">You have chosen Last light GAME.</p>
<!----------------------------------------- WORK ----------------------------------------------->
<div id="work" class="hidden">
<button class='button' data-next="work-heavy" data-parent="work">Heavy Apps</button>
<button class='button' data-next="work-light" data-parent="work">Light Apps</button>
</div>
<div id="work-heavy" class="hidden">
<button class='button' data-next="work-heavy1" data-parent="work-heavy" final-answer="work-heavy1">First Heavy App</button>
<button class='button' data-next="work-heavy2" data-parent="work-heavy" final-answer="work-heavy2">Second Heavy App</button>
<button class='button' data-next="work-heavy3" data-parent="work-heavy" final-answer="work-heavy3">Last Heavy App</button>
</div>
<div id="work-light" class="hidden">
<button class='button' data-next="work-light1" data-parent="work-light" final-answer="work-light1">First Light App</button>
<button class='button' data-next="work-light2" data-parent="work-light" final-answer="work-light2">Second Light App</button>
<button class='button' data-next="work-light3" data-parent="work-light" final-answer="work-light3">Last Light App</button>
</div>
<!-------------- these <p> will also have buttons that redirect to the next page (result page) -->
<p id="work-light1" class="hidden">You have chosen First Heavy APP.</p>
<p id="work-light2" class="hidden">You have chosen Second Heavy APP.</p>
<p id="work-light3" class="hidden">You have chosen Last Heavy APP.</p>
<p id="work-heavy1" class="hidden">You have chosen First light APP.</p>
<p id="work-heavy2" class="hidden">You have chosen Second light APP.</p>
<p id="work-heavy3" class="hidden">You have chosen Last light APP.</p>
</div>
Database table:
laptop_id - laptop_name - laptop_img - laptop_url - laptop_ram - laptop_graphcard - laptop_processor - laptop_batt - etc.
Table content will be like:
laptop_id - laptop_name - laptop_img - laptop_url - laptop_ram
01 - asus-x100 - https://img - https://bla - 2GB
--------------------- EDIT 2 ------------------------------------------------
So I actually got it working, the following is not the same as my example above but the core functionality is this same (which basically is get data via buttons , use that data to filter in the database and output it). What I didn't include is .js changing the POST values, but that is pretty simple.
index.php:
<!DOCTYPE html>
<html>
<head>
<title>TESTING</title>
</head>
<body>
<!-------- this form will be replaced by button which .js will define and adjust the value ---->
<!---- That value will be used to filter in database--->
<form action="getdata.php" method="POST">
<input type='hidden' name='storage' value='1GB'/>
<input type="submit">
</form>
<!--- Before submitting .js will change the values of the inputs--->
</body>
</html>
getdata.php:
<?php
include_once 'testing/databaseconn.php';
$ramResult = $_POST['storage'];
echo "this is ramResult " . $ramResult . "<br>";
$sql = "SELECT * FROM laptops WHERE ram= '$ramResult' ;";
$result = mysqli_query($conn, $sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$urlResult = $row['img'];
}
}
?>
<html>
<head>
<title>Result page</title>
</head>
<body>
<p>test2</p>
<p>
<img src="<?php print $urlResult; ?>">
</p>
</body>
</html>
getdatabaseconn.php:
<?php
$dbServerName = "localhost"; //because of MAMP
$dbUsername = "root";
$dbPassword = "";
$dnName = "sitedatabase";
$conn = mysqli_connect($dbServerName, $dbUsername, $dbPassword, $dnName);
?>
