servletとjsp

詳細なロジックは Servlet にまとめ、その処理結果を JSP に引き渡す
JSP は受け取った内容をどのように表示するのか、に専念する

ほう、そういうことね。

HelloServlet にリクエストがあると、 doGet メソッドが実行される。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// response.getWriter().append("Served at: ").append(request.getContextPath());
		String view = "/WEB-INF/view/index.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(view); 
		
		dispatcher.forward(request, response);
	}

RequestDispatcher#forwardメソッドを使用すると、処理を他のServletやJSPに転送することができる。
dispatcherでrequestを/web-inf/view/index.jspに行くよう指定する。

なにこれ、要するにサーバーサイドをjavaでやれるのね。

index.jspを作成する

index.jspファイルをつくります。なんだこれ、さすがに *.jsp は初めでだぞ。
つーか、なんだこれ、charsetがcharset=ISO-8859-1で、html4だ。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello, Java World!</title>
</head>
<body>
	<%= new java.util.Date() %>
</body>
</html>

JSPファイルはWebサーバ（ホームページのファイルを置くサーバ）上でお仕事をするJavaのプログラムで、HTMLファイルとJavaのプログラムが合体したもの

java server page そのままやんけ。
JSPファイルは基本的にはHTMLファイル
ただし、その中に、好きなようにJavaのコードを埋め込むことができる。

なるほど。
Java Servletが普通のJavaっぽい書き方になるのに対し、JSPファイルはPHPっぽい書き方になる。

なるほど、なるほど。

JSPファイルはjava servletに変換されるのね。

JSP Servletを動かそう

http://localhost:8080/TodoServlet3/HelloServlet

package todo.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class HelloServlet
 */
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

とりあえず、apache tomcatで動いています。
tomcatはJava Servletを動かすときに必要なソフト（サーブレットコンテナ）
chromeでも同じように動きます。

mysql varbinary

BINARY および VARBINARY 型は、CHAR および VARCHAR 型に似ていますが、非バイナリ文字列ではなく、バイナリ文字列を格納します。つまり、それらには文字の文字列ではなく、バイトの文字列が含まれています。これは、それらに文字セットがなく、ソートおよび比較は値の中のバイトの数値に基づいていることを意味します。

可変長バイナリバイト文字列
送られてきたデータをバイナリデータとして格納

CHAR型の特徴的な点は，値を格納された時に，もし文字列がテーブル作成時に指定された文字数よりも短かった場合，文字列の右側の末尾にスペースで補完

deleteItem

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		},
		methods: {
			addItem: function(e){
				e.preventDefault();
				this.todos.push(this.newItem);
				this.newItem = '';
			},
			deleteItem: function(index){
				if (confirm('are you sure?')){
					this.todos.splice(index, 1);
				}
			}
		}
	});
})();

<body>
	<div id="app" class="container">
		<h1>My Todo</h1>
		<ul>
			<li v-for="(todo, index) in todos">
			{{ todo }}
			<span @click="deleteItem(index)">[x]</span>
			</li>
		</ul>
	
	<form @submit="addItem">
		<input type="text" v-model="newItem">
		<input type="submit" value="Add">
	</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>
</body>

更にvue.js

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		}
	});
})();

for文

<div id="app">
		<ul>
			<li v-for="todo in todos">{{ todo }}</li>
		</ul>
	</div>

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		},
		methods: {
			addItem: function(e){
				e.preventDefault();
				this.todos.push(this.newItem);
				this.newItem = '';
			}
		}
	});
})();

vue.js

特徴は双方向データバインディング
データ、UI何れか更新されると、もう一方も更新される

<body>
	<div id="app">
		<p>Hello {{ name }}!</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>
</body>

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			name: 'yoshida'
		}
	});
})();

uiからdataへ

<div id="app">
		<p>Hello {{ name }}!</p>
		<p><input type="text" v-model="name"></p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>

なんじゃこりゃー

<p>Hello {{ name.toUpperCase() }}!</p>

tinyMCEのリアルタイムプレビュー

show.blade.php

<textarea id="myTextArea" name="body" class="mceEditor">{{ old('body') }}</textarea>
	@if($errors->has('body'))
	<span class="error">{{ $errors->first('body') }}</span>
	@endif
	<p>
		<input type="submit" value="登録">
	</p>
	</form>
	<div style="border:1px solid; width:300px; height:100px;" id="preview_area"></div>
	<script src="/js/main.js"></script>
	<script src="/js/tinymce/tinymce.min.js"></script>
	<script>
  	tinymce.init({
    mode : "specific_textareas",
    editor_selector : "mceEditor",
    init_instance_callback: function (editor) {
      editor.on('change', function (e) {
          $('#preview_area').html(editor.getContent());
      });
    }
  });
</script>

これはマジ凄い。

tinyMCEをlaravelに配置する

@extends('layouts.default')

@section('title', $article->login_id)

@section('content')
<h1>
	<a href="{{ action('ArticlesController@edit', $article->id)}}" class="register">編集</a>
	<a href="/">登録情報</a>
</h1>
	<h3>{{ $article->name}}</h3>
		<p>{{$article->login_id}}</p>
		<p>{{$article->name}}</p>
		<p>{{$article->role}}</p>
		<p>{{$article->password}}</p>

<h2>Documents</h2>
<ul>
		@forelse ($article->documents as $document)
		<li>{{ $document->body }} <a href="#" class="del" data-id="{{ $document->id }}">[x]</a>
		<form method="post" action="{{ action('DocumentsController@destroy', &#91;$article, $document&#93;) }}" id="form_{{ $document->id }}">
      {{ csrf_field() }}
      {{ method_field('delete') }}
    </form></li>
		@empty
		<li>No document yet</li>
		@endforelse
</ul>
<form method="post" action="{{ action('DocumentsController@store', $article) }}">
		{{ csrf_field()}}
	<p>
		<input type="text" name="mobile" placeholder="iphone/android" value="{{ old('mobile') }}">
		@if($errors->has('mobile'))
		<span class="error">{{ $errors->first('mobile') }}</span>
		@endif
	</p>
	<p>
		<input type="text" name="published_at" placeholder="配信日" value="{{ old('published_at') }}">
		@if($errors->has('published_at'))
		<span class="error">{{ $errors->first('published_at') }}</span>
		@endif
	</p>
	<!-- <p>
		<input type="text" name="body" placeholder="原稿" value="{{ old('body') }}">
		@if($errors->has('body'))
		<span class="error">{{ $errors->first('body') }}</span>
		@endif
	</p> -->
	<textarea id="myTextArea" name="body">{{ old('body') }}</textarea>
	@if($errors->has('body'))
	<span class="error">{{ $errors->first('body') }}</span>
	@endif
	<p>
		<input type="submit" value="登録">
	</p>
	</form>
	<script src="/js/main.js"></script>
	<script src="/js/tinymce/tinymce.min.js"></script>
	<script>
		tinymce.init({
		selector: "textarea",  
	});
	</script>
@endsection

tinyMCE

登録後

なるほど～

tinyMCEをpost

<?php
// function eh($s) { echo htmlspecialchars($s, ENT_QUOTES, "UTF-8"); }
$data = filter_input(INPUT_POST, "name");
?>
<!DOCTYPE html>
<html>
<head>
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>
		tinymce.init({
		selector: "textarea",  
	});
	</script>
</head>
<body>
	<h1>テキストを入力してください</h1>
	<form method="post">
		<textarea id="myTextArea" name="name"></textarea>
		<input type="submit" value="送信">
	</form>
	<h2>送信データ</h2>
	<?php if($data){ ?>
		<pre><?php echo $data; ?></pre>
	<?php } ?>
</body>
</html>

ok

これをlaravelに実装する