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

6月13日 授業内容(データベースとの連携、ゲストブック作成-設計、  Masonry,isotope(画像の幅に合わせて自動的に配列が変わる))

データベースとの連携
web-design-exercise.hatenablog.jp

f:id:paris1204:20160613170646p:plain


f:id:paris1204:20160613170703p:plain


f:id:paris1204:20160613170714p:plain


f:id:paris1204:20160613190431p:plain

<?php
  // MySQLに接続
  $myId = mysql_connect( 'localhost', 'root', 'root' );

  // データベースの接続に失敗した場合
  if( $myId == FALSE ){//①データベースへアクセスできたかどうか
      echo 'MySQLの接続に失敗しました・・・';
  } else {
      echo 'MySQLの接続に成功しました!<br>';

  // データベースの選択に失敗した場合
  if( mysql_select_db( 'mydb', $myId ) == FALSE ) {//アクセスできたけど中に指定したデータがあるかどうか
      echo 'データベースの選択に失敗しました!';
  } else {
      echo 'データベースの選択に成功しました!';
  } //if( mysql_select_db( 'mydb', $myId ) == FALSE ) 
	
  }//if( $myId == FALSE の締め
	
	
	

web-design-exercise.hatenablog.jp

f:id:paris1204:20160613190534p:plain

1つ目はデータが4つあり、2つ目はデータベース自体ないのでbool(false)を出力

<?php
  // MySQLに接続
  $myId = mysql_connect( 'localhost', 'root', 'root' );

  // MySQLの接続に失敗した場合
  if( $myId === FALSE ){
      // die関数:引数の文字列を出力して処理を終了します
      die ( 'MySQLの接続に失敗しました・・・' );
  }

  // データベースの選択に失敗した場合
  if( mysql_select_db( 'mydb', $myId ) === FALSE ){
      // exit関数:引数の文字列を出力して処理を終了します
      exit ( 'データベースの選択に失敗しました・・・' );
  }
  
  // 結果リソースが返却されます
  $res = mysql_query( 'select * from my_items' );//$resは結果(resultの略)
  // 戻り値の値を確認してみましょう
  var_dump( $res );
  echo '<br>';
  
  // SQL文が正しくないため、FALSEが返却されます
  $res = mysql_query( 'select * from product' );
  // 戻り値の値を確認してみましょう
  var_dump( $res );
  
  // MySQL切断
  mysql_close( $myId );




ゲストブック作成-設計
web-design-exercise.hatenablog.jp

f:id:paris1204:20160613170901p:plain

f:id:paris1204:20160613170915p:plain

f:id:paris1204:20160613170929p:plain




Masonry

web-design-lesson.hatenablog.jp

f:id:paris1204:20160613193733p:plain

f:id:paris1204:20160613193747p:plain


Masonryのサイトのここでjsをダウンロードする
f:id:paris1204:20160613201126p:plain


f:id:paris1204:20160613200941p:plain
f:id:paris1204:20160613200953p:plain
f:id:paris1204:20160613201003p:plain
f:id:paris1204:20160613201014p:plain
f:id:paris1204:20160613201023p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Masonry</title>
<style>
.box{float:left;}

.box{width:200px;/*高さ、幅以外の共通項目を.boxで*/
height:200px;
margin:10px;
border-rdius:6px;
background:olive;
line-height:200px;
text-align: center;
  font-size: 40px;
  font-weight: bold;
	opacity:0.5;}
	
	.box2{width:420px;
	background:pink;
	opacity:0.3;}
	
	.box3{height:420px;
	background:yellow;
	opacity:0.7;}
	
	.box4{width:420px;
	height:420px;
	line-height:420px;
	background:#666666;
	opacity:0.3;}


</style>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script><!--Masonryのjs-->

</head>

<body>
<div class="grid">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box1">5</div>
<div class="box box2">6</div>
<div class="box box3">7</div>
<div class="box box2">8</div>
<div class="box box3">9</div>
<div class="box box4">10</div>
<div class="box box1">11</div>
<div class="box box3">12</div>

</div><!--.grid-->
<script>
$('.grid').masonry({//.gridは.boxを囲んでいるdiv
  itemSelector: '.box',//その中の.boxにjsの設定をしている
});
</script>
</body>
</html>



Isotope

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>isotope</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;
}
.box {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  border-radius: 6px;
  background: #FFF;
  line-height: 200px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}
.box2 {
  width: 420px;
}
.box3 {
  height: 420px;
}
.box4 {
  width: 420px;
  height: 420px;
}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
</head>
<body>
<div class="grid">
<div class="box box1">1</div>
<div class="box box1">2</div>
<div class="box box3">3</div>
<div class="box box1">4</div>
<div class="box box2">5</div>
<div class="box box3">6</div>
<div class="box box1">7</div>
<div class="box box4">8</div>
<div class="box box2">9</div>
<div class="box box1">10</div>
<div class="box box4">11</div>
<div class="box box2">12</div>
</div><!-- /.grid -->
<script>
$('.grid').isotope({
  itemSelector: '.box',
});
</script>
</body>
</html>