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

こんにちは！

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

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

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

こんな方にオススメ

クーポン機能を実装してみたい
Webアプリ開発がしたい！
第10弾まで見てくれた人

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

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

ライアン

は？PHPを学ぼうと思っとるんやけど

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

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

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

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

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

Contents

プログラムのソースコード全文
各ファイルの作成と枠作り
index.php
prebuy.php
confirm.php
finish.php
util.php & data.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」に記述してください。

<!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>

<!DOCTYPE html>

<head>

<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ファイルとリンクさせるので、

<link rel=”stylesheet” type=”text/css” href=”style.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>の中に、ソースコードを以下のように記述していってください。

<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>

<body>

<div class="part-title">購入する商品</div>

<div class="item-company">SEIGO(セイゴ―)</div>

<div class="item-title">[SEIGO] 腕時計アメダス Eco-Drive エコ・ドライブGPS衛星電波時計 ruralblog限定モデル</div>

</div>

<div class="part-title">クーポンコードを使用する</div>

※本来は表示されていない。

<ul>

</ul>

</div>

</body>

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

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

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

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

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

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

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

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;
}

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

<!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>

<!DOCTYPE html>

<head>

<title>商品個数入力ページ</title>

</head>

<body>

</body>

<html>

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

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

<body>
  <div class="part-title">購入する商品と価格の確認</div>
  <div class="discount-msg">
    20%OFFの価格で購入できます。
  </div>
</body>

<body>

<div class="part-title">購入する商品と価格の確認</div>

20%OFFの価格で購入できます。

</div>

</body>

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

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

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%;

}

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％が赤いけど、これは黒いやん。直さな！

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

実は、この「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」に貼り付け。

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

<!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>

<!DOCTYPE html>

<head>

<title>商品個数入力ページ</title>

</head>

<body>

<div class="part-title">購入する商品と価格の確認</div>

20%OFFの価格で購入できます。

</div>

</body>

<html>

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

<title>～</title>の内容
「part-title」の内容
「discount-msg」の削除

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

<!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>

<!DOCTYPE html>

<head>

<title>購入確認ページ</title>

</head>

<body>

<div class="part-title">注文内容の確認</div>

</body>

<html>

以上、完成です！

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

finish.php

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

<!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>