第116回：PHPで投票システム開発。

2019年2月22日 21:01

こんにちは。NGE16です。

今回から、簡易的な投票システムを作っていきたいと思います。
さっそくですが、進めていきましょう。

MySQLの設定

データを管理するために、MySQLの設定を行なっていきます。
まず、データベースの作成を行います。

create database nge16_poll_php;

ユーザーを作成します。

grant all on nge16_poll_php. * to dbuser@localhost identified by '******';

nge16_poll_phpのデータベースに切り替えます。

use nge16_poll_php

テーブルを作成します。

create table answers (
	id int not null auto_increment primary key,
	answers int not null,
	created datetime
);

作成されたテーブルを確認します。

mysql> desc answers;
+---------+----------+------+-----+---------+----------------+
| Field   | Type     | Null | Key | Default | Extra          |
+---------+----------+------+-----+---------+----------------+
| id      | int(11)  | NO   | PRI | NULL    | auto_increment |
| answers | int(11)  | NO   |     | NULL    |                |
| created | datetime | YES  |     | NULL    |                |
+---------+----------+------+-----+---------+----------------+
3 rows in set (0.00 sec)

画面の作成

index.phpを作成して、以下の記述を加えていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>投票システム</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>何が好きですか？</h1>
  <form action="" method="post">
    <div class="row">
      <div class="box" id="box_0" data-id="0"></div>
      <div class="box" id="box_1" data-id="1"></div>
      <div class="box" id="box_2" data-id="2"></div>
    </div>
    <div id="btn">投票の結果</div>
  </form>
</body>
</html>

styles.cssを作成して、以下の記述を加えていきます。

body {
  font-size: 16px;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 22px;
  margin: 30px 0;
}

.row {
  margin-bottom: 15px;
}

.box {
  width: 150px;
  height: 150px;
  display: inline-block;
  opacity: 0.5;
}

#box_0 {background: url('photo_0.jpg')}
#box_1 {background: url('photo_1.jpg')}
#box_2 {background: url('photo_2.jpg')}

ビルドインWebサーバーを立ち上げて、Webブラウザで確認を行います。

今回は以上になります。

データベースの作成から基本的な画面の作成を行なってきました。
次回はもう少し画面を調整して、システムを組んでいきたいと思います。
"PHPで投票システム開発。ver2.0" へ続く。

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