見出し画像
Photo by hananosu

（初心者保存版）プログラミング全体にとりあえず触れてみる②

WEBプログラミング

今回WEBアプリ制作全体に触れるにあたって、作るアプリを決めていこうと思います！
今回は　”マッチングアプリ”　を作ろうと思います。

マッチングアプリは皆さんよく親しんでいるし、クラウドワークスなどでも制作案件が多数ありますので、今後この知識がとても役に立つと思います。

では、作っていこうと思い

マッチングアプリの概要

マッチングアプリは、ユーザーがプロフィールを作成し、共通の興味や目的に基づいて他のユーザーとマッチングするアプリです。
最近では、企業と求職者のマッチングやサービス提供者や利用者などのマッチングなども増えてきました。今回は・・・

　　”訪問美容師とお客さんを繋ぐマッチングアプリ”
　　
これを想定して作って作ることにしましょう！

まず、今回使う技術を整理します。今回は”LAMPスタック”で作ります。

＜LAMPスタックとは・・・＞

  • Linux:　　オペレーティングシステム。サーバー環境構築に使います。

  • Apache:　　Webサーバー。

  • MySQL:　　データベース。データを管理し、検索、挿入、更新、削除を行います。

  • PHP:　　サーバーサイドのスクリプト言語。データベースとのやり取りや、フォームデータの処理、セッション管理などを行い、ユーザーの要求に応じてコンテンツを動的に生成します。　

”LAMP”について少し理解できたら、まず自分のパソコンに”LAMP”を実行するための仮想環境を作っていきます。この開発環境でマッチングアプリを作っていきます。（※仮想環境で完成したマッチングアプリは、後に本番環境に移行します）

＜仮想環境を構築する＞



LAMPの開発環境の構築にはいろいろありますが、今回はXAMPPというサービスを使いたいと思います。XAMPPはLinux、Apache、MySQL、PHPを全部を使えてしまう優れたサービスです。

XAMPPのダウンロードとインストール

  • 公式サイトにアクセス:

    • XAMPPの公式サイトにアクセスします。

    • 使用するOSに対応するXAMPPのバージョンをダウンロードします。

  • インストール手順:

    1. ダウンロードしたインストーラーを実行します。

    2. インストールウィザードに従って進めます。インストールするコンポーネント（Apache、MySQL、PHPなど）を選択します。

    3. インストール先のディレクトリを指定し（デフォルト設定で問題ありません）、インストールを完了させます。

XAMPPの基本操作

  • XAMPPコントロールパネルの起動:

    • インストールが完了したら、XAMPPコントロールパネルを起動します。

    • コントロールパネルの各部分（Apache、MySQL、スタート/ストップボタン）の説明を行います。

  • ApacheとMySQLの起動:

    • ApacheとMySQLの「スタート」ボタンをクリックして、それぞれを起動します。

    • 正常に起動しているかを確認するために、Apacheのステータスが「Running」と表示されることを確認します。

4. 基本的な動作確認

  • ローカルホストの確認:

    • ブラウザを開き、アドレスバーに「http://localhost/」と入力してXAMPPのデフォルトページが表示されることを確認します。

    • このページが表示されれば、Apacheが正常に動作していることを確認できます。

  • phpMyAdminのアクセス:

    • ブラウザで「http://localhost/phpmyadmin/」にアクセスして、phpMyAdminが正常に動作していることを確認します。

    • phpMyAdminはMySQLデータベースを管理するためのWebベースのツールです。

5. PHPスクリプトの作成と実行

  • プロジェクトディレクトリの作成:

    • XAMPPのインストールディレクトリ内の「htdocs」フォルダに移動します（例：C:\xampp\htdocs\）。

    • 新しいフォルダを作成し、プロジェクトの名前を付けます（例：「my_first_project」）。

  • PHPスクリプトの作成:

    • テキストエディタ（例：VSCode、Sublime Text、Notepad++など）を使用して、新しいPHPファイルを作成します。

    • 以下のコードを入力し、「index.php」という名前で保存します。

<?php
echo "Hello, World!";
?>

  • PHPスクリプトの実行:

    • ブラウザを開き、アドレスバーに「http://localhost/my_first_project/index.php」と入力します。

    • 「Hello, World!」と表示されれば、PHPスクリプトが正常に実行されています。

6. MySQLデータベースの使用

  • データベースの作成:

    • phpMyAdminを開き、新しいデータベースを作成します（例：「my_first_database」）。

  • テーブルの作成:

    • phpMyAdminで「my_first_database」を選択し、新しいテーブルを作成します（例：「users」）。

    • テーブルには以下のカラムを追加します：

      • id (INT, PRIMARY KEY, AUTO_INCREMENT)

      • name (VARCHAR, 50)

      • email (VARCHAR, 50)

  • データの挿入と取得:

    • PHPを使用して、データベースにデータを挿入し、取得するスクリプトを作成します。

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "my_first_database";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Insert data
$sql = "INSERT INTO users (name, email) VALUES ('John Doe', 'john@example.com')";
if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

// Retrieve data
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // Output data of each row
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
    }
} else {
    echo "0 results";
}

$conn->close();
?>

このスクリプトを「index.php」としてプロジェクトディレクトリに保存し、ブラウザで実行します。

今回は自分のパソコンに仮想環境を構築するまでやっていきました！
仮想環境構築は慣れてないうちは少し難しいかもしれませんが、ユーチューブなど調べながらなんとか乗り越えてください٩( ''ω'' )و。自分も初めての時は大変でした(´;ω;｀)
次回からいよいよマッチングアプリ制作をしていきたいと思います！

この記事が気に入ったらサポートをしてみませんか？