Simple blog application in laravel 5 Part-5: Add tinyMCE and user profile

All parts of this series:

Simple blog application in laravel 5 - Introduction

Simple blog application in laravel 5 (part-1): Setup database

Simple blog application in laravel 5 (part-2): Routes and Models

Simple blog application in laravel 5 (part-3): Controllers

Simple blog application in laravel 5 (part-4): Build Front end

Simple blog application in laravel 5 (part-5): Add tinyMCE and User profile

This is final part of this series. In this part we will first add tinymce to our application then we will add functions to UserController class for showing profile, posts and drafts of a particular user and finally we will make a user profile front end.

Add tinyMCE to posts:

First download tinymce from http://www.tinymce.com/download/download.php and extract it in folder public/js. Now add it to your application. Change edit.blade.php as:

  1. @extends('app')
  2. @section('title')
  3. Edit Post
  4. @endsection
  5. @section('content')
  6. <script type="text/javascript" src="{{ asset('/js/tinymce/tinymce.min.js') }}"></script>
  7. <script type="text/javascript">
  8. tinymce.init({
  9. selector : "textarea",
  10. plugins : ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste"],
  11. toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
  12. });
  13. </script>
  14. <form method="post" action='{{ url("/update") }}'>
  15. <input type="hidden" name="_token" value="{{ csrf_token() }}">
  16. <input type="hidden" name="post_id" value="{{ $post->id }}{{ old('post_id') }}">
  17. <div class="form-group">
  18. <input required="required" placeholder="Enter title here" type="text" name = "title" class="form-control" value="@if(!old('title')){{$post->title}}@endif{{ old('title') }}"/>
  19. </div>
  20. <div class="form-group">
  21. <textarea name='body'class="form-control">
  22. @if(!old('body'))
  23. {!! $post->body !!}
  24. @endif
  25. {!! old('body') !!}
  26. </textarea>
  27. </div>
  28. @if($post->active == '1')
  29. <input type="submit" name='publish' class="btn btn-success" value = "Update"/>
  30. @else
  31. <input type="submit" name='publish' class="btn btn-success" value = "Publish"/>
  32. @endif
  33. <input type="submit" name='save' class="btn btn-default" value = "Save As Draft" />
  34. <a href="{{ url('delete/'.$post->id.'?_token='.csrf_token()) }}" class="btn btn-danger">Delete</a>
  35. </form>
  36. @endsection

Here we are adding to tinyMCE java script to textarea tag for generating rich-text editor. Also change create.blade.php:

  1. @extends('app')
  2. @section('title')
  3. Add New Post
  4. @endsection
  5. @section('content')
  6. <script type="text/javascript" src="{{ asset('/js/tinymce/tinymce.min.js') }}"></script>
  7. <script type="text/javascript">
  8. tinymce.init({
  9. selector : "textarea",
  10. plugins : ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste"],
  11. toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
  12. });
  13. </script>
  14. <form action="/new-post" method="post">
  15. <input type="hidden" name="_token" value="{{ csrf_token() }}">
  16. <div class="form-group">
  17. <input required="required" value="{{ old('title') }}" placeholder="Enter title here" type="text" name = "title"class="form-control" />
  18. </div>
  19. <div class="form-group">
  20. <textarea name='body'class="form-control">{{ old('body') }}</textarea>
  21. </div>
  22. <input type="submit" name='publish' class="btn btn-success" value = "Publish"/>
  23. <input type="submit" name='save' class="btn btn-default" value = "Save Draft" />
  24. </form>
  25. @endsection
Edit post page with tinyMCE WYSIWYG editor
Edit post page with tinyMCE WYSIWYG editor

Update:

I am updating this post for adding uploading image option to tinyMCE.

Upload Image:

First download the project from https://github.com/vikdiesel/justboil.me. Now extract the uploaded archive and rename the extracted folder to jbimages. Move this folder in the directory blog/public/js/tinymce/plugins. Now create one more folder with name images in blog/public directory. This is default destination where images will be stored. If you want to change default destination the config it in config.php file in jbimages folder (which is moved to plugins directory). Note that in this configuration path is relative to domain name and in laravel our domain directory in blog/public, not parent directory of blog. For example if you want to upload image in a folder blog/public/images/uploads then you have to just change in config.php (in jbimages folder) as:

  1. $config['img_path'] = '/images/uploads'; // Relative to domain name

Finally change the code for tinymce in edit.blade.php and create.blade.php as follow:

  1. tinymce.init({
  2. selector : "textarea",
  3. plugins : ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste jbimages"],
  4. toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
  5. });

Note that here we are adding only one more plugin jbimages (in the last in array plugins) and one toolbar named jbimages (in the last in array toolbar). Now we have upload image option. If you want to config more settings like images allow type, image sizes, etc. then change config.php file in jsimages folder.

User profile backend:

Change UserController.php as:

  1. <?php
  2. namespace App\Http\Controllers;
  3. use App\Http\Requests;
  4. use App\Http\Controllers\Controller;
  5. use App\User;
  6. use App\Posts;
  7. use Illuminate\Http\Request;
  8. class UserController extends Controller {
  9. /*
  10. * Display active posts of a particular user
  11. *
  12. * @param int $id
  13. * @return view
  14. */
  15. public function user_posts($id)
  16. {
  17. //
  18. $posts = Posts::where('author_id',$id)->where('active',1)->orderBy('created_at','desc')->paginate(5);
  19. $title = User::find($id)->name;
  20. return view('home')->withPosts($posts)->withTitle($title);
  21. }
  22. /*
  23. * Display all of the posts of a particular user
  24. *
  25. * @param Request $request
  26. * @return view
  27. */
  28. public function user_posts_all(Request $request)
  29. {
  30. //
  31. $user = $request->user();
  32. $posts = Posts::where('author_id',$user->id)->orderBy('created_at','desc')->paginate(5);
  33. $title = $user->name;
  34. return view('home')->withPosts($posts)->withTitle($title);
  35. }
  36. /*
  37. * Display draft posts of a currently active user
  38. *
  39. * @param Request $request
  40. * @return view
  41. */
  42. public function user_posts_draft(Request $request)
  43. {
  44. //
  45. $user = $request->user();
  46. $posts = Posts::where('author_id',$user->id)->where('active',0)->orderBy('created_at','desc')->paginate(5);
  47. $title = $user->name;
  48. return view('home')->withPosts($posts)->withTitle($title);
  49. }
  50. /**
  51. * profile for user
  52. */
  53. public function profile(Request $request, $id)
  54. {
  55. $data['user'] = User::find($id);
  56. if (!$data['user'])
  57. return redirect('/');
  58. if ($request -> user() && $data['user'] -> id == $request -> user() -> id) {
  59. $data['author'] = true;
  60. } else {
  61. $data['author'] = null;
  62. }
  63. $data['comments_count'] = $data['user'] -> comments -> count();
  64. $data['posts_count'] = $data['user'] -> posts -> count();
  65. $data['posts_active_count'] = $data['user'] -> posts -> where('active', '1') -> count();
  66. $data['posts_draft_count'] = $data['posts_count'] - $data['posts_active_count'];
  67. $data['latest_posts'] = $data['user'] -> posts -> where('active', '1') -> take(5);
  68. $data['latest_comments'] = $data['user'] -> comments -> take(5);
  69. return view('admin.profile', $data);
  70. }
  71. }

Update:

Note that I am using withPost() and withTitle() functions. Laravel provides dynamic functions for sending data in templates. withPost($post) is equivalent to with('post', $post) and withTitle($title) is equivalent to with('title', $title).

Front end for profile:

For displaying posts we are using same home.blade.php view without any change. So we have to only make view for profile which is returned by profile() function. Make a new folder in views folder with name admin and make a file with name profile.blade.php. Add this code to this file:

  1. @extends('app')
  2. @section('title')
  3. {{ $user->name }}
  4. @endsection
  5. @section('content')
  6. <div>
  7. <ul class="list-group">
  8. <li class="list-group-item">
  9. Joined on {{$user->created_at->format('M d,Y \a\t h:i a') }}
  10. </li>
  11. <li class="list-group-item panel-body">
  12. <table class="table-padding">
  13. <style>
  14. .table-padding td{
  15. padding: 3px 8px;
  16. }
  17. </style>
  18. <tr>
  19. <td>Total Posts</td>
  20. <td> {{$posts_count}}</td>
  21. @if($author && $posts_count)
  22. <td><a href="{{ url('/my-all-posts')}}">Show All</a></td>
  23. @endif
  24. </tr>
  25. <tr>
  26. <td>Published Posts</td>
  27. <td>{{$posts_active_count}}</td>
  28. @if($posts_active_count)
  29. <td><a href="{{ url('/user/'.$user->id.'/posts')}}">Show All</a></td>
  30. @endif
  31. </tr>
  32. <tr>
  33. <td>Posts in Draft </td>
  34. <td>{{$posts_draft_count}}</td>
  35. @if($author && $posts_draft_count)
  36. <td><a href="{{ url('my-drafts')}}">Show All</a></td>
  37. @endif
  38. </tr>
  39. </table>
  40. </li>
  41. <li class="list-group-item">
  42. Total Comments {{$comments_count}}
  43. </li>
  44. </ul>
  45. </div>
  46. <div class="panel panel-default">
  47. <div class="panel-heading"><h3>Latest Posts</h3></div>
  48. <div class="panel-body">
  49. @if(!empty($latest_posts[0]))
  50. @foreach($latest_posts as $latest_post)
  51. <p>
  52. <strong><a href="{{ url('/'.$latest_post->slug) }}">{{ $latest_post->title }}</a></strong>
  53. <span class="well-sm">On {{ $latest_post->created_at->format('M d,Y \a\t h:i a') }}</span>
  54. </p>
  55. @endforeach
  56. @else
  57. <p>You have not written any post till now.</p>
  58. @endif
  59. </div>
  60. </div>
  61. <div class="panel panel-default">
  62. <div class="panel-heading"><h3>Latest Comments</h3></div>
  63. <div class="list-group">
  64. @if(!empty($latest_comments[0]))
  65. @foreach($latest_comments as $latest_comment)
  66. <div class="list-group-item">
  67. <p>{{ $latest_comment->body }}</p>
  68. <p>On {{ $latest_comment->created_at->format('M d,Y \a\t h:i a') }}</p>
  69. <p>On post <a href="{{ url('/'.$latest_comment->post->slug) }}">{{ $latest_comment->post->title }}</a></p>
  70. </div>
  71. @endforeach
  72. @else
  73. <div class="list-group-item">
  74. <p>You have not commented till now. Your latest 5 comments will be displayed here</p>
  75. </div>
  76. @endif
  77. </div>
  78. </div>
  79. @endsection
User profile for demo blogging application in laravel 5
User profile for demo blogging application in laravel 5

This is end of our application if you could not understand anything then please leave comment for improving these tutorials.



About Harish Kumar

Harish is an interested person in the field of web development and blogging. He works for the need of young web developers in learning various languages, latest technologies and other essential tips and tricks. If you need some help or you have some suggestion then you email him at harish@findalltogether.com without any hesitation. You can also suggest/demand for articles of your own choice.

Related Articles

Laravel is a MVC framework. Models are the real world entities in data form. Views are the response content to the vi...
Laravel framework architecture
Routes map urls with the controllers. In this section we will read about how route maps urls with controllers and how...
Basics routing and controllers in laravel 5
Views are the HTML content served by the server. These are served by returning from controllers. Views are .php or .b...
View in Laravel 5

Login or Sign up to leave comment.


1 Comments

  • peter
    Hello, I loved this post, only one thing was not clear to me this part: PostFormRequest.php how this is linked with the user.php model or usercontroller, can you explain how these two were interlinked
    December 15, 2015 at 12:12 PM Reply

    Login or Sign up to reply.