回答編集履歴

4

すごい追記

2019/12/10 13:47

投稿

thyda.eiqau
thyda.eiqau

スコア2982

test CHANGED
@@ -31,3 +31,555 @@
31
31
  `date("Y/m/d H:i", strtotime($row["date"]))`
32
32
 
33
33
  ~~閉じかっこが多くないですか?~~→多くないですね、失礼しました
34
+
35
+
36
+
37
+ ----
38
+
39
+
40
+
41
+ 乗りかかった船 (思ってた数倍、大船でしたが) なので、回答しますが、、、
42
+
43
+ 回答が付いた後に質問文のコードを「書き換える」のはお控えください。質問→指摘→質問修正の流れだと、あとから見た人からすると、「(修正されて) 問題ないコードに対する指摘」になって整合性がつかなくなります。
44
+
45
+ 修正 (上書き) ではなく、追記してください。。
46
+
47
+
48
+
49
+
50
+
51
+ ご提示の、 2019/12/10 20:52編集時点のコードに対して、指摘します。
52
+
53
+
54
+
55
+ * インデントをスペース2つで取るのか4つで取るのか統一してください。たぶん4でやりたいのだと思いますが、かなり右に長いコードになっているので後述の改善案では2つにしています。
56
+
57
+
58
+
59
+ ```html
60
+
61
+ <td class="contact">電話番号</td>
62
+
63
+ <td class="contact"><input name="tel" type="text" id="tel" size="20" maxlength="20"></td>
64
+
65
+ ```
66
+
67
+ ```html
68
+
69
+ <td class="contact">メールアドレス</td>
70
+
71
+ <td class="contact"><span id="sprytextfield1">
72
+
73
+ <input name="email" type="text" id="email" size="20">
74
+
75
+ <span class="textfieldRequiredMsg">値を指定する必要があります。</span><span class="textfieldInvalidFormatMsg">無効な形式です。</span></span></td>
76
+
77
+ </tr>
78
+
79
+ ```
80
+
81
+ * `<input type="email">` や `<input type="tel">` を活用しましょう。バリデーションが楽になるだけではなく、スマートフォンで入力するときに (スマホのブラウザによりますが) 自動でテンキーモードになったり英数キーボード (+アットマーク) になったりしてユーザーフレンドリーです
82
+
83
+
84
+
85
+ ```html
86
+
87
+ <div id="contents">
88
+
89
+ <section>
90
+
91
+ <article>
92
+
93
+ <h2>お問い合わせ</h2>
94
+
95
+ <center>
96
+
97
+ ```
98
+
99
+ * `<div id="contents">` も `<section>` も `<article>` も閉じられてないです。必要なら末尾の `</body>` の直前に `</article></section></div>` を入れてください。不要ならこの2行は消してください。
100
+
101
+
102
+
103
+ `<center>` も閉じられていないですが、そんなタグはHTML5には存在しないので消してください。センタリングが必要なら別途CSSで制御してください。
104
+
105
+
106
+
107
+
108
+
109
+ * `<tr class="contact gray_back">` のあと、すべての `<tr>` や `<td>` にcontactクラスが付いていますが、親の `<table>` にクラス (例えば、`contact_table`) を付けて、css側では `.contact_table tr { ... }` で制御したほうが楽 (変更に強い) です
110
+
111
+
112
+
113
+ * `$sql = "INSERT INTO ***(yourname, kana, tel, email, chance, sei, title, content, date) ";`
114
+
115
+ カラム名に指定されているdateは環境によっては予約語だった気がしますので、特別な配慮が必要なケースがあります。
116
+
117
+ INSERTしたときの日時を取りたいのであればSQL側で入れさせても良い気がします。
118
+
119
+
120
+
121
+ ```php
122
+
123
+ $sql .= "VALUES(";
124
+
125
+ $sql .= "'" . $yourname . "',";
126
+
127
+ $sql .= "'" . $kana . "',";
128
+
129
+ $sql .= "'" . $tel . "',";
130
+
131
+ $sql .= "'" . $email . "',";
132
+
133
+ $sql .= "'" . $chance . "',";
134
+
135
+ $sql .= "'" . $sei . "',";
136
+
137
+ $sql .= "'" . $title . "',";
138
+
139
+ $sql .= "'" . $content . "',";
140
+
141
+ $sql .= "'" . date("Y/m/d H:i:s") . "'";
142
+
143
+ $sql .= ")";
144
+
145
+ ```
146
+
147
+ * これはめちゃんこ危険なのでやめましょう。プリペアドステートメントでググってください。
148
+
149
+
150
+
151
+
152
+
153
+ 動くかどうかまで検証してませんが、指摘した箇所を直したコードがこちらです。
154
+
155
+ ```php
156
+
157
+ <body>
158
+
159
+ <div id="wrapper">
160
+
161
+ <header>
162
+
163
+ <h1>hoge</h1>
164
+
165
+ <hgroup>
166
+
167
+ <h2>hoge</h2>
168
+
169
+ <h3>hoge</h3>
170
+
171
+ </hgroup>
172
+
173
+ <nav>
174
+
175
+ <ul>
176
+
177
+ <li><a href="index.html">Home</a></li>
178
+
179
+ <li><a href="hoge.php">Login</a></li>
180
+
181
+ <li><a href="contact.html">Contact</a></li>
182
+
183
+ <li><a href="link.html">Link</a></li>
184
+
185
+ </ul>
186
+
187
+ </nav>
188
+
189
+ </header>
190
+
191
+
192
+
193
+ <div id="side_menu">
194
+
195
+ <nav>
196
+
197
+ <h3>Navigation</h3>
198
+
199
+ <ul>
200
+
201
+ <li><a href="test.html">test</a></li>
202
+
203
+ </ul>
204
+
205
+ </nav>
206
+
207
+ <aside>
208
+
209
+
210
+
211
+ </aside>
212
+
213
+ </div>
214
+
215
+
216
+
217
+ <div id="contents">
218
+
219
+ <section>
220
+
221
+ <article>
222
+
223
+ <h2>お問い合わせ</h2>
224
+
225
+ <form action="contact.php" method="post" enctype="text/plain" name="mail" id="mail">
226
+
227
+ <table class="contact" width="600" border="0">
228
+
229
+ <tr class="contact gray_back">
230
+
231
+ <td class="contact">氏名</td>
232
+
233
+ <td class="contact"><input name="yourname" type="text" id="yourname" size="20" maxlength="20"></td>
234
+
235
+ </tr>
236
+
237
+ <tr class="contact">
238
+
239
+ <td class="contact">ふりがな</td>
240
+
241
+ <td class="contact"><input name="kana" type="text" id="kana" size="20" maxlength="20"></td>
242
+
243
+ </tr>
244
+
245
+ <tr class="contact gray_back">
246
+
247
+ <td class="contact">電話番号</td>
248
+
249
+ <td class="contact"><input name="tel" type="text" id="tel" size="20" maxlength="20"></td>
250
+
251
+ </tr>
252
+
253
+ <tr class="contact">
254
+
255
+ <td class="contact">メールアドレス</td>
256
+
257
+ <td class="contact"><span id="sprytextfield1">
258
+
259
+ <input name="email" type="text" id="email" size="20">
260
+
261
+ <span class="textfieldRequiredMsg">値を指定する必要があります。</span><span class="textfieldInvalidFormatMsg">無効な形式です。</span>
262
+
263
+ </span></td>
264
+
265
+ </tr>
266
+
267
+ <tr class="contact gray_back">
268
+
269
+ <td class="contact">サイトを知ったきっかけ</td>
270
+
271
+ <td class="contact">
272
+
273
+ <label>
274
+
275
+ <input type="checkbox" name="chance" value="search" id="chance_0">
276
+
277
+ 検索サイト
278
+
279
+ </label>
280
+
281
+ <br>
282
+
283
+ <label>
284
+
285
+ <input type="checkbox" name="chance" value="mouth" id="chance_1">
286
+
287
+ 口コミ
288
+
289
+ </label>
290
+
291
+ <br>
292
+
293
+ <label>
294
+
295
+ <input type="checkbox" name="chance" value="magazine" id="chance_2">
296
+
297
+ 雑誌
298
+
299
+ </label>
300
+
301
+ <br>
302
+
303
+ <label>
304
+
305
+ <input type="checkbox" name="chance" value="other" id="chance_3">
306
+
307
+ その他
308
+
309
+ </label>
310
+
311
+ </td>
312
+
313
+ </tr>
314
+
315
+ <tr class="contact">
316
+
317
+ <td class="contact">性別</td>
318
+
319
+ <td class="contact">
320
+
321
+ <label>
322
+
323
+ <input type="radio" name="sei" value="man" id="sei_0">
324
+
325
+
326
+
327
+ </label>
328
+
329
+ <br>
330
+
331
+ <label>
332
+
333
+ <input type="radio" name="sei" value="woman" id="sei_1">
334
+
335
+
336
+
337
+ </label>
338
+
339
+ </td>
340
+
341
+ </tr>
342
+
343
+ <tr class="contact gray_back">
344
+
345
+ <td class="contact">用件</td>
346
+
347
+ <td class="contact"><select name="title" id="title">
348
+
349
+ <option value="web">WEBサイト制作について</option>
350
+
351
+ <option value="manage">WEBマネジメントについて</option>
352
+
353
+ <option value="recruit">採用について</option>
354
+
355
+ <option value="site">このサイトについて</option>
356
+
357
+ <option value="other">その他</option>
358
+
359
+ </select></td>
360
+
361
+ </tr>
362
+
363
+ <tr class="contact">
364
+
365
+ <td class="contact">質問内容</td>
366
+
367
+ <td class="contact"><span id="sprytextarea1">
368
+
369
+ <textarea name="content" id="content" cols="20" rows="5"></textarea>
370
+
371
+ <span class="textareaRequiredMsg">値を指定する必要があります。</span>
372
+
373
+ </span></td>
374
+
375
+ </tr>
376
+
377
+ <tr class="contact gray_back">
378
+
379
+ <td colspan="2" class="contact btn"><input type="submit" name="button" id="button" value="送信">
380
+
381
+ <input type="reset" name="button2" id="button2" value="リセット"></td>
382
+
383
+ </tr>
384
+
385
+ </table>
386
+
387
+ </form>
388
+
389
+ <!-- 部品2から部品4 ここから↓ -->
390
+
391
+ <!-- 部品2:データベースへの接続 -->
392
+
393
+
394
+
395
+ <?php
396
+
397
+ //接続設定(サーバー/データベース/ユーザー/パスワード)
398
+
399
+ $sql_hostname = "localhost";
400
+
401
+ $sql_username = "***";
402
+
403
+ $sql_userpass = "***";
404
+
405
+ $dbname = "***";
406
+
407
+ $tablename = "contact_data";
408
+
409
+
410
+
411
+ //データベースに接続する
412
+
413
+ $conn = mysqli_connect($sql_hostname, $sql_username, $sql_userpass, $dbname) or die("接続エラー");
414
+
415
+ ?>
416
+
417
+ <!-- 部品3:メッセージ書き込みスクリプト -->
418
+
419
+ <?php
420
+
421
+
422
+
423
+ /**
424
+
425
+ * SQLコマンド用の文字列に変換する関数
426
+
427
+ * @param string $post_key POSTで渡されたデータ中に期待されるキー
428
+
429
+ * @param mysqli $link mysqli_connect で生成した mysqliオブジェクト
430
+
431
+ * @return string $_POST[$key] でアクセスした string の値。変な値が来ていたときは空文字を返す
432
+
433
+ */
434
+
435
+ function cnv_dbstr($post_key, $link) {
436
+
437
+ return mysqli_real_escape_string(
438
+
439
+ filter_input(INPUT_POST, $post_key),
440
+
441
+ $link
442
+
443
+ );
444
+
445
+ }
446
+
447
+
448
+
449
+ //POSTメソッドで送信された場合は書き込み処理を実行する
450
+
451
+ if ($_SERVER["REQUEST_METHOD"] == "POST"){
452
+
453
+ //フォームからデータを受け取る
454
+
455
+ $yourname = cnv_dbstr("yourname");
456
+
457
+ $kana = cnv_dbstr("kana");
458
+
459
+ $tel = cnv_dbstr("tel");
460
+
461
+ $email = cnv_dbstr("email");
462
+
463
+ $chance = cnv_dbstr("chance");
464
+
465
+ $sei = cnv_dbstr("sei");
466
+
467
+ $title = cnv_dbstr("title");
468
+
469
+ $content = cnv_dbstr("content");
470
+
471
+
472
+
473
+ if(in_array('', [
474
+
475
+ $yourname, $kana, $tel, $chance, $sei, $title, $content
476
+
477
+ ], true)) {
478
+
479
+ //名前やメッセージが空白の場合はエラーメッセージを出力する
480
+
481
+ echo "<p><b>未入力項目があります</b></p>";
482
+
483
+ } else {
484
+
485
+ //データを追加する
486
+
487
+ $query = "INSERT INTO {$tablename} (yourname, kana, tel, email, chance, sei, title, content, date) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)";
488
+
489
+ $stmt = mysqli_prepare($conn, $query);
490
+
491
+
492
+
493
+ mysqli_stmt_bind_param(
494
+
495
+ $stmt,
496
+
497
+ $yourname,
498
+
499
+ $kana,
500
+
501
+ $tel,
502
+
503
+ $email,
504
+
505
+ $chance,
506
+
507
+ $sei,
508
+
509
+ $title,
510
+
511
+ $content,
512
+
513
+ date("Y/m/d H:i:s")
514
+
515
+ );
516
+
517
+
518
+
519
+ mysqli_stmt_execute($stmt);
520
+
521
+ mysqli_stmt_close($stmt);
522
+
523
+ }
524
+
525
+ }
526
+
527
+
528
+
529
+ ?>
530
+
531
+
532
+
533
+ <!-- 部品4:メッセージ表示スクリプト -->
534
+
535
+ <?php
536
+
537
+ //SELECTコマンドを実行してデータを取得する
538
+
539
+ $query = "SELECT * FROM {$tablename} ORDER BY id DESC";
540
+
541
+ $result = mysqli_query($conn, $sql) or die("データ抽出エラー");
542
+
543
+
544
+
545
+ //取得したデータを1件ずつ表示する
546
+
547
+ while ($row = mysqli_fetch_assoc($result)) {
548
+
549
+ echo "<hr>";
550
+
551
+ if (!empty($row["email"])) {
552
+
553
+ echo "<a href=\"mailto:{$row["email"]}\">{$row["yourname"]}</a>";
554
+
555
+ }
556
+
557
+ else {
558
+
559
+ echo $row["yourname"];
560
+
561
+ }
562
+
563
+ echo "(" . date("Y/m/d H:i", strtotime($row["date"])) . ")";
564
+
565
+ echo "<p>" . nl2br(htmlspecialchars($row["content"])) . "</p>";
566
+
567
+ }
568
+
569
+ mysqli_free_result($result);
570
+
571
+ mysqli_close($conn);
572
+
573
+ ?>
574
+
575
+ <!-- 部品2から部品4 ここまで↑ -->
576
+
577
+ </article>
578
+
579
+ </section>
580
+
581
+ </div>
582
+
583
+ </body>
584
+
585
+ ```

3

MySQL関数について言及

2019/12/10 13:47

投稿

thyda.eiqau
thyda.eiqau

スコア2982

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- そもそもmysqlを使うのはやめましょう。やめましょうっていうかPHP7.0で削除されたので、環境次第では動きません。
13
+ そもそも~~mysql~~ [MySQL関数 (mysql_で始まるやつ)](https://www.php.net/manual/ja/ref.mysql.php) を使うのはやめましょう。やめましょうっていうかPHP7.0で削除されたので、環境次第では動きません。
14
14
 
15
15
  せめてmysqli、できればPDOのほうが結果的に楽ができると思います。
16
16
 

2

間違いの修正

2019/12/10 12:19

投稿

thyda.eiqau
thyda.eiqau

スコア2982

test CHANGED
@@ -30,4 +30,4 @@
30
30
 
31
31
  `date("Y/m/d H:i", strtotime($row["date"]))`
32
32
 
33
- 閉じかっこが多くないですか?
33
+ ~~閉じかっこが多くないですか?~~→多くないですね、失礼しました

1

コードを読んで追記

2019/12/10 10:58

投稿

thyda.eiqau
thyda.eiqau

スコア2982

test CHANGED
@@ -3,3 +3,31 @@
3
3
 
4
4
 
5
5
  PHPさん、初めまして。質問の仕方がおかしいので、[Tips](https://teratail.com/help/question-tips)をご確認ください。
6
+
7
+
8
+
9
+ ----
10
+
11
+
12
+
13
+ そもそもmysqlを使うのはやめましょう。やめましょうっていうかPHP7.0で削除されたので、環境次第では動きません。
14
+
15
+ せめてmysqli、できればPDOのほうが結果的に楽ができると思います。
16
+
17
+
18
+
19
+ `if (!empty($yourname) and !empty($kana) and !empty($tel) and !empty($chance) and !empty($sei) and !empty($title) and !empty($content))`
20
+
21
+ emptyは空文字、ゼロ、ゼロが入った文字列 (`''`, 0, `'0'`) も空と判定するので、テスト用に適当な値で送信するとひっかかる可能性がありますね
22
+
23
+
24
+
25
+ `!is_null($row["email"])`
26
+
27
+ SQL側でどうなっているかわかりませんが、こちらはnullじゃなくて空文字だったときには通らないので要件を確認したほうがいいかもしれません
28
+
29
+
30
+
31
+ `date("Y/m/d H:i", strtotime($row["date"]))`
32
+
33
+ 閉じかっこが多くないですか?