HamiltonWang/nodejs_ejs_template_3_6

## gistfile1.txt
mkdir express_ejs
cd express_ejs
mkdir views && cd views
mkdir pages && cd ..  //<— 我們把所有 ejs 放在同一個地方來管理
npm init
npm install express —save
npm install ejs —save
nano index.js

## gistfile10.txt
// index.js
var circle = require(‘./circle’);

console.log( ‘area:’ + circle.area(4) );
console.log(‘circumference:’ + circle.circumference(4) );

## gistfile11.txt
# MariaDB 5.5 CentOS repository list - created 2017-02-07 08:59 UTC
# http://downloads.mariadb.org/mariadb/repositories/
[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/5.5/centos7-amd64
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1

## gistfile12.txt
sudo yum install MariaDB-server MariaDB-client

## gistfile13.txt
sudo systemctl enable mariadb   <— 讓他開機時自動啟動
sudo systemctl start mariadb      <— 啟動 MariaDB
mysql —version                          <— 如果成功會看到版本訊息

mysql  Ver  Distrib 5.5-MariaDB, for Linux (x86_64) using readline 5.1

## gistfile14.txt
firewall-cmd —permanent —add-port=3306/tcp
firewall-cmd —reload
firewall-cmd —list-all

## gistfile15.txt
mkdir mysql-demo && cd mysql-demo
npm init
npm install mysql —save
npm install express —save
npm install body-parser —save    // 解析 post
npm install moment —save    //日期工具
npm install ejs —save

## gistfile16.txt
<!-- db.js -->
var mysql = require('mysql');

// 資料庫設定
var conn = mysql.createConnection({
    user: 'admin',
    password: '1111',
    host: 'localhost',
    port: '3306',
    database: 'blogDB'
});
// 資料庫連線
conn.connect( function(err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }
    console.log('connected as id ' + conn.threadId);
});

module.exports = conn;

## gistfile17.txt
<!-- blog.js -->
var db = require('../db');
var moment = require(‘moment');     //  解析日期時間的工具

exports.getAllBlogs = function( callback ) {   // 自製 callback function
    db.query('SELECT * FROM db_blog', function (err, rows) {
        if (err) {
            callback(err);
        }
        callback( null, rows );    // 把取得的資料送回去, 沒 error 放 null
    })
}
exports.insertBlog = function( _user, _data, callback ) {
var insert_data ={
        user: _user,
        data: _data,
        dateTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
    }
    console.log(insert_data );
    db.query('INSERT INTO db_blog SET ?', insert_data, function (err) {
        if (err) {
            console.log('insert error:'+ err );
            callback(err);
        }
        callback(null);

    })
}

## gistfile18.txt
<!--index.js -->
var express = require('express');
var app = express();
var bodyParser = require(‘body-parser’)   // 用來解析 POST
var moment = require('moment');
var blog = require('./models/blog');

app.set('view engine', ‘ejs');            // 學過了
app.use(express.static(‘public'));   // 學過了

// 用來解析 application/x-www-form-urlencoded
app.use( bodyParser.urlencoded({
    extended: true
}));

app.post('/insert', (req,res) => {
    var _user = req.body.user;   // 學過了
    var _data = req.body.data;

    // 用我們的 model
    blog.insertBlog(  _user, _data , function( err ){
        if (err) {
            console.log(err);
        }
        //res.send('inserted'); // for debugging
        res.redirect(‘/blog');   // 轉址
    } )
});

app.post('/insert', (req,res) => {
    var _user = req.body.user;   // 學過了
    var _data = req.body.data;

    // 用我們的 model
    blog.insertBlog(  _user, _data , function( err ){
        if (err) {
            console.log(err);
        }
        //res.send('inserted'); // for debugging
        res.redirect(‘/blog');   // 轉址
    } )
});

app.get('/blog', (req, res) => {
    blog.getAllBlogs( function( err, result ){
        var data = {
            title: 'My blogs',
            blogs: result,
            moment: moment
        }
        res.render('index.ejs', data );   // render( view , model )
    });
});

app.listen(8081, function () {
     console.log('Example app listening on port 8081!');
});

## gistfile19.txt
<!-- index.ejs -->
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='/style.css' />
</head>
<body>
    <h1><%=title%></h1>
    <table class="table">
        <tr>
            <th>id</th>
            <th>user</th>
            <th>content</th>
            <th>date time</th>
        </tr>
        <% for ( var i = 0 ; i < blogs.length ; i++){ %>
            <tr>
                <td>
                    <%= blogs[i].blogId  %>
                </td>
                <td>
                    <%= blogs[i].user  %>
                </td>
                <td>
                    <%= blogs[i].data  %>
                </td>
                <td>
                    <%= moment( blogs[i].dateTime ).format('Do MMMM, YYYY')  %>
                </td>
            </tr>
            <% } %>
    </table>

    <div class="add">
        <form name="addform" action="insert" method="post" accept-charset="utf-8" >
            <div class="row">
                    <h1>Blog - Add</h1>
            </div>
            <div class="row">
                <label>user：</label>
                <input type="text" name="user" placeholder="user" />
            </div>
            <div class="row">
                <label>content：</label>
                <input type="text" name="data" placeholder="content" />
            </div>
            <div class="control">
                <input class="btn" type='submit' value='Submit'>
                <input class="btn"  type='reset' value='Reset'>
            </div>
        </form>
    </div>

    </body>
    </html>

## gistfile2.txt
var express = require(‘express’);
var app = express();
// 把 view 引擎設為 ejs
app.set('view engine', 'ejs');
var my_super_heroes = {
  title: ‘Super Heroes',
  superheroes: ['Superman', 'Batman', 'Hulk', 'Wonder woman']
}
app.get('/', (req, res) => {
    res.render(‘pages/superheroes.ejs’, my_super_heroes )
})
app.listen(8081, function () {
     console.log('Example app listening on port 8081!');
});

## gistfile20.txt
<!-- style.css -->
body {
    padding: 50px;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}


/* index */
.control {
    margin-top: 10px;
}

.add {
    margin-top: 40px;
}

.add input[type='text'] {
    height: 25px;
    padding: 0 5px;
}

.table {
    border-collapse: collapse;
    font-size: 16px;
    text-align: center;
}

.table tr {
    height: 35px;
    border-bottom: 1px solid #dddddd;
}

.table tr th {
    padding: 0 20px;
    font-weight: bold;
}

.table tr td {
    padding: 0 20px;
}

/* blog add */
.row {
    width: 280px;
    height: 30px;
    margin: 5px;
}

.row label {
    display: inline;
    width: 80px;
    font-size: 16px;
}

.row input[type='text'] {
    float: right;
    height: 20px;
    padding: 0 5px;
}

.btn {
    width: 80px;
    height: 30px;
    border: none;
    color: #FFFFFF;
    background: #7DCD85;
    cursor: pointer;
    outline: none;
    -webkit-transition: background .25s;
    -moz-transition: background .25s;
    -ms-transition: background .25s;
    -o-transition: background .25s;
    transition: background .25s;
}

.btn:hover {
    background: #6BB072;
}

.msgerr {
    margin: 5px;
    color: #f00;
    font-size: 12px;
}

## gistfile3.txt
<!-- views/pages/superheroes.ejs -->

<h1><%= title %></h1>
<ul>
<% for (var i=0; i<superheroes.length; i++) {%>
    <li><%= superheroes[i] %></li>
<% } %>
</ul>

## gistfile4.txt
<!-- views/pages/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head><% include ../partial/head.ejs %>
</head>
<body class="container">
    <header>
    </header>
    <main>
        <div class="jumbotron">
        <% include superheroes.ejs %>
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>

## gistfile5.txt
<!-- views/partials/head.ejs -->

<meta charset="UTF-8">
<title>My Super Heros website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=“anonymous">
<style>
  body    { padding-top:50px; }
 </style>

## gistfile6.txt
<!-- views/partials/header.ejs -->

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon glyphicon-tree-deciduous"></span>
                EJS Is Fun
            </a>
        </div>

        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>

    </div>
</nav>

## gistfile7.txt
<!-- views/partials/footer.ejs -->

<p class="text-center text-muted">© Copyright 2017 The Awesome Super Heroes Inc.</p>

## gistfile8.txt
mkdir module-demo && cd module-demo
nano circle.js

## gistfile9.txt
// circle.js

const PI = Math.PI;
module.exports.area = function(r) {
    return PI * r * r;
};

module.exports.circumference = (r) => {
    return 2 * PI * r;
}

## nodejs_ejs_template_3_6
// 把 view engine 設為 ejs
app.set('view engine', 'ejs');
// 假設你有個 `home.ejs`
// 外加個資料來源 model
res.render(‘home’, model);
	mkdir express_ejs
	cd express_ejs
	mkdir views && cd views
	mkdir pages && cd .. //<— 我們把所有 ejs 放在同一個地方來管理
	npm init
	npm install express —save
	npm install ejs —save
	nano index.js
	// index.js
	var circle = require(‘./circle’);

	console.log( ‘area:’ + circle.area(4) );
	console.log(‘circumference:’ + circle.circumference(4) );
	# MariaDB 5.5 CentOS repository list - created 2017-02-07 08:59 UTC
	# http://downloads.mariadb.org/mariadb/repositories/
	[mariadb]
	name = MariaDB
	baseurl = http://yum.mariadb.org/5.5/centos7-amd64
	gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
	gpgcheck=1
	sudo systemctl enable mariadb <— 讓他開機時自動啟動
	sudo systemctl start mariadb <— 啟動 MariaDB
	mysql —version <— 如果成功會看到版本訊息

	mysql Ver Distrib 5.5-MariaDB, for Linux (x86_64) using readline 5.1
	firewall-cmd —permanent —add-port=3306/tcp
	firewall-cmd —reload
	firewall-cmd —list-all
	mkdir mysql-demo && cd mysql-demo
	npm init
	npm install mysql —save
	npm install express —save
	npm install body-parser —save // 解析 post
	npm install moment —save //日期工具
	npm install ejs —save
	<!-- db.js -->
	var mysql = require('mysql');

	// 資料庫設定
	var conn = mysql.createConnection({
	user: 'admin',
	password: '1111',
	host: 'localhost',
	port: '3306',
	database: 'blogDB'
	});
	// 資料庫連線
	conn.connect( function(err) {
	if (err) {
	console.error('error connecting: ' + err.stack);
	return;
	}
	console.log('connected as id ' + conn.threadId);
	});

	module.exports = conn;
	<!-- blog.js -->
	var db = require('../db');
	var moment = require(‘moment'); // 解析日期時間的工具

	exports.getAllBlogs = function( callback ) { // 自製 callback function
	db.query('SELECT * FROM db_blog', function (err, rows) {
	if (err) {
	callback(err);
	}
	callback( null, rows ); // 把取得的資料送回去, 沒 error 放 null
	})
	}
	exports.insertBlog = function( _user, _data, callback ) {
	var insert_data ={
	user: _user,
	data: _data,
	dateTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
	}
	console.log(insert_data );
	db.query('INSERT INTO db_blog SET ?', insert_data, function (err) {
	if (err) {
	console.log('insert error:'+ err );
	callback(err);
	}
	callback(null);

	})
	}
	<!--index.js -->
	var express = require('express');
	var app = express();
	var bodyParser = require(‘body-parser’) // 用來解析 POST
	var moment = require('moment');
	var blog = require('./models/blog');

	app.set('view engine', ‘ejs'); // 學過了
	app.use(express.static(‘public')); // 學過了

	// 用來解析 application/x-www-form-urlencoded
	app.use( bodyParser.urlencoded({
	extended: true
	}));

	app.post('/insert', (req,res) => {
	var _user = req.body.user; // 學過了
	var _data = req.body.data;

	// 用我們的 model
	blog.insertBlog( _user, _data , function( err ){
	if (err) {
	console.log(err);
	}
	//res.send('inserted'); // for debugging
	res.redirect(‘/blog'); // 轉址
	} )
	});

	app.post('/insert', (req,res) => {
	var _user = req.body.user; // 學過了
	var _data = req.body.data;

	// 用我們的 model
	blog.insertBlog( _user, _data , function( err ){
	if (err) {
	console.log(err);
	}
	//res.send('inserted'); // for debugging
	res.redirect(‘/blog'); // 轉址
	} )
	});

	app.get('/blog', (req, res) => {
	blog.getAllBlogs( function( err, result ){
	var data = {
	title: 'My blogs',
	blogs: result,
	moment: moment
	}
	res.render('index.ejs', data ); // render( view , model )
	});
	});

	app.listen(8081, function () {
	console.log('Example app listening on port 8081!');
	});
	<!-- index.ejs -->
	<!DOCTYPE html>
	<html>
	<head>
	<link rel='stylesheet' href='/style.css' />
	</head>
	<body>
	<h1><%=title%></h1>
	<table class="table">
	<tr>
	<th>id</th>
	<th>user</th>
	<th>content</th>
	<th>date time</th>
	</tr>
	<% for ( var i = 0 ; i < blogs.length ; i++){ %>
	<tr>
	<td>
	<%= blogs[i].blogId %>
	</td>
	<td>
	<%= blogs[i].user %>
	</td>
	<td>
	<%= blogs[i].data %>
	</td>
	<td>
	<%= moment( blogs[i].dateTime ).format('Do MMMM, YYYY') %>
	</td>
	</tr>
	<% } %>
	</table>

	<div class="add">
	<form name="addform" action="insert" method="post" accept-charset="utf-8" >
	<div class="row">
	<h1>Blog - Add</h1>
	</div>
	<div class="row">
	<label>user：</label>
	<input type="text" name="user" placeholder="user" />
	</div>
	<div class="row">
	<label>content：</label>
	<input type="text" name="data" placeholder="content" />
	</div>
	<div class="control">
	<input class="btn" type='submit' value='Submit'>
	<input class="btn" type='reset' value='Reset'>
	</div>
	</form>
	</div>

	</body>
	</html>