wip: work in progress
refactoring
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | public function test_an_author_can_be_created(){ $this ->post( '/authors' , $this ->data()); $author = Author::all(); $this ->assertCount(1, $author ); $this ->assertInstanceOf(Carbon:: class , $author ->first()->dob); $this ->assertEquals( '1988/14/05' , $author ->first()->dob->format( 'Y/d/m' )); } private function data(){ return [ 'name' => 'Author Name' , 'dob' => '05/14/1988' ]; } |
$ phpunit –filter test_an_author_can_be_created
1 2 3 4 5 6 7 8 9 10 11 12 | public function test_a_name_is_required(){ $response = $this ->post( '/authors' , array_merge ( $this ->data(), [ 'name' => '' ])); $response ->assertSessionHasErrors( 'name' ); } public function test_a_dob_is_required(){ $response = $this ->post( '/authors' , array_merge ( $this ->data(), [ 'dob' => '' ])); $response ->assertSessionHasErrors( 'dob' ); } |
controller
1 2 3 4 5 6 7 8 9 10 11 12 | public function store(){ $data = $this ->validateData(); Author::create( $data ); } protected function validateData(){ return request()->vadidate([ 'name' => 'required' , 'dob' => '' , ]); } |
### tailwindcss
$ php artisan help preset
$ php artisan preset none
$ php artisan preset vue
$ npm install
https://tailwindcss.com/
$ npm install tailwindcss –save-dev
app.scss
1 2 3 4 5 | @tailwind base; @tailwind components; @tailwind utilities; |
$ npx tailwind init
webpack.mix.js
1 2 3 4 5 6 7 | const tailwindcss = require( 'tailwindcss' ); mix.js( 'resources/js/app.js' , 'public/js' ) .sass( 'resources/sass/app.scss' , 'public/css' ) .options({ processCssUrls: false , postCss: [ tailwindcss( './.config.js' ) ], }); |
$ npm install webpack
$ npm run dev
authors/create.blade.php
1 2 3 4 5 6 7 | @ extends ( 'layouts.app' ) @section( 'content' ) <dvi class = "bg-gray-300 h-screen" > asdfg </dvi> @endsection |
web.php
1 | Route::get( '/authors/create' , 'AuthorsController@create' ); |
create.blade.php
test
1 2 3 4 5 6 7 | @ extends ( 'layouts.app' ) @section( 'content' ) <div class = "w-2/3 bg-gray-200 mx-auto" > asdfg </div> @stop |
### @errorの
styling
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class = "w-2/3 bg-gray-200 mx-auto p-6 shadow" > <form action= "/authors" method= "post" class = "flex flex-col items-center" > @csrf <h1>Add New Author</h1> <div class = "pt-4" > <input type= "text" name= "name" placeholder= "Full Name" class = "rounded px-4 py-2 w-64" > @ if {{ $errors ->has( 'dob' )}} <p class = "text-red-600" >{{ $errors ->first( 'name' )}}</p> @ endif </div> <div class = "pt-4" > <input type= "text" name= "dob" placeholder= "Date of Birth" class = "rounded px-4 py-2 w-64" > @ if {{ $errors ->has( 'dob' )}} <p class = "text-red-600" >{{ $errors ->first( 'dob' )}}</p> @ endif </div> <div class = "pt-4" > <button class = "bg-blue-400 text-white rounded py-2 px-4" >Add New Author</button> </div> </form> </div> |
1 | @error( 'name' ) <p class = "text-red-600" >{{ $message }}</p> @enderror |
tailwindはモダンな感じがする
しかし、6系になってフロント周りを中心に随分仕様が変わってます。