PHP + MySQL で学生ポータルをゼロから作るとき、最初の一歩となる「学生一覧画面」を表示するまでの手順を、XAMPP（GUI・Windows/Mac想定） でまとめます。
これは3部作の1本目です（XAMPP GUI編 / XAMPP for Linux・CLI編 / Docker編）。アプリのPHPコードはどの環境でも共通で、違うのは「サーバの起動方法」「DBの作り方」「DB接続先ホスト名」だけ、という点が掴めると応用が効きます。
ゴール
ブラウザで開くと学生一覧の表が出る。作るファイルはこれだけ。
htdocs/myportal/
├── db.php # DB接続(共通)
├── manage_students.php # 学生一覧画面(ゴール)
└── style.css # 見た目(任意)
ステップ1: XAMPP を起動
- XAMPP Control Panel を開く
- Apache を Start
- MySQL を Start
http://localhost/ が開けばApacheはOK。
ステップ2: DBとテーブルを作る（phpMyAdmin）
http://localhost/phpmyadmin → 「SQL」タブ → 下記を実行。
CREATE DATABASE IF NOT EXISTS myportal CHARACTER SET utf8mb4;
USE myportal;
CREATE TABLE students (
s_id VARCHAR(20) PRIMARY KEY,
name VARCHAR(100) NOT NULL,
department VARCHAR(50),
semester INT,
email VARCHAR(100)
);
INSERT INTO students (s_id, name, department, semester, email) VALUES
('ktu1', 'Jack', 'MECH', 8, 'jack@example.com'),
('ktu2', 'Daniel', 'ECE', 2, 'daniel@example.com'),
('ktu3', 'Harry', 'IT', 4, 'harry@example.com');
一覧表示の確認用に、先にサンプルデータを入れておくのがコツ。空テーブルだと成功か失敗か判断できない。
ステップ3: プロジェクトフォルダ
htdocs の中に myportal を作る。
- Windows:
C:\xampp\htdocs\myportal\ - Mac:
/Applications/XAMPP/htdocs/myportal/
ステップ4: db.php（DB接続）
<?php
$servername = "localhost";
$username = "root";
$password = ""; // XAMPPのMySQLは初期パスワード空
$dbname = "myportal";
$con = mysqli_connect($servername, $username, $password, $dbname);
if (!$con) {
die("接続失敗: " . mysqli_connect_error());
}
?>
ステップ5: manage_students.php（学生一覧画面）
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生管理</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>学生一覧</h1>
<table>
<thead>
<tr><th>学籍番号</th><th>氏名</th><th>学科</th><th>セメスター</th><th>メール</th></tr>
</thead>
<tbody>
<?php
$result = mysqli_query($con, "SELECT * FROM students ORDER BY s_id");
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>".htmlspecialchars($row['s_id'])."</td>";
echo "<td>".htmlspecialchars($row['name'])."</td>";
echo "<td>".htmlspecialchars($row['department'])."</td>";
echo "<td>".htmlspecialchars($row['semester'])."</td>";
echo "<td>".htmlspecialchars($row['email'])."</td>";
echo "</tr>";
}
} else {
echo "<tr><td colspan='5'>学生が登録されていません</td></tr>";
}
?>
</tbody>
</table>
</body>
</html>
ポイント
-
include 'db.php'で接続を共通化 -
while (mysqli_fetch_assoc(...))で1行ずつ<tr>を出力（ループで表を作る） -
htmlspecialchars()でXSS対策
ステップ6: style.css（任意）
body { font-family: sans-serif; background:#f4f6f9; padding:30px; }
h1 { color:#333; }
table { border-collapse:collapse; width:100%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.1); }
th,td { border:1px solid #ddd; padding:10px 14px; text-align:left; }
th { background:#4a90d9; color:#fff; }
tr:nth-child(even) td { background:#f9f9f9; }
ステップ7: ブラウザで開く
http://localhost/myportal/manage_students.php
サンプルの3名が表示されれば完成。
うまくいかない時
| 症状 | 対処 |
|---|---|
接続失敗 |
MySQLが起動していない / DB名 myportal 不一致 |
| 真っ白 or コードがそのまま見える |
http://localhost/... 経由で開く（ファイル直開きはNG） |
| 「学生が登録されていません」 | ステップ2のINSERT未実行 |
Access denied for user 'root' |
rootにパスワード設定済み → db.php の $password を合わせる |
次の一歩
一覧ができたら、追加(INSERT)・編集(UPDATE)・削除(DELETE)・検索(WHERE LIKE) へ自然に拡張できます。
次回は同じアプリを GUIのないCLIだけのLinux（XAMPP for Linux） で動かします。