So I've been struggling with this and I'm no professional web designer. But basically I have 6 images of different types of weather, and when they are pressed/clicked, depending on which, I wanted what type of weather is was stored onto a table. So if you click the picture of the cloud, the word 'cloud' would be stored on my MYSQL database. After it was pressed, the user would end up eventually entering there name and a post about the weather, which they would be able to view on a final webpage.
So my problem is I'm not totally sure how to make the images store that data. I also want the viewers to be able to view other posts of different weather stories, so I know I need to put the information into and array. I was thinking of using php in javascipt to save the information, but I'm not totally sure how to come about it, Help?!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather.</title>
<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
<script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script>
<script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"> </script>
<script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="demo/scripts/execute.js"></script>
<script>
function cloudy()
{
return "<?php
$dbc=mysql_connect('asite.com','$user','$password','$db') ;
mysql_select_db('$db',$dbc);
echo $_POST[weather];?>"
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="images/gradientsky.jpg">
<div id="logo">
WhethertheWeather.
</div>
<div id="question">
Whats your favorite weather?
</div>
<div id="weather">
<ul id="nav-reflection">
<form name="myform" method="post" action="cloudy_name.php">
<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="cloudy();" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="sunny_name.php" id="weather[]" onclick="sunny();" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-2"><a href="snowy_name.php" id="weather[]" onclick="snowy();" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="rainy_name.php" id="weather[]" onclick="rainy();" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="mixy_name.php" id="weather[]" onclick="mixy();" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="windy_name.php" id="weather[]" onclick="windy();" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li>
<input type="hidden" name="weather" value="weather" id="weather">
</form>
</ul>
</div>
</body>
</html>
Here is the code I'm working with now.
Here is the index page, I changed the name to weather so it wouldn't get confused with another name variable I have.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather.</title>
<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
<script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script>
<script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="demo/scripts/execute.js"></script>
<script>
function showweather(weather) {
window.location = 'cloudy_name.php?w=' + weather;
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="images/gradientsky.jpg">
<div id="logo">
WhethertheWeather.
</div>
<div id="question">
Whats your favorite weather?
</div>
<div id="weather">
<ul id="nav-reflection">
<form method="post" action="cloudy_name.php">
<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="showweather('cloudy');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="sunny_name.php" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-2"><a href="snowy_name.php" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="snowy_name.php" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="mixy_name.php" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="windy_name.php" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li>
<input type="hidden" name="weather" value="none" id="myweather">
</form>
</ul>
</div>
</body>
</html>
Here is the cloudy_name.php page where u input the name.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="images/cloudysky.jpg">
<div id="name">
First of all, what is your name?
</div>
<form method="post" action="cloudy_story.php?w=<?php echo htmlspecialchars($_GET['weather'])?>">
<table width="20%" border="1" align="center" cellpadding="1" cellspacing="1">
<td width="100%"><label>Name: <input type="text" name="name" value="<?php echo $_POST[name]; ?>"></input></label>
<input type="submit" value="Submit">
</table>
</form>
</body>
</html>
Here is the cloudy_story.php.
<html>
<head>
<title>Forum</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="images/cloudysky.jpg">
<div id="cloudy">
Cloudy
</div>
<div id="white">
<div id="blue">
<div id="grey">
<div id="container">
<form method="post" action="cloudy_update.php?w=<?php echo htmlspecialchars($_GET['weather']); echo htmlspecialchars($_POST['name'])?>">
<table width="800px" border="1" align="center" cellpadding="3" cellspacing="1">
<tr>
<td width="800px"><h5><?php echo 'Hi, '. $_POST[name] ?>!
Write your story about your favorite weather. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam urna, rutrum ut hendrerit sit amet, dictum ut dui. Cras id sem at tortor ornare porttitor at id dolor. Proin quis nulla sit amet felis tempus imperdiet eu id felis. Vivamus ac ultricies ipsum. Aliquam nec enim nec turpis mattis aliquam. Aliquam eu quam libero. Quisque vel ligula ante, ut tempor sapien. Nullam molestie elementum urna et consequat. Fusce turpis dolor, consectetur vel placerat vel, tempor vel justo. Donec odio orci, imperdiet quis varius dignissim, pulvinar id erat. Proin lectus enim, ornare tincidunt facilisis et, accumsan eget purus. Phasellus dolor mi, . </h5></td>
</tr>
<tr>
<td width="300px"><label>Story :
<textarea rows="10" cols="100" name="story" ><?php echo $_POST[story]; ?></textarea>
</label></td>
</tr>
<tr>
<td width="300px"><input type="submit" value="Post"></td>
</tr>
</table>
<input type="hidden" name="name" value="<?php echo $_POST[name]?>">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the page that updates all of it (cloudy_update.php) and puts it on the table in m database.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<?php
$dbc=mysql_connect('localsite','user','pw','db') ;
mysql_select_db('db',$dbc);
/////////////////////////////////////////////////
//let's insert our data into the database //
/////////////////////////////////////////////////
$query = "insert into stories values('" . mysql_real_escape_string($_GET['weather']) . "', '" . mysql_real_escape_string($_POST['name']) . "' , '" . mysql_real_escape_string($_POST['story']) . "')"
or die ("Error - Couldn't register user.");
echo "Thank you $_POST[name]! You've been successfully posted<br /><br />
Please view all the posts <a href='view_forum.php'><b>here</b></a>.";
/////////////////////////////////////////////////
// finished inserting our data into the database //
/////////////////////////////////////////////////
exit();
?>
Sorry...I'm just really struggling with this...probably something small that I'm too stupid to see..
First off, cool background. Very nice. The header font needs to change, but I'm sure you are aware of that. As it's set up here it looks like each button sends you to a unique page built for that weather type (sunny_name.php). So you don't need to store any variables from the first page. On your second page, however, you could pass the weather variable + name variable through your form you have on sunny_name.php.
<form action="sunny_story.php?weather=sunny" method="post">
And finally you have your third page (sunny_story.php) which inputs your info (unless you have a story to add here, in which case you will store the name var in the url along with the weather like final_page.php?weather=sunny&name=John). Whichever you choose to do, the ending is similar:
<?php
//connect to db
$con=mysql_connect('localhost','username','pw');
if(!$con){
die('Could not connect to the db: ' .mysql_error());
}
mysql_select_db('yourdb',$con);
//enter query
$query = "INSERT INTO `table` VALUES ('".mysql_real_escape_string($_GET['weather'])."',
'".mysql_real_escape_string($_GET['name'])."',
'".mysql_real_escape_string($_POST['story'])."')"
$result = mysql_query($query);
Note: order of values in query depends on order of columns in mysql table. Also, Post method for story is dependent on the form method you used to reach this last page. Haven't tested, but should work.
One thing you can do is instead of this :
<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="cloudy();" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
You can write a single javascript function called showName() which will send the user to the appropriate page like :
<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="showName('cloudy');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
In showName() function you can simply write :
function showName(Name) {
window.location = 'name.php?w=' + Name;
}
Now in name.php you can output the form with action attribute as :
<form method="post" action="next.php?w=<?php echo htmlspecialchars($_GET['w'])?>">
</form>
In the next.php you can access the weather via $_GET['w'] and name via $_POST['name'] and add them into the database by using a simple insert query like :
$query = "insert into tablename values('" . mysql_real_escape_string($_GET['w']) . "', '" . mysql_real_escape_string($_POST['name']) . "')";
Try Doing like this. I have not added any styles.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather.</title>
<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('#nav-reflection li a img').click(function(){
var value = $(this).parent().attr('id');
$('#weatherVal').val(value);
$('#detailsDiv').slideDown();
})
$('#save').click(function(){
$.post('insert.php',$("#weatherForm").serialize(),
function(data){
console.log(data);
}
)
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="images/gradientsky.jpg">
<div id="logo">
WhethertheWeather.
</div>
<div id="question">
Whats your favorite weather?
</div>
<div id="weather">
<form method="post" id="weatherForm">
<ul id="nav-reflection">
<li class="button-color-1"><a href="javascript:void(0);" id="cloudy" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="javascript:void(0);" id="sunny" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-2"><a href="javascript:void(0);" id="snowy" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="javascript:void(0);" id="rainy" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="javascript:void(0);" id="mixy" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li>
<li class="button-color-1"><a href="javascript:void(0);" id="windy" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li>
</ul>
<input type="hidden" name="weatherVal" id="weatherVal">
<div id="detailsDiv" style="display: none;">
<input type="text" name="name" id="name">
<textarea type="text" name="story" id="story"></textarea>
<input type="button" name="save" id="save" value="Save">
</div>
</form>
</div>
</body>
</html>
using jquery u could post values to another file and do DB opertions there.
<?php
$dbc=mysql_connect('localhost','root','','test') ;
if(!$dbc){
die('Could not connect to the db: ' .mysql_error());
}
else
{
$query = "INSERT INTO `weather` VALUES ('','".mysql_real_escape_string($_POST['weatherVal'])."',
'".mysql_real_escape_string($_POST['name'])."',
'".mysql_real_escape_string($_POST['story'])."')";
echo $query;
$result = mysql_query($query);
return $result;
}
?>