プログラミング

【第11弾】クーポン機能を実装するための枠作り|Webアプリ開発の初めの手順

こんにちは!

今回は、PHPで『月5万円』稼ぐためのロードマップ第11弾ということで、2つ目の課題である「クーポン機能の実装」に取り掛かっていきたいと思います。

前回の第10弾ではPHPで「クーポン機能」を実装するにあたって、「完成イメージ」「必要な機能・ファイル」「処理の流れ」といったところを一緒に理解してきました!

今回は「クーポン機能」の実装のパート2となっていますので、まだこれまでの記事を読んでないと言う方は先に第10弾のほうから見てもらった方がいいと思います!

 

こんな方にオススメ
  • クーポン機能を実装してみたい
  • Webアプリ開発がしたい!
  • 第10弾まで見てくれた人

今回の第11弾では、「クーポン機能」を実装するための、見た目・枠組み(何と言っていいのか分かりませんが笑)を作成していきます!

つまり、このパートではPHPではなくHTML&CSSを主に使用していきます。

ライアン
ライアン
は?PHPを学ぼうと思っとるんやけど

と思われた方はすみません、、

と言いますのも、第2弾を見ていただいた方なら分かると思うのですが、「PHPは機能」、「HTML&CSS」は見た目という関係性は、基本的に覆すことができません。

そのため、どうしてもHTML&CSSを理解していただいてから、PHPを学んだ方がステップとしては自然であることは否めません。

しかし、このロードマップではPHPだけを学びたい!という方でも、先に進んでもらえるように、コピペの力を借りて対処していきたいと思います。

そのコピペの真意についてはこの次をお読みください!

プログラムのソースコード全文

3人がコードを組み合わせてプログラミングをしているイラスト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」に記述してください。

タイトルは「クーポンコード入力ページ」とし、「style.css」のCSSファイルとリンクさせるので、

<head>~</head>内に記入しています。

ファイル内メイン部分の枠作り

 

次は、<body>~</body>内に「index.php」の枠を作っていきます。

あくまでPHPのロードマップなので、説明はそこまで詳しくできませんので、コピペもしくは、HTML&CSSロードマップを先に学習するなどをして対応してください!

まず、各要素のクラス名は以下のように設定しています。

少し複雑でごちゃごちゃしていますが、第10弾で載せている「index.php」の完成バージョンと見比べながら、上の画像と同じ構成になるように<body>~</body>の中に、ソースコードを以下のように記述していってください。

また、このときソースコードを1から書いていってくれた人なら気付いていると思うのですが、上記の画像では、「クーポンコードを入力する」のところで、「orderbox」「coupon-title」を、追加する要素のクラスとして説明したにも関わらず、そのクラスを書いてませんよね。

この理由は、「クーポンコードを入力する」のところは入力フォーム、つまりPHPで実装していくため、今回はひとまずその手前まで実装していきました!

 

ここまでファイルの作成が完了していると、ブラウザでは以下のようになっていると思います。(「購入する商品」ははみ出て消されていますが笑)

完成バージョンと比べてもらうと、レイアウトが崩れていますね。

デザインを編集するのはCSSファイルなので、「index.php」と対応する「style.css」を編集していきましょう。

style.cssでデザインを整える

style.css」は以下のように記述していってください。

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」としました。

次はindex.phpのときと同様のステップで、<body>~</body>に「タイトル」とその下の「割引率の表示部」を作成していきます。

以下のように記述していきましょう!

 

それでは、「prebuy.php」のデザインを整える「prebuy.css」も作成していきましょう。

prebuy.css」の内容がコチラ。

これまた、「prebuy.php」で作成していないようなクラス名が、たくさんでてきてしまっていますね。

index.php」のときと同様に、今後PHPを使って入力フォームを実装していくときに、このcssファイル内に書かれているクラス名の要素も作成するので、現段階では、コピペで構いませんよ!

ここでは、「タイトル」とその下の「割引率の表示部」が完成バージョンのように、作成できればオッケーです!

ここまで実装できると、ブラウザでは以下のようになっていると思います。

index.phpの表示には「URL」のところに「localhost」と打てば良いが、それ以外のファイルを表示したいときは、「localhost/○○.php」とする。

ここでは、「localhost/prebuy.php」となる。

ライアン
ライアン
完成バージョンは20%が赤いけど、これは黒いやん。直さな!

と思われた方がいましたら、すみません。

実は、この「20%OFFの価格で購入できます。」のところは、本来PHPで実装するべきところなので、今回は仮にこう書かせてもらってます!

PHPで実装するときも、クラス名などはそのまま使っていくので安心してください!

ひとまず、このまま先に進んでも大丈夫です。

confirm.php

さて、次は「confirm.php」を作成していく訳なのですが、みなさんなにか気付きませんか?

ライアン
ライアン
さっきのprebuy.phpとほぼ一緒やんけ

その通りです!

入力フォーム部に違いがあるものの(現時点では違いを分かる必要はありません)、今回はHTML&CSSでの枠組みの作成なので、先ほど作成した「prebuy.php」から、タイトル下の「割引率の表示部」を取ったものと、全く同じデザインになりそうですよね!

そのため、ここではほとんどが「prebuy.php」のコピペで終了し、さらにcssに関しては、新しくcssファイルを作らず、「prebuy.css」と対応付けることで、実装しましょう!

1つCSSファイル多数PHP(HTML)ファイルを対応させることができるので、デザインがほぼ同じファイルが複数あるときは、CSSファイルは1つにまとめるほうが簡潔になる。

 

作成は超簡単です!

先ほど作った「prebuy.php」をコピーして、「confirm.php」に貼り付け。

するとこうなっていますね!

ここから以下の3点を修正するだけです。

  1. <title>~</title>の内容
  2. 「part-title」の内容
  3. 「discount-msg」の削除

上記の3点を、「confirm.php」の意図(確認ページ)に合うように修正すると、以下のようになるかなと思います。

以上、完成です!

以下のようにブラウザで表示されたら大丈夫です。

finish.php

finish.php」に関しては、完成バージョンと、先ほど作成した「confirm.php」と比べてもらうと分かると思うが、HTML&CSSで実装する部分については、全て「confirm.php」のコピペで大丈夫です。

以上です!

あっけなかったですね笑

 

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プログラミングを勉強していきましょう!

クーポン機能の実装を通してPHPのセキュリティ対策を学ぶべし!
【第12弾】クーポン機能の実装を通してPHPのセキュリティ対策を学ぶべし!こんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップ第12弾ということで、2つ目の課題である「クーポン機能の実装」のパ...

今回は、以上になります!質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください!Twitterも是非フォローよろしくお願いします!

 

その他、勉強法や就活、プログラミングに関する相談なども受け付けています!