毎日通知を受け取り学習習慣を作ろう!
通知設定をすると毎日夜8時に通知を受け取れます。

※PCとAndroid環境におけるChromeとFirefoxにのみ対応

Web制作コース上級編

WordPressの基礎を学んで実務可能なスキルをつけよう

DAY 4

PHPでECサイトを作ってみよう①

さて、ここからはアプリケーションもどきを作っていきましょう。ECサイトのようなアプリです。

ECサイトもどきを作ることによって、以下のことを学んでいこうと思います。

  • PHPの基本文法の復習
  • PHPにおけるフォームの扱い
  • オブジェクト指向

まずはHTMLとCSSでアプリケーションの表示を実現したいので、以下の作業を行ってください。

作業手順

1. index.phpに以下を記述する

コピー
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./style.css" >
  <title>デイトラ PHP</title>
</head>
<body>
  <div class="container">
    <div class="app-container">
      <h1 class="title">DailyTrial Shopping</h1>
      <div class="cards-container">
        <div class="card">
          <img class="card-image" src="https://dnbz0c2oupsw6.cloudfront.net/bcekt8ctzrsfdj1gsus49v9tnhqu" alt="">
          <p class="card-title">ミネラルウォーター</p>
          <div class="flex justify-between">
            <p class="card-price">230円</p>
            <input min="0" class="item-number" type="number" value="0">
          </div>
        </div>
      </div>
      <div class="btn-footer bg-white">
        <input class="cart-btn" type="submit" name="submit" value="カートに追加" />
      </div>
    </div>
  </div>
</body>
</html>

2. style.cssというファイルを作成して以下を記述する

コピー
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}
.title {
  margin: 32px 0px;
  padding: 0px 12px;
  font-size: 22px;
  font-weight: 200;
}
.container {
  display: flex;
  justify-content: center;
}
.cards-container {
  display: flex;
  flex-wrap: wrap;
}
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.card {
  width: 50%;
  padding: 0px 12px;
  margin: 16px 0px;
}
.card-image {
  width: 100%;
  object-fit: cover;
  height: 184px;
  border-radius: 16px;
}
.item-number {
  margin-left: 8px;
  width: 115px;
  height: 16px;
  border-radius: 10px;
  border: none;
  text-align: center;
}
.item-number:focus {
  outline: none !important;
  border: 1px solid #61D9D4;
}
.card-title {
  font-size: 14px;
  margin: 8px 0px 4px;
}
.card-price {
  font-size: 12px;
  font-weight: bold;
}
.app-container {
  width: 380px;
  background-color: #F7F7F7;
  height: 100vh;
  position: relative;
}
.btn-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 80px;
  width: 100%;
  border: solid 1px #F7F7F7;
  justify-content: center;
  flex-direction: column;
  display: flex;
}
.bg-white {
  background: white;
}
.bg-gray {
  background-color: #2D2D2D;
}
.cart-btn {
  margin: 16px 16px;
  border-radius: 16px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
  background-color: #F76844;
  padding: 12px 16px;
  text-align: left;
  border: none;
}
.cart-item {
  padding: 0px 12px;
  line-height: 32px;
  margin-top: 24px;
}
.cart-item-img {
  width: 30%;
  margin: 0px 24px 0 0;
  border-radius: 16px;
  height: 100px;
  object-fit: cover;
}
.cart-item-detail {
  width: 70%;
}
.checkout-btn {
  margin: 16px 16px;
  border-radius: 16px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
  background-color: #61D9D4;
  padding: 12px 16px;
  border: none;
}

.payment-complete {
  position: absolute;
  top: 50%;
  margin-top: -100px;
  text-align: center;
  width: 100%;
}

3. 以下のzipファイルをダウンロードして解凍する

ZIPファイルをダウンロード

4. 解凍したファイルとフォルダすべてをindex.php と同じフォルダに移行する

※上記作業はコンピュータの操作に不慣れな方の場合、苦労するかもしれないのでもし分からなければメンターの方に質問してください。

最終的に以下のようなフォルダ構成になっていればOKです。

上の作業ができた状態で http://localhost:8888 を開くと以下のように表示されているはずです。

ソースコードを見てもらえたらわかるのですが、あくまでHTMLとCSSを書いているだけです。特にPHPを使っていません。なので続きではこれらをPHPで記述していきます。

TIPS

01. 静的ファイルをPHPで書き直そう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

02. foreachで商品情報を表示しよう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

03. PHPの別ファイルを読み込む

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

04. 買い物かごを表示しよう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

05. Formからデータを受け取ろう!

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

06. if文でHTMLの表示を切り替えよう!

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

07. フォームの入力内容から決済金額の合計値を出そう

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる

08. 困ったらまずは「よくある質問」をご覧ください!

このTipを閲覧するためには
コースを購入する必要があります

購入してこのTipをみる