ブログ制作教材

Size: px
Start display at page:

Download "ブログ制作教材"

Transcription

1

2 ブログ作成 2

3 3

4 <kiji テーブル > id integer unique primary key not null auto_increment koshinbi integer title varchar(100) honbun text category_id interger <comment テーブル >( 以下前と同じ ) id kiji_id koshinbi name com_honbun <category テーブル > d category_name 4

5 5 新規記事作成

6 6

7 7 記事作成確認 extract($_post); # extract($_post); $title = $_POST['title']; $honbun = $_POST['honbun']; if ($_POST['honbun'] == "" or $_POST['title'] == "") { die(" <a href=\"#\"

8 8 onclick=\"history.back(); return false;\"> </a>"); koshinbi $koshinbi = time(); $hiduke = date("y n j G:i:s", $koshinbi); time() date koshinbi date $hiduke HTML table <table> <tr> <th> <td> echo $title;</td> <td> echo nl2br($honbun);</td> <td> echo $hiduke;</td> </table> form shinki_touroku.php <input type="text"> type="hidden" <form> shinki_touroku.php

9 <input type="hidden" name="title" value=" echo $title;" /> honbunecho $honbun koshinbi <p class="button"> <input type="submit" value="" /> <input type="button" onclick="history.back();" value="" </p> </form> $db = new mysqli(,,, ); if ($db->connect_error) { die(" "); # localhost root''( ) blog 記事登録 shinki.touroku.php?php SQL $title varchar text <h2></h2> ; $sql = "insert into kiji (title, honbun, koshinbi) values ('$title', '$honbun', $koshinbi)"; # insert の sql 文でデータを登録

10 10 $result = $db->query($sql); # SQL $db() if ($result == false) { print "<p> </p>"; else { print "<p>{$title </p>"; $db->close(); # <p>[<a href="kiji_itiran.php"> </a>]</p> 記事一覧 () kiji_itiran.php table SQL while ($data = $result->fetch_assoc()) <table> <tr><td></td><td></td><td> </td><td></td></tr> $sql = "select * from kiji order by koshinbi desc"; # $result = $db->query($sql); while ($data = $result->fetch_assoc()) { extract($data); $hiduke = date("y n j ", $koshinbi); print "<tr><td>$hiduke</td><td><a href=\"kiji_shosai.php?id=$id\">$title</a>< /td><td></td><td></td></tr>";

11 </table> # select 1, 2,... from where order by desc; # *() order by desc asc kiji_shosai.php p.honbun { border : 1px solid black; padding : 5px; text-align : left; 記事詳細 kiji_itiran.php id 11

12 3.id $id sql ) shoseki sql $sql 4.$sql mysql $result 5. $result ($data= $result->fetch_assoc())$data 6. if $record extract 7. <body> <hr /> $id = $_GET['id']; $sql = "select * from kiji where id=$id"; $result = $db->query($sql); if ($data = $result->fetch_assoc()) { extract($data); $hiduke = date("y n j G:i:s", $koshinbi); print "<h2>$title</h2>\n"; print "<p class=\"honbun\">". nl2br($honbun). "</p>\n"; print "<p class=\"hiduke\">$hiduke </p>\n"; # <p>[<a href="kiji_itiran.php"></a>] [<a href="henshu.php?id= echo $id;"></a>]</p> </body> 記事編集 henshu.php kiji_shosai.php kiji_shosau.php henshu.php 12

13 13 kiji_shosai.php id $id = $_GET['id']; $sql = "select * from kiji where id=$id"; $result = $db->query($sql); if ($data = $result->fetch_assoc()) { extract($data); $hiduke = date("y n j G:i:s", $koshinbi); form table kiji_shosai.php henshu.php <input type="text" name="" value=" echo $; " echo $; form henshu_sakujo.php henshu_sakujo.php henshu_kakunin.php ( javascript )sakujo.php henshu.php henshu_kaku nin.php henshu_touro ku.php henshu_sakujo.php sakujo.php <input type="button" value=" " onclick="history.back()">

14 14 henshu_sakujo.php henshu_sakujo.php extract($_post); if ($action == "") { require 'henshu_kakunin.php'; else { // $action == "" require 'sakujo.php'; 編集確認 henshu_kakunin.php ; ; </table> <form> henshu_touroku.php input type="hidden" id () <p class="button"> </p> </form>

15 編集登録 ( 更新 henshu_tourokou.php ; ; $sql = "update kiji set title='$title', honbun='$honbun', koshinbi=$koshinbi where id=$id"; $sql mysql $result SQL print "<p> </p>"; else { print "<p> {$title </p>"; <p>[<a href="kiji_itiran.php"> </a>]</p> # update update set =, 2=, where ; id=$idid kiji id 15

16 削除確認 henshu.php henshu.php <script> function sakujo_kakunin() { $yes = confirm(" "); return $yes; </script> <p class="button"> <input type="submit" name="action" value="" /> <input type="submit" name="action" value="" onclick="return sakujo_kakunin();" /> <input type="button" value=" " onclick="history.back()" /> #onclick javascript confirm YES NO 削除登録 sakujo.php sakujo.php html body <h2> 16

17 <hr /> $sql = delete from where ; 1. (index.php) 2. (menu.php) 1. header.phpkanri_header.php 2. db_access.php 17

18 1. (index.php) index.php kiji_itiran.php index.php kiji_itiran.php kiji_itiran.php table $where = "order by koshinbi desc"; if (isset($_get['id'])) { #isset $id = $_GET['id']; $where = " where id=$id"; $sql = "select * from kiji $where"; $result = $db->query($sql); while ($data = $result->fetch_assoc()) { extract($data); $hiduke = date("y n j G:i:s", $koshinbi); print "<h2><a href=\"kiji_shosai.php?id=$id\">$title</a>< /h2>\n"; print "<p class=\"honbun\">". nl2br($honbun). "</p>\n"; kiji_shosai.php kiji_shosai.php henshu.php 18

19 menu kiji_shosai.php index.php 2. (menu.php) (index.php) <h3></h3> <ul> # <ul> <li> $sql = "kiji id "; $sql mysql $result ; while ($data = $result->fetch_assoc()) { $menu_id = $data['id']; $menu_title = $data['title']; $menu_koshinbi = $data['koshinbi']; $menu_hiduke = date("y n j G:i", $k_koshinbi); print "<li><a href=\"kiji_shosai.php?id=$menu_id\">$m enu_title ($menu_hiduke)</a></li>"; </ul> menu.php index.php kiji_shosai.php require 'menu.php'; 19

20 index.php header CSS (kiji_itiran.php) kanri_menu.php menu.php () menu.php l kiji_itiran.php l shinki.php l shinki_kakunin.php l shinki_touroku.php l henshu.php l henshu_kakunin.php l henshu_touroku.php l sakujo.php kanri_menu.php 20

21 21 head 1 require <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> </head> <body> <h1>my Blog</h1> 1. header.phpkanri_header.php () header.php kanri_header.php require 'header.php.php'; header.php index.php kiji_shosai.php kanri_header.php l kiji_itiran.php l shinki.php l shinki_kakunin.php l shinki_touroku.php l henshu.php l henshu_sakujo.php l henshu_touroku.php 2. db_access.php

22 db_access.php header.php kanri_header.php require_once require_once 'db_access.php'; #require_once require menu(kanri_menu)footer () 22 (footer.php) <p>copyright : fukudasemi, 2018</p> $db->close(); footer.php header menu header(kanri_header) -Web header.php kanri_header.php <body>

23 23 <div id="wrapper"> <div id="header"> <h1>my blog</h1> </div> <!-- of header --> #<!--of header--> div kanri_header.php wrapper <div id="kanri_wrapper"> menu headerdb_access henshu_sakujo.php require 'header.php'; <div id="menu"> require 'kanri_menu.php'; </div><!-- of menu --> <div id="contents"> </div><!-- of contents --> <div id="footer"> require "footer.php"; </div><!-- of footer --> </div><!-- of wrapper --> </body> CSS css html { height : 100%; body { height : 100%; div#wrapper { width : 804px; height : auto; background-color : #CEFDFA; div#kanri_wrapper { width : 804px; height : 80%;

24 24 div#menu { width : 204px; height : 100%; background-color : #CEFDFA; float : left; div#contents { width : 600px; height : 100%; float : right; background-color : #EFFEF6; div#header { width : 803px; height : 150px; background-color : #99CCCC; text-align : center; font-size : LARGE; div.kiji { border : black solid 1px; margin : 5px;.kiji h2 { margin : 5px; background-color : #66FFCC; p.hiduke { padding-right : 10px; text-align : right; div#footer { width : 803px; background-color : #BFF5FD; clear : both; text-align : center;

25 border : 1px solid black; index.php kiji_shosai.php $hiduke = $hiduke = print "<div class=\"kiji\">\n"; print "</div><!-- of kiji-->\n"; p.honbun { 25

26 ()

27 (category.php) kanri_menu category.php shinki.php category.php require kanri_header.php <div > require kanri_menu.php </div > <div > <h2> <hr /> // form category_kakunin.php <table> <tr> <th> <td><"text" "category_name" /> </tr> </table> p </p> </form> </div> <div > require </div > </div > 2. (category_kakunin.php)

28 3. (category_touroku.php) 28 ; die { ; ; form hidden category_touroku.php p ; $sql = insert で SQL select ; $sql $db $result ; false { 4.()

29 category_kanri.php <table> $sql = "select where id!=0 ; # 0 print " category_henshu.php "; </table> 5.() category_henshu.php id ; $sql = categoty; if form category_henshu_sakujo.php <th></th> <"category_name" value=" echo $category_name;" /> 29

30 30 hidden id <script> function sakujo() { return confirm(" "); </script> p </form> else { print ""; category_henshu_sakujo.php henshu_sakujo.php category_henshu_sakujo.php $id = $_GET['id']; if ($_POST['action'] == '') { require 'category_koshin.php'; else { require 'category_sakujo.php'; </body>

31 </html> category_koshin.php 31 ; $sql = update category else { {$category_name 6. category_sakujo.php id ; $sql = "delete else { 7. shinki.php td <select name="category">

32 <option value=0></option> $sql = "select * from category order by category_name"; $record = $db->query($sql); while ($data = $record->fetch_assoc()) { extract($data); print "<option value=$id>$category_name</option>\n"; </select> $record = $db->query($sql); if ($data = $record->fetch_assoc()) { $category_name = $data['category_name']; else { $category_name = ""; table td echo $category_name; form input hidden category 32 shinki_kakunin.php $hiduke = $sql = "select category_name from category where id=$category"; shinki_touroku.php sql

33 $sql = "insert (title,, koshinbi, category_id) ('$title',, $koshinbi, $category_id)"; kiji_itiran.php $hiduke = $category_name = ""; if (is_null($category_id) == false) { $sql2 = "select category_name from category where id=$category_id"; $record2 = $db->query($sql2); if ($data2 = $record2- >fetch_assoc()) { $category_name = $data2['category_name']; print <td>$category_name</td> henshu.php henshu_kakunin.php henshu_touroku.php 33

34 print $category_name print </div > index.php 34 print honbun kiji_itiran.php { { kiji_shosai.php

35 1. (kiji_shosai.php) $kiji_id = $id; kiji_shosai.php <h3></h3> <div > form comment_kakunin.php <p><br /><input type="text" name="name" /></p> <p><br /> <textarea name="com_honbun" cols="80" rows="6"></textarea></p> hidden kiji_id p input </form> <hr /> </div> 2. (comment_kakunin.php) shinki_kakunin.php () form comment_touroku.php 35

36 3. (comment_touroku.php) shinki_touroku.php namecom_honbunkoshinbi kiji_id </div> 4. (kiji_shosai.php) kiji_shosai.php <h3></h3> <div > sql kiji_id $id select; while ; $hiduke print css div.comment { padding : 0 20px; p.com_honbun { padding-left : 10px; p.com_name { font-weight : bold; background-color : #99FFCC; 36

37 #contents h3 { margin-left : 5px; padding-left : 5px; background-color : #CCFFCC; str1 : int1 : int2 : str2 : 5. ()(comment_kanri.php) kiji_itiran.php $hiduke $sql2 = "select title from kiji where id=$kiji_id"; $result2 = $db->query($sql2); if ($data2 = $result2->fetch_assoc()) { $title = $data2['title']; else { $title = ''; $comment = mb_substr($com_honbun, 0, 15); print # mb_substr( str1, int1, int2, str2) 6. () comment_henshu.php henshu.php id id 37

38 38 #$sql2 result2$kiji_hiduke id ; kiji_id ; sql id $id $sql mysql $result $result ($data = $result->fetch_assoc()) $record $data ; ; $sql2 = " id $kiji_id ; $sql2 mysql $result2 $result2 $data2 $data2 ; ; form comment_sakujo.php <table> </table> hidden id </script>

39 7. sakujo.php id ; sql if 8. index.phpkiji_shosai.phpkiji_itiran.php db_access.php function comment_number($kiji_id) { global $db; $sql = "select id from comment where kiji_id=$kiji_id"; $result = $db->query($sql); return $result->num_rows; # global :

40 index.php if else if (isset($_get['c_id'])) { $c_id = $_GET['c_id']; $where = " where category_id=$c_id"; $com_num = comment_number($id); print ($com_num) kiji_shiosai.phpkiji_itiran.php 9. 40

41 else { $sql = "delete from comment where kiji_id=$id"; $result = $db->query($sql); if ($result == false) { print "<p>{$title </p>"; print "<p> </p>"; else { print "<p>{$title </p>"; 1. () 41

42 category_kanri.php menu.php <h3></h3> <ul> sql id 0 ; $sql mysql $result $result $data { $c_id = $data['id']; $c_category_name = $data['category_name']; print "<li><a href=\"index.php?c_id=$c_id\">$c_categor y_name</a></li>"; </ul> 2. (kensaku.php) menu.php form(kensaku.php ) input type name search placeholder 42

43 kensaku.php kiji_shosai 43 $search sql kiji honbun like '%$search%' or title like '%&search%' ; kiji_shosai.php kiji_shosai.php ID ID ID password ID

44 OK 3. kanrisha_shinki kanrisha_kakunin kanrisha_touroku login login_kanrisha kanri_header login_check kanri_header.php require_once (password.sql) ID password.sql user 44

45 idname, password varchar(255)id id MySQL ID (kanrisha_shinki.php) shinki.php ID form kanrisha_kakunin.php (ID) </table> </p> (kanrisha_kakunin.php) ; (ID) form kanrisha_touroku.php (ID) hidden (ID) 45

46 session_start(); $_SESSION['kanrisha'] = $name; 46 (kanrisha_touroku.php) ; $password_hash = password_hash($password, PASSWORD_DEFAULT); sql ; sql ($result); else { (login.php) kanrisha_shinki.php form login_kanrisha.php (login_kanrisha.php)

47 db_access.php ; sql neme name ; $sql mysql $data $result while ($record = $data->fetch_assoc()) $db_password = $record['password']; $login = password_verify($password, $db_password); #password_verify session_start(); $_SESSION['username'] = $name; header('location: kiji_itiran.php'); exit; header('location: login.php'); # header WEB URL header Location URL login_check.php session_start(); if (isset($_session['username']) == false) { login.php kanri_header.php login_check.php require_once 47

48 (logout.php) session_destroy() $_SESSION = array(); # if (isset($_cookie["phpsessid"])) { # setcookie("phpsessid", '', time() , '/'); # session_destroy(); # header('location: kiji_itiran.php'); 48

_IMv2.key

_IMv2.key 飯島基 文 customb2b@me.com $ ssh ladmin@im.example.com $ cd /Library/Server/Web/Data/Sites/Default/ $ git clone https://github.com/msyk/inter-mediator.git

More information

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 Web 2.0 Web Web Web Web Web Web Web I II I ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 1. 1.1 Web... 1 1.1.1... 3 1.1.2... 3 1.1.3... 4 1.2... 4 I 2 5 2. HTMLCSS 2.1 HTML...

More information

hands_on_4.PDF

hands_on_4.PDF PHPMySQL 4 PC LAN 2 () () SQLDBMS DBMS DataBase Management System mysql DBMS SQL Structured Query Language SQL DBMS 3 DBMS DataBase Management System B Table 3 Table 2 Table 1 a 1 a 2 a 3 A SQLStructured

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

More information

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

3 Powered by mod_perl, Apache & MySQL use Item; my $item = Item->new( id => 1, name => ' ', price => 1200,

3 Powered by mod_perl, Apache & MySQL use Item; my $item = Item->new( id => 1, name => ' ', price => 1200, WEB DB PRESS Vol.1 79 3 Powered by mod_perl, Apache & MySQL use Item; my $item = Item->new( id => 1, name => ' ', price => 1200, http://www.postgresql.org/http://www.jp.postgresql.org/ 80 WEB DB PRESS

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)

More information

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/

More information

1 1 1......................... 1 2.......................... 2 3.................... 2 4...................... 3 2 4 1....... 4 2........................ 7 3................... 8 3 12 1...........................

More information

ch31.dvi

ch31.dvi 1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5

More information

SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web

More information

Microsoft Word - PHP_SQLServer2012

Microsoft Word - PHP_SQLServer2012 PHP5.4+SQL Server 2012 1 表からデータを問い合わせる style.css table border-color:skyblue; border-style:solid; boder-widht:1px; width:300px;.hdrbackground-color:gainsboro 実行結果 1.1 ソース (Sample01.php)

More information

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

2009 Web B012-1

2009 Web B012-1 2009 Web 2010 2 1 5108B012-1 1 4 1.1....................................... 4 1.2................................... 4 2 Web 5 2.1 Web............................... 5 2.2 Web.................................

More information

CONTENTS 0 /JSP 13 0.1 Web 14 1 HTML Web 21 1.1 Web HTML 22 1.2 HTML 27 1.3 Web 33 1.4 HTML 43 1.5 46 1.6 47 1.7 48 2 Web 51 2.1 Web 52 2.2 Web 54 2.3 Web 59 2.4 65 2.5 68 2.6 75 2.7 76 2.8 77 3 81 3.1

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information

JavaScript の使い方

JavaScript の使い方 JavaScript Release10.5 JavaScript NXJ JavaScript JavaScript JavaScript 2 JavaScript JavaScript JavaScript NXJ JavaScript 1: JavaScript 2: JavaScript 3: JavaScript 4: 1 1: JavaScript JavaScript NXJ Static

More information

■新聞記事

■新聞記事 情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック

More information

( )

( ) 2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5

More information

Web PHP wiki

Web PHP wiki 1 1 1............. 1 2 Web PHP...... 2 2 3 1........................ 3 2 wiki.......................... 3 3 4 1......................... 4 2......................... 5 3............................ 6 4

More information

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

2003年度 情報処理概論

2003年度 情報処理概論 提出課題 課題 1( 提出課題 ): 利用者の情報を入力し 登録 ボタンを押すと, 入力されたデータで利用者 (user) テーブルにレコードを新規登録する Web ページを作りましょう. 手順 1:HTML のファイル ( 利用者情報の入力 Web ページ ) を input_regist_user.html という名前で作業フォルダに作成する. 手順 2:DB に登録処理を行う PHP プログラムのファイルを

More information

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

Taro php.jtdc

Taro php.jtdc 4-5 PHP 演習問題 演習 1 フォルダ \data\dbserver\php のPHPスクリプト randamu.php を使い, データベース testdb のテーブル table1 を取り込み, ランダムにデータを表示させるWebサーバを構築し, クライアント( Windows 側 ) のブラウザURL epc**.cen.hic.ac.jp/randamu.php を入力し, 確認する

More information

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4. http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c

More information

情報システム設計論II ユーザインタフェース(1)

情報システム設計論II ユーザインタフェース(1) CMP 実習 2 DB+PHP+XML/JSON+JavaScript 中村, 宮下, 斉藤, 菊池 1 PHP と JavaScript 連携 サーバとクライアントをどうやって繋げるか? PHP と JavaScript 間の情報のやりとりを行う JavaScript JSON/XML PHP DB 簡易的な Web API を作ろう! PHP に GET で情報を送り込むことで XML または

More information

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

2

2 storetool 2 3 4 1 storetool 1-1 6 1-2 1 7 8 1-3 1 9 1-4 10 1 11 1-5 12 1-6 1 13 14 2 storetool 2-1 16 2 17 2-2 1. 2. 3. 4. 5. 18 6. 7. 2 19 20 3 storetool 3-1-1 22 1. 3 2. 1. 2. 23 1. 2. 24 3 25 1. 2.

More information

untitled

untitled 2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック

More information

! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ

! #$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML ! "#$%&'()*+,-. /0123456789:;?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ

More information

/var/lib/sharelatex/data/compiles/5b35c6e168aeba3d a72a7acd11f6ba07fbbff68/output.dvi

/var/lib/sharelatex/data/compiles/5b35c6e168aeba3d a72a7acd11f6ba07fbbff68/output.dvi SuperSQL 2018 7 5 1 2 2 2 2.1.................................... 2 2.2 SSedit....................................... 2 3 2 3.1 SSedit..................................... 2 3.2 ssql.................................

More information

3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4

3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4 SuperSQL SuperSQL 2016 12 13 1 SuperSQL ITC 2 SuperSQL 2.1 public html/ssql 2.2 SSedit SSedit (3.1 ) postgresql (ua123456 ) 131.113.101.124 /public html/ssql SuperSQL HTML /public html/ssql http://user.keio.ac.jp/

More information

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 JavaScript (2) 1 JavaScript 1.! 1. 2. 3. DOM 4. 2. 3. Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 (1) var a; a = 8; a = 3 + 4; a = 8 3; a = 8 * 2; a = 8 / 2; a = 8 % 3; 1 a++; ++a; (++

More information

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

1 ex01.sql ex01.sql ; user_id from (select user_id ;) user_id * select select (3+4)*7, SIN(PI()/2) ; (1) select < > from < > ; :, * user_id user_name

1 ex01.sql ex01.sql ; user_id from (select user_id ;) user_id * select select (3+4)*7, SIN(PI()/2) ; (1) select < > from < > ; :, * user_id user_name SQL mysql mysql ( mush, potato) % mysql -u mush -p mydb Enter password:****** mysql>show tables; usertable mysql> ( ) SQL (Query) : select < > from < > where < >; : create, drop, insert, delete,... ; (

More information

54 5 PHP Web hellow.php 1:<?php 2: echo "Hellow, PHP!Y=n"; 3:?> echo PHP C 2: printf("hellow, PHP!Y=n"); PHP (php) $ php hellow.php Hellow, PHP! 5.1.2

54 5 PHP Web hellow.php 1:<?php 2: echo Hellow, PHP!Y=n; 3:?> echo PHP C 2: printf(hellow, PHP!Y=n); PHP (php) $ php hellow.php Hellow, PHP! 5.1.2 53 5 PHP Web Web 1 Web OS (Web) HTML Web Web Web 5.1 PHP Web PHP ( ) 5.1.1 hellow.php ( ) Hellow, PHP! PHP hellow.php PHP HTML PHP 54 5 PHP Web hellow.php 1:

More information

1 SQL Server SQL Oracle SQL SQL* Plus PL/SQL 2 SQL Server SQL Server SQL Oracle SQL SQL*Plus SQL Server GUI 1-1 osql 1-1 Transact- SQL SELECTFROM 058

1 SQL Server SQL Oracle SQL SQL* Plus PL/SQL 2 SQL Server SQL Server SQL Oracle SQL SQL*Plus SQL Server GUI 1-1 osql 1-1 Transact- SQL SELECTFROM 058 1 SQL Server SQL Oracle SQL SQL* Plus PL/SQL 2 SQL Server SQL Server SQL Oracle SQL SQL*Plus SQL Server GUI 1-1 osql 1-1 Transact- SQL SELECTFROM 058 2 Excel 1 SQL 1 SQL Server sp_executesql Oracle SQL

More information

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

Oracle HTML DBのテンプレート・カスタマイズ

Oracle HTML DBのテンプレート・カスタマイズ Oracle HTML DB 2003 10 Oracle HTML DB... 3... 3... 5... 5 1:... 6 2:... 6 3: 2... 7... 8... 8... 8 CSS JavaScript... 10 HTML DB... 11... 11 Oracle HTML DB 2 Oracle Corporation Customizing Templates in

More information

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J 1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています

More information

Wiki Wiki Wiki...

Wiki Wiki Wiki... 21 RDB Wiki 0830016 : : 2010 1 29 1 1 5 1.1........................................... 5 1.2 Wiki...................................... 7 1.2.1 Wiki.................... 7 1.2.2 Wiki.................. 8

More information

【お試し版】Web制作者のためのCSS設計の教科書(非売品)

【お試し版】Web制作者のためのCSS設計の教科書(非売品) UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.com/hiloki : http://inkdesign.jp GitHub : https://github.com/hiloki/ URL http://www.impressjapan.jp/books/1113101128 Web 10 IT UI

More information

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

1,.,,,., RDBM, SQL. OSS,, SQL,,.

1,.,,,., RDBM, SQL. OSS,, SQL,,. 1,.,,,., RDBM, SQL. OSS,, SQL,,. 3 10 10 OSS RDBMS SQL 11 10.1 OSS RDBMS............................ 11 10.1.1 PostgreSQL................................. 11 10.1.2 MySQL...................................

More information

SVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い

SVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い 10 ( SVG 10 ( Ajax Ajax I(SVG) 2017/6/27 10 ( Ajax 10 ( Ajax 100 10 HTML 1 2 3 4 5 6

More information

untitled

untitled JavaScript HP JavaScript JavaScript Web JavaScript Web JavaScript JavaScript JavaScript HTML HTML HTML JavaScript 1. JavaScript ON/OFF 2. JavaScript 3. 4. 5. 6. 7. 8. 9. 10. if 11. if 12. switch 13. 14.

More information

* この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 -

* この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 - HTML 演習 HTML5 版 別冊 確認問題解答 演習問題解答 1-1A CShogo Nakajima 2017 * この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 - 確認問題解答 / 演習問題解答 第 1 章 確認問題 1.1 (1)

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

PHP と Postgresql を用いた 図書館管理システムの構築 裘彬濱 Qiu Binbin 南山大学 情報理工学部

PHP と Postgresql を用いた 図書館管理システムの構築 裘彬濱 Qiu Binbin 南山大学 情報理工学部 PHP と Postgresql を用いた 図書館管理システムの構築 裘彬濱 Qiu Binbin 南山大学 情報理工学部 1: 要求分析 要求として 以下の 3 つを挙げる PHP と postgresql を用いた図書管理システムを構築したい 本の追加 削除 貸出 返却 未返却会員情報検索といった5つの機能を欲しいこの 3 つの点から データベースとウエブ 2 つの面に分けて考える [1] データベースに対する要求分析

More information

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

,, create table drop table alter table

,, create table drop table alter table PostgreSQL 1 1 2 1 3,, 2 3.1 - create table........................... 2 3.2 - drop table............................ 3 3.3 - alter table............................ 4 4 - copy 5 4.1..................................

More information

1 1 1.......................... 1 2.......................... 2 2 5 1........................... 5 2................... 7 3..................... 8 4..

1 1 1.......................... 1 2.......................... 2 2 5 1........................... 5 2................... 7 3..................... 8 4.. CD 1 1 1.......................... 1 2.......................... 2 2 5 1........................... 5 2................... 7 3..................... 8 4......................... 13 5 CD.................

More information

( 前回 ) 提出課題 課題 1( 提出課題 ): データベースからデータを読み込み, そのデータを表示する Web ページ作成してみましょう user テーブルから書籍のデータを一覧表示する. 手順 1:PHP のファイルを user_list.php という名前で作業フォルダに作成する. プログ

( 前回 ) 提出課題 課題 1( 提出課題 ): データベースからデータを読み込み, そのデータを表示する Web ページ作成してみましょう user テーブルから書籍のデータを一覧表示する. 手順 1:PHP のファイルを user_list.php という名前で作業フォルダに作成する. プログ 2017 年度 Webシステムプログラミング a PHP による DB 操作 (3) 講義内容 ( 前回 ) 提出課題の例 PHP の応用 PHP から MySQL へのアクセス ( レコードの新規登録 ) 2 1 ( 前回 ) 提出課題 課題 1( 提出課題 ): データベースからデータを読み込み, そのデータを表示する Web ページ作成してみましょう user テーブルから書籍のデータを一覧表示する.

More information

tkk0408nari

tkk0408nari SQLStatement Class Sql Database SQL Structured Query Language( ) ISO JIS http://www.techscore.com/tech/sql/02_02.html Database sql Perl Java SQL ( ) create table tu_data ( id integer not null, -- id aid

More information

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 Web データ管理 JavaScript (4) (4 章 ) 2012/1/11( 水 ) 1/22 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20120111 演習

More information

untitled

untitled Ajax Web Ajax http://www.openspc2.org/javascript/ajax/ajax_stu dy/index.html Life is beautiful Ajax http://satoshi.blogs.com/life/2005/06/ajax.html Ajax Ajax Asynchronous JavaScript + XML JavaScript XML

More information

3 top#index 1 web router.ex web/router.ex 12 scope "/", NanoPlanner do 13 pipe_through browser get "/", TopController, index 16 end URL / to

3 top#index 1 web router.ex web/router.ex 12 scope /, NanoPlanner do 13 pipe_through browser get /, TopController, index 16 end URL / to 3 NanoPlanner SASS Bootstrap Font Awesome 3.1 RAVT 6 RAVT route action view template Phoenix top index top index top#index RAVT URL / top#index top#index top 23 3 top#index 1 web router.ex web/router.ex

More information

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;

More information

立ち読みページ

立ち読みページ 6 6 46. 47. 48. 49. 50. 51. 52. 53. 146 148 150 152 154 158 160 162 6 46 Web ( ) table tr td th >> HTML

More information

10th Developer Camp - B5

10th Developer Camp - B5 B5 PHP テクニカルセッション Delphi for PHP で作るリッチコンテンツブログ エンバカデロ テクノロジーズエヴァンジェリスト高橋智宏 アジェンダ コンポーネントをフル活用しよう お馴染み データモジュール Blog データの表示用ページ Blog データの登録用ページ 2 コンポーネントをフル活用しよう 開発環境の進歩と退化 80 年代の IDE が登場エディタ + コマンドライン型の開発から脱却

More information

CodeIgniter Con 2011, Tokyo Japan, February

CodeIgniter Con 2011, Tokyo Japan, February CodeIgniter Con 2011, Tokyo Japan, February 19 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 http://www.iviking.org/fx.php/ 25 26 10 27 28 29 30 31

More information

388-356697252-2.pdf

388-356697252-2.pdf 専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]

More information

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11 CSS について ( 概要 ) 作成日 : 2016/01/21 作成者 : 西村 はじめに この資料は HTML がある程度 ( 少しでも ) わかる人に CSS の仕組みを少しだけわかってもらえるように書いています この資料では 下記を説明します CSS とは何か CSS の基本の形 CSS の読み込み方 セレクタとは何か / 最低限覚えるとよいセレクタ プロパティと値 / 最低限覚えるとよいスタイル

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ST&E API 導入手順書 ver1.0.1 Save Time & Effort! -1- - 目次 - P3 前提 P4 Step1 P5 Step2 P6 Step3 P7. P8 導入の前提条件導入対象のHTMLにリンクを設定導入対象のHTMLにhidden 項目を設定 Step1で命名したjsファイルとその中身を作成アップロードお問い合わせ -2- 前提条件 1. ST&E APIのお申込みがしていること

More information

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_v3 CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS

More information

2 Java 35 Java Java HTML/CSS/JavaScript Java Java JSP MySQL Java 9:00 17:30 12:00 13: 項目 日数 時間 習得目標スキル Java 2 15 Web Java Java J

2 Java 35 Java Java HTML/CSS/JavaScript Java Java JSP MySQL Java 9:00 17:30 12:00 13: 項目 日数 時間 習得目標スキル Java 2 15 Web Java Java J 1 2018 4 Java 35 35 262.5 30 1 1 1,045,300 653,300 656,000 2017 12 389,300 2,700 2 946,900 554,900 290,900 101,100 1 2 Java Java Java Web Eclipse Java List Set Map StringBuilder HTML/CSS/JavaScript JSP/Servlet

More information

soturon2013

soturon2013 4.4. CGI, CGI Web. UNIX, UNIX Windows. UNIX CGI. i ( ). mi- http://www.mimikaki.net/ 67 (mi- ),mi-, http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt,.

More information

PowerPoint Presentation

PowerPoint Presentation Webデザイン特別プログラムデータベース実習編 3 MySQL 演習, phpmyadmin 静岡理工科大学総合情報学部幸谷智紀 http://na-inet.jp/ RDB の基礎の基礎 RDB(Relational DataBase) はデータを集合として扱う データの取り扱いはテーブル (= 集合 ) の演算 ( 和集合, 積集合 ) と同じ データベースには複数のテーブルを作ることができる

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 出席確認 受講管理システム AMUSE を使って 本日の出席登録をせよ 学籍番号とパスワードを入力するだけでよい : http://davinci.cc.matsuyama-u.ac.jp/~dan/amuse/

More information

2019年度 Webシステムプログラミングa

2019年度 Webシステムプログラミングa 2019 年度 Web システムプログラミング a PHP による DB 操作 (3) 講義内容 ( 前回 ) 提出課題の解答例 PHP の応用 PHP から MySQL へのアクセス ( レコードの新規登録 ) 2 ( 前回 ) 提出課題 課題 1( 提出課題 ): データベースからデータを読み込み, そのデータを表示する Web ページ作成してみましょう user テーブルから書籍のデータを一覧表示する.

More information

システム分析とデータベース設計

システム分析とデータベース設計 システム設計 1. 構造化システム設計 DFD からモジュール設計 2. プログラミング HTML,VBScript,ASP, データベース 3. プログラミング作法 レイアウト, プログラム 3 構造 4. プログラミング補題 ( 会員登録 ) システム設計技法 - 受注処理の DFD を例に 受注処理の DFD さらなるプロセスの詳細化 商品ファイル 在庫ファイル 会員 会員番号 商品番号 商品番号

More information

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

2016 IP 1 1 1 1.1............................................. 1 1.2.............................................. 1 1.3............................................. 1 1.4.............................................

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

CSSNite-LP54-kubo-ito.key

CSSNite-LP54-kubo-ito.key div { div { width: ; div { width: 100%; div { width: 100%; div { width: 100%!important; a { color: #000!important; .box { padding: 20px; border: 4px solid #666; h1 { color:

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 山口研究室後期博士課程 3 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 1 前回の補足説明 + 復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題 1 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #<PlanItem id nil, name nil,...> > item.name = "" => "" > item.valid? => true valid? true false

10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #<PlanItem id nil, name nil,...> > item.name =  =>  > item.valid? => true valid? true false 10 (1) 16 7 PicoPlanner validations 10.1 PicoPlanner Web Web invalid values validations Rails validates validate 107 10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #

More information

HTML のタグを使ったホームページ作成 第 1 章 HTML 文書の基本 1. タグの基本 HTML 文書は普通の文章とタグで構成される タグは半角英数字で書く 文字 のように開始タグ (< >) と終了タグ () で囲む オプションをつけることもできる 2. 基本構成 ( 下線のタグは必ず書きます ) タイトル

More information

CMP演習

CMP演習 サーバサイドプログラミング 4. PDO (PHP から SQL アクセス ) コンテンツメディアプログラミング演習 Ⅱ 2014 年 菊池, 斉藤 1. PDO 概要 PDO (PHP Data Object) PHP5.1 から採用された SQL の標準クラス. を採用し, オブジェクトからメソッドやクラス変数を操作する. MySQL, SQLite などのサーバソフトに依存せず, ほぼ共通のコードでプログラミングできる.

More information

インターネット社会の発展

インターネット社会の発展 インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト

More information

1

1 1 2 3 4 確認しよう 今回のサンプルプログラムにアクセスしてみましょう 1. デスクトップ上のフォルダをクリックし /var/www/html に example1.html と example2.php ファイルがあることを確認します 2. ブラウザを起動し 次の URL にアクセスします http://localhost/example1.html 3. 自分の手を選択して じゃんけんぽん

More information