ラベル Web系スキル の投稿を表示しています。 すべての投稿を表示
ラベル Web系スキル の投稿を表示しています。 すべての投稿を表示

VirtualboxのゲストのUbuntuにポートフォワードで接続する

以前、virtualboxにインストールしたUbuntuに手の込んだ方法で接続する方法を紹介しました

今回は、ポートフォワードという方法で接続する紹介を勉強しましたので、記事にします。

設定したいOSのSettingsをクリックしてNetworkの設定のタブに移動します。そして、Adapter 1の設定画面でPort Forwardingをクリックします。


すると以下のような画面が出ます。右はしのプラスボタンをクリックして以下のようにSSHとhttpのポートを開放します。



以上で設定完了です。
SSH接続は以下のように行います。
$ ssh kappa@localhost -p 2222
ゲストのUbuntuを起動してapacheが起動した状態で、以下のようにしてhttp://localhost8080に接続すれば、サーバー側のディレクトリを閲覧することが可能です。



以下のサイトを参考にさせて頂きました。
http://www.karakaram.com/virtualbox-port-fowarding

VirtualboxのゲストOSの環境をコピーする

Virtualboxを使用していると、ついついチャレンジングなことをゲスト環境でしてしまい、復旧に手間がかかることがあります。そういった時にゲストOSの環境をそのままコピーしておくことができると大変便利です。それには以下のようにターミナルを用いた処理を必要とします。以下、VirtualboxにUbuntuというゲストOSが入っている前提で話を進めます。

#以下のディレクトリに移動する
$ pwd
/Users/kappa/VirtualBox VMs/Ubuntu

$ ls
Logs             Ubuntu.vbox      Ubuntu.vdi

Snapshots        Ubuntu.vbox-prev 

#virtualboxに備え付けのコピーコマンドを実行する
$ VBoxManage clonehd Ubuntu.vdi Ubuntu_copy.vdi

$ ls
Logs             Ubuntu.vbox      Ubuntu.vdi

Snapshots        Ubuntu.vbox-prev Ubuntu_copy.vdi

これでゲスト環境のコピーファイルが完成しました。Ubuntu_copy.vdiです。最後にこれをVirtualboxに読み込みます。以下はGUI作業です。

最初はこんな感じです。

 FileからVirtual Media Managerを開きます。
 Copyをクリックします。
先ほどターミナルでコピーしたUbuntu_copy.vdiを選択して後はデフォルトの設定に任せていけば、仮想環境がコピーされます。ただし、この段階では仮想ハードディスクがコピーされただけみたいです。

最後に普段行うように、新しいゲストOSの作成を行います。

ここがミソです。Use an existing virtual hard drive fileを選択します。そして、先ほどこコピーしたものを選択します。


これでコピー終了です。


ちゃんと起動し、ログイン画面が表示されました。







Virtualbox4.3.2にWindows8.1をインストールする

Virtualbox4.3.2にWindows8.1(64bit)をインストールをしたときのメモを書きます。

ポイントは2つです。
一つ目はOSが64bitなら、virtualbox側も64bitにそろえること。
二つ目はVirtualbox4.3.2にWindows8.1(64bit)の組み合わせでは、インストール時にエラーが出てしまいます。そこで以下のサイトを参考にして、仮想ハードディスク(名前はWindows8とした)ターミナルからvirtualboxに向けてコマンドを入力してやる必要があります。
$ VBoxManage setextradata Windows8 VBoxInternal/CPUM/CMPXCHG16B 1

参考サイト
http://zak-za-k.blogspot.jp/2013/07/virtualbox-for-macwindows81error-code.html
http://fnya.cocolog-nifty.com/blog/2013/06/virtualbox-wi-1.html

作業時のスクリーンキャプチャを添付しておきます。
以下のようなバージョンで仮想ハードディスクを設定します。
仮想ハードディスクを作成した後はこんな感じ。



フォームの内容を条件文で判別


フォームの入力を解析して、条件を満たせば文1を、満たさない場合は文2を表示させるPHPスクリプト(quiz.php)です。クイズの本質そのものなので、quiz.phpと名付けています。

DocumentRoot
└── web
    ├── quiz.php

####以下より###

<?
        //答え
        $CorrectAnswer = "linux";
        header("Content-type: text/html; charset=UTF-8");
?>
<html>
<head>
<title>Linuxクイズ</title>
</head>



<body>

<!-- フォームを作成 -->
<form method="post" action="./quiz.php">
<table width="400" border="1">
<tr>
<td><b>問題</b></td>
</tr>
<tr>
<td>1991年、フィンランドのヘルシンキ大学在学中だったリーナス・トーバルズ氏が教育用のOSであるMINIXをお手本に独自に開発したUNIXライクなOS(カーネル)の名前を答えなさい.</td>
</tr>
<tr>
<td><input size="10" type="text" name="YourAnswer"></td>
</tr>
</table>
<input type="submit" value="GO!!!">
</form>

<?
//変数を取り出して$ansへ格納
$ans = $_POST['YourAnswer'];
//判別式
if($ans){
if($ans == $CorrectAnswer)
{
print("<font color=\"blue\"><b>その通り!</b></font>");
} else
{
print("<font color=\"red\"><b>残念。違います。</b></font>");
}
}
?>

</body>
</html>

####以上###




【参考文献】
Spencer K Ogawa『MySQL & PHPでつくるWebデータベース入門』 2002 エーアイ出版 42 - 43 pp

PHPを介してMySQLのデータベースの内容を操作するスクリプト


LAMP環境で、サッカー選手の背番号、名前、ポジションを管理するアプリケーションを作成しました。
作業工程は
(1)データベースの作成 
(2)登録用フォームの作成 
(3)サーバーサイドでデータベースにアクセスするPHPスクリプトの作成 
(4)データベースの情報を取得して表示するPHPスクリプトの作成 
の4つです。
ドキュメント以下のフィアル構成は下のようになります。

DocumentRoot
└── web
    ├── form.html
    ├── test.php
    └── uke.php


##### (1) データベース(player)の作成####
#playerデータベースを作成し、useする
mysql> create database player;
Query OK, 1 row affected (0.00 sec)
mysql> use player;
Database changed

#playerデータベースの中にplayerテーブルを作成
mysql> CREATE TABLE player (number smallint, name text, position text, date timestamp) engine=MyISAM;
Query OK, 0 rows affected (0.31 sec)

#データを入力
mysql> insert into player (number, name, position, date) values ( 1 , '川口能活', 'GK', now());
Query OK, 1 row affected (0.00 sec)

mysql> select number, name, position, date from player;
+--------+--------------+----------+---------------------+
| number | name | position | date |
+--------+--------------+----------+---------------------+
| 1 | 川口能活 | GK | 2013-01-07 23:11:37 |
+--------+--------------+----------+---------------------+
1 row in set (0.00 sec)

#####ここまで#####



#####(2)フォームの作成(/var/www/web/register.html)####

<html lang="ja">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>選手名鑑</title>
</head>

<body>
<form method="POST" action="register.php">
 <p>選手名鑑入力フォーム</p>
 <p>背番号 <input type="text" name="number"></p>
 <p>名前 <input type="text" name="name"></p>
 <p>ポジション <input type="text" name="position"></p>
 <input type="submit" value="登録">
</form>
<a href=./ichiran.php>登録選手一覧を見る</a>
</body>

</html>

####ここまで#####



####(3)フォームの入力情報をもとにデータベースにアクセスするスクリプト(register.php)###
<?php
//---------データの受け取り
$num = $_POST['number'];
$nam = $_POST['name'];
$pos = $_POST['position'];


//---------データベースのユーザー情報
$DBSERVER ="localhost";
$DBUSER="kappa";
$DBPASS ="kappa";
$DBNAME ="player";


///------------MySQLに接続
$con = mysql_connect($DBSERVER, $DBUSER, $DBPASS);
///------------エラー処理1
if(!$con){
 echo "データベース接続開始エラー<br>\n";
 mysql_close($con);
 exit;
}

///------------playerデータベースに接続
$selectdb = mysql_select_db($DBNAME);

///------------playerテーブルに入力
$query = "insert into player (number, name, position, date) values ('$num','$name','$pos',now())";

$result = mysql_query($query);
///------------エラー処理2
if(!$result){
 echo "データベースエラー<br>\n";
 mysql_close($con);
 exit;
}
?>

<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>選手情報登録完了</title>
</head>
<body>
<p>登録が完了しました(〃 ̄∇ ̄)ノ</p>
<a href="./ichiran.php">選手情報の一覧を見る</a>
</body>
</html>


####ここまで####




#### (4)データベースの内容を表示するスクリプト#####

<?php

echo "<HTML lang=ja>\n";
echo "<HEAD>\n";
echo "<META HTTP-EQUIV=Content-Type CONTENT=text/html; CHARSET=UTF-8>\n";
echo "<TITLE>一覧表示</TITLE>\n";
echo "</HEAD>\n";
echo "<BODY>";
echo "<h3><p>選手一覧表示</h3></p>";
///-----------データベース情報
$DBSERVER ="localhost";
$DBUSER="kappa";
$DBPASS ="kappa";
$DBNAME ="player";

///------------MySQLに接続
$con = mysql_connect($DBSERVER, $DBUSER, $DBPASS);
///------------エラー処理1
if(!$con){
 echo "データベース接続開始エラー<br>\n";
 mysql_close($con);
 exit;
}


///------------データベースを選択
$selectdb = mysql_select_db($DBNAME);


///------------クエリを送る
$query = "select * from player; ";
///------------結果の取得
$result = mysql_query($query);

///------------エラー処理1
if(!$result){
 echo "データベースエラー<br>\n";
 mysql_close($con);
 exit;
}

///------------行数を取得
$num_row = mysql_numrows($result);
$num_field = mysql_num_fields($result);
echo "該当件数".$num_row."件です<br>\n";


echo "<table border=1>\n";
echo "<tr>\n";
///+++++++++ 列名 ++++++++++
for($i =0; $i < $num_field; $i++){
 echo "<th>".mysql_field_name($result, $i)."</th>";
}

///+++++++++ レコード表示 ++++++++++
for($j =0 ; $j < $num_row; ++$j){
 $row = mysql_fetch_array($result);
echo "<tr>";
  for($k=0; $k < $num_field; ++$k){
   echo "<td>".$row[$k]."</td>";
  }
echo "</tr>\n";
}
echo "</table>";

echo "<hr>計 $num_row 件<hr>\n";


///+++++++++ mysqlを切断 ++++++++++
mysql_close($con);

echo "<a href=./register.php>選手登録に戻る</a>";
echo "</BODY></HTML>";

?>


####ここまで#####
【参考文献】
清水正人 『6時間でできるLAMPサーバー構築ガイド』ソシム 2007 98 - 109 ,132 - 143pp

MySQLの基本操作集


#mysqlにログイン
$ mysql -u kappa -p
#testdbという名前のデータベースを作成
mysql> CREATE DATABASE testdb;
Query OK, 1 row affected (0.00 sec)

#現時点でのすべてのデータベースを表示
mysql> show DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| kokyaku            |
| mysql              |
| phpmyadmin         |
| player             |
| testdb             |
+--------------------+
6 rows in set (0.03 sec)

#testdbを選択
mysql> use testdb;
Database changed
 
#現在使用指定いるdatabaseを表示
mysql> select database();
+------------+
| database() |
+------------+
| testdb     |
+------------+
1 row in set (0.00 sec)

#テーブルtesttbを作成
mysql> create table testtb (col1 int, col2 varchar(10));
Query OK, 0 rows affected (0.02 sec)

mysql> show tables;
+------------------+
| Tables_in_testdb |
+------------------+
| testtb           |
+------------------+
1 row in set (0.00 sec)

#テーブルtesttb2を作成
mysql> create table testtb2  (col3 int, col4 varchar(10));
Query OK, 0 rows affected (0.03 sec)

#現在使用中のデータベース内のすべてのテーブルを表示
mysql> show tables;
+------------------+
| Tables_in_testdb |
+------------------+
| testtb           |
| testtb2          |
+------------------+
2 rows in set (0.00 sec)

#テーブルtesttbのテーブル構造を表示

mysql> desc testtb;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| col1  | int(11)     | YES  |     | NULL    |       |
| col2  | varchar(10) | YES  |     | NULL    |       |
+-------+-------------+------+-----+---------+-------+
2 rows in set (0.00 sec)

#テーブルtesttb2のテーブル構造を表示
mysql> desc testtb2;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| col3  | int(11)     | YES  |     | NULL    |       |
| col4  | varchar(10) | YES  |     | NULL    |       |
+-------+-------------+------+-----+---------+-------+
2 rows in set (0.00 sec)

#testtbにレコードの追加
mysql> insert into testtb values(1, 'test');
Query OK, 1 row affected (0.00 sec)

#testtbにレコードの追加
mysql> insert into testtb values(2, 'test2');
Query OK, 1 row affected (0.00 sec)

#testtbのすべてのカラムの確認
mysql> select * from testtb;
+------+-------+
| col1 | col2  |
+------+-------+
|    1 | test  |
|    2 | test2 |
+------+-------+
2 rows in set (0.00 sec)

#testtbの内容をすべてコピーして新たなテーブルtesttb3を作成
mysql> create table testtb3 select * from testtb;
Query OK, 2 rows affected (0.02 sec)
Records: 2  Duplicates: 0  Warnings: 0

#テーブルを確認
mysql> show tables;
+------------------+
| Tables_in_testdb |
+------------------+
| testtb           |
| testtb2          |
| testtb3          |
+------------------+
3 rows in set (0.00 sec)

#testtb3のレコードを一覧
 mysql> select * from testtb3;
+------+-------+
| col1 | col2  |
+------+-------+
|    1 | test  |
|    2 | test2 |
+------+-------+
2 rows in set (0.00 sec)

#testtb3テーブルを削除(drop)する。
mysql> drop table testtb3;
Query OK, 0 rows affected (0.00 sec)

mysql> show tables;
+------------------+
| Tables_in_testdb |
+------------------+
| testtb           |
| testtb2          |
+------------------+
2 rows in set (0.00 sec)

#testtbデータベースを削除
mysql> drop database testdb;
Query OK, 2 rows affected (0.02 sec)

#データベースの確認
#testtbが削除されていることが確認することができる。
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| kokyaku            |
| mysql              |
| phpmyadmin         |
| player             |
+--------------------+
5 rows in set (0.00 sec)

【参考文献】
西沢夢路『基礎からのMySQL』SoftBank Creative2012 30 - 58 ,  96 - 110pp



Relational Databaseの基本

#データベースの定義
データベースとは、何らかの規則性を持ったデータの集まりを意味します。ただやみくもに集めたデータの集合はデータベースとは呼びません。

#データベースの起源
第二次世界大戦後の米軍が、膨大な資料を効率的に管理することを目的として、情報を1つの基地に集めました。この集められた情報の基地をデータベース(Database) と読んだのが始まりと言われているそうです。

#Relational Database
1件のデータをレコード、項目をカラム(列)と呼びます。レコードの集まりである表をテーブルと呼びます。1つのデータベースは複数のテーブルを保持します。



#RDBMS
RDBMS: Relational DataBase Management Systemの略。Oracle, Access, PostgreSQL, MySQLが含まれます。

#MySQLの特徴
・動作が速い
・オープンソース
・多くのOSで動作する
・多くのプログラム言語が対応している
・無償および有償の2つの形態がある


【参考文献】
西沢夢路『基礎からのMySQL』SoftBank Creative2012 2 - 8pp

PHPでデータベースの内容を取り出し表示する


#####データベース(player)の作成####
mysql> CREATE
mysql> create database player;
Query OK, 1 row affected (0.00 sec)

mysql> use player;
Database changed
mysql> CREATE TABLE player (number smallint, name text, position text, date timestamp) engine=MyISAM;
Query OK, 0 rows affected (0.31 sec)

#データを入力
mysql> insert into player (number, name, position, date) values ( 1 , '川口能活', 'GK', now());
Query OK, 1 row affected (0.00 sec)

mysql> select number, name, position, date from player;
+--------+--------------+----------+---------------------+
| number | name | position | date |
+--------+--------------+----------+---------------------+
| 1 | 川口能活 | GK | 2013-01-07 23:11:37 |
+--------+--------------+----------+---------------------+
1 row in set (0.00 sec)

#####ここまで#####




####データベースの内容を表示するスクリプト(/var/www/web/ichiran.php)#####

<?php

echo "<HTML lang=ja>\n";
echo "<HEAD>\n";
echo "<META HTTP-EQUIV=Content-Type CONTENT=text/html; CHARSET=UTF-8>\n";
echo "<TITLE>一覧表示</TITLE>\n";
echo "</HEAD>\n";
echo "<BODY>";
echo "<h3><p>選手一覧表示</h3></p>";
///-----------データベース情報
$DBSERVER ="localhost";
$DBUSER="kappa";
$DBPASS ="kappa";
$DBNAME ="player";

///------------MySQLに接続
$con = mysql_connect($DBSERVER, $DBUSER, $DBPASS);
///------------エラー処理1
if(!$con){
 echo "データベース接続開始エラー<br>\n";
 mysql_close($con);
 exit;
}


///------------データベースを選択
$selectdb = mysql_select_db($DBNAME);


///------------クエリを送る
$query = "select * from player; ";
///------------結果の取得
$result = mysql_query($query);

///------------エラー処理1
if(!$result){
 echo "データベースエラー<br>\n";
 mysql_close($con);
 exit;
}

///------------行数を取得
$num_row = mysql_numrows($result);
$num_field = mysql_num_fields($result);
echo "該当件数".$num_row."件です<br>\n";


echo "<table border=1>\n";
echo "<tr>\n";
///+++++++++ 列名 ++++++++++
//テーブルの見出しを表示させるため、フィールド数だけループをまわす
for($i =0; $i < $num_field; $i++){
 echo "<th>".mysql_field_name($result, $i)."</th>";
}

///+++++++++ レコード表示 ++++++++++
//レコード数だけループをまわす
for($j =0 ; $j < $num_row; ++$j){
//1レコード分のデータを取り出し、連想配列$rowに格納
 $row = mysql_fetch_array($result);
echo "<tr>";
  for($k=0; $k < $num_field; ++$k){
   echo "<td>".$row[$k]."</td>";
  }
echo "</tr>\n";
}
echo "</table>";

echo "<hr>計 $num_row 件<hr>\n";


///+++++++++ mysqlを切断 ++++++++++
mysql_close($con);

echo "</BODY></HTML>";

?>

####ここまで#####



【参考文献】
清水正人 『6時間でできるLAMPサーバー構築ガイド』ソシム 2007 98 - 109 ,132 - 143pp

MySQLの基本的な使用方法



### MySQLのユーザー管理の基本的な方法###
#mysqlへログイン
$ mysql -p -u root

mysql>


#ユーザーと、ホスト、パスワード(暗号化されて表示)の確認
mysql> select user, host, password from mysql.user;
+------------------+-----------+-------------------------------------------+
| user | host | password |
+------------------+-----------+-------------------------------------------+
| root | localhost | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| root | kappa | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| root | 127.0.0.1 | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| debian-sys-maint | localhost | *13D2E672A484EF5900F103BFC78F4FE30550E999 |
| phpmyadmin | localhost | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
+------------------+-----------+-------------------------------------------+

# kappaというユーザーを作成し、すべての権限を与え、kappaというパスワードを作成します。ホストは、localhostです。
mysql> grant all on *.* to kappa@"localhost" identified by "kappa";

#ユーザー情報の確認。kappaユーザーの追加を確認する。
mysql> select user, host, password from mysql.user;
+------------------+-----------+-------------------------------------------+
| user | host | password |
+------------------+-----------+-------------------------------------------+
| root | localhost | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| root | kappa | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| root | 127.0.0.1 | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| debian-sys-maint | localhost | *13D2E672A484EF5900F103BFC78F4FE30550E999 |
| phpmyadmin | localhost | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| kappa | localhost | *663387C80A4750C29F7B2AB0490A522AFE4940E7 |
+------------------+-----------+-------------------------------------------+




####以後は、kokyakuというデータベースを作成して、データを追加していく####

#上で作成した一般ユーザーkappaでログイン
mysql> exit

$ mysql -p -u kappa

mysql>

#データベースの確認
mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| mysql |
| phpmyadmin |
+--------------------+

# kokyakuというデータベースを追加する
mysql> create database kokyaku;

#データベースの確認
mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| kokyaku |
| mysql |
| phpmyadmin |
+--------------------+

#kokyaku を使用する
mysql> use kokyaku

#一度、mysqlをバックグランド処理へ送る
control + z

#データベースを作成するためのスクリプトを作成

$ echo "CREATE TABLE address(id smallint, name text, zip text, city text, addr text, tel text(10), date timestamp ) engine=MyISAM;" > kokyaku.scrip

#mysqlをフォアグラウンドへ
$ fg

mysql>

#スクリプトを読み込む
mysql> source kokyaku.script

#データを挿入
insert into address (id, name, zip, city, addr, tel, date) values ( 1, '山田花子', '100-0000', 'とうきょうとt 東京都ちよd ちよだ ちよだk ちよだく 千代田区 千代田区', '千代田1-1-1', '0120-345-689', now());


#addressというkokyakuデータベース内に作成したテーブルの内容を表示する。
mysql> select * from address;
+------+--------------+----------+-----------------------+----------------+--------------+---------------------+
| id | name | zip | city | addr | tel | date |
+------+--------------+----------+-----------------------+----------------+--------------+---------------------+
| 1 | 山田花子 | 100-0000 | 東京都千代田区 | 千代田1-1-1 | 0120-345-689 | 2013-01-06 22:40:42 |
+------+--------------+----------+-----------------------+----------------+--------------+---------------------+

####kokyakuデータベースのバックアップについて###

#以下のようにmysqldumpを行います。標準出力に結果が表示されるので、ファイル出力にリダイレクトが必要です。
$ mysqldump kokyaku -u kappa -p > ./kokyaku.sql

#一度、kokyakuを消去して、バックアップファイルからリストアしてみます。
#kokyaku の消去

$ mysql -u kappa -p

mysql > DROP DATABASE kokyaku

#消去の確認
mysql > show DATABASES;

+--------------------+
| Database |
+--------------------+
| information_schema |
| mysql |
| phpmyadmin |
+--------------------+

#カレントディレクトリのkokyaku.sqlを用いてリストアを行う。
#一度、同名のデータベースを作成しなおしておく必要あり。
mysql> create database kokyaku;
mysql> exit

#バッックアップデータからの読み込み
$ mysql kokyaku -u kappa -p < ./kokyaku.sql

mysql> use kokyaku;
mysql> select * from address;
+------+--------------+----------+-----------------------+----------------+--------------+---------------------+
| id | name | zip | city | addr | tel | date |
+------+--------------+----------+-----------------------+----------------+--------------+---------------------+
| 1 | 山田花子 | 100-0000 | 東京都千代田区 | 千代田1-1-1 | 0120-345-689 | 2013-01-06 22:40:42 |
+------+--------------+----------+-----------------------+----------------+--------------+---------------------+



【参考文献】
清水正人 『6時間でできるLAMPサーバー構築ガイド』ソシム 2007 98 - 109 ,132 - 143pp

HTMLで表を作成

HTMLの中に表を挿入するスキルは、MySQLとPHPを組み合わせてWebページを構成するときに必要となります。

代表的なタグ

#~の部分が表であることを示す
<table> ~ </table>

#見出し用のセルを指定する
<th> ~ </th>

#表の中の一つの行を指定する
<tr> ~ </tr>

#行の中の一つのセルを指定する
<td>~</tr>

例

$ vim table.html

#########ここから########


<html>

</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table Test</title>

<body>

<!-- 線の幅を1としたtableを作成-->
<table border=1>

<!-- 見出しの行のセルを指定する-->
<tr>
<th>名前</th>
<th>年齢</th>
</tr>

<!-- データを入力-->
<!-- 1行目 -->
<tr>
<td>Tom</td>
<td>24</td>
</tr>

<!-- データを入力-->
<!-- 2行目 -->
<tr>
<td>Jhon</td>
<td>29</td>
</tr>

<!-- データを入力-->
<!-- 3行目 -->
<tr>
<td>Anna</td>
<td>25</td>
</tr>

</table>


</body>
</html>



#########ここまで########


$ open table.html



【参考文献】
佐藤和人&できるシリーズ編集部 2011 『できるホームページ HTML&CSS入門』 インプレスジャパン 166 -181pp


フォームを介したクライアントとサーバーとのやりとり

クライアントがサーバー側に特定の要求を行うとき、フォーム FORMと呼ばれる仕組みが使用されることが多いです。

クライアントとサーバーとのやりとりをいかに示します。


##################################################
凡例 : クライアント側の操作 サーバー側の操作
##################################################

1.クライアントはWebブラウザを介して、サーバー側にFORMが内蔵されたHTMLファイルを要求

2.サーバーはFORMが内蔵されたHTMLファイルを問い合わせ元に送信

3.クライアントはWebブラウザ内でFORMに必要事項を入力して、データを送信

4.サーバーは、2.のファイル内で指定されたPHPファイルにフォームの内容をPHPの変数の形で受け渡す。

5.PHPスクリプトが、MySQLにアクセスするなどの種々の計算処理を行う。

6.PHPスクリプトが、結果を載せたWebページを書き出してクライアント側に送信する。

7.クライアントはWebブラウザ上で、サーバーの計算結果を閲覧する。

フォームに入力された文字をそのまま、送り返すPHPスリプトの一例です。

---------------HTMLファイル始まり(form.html)------------------
<html>

<head>
<!--  文字コードの宣言 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<!-- タブにページタイトルを入れる -->
<title>クライアント・サーバー間の交信</title>

</head>

<body>
<form method="post", action="uke.php">
<input type="text", name="a">
<BR>
<input type="submit" value="送信">
</form>

</body>


</html>

---------------HTMLファイル終わり(form.html)------------------



---------------PHPスクリプト始まり(uke.php)------------------
<!--  文字コードの宣言 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<!-- タブにページタイトルを入れる -->
<title>サーバー側にあるPHPファイルから生成したページ</title>
<?php
print $_POST["a"];
?>
---------------PHPスクリプト終わり(uke.php)------------------

#フォームの入力例
 #サーバーからの返信
【参考文献】
西沢夢路 2012『基礎からのMySQL』 Soft Bank Creative








UbuntuにApache2をインストール

APACHEはクライアントからの要求に応じてhtmlファイルを配布する仕事を担うWebサーバーのことを指します。
#ubuntuにapache2をインストール。
sudo apt-get install apache2

#デーモン管理ツールであるsysv-rc-confをインストール
sudo apt-get install sysv-rc-conf

#sysv-rc-confを起動し、ランレベルの2-5においてonにする。
apt-get sysv-rc-conf
#方向キーで移動して、スペースキーでオンオフの変更ができる。

/var/wwwディレクトリの所有権


/var/wwwディレクトリはAPACHEがファイルを配布するときのドキュメントルートとなっています。

ここは所有者がroot、所有グループがrootであるため、このディレクトリの中に所有者が自分であるディレクトリを作っておきましょう。

$ ls -l
合計 12
-rw-r--r-- 1 root root  177 2013-01-02 10:37 index.html
-rw-r--r-- 1 root root   21 2013-01-02 11:31 info.php
drwxr-xr-x 2 root root 4096 2013-01-04 00:28 web
$ sudo chown kappa.kappa web
$ ls -l
合計 12
-rw-r--r-- 1 root  root   177 2013-01-02 10:37 index.html
-rw-r--r-- 1 root  root    21 2013-01-02 11:31 info.php
drwxr-xr-x 2 kappa kappa 4096 2013-01-04 00:28 web

#これで、/var/www/webディレクトリにはkappaユーザーが自由にファイルを配置することが可能になりました。

mysqlの文字コード設定


#virtual box内のubuntu 10.04のmysqlの文字コードをutf8に変更する

$ mysql -u root -p

mysql>  show variables like 'char%';
+--------------------------+----------------------------+
| Variable_name            | Value                       |
+--------------------------+----------------------------+
| character_set_client     | latin1                      |
| character_set_connection | latin1                 |
| character_set_database   | latin1                  |
| character_set_filesystem | binary                 |
| character_set_results    | latin1                    |
| character_set_server     | latin1                    |
| character_set_system     | utf8                      |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.00 sec)


$ sudo vim /etc/mysql

#/etc/my.cnfに以下の6行を追記する。
sudo vim /etc/mysql/my.cnf

[mysqld]
default-character-set=utf8
character_set_server=utf8
skip-character-set-client-handshake
[mysql]
default-character-set=utf8

#mysqlの再起動
$ sudo /etc/init.d/mysql restart

mysql> show variables like 'char%';
+--------------------------+----------------------------+
| Variable_name            | Value                       |
+--------------------------+----------------------------+
| character_set_client     | utf8                         |
| character_set_connection | utf8                    |
| character_set_database   | utf8                    |
| character_set_filesystem | binary                 |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                      |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+

#文字コードは無事utf8に統一された。

Virtual boxのLinuxのIPアドレスを固定する(Ubuntu 10.04)


Virtual boxにインストールしたUbuntu10.04のIPアドレスの固定を行います。


$ sudo vim /etc/network/interfaces


auto lo
iface lo inet loopback

auto eth1
iface eth1 inet static
address 192.168.56.101
netmask 255.255.255.0
gateway 192.168.56.1


$ sudo reboot 



#固定のIPアドレスに対してホストOSからアクセス可能なのを確認
[mac]$ ssh 192.168.56.101

LAMPサーバーとは(Webサーバーの基本)

LAMPとはLinuxサーバーを基盤として、ウェブサーバーのApacheとデータベースサーバーであるApacheとウェブページを動的に構成するPHPの組み合わせた環境のことを指します。
L:Linux=OS
A:Apache=Webサービスを提供するソフト
M:MySQL=データベース・サービスを提供するソフト
P:PHP/Perl=開発言語

ApacheとMySQLは各々が単独で動作しているだけでは全く連携が取れません。Apacheで外部からの要求に応え、要求されたデータをMySQLから取り出したり、MySQLに新データとして蓄積するのがPHPプログラムの役割です。




【参考文献】
エンジニアでない人のための「Web+DBサイト」入門
http://itpro.nikkeibp.co.jp/article/COLUMN/20070507/270066/

PHPの第一歩


phpの基本構造はhtmlファイルと同じです。ただし、拡張子は.phpにします。

次のスクリプトは、システム時間を取り出してhtml形式でクライアントにhtml形式のページを送信するプログラムです。

#phpスクリプトの作成

$ sudo vim /var/www/time.php

<html>
<head>
<!--  文字コードの宣言 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<!-- タブにページタイトルを入れる -->
<title>What time is it, now ?</title>

<body>
<?php
        /* phpの構文の埋め込み */
        echo '現在の時刻は';
        date_default_timezone_set('Asia/Tokyo');
        echo date("Y 年 m 月 d 日 H 時 i 分 s 秒");
        echo 'です。';
?>
</body>

</html>


#ホストからアクセス
[mac]$ open -a "Google Chrome" http://192.168.56.101/time.php

#もしも、スクリプトの拡張子を.htmlとしてしまうと、APACHEはそのファイルを単なるHTMLファイルとしか認識しないため、phpの構文が実行されませんのでご注意ください。


Ubuntu10.04でLAMPサーバーを構築


Virtual box上で稼働するUbuntu 10.04上で、LAMP(Linux-Apache-MySQL-PHP)サーバーを構築します。

【注意】
今回は、必要最低限の設定しか行わないのでセキュリティが脆弱です。
この記事をされる方は、あくまで全体像を把握する目的で使用されることをお勧めします。

#Ubuntuに接続
$  ssh 192.168.56.101

#ubuntuにapache2をインストール。
$ sudo apt-get install apache2

#Ubuntuのデーモン管理ツールであるsysv-rc-confをインストール
$ sudo apt-get install sysv-rc-conf

#sysv-rc-confを起動させ、apache2を常駐させる(デフォルトでランレベル2 - 5にチェックが入っているはず。)
$ sudo sysv-rc-conf

#ホストからアクセス
[mac] $ open -a "Google Chrome" http://192.168.56.101/index.html



#ゲストのUbuntuに戻り
#phpとmysqlをインストールする。
#php5 php5-gd mysql-server php5-mysql phpmyadminの5つのパッケージである。
#途中でmysqlのrootユーザーのパスワード設定を求められるので、今回はローカル環境であることから、"root"としておいた。
$ sudo apt-get install php5 php5-gd mysql-server php5-mysql phpmyadmin


#phpの動作確認
#テストページの作成
$ sudo vim /var/www/info.php

#ホストからアクセス
[mac] $ open -a "Google Chrome" http://192.168.56.101/info.php



#mysqlサーバーの設定
#まずはmysqlサーバーを常駐させる
#sysv-rc-confが立ち上がったら、mysqlの2-5にスペースキーでチェックを入れる
$ sudo sysv-rc-conf

#phpを用いてmysqlにアクセスするスクリプトを作成
$ sudo vim /var/www/mysql-test.php

<?php
mysql_connect("localhost","root","root") or die("Error MySQL First

Test");
echo "Success MySQL First Test";
?>

#ホストからアクセス
[mac] $ open -a "Google Chrome" http://192.168.56.101/mysql-test.php







javascriptの埋め込み

javascriptはいろいろな場所に埋め込むことができます。今回は、document.write()を(1)HTML文書内,(2)外部ファイル, (3 - a)ブラウザで直接実行 (3 - b) の4パターンにわけてみたいと思います。


(1)HTML文書内

$ vim hello1.html


 <html>
<head>

<!-- HTML 4からmetaタグでデフォルトスクリプト言語をしていることが推奨されている -->
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Hello, javascript</title>
</head>


<body>

<script language="JavaScript" type="text/javascript">
<!--   
        document.write("Hello embedded in body.");
// -->
</script>

</body>

</html>


$ open hello1.html





(2)外部ファイル
$ vim hello2.html

<html>
<head>

<!-- HTML 4からmetaタグでデフォルトスクリプト言語をしていることが推奨されている -->
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello, javascript</title>
</head>

<body>

<!-- 外部ファイルを読み込ませて事項するためにはsrc属性を追加すればよい -->
<script language="JavaScript" type="text/javascript" src="./hello.js">
</script>

</body>
</html>


$ vim hello.js

document.write("Hello embedded in the external source file.");

$ open hello2.html





(3 - a)ブラウザで直接実行
なにかページを開いている状態で、下の一行をアドレスバーへ入力
:javascript:alert("Hello in the address bar.")




(3 - b)リンクから実行

$ vim hello3b.html



<html>
<head>

<!-- HTML 4からmetaタグでデフォルトスクリプト言語をしていることが推奨されている -->
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Hello, javascript</title>
</head>


<body>

<!-- リンク先にjavascriptのコードを入力することでリンク先としてコードを実行できる -->
<a href="javascript:alert('hello in link.');">Hello</a>

</body>

</html>

$ open hello3b.html




【参考文献】市井あきら 「 Ajax+JavaScriptコマンドブック」2006  Softbank Creative




Virtualboxのゲストマシーンにssh接続

mac os x10.6.8
vrtualbox 4.2.6
ubuntu 10.04

の環境を前提に書きます。


virtualbox を起動して、画面左上のvirtualboxの中のpreferenceをクリックします。

次にNetworkをクリックして、プラスボタンを押し、追加します。追加したものを選んで、ドライバーマークをクリックすると「edit host-only network」をクリックします。すると、IPV4やMACが表示されるので、とりあえずデフォルトでOKを押します。








次にOS選択画面のSetting -> Networkをクリックして、host-only Adaptor ,  vboxnet0, Denyとして設定を行い、okを押します。




あとは、ゲストにsshサーバーをインストールすればよいです。

$ sudo apt-get update
$ sudo apt-get install openssh-server


ホスト側から、
$ ssh 192.168.56.101
と入力して、ゲスト側のユーザーとパスワードを入力すればログイン可能です。