2012-04-14 9 views
0

私はこれに苦労しており、プロのウェブデザイナーでもありません。しかし、基本的に私は6種類の天気の画像を持っています。そして、それらが押された/クリックされたとき、どのような天気の種類がテーブルに保存されたのかに応じていました。したがって、クラウドの画像をクリックすると、「クラウド」という単語がMYSQLデータベースに保存されます。それが押された後、ユーザーは結局最終的なウェブページ上で見ることができる天気についての名前と投稿を入力することになる。画像をクリックしたときにデータを格納する配列として配置する

私の問題は、画像にそのデータを格納する方法を完全には分かりません。私はまた、視聴者がさまざまな天気予報の他の投稿を見ることができるようにしたいので、私は情報を配列に入れる必要があることを知っています。私はjavasciptの情報を保存するためにPHPを使用することを考えていたが、私はそれについて来る方法を完全には分かっていない、助けて!

<!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> 

これは私が今作業しているコードです。

ここではインデックスページですが、名前を天気に変更したので、別の名前変数と混乱することはありません。

<!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> 

ここでは、名前を入力するcloudy_name.phpページです。

<!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> 

ここは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> 

ここではすべてのページ(cloudy_update.php)を更新してmデータベースのテーブルに配置するページです。

<!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(); 
?> 

申し訳ありませんが...私は本当に

+0

私の神!あなたのソースコードは信じられないほど奇妙です。 –

+0

ようこそスタックオーバーフロー! –

+1

http://w3schools.com/php/とhttp://www.w3schools.com/js/ –

答えて

0

まず第一に、クールな背景...多分...これで私が見るにはあまりにも愚かだと小さな何かを苦労しています。非常に素晴らしい。ヘッダーフォントは変更する必要がありますが、私はあなたがそれを認識していると確信しています。ここに設定されているように、各ボタンがその天気予報型(sunny_name.php)用に構築されたユニークなページにあなたを送信するように見えます。したがって、最初のページから変数を格納する必要はありません。しかし、2番目のページでは、気象変数+ name変数をsunny_name.phpのフォームに渡すことができます。

<form action="sunny_story.php?weather=sunny" method="post"> 

そして最後に、あなたは、天候等と一緒に、URLに名前VARを保存します。その場合には、あなたがここに追加する物語を持っていない限り(あなたの情報を入力し、あなたの3ページ目(sunny_story.php)を、持っていますfinal_page.php?weather = sunny & name = John)。どちらの場合でも、エンディングは似ています。

<?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); 

注:クエリの値の順序は、mysqlテーブルの列の順序によって異なります。また、ストーリーのPostメソッドは、この最後のページに到達するために使用したフォームメソッドに依存します。テストしていませんが、うまくいくはずです。あなたが行うことができます

+0

もちろん、私はそれがちょうど1つの列であるとは思わないので、あなたのmysqlテーブル形式を知る必要があります。 –

+0

あなたが参照しているものがあれば、ユーザーがそこに名前を入力する別のページにアイコンがリンクすることを計画しています。 Heresサイトは、明らかに行われていないので、エラーや醜さに備えて準備をしてください! http://www.tcnjart.com/christineaustin/whethertheather/index.php –

+0

テーブルには名前、天気、ストーリーの列があります。 –

0

ことの一つは、これに代えて次のとおりです。showName()

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

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

あなたが好きな適切なページにユーザーを送信しますshowName()と呼ばれる単一のJavaScript関数を書くことができますあなたは簡単に書くことができます:

function showName(Name) { 
    window.location = 'name.php?w=' + Name; 
} 

今すぐname.phpで出力できaction属性を持つフォームとして:

<form method="post" action="next.php?w=<?php echo htmlspecialchars($_GET['w'])?>"> 

</form> 

next.phpあなたは$_POST['name']経由$_GET['w']と名前を経由して天候にアクセスするなどの単純なINSERTクエリを使用して、データベースにそれらを追加することができます。

$query = "insert into tablename values('" . mysql_real_escape_string($_GET['w']) . "', '" . mysql_real_escape_string($_POST['name']) . "')"; 
+0

これは面白いです、私はちょうどnext.phpのための$クエリ部分に立ち往生しています。そのコードは私がユーザーにストーリー(story.php)を入力させた場所に置かれますか?それとも、フォーラム(update_forum.php)を更新する次のページにそれを載せますか? –

+0

Btw、私はupdate_forum.phpのコードはそうだ(私はそれが変更が必要です知っているが) - <?php $ dbc = mysql_connect( 'localhost'、 'user'、 'pw'、 'db'); mysql_select_db( 'db'、$ dbc); $クエリ=するmysql_query( "話 \t(天候、物語、名前) \t VALUES \t( '$ _POST [天気]'、 '$ _ POST [物語]'、 '$ _ POST [名]')。INSERT INTO" ) \tまたはdie( "エラー - ポスターを見つけることができませんでした。"); \t \tはエコー "$ _POST [名前]ありがとうあなたは成功し

\t \tを投稿されたすべての記事hereをご覧ください!。"; \t exit(); ?> –

+0

最後に1つの質問...申し訳ありません! showName(Name)の場合は、各天気のNameを入力する必要があります。function showName(Cloudy){ window.location = 'cloudy_name.php?w =' + Cloudy; }申し訳ありませんが、私がまったく馬鹿に聞こえる場合... –

0

このようにしてみてください。私はどんなスタイルも追加していません。

<!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> 

jqueryを使用すると、別のファイルに値を投稿してDB操作を行うことができます。

<?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; 

    } 
?> 
+0

これは残念ながら私が持っている私のホババーのjavasciptを破る。そして、私はその笑を元に戻す方法がわかりません。 –

+0

どのようなホバーの問題。指定してください –

+0

申し訳ありません、私は私の小さなアイコンにjqueryのホバー効果を参照していた。あなたがそれらの上を転がるとき、彼らはホバー効果をプリフォームするだろうが、私は愚かなものを引っ張り、コーディングを混乱させた、それはそれが壊れた理由、笑。しかし、私はこれがどのように設定されているかについて全くファンではありません。私はむしろアイコンをクリックするだけではなく、他のページにリンクさせて、それをそのページ上のフォームに表示させることができます。しかし、私はこれをオプションとして保持します。 –

関連する問題