paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

トップ > paiza-PaizaCloud > 【PHP x MySQL入門】 - はじめてのPHPとMySQLデータベースWeb開発チュートリアル

【PHP x MySQL入門】 - はじめてのPHPとMySQLデータベースWeb開発チュートリアル

paiza-PaizaCloud プログラミング Tech-Webサービス紹介 paiza Tech PaizaCloud-tutorial
f:id:paiza:20180925115954p:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡([twitter:@yoshiokatsuneo])です。

皆さんはPHPとMySQLを使ってプログラミングをしたことがありますか？

PHPは、インターネットが使われ始めた1995年に公開されたWeb開発のためのプログラミング言語です。

FacebookやWordpressといった有名なサービスの開発にも、PHPが使われているんですよ。Web開発で幅広く使われているため、エンジニアの求人数も非常に多い言語です。

ただ、PHPはWeb開発向きの言語ですが、いざ使おうとすると言語の実行環境やデータベースの環境構築、デプロイなどが必要となります。これが意外と厄介で、手順通りにインストールしたつもりでも、OSやバージョン、他のソフトウェアなど、さまざまな原因でエラーが出たり失敗したりしてしまうことがあります。

そこで今回は、ブラウザだけでPHPとMySQLを使ったWeb開発ができるPaizaCloud Cloud IDEを使って、掲示板のようなTodoリストが編集できるサービスを簡単に作ってみます。（現時点で最新のPHP7.2とMySQLで作ります）

手順に沿って進めれば、初心者でも10分程度で作れるかと思いますので、ぜひ挑戦してみてください。

PHPについて

かつて、Web開発と言えばPerlやCGIなどを理解した人が試行錯誤しながら取り組むもので、初心者が簡単に実践できるようなものではありませんでした。

それがPHPの登場により、HTMLの中にプログラムを埋め込むことで、初心者でも比較的簡単にWeb開発ができるようになったのです。一時はWeb開発と言えばPHPと言われるぐらいでした。

世界中のWebサイトの約30%がWordPressで作られているという統計(Historical trends in the usage of content management systems, January 2020)や、Webサイトで使われている言語の80%近くがPHPであるというデータ(Usage Statistics and Market Share of Server-side Programming Languages for Websites, January 2020)もあります。PHPは、Web開発で最も使われている言語であると言ってもよいでしょう。

f:id:paiza:20180925121954p:plain

ここ数年はWeb開発に使える言語も増えてきたので、「PHPは動きが遅い言語」「遅れていて使いづらい」と思っていた人もいるかと思います。

ただ、最近は速度の改善やオブジェクト指向も導入されている上、Laravelなどの使いやすくて優れたフレームワークも登場して、さらにWeb開発で使いやすい言語となっています。ぜひ試してみてください。

これから紹介していく手順通りにPaizaCloudを使えば、PHPなどのさまざまな言語やフレームワーク、MySQLなどのデータベースを使ったWeb開発が初心者でも簡単に試すことができます。また、開発環境がクラウド上で動作しているので、自分でサーバなどを用意しなくても、作ったWebサービスをその場で公開することも可能です。

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubやGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

まずは、開発環境となるサーバを作りましょう。

f:id:paiza:20171213234155p:plain

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

PHP, phpMyAdmin, MySQLをクリックして「新規サーバ作成」ボタンを押します。

f:id:paiza:20180216002923p:plain

3秒程度で、PHPとMySQLデータベースを使える開発環境がブラウザ上にできあがります。

f:id:paiza:20180216003434p:plain

サンプルのPHPファイルとブラウザが開いています。ここでは必要ないので、これらのウインドウは閉じておきましょう。

PHPを使ってみる

まずは、PHPを使って何か表示させてみましょう。

画面左側のファイル管理ビューを見ると、"public_html/index.php"というファイルが存在しますので、ダブルクリックして開きます。

f:id:paiza:20180925120647p:plain

デフォルトのコードが入っていますが、一度削除して、以下のコードを入れてみましょう。

public_html/index.php:

<h1>Hello</h1>

f:id:paiza:20180925120710p:plain

ファイルが編集できたら、「保存」ボタンを押すか、「Ctrl-S」または「Command-S」キーで保存します。

次に、このファイルをブラウザで表示させてみます。

ファイル管理ビューの"public_html/index.php"を右クリックして表示されるメニューから、「ブラウザを実行」を選びます。(または、左側のブラウザアイコンでブラウザを起動してから、URLバーに"http://localhost/~ubuntu/"と入れてエンターキーを押します。 )

f:id:paiza:20180925120827p:plain

f:id:paiza:20180925120909p:plain

Helloという文字が大きく表示されましたね。HTMLを直接記述できています。

次に、PHPのコードも書いてみましょう。以下のように"public_html/index.php"ファイルを編集します。

<h1>Hello</h1>
<?php
    echo 'Hello ' . 'PHP';
?>

f:id:paiza:20180925121006p:plain

ファイルが編集できたら、「保存」ボタンを押すか、「Ctrl-S」または「Command-S」キーで保存します。

PHPでは、HTML中にPHPのコードを埋め込みます。PHPのコードを埋め込むには"<?php"と、"?>"で囲いを作り、その中にPHPのコードを記述します。ここでは、"echo"という命令を使うことで文字を表示しています。表示する文字は、'Hello ' . 'PHP'という形で文字列を連結してみました。

それでは、ブラウザをリロードするか、ブラウザ上で表示させてみましょう。

(ブラウザビューを閉じている場合、ファイル管理ビューの"public_html/index.php"を右クリックして表示されるメニューから、「このファイルを実行」を選んでください。または、ブラウザアイコンでブラウザを起動してから、URLバーに"http://localhost/~ubuntu/"と入れてエンターキーを押します。)

f:id:paiza:20180925121040p:plain

"Hello PHP"という文字が表示されましたね。PHPのコードが実行されたことがわかります。

このように、実行されたPHPのコードはHTMLとして表示することができます。

なお、以下のように"<?="という記法を使うことで、echoがなくても表示することもでき、コードをより簡潔にすることができます。

<h1>Hello</h1>
<?=
    'Hello ' + 'PHP';
?>

"1+2", "3*3", "2**10"(2の10乗)のように計算結果を表示することもできますので、いろいろ試してみてください。

データベースを作成

次に、データベースを使ってみましょう。

データベースサーバ(MySQL)はサーバ作成時に設定したので起動していますが、設定していない場合は、以下のように起動しておきます。

$ sudo systemctl enable mysql
$ sudo systemctl start mysql

PaizaCloudでは、このようにroot権限でパッケージをインストールすることもできます。

まずはMySQL上に、このアプリケーションで使うデータベースを作成します。

ここでは、mysqlコマンドを使って、"mydb"というデータベースを作ります。

PaizaCloudでは、ブラウザ上で、コマンドを入力するための「ターミナル」を使うことができます。

画面左側の、「ターミナル」のボタンをクリックします。

f:id:paiza:20171213234317p:plain

以下のようなコマンドを実行しましょう。

$ mysql -u root
create database mydb;
exit

f:id:paiza:20180216010049p:plain

データベースが作成できました。

テーブルの作成

続いて、データベース上にテーブルを作成してみましょう。

ターミナル上で、以下のようなコマンドを実行して"todos"という名前のテーブルを作成します。

$ mysql -u root mydb;
create table todos(id int auto_increment primary key not null, name text);
exit

テーブルが作成できました。

phpMyAdminの利用

作成したデータベーステーブルのデータは、phpMyAdminでも確認できます。

PaizaCloudで、青いアイコンのPaizaCloudメニューをクリックし、"phpMyAdmin"の"open phpMyAdmin"を選びます。(または、PaizaCloudのブラウザ上で、"http://localhost/phpmyadmin/"と入力します。)

f:id:paiza:20180228120501p:plain

phpMyAdminが表示されました。ここで、データベースの閲覧、編集などができます。開発中にデータベースの内容を確認しながら進めると理解も深まるので、ぜひやってみてください。

Todoリストの作成

それでは、Todoリストを作成してみましょう。

"public_html/index.php"を、以下のように編集します。

<?php
    $pdo = new PDO("mysql:host=localhost;dbname=mydb;charset=utf8","root","", [PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING]);

    if(isset($_POST['submit']) ){
        $name = $_POST['name'];
        $sth = $pdo->prepare("INSERT INTO todos (name) VALUES (:name)");
        $sth->bindValue(':name', $name, PDO::PARAM_STR);
        $sth->execute();
    }elseif(isset($_POST['delete'])){
        $id = $_POST['id'];
        $sth = $pdo->prepare("delete from todos where id = :id");
        $sth->bindValue(':id', $id, PDO::PARAM_INT);
        $sth->execute();
    }
?>

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <title>Todo List</title>
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
    <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
</head>

<body class="container">
    <h1>Todo List</h1>
    <form method="post" action="">
        <input type="text" name="name" value="">
        <input type="submit" name="submit" value="Add">
    </form>
    <h2>Current Todos</h2>
    <table class="table table-striped">
        <therad><th>Task</th><th></th></therad>
        <tbody>
<?php
    $sth = $pdo->prepare("SELECT * FROM todos ORDER BY id DESC");
    $sth->execute();
    
    foreach($sth as $row) {
?>
            <tr>
                <td><?= htmlspecialchars($row['name']) ?></td>
                <td>
                    <form method="POST">
                        <button type="submit" name="delete">Delete</button>
                        <input type="hidden" name="id" value="<?= $row['id'] ?>">
                        <input type="hidden" name="delete" value="true">
                    </form>
                </td>
            </tr>
<?php
    }
?>
        </tbody>
    </table>
</body>
</html>

ファイルが編集できたら、「保存」ボタンを押すか、「Ctrl-S」または「Command-S」キーで保存します。

コードを見てみましょう。

まず、「$pdo = new PDO()」ではPHPでデータベースを利用するための、PDOオブジェクトを作成します。引数では、MySQLサーバ名("localhost")、データベース名("mydb")、ユーザ名("root")、パスワード("")を指定しています。また、エラーメッセージが表示されるように、オプションの配列でで"PDO::ATTR_ERRMODE" を "PDO::ERRMODE_WARNING"に設定しておきます。

「isset($_POST['submit'])」では、入力フォームでTodoを追加ボタンが押された場合かどうかを判定しています。入力フォームから送信された場合、"$_POST['submit']"がtrueになるので、このif文の中身が実行されます。

"$_POST['name'];"には、"name"という名前の入力フォームの値が取得できますので、$nameに設定しておきます。

続いて、SQL文を作成して実行します。SQL文の実行には、prepare()、bindValue()、execute()というPDOの関数を利用します。

prepare()ではデータベースを操作するためのSQL文を設定します。ここでは、"INSERT INTO todos"文でデータベースに行を追加します。

bindValue()では、SQL文の中の":名前"の部分を値で置き換えることができます。SQL文を直接記述せずに、このようにすることで、エスケープなどができ、より安全にSQLが実行できます。

最後にexecute()で準備したSQL文を実行します。

「"isset($_POST['delete'])"」のif文では、Todo削除時の動作を記述します。削除ボタンでは"delete"という名前の隠しフォームを用意しているので、"$_POST['delete']"がtrueになり、このif文が実行されます。

"$_POST['id'];"で削除するTodoのidを取得し、SQLの"DELETE FROM todos"文でそのidのtodoを削除します。

＜head＞タグではmilligramという簡単に表示を綺麗にできるCSSフレームワークを利用するため、＜link＞タグでスタイルシートを読み込みます。

＜body＞タグでは、入力フォームを作成します。"name"という名前のテキスト入力フォームと、"submit"という名前のフォーム送信ボタンを作成しています。

Todo一覧は、＜table＞タグで作成しています。"table"、"table-striped"というクラスを設定することで、テーブルを綺麗に表示します。

そして、テーブル一覧を取得するPHPコードを"＜?php"の中に記述します。prepare("SELECT * FROM todos")でtodosテーブルの一覧を取得するSQLを準備し、execute()でそのSQLを実行します。

"foreach($sth as $row)"ではtodoを一個ずつ$rowに設定していきます。

テーブルの各行ではtodoの値を表示します。"＜?="タグを使い、Todoの値となる$row['name']を表示します。HTMLタグは、エスケープしないとHTML表示になってしまいセキュリティ的にも問題があるので、htmlspecialchars()でエスケープしておきます。

また、削除ボタンを追加するため、各行にフォームを設定します。フォームでは、隠し入力欄でTodoのidとなる"$row['id']"と値として設定しておきます。

最後に、「＜？php } ?＞」でforeach文を閉じておきましょう。

動作確認

以上でTodoリストのアプリケーションが完成です。実際に動かしてみましょう。

PaizaCloud上のブラウザをリロードするか、ブラウザ上で表示してみます。

(ブラウザビューを閉じている場合、ファイル管理ビューの"public_html/index.php"を右クリックして表示されるメニューから、「このファイルを実行」を選んでください。または、ブラウザアイコンでブラウザを起動してから、URLバーに"http://localhost/~ubuntu/"と入れてエンターキーを押します。)

最初はTodoはないのですが、"Todo List"ページが表示されています。

Todoの追加や削除もやってみましょう。

f:id:paiza:20180925121339p:plain

動きましたね！これでPHPで作ったTodoリストの完成です！

なお、PaizaCloudの無料プランでは、一定時間が経つとサーバは停止します。継続的に動かしたい場合は、ベーシックプランへアップデートしてください。

詳しくはこちら https://paiza.cloud

まとめ

というわけで、面倒な開発環境などをすることなく、PaizaCloudだけでPHPとDBを使ったアプリケーションを作ってみました。

すぐに作れるので、みなさんもぜひ試してみてください！

(何かサービスができたらpaiza(@paiza_official)まで教えてくれるとうれしいです！)

また、動画でプログラミングが学べるpaizaラーニングに「Webアプリ開発入門 PHP-Web編」が公開されました。

PHPを使ったWeb開発について興味がある方は、ぜひごらんください！

Webアプリ開発入門 PHP-Web編について詳しくはこちら

「PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

paizaのおすすめコンテンツ

PPG proken プログラミングゲーム「初恋 プログラミング研究会〜海に行こうよ〜」 PPG Bingo プログラミングゲーム「コードレビューBINGO!!」 paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.