こんにちは！
今回は、PHPで『月5万円』稼ぐためのロードマップの第10弾ということで、2つ目の課題である「クーポン機能の実装」を始めていきましょう！
前回まで作成していた「3択クイズアプリ」の作成は上手くできたでしょうか？もし、
って人がいたら、第5弾から見ていただけると良いと思います！
PHPで『月5万円』稼ぐためのロードマップでは、手順通りに第1弾から一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。今回から、一緒に作成していく「クーポン機能の実装」に関しても同じです。
そのためにも、PHPを初めからしっかり勉強したいって人はこの第10弾を見る前に、このPHPで『月5万円』稼ぐためのロードマップの使い方や、特長がわかる第1弾や第2弾を是非一度お読みください！
というかプログラミング初心者の方は必見です。この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に3倍くらい差が出てくると思います！
また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。
- PHPで月5万円稼げるようになりたい！
- クーポン機能を実装してみたい！
- 第9弾まで読んでくれた人
さて、ここからは実際に「クーポン機能」を一緒に実装していく訳なのですが、HTML＆CSSというプログラミング言語を使う場面がでてきます。
こう思われた方には、月5万円稼ぐためのロードマップのHTML&CSSシリーズもありますので、先にそちらから読んで頂けると良いと思います。
Contents
「クーポン機能」の完成イメージ
ひとまず、これから作成していく「クーポン機能」の完成イメージをご覧ください！
と思った方もいるかと思います。
結論から言うと、「クーポン機能」を実装する方が難しいです。なぜかというと、今回から一緒に作っていく「クーポン機能」は、セキュリティのことも考えて作成します。
詳しくは後述しますが、エンジニアになるためにはセキュリティ面での対策というのは、ほぼ必須となってきます。この「クーポン機能」の実装を機に、セキュリティ対策を意識していただけるようになってもらえればと思います！
「クーポン機能」を実装するまでの流れ
「クーポン機能」に限ったことではありませんが、基本的にはこの流れでプログラミング進めていくのが、一番PHPの役割をイメージしやすくてオススメです。
- 作りたいモノの構造を決定する
- HTML&CSSで枠だけを作る
- 作った枠にPHPで機能を追加していく
これらの具体的な説明については第5弾で説明しているので、イメージし辛い方はそちらをご覧ください。
それでは、上記の３ステップに沿って、「クーポン機能」の作成を進めていきましょう！
「クーポン機能」の構造決定＆理解
まずは、実際にプログラミングをしていく前に、これから作成していくモノの方針をしっかりと決定し、理解しておきましょう！
クーポン機能の構造を考える
今回、「クーポン機能」の実装においては以下の流れで実装してみようと思います。
- クーポンコードを入力
- クーポンコードと対応する割引額を別ファイルから参照
- 個数を選択
- 最終確認の画面
- 購入完了の画面
あくまでこの構造は、数ある中の１つのパターンなので他にどんな構造があるのかなど、考えてみるとPHPのスキルアップに繋がると思いますよ。
クーポン機能の構造を理解する
これから作成していく「クーポン機能」では、クーポン機能を実装するために、８つのファイルを作成していきます。
次節で、そのそれぞれのファイルの種類や役割、ファイル間でどのような流れで機能が実装できるのかを解説していきますので、それを見て、クーポン機能の構造を理解してください！
「クーポン機能」の実装に必要なファイル
先述しましたが、今回から実装していく「クーポン機能」では８つのファイルを作成していきます。
今回はセキュリティ対策も学んで欲しかったということもあり、ファイル数が多くなってしまいました。
しかし、ファイルを作成するところから丁寧にゆっくり進んでいきますので、安心してください！じっくりやっていけば必ず実装できます！
作成するファイルの種類と数
ファイルを8つ作成すると言いましたが、CSSファイル(PHPファイルのデザインを整える言語)だったり、使いまわしたりするファイルもあるため、そんなに身構えないでください！
また、先にHTML&CSSについて知りたいという方は、HTML&CSS完全攻略ロードマップをご覧ください。
以下に、作成するファイルの種類と数についてまとめておきます。
| PHP | 5個 |
|---|---|
| CSS | 2個 |
各ファイルに実装する機能の詳細
ここでは、上記で述べた各ファイルでどういう機能を実装していくかを説明していこうと思います。
また、CSSファイルについては、それぞれのPHPファイルの見た目を整えるという役割であり、「〇〇.php」というPHPファイルと、「○○.css」という〇〇の部分が共通するCSSファイルがあると思いますが、それぞれのCSSファイルが対応するPHPファイルの見た目を整えるという役目を担っています。
ただし、この後説明する「confirm.php」と「finish.php」については「prebuy.css」を使い回しているため、新たにCSSファイルを作成するということはしておりません。後できちんと説明しますので、現段階で分からなくても大丈夫です！
それでは、作成する各ファイルの概要をざっくりとイメージしていきましょう！
index.php
ここでは、まず「①クーポンコードを入力する画面」を作成していきたいと思います！
画面上部に「購入する商品」として、19,800円の腕時計を用意しています。(別になんでも構いません笑)
そして、画面下部には「クーポンコードを入力する」ところがあり、そこに、画面下部右側にあるクーポンコードを入力するといった形で「クーポン機能」を実装していこうと思います！
本来、クーポンは手持ちで持っている場合が多いと思い、写真中には「本来は表示されていない」と表記していますが、デバイス上に表記されるクーポンも増えてきたなと思うので無視してください笑
prebuy.php
ここでは、「②クーポンコードと対応する割引額を別ファイルから参照」と「③個数を選択」の部分を実装していきます。
そうですよね、しかも一番謎なのにも関わらず何か色付けされていて、さらに謎が深まるばかりですよね笑
ここに関しては、今回の「クーポン機能の実装」の1つの大きなテーマである「セキュリティ対策」に関する内容であり、次回の第11弾で説明します！
セキュリティ？ア〇ソック？くらいしか思ってない方でも全然大丈夫なので安心してください！笑
confirm.php
ここでは、「④最終確認の画面」を作成していきます。
「prebuy.php」で入力した「個数」と商品の代金によって、請求額がいくらになるのかを表示する画面です。
ここは、ただ確認するだけのファイルなので、これと言って説明することもありません！サッと見て、次に行きましょう！
finish.php
ここでは「⑤購入完了の画面」を作成していきます！
購入完了画面では「決済内容」・「配送期日」などを表示するような仕様としています。
画像を見てもらうと分かりますが、ほとんど「confirm.php」と同じレイアウトですよね！
ここまでがメインとなるファイル間の流れです！
そうですよね！「data.php」とか「util.php」にはまだ触れていませんもんね。このあとで説明していきますね！
data.php
「data.php」は、「クーポンコード」とそれに対応する「割引率」が記載されているPHPファイルです！
と思われた方もいらっしゃるかもしれません。
確かに、ファイルが増えると流れを理解するのも難しくなりますもんね。「data.php」については、次回の第11弾で詳しく説明しますので、現時点では、ファイル間で処理がどのような順序で行われているのかをなんとなく理解してもらえれば大丈夫です！
下のほうに「クーポン機能の処理の流れ」として、図を使って処理の流れを説明していますのでそちらを参考にしてください！
util.php
この「util.php」がやっかいな敵で、他のファイルと違って、クーポン機能にダイレクトに影響してくるわけではありません。
ちょっと待ってください。
今回はセキュリティを踏まえたPHPの実装をすることも、大きな課題でしたよね？
実は「util.php」は、「クーポン機能」の作成において、最大の敵であり、最も大事なキーポイントとなってくるファイルです。「util.php」も「data.php」と同様に、次回の第11弾で詳しく説明しますので、現時点では、ファイル間で処理がどのような順序で行われているのかをなんとなく理解してもらえれば大丈夫です！
ここまでが、各ファイルによる機能の詳細です。
クーポン機能の処理の流れ
ここでは、上記で説明したそれぞれのファイル間でどのように処理が行われているのかを、図で説明します。
ただし、この処理はあくまでも１つの例であり、もっと効率のよいプログラムや、追加したほうが良い機能などはたくさんあります。というか、カスタマイズを楽しんでもらうために、あえて「いやー、ここはこういう機能の方がいいんじゃない？」って思われるであろうところも作ってあります。
それぞれの流れについて説明しておきます。
- 「index.php」にクーポンコードを入力して「data.php」から割引率を参照して「prebuy.php」に値を渡す(POST)。
- 「prebuy.php」に個数を入力して、「confirm.php」に値を渡す(POST)。
- 「confirm.php」で最終確認ボタンを押して、値を「finish.php」に渡す(POST)。
- 「util.php」は、値をPOSTされたファイル全てに作用する（詳細は第11弾）
今回は、このようなプログラムの流れで「クーポン機能」として実装していきますが、他にも考えられる流れはありますので、自身で考えられる人は考えてみるのも良いと思います！
各ファイルに必要な画像のダウンロード
プログラムの流れは掴んでもらいましたね！
それでは、実際にプログラミングを始めていく前に、この「クーポン機能」を実装するのに必要な画像をダウンロードしておきましょう！
画像のダウンロードは、以下のGoogleドライブからダウンロードできます。
もちろんここで用意した画像は、例なので、ご自身で好きな画像を用意してもらっても大丈夫です！
そして、ここでダウンロードした画像は、この後「クーポン機能」を作成していくフォルダに「img」というフォルダを作成し、その中に保存しておきましょう。（僕の場合は、C:\xampp\htdocs\imgがそのフォルダにあたります。）
各ファイルのダウンロード先
この第10弾で説明した、各ファイルを次弾から一緒に作成していく訳ですが、ここではそこで作成するファイルの完成版をダウンロードできるようにしておきます。
付いていけなくなったり、どこが間違えているか分からなくなったりしたときにお使いください。
まとめ
今回は、「クーポン機能」の実装における、実際に作成をしていく前段階までを理解していただきました！
次回の、第11弾ではファイルを作成し、クーポン機能実装に向けての枠作りをしていきます！
今回は、以上になります！質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！Twitterも是非フォローよろしくお願いします！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
