user chose css file as theme for webpage using SESSION - php

Question

I'm building a webpage that allows a user to choose a theme for it. How can I build that based on this suggestion (I have to use SESSION):
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['style']?>" />
I've try to make table named 'theme' on mysql database like this:
id | th_name | link
1 | blue | style.css
2 | back | black.css
3 | pink | pink.css
.................
And my code (not work):
<?php
echo "<form>";
echo "<select>";
$sql = "select * from theme";
foreach ($dbh->query($sql) as $row)
{
?>
<option value="<?php $row['link'] ?>"><?php echo $row['th_name'] ?></option>
<?php
}
echo "</select>";
echo "</form>";
?>
The 1st code is the key. Do you have any solution for this? (using jquery or something....?)

Answer 1

Why would you want to use mysql database? You can give a variable the same name css file. And use cookies. This is an implementation example
Just be careful to secure it well!

Answer 2

You could do it the way that you showed above, but for security's sake you would probably want to do it a little different (your way would allow significant opportunity for XSS).
Essentially, you will need to set the $_SESSION global variable to have the style, and that should come directly from the database. If it were me, I would do this:
<?php
echo "<form>";
echo "<select name=\"theme\" id=\"select-theme\">";
$sql = "select * from theme";
foreach ($dbh->query($sql) as $row)
{
?>
<option value="<?php $row['id'] ?>"><?php echo $row['th_name'] ?></option>
<?php
}
echo "</select>";
echo "</form>";
?>
Then, on your postback script, do this:
<?php
if (isset($_POST['theme']) {
// Perform query here to get the link's file, using PDO - watch out for XSS
// Note - you may have to call session_start()
// depending on your php.ini's settings
$_SESSION['style'] = $link;
}
If you are wanting to do this on the fly with jQuery, you can see the information here: How do I switch my CSS stylesheet using jQuery?
In addition, you would want to persist your changes like this:
<script type="text/javascript">
$("#select-theme").on("change", function() {
$.post({
url:'yoururl.php',
data: {
theme: $(this).find("option:selected").value()
});
});