出身地 mysql php sample

データーベースを作る

mysql -u root -p

create database fromwhere;

use fromwhere;

デーブルを作る

CREATE TABLE wherefrom(

ID int(255) not null auto_increment,

Name varchar(255),

wherefrom varchar(255),

Sex varchar(255),

PRIMARY KEY (ID)
);

データーを登録

INSERT INTO wherefrom (Name,wherefrom,Sex) VALUES (‘山田’,’函館’,’女性’);

userに部分権限を適用

GRANT SELECT,UPDATE,INSERT,DELETE ON fromwhere.* TO ‘user’@’localhost’;

vi /var/www/html/fromwhere/index.php

<?php
//ここにプログラムを書く
define(‘DB_HOST’,’localhost’);
define(‘DB_USER’,’user’);
define(‘DB_PASSWORD’,’パスワード’);
define(‘DB_NAME’,’fromwhere’);//データベース名
$dbhost = “mysql:host=”.DB_HOST.”;dbname=”.DB_NAME.”;charset=utf8″;

try{
$pdo = new PDO($dbhost,DB_USER,DB_PASSWORD);

//whereFromテーブルからすべての情報を取り出すsql文
$sql = “SELECT
*
FROM
wherefrom
“;

//全ての情報を保存
$statement = $pdo->query($sql);
//データベースを配列情報に変換して、入れる
$row = $statement->fetchAll(PDO::FETCH_ASSOC);

//データベースの接続アウト
$pdo=null;

}catch(PDOException $e){
echo ‘Error:’.$e->getMessage();//エラーの内容を吐き出す
}
?>

<!doctype html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ここにタイトル</title>
<link href=”css/reset.css” rel=”stylesheet” type=”text/css”>
<link href=”css/css.css” rel=”stylesheet” type=”text/css”>
</head>

<body>

<article>
<table>
<tr>
<th>ID</th>
<th>姓</th>
<th>出身地</th>
<th>性別</th>
</tr>
<?php
if(isset($row)){
foreach($row as $r){
echo ‘<tr>’;
echo ‘<td>’,$r[‘ID’],'</td>’;
echo ‘<td>’,$r[‘Name’],'</td>’;

echo ‘<td>’,$r[‘wherefrom’],'</td>’;
echo ‘<td>’,$r[‘Sex’],'</td>’;
echo ‘</tr>’;
}
}
?>
</table>

</article>
</body>
</html>

vi /var/www/html/fromwhere/css/reset.css

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:”}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

vi /var/www/html/fromwhere/css/css.css

@charset “utf-8”;
/* CSS Document */

body{
font: 14px/1.6 “Hiragino Kaku Gothic Pro”,Osaka,”メイリオ”,”ＭＳＰゴシック”,”MS PGothic”,Verdana,Arial,sans-serif;
margin:0;
color:#313131;
}

img{
outline:none;
border-style:none;
}

a{
color:blue;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
a:visited{
color:blue;

-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
a:visited{
color:blue;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
a:hover {
color: #F5A862;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

/*****HEADER*****/
header{
display: block;
width:60%;

margin-left: 20%;
overflow: hidden;
}
header h1{
font-size:120%;
color:#313131;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border:1px solid #313131;
border-radius: 5px;
letter-spacing: 3px;
font-weight:400;
float: left;
}
header p{
font-size:100%;
color:#313131;

color:#313131;
float: left;
}

/*****BRANDING*****/
#branding{
display: block;
width: 60%;
margin-left: 20%;
overflow: hidden;
background-color: #313131;
margin-bottom: 20px;
letter-spacing: 10px;
line-height: 300px;
}
#branding p{
color: #fff;
font-size: 120%;
padding-left: 3%;
}

/*****NAV*****/

nav{
width: 100%;
border-top: 1px solid orange;
border-bottom: 1px solid orange;
margin-bottom: 5px;
overflow: hidden;
}
nav ul{
width: 60%;
margin-left: 20%;
}
nav li{
width: calc(25% – 2px);
font-size: 110%;
letter-spacing: 5px;
font-weight: 400;
line-height: 45px;
border-left: 1px solid orange;
color: #313131;
cursor: pointer;
text-align: center;

float: left;
}
nav li:last-child{
border-right: 1px solid orange;
}

nav li:hover{
background-color: orange;
transition: background-color 0.5s ease-out;
color: #fff;
}

/*****ARTICLE*****/
article{
display: block;
width: 60%;
margin-left: 20%;
margin-bottom: 20px;
overflow: hidden;
}
section{

width: 41%;
padding: 2.5%;
margin: 1.5%;
background-color: #f9f9f9;
overflow: hidden;
float: left;
}
section .date{
font-size: 60%;
color: orange;
border: 1px solid orange;
padding-top:3px;
padding-bottom: 3px;
padding-right: 6px;
padding-left: 6px;
letter-spacing: 5px;
float: left;
}
section h1{
width: 100%;
font-size: 150%;

letter-spacing: 3px;
padding-bottom:2px;
padding-top: 10px;
border-bottom: 1px solid #bababa;
margin-bottom: 15px;
float: left;
}

section p{
font-size: 100%;
color: #313131;
letter-spacing: 3px;
line-height: 200%;
margin-bottom: 10px;
float: left;
}

section .btn{
color: #fff;

border: 1px solid orange;
background-color: orange;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 30px;
padding-left: 30px;
border-radius: 5px;
letter-spacing: 5px;
text-decoration: none;
overflow: hidden;
float: right;
}
section .btn:hover{
background-color: #fff;
border: 1px solid orange;
transition: background-color 0.5s ease-out;
transition: color 0.5s ease-out;
transition: border 0.5s ease-out;
color: orange;
overflow: hidden;
}

footer{
font-size: 80%;
width: 100%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background-color: #313131;
}
footer address{
color: #fff;
letter-spacing: 5px;
}

table {
width: 100%;
}

table tr th,
table tr td {
padding: 0 10px;
border: 1px solid #DDD;
vertical-align: middle;

}

table tr th {
text-align: center;
font-weight: bold;
}