UI設計したり、ウェブシステムを開発したりします。 

14日後に完成するポートフォリオ システム #6 データベースへ連携

記入日:2023-01-04 編集日:2023-01-04

THEME-BLOGとは、日頃多くご依頼を受ける内容を中心に、ウェブシステムを開発する様子を複数回に分けて掲載するものです。 初回のテーマは「14日後に完成するポートフォリオ システム」会社や個人がポートフォリオを公開する為のウェブシステムです。

本日の内容
6日目 データベース(MySQL)とモックを接続してみます。

作業内容

6日目の今日は、データベース(MySQL)内のテーブルに接続してモックにダミーデータを表示してみます。

フロント画面に関して、そのデータベースより内容を抽出して表示してみます。 見た目的には、前回のモックと変わりはありませんが今回は静的ではなく、データベースと連携させています。

一覧ページに関して、以下のSQLで、memberテーブルやcategoryテーブルとリレーションをかけながら、portfolioテーブルを取得しています。

$query = 'SELECT *, b.name AS m_name, c.name AS c_name  FROM pf_portfolio AS a 
LEFT JOIN pf_member AS b ON a.member_id = b.id
LEFT JOIN pf_category AS c ON a.category_id = c.id
ORDER BY a.line ASC, a.id DESC';

一覧画面デザイン

PORTFOLIO ポートフォリオ

詳細画面デザイン

WORKS ポートフォリオのタイトル

カテゴリB

画像のコメント1

ああああああああああああああ

記事番号001

2022-12-18

--

一ノ瀬

このホテルは、国内外から多くのゲストをお迎えすることを目的に、世界中から厳選した最高級の設備を施し、快適な空間を提供いたしました。 また、日本の伝統文化を取り入れながらも、現代的なデザインを取り入れた建物は市の象徴として、地域社会の豊かな文化を盛り上げる役割を果たします。

画像の補足文章1

画像の補足文章1

画像の補足文章2

画像の補足文章2

画像の補足文章3

画像の補足文章3

画像の補足文章4

画像の補足文章4

画像の補足文章5

画像の補足文章5

画像の補足文章6

画像の補足文章6

補足説明文章見出し1

補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。1

補足説明文章見出し2

補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。2

補足説明文章見出し3

補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。補足説明文章コンテンツ。3

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。