MySQL導入

PHP

1.データベースを作成する

2.テーブルを作成

3.フィールドの詳細を設定

4.テーブル内容を挿入


SQLに記述して.テーブル内容を挿入する

INSERT INTO items SET id=1, name='商品1';

テーブルを作るSQL：CREATE

CREATE TABLE my_items (id INT, item_name TEXT, price INT);

データを更新するSQL：UPDATE

UPDATE items SET price=140 WHERE id=2;

WHEREで検索

SELECT*FROM my_items WHERE item_name='いちご';


不等号を使う
SELECT*FROM my_items WHERE price>180;


前後をあいまいにした部分検索
SELECT * FROM my_items WHERE keyword LIKE '%甘い%';


複数の条件をどれかを満たすデータの検索
SELECT * FROM my_items WHERE (id=2 OR id=4) AND price<150 AND keyword LIKE '%甘い%';

日本語表示に対応させるための準備

PHP

上記のフォルダ内の「php.ini」ファイルを編集する。（phpのバージョンは要確認）

  • ;default_charset = "iso-8859-1" → default_charset = "UTF-8"
  • ;mbstring.language = Japanese → mbstring.language = Japanese（;をトルツメ）
  • ;mbstring.internal_encoding = EUC-JP → mbstring.internal_encoding = UTF-8
  • date.timezone = "Europe/Berlin" → date.timezone = "Asia/Tokyo"

シングルクォートとダブルクォートを使い分ける

PHP 
<?php
 print ("ダブルクォートで特殊文字の「\\n」を出力します。<br>\n");
 print 'シングルクォートの場合は「\n」はそのまま出力されます。';
 print ("\n");
?>

シングルクォートは文字をそのままブラウザに表示させる時
ダブルクォートはコードの記述をする時に使う。

<?php
$product = '消しゴム';
print("$product".'を販売しています。');
?>
<br>
<?php
$product = '消しゴム';
print('$product'.'を販売しています。');
?>


if文

<?php
$num = 0;
print('ようこそ'."\n");
print('<hr>'."\n");

if($num <=0){
  print('申し訳ありません。在庫切れです。'."\n");
}elseif($num <=3){
  print('在庫が希少です。'."\n");
  }else{
  print('いらっしゃいませ。在庫があります。在庫数は'."$num".'です。'."\n");
}
  print('<hr>'."\n");
  print('ごゆっくりお過ごしください。'."\n");
?>

WordPress導入

WordPress

WordPress
WordPress3.3をダウンロード
↓
MAMPのhtdogsにフォルダを入れる
↓
MAMPのスタートページのMyAdminのデータベースのデータベースを作成
「フォルダ名」「UTF-8-general-ci」を選択し、作成
↓
http://localhost/任意のフォルダ名/
にアクセスしユーザー登録。
ユーザー名、パスワードは任意
検索エンジンに〜はチェックを外す
↓
インストール実行
↓
完了後上記のパスワードでログイン
↓
導入完了！

タブパネル

jQuery

http://jquerytools.org/demos/tabs/index.html
ここのライブラリを利用する。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>jQuery Tools タブパネル</title>

    <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
  
  <!-- standalone page styling (can be removed) -->
  <link rel="shortcut icon" href="img/favicon.ico">
  <link rel="stylesheet" href="css/tabs.css" type="text/css" media="screen">
</head>
<body>
<div id="tabpannel">
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul><!-- /the tabs -->

<div class="panes">
	<div>First tab content. Tab contents are called "panes"</div>
	<div>Second tab content</div>
	<div>Third tab content</div>
</div><!-- /tab "panes" -->
</div>
<script>
// perform JavaScript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>

/*reset-----------------------------------*/
bosy, ul, li, a {
    margin:0 ;
    padding:0;
}
ul {
    list-style:none;
    list-style-image:none;
}
body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif;
}

/* get rid of those system borders being generated for A tags */
a:active {
    outline:none;
}

:focus {
    -moz-outline-style:none;
}
/*tabs--------------------------------------------------------------*/
/* root element for tabs  */
ul.tabs {
    border-bottom:1px solid #666;
    height:30px;
}

/* single tab */
ul.tabs li {
    float:left;
}

/* link inside the tab. uses a background image */
ul.tabs a {
    background: url(../img/green.png) no-repeat -420px 0;
    font-size:15px;
    font-weight: bold;
    display:block;
    height: 30px;
    line-height:30px;
    width: 134px;
    text-align:center;
    text-decoration:none;
    color:#888;
    position:relative;
    top:1px;
}

ul.tabs a:active {
    outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
    background-position: -420px -31px;
    color:#fff;
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    background-position: -420px -62px;
    cursor:default !important;
    color:#32a778 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */
.panes .pane {
    display:none;
}
/*tab-panel-------------------------------------------------*/

/* tab pane styling */
.panes div {
    display:none;
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    height:100px;
    font-size:14px;
    background-color:#fff;
}

#tabpannel {
  min-width: 500px;
}

設計フェーズ

ワークフロー

>Cacoo（クラウドサービス）で作成する。
https://cacoo.com/lang/ja/

要件定義書

  • サイトの目的
  • キーワード設計
  • ターゲット設定
  • 色彩計画


サイト構造設計


ページ構造設計


制作仕様書

  • 企画やヴァージョン、ID名のルールなど。

IE6対策！

JavaScript

Internet Explolar6は…

  • カラム落ちする
  • 透過PNGが不対応

IE6透過PNG対策は「DD_belatedPNG.js」

  • 「DD_belatedPNG_0.0.8a-min.js」ファイルをダウンロードする。

配布元：DillerDesign

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->

適応前

適応後

IE6絡む落ち対策

float:leftしたときのmargin-left、float:right;した時のmargin-rightが指定どおりにいかなくなる。

魔法の言葉「display: inline;」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>透過PNGのIE6対策</title>
<style>
body, div, p, imgg {
  margin: 0;
  padding: 0;
}
body {
  background: url(img/webtreats-paper-pattern-5-brown.jpg) ;
}
p {
  text-align: center;
}
#wrapper {
  background: #CCC;
  width: 913px;
  margin: 30px auto;
  overflow: hidden;
}
#contentLeft {
  background: #CAC;
  width:356px;
  float: left;
  margin-left: 10px;
  display: inline;
}
#contentRight {
  background: #ACC;
  width:537px;
  height:454px;
  float:right;
  margin-right: 10px;
  display: inline;
}
</style>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->
</head>
<div id="wrapper">
<div id="contentLeft">
<p><img src="img/penguin_cafe.png" width="356" height="355" alt="ペンギンカフェ"></p>
</div>
<div id="contentRight">
<p><img src="img/dragon.png" width="537" height="454" alt="龍"></p>
</div>
<body>
</body>
</html>