高性能計算研究室(幸谷研究室)@静岡理工科大学 謹製

HTML5 + PHP + MySQL + JavaScript + jQueryによる

Webアプリケーション開発入門

Produced by

T.Kouya Laboratory@SIST
in 2015-2018

Last Update: 2018-09-25 (Tue)
本サイトについて

第0章 はじめに

本教材の目的とWebアプリケーションについて

第1章 静的Webページの基礎

HTML
→Webページの構造を規定する「HTML」を簡単に紹介します。
CSS
→Webページの見栄えを細かく指定することができる「CSS」を説明します。
フォーム
→ユーザからの情報の受け渡しを目的とした機能「フォーム」について説明します。
JavaScriptの基礎
→HTML内で動作する「JavaScript」について説明します。
DOM(Document Object Model)とjQuery
→HTMLの要素がオブジェクトであることを理解し，jQueryの役割について簡単に解説します。
練習問題

第2章 PHP

Apacheの起動
→XAMPPに同梱されているApacheの起動について説明します。
PHPの基礎
→動的Webページを記述することに特化したサーバーサイドスクリプト言語「PHP」について説明します。
フォーム入力の受け取り
→実際にフォームから入力されたデータをPHPスクリプトに受け取る手順を説明します。
ファイルメニューとチェックボックス入力の受け取り
→ファイルメニューとチェックボックスからの入力を受け取る手順を説明します。
PHPによるフォームの生成
→「PHP」と「フォーム」の組合せについて説明します。
if文の使い方
→if文について説明します。
セッション
→セッションについて説明します。
練習問題

第3章 リレーショナルデータベース(RDB)の基礎

データベースについて
→データベースについて説明します。
新規データベースの作成
→実際にデータベースを作成します。
テーブルの作成:CREATE
→データベースのテーブルを作成します。
データ型の説明
→カラムにどのようなデータを入れるのかを示すデータ型について説明します。
データの挿入・変更・消去・検索
→SQL文を通じてデータベースを操作する方法について説明します。
練習問題

第4章 PHP＋データベースのシステム作成

PHPとMySQLのリンク
→「PHP」で「データベース」を操作する方法を説明します。
SQL文の実行
→実際に「PHP」上でSQL文を実行する方法を説明します。
データベース接続の共通化とCRUDシステムの完成
→接続プログラムの作成をします。
練習問題

第5章 Webアプリケーションシステムの制作

システムの構造
→システム構造を考えます。
データベース構造
→データベースの構造を考えます。
ログインシステム
→ログインシステムについて説明します。
ユーザー登録（入力）
→ユーザー登録の入力ページについて説明します。
ユーザー登録（登録）
→ユーザー登録の登録ページについて説明します。
トップページとログインの継続
→セッションを使用したログインの継続方法について説明します。
ログアウト
→ログアウトについて説明します。
教材管理システム
→教材管理ページの説明をします。
共通する機能をまとめる
→共通する機能をまとめ，セキュリティに配慮したアクセス制限を行う方法を説明します。
教材の消去
→データの消去について説明します。
課題提出システム
→課題提出ページの説明をします。
提出課題の内容変更
→登録内容の変更について説明します。
全体の提出内容の表示
→全体提出状況の表示について説明します。
システムの改良
→管理者チェックとパスワードの暗号化について説明します。
AjaxとファイルのDrag & Drop処理
→XMLHttpRequest関数を用いたAjaxの機能と，jQueryを活用したDrag&Drop処理について解説します。
練習問題

第6章 Apache Cordovaを用いたハイブリッドアプリケーションの開発

ハイブリッドアプリケーションとApache Cordova
→ハイブリッドアプリケーション開発環境，Apache Cordovaについて簡単に説明します。
計算アプリの作成
→簡単なSPAとして幾つかの計算アプリを作成します。
Indexed DBを用いた住所録
→ブラウザで動作するIndexed DBを使用した住所録を作成します。
じゃんけんアプリの作成
→簡単なゲーム作り込んでいきます。
課題レポート

第7章 MVCモデルの活用

MVC(Model-View-Controller)とFullCalendar
→MVCモデルの考え方とFullCalendarの機能を紹介します。
画面(View)の構築
→FullCalendarを使って画面(View)を構築します。
JavaScriptによるコントローラーの作成
→JavaScript(jQuery)を用いてFullCalendarの操作を拡張します。
データベース(Model)とPHPによるコントローラーの作成
→データベースにスケジュール(イベント)を保存できるようにします。
スケジューラーの完成
→すべての機能をくみ上げてスケジューラーを完成させます。
練習問題

・・・以下は次年度バージョンに持ち越し・・・

BootstrapによるWebアプリケーションのResponsiveデザイン化
→TwitterデザインチームによるCSS + JavaScriptフレームワークBootstrapを使って既存のWebアプリケーションをResponsiveデザイン化する。本サイトがその一例。
Web API活用事例
→Google(サービス一覧), Yahoo!(一覧)，楽天(一覧)，Twitter(一覧)等の大規模Webサイトが提供するWeb APIを活用し，互いに組み合わせたりして新しいWebアプリケーションを作る。
オープンデータ活用事例
→世に出回るープンデータをWeb経由で自動的に取得して活用するアプリケーションの構築。例えば下記のようなものを活用できないか？
定番CMSを利用したWebサイト構築
→Xoops, WordPress, NetCommons等，バージョンアップを重ねて安定したCMSアプリを使い，あらかじめ設定したテーマに沿ったWebサイトを構築する。
定番Webアプリケーション構築とハイブリットアプリ化
→とりあえず手っ取り早く思いつきそうな定番Webアプリケーションのひな型を提供。スケジューラーも定番だが，これは第6章で提供済み。Cordova等を利用してハイブリットアプリにするとbetter。
  • 掲示板
  • 料理レシピ
  • My本棚
  • プログラミング入門サイト(Scratch程高度でなく，上下左右にカメが動いてタマに音を鳴らしたり光ったりするような奴）
グラフィックスを活用した事例としては，既にJavaScript + Canvasによるゲームアプリケーション例として本学・菅沼名誉教授によるコンテンツが存在するので，そちらを参照されたい。
CakePHPを用いたWebプログラミング教材の作成
→PHPとRDBMSを組み合わせた定番フレームワークを使って本教材の別バージョンを作成する。とりあえず文書が多そうなCakePHPなんかどうかしら？ 第4章～第5章の書き換えを目論んでいる。
Copyright (c) 2014-2018 幸谷研究室 @ 静岡理工科大学 All rights reserved.
Copyright (c) 2014-2018 T.Kouya Laboratory @ Shizuoka Institute of Science and Technology. All rights reserved.
Powered by