こんにちは!
今回は、PHPで『月5万円』稼ぐためのロードマップ第11弾ということで、2つ目の課題である「クーポン機能の実装」に取り掛かっていきたいと思います。
前回の第10弾ではPHPで「クーポン機能」を実装するにあたって、「完成イメージ」「必要な機能・ファイル」「処理の流れ」といったところを一緒に理解してきました!
今回は「クーポン機能」の実装のパート2となっていますので、まだこれまでの記事を読んでないと言う方は先に第10弾のほうから見てもらった方がいいと思います!
- クーポン機能を実装してみたい
- Webアプリ開発がしたい!
- 第10弾まで見てくれた人
今回の第11弾では、「クーポン機能」を実装するための、見た目・枠組み(何と言っていいのか分かりませんが笑)を作成していきます!
つまり、このパートではPHPではなくHTML&CSSを主に使用していきます。
と思われた方はすみません、、
と言いますのも、第2弾を見ていただいた方なら分かると思うのですが、「PHPは機能」、「HTML&CSS」は見た目という関係性は、基本的に覆すことができません。
そのため、どうしてもHTML&CSSを理解していただいてから、PHPを学んだ方がステップとしては自然であることは否めません。
しかし、このロードマップではPHPだけを学びたい!という方でも、先に進んでもらえるように、コピペの力を借りて対処していきたいと思います。
そのコピペの真意についてはこの次をお読みください!
Contents
プログラムのソースコード全文
Freepik – jp.freepik.com によって作成された watercolor ベクトル
ここでは、見出し通りプログラムのソースコード全文を公開しています。
というのも、先ほど説明した通り、PHPだけ勉強したいと思っている人にとっては「HTML&CSS?なんなそれ?」って感じだと思います。
そのような方は、ここで完成後の各ファイルをダウンロードできますので、そこからこの先出てくる「HTML&CSS」の内容をコピペしながら先に進んでください!
上記のリンクをクリックすると、各ファイルが表示されると思うので、それぞれのファイルをダウンロードして、内容を確認してみてください。
各CSSファイルは「.css」の前に書いている名称が「.php」の名前と同じものが対応するペアとなっています。(例:prebuy.cssとprebuy.phpがペア)ただし、「index.php」は、対応するcssファイルの名称が「style.css」となっていますので気をつけてください。また、前弾でも説明しましたが、「comfirm.php」と「finish.php」はどちらも「prebuy.css」と対応しておりますので、ご注意ください。
では、各ファイルの枠作りに入っていきましょう!
各ファイルの作成と枠作り
PHPで『月5万円』稼ぐためのロードマップ第3弾に書いてある内容をきちんと実行してくれた方なら、PHPのプログラミングをしている準備はできているはずですね!
具体的には、環境構築が終わったあと、「htdocs」というファイルに「index.php」を作成し、ブラウザのURLを打ち込む欄に「localhost」と打つことで、「index.php」の内容が表示されるようになっているという感じでしょうか!
まだ、環境構築が終わっていない方は第3弾で紹介してある書籍を参考に、環境構築を行ってください。(手持ちの参考書・Webサイトで環境構築が行えている方はOKです!)
それではまず、下の画像のように「htdocs」フォルダの中に、今回作成する各ファイルを新規作成してください!
上記の画像の中で☑が付いてあるボタンが、今回新規作成したファイルたちです。具体的には
- index.php
- prebuy.php
- comfirm.php
- finish.php
- data.php
- util.php
- style.css
- prebuy.css
この8つです。
また、前回の第10弾の最後で作成した、必要な画像が入った「img」のフォルダは「htdocs」の中にあるでしょうか?無い方は前弾に戻って今作っておいてください!
index.php

第10弾は上記のような見た目でしたね!
まずはHTML&CSS界のルーティン
まずは、HTMLでは毎回書かなければならない、以下のコードを「index.php」に記述してください。
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>クーポンコード入力ページ</title> <span class="crayon-o"><</span><span class="crayon-e">link </span><span class="crayon-v">rel</span><span class="crayon-o">=</span><span class="crayon-s">"stylesheet"</span> <span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/css"</span> <span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"style.css"</span><span class="crayon-o">></span> </head> <body> </body> </html> |
タイトルは「クーポンコード入力ページ」とし、「style.css」のCSSファイルとリンクさせるので、
1 |
<link rel=”stylesheet” type=”text/css” href=”style.css”> |
を<head>~</head>内に記入しています。
ファイル内メイン部分の枠作り
次は、<body>~</body>内に「index.php」の枠を作っていきます。
あくまでPHPのロードマップなので、説明はそこまで詳しくできませんので、コピペもしくは、HTML&CSSロードマップを先に学習するなどをして対応してください!
まず、各要素のクラス名は以下のように設定しています。
少し複雑でごちゃごちゃしていますが、第10弾で載せている「index.php」の完成バージョンと見比べながら、上の画像と同じ構成になるように<body>~</body>の中に、ソースコードを以下のように記述していってください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <div class="part-title">購入する商品</div> <div class="item"> <div class="item-pic"><img src="./img/clock.jpg" alt="商品画像"></div> <div class="item-company">SEIGO(セイゴ―)</div> <div class="item-title">[SEIGO] 腕時計 アメダス Eco-Drive エコ・ドライブGPS衛星電波時計 ruralblog限定モデル</div> <div class="item-price">19,800円</div> </div> <div class="part-title">クーポンコードを使用する</div> <div class="coupon"> ※本来は表示されていない。 <ul> <li>5Q32i : 20%OFF</li> <li>gA22a : 15%OFF</li> <li>k0ja2 : 10%OFF</li> <li>gjl4a : 5%OFF</li> <li>gr1m9 : 5%OFF</li> </ul> </div> </body> |
また、このときソースコードを1から書いていってくれた人なら気付いていると思うのですが、上記の画像では、「クーポンコードを入力する」のところで、「orderbox」「coupon-title」を、追加する要素のクラスとして説明したにも関わらず、そのクラスを書いてませんよね。
この理由は、「クーポンコードを入力する」のところは入力フォーム、つまりPHPで実装していくため、今回はひとまずその手前まで実装していきました!
ここまでファイルの作成が完了していると、ブラウザでは以下のようになっていると思います。(「購入する商品」ははみ出て消されていますが笑)

完成バージョンと比べてもらうと、レイアウトが崩れていますね。
デザインを編集するのはCSSファイルなので、「index.php」と対応する「style.css」を編集していきましょう。
style.cssでデザインを整える
「style.css」は以下のように記述していってください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
body { font-family:"Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; background-color: #FFFFFF; } .part-title{ width: 70%; margin: 50px 0 0 10%; padding: 0 0 0 20px; font-size: 200%; border-left: solid 8px #00bfff; border-bottom: solid 3px #DDD; } .item{ width: 300px; height: 400px; overflow: hidden; margin: 50px 0 0 200px; border : solid 1px #bbbbbb; } .item-pic { text-align: center; } .item-pic img{ width: 300px; } .item-company { margin: 10px 0 20px 0; font-size: 120%; font-weight: bold; text-align: center; } .item-title{ width: 250px; margin: 0 0 20px 25px; } .item-price{ text-align: center; font-size: 140%; color: red; } .coupon{ position: absolute; width: 300px; height:200px; overflow: hidden; margin: 50px 0 0 800px; border : dashed 1px #bbbbbb; font-size: 120%; } .orderBox{ width: 500px; height: 300px; border: 2px solid #CCC; padding:10px 15px 20px 15px; margin: 50px 0 0 200px; font-size: 120%; } .orderBox input{ height: 40px; margin: 20px 0 20px 20px; font-size: 120%; } .coupon-title{ font-size:150%; margin: 10px 0 20px 0; } |
PHPで『月5万円』稼ぐためのロードマップなので、HTMLと同様に「CSS」についても詳しく説明しません。
しかし、1点だけ。
第13弾以降で、先ほど省略したと説明した入力フォーム部の実装をしていく際に、cssファイルを再び編集するのは、面倒くさいので、ここでは「orderbox」「coupon-title」ともに、完成バージョンの配置となるようなcssのコードを記載しています。
そのため、「style.css」内に、すでに「orderbox」「coupon-title」の記述がありますが、現時点では気にしなくて大丈夫です。
prebuy.php
「prebuy.php」は、ほとんどが「入力フォーム」で出来ているため、ここでは「タイトル」とその下の「割引率の表示部」を作成していきます。
まずは、「index.php」のときと同様に、HTML&CSSの界ルーティンとやらを記述していきましょう。このときタイトルは、「商品個数入力ページ」、リンクするcssファイルは「prebuy.css」としました。
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>商品個数入力ページ</title> <link rel="stylesheet" type="text/css" href="prebuy.css"> </head> <body> </body> <html> |
次はindex.phpのときと同様のステップで、<body>~</body>に「タイトル」とその下の「割引率の表示部」を作成していきます。
以下のように記述していきましょう!
1 2 3 4 5 6 |
<body> <div class="part-title">購入する商品と価格の確認</div> <div class="discount-msg"> 20%OFFの価格で購入できます。 </div> </body> |
それでは、「prebuy.php」のデザインを整える「prebuy.css」も作成していきましょう。
「prebuy.css」の内容がコチラ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
body { font-family:"Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; background-color: #FFFFFF; } .part-title{ width: 70%; margin: 50px 0 0 10%; padding: 0 0 0 20px; font-size: 200%; border-left: solid 8px #00bfff; border-bottom: solid 3px #DDD; } .discount-msg{ margin-left: 200px; } .orderBox{ width: 500px; height: 300px; border: 2px solid #CCC; padding:10px 15px 20px 15px; margin: 50px 0 0 200px; font-size: 120%; } .coupon-title{ font-size:150%; margin: 10px 0 20px 0; } .item-price{ margin: 10px 0 0 0; font-size: 140%; color: red; } .kosu{ height: 40px; width: 50px; margin: 20px 0 20px 20px; font-size: 120%; } .orderBox input{ height: 40px; margin: 20px 0 20px 20px; font-size: 120%; } .buy-msg{ font-size: 110%; width: 80%; } |
これまた、「prebuy.php」で作成していないようなクラス名が、たくさんでてきてしまっていますね。
「index.php」のときと同様に、今後PHPを使って入力フォームを実装していくときに、このcssファイル内に書かれているクラス名の要素も作成するので、現段階では、コピペで構いませんよ!
ここでは、「タイトル」とその下の「割引率の表示部」が完成バージョンのように、作成できればオッケーです!
ここまで実装できると、ブラウザでは以下のようになっていると思います。
index.phpの表示には「URL」のところに「localhost」と打てば良いが、それ以外のファイルを表示したいときは、「localhost/○○.php」とする。
ここでは、「localhost/prebuy.php」となる。

と思われた方がいましたら、すみません。
実は、この「20%OFFの価格で購入できます。」のところは、本来PHPで実装するべきところなので、今回は仮にこう書かせてもらってます!
PHPで実装するときも、クラス名などはそのまま使っていくので安心してください!
ひとまず、このまま先に進んでも大丈夫です。
confirm.php
さて、次は「confirm.php」を作成していく訳なのですが、みなさんなにか気付きませんか?
その通りです!
入力フォーム部に違いがあるものの(現時点では違いを分かる必要はありません)、今回はHTML&CSSでの枠組みの作成なので、先ほど作成した「prebuy.php」から、タイトル下の「割引率の表示部」を取ったものと、全く同じデザインになりそうですよね!
そのため、ここではほとんどが「prebuy.php」のコピペで終了し、さらにcssに関しては、新しくcssファイルを作らず、「prebuy.css」と対応付けることで、実装しましょう!
1つのCSSファイルに多数のPHP(HTML)ファイルを対応させることができるので、デザインがほぼ同じファイルが複数あるときは、CSSファイルは1つにまとめるほうが簡潔になる。
作成は超簡単です!
先ほど作った「prebuy.php」をコピーして、「confirm.php」に貼り付け。
するとこうなっていますね!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>商品個数入力ページ</title> <link rel="stylesheet" type="text/css" href="prebuy.css"> </head> <body> <div class="part-title">購入する商品と価格の確認</div> <div class="discount-msg"> 20%OFFの価格で購入できます。 </div> </body> <html> |
ここから以下の3点を修正するだけです。
- <title>~</title>の内容
- 「part-title」の内容
- 「discount-msg」の削除
上記の3点を、「confirm.php」の意図(確認ページ)に合うように修正すると、以下のようになるかなと思います。
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>購入確認ページ</title> <link rel="stylesheet" type="text/css" href="prebuy.css"> </head> <body> <div class="part-title">注文内容の確認</div> </body> <html> |
以上、完成です!
以下のようにブラウザで表示されたら大丈夫です。

finish.php
「finish.php」に関しては、完成バージョンと、先ほど作成した「confirm.php」と比べてもらうと分かると思うが、HTML&CSSで実装する部分については、全て「confirm.php」のコピペで大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>購入確認ページ</title> <link rel="stylesheet" type="text/css" href="prebuy.css"> </head> <body> <div class="part-title">注文内容の確認</div> </body> <html> |
以上です!
あっけなかったですね笑
util.php & data.php
この2つは、純粋にPHPだけで作成するファイルとなります!
そのため、HTML&CSSで枠作りをしていく今回の第11弾では、解説することはありません!
しかし、次の第12弾では、逆にこれらの「util.php」と「data.php」が主人公になってきます!
楽しみにしていてください!
まとめ
今回のPHPで『月5万円』稼ぐためのロードマップ第11弾では、「各ファイルを作成して、HTML&CSSで枠組みを作っていく」という工程を行いました!
次回の第12弾では、「util.php」と「data.php」を中心に、セキュリティ対策を踏まえたPHPプログラミングを勉強していきましょう!

今回は、以上になります!質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください!Twitterも是非フォローよろしくお願いします!
その他、勉強法や就活、プログラミングに関する相談なども受け付けています!