読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

予約システム

WordPressで予約システムを設置できるプラグイン MTS Simple Booking Booking System WordPress Appointment Booking and Online Scheduling Plugin CP Appointment Calendar Salon Booking Online Lesson Booking Events Manager 時間単位で予約できる予約…

ゲストブック

ゲストブック 《index.php》

サンキューメッセージを送信

サンキューメッセージを送信

ゲストブック - データ表示機能

データ表示機能 データの一覧表示 query( 'SET NAMES UTF8' ); $sql = 'SELECT * FROM message WHERE 1'; $stmt = $dbh -> prepare( $sql ); $stmt -> execute(); } catch(Exception $e ) {…

ゲストブック - データベースに値を挿入

フォームに入力されたメッセージをデータベースに追加する INSERT文を組み立てて実行する 追加画面→追加確認画面→追加完了画面 追加完了画面でINSERT文を実行するには、入力フォームに入力されたメッセージを$_POSTや$_SESSIOを経由して受け渡し、その値をも…

ゲストブック - 確認画面作成

確認画面作成 SESSIONデータを使ったエラーチェック 未入力のエリアがあった場合に、入力画面に戻す 《confirm.php》

ゲストブック作成 - データ追加機能

データ追加機能を作る 追加画面(index.php) 追加確認画面(confirm.php) 追加完了画面(submit.php) 追加画面の基本構造 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ゲストブック</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>ゲストブック</h1> <form method="post" action="confirm.php"> <table> <tr> <th>名前</th></tr></table></form></body></html>

ゲストブック作成 - 設計

ゲストブック ホームページを訪れたゲストにメッセージを投稿してもらう データベースの処理 「何を」「何処に」「どのように」記述するかを決める ゲストブックの構成 何を記述するか 追加(CREATE) 読み取り/表示(READ) 変更(UPDATE) 削除(DELETE) …

入力された内容を自動返信

PHP

入力された内容を自動返信 《index.php》

ゲストブック作成 - 設計

ゲストブック ホームページを訪れたゲストにメッセージを投稿してもらう データベースの処理 「何を」「何処に」「どのように」記述するかを決める ゲストブックの構成 何を記述するか 追加(CREATE) 読み取り/表示(READ) 変更(UPDATE) 削除(DELETE) …

入力フォーム - 実践

PHP

入力フォーム - 実践 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>メールフォーム</title> <style> section { width: 500px; margin: auto; text-align: center; } table { text-align: left; } td { padding: 3px; } </style> </head> <body> <section> <h1>入力画面</h1> <p>必要事項を入力して「確認する」ボタンをクリ…</p></section></body></html>

セッション

PHP

セッション管理 クッキーは、クライアント固有の情報を保持するには良いですが、非常に小さいサイズのテキスト情報しか保存できません そのため、ショッピングサイトのカート情報など、より多くの情報を保持するのに「セッション」と呼ばれる機能を利用しま…

SQLを使う - SELECT文

SELECT文の基本機能 SELECT文は、データベースからデータを抽出するコマンドです 射影:特定のフィールド(列)だけ取り出すこと 選択:特定のレコード(行)だけを取り出すこと SELECT文の基本構文 テーブルに登録されている全てのレコードを取り出したり、…

SQLを使う - 基本

SQLは何のため? phpMyAdminのマウス操作だけで作ることができるSQLには限界がある PHP+MySQLを使ったWebシステムを構築するには、SQLの知識が必須あ phpMyAdminを利用する phpMyAdminにアクセスする データを取得して表示する localhostでデータベース一覧…

リレーショナルデータベース

リレーショナルデータベース テーブルと呼ばれる領域にデータを保存していきます リレーショナル型データベースは、RDB(アール・ディー・ビー)とも呼ばれます RDBの構造 RDBは、関連するデータを全てテーブルと呼ばれる2次元の表にデータを格納します テー…

データベースとは

データーベース(database, DB) 情報を管理するためのシステム(データベース管理システム DataBase Management System : DBMS) 特定のテーマに沿ったデータを集めて管理し、容易に検索・抽出などの再利用をできるようにしたもの 単位としての「データベー…

入力エラーチェック

PHP

入力エラーチェック ≪index.php≫

入力された値の変数と型

PHP

型 intval関数(文字列を整数に変換する)- 小数点以下は切り捨て ユーザーが入力したデータは「文字列型」です 「文字列型」のまま四則演算ができないため「整数型」に変換します 《sum.php》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>変数と型</title> </head> <body> <form action="result.php" method="post"> <p>数字1 <input type="text" name="val1"></p> <p>数字2 </p></form></body></html>

入力された値を送信→受信

PHP

送信するために必要なこと form要素でmethod属性を記述します method属性には、送信方法を記述します inputされた値を別のページに送信しますa 入力された値の器に名前をつけて送信します 送信するタイミングをinput要素のtype属性「submit」で、ボタンの表…

ユーザーとの対話

PHP

ユーザーとの対話 入力フォームに入力されたデータは、「$_GET[ 名称 ]」や「$_POST[ 名称 ]」取得できます 出力 ブラウザに表示 《例1》 変数を{ }で囲む Dreamweaverでは、変数の色にならないため判別しにくくなります 《例2》 文字列と変数を「. ドッ…

PHPを学ぶ

PHP

Progate prog-8.com CODEPREP codeprep.jp Progra! パイザ・ラーニング paiza.jp コーディング道場 http://www.coding-doujo.jp/books/1www.coding-doujo.jp

FlexSliderで横スライダー

FlexSlider <html> <head> <meta content="charset=utf-8"> <title>FlexSliderで横スライダー</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="css/flexslider.css"> <style> body { background-color: #42A2…</link></meta></meta></head></html>

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 …</link>

Slider

SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>

フィルタリング

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></link></meta></head></html>

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

animate( )メソッドを使ったアニメーション

animate( )メソッド $( セレクタ )に対してアニメーションを設定します $( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック ); property CSSプロパティ名(値を数値で指定できるものに限る) value アニメー…

アニメーション効果

animate()メソッド 独自のアニメーションを設定できる 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります 動きには「l…

アコーディオンメニュー

アコーディオンメニュー 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく はじめはコンテンツが見えない(クリックすると内容が見えることを明示するために、一つ目は開けておく) ユーザー自身が積極的に探…

DOMでアコーディオンパネル

表示を切り替える <html lang="ja"> <head> <meta charset="UTF-8"> <title>方丈記</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>方丈記 - 抜粋</h1> <div class="section first"> <h2 id="section1Title">【ゆく河の流れ】</h2> <p id="section1">ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうた…</p></div></div></body></html>

実践的なメソッド

hide()メソッド 表示されている要素を非表示にする HTMLの表示状態 display:block を、display:none に変更します 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 $( セレ…

セレクタ・メソッド・イベント - まとめ

jQuery高速化 Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 1.…

thisキーワード

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…

readyイベント

readyイベントとは イベントの中で最も大事なイベントが、readyイベントになります このイベントは、DOMの読み込み完了時に実行されます そのため、jQueryを使用する場合は必ずreadyイベントを設定することになります jQueryの実行パターン $( document ).re…

HTML・CSSの操作

HTMLの操作 要素内のテキストの設定・変更やHTML要素の設定・変更など テキストの設定 要素内のテキストを設定する場合は、text( )メソッドを使用します $(function(){ $( '#txt' ).text( 'テキストが変更されました' ); }); 《テキスト内容を取得する場合》…

関数とメソッド

jQueryの関数 jQueryは、関数オブジェクトです JavaScriptは、プリミティブ型とオブジェクト型で構成される プリミティブ型は、変数として使う型 それ以外はオブジェクト型です <script> $(function() { alert( typeof( jQuery ) ); }); </script> typeof 演算子を使って、引…

セレクタの使い方

最低限、使うものだけ覚える すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内で…

セレクタ

セレクタとは 名前、属性、状態などによりドキュメント内の要素を選択する役割 セレクタの書き方 先頭に「$」を記述 「$」は、jQueryオブジェクトのインスタンス $( '要素' ) セレクタを使用するときの注意点 セレクタを使用する場合は、jQueryへのアクセス…

jQueryの基本

よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウザ依存を気にしなくてよい) 記…

DOM-実践演習

DOMによる書き換え DOMツリーでは、トップレベル要素は「document」オブジェクトです documentオブジェクトから、button(エレメントノード)をid属性を指定して参照しています <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色を書き換える</title> <style> body { background-color: #CAE4FF; } button { curso</style></meta></head></html>…

イベントハンドラの設定

HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されています イベント…

DocumentオブジェクトによるHTML要素の操作

DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます この階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びます ノードを取得…

配列の添字を活用する

曜日を日本語で表示する 曜日の文字列は、「days配列」に格納しておきます <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成 曜日は、getDayメソッドを利用する1 getDayメソッドの戻り値は「日曜日~土曜日」を「…

配列はArrayオブジェクト

配列とは リストのこと いくつかの情報を番号と一緒に保管するためのもの 「配列」とは、添字(そえじ)と呼ばれる番号を用いて、1つの変数名で複数のデータをまとめて管理できるようにしたもの 配列 - マンガで分かる JavaScriptプログラミング講座 配列は…

random関数

乱数の発生 「random()」は、「0以上1未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨てる」メソッド ランダムな「整数」を生成する rnd = Math.floor(Math.random() * MAX + 1); <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; fo</body></html>…

Math関数を使った計算

Mathとは Mathとは「数学(Mathematics)」の意味 数値演算に便利なメソッドやプロパティが利用できるオブジェクト まえもってインスタンスを生成する必要はありません スタティックメソッド(インスタンスを生成しないで関数のように使用できる) Math . メ…

Dateオブジェクト - 状況に応じた処理

Dateオブジェクト JavaScriptに用意されている組み込みオブジェクト Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される JavaScript の日時は、UTC の 1970 年 1 月 1 日 0 時からのミリ秒としてで計られ…

組み込みオブジェクト

組み込みオブジェクトとは 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります これを「組み込みオブジェクト」と呼びます 《主な組み込みオブジェクト一覧》 オブジェクト名 説明 Object すべてのオブジェクトの…

DOM まとめ

ダイナミックHTML JavaScript のようなクライアント側のプログラムを使って HTML の内容を動的に変化させる概念を、「ダイナミックHTML」 といいます 「JavaScript」 から HTML の内容を制御する事ができるので、HTML が動的に変化するインタラクティブなコ…

組み込み関数

組み込み関数とは JavaScriptがすでに備えている関数 《組み込み関数一覧》 関数名 説明 parseInt 文字列型の数字列を数値型(整数)に変換する parseFloat 文字列型の数字列を数値型(実数)に変換する isNaN 指定された値がNaNであるかどうか調べる encode…