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

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

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

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

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

347閲覧

メニュー・材料表が作りたい

duck75

総合スコア1

PHP

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

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/08/17 10:35

実現したいこと

  • 画像に添付したような「メニュー・材料表」を作る。

イメージ説明

前提

プログラミングが全くわからない人からプログラミング初心者(と言ってもHTMLやCSSが少しできるだけでWebアプリケーションを作ったことはない)の自分が依頼されてどうしたものか困っています。

はじめはExcelのドロップダウンリストとVLOOKUP関数を使って実現しようとしましたが、無理だとわかりました。
なぜなら依頼者からの要望では、Excelで以下のような多階層のドロップダウンリストが出来ないからです。
https://webdesignday.jp/inspiration/technique/css/5793/

どうして、多階層のドロップダウンメニューが必要なのかというと、たとえば、魚料理と肉料理にわけて、1階層目では魚、2階層目で具体的な魚のフライなどの料理名を選びたいからです。

発生している問題・エラーメッセージ

発生している問題というか、ぶっちゃけ何から手をつけていいかいまいちわかりません。
一応、考えているのは、XAMPPを使って、PHP、データベースでどうにかできないか?ということで、以下のサイトを検索して見つけたりしました。
https://www.javadrive.jp/xampp/mysql/index6.html
書いてあることは大体わかるんですが、これで本当に自分に出来るのか、ドロップダウンメニューで料理名を選んで、
全部で10カ所選んでその下に材料名を列挙しなければならないのですが、果たしてどうやったらそんなことが出来るのか、皆目見当が付きません。

まったくこのteratailを使うのも初めてで、変な質問をしているかもしれません。
が、もしなにかヒントになるようなことでもあれば、よろしくお願いします。

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

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

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

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

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

duck75

2023/08/18 00:18

調査したことは、エクセルで多階層のドロップダウンメニューを実現することは無理らしいということ、だから、多階層のドロップダウンメニューは最初に貼ったリンクで作ればいいのかということ、そうすると、Webアプリケーションになってしまうので、二番目のリンクにあるように、PHPとデータベースでXAMPPを使ってやればいいのかな?ということです。
Lhankor_Mhy

2023/08/18 01:31

初めにExcelを検討したということですが、そうだとするとPHPなどのサーバ側は不要なのではないですか?
duck75

2023/08/18 02:02

はい、はじめはExcelを検討しましたが、先に書いたように、多階層のドロップダウンリスト(質問の一番最初のリンクに貼ってある)がExcelで出来ないことが発覚したので、Webアプリケーションを選択することとなりました。
Lhankor_Mhy

2023/08/18 02:23

Webアプリケーション は web で公開しているものだと思いますが、はじめに Excel を検討したということは、 web で公開する必要はないのではないか? ということが先の質問の要旨です。 もし、そうであればPHPなどのサーバ側は不要かと思います。
duck75

2023/08/18 02:30

Webアプリケーションという言い方が悪かったのかもしれません。今の段階では、Webでの公開は必要ないので考えておらず、XAMPPをつかってローカルで動かす予定です。また、繰り返しになりますが、多階層のドロップダウンリストを実現するためにもExcelでは無理でした。
Lhankor_Mhy

2023/08/18 03:03

コメントがわかりにくかったかもしれません。 XAMPP や PHP などでの運用に不安があり、JavaScript がある程度使えるのであれば、わざわざ XAMPP や PHP を使わずに、JavaScript のみで記述すればいいのでは、という感想を持ちました。 PHPなどにこだわる理由がよくわかりませんでしたのでので、「サーバ側は不要では」とコメントをしています。 ご存知かとは思いますが、JavaScript(とブラウザ)にもキーバリュー形のデータベースがありますので、ローカルで動かすのであれば、JavaScript(+HTML+CSS)で十分な処理ができそうな気がしています。 もし、他に要件があるようでしたら、失礼しました。
duck75

2023/08/18 03:27

回答ありがとうございます。全然ご存じではないです笑。プログラミングもいくつかの人気な言語の入門書を読んで文法がわかる程度ですので、何も実装したことはありませんし、JavaScript(+HTML+CSS)でできるようなのであれば、そっちのほうがいいです。が、なにせ全く経験がないので、果たしてググって自分で対処できるのかどうか不安ではあります。まぁ、最悪できなくてもそれはそれでしようがない、諦めよう、これはそういう仕事なのでそこは気は楽ではあります。
guest

回答1

0

ベストアンサー

単純に言えばXAMPPのMySQLで料理テーブルをつくり正規化すればいいのですが、レシピサイトなどのメニューと違って、家庭料理の場合おなじ料理名でも材料は毎回違うということです。
そういう場合、「もやしとカニカマの中華風サラダ」に対して「もやし」と「カニカマ」を必須材料とし、「きゅうり」を任意材料とするなどの工夫が必要です。またバリエーション「もやしとカニカマの和風サラダ」や「もやしとカニカマのフレンチ風サラダ」があるなら料理名は「もやしとカニカマのサラダ」などにしてバリエーションを確保したほうがよいです。

いずれにしても現在は要求定義といってどういう機能がほしいか洗い出しをするタイミングだと思うので、仕様のパターンをあげていき、具体的な素材をサンプリングして仮組みしてみることが肝要です。その段階が一通りおわったら要件定義という具体的にシステムにどう落とし込み、どの機能が必要で、どの仕様はカットするかを決め込む段階に移ります。

参考

ざっくりこんなテーブル構成が必要になります

SQL

1create table cate( 2cid int primary key, 3cname varchar(100)); 4insert into cate values 5(3001,'サラダ'), 6(3002,'炒めもの'), 7(3003,'煮物'), 8(3004,'揚げ物'), 9(3005,'副菜'); 10 11create table genre( 12gid int primary key, 13gname varchar(100)); 14insert into genre values 15(4001,'魚'), 16(4002,'肉'), 17(4003,'野菜'), 18(4999,'その他'); 19 20create table menu( 21mid int primary key, 22cid int null, 23gid int null, 24mname varchar(100), 25foreign key (cid) references cate(cid) 26on update cascade on delete set null, 27foreign key (gid) references genre(gid) 28on update cascade on delete set null 29); 30 31insert into menu(mid,cid,gid,mname) values 32(1001,3003,4001,'魚の煮付け'), 33(1002,3001,4003,'ほうれん草とコーンのソテー'), 34(1003,3003,4003,'里芋煮'), 35(1004,3001,4999,'マカロニサラダ'), 36(1005,3002,4003,'八宝菜'), 37(1006,3004,4999,'春巻'), 38(1007,3001,4003,'もやしとかにかまの中華サラダ'), 39(1008,3003,4003,'かぼちゃ煮'), 40(1009,3002,4003,'小松菜炒め'), 41(1010,3005,4003,'しそ昆布'); 42 43create table ingre( 44iid int primary key, 45iname varchar(100)); 46insert into ingre values 47(2001,'魚'), 48(2002,'ほうれん草'), 49(2003,'コーン'), 50(2004,'里芋'), 51(2005,'厚揚げ'), 52(2006,'いんげん'), 53(2007,'マカロニ'), 54(2008,'にんじん'), 55(2009,'きゅうり'), 56(2010,'卵'), 57(2011,'豚肉'), 58(2012,'玉ねぎ'), 59(2013,'ピーマン'), 60(2014,'しいたけ'), 61(2015,'きくらげ'), 62(2016,'白菜'), 63(2017,'春巻き'), 64(2018,'レタス'), 65(2019,'もやし'), 66(2020,'かにかま'), 67(2021,'かぼちゃ'), 68(2022,'丸天'), 69(2023,'小松菜'), 70(2024,'ベーコン'), 71(2025,'しそ昆布'); 72 73create table menu_ingres( 74miid int primary key auto_increment, 75mid int null, 76iid int null, 77foreign key (mid) references menu(mid) 78on update cascade on delete set null, 79foreign key (iid) references ingre(iid) 80on update cascade on delete set null 81); 82 83insert into menu_ingres(mid,iid) values 84(1007,2019), 85(1007,2020), 86(1007,2009); 87 88create table daily_menu( 89did int primary key auto_increment, 90d date not null, 91term enum('朝食','昼食','夕食') not null, 92mid int, 93foreign key (mid) references menu(mid) 94on update cascade on delete set null 95); 96insert into daily_menu(d,term,mid) values 97('2023-03-27','夕食',1005), 98('2023-03-27','夕食',1006), 99('2023-03-27','夕食',1007);

UIとしてはメニュー追加ボタンを押すとモーダルダイアログが開いて、カテゴリーやジャンルを選んで検索ボタンをおした結果からメニューを選択し、メニューに紐づく材料を、menu_ingreテーブルを利用して抽出します

投稿2023/08/18 01:01

編集2023/08/18 03:37
yambejp

総合スコア114389

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

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

duck75

2023/08/18 01:58

詳しくご回答ありがとうございます。ヒントになります。実際、これはそう厳密なものではなく、どういう機能が欲しいのかはほぼわかっています。しかし、問題は、質問にも書いたように、それを実装したことがないので、なかなかきっかけがつかめない(どこかにちょうどいいサンプルでも落ちてないかな…)みたいなことを悶々と考えているところです。
duck75

2023/08/18 03:49

さらなる詳しい回答、ありがとうございます。が、恐らくこれは僕の能力の範囲を超えており、大半が理解不能、実現不可能の予感がします…。しかし、とにもかくにもありがとうございました。
yambejp

2023/08/18 03:57 編集

なれてれば2-3時間くらいでプロトがつくれそうですが 一から覚えるとなると2-3週間くらいみっちり勉強しながらかなぁと・・・ 最低限必要になりそうな知識についてキーワードをざっくりあげておきます ・sql マスターテーブル 正規化 中間テーブル 外部キー制約 pdo prepare(プレースホルダ) ・html modal dialog 検索フォーム ・js 非同期処理 fetch dom テーブル json ・css ちなみにXAMPP導入済みとのことなので、テーブル自体は私の書いたものをコピペするだけで作成できるので 簡易的なテストはすぐできると思いますよ
duck75

2023/08/18 03:56

ありがとうございます。一応、キーワードをヒントに考えてみようと思います。ですが、これまで全くアプリケーションを作ったことがなく、おそらくその2〜3週間みっちりコースになると思われるので、諦めるのも一つの手かなぁと思います。なにせ、僕は障害者で、これは時給500円の仕事なので。正直、無茶振りもいいところだなぁと思い始めました。
yambejp

2023/08/18 04:01 編集

流石に500円でうける仕事にしてはきびしそうですね。 まぁ興味があるのであればいろいろ試してみてください ご質問があればお役に立てる範囲でご協力はできるかとは思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問