PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

LAMP環境上に簡単なWeb掲示板を設置してみます。

AWS 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

LAMP環境上に設置したWeb掲示板をカスタマイズしていきます。

AWS HTML Bootstrap 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

LAMP環境上に設置したWeb掲示板を、さらにカスタマイズしていきます。

AWS HTML 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

Web掲示板を、さらにカスタマイズしていきます。

AWS HTML MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

LAMP環境上に設置したWeb掲示板を、さらにカスタマイズしていきます。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

無料公開中 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHPとデータベースのMySQLを使って掲示板サイトを作成します。 環境構築をすることなく、ウェブブラウザだけで、すぐに学習を開始することができます。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

無料公開中 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここでは、掲示板の土台となるWebページをHTMLで作ります。それから、paizaラーニングで、Webページを作成する練習もしてみましょう。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここでは、1行掲示板のデータベースを準備してみたいと思います。そのために、MySQLの管理ツールであるphpMyAdmin(ピーエイチピーマイアドミン)の操作について紹介します。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここでは、PHPで、データベースのデータを取得します。そのために、PHPでデータベースに接続する方法を学習しましょう。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここでは、掲示板の投稿フォームを作ります。そのために、フォームの仕組みと作り方を学習しましょう。今回は、メッセージをサーバーで受信するところまでやってみます。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここでは、投稿フォームから受信したデータをデータベースに書き込んでみます。そのために、データベースにデータを書き込む方法を学習しましょう。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここまで作ってきた機能をひとつにまとめて、いったん掲示板を完成させます。Webアプリケーションとして形になると、それなりの手ごたえがあるでしょう。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここからは応用編として、1行掲示板に機能を追加したり、見た目を整えたりと、さらにパワーアップさせてみます。このチャプターでは、投稿の削除機能を追加しましょう。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここでは、1行掲示板に投稿者の名前を追加します。そのために、投稿フォームと発言リストに名前の欄が必要になります。また、投稿された名前の情報を挿入するために、データベースも修正しましょう。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

ここでは、掲示板の見た目を整えます。そのために、HTMLフレームワークのBootstrapを使って、投稿フォームとテーブルのデザインを変更してみましょう。

AWS HTML phpMyAdmin MySQL フォーム 掲示版 PHP HTML/CSS/Bootstrap DB/SQL LAMP インフラ・環境構築 Webアプリ開発

無料公開中 Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、Ruby on Railsを使って、簡単なWeb掲示板を作ります。

掲示版 Rails インフラ・環境構築 Webアプリ開発 Ruby

無料公開中 Rails インフラ・環境構築 Webアプリ開発 Ruby

このチャプターでは、Rails の設計方針について学習すると共に、データベースとの連携の概要を理解します。

Ruby on Rails DRY CoC MVC 掲示版 Rails インフラ・環境構築 Webアプリ開発 Ruby

無料公開中 Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、Rails の動作確認に欠かせない Rails コンソールの基本的な使い方を学習します。 Rails コンソールを使うと、Rails アプリの環境を有効にした状態で、Ruby コードをひとつずつ実行することができます。

Ruby on Rails Railsコンソール irb 掲示版 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、Rails のデータベースを操作する ActiveRecord について学習します。ActiveRecord は、データベースのテーブルを Ruby のオブジェクトに割り当てる機能です。

Ruby on Rails 掲示版 ActiveRecord Railsコンソール Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは Rails のマイグレーションについて学習します。 マイグレーションは Rails で自動生成した設定内容をデータベースに反映させます。

Ruby on Rails 掲示版 Railsコンソール マイグレーション ロールバック Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、モデルのデータをビューに表示する時、ActiveRecord のメソッドをどのように記述するか学習します。そのために、モデルに追加したカラムを ビューに表示させてみましょう。

Ruby on Rails 掲示版 erb HTML Rails インフラ・環境構築 Webアプリ開発 Ruby

無料公開中 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、本レッスンの概略について学習します。

Webアプリケーション フォーム 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

無料公開中 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、WebサーバーとWebブラウザのデータ転送方式であるGETメソッドとPOSTメソッドについて学習します。そのために、Sinatraで簡単な投稿フォームを作ってみましょう。

Webアプリケーション フォーム 掲示版 GET POST インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、先ほどのチャプターの続きとして、Sinatraでフォームを作って、受信したデータを表示します。そして、フォームのルーティングについて学習します。

Webアプリケーション フォーム 掲示版 GET POST インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、Sinatraのフォームを使う場合のデータの共有について学習したいと思います。そのために、beforeメソッドを使って、メソッド間でデータと処理を共有してみましょう。

Webアプリケーション フォーム 掲示版 GET POST インスタンス変数 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、Sinatraを使ったWebアプリケーションの例として、簡単な1行掲示板を作成します。 まずは、投稿内容を記録したファイルから、データを表示してみましょう。

Webアプリケーション フォーム 掲示版 GET POST インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、先ほどに続いて、Sinatraを使ったWebアプリケーションの例として、簡単な1行掲示板を作成します。 いよいよ、投稿をファイルに保存する機能を作成してみましょう。

Webアプリケーション フォーム 掲示版 GET POST 文字列分割 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

無料公開中 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここで、どのようなメモ帳アプリを開発するのか、その概要を整理します。WebアプリケーションフレームワークのSinatra(シナトラ)や、データベースを操作するActiveRecordといったライブラリを利用することで、機能の充実したWebアプリケーションを効率よく開発することができます。

Webアプリケーション ActiveRecord MySQL 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

無料公開中 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、メモ帳アプリに必要なデータベースを準備します。phpMyAdminを使って、データベースを作成し、サンプルデータを登録しましょう。

Webアプリケーション ActiveRecord MySQL phpMyAdmin INSERT文 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、メモ帳のサンプルデータを一覧表示します。SinatraとActiveRecordを使って、データベースに接続して、テンプレートで表示してみましょう。

Webアプリケーション ActiveRecord MySQL SELECT文 erb 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、メモ帳の詳細画面を作ります。「/show」でアクセスした時、指定されたメモの詳細情報を表示させましょう。

Webアプリケーション ActiveRecord MySQL SELECT文 erb WHERE句 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、メモの内容をMarkdownで記述できるようにします。そこで、RubyでMarkdownを扱う「redcarpet」(レッドカーペット)を使ってみましょう。

Webアプリケーション ActiveRecord MySQL phpMyAdmin 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、メモ帳の編集画面を作ります。「/edit」でアクセスしたら、メモの内容をフォームで表示しましょう。

Webアプリケーション ActiveRecord MySQL SELECT文 erb WHERE句 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、メモ帳の保存機能と削除機能を作ります。編集フォームから「/update」でアクセスしたら、メモの内容をデータベースに保存して、詳細画面で「/destroy」でアクセスしたら、メモを削除します。

Webアプリケーション ActiveRecord MySQL SELECT文 erb WHERE句 DELETE文 UPDATE文 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

インフラ・環境構築 Sinatra Webアプリ開発 Ruby

ここでは、新しいメモを作成する機能を作ります。一覧画面から「/new」でアクセスしたら、新しいメモを編集フォームで表示して、保存ボタンでデータベースに保存しましょう。

Webアプリケーション ActiveRecord MySQL INSERT文 掲示版 インフラ・環境構築 Sinatra Webアプリ開発 Ruby

無料公開中 Rails インフラ・環境構築 Webアプリ開発 Ruby

このレッスンでは、Scaffoldで作成した1行掲示板に、deviseを使ってユーザー認証機能を追加します。まずは、どのような機能を作るのか整理しましょう。

Ruby on Rails devise 掲示版 アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

無料公開中 Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、前回のレッスンで作成したユーザー認証機能を利用して、1行掲示板へのアクセスを制御します。誰でも記事を表示できて、登録したユーザーだけが新しい記事を投稿・編集できるようにしましょう。

Ruby on Rails devise 掲示版 seeds アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、ユーザーの情報を掲示板に利用します。ここでは、投稿一覧にユーザーのメールアドレスを表示しましょう。

Ruby on Rails devise 掲示版 アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、記事を投稿したユーザーの名前を表示するため、deviseのUserモデルに名前のカラムを追加します。それに合わせて、ユーザーの登録フォームを変更しましょう。

Ruby on Rails devise 掲示版 Railsコンソール マイグレーション アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、Userモデルにある名前のカラムをデータベースに保存できるようにします。

Ruby on Rails devise 掲示版 アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、1行掲示板のナビゲーションと投稿一覧に、Userモデルのnameカラムを表示しましょう。

Ruby on Rails devise 掲示版 アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、1行掲示板の投稿を、ログインしたユーザーの名前で保存できるようにします。すでに、ログインした時だけ投稿できるようになっているので、現在のログインユーザーで投稿できるようにしましょう。

Ruby on Rails devise 掲示版 アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは、投稿したユーザーだけが自分の記事を編集・削除できるようにしましょう。そのために、contollerで、user_idが一致した時だけ、アクションを実行させます。

Ruby on Rails devise 掲示版 アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

Rails インフラ・環境構築 Webアプリ開発 Ruby

ここでは先ほどの続きとして、使わないアクションを呼び出すリンクを非表示にします。

Ruby on Rails devise 掲示版 アクセス制御 Rails インフラ・環境構築 Webアプリ開発 Ruby

無料公開中 Servlet Java Webアプリ開発

ここでは、本レッスンの概略について学習します。そして、ServletとJSP、フォームの基本についておさらいします。

Webアプリケーション Servlet フォーム 掲示版 Servlet Java Webアプリ開発

無料公開中 Servlet Java Webアプリ開発

ここでは、JavaでWebフォームを作る方法を学習します。そのために、ServletとJSPを使って、HTMLの投稿フォームを表示させてみましょう。

Webアプリケーション Servlet フォーム 掲示版 Servlet Java Webアプリ開発

Servlet Java Webアプリ開発

ここでは、フォームからServletを呼び出してみたいと思います。そして、WebサーバーとWebブラウザのデータ転送方式であるGETメソッドとPOSTメソッドについて学習します。

Webアプリケーション Servlet フォーム 掲示版 GET POST Servlet Java Webアプリ開発

Servlet Java Webアプリ開発

ここでは、先ほどの続きとして、フォームから呼び出したServletのメッセージを表示してみたいと思います。

Webアプリケーション Servlet フォーム 掲示版 GET POST Servlet Java Webアプリ開発

Servlet Java Webアプリ開発

ここでは、フォームの投稿内容をServletとJSPで表示します。そのために、投稿フォームの内容をServletで取り出してみましょう。

Webアプリケーション Servlet フォーム 掲示版 POST Servlet Java Webアプリ開発

Servlet Java Webアプリ開発

ここでは、Javaを使ったWebアプリケーションの例として、簡単な1行掲示板を作成します。 まずは、投稿内容を記録したファイルから、データを読み込んでみましょう。

Webアプリケーション Servlet 掲示版 GET Servlet Java Webアプリ開発

Servlet Java Webアプリ開発

ここでは、先ほどの続きとして、Javaを使ったWebアプリケーションの例として、簡単な1行掲示板を作成します。 今回は、投稿内容を記録したファイルから、データを表示してみましょう。

Webアプリケーション Servlet フォーム 掲示版 GET POST Servlet Java Webアプリ開発

Servlet Java Webアプリ開発

ここでは、先ほどに続いて、Javaを使ったWebアプリケーションの例として、簡単な1行掲示板を作成します。 いよいよ、投稿をファイルに保存する機能を作成してみましょう。

Webアプリケーション Servlet フォーム 掲示版 POST Servlet Java Webアプリ開発

Servlet Java Webアプリ開発

ここでは、先ほどに続いて、Javaを使ったWebアプリケーションの例として、簡単な1行掲示板を作成します。今回は、投稿した内容を確認する画面を作成してみましょう。

Webアプリケーション Servlet フォーム 掲示版 POST Servlet Java Webアプリ開発

無料公開中 Python Flask

ここでは、WebアプリケーションフレームワークのFlaskで、フォーム処理とデータ転送について学習します。そのために、本レッスンの概略と、フォームの基本についておさらいします。

Webアプリケーション フォーム 掲示版 Python Flask

無料公開中 Python Flask

ここでは、Flaskで簡単な投稿フォームを作ってみましょう。それから、WebサーバーとWebブラウザのデータ転送方式であるGETメソッドとPOSTメソッドについて学習します。

Webアプリケーション フォーム 掲示版 GET POST Python Flask

Python Flask

ここでは、フォームのデータを受信して表示します。そして、フォームのルーティングについて学習します。

Webアプリケーション フォーム 掲示版 GET POST Python Flask

Python Flask

ここでは、先ほどのフォームを利用して、フォームの動作を確認します。そして、フォームをGETメソッドで呼び出して、どのようにフォームとコードがデータをやり取りするか、さらに理解しましょう。

Webアプリケーション フォーム 掲示版 GET POST Python Flask

Python Flask

ここでは、Flaskによるフォームの具体例として、RPGの戦闘シーンを作ります。先ほどのチャプターで作ったフォームをベースにして、ドロップダウンメニューでプレイヤーを選択できるようにしましょう。

Webアプリケーション フォーム 掲示版 GET POST Python Flask

Python Flask

ここでは、Flaskを使ったWebアプリケーションの具体例として、簡単な1行掲示板を作成します。まずは、投稿内容を記録したテキストファイルから、データを表示してみましょう。

Webアプリケーション フォーム 掲示版 GET POST Python Flask

Python Flask

ここでは、先ほどに続いて、Flaskを使ったWebアプリケーションの具体例として、簡単な1行掲示板を作成します。いよいよ、投稿をファイルに保存する機能を作成してみましょう。

Webアプリケーション フォーム 掲示版 GET POST Python Flask