Binding views together in laravel to create a blog
Question
I'm new in Laravel and I'm facing some difficulties to bind views together. I'm using Bootsrap and I'm also using tinyMCE as editor for posts(title, content). My create view works perfect, show view as well. All I need is, when my page redirects to show.blade.php where I have all my posts after I create them, I want my Update button to redirect me to my edit view where I can actually edit and update them and finally go back to show view. Thank you in advance :)
Here is my create view:
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=fg5tc8gb4rtw6p9n3njd2hi4965rketxda84pbcfs09hb5x2"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: '.editor1', plugins: 'code , save, autoresize , textcolor colorpicker , emoticons, textpattern , wordcount', toolbar: 'save , restoredraft , forecolor backcolor, emoticons', save_onsavecallback: function () { var content = tinymce.activeEditor.getContent(); console.log(content); } }); $(document).on('click', '#SubmitBtn', function () { var content = tinymce.activeEditor.getContent(); var data = { 'title': $('#title').val(), 'content': content, '_token': '{{csrf_token()}}' }; $.post('/postData', data, function () { console.log(data); window.location.href="/posts/show" }); }); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <h1>Create the title</h1> <form method="POST" action="{{route("postData")}}"> {{csrf_field()}} <label for="title">Click here to edit the title of your post!</label> <input type="text" name="title" id="title"/> <h1>Create the content</h1> <div class="editor1">Click here to edit the content of your post!</div> <input type="button" name="Submit" id="SubmitBtn" value="Submit"/> </form> </body> </html>
Here is my show view:
<!DOCTYPE html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Id.</th> <th>Title</th> <th>Content</th> <th>Views</th> <th>Action</th> </tr> </thead> <tbody> @foreach($posts as $post) <tr> <th scope="row"></th> <td>{{$post->id}}</td> <td>{{$post->title}}</td> <td>{!! html_entity_decode($post->content) !!}</td> <td>{{$post->view_count}}</td> <td><div class="btn pull-right"> <a href="{{ url('/posts/' . $post->id . '/edit') }}" class="btn btn-primary float-left">Update</a> </div></td> </tr> @endforeach </tbody> </table> </div> </body> </html>
Here is my current edit view which doesn't return me anything in my browser:
<!DOCTYPE html> <html> <head> </head> <body> <h1>Edit Post</h1> <form method="POST"><a href="{{route('posts.show', $post->id)}}"></a> {{csrf_field()}} <div class="form-group"> <label for="title">Title</label> <input type="text" id="title" class="form-control" name="title" placeholder="Title" value="{{$post->title}}"> </div> <div class="form-group"> <label for="content">Content</label> <textarea>{{$post->content}}</textarea> </div> <input type="button" name="Update" value="Update" /> </form> </body> </html>
Here are my routes:
Route::resource('/posts', 'PostController');
Route::get('/posts/create', ['uses' => 'PostController@create', 'as' => 'posts.create']);
Route::post('/postData', ['uses' => 'PostController@store', 'as' => 'postData']);
Route::get('/posts/{id}/edit', ['uses' => 'PostController@edit', 'as' => 'posts.edit']);
Route::get('/post/show', ['uses' => 'PostController@show', 'as' => 'posts.show']);
Route::get('/post/find/{id}', ['uses' => 'PostController@find']);
Route::get('/posts/{id}', ['uses' => 'PostController@update', 'as' => 'posts.update']);
And finally my Controller:
public function index()
{
$posts = Post::all();
return view('posts.index', compact('posts'));
}
public function create()
{
return view('posts.create');
}
public function store(Request $request)
{
$post = new Post;
$post->title = $request['title'];
$post->content = $request['content'];
$post->save();
return redirect()->route("posts.show");
}
public function show()
{
$posts = Post::all();
return view('posts.show', compact('posts'));
}
public function find($id)
{
$post = Post::find($id);
return $post->title." ".$post->content;
}
public function edit($id)
{
$post = Post::findOrFail($id);
return view('posts.edit', compact('post'));
}
2 answers
solution1
0 2017-07-17 14:44:15
Basically you need to learn the entire CRUD (Create, Read, Update and Delete) in laravel. Here are a few basic tips. I hope you know a few basic points like Routemodel binding. Its pretty easy.
Now what you need is to run php artisan make:controller PostController --resource (The resource flag is not important.) In your route\\web.php, write Route::resource('posts', 'PostController');
Your links will be <a href="{{route('posts.index')}}">View all</a> . to create, the form action will be {{route('posts.store')}} where you fill in the details. in the store function add
public function store(Request $request){
$data = $request->all();
Post::create($data);
return redirect('posts');
}
Make sure you have put the protected $fillable = []; values. in your blade to show individual post add:
<td>{{$post->title}}</td>
<td>{{$post->caption}}</td>
<td>{!! html_entity_decode($post->body) !!}</td>
While editing, the textarea for body should also have the
<textarea name="body">{!! html_entity_decode($post->body) !!}</textarea>
The link for the show page is <a href="{{route('posts.show', $post->id)}}"></a> and the edit is <a href="{{route('posts.edit', $post->id)}}"></a>
Make sure you add the variable in your controller for each of the functions.
public function show($id){
return view('posts.show', [ 'posts' => Post::findorfail($id), ]);
}
Same case with the edit.
solution2
0 2017-07-18 11:51:44
I solved it the long way by adding a new tinymce editor to the edit view this way:
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=fg5tc8gb4rtw6p9n3njd2hi4965rketxda84pbcfs09hb5x2"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: '.editor2', plugins: 'code , save, autoresize , textcolor colorpicker , emoticons, textpattern , wordcount', toolbar: 'save , restoredraft , forecolor backcolor, emoticons', save_onsavecallback: function () { var content = tinymce.activeEditor.getContent(); console.log(content); } }); $(document).on('click', '#SubmitBtn', function () { var content = tinyMCE.getContent('.editor1'); var inst, contents = new Post(); for (inst in tinyMCE.editors) { if (tinyMCE.editors[inst].getContent) contents[inst] = tinyMCE.editors[inst].getContent(); } }); </script>
<!DOCTYPE html> <html> <head> </head> <body> <h1>Create the title</h1> <form method="POST" action="{{route("postData")}}"> {{csrf_field()}} <label for="title">Click here to edit the title of your post!</label> <input type="text" name="title" id="title" value="{{ old('title', $post->title)}}"/> <h1>Create the content</h1> <label for="content">Click here to edit the content of your post!</label> <input type="text" name="content" class="editor2" value="{{ old('content', $post->content)}}"/> <input type="button" name="Update" id="SubmitBtn" value="Update"/> <input action="action" type="button" value="Back" onclick="window.history.go(-1); return false;" /> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.