６月１３日 授業内容(データベースとの連携、ゲストブック作成-設計、 Masonry,isotope(画像の幅に合わせて自動的に配列が変わる))
データベースとの連携
web-design-exercise.hatenablog.jp
<?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
※１つ目はデータが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
Masonry
web-design-lesson.hatenablog.jp
Masonryのサイトのここでjsをダウンロードする
<!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>
