phpを勉強する！

葉月小夜雑談コメントを残す

まあ、タイトル通りなのですが、phpを勉強することにしました。

困ったらhtml/CSSで書いていた私ですが、WordPressを本格的にやる関係上、作らざるを得なくなりました。

ということで、今回からChatGPTやネットを駆使して、htmlを使える人間がphpを勉強したら、どれくらいで理解できるのか、やっていこうと思います。

まあ、ネット関連や他の言語の知識もあるので、html/CSSのみの人よりも早いとは思いますが、目標は3日で理解と改変ができるようにする！ってことで、やっていきます。

DAY1

まずは1日目

基本的なheader、footer、indexを作って、サイトにしましょう。

基本的な使い方として、ヘッダ、メイン、フッダー、これらを使用した3ページ構成のサイトを構築したいです。
どうすればいいかわかりやすく教えてください

と、ChatGPTにお願いしたところ、


ヘッダー、メインコンテンツ、フッターを使用して3ページ構成のウェブサイトを構築するには、以下の手順をたどると良いでしょう。この例では、HTMLとPHPを組み合わせて使用します。

1. プロジェクトの構造を設定する

まず、ウェブサイトの基本的なファイル構造を作成します。以下のような構造が考えられます：

cssCopy code

website/ │ ├── index.php ├── about.php ├── contact.php ├── header.php ├── footer.php └── styles.css

  • index.php, about.php, contact.php はウェブサイトのメインページです。
  • header.php と footer.php はウェブサイトの共通部分を含みます。
  • styles.css はウェブサイトのスタイルを定義します。

2. ヘッダーとフッターの作成

header.php

phpCopy code

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>あなたのウェブサイトのタイトル</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="index.php">ホーム</a></li> <li><a href="about.php">会社情報</a></li> <li><a href="contact.php">連絡先</a></li> </ul> </nav> </header>

footer.php

phpCopy code

<footer> <p>&copy; 2023 あなたの会社名. All rights reserved.</p> </footer> </body> </html>

3. 各ページの作成

各ページ (index.php, about.php, contact.php) でヘッダーとフッターを含めます。例えば、index.php は以下のようになります：

index.php

phpCopy code

<?php include 'header.php'; ?> <main> <h1>メインコンテンツ</h1> <p>ここにメインコンテンツが入ります。</p> </main> <?php include 'footer.php'; ?>

about.php や contact.php も同様に、メインコンテンツ部分を適宜変更して作成します。

4. CSSでスタイルを適用する

styles.css

cssCopy code

body { font-family: Arial, sans-serif; } header, footer { background-color: #f1f1f1; padding: 10px 0; text-align: center; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { text-decoration: none; color: #333; }

これで基本的な3ページ構成のウェブサイトが完成します。この構造を基に、コンテンツやスタイルを拡張し、より複雑なサイトを作成することができます。

by ChatGPT

とまあ、非常に丁寧に返してくれました。

ひとまず、この通りに作ってみましょう。

コピペで作成したので、index.phpを開きましょう！

……と言っても、ただ、ブラウザで開くだけでは使えません。

index.phpがそのまま文章で出てきてしまいます。

起動方法を聞いてみましょう。

PHPベースのウェブサイトを起動するためには、ウェブサーバー環境が必要です。ローカルマシンでPHPウェブサイトを起動するには、次の手順をたどります。

1. ローカルサーバー環境のセットアップ

PHPとサーバー（ApacheやNginxなど）を含むローカルサーバー環境をセットアップします。一般的なオプションには、以下のようなものがあります：

  • XAMPP: Windows、Mac、Linuxで利用可能なPHP開発環境。Apacheサーバー、MySQL、PHP、Perlが含まれています。
  • MAMP: MacとWindowsで利用可能。Apacheサーバー、MySQL、PHPを含みます。
  • WampServer: Windows専用の環境。Apache、PHP、MySQLが含まれています。

これらのいずれかをダウンロードし、インストールします。

2. サーバーの起動

インストール後、XAMPP、MAMP、WampServerなどのコントロールパネルを開き、Apache（ウェブサーバー）を起動します。

3. プロジェクトファイルの配置

作成したPHPファイル（例えば、index.php、about.php、contact.php、header.php、footer.php、styles.css）をサーバーのドキュメントルートディレクトリにコピーします。デフォルトでは、これらは以下の場所になります：

  • XAMPP: htdocs フォルダ内
  • MAMP: htdocs フォルダ内
  • WampServer: www フォルダ内

4. ブラウザでのアクセス

サーバーが起動したら、ブラウザを開き、以下のアドレスにアクセスします：

arduinoCopy code

http://localhost/

そこから、あなたのプロジェクトのファイル（例：index.php）へのリンクを見つけるか、直接アドレスバーにファイル名を入力します（例：http://localhost/index.php）。

これで、ローカルサーバー上でPHPウェブサイトが起動し、ブラウザを通じてアクセスできるようになります。

by ChatGPT

つまり、鯖立てて、ApacheとMySQLを使って、phpの動作環境を作りなさい。
ということですね。

作ればいいんでしょ。作れば

ということで、環境をセットアップしてきました。

使用ソフトはMAMP（Version 5.0.5）です。

完成したのがこちらです。

しまった。これでは様式美から外れていますね。

これで良し

今回使用したのは、header、footer、indexの3つで、表示しているのはindex.phpです。

<?php include 'header.php'; ?>

<main>
    <h1>Hello World</h1>
</main>

<?php include 'footer.php'; ?>

phpは<?php>で他ファイルを呼び出せる。というわけですね。

便利だなぁ

さて、Chrome開いているので、中身を見てみましょう

<html lang="ja"><head>
    <meta charset="UTF-8">
    <title>あなたのウェブサイトのタイトル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="vsc-initialized" cz-shortcut-listen="true">
    <header>
        <nav>
            <ul>
                <li><a href="index.php">ホーム</a></li>
                <li><a href="about.php">会社情報</a></li>
                <li><a href="contact.php">連絡先</a></li>
            </ul>
        </nav>
    </header>

<main>
    <h1>Hello World</h1>
</main>

<footer>
        <p>© 2023 あなたの会社名. All rights reserved.</p>
    </footer>


</body></html>

内容は、一般的なhtmlと変わりません。

他で言う変数のような感じで、ファイルを扱えるのが、phpの利点かつ特徴ということですね。

パスに関しては、headerやfooterの相対パスで通せるようです。headerやfooterを一つのファイルにまとめ、フォルダ毎に要素を分割しておくことで、鯖もすっきりします。

今日は、ここまでにしましょう。

htmlさえわかれば、非常にとっつきやすい技術なので、ぜひ皆さんも触ってみましょう！

……あれ？これ以外って、何やればいいんだ？

コメントを残す

メールアドレスが公開されることはありません。必須項目には印がついています *