20. コンポーネント

オンライン教材 > PHP + MySQL Webサーバプログラミング

コンポーネントの基本

コンポーネントとは

Component（コンポーネント）は部品という意味で、Webアプリケーションでは、HTMLやプログラムを共通化したファイルのことを指します。コンポーネント化することで何度も同じコーディングをせず、効率的に開発ができます。

レイアウトとは

Layout（レイアウト）は、メニューやヘッダーなどの共通部分を１ファイルで構成するコンポーネントファイルです。例えばHTMLのheadタグやbodyタグなどのレイアウトファイルを用意することで、各ページはレイアウト部分をコーディングせずに済みます。

<html>
<head>
<title>Shopping</title>
</head>
<body>
  ページごとのコンテンツを表示
</body>
</html>

ディレクトリ作成

今回のプロジェクトはMVC構成で作成していきます。「app/」ディレクトリに「models/」「views/」「controllers/」ディレクトリを作成します。

php_sns
├── app
│        ├── controllers
│        ├── models
│        └── views

レイアウト

php_sns
├── app
│        └── views
│                 ├── components
│                 │        └── head.view.php
│                 └── layouts
│                           └── app.layout.php
├── regist
│        ├── confirm.php
│        ├── index.php
│        ├── input.php
│        └── result.php

レイアウトファイル作成

レイアウトファイル「views/layouts/app.view.php」を作成し、includeでViewファイルを表示します。

views/layouts/app.view.php
<!DOCTYPE html>
<html lang="ja">

<?php include 'views/components/head.php' ?>

<body>
    ...
</body>

</html>

headコンポーネント

レイアウトのheadタグを表示するコンポーネント「views/components/head.php」を作成します。

views/components/head.php
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Shop</title>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<< モデル

PHP + MySQL Webサーバプログラミング