最終回 いままでの講義で学んだ知識のおさらいと実習
DBとファイルの用意
DB作成SQL
では、実習を行うためのデータを作成します。
以下のSQLを利用して、DB「db_test_004」を作成してください。
CREATE DATABASE IF NOT EXISTS `db_test_004` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE `db_test_004`; CREATE TABLE `shop` ( `shop_id` int(11) NOT NULL, `shop_name` varchar(255) NOT NULL, `genre` varchar(255) NOT NULL, `genre_name` varchar(255) DEFAULT NULL, `price` int(11) NOT NULL, `address` varchar(255) DEFAULT NULL, `link` varchar(255) DEFAULT NULL, `img` varchar(255) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; INSERT INTO `shop` (`shop_id`, `shop_name`, `genre`, `genre_name`, `price`, `address`, `link`, `img`) VALUES (1, 'SHOKUDO YArn', 'fusion', 'イノベーティブ・フュージョン', 15000, '石川県小松市吉竹町1-37-1', 'https://tabelog.com/ishikawa/A1702/A170202/17009741/', 'https://tblg.k-img.com/restaurant/images/Rvw/91739/91739094.jpg'), (2, '割烹 鮨 米八', 'sushi', '寿司', 8000, '石川県小松市松任町58', 'https://tabelog.com/ishikawa/A1702/A170202/17001073/', 'https://tblg.k-img.com/restaurant/images/Rvw/71454/71454152.jpg'), (3, '餃子菜館 勝ちゃん', 'chinese', '中華料理', 1000, '石川県小松市土居原町395', 'https://tabelog.com/ishikawa/A1702/A170202/17000692/', 'https://tblg.k-img.com/restaurant/images/Rvw/86534/86534201.jpg'), (4, 'すし食いねぇ！ 小松沖店', 'sushi', '寿司', 2000, '石川県小松市沖町区画整理地8街区7', 'https://tabelog.com/ishikawa/A1702/A170202/17007630/', 'https://tblg.k-img.com/restaurant/images/Rvw/26405/26405689.jpg'), (5, 'ヨシタベーカリー ', 'bread', 'パン', 999, '石川県小松市矢崎町ネ91-1', 'https://tabelog.com/ishikawa/A1702/A170202/17001363/', 'https://tblg.k-img.com/restaurant/images/Rvw/100056/100056409.jpg'); ALTER TABLE `shop` ADD PRIMARY KEY (`shop_id`); ALTER TABLE `shop` MODIFY `shop_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
ファイルの作成
続いて、C:\xampp\htdocs内にdb_test_004.phpファイルを作成し、以下をコピペします。
<?php
require_once('db_connect.php');
try {
// データベースに接続
$db_name = 'db_test_004';
$pdo = db_connect($db_name);
//例外処理を投げるようにする（throw）
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//ここに店舗一覧を取得
//データベース接続切断
$pdo = null;
} catch (PDOException $e) {
// エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する
header('Content-Type: text/plain; charset=UTF-8', true, 500);
exit($e->getMessage());
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>db_test_004</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="container wrp-bbs">
<p class="lead my-4">【食べログ】小松市のお店、レストランランキング</p>
<div class="row">
<div class="col-lg-4 genre">
<div class="card mb-3">
<a target="_blank" href="link"><img class="card-img-top" src="img"></a>
<div class="card-body">
<span class="badge badge-danger">No.i</span>
<small class="card-subtitle text-muted">genre_name</small>
<h4 class="card-title"><a target="_blank" href="link">shop_name</a></h4>
<p class="card-text">address</p>
</div>
<div class="card-footer text-muted">
平均予算：￥price
</div>
</div>
</div>
</div>
</div>
</body>
</html>
実習の課題とヒント
DBからtable「shop」を呼び出す
作成したDBから情報を呼び出します。
参考ページをみるとわかるように、「shop_id」の昇順で呼び出されています。
その点に注意して、SQLを記述しましょう。
記述の仕方は、以下のページが参考になります。
呼び出したデータを利用し、店舗名やジャンル、住所などを正しく表示させる
コードを見てもらうとわかるとおり、配列に対応する「キー」は仮で置いてあります。
あとは値を呼び出すだけ。
考え方としては、以下のページが参考になります。
ジャンルごとに背景色を変化させる
実は、各ブロックに「genre」を割り振っています。
「class」の特性を利用してCSSをあてましょう。
考え方としては、以下のページが参考になります。
6位以降のデータを挿入し、ランキングTOP10を完成させる
phpMyAdminを利用し、データを挿入しましょう。
操作方法は、以下のページが参考になります。
以上、正解は講義内で発表します。
まとめ
HTML,CSS,PHP,DB,SQL
そうした知識を結集すると、今回のポータルサイトのような店舗一覧ページを作ることができます。
まだ参考なしに作ることはできないでしょうが、何度も作っていくうちに当たり前のようにできるようになります。
プログラミングは所詮は道具なわけで、使わないことには慣れません。
今後はもっと本格的なページを何度も作ることにより、プログラミングを身に着けていきましょう。
自主学習
学習サイトをピックアップしたので、以下のリンクから自分に合ったものを使って自主学習しましょう。
基礎知識
HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]
HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
HTML入門 (全15回) – プログラミングならドットインストール
CSS入門 (全17回) – プログラミングならドットインストール
実践！ウェブサイトを作ろう (全16回) – プログラミングならドットインストール
STEP UP!!
はじめてのJavaScript (全11回) – プログラミングならドットインストール
JavaScript入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]
Bootstrap 4入門 (全22回) – プログラミングならドットインストール
さらにSTEP UP!!
PHP入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
PHP | プログラミングの入門なら基礎から学べるProgate[プロゲート]
PHP入門 (全30回) – プログラミングならドットインストール
PHPで作る簡易掲示板 (全9回) – プログラミングならドットインストール
SQL | プログラミングの入門なら基礎から学べるProgate[プロゲート]
MySQL入門 (全36回) – プログラミングならドットインストール
理想はすべてのレッスンをやることです。
今は目で見て手で触れる時間を増やすときなので、時間が許す限りやってみましょう。
