質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1693閲覧

Cookieを使用して複数のボタンのデータを蓄積し、そのデータを呼び出す方法

paras

総合スコア18

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2018/08/30 13:22

編集2022/01/12 10:55

前提・実現したいこと

私は、webページ上で簡易的な座席予約システムを作成したいと考えています。
作成にあたり、
座席に見立てたボタンの配列の中で、希望の座席(ボタン)を選択し、決定ボタンを押すことで、リンク先のページで選択された座席(ボタン)の名前を確認できるようなプログラムは作成することができました。

そこで、今回は選択された座席のデータを次のページに飛ばすのではなく、Cookie(データベース)に保存して、確認ページでCookieからそのデータを呼び出す方法を教えていただければと思います。
よろしくお願いいたします。

最終的には蓄積されたデータをもとに、すでに選択された座席を選択不可にすることで、座席が重複した選択されてしまうことを防ぐプログラムを作成したいと考えています。

現状できている画面

1:座席選択ページで希望の座席を選ぶ
イメージ説明

2:選択された状態で確認ボタンを押す
イメージ説明

3:表示されたウィンドウのOKボタンを押し、リンク先のページで改めて選択された座席の番号を確認する。
イメージ説明
というような感じです。
座席を選択した状態で確認ボタンを押すことでCookie(データベース)にデータを蓄積したいと考えています。
また、とりあえず、別ページ(確認ページ)で蓄積されたデータを呼び出し、確認できるようにしたいと考えています。
よろしくお願いいたします。

該当のソースコード

php

1<?php 2foreach(range("A","C") as $r){ 3 foreach(range(1,5) as $c){ 4 print "<input type='checkbox' name='c[]' id='c{$r}-{$c}' value='{$r}-{$c}'><input type='button' value='{$r}-{$c}' class='cx'>"; 5 } 6 print "<br>"; 7} 8 ?>

php

1<?PHP 2$c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY); 3if(!is_nul![イメージ説明](342ec36d91231eebd24c2b2128705731.png){ 4 print "選択された座席:".implode(",",$c)."<br>"; 5 6} 7?>

css

1<style> 2[name="c[]"]{display:none;} 3[name="c[]"]:checked + .cx{background-Color:yellow;} 4</style>

javascript

1<script type="text/javascript"> 2 window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#f1').addEventListener('submit',function(e){ 4 var c=[].map.call(document.querySelectorAll('[name="c[]"]:checked'),function(x){ 5 return x.value; 6 }).join(","); 7 if(c===""){ 8 alert("座席を選択してください。"); 9 e.preventDefault(); 10 }else{ 11 if(!confirm(c+" が選択されています。よろしいですか?")){ 12 e.preventDefault(); 13 } 14 } 15 }); 16 [].forEach.call(document.querySelectorAll('.cx'),function(x){ 17 x.addEventListener('click',function(e){ 18 var t=e.target; 19 var n=document.querySelector('#c'+t.value); 20 n.checked=!n.checked; 21 }); 22 }); 23}); 24 </script>

html

1<input type="button" style="position: absolute; left: 35px; top: -5px; width: 250px; height: 35px; background-color: #ffffff; border-color: #000000" value="ステージ"><br><br><br>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/30 13:46

なぜCookieをデータベースとして扱おうとしているのでしょうか。他の手段は考えなかったのですか?
paras

2018/08/30 14:06

今回のプログラムを作成するにあたりデータベースが必要であると判明したため、データベースについて自分なりに調べたりこちらで質問をさせて頂いた結果、localStrageや セッション、クッキーというものがあると判りました。その中でlocalStrageがなぜか使えず(自分が使い方を理解していない確率大)Cookieであれば、ネットに存在するサンプルプログラムを参照し、使用することができたため、Cookieを用いようと考えました。
m.ts10806

2018/08/30 14:20 編集

CookieでもlocalStorageでも利用している自分自身にしかデータが持たれません。保存先は利用しているユーザ自身(localStorageだとブラウザに保存されます)です。本来「データベース」はサーバー上にデータを蓄積するものなので、MySQLなりPostgreSQLなり何なりデータベースエンジンを利用するものだと思うのですが、結局のところ、どのようにデータを扱いたいのでしょうか。
m.ts10806

2018/08/30 14:24 編集

座席予約であれば座席の提供元が把握できなければ意味ありませんよね?自分で予約して自分の席だけわかっていても、本来は何人ものユーザーが予約をするわけで、そうすると予約済みの席や空席の照会が必要になります。照会をしようと思うとCookieやlocalStorageなどではできません。CookieもlocalStorageもユーザー自身で削除したり内容を書き換えたりできますしね。
haruniku

2018/08/30 14:36 編集

Cookie経由で情報溜め込むのはちょっと嫌ですね。。。 ファーストパーティならなおさらです。
dit.

2018/08/31 01:36

yambejpさんの回答は「自分だけが予約した情報をもてばいいなら」という条件付きだったかと思います。例えば映画館の対面券売で、窓口が1つしかなく、スタッフだけが「どの席が予約されたか」を把握できればいいなら(事前予約とかセルフ券売は無視)という感じです。誰がどのようにその予約システムを使用するのかによって構築内容は変わってくると思います。web上で、不特定多数の人が予約することを視野に入れているのであればこの方法は向きません。
papinianus

2018/08/31 02:21

3の確認ページの意味なのですが、購入サイトでよくある最後の確認ページなのでしょうか?それとも、確定後に確認したりキャンセルしたりするマイページ的なものですか?どちらですか?
paras

2018/08/31 10:06

皆様ありがとうございます。確かに、座席を選択した端末のデータベースにデータが蓄積されても意味がないですよね...実は今回作成しようとしているシステムはbit.さんがおっしゃていることと近い(座席を選択してもらう端末はこちら側で管理し、お客様にはその場で選択してもらう予定)のですが、同時に離れた二か所以上のの場所で座席が重複する事故を起こすことなく販売することを目的としているため、少なくとも使用する端末同士でのサーバーの共有は必須であり、結局CookieやlocarStrageではだめということですよね...
m.ts10806

2018/08/31 12:38

共有すべきはデータでありサーバーではありませんよ。なんというか自作するより外に投げるか近い機能を構築可能なパッケージやCMSの方が良いですね。というか、あまりビジネスに寄った内容はここには向きません。
guest

回答1

0

PHPが使えるならまずはサーバー上にファイルで保存することから初めてみては?
もちろんファイルロックやらなんやら面倒ですし、
データ管理という意味ではおすすめできないので
もしなんらかのサービスとして公開する気があるならDBでのデータ管理を
おすすめしますけどね

投稿2018/08/31 03:30

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

paras

2018/08/31 10:42

本当に毎回わざわざありがとうございます。 つまりCookieやlocalStrageではないサーバーをしようするべきということでしょうか? おすすめのサーバーございますでしょうか?
yambejp

2018/08/31 11:18

CookieやlocalStrageは一時的な動作チェックには使えますが 複数クライアントが同じデータを共有することができません。 RPGで自分がアイテムを見つけても、友達の装備が増えないのと同じ そうするにはネットワークRPGでパーティを組まないといけません > おすすめのサーバー 環境によりますが、とりあえずWinで小規模にやるなら XAMPPがよいかなと思います。 サーバーサイドの言語はPHP、RDBはMySQL(Maria)が 個人的には好きです。
paras

2018/08/31 11:26

ありがとうございます RPG好きなのでわかりやすかったです! 現在Windows版のMAMPを使用していますが、それでも大丈夫でしょうか?
yambejp

2018/08/31 11:30

MAMPって基本Mac用だったのでわたしは使おうとおもったことないですが Win版も安定しているなら問題ないんじゃないですかね? おすすめしておきながら恐縮ですが実際XAMPP自体つかったことないし。 (私の基本環境は長年FreeBSD+portsなので)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問